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

package/lib/components/EditInPlace/EditInPlace.js

@@ -12,8 +12,8 @@ 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 icons = require('@carbon/react/icons');
 var settings = require('../../settings.js');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -21,6 +21,7 @@ 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 _Close, _Checkmark, _Edit;
 var _excluded = ["cancelLabel", "editAlwaysVisible", "editLabel", "id", "inheritTypography", "invalid", "invalidLabel", "invalidText", "labelText", "onCancel", "onChange", "onSave", "saveLabel", "size", "tooltipAlignment", "value"];
@@ -147,7 +148,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: index["default"](blockClass, "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--focused"), focused), "".concat(blockClass, "--invalid"), invalid), "".concat(blockClass, "--inherit-type"), inheritTypography), "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth)),
+    className: cx__default["default"](blockClass, "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--focused"), focused), "".concat(blockClass, "--invalid"), invalid), "".concat(blockClass, "--inherit-type"), inheritTypography), "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth)),
     onFocus: onFocusHandler,
     onBlur: onBlurHandler
   }, /*#__PURE__*/React__default["default"].createElement("label", {
@@ -155,7 +156,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     htmlFor: id
   }, labelText), /*#__PURE__*/React__default["default"].createElement("input", {
     id: id,
-    className: index["default"]("".concat(blockClass, "__text-input"), "".concat(settings.carbon.prefix, "--text-input"), "".concat(settings.carbon.prefix, "--text-input--").concat(size)),
+    className: cx__default["default"]("".concat(blockClass, "__text-input"), "".concat(settings.carbon.prefix, "--text-input"), "".concat(settings.carbon.prefix, "--text-input--").concat(size)),
     type: "text",
     value: value,
     onChange: onChangeHandler,
@@ -196,7 +197,7 @@ exports.EditInPlace = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: 16
   })))) : /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
     align: tipAlignments.edit,
-    className: index["default"]("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
+    className: cx__default["default"]("".concat(blockClass, "__btn"), "".concat(blockClass, "__btn-edit"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__btn-edit--always-visible"), editAlwaysVisible)),
     size: size,
     label: editLabel,
     onClick: onFocusHandler,
@@ -216,27 +217,27 @@ var deprecatedProps = {
    * **Deprecated**
    * invalidLabel was misnamed, using invalidText to match Carbon
    */
-  invalidText: index$1["default"].string
+  invalidText: index["default"].string
 };
-var alignPropType = index$1["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']);
+var alignPropType = index["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']);
 exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * label for cancel button
    */
-  cancelLabel: index$1["default"].string.isRequired,
+  cancelLabel: index["default"].string.isRequired,
   /**
    * By default the edit icon is shown on hover only.
    */
-  editAlwaysVisible: index$1["default"].bool,
+  editAlwaysVisible: index["default"].bool,
   /**
   /**
    * label for edit button
    */
-  editLabel: index$1["default"].string.isRequired,
+  editLabel: index["default"].string.isRequired,
   /**
    * Specify a custom id for the input
    */
-  id: index$1["default"].string.isRequired,
+  id: index["default"].string.isRequired,
   /**
    * inheritTypography - causes the text entry field to inherit typography settings
    * assigned to the container. This is useful when editing titles for instance.
@@ -244,31 +245,31 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * NOTE: The size property limits the vertical size of the input element.
    * Inherited font's should be selected to fit within the size selected.
    */
-  inheritTypography: index$1["default"].bool,
+  inheritTypography: index["default"].bool,
   /**
    * determines if the input is invalid
    */
-  invalid: index$1["default"].bool,
+  invalid: index["default"].bool,
   /**
    * text that is displayed if the input is invalid
    */
-  invalidText: index$1["default"].string,
+  invalidText: index["default"].string,
   /**
    * Provide the text that will be read by a screen reader when visiting this control
    */
-  labelText: index$1["default"].string.isRequired,
+  labelText: index["default"].string.isRequired,
   /**
    * handler that is called when the cancel button is pressed or when the user removes focus from the input and there is no new value
    */
-  onCancel: index$1["default"].func.isRequired,
+  onCancel: index["default"].func.isRequired,
   /**
    * handler that is called when the input is updated
    */
-  onChange: index$1["default"].func.isRequired,
+  onChange: index["default"].func.isRequired,
   /**
    * handler that is called when the save button is pressed or when the user removes focus from the input if it has a new value
    */
-  onSave: index$1["default"].func.isRequired,
+  onSave: index["default"].func.isRequired,
   /**
    * determines if the input is in readOnly mode
    */
@@ -280,17 +281,17 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * label for save button
    */
-  saveLabel: index$1["default"].string.isRequired,
+  saveLabel: index["default"].string.isRequired,
   /**
    * vertical size of control
    */
-  size: index$1["default"].oneOf(['sm', 'md', 'lg']),
+  size: index["default"].oneOf(['sm', 'md', 'lg']),
   /**
    * tooltipAlignment from the standard tooltip. Default center.
    *
    * Can be passed either as one of tooltip options or as an object specifying cancel, edit and save separately
    */
-  tooltipAlignment: index$1["default"].oneOfType([alignPropType, index$1["default"].shape({
+  tooltipAlignment: index["default"].oneOfType([alignPropType, index["default"].shape({
     cancel: alignPropType,
     edit: alignPropType,
     save: alignPropType
@@ -298,7 +299,7 @@ exports.EditInPlace.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * current value of the input
    */
-  value: index$1["default"].string.isRequired
+  value: index["default"].string.isRequired
 }, deprecatedProps);
 
 exports.deprecatedProps = deprecatedProps;

package/lib/components/EditSidePanel/EditSidePanel.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 settings = require('../../settings.js');
 var react = require('@carbon/react');
@@ -23,6 +23,7 @@ var SidePanel = require('../SidePanel/SidePanel.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", "disableSubmit", "id", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
 
@@ -91,7 +92,7 @@ exports.EditSidePanel = /*#__PURE__*/React__default["default"].forwardRef(functi
     placement: placement,
     slideIn: slideIn,
     animateTitle: false,
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     size: size,
     preventCloseOnClickOutside: true,
     actions: actions
@@ -120,84 +121,84 @@ exports.EditSidePanel.propTypes = {
   /**
    * Sets the body content of the create side panel
    */
-  children: index$1["default"].oneOfType([index$1["default"].arrayOf(index$1["default"].node), index$1["default"].node]).isRequired,
+  children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
    * Returning `true` prevents the primary button from being clicked until required fields are completed.
    */
-  disableSubmit: index$1["default"].bool,
+  disableSubmit: index["default"].bool,
   /**
    * Specifies an optional field that provides a additional context for a form
    */
-  formDescription: index$1["default"].node,
+  formDescription: index["default"].node,
   /**
    * Specifies a required field that provides a title for a form
    */
-  formTitle: index$1["default"].node.isRequired,
+  formTitle: index["default"].node.isRequired,
   /**
    * Unique identifier
    */
-  id: index$1["default"].string,
+  id: index["default"].string,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.
    */
-  onRequestClose: index$1["default"].func,
+  onRequestClose: index["default"].func,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * primary button is pressed.
    */
-  onRequestSubmit: index$1["default"].func,
+  onRequestSubmit: index["default"].func,
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
-  open: index$1["default"].bool,
+  open: index["default"].bool,
   /**
    * Determines if the side panel is on the right or left
    */
-  placement: index$1["default"].oneOf(['left', 'right']),
+  placement: index["default"].oneOf(['left', 'right']),
   /**
    * Specifies the primary button's text in the modal.
    */
-  primaryButtonText: index$1["default"].string.isRequired,
+  primaryButtonText: index["default"].string.isRequired,
   /**
    * Specifies the secondary button's text in the modal.
    */
-  secondaryButtonText: index$1["default"].string.isRequired,
+  secondaryButtonText: index["default"].string.isRequired,
   /**
    * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
    * This prop is required when using the `slideIn` variant of the side panel.
    */
-  selectorPageContent: index$1["default"].string.isRequired.if(function (_ref2) {
+  selectorPageContent: index["default"].string.isRequired.if(function (_ref2) {
     var slideIn = _ref2.slideIn;
     return slideIn;
   }),
   /**
    * Specifies which DOM element in the form should be focused.
    */
-  selectorPrimaryFocus: index$1["default"].node.isRequired,
+  selectorPrimaryFocus: index["default"].node.isRequired,
   /**
    * Sets the size of the side panel
    */
-  size: index$1["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
+  size: index["default"].oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
   /**
    * Specifies which DOM element in the form should be focused.
    */
-  slideIn: index$1["default"].bool,
+  slideIn: index["default"].bool,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
    */
-  slug: index$1["default"].node,
+  slug: index["default"].node,
   /**
    * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
    */
-  subtitle: index$1["default"].node,
+  subtitle: index["default"].node,
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */
-  title: index$1["default"].node.isRequired
+  title: index["default"].node.isRequired
 };

package/lib/components/EditTearsheet/EditTearsheet.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 react = require('@carbon/react');
 var settings = require('../../settings.js');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -21,6 +21,7 @@ var TearsheetShell = require('../Tearsheet/TearsheetShell.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 = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
 var componentName = 'EditTearsheet';
@@ -109,7 +110,7 @@ exports.EditTearsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClick: onClose,
       kind: 'ghost'
     }],
-    className: index["default"](blockClass, className),
+    className: cx__default["default"](blockClass, className),
     description: description,
     hasCloseIcon: false,
     influencer: defaultInfluencer(),
@@ -151,61 +152,61 @@ exports.EditTearsheet.propTypes = {
   /**
    * The cancel button text
    */
-  cancelButtonText: index$1["default"].string,
+  cancelButtonText: index["default"].string,
   /**
    * The main content of the tearsheet
    */
-  children: index$1["default"].node,
+  children: index["default"].node,
   /**
    * An optional class or classes to be added to the outermost element.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
-  description: index$1["default"].node,
+  description: index["default"].node,
   /**
    * Used to set the size of the influencer
    */
-  influencerWidth: index$1["default"].oneOf(['narrow', 'wide']),
+  influencerWidth: index["default"].oneOf(['narrow', 'wide']),
   /**
    * A label for the tearsheet, displayed in the header area of the tearsheet
    * to maintain context for the tearsheet (e.g. as the title changes from page
    * to page of a multi-page task).
    */
-  label: index$1["default"].node,
+  label: index["default"].node,
   /**
    * An optional handler that is called when the user closes the tearsheet (by
    * clicking the close button, if enabled, or clicking outside, if enabled).
    * Returning `false` here prevents the modal from closing.
    */
-  onClose: index$1["default"].func,
+  onClose: index["default"].func,
   /**
    * An optional handler that is called when a user changes forms via clicking
    * an influencer nav item.
    * Returns the index of the selected form.
    */
-  onFormChange: index$1["default"].func,
+  onFormChange: index["default"].func,
   /**
    * Specify a handler for submitting the tearsheet.
    */
-  onRequestSubmit: index$1["default"].func.isRequired,
+  onRequestSubmit: index["default"].func.isRequired,
   /**
    * Specifies whether the tearsheet is currently open.
    */
-  open: index$1["default"].bool,
+  open: index["default"].bool,
   /**
    * Specifies the aria label for the SideNav from Carbon UIShell
    */
-  sideNavAriaLabel: index$1["default"].string,
+  sideNavAriaLabel: index["default"].string,
   /**
    * The submit button text
    */
-  submitButtonText: index$1["default"].string,
+  submitButtonText: index["default"].string,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
-  title: index$1["default"].node,
+  title: index["default"].node,
   /**
    * The position of the top of tearsheet in the viewport. The 'normal'
    * position (the default) is a short distance down from the top of the
@@ -213,7 +214,7 @@ exports.EditTearsheet.propTypes = {
    * from below. The 'lower' position provides a little extra room at the top
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
-  verticalPosition: index$1["default"].oneOf(['normal', 'lower'])
+  verticalPosition: index["default"].oneOf(['normal', 'lower'])
 };
 
 exports.FormContext = FormContext;

package/lib/components/EditTearsheet/EditTearsheetForm.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 react = require('@carbon/react');
 var EditTearsheet = require('./EditTearsheet.js');
 var settings = require('../../settings.js');
@@ -22,6 +22,7 @@ var useRetrieveFormTitles = require('../../global/js/hooks/useRetrieveFormTitles
 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", "description", "fieldsetLegendText", "hasFieldset", "subtitle", "title"];
 var componentName = 'EditTearsheetForm';
@@ -49,7 +50,7 @@ exports.EditTearsheetForm = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     title: title
   });
   return formContext ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: index["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm))),
+    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm))),
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement(react.Grid, null, /*#__PURE__*/React__default["default"].createElement(react.Column, {
     xlg: 12,
@@ -76,21 +77,21 @@ exports.EditTearsheetForm.propTypes = {
   /**
    * Content that shows in the tearsheet form
    */
-  children: index$1["default"].node,
+  children: index["default"].node,
   /**
    * Sets an optional className to be added to the tearsheet form
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Sets an optional description on the form component
    */
-  description: index$1["default"].string,
+  description: index["default"].string,
   /**
    * This is the required legend text that appears above a fieldset html element for accessibility purposes.
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's form content.
    * Otherwise, use CSS to hide/remove this label text.
    */
-  fieldsetLegendText: index$1["default"].string.isRequired.if(function (_ref2) {
+  fieldsetLegendText: index["default"].string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
   }),
@@ -99,13 +100,13 @@ exports.EditTearsheetForm.propTypes = {
    * and is defaulted to true.
    * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's form content.
    */
-  hasFieldset: index$1["default"].bool,
+  hasFieldset: index["default"].bool,
   /**
    * Sets an optional subtitle on the form component
    */
-  subtitle: index$1["default"].string,
+  subtitle: index["default"].string,
   /**
    * Sets the title text for a tearsheet form
    */
-  title: index$1["default"].node.isRequired
+  title: index["default"].node.isRequired
 };

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.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"];
 
@@ -53,7 +54,7 @@ exports.EditTearsheetNarrow = /*#__PURE__*/React__default["default"].forwardRef(
     className = _ref.className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    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.
@@ -81,11 +82,11 @@ exports.EditTearsheetNarrow.propTypes = {
   /**
    * Provide the contents of the EditTearsheetNarrow.
    */
-  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
 
   /* TODO: add types and DocGen for all props. */
 };

package/lib/components/EditUpdateCards/EditUpdateCards.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 settings = require('../../settings.js');
 var ProductiveCard = require('../ProductiveCard/ProductiveCard.js');
@@ -20,6 +20,7 @@ var ProductiveCard = require('../ProductiveCard/ProductiveCard.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", "className", "description", "editChildren", "editMode", "label", "onPrimaryButtonClick", "onSecondaryButtonClick", "previewChildren", "title", "titleSize", "primaryButtonIcon", "primaryButtonText", "secondaryButtonIcon", "secondaryButtonText"];
 // import { children } from 'cheerio/lib/api/traversing';
@@ -85,7 +86,7 @@ exports.EditUpdateCards = /*#__PURE__*/React__default["default"].forwardRef(func
     secondaryButtonText: secondaryButtonText
   };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    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}`,
@@ -117,93 +118,93 @@ exports.EditUpdateCards.propTypes = {
   /**
    * Icons that are displayed on card. Refer to design documentation for implementation guidelines
    */
-  actionIcons: index$1["default"].arrayOf(index$1["default"].shape({
-    id: index$1["default"].string,
-    icon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
-    onKeyDown: index$1["default"].func,
-    onClick: index$1["default"].func,
-    iconDescription: index$1["default"].string,
-    href: index$1["default"].string
+  actionIcons: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string,
+    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+    onKeyDown: index["default"].func,
+    onClick: index["default"].func,
+    iconDescription: index["default"].string,
+    href: index["default"].string
   })),
   /**
    * Determines if the action icons are on the top or bottom of the card
    */
-  actionsPlacement: index$1["default"].oneOf(['top', 'bottom']),
+  actionsPlacement: index["default"].oneOf(['top', 'bottom']),
   /**
    * Optional label for the top of the card.
    */
-  className: index$1["default"].string,
+  className: index["default"].string,
   /**
    * Optional header description
    */
-  description: index$1["default"].string,
+  description: index["default"].string,
   /**
    * Edit mode children
    */
-  editChildren: index$1["default"].node,
+  editChildren: index["default"].node,
   /**
    * Edit mode
    */
-  editMode: index$1["default"].bool,
+  editMode: index["default"].bool,
   /**
    * Optional label for the top of the card
    */
-  label: index$1["default"].string,
+  label: index["default"].string,
   /**
    * Function that's called from the primary button or action icon
    */
-  onPrimaryButtonClick: index$1["default"].func,
+  onPrimaryButtonClick: index["default"].func,
   /**
    * Function that's called from the secondary button or action icon
    */
-  onSecondaryButtonClick: index$1["default"].func,
+  onSecondaryButtonClick: index["default"].func,
   /**
    * Preview mode children
    */
-  previewChildren: index$1["default"].node,
+  previewChildren: index["default"].node,
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
-  primaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
+  primaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Establishes the kind of button displayed for the primary button
    */
-  primaryButtonKind: index$1["default"].oneOf(['primary', 'ghost']),
+  primaryButtonKind: index["default"].oneOf(['primary', 'ghost']),
   /**
    * Determines if the primary button is on the top or bottom of the card
    */
-  primaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
+  primaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
   /**
    * The text that's displayed in the primary button
    */
-  primaryButtonText: index$1["default"].string,
+  primaryButtonText: index["default"].string,
   /**
    * Optionally specify an href for your Button to become an <a> element
    */
-  secondaryButtonHref: index$1["default"].string,
+  secondaryButtonHref: index["default"].string,
   /**
    * Optional prop to allow overriding the icon rendering. Can be a React component class
    */
-  secondaryButtonIcon: index$1["default"].oneOfType([index$1["default"].func, index$1["default"].object]),
+  secondaryButtonIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   /**
    * Establishes the kind of button displayed for the secondary button
    */
-  secondaryButtonKind: index$1["default"].oneOf(['secondary', 'ghost']),
+  secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
   /**
    * Determines if the secondary button is on the top or bottom of the card
    */
-  secondaryButtonPlacement: index$1["default"].oneOf(['top', 'bottom']),
+  secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
   /**
    * The text that's displayed in the secondary button
    */
-  secondaryButtonText: index$1["default"].string,
+  secondaryButtonText: index["default"].string,
   /**
    * Title that's displayed at the top of the card
    */
-  title: index$1["default"].string,
+  title: index["default"].string,
   /**
    * Determines title size
    */
-  titleSize: index$1["default"].oneOf(['default', 'large'])
+  titleSize: index["default"].oneOf(['default', 'large'])
   /* TODO: add types and DocGen for all props. */
 };