@carbon/ibm-products 2.20.0 → 2.21.0

package/es/components/Datagrid/useStickyColumn.js

@@ -143,17 +143,16 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
 var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
   var column = data.column || data.cell.column;
   if (column.sticky === 'right') {
-    var _cx;
     return [props, _objectSpread({
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), false), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+      className: cx(_defineProperty(_defineProperty(_defineProperty({}, "".concat(styleClassPrefix, "-").concat(elementName), true), "".concat(blockClass, "__resizableColumn"), false), "".concat(blockClass, "__sortableColumn"), false))
     }, headerCellRef && {
       ref: headerCellRef
     })];
   }
   if (column.sticky === 'left') {
-    var _data$instance, _cx2;
+    var _data$instance;
     return [props, _objectSpread({
-      className: cx((_cx2 = {}, _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), _defineProperty(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
+      className: cx(_defineProperty(_defineProperty({}, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 || (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671))
     }, headerCellRef && {
       ref: headerCellRef
     })];

package/es/components/Datagrid/utils/filterPropsForTesting.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { handleFilterTagLabelText } from './handleFilterTagLabelText';
+export var generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
+  return {
+    id: "".concat(index),
+    labelText: "Dummy checkbox ".concat(index + 1),
+    value: 'dummy-checkbox',
+    disabled: true
+  };
+});
+export var filterProps = function filterProps() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$includeManyCheck = _ref.includeManyCheckboxes,
+    includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
+    _ref$dropdownOnChange = _ref.dropdownOnChange,
+    dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
+  var checkboxList = [{
+    id: 'normal',
+    labelText: 'Normal',
+    value: 'normal'
+  }, {
+    id: 'minor-warning',
+    labelText: 'Minor warning',
+    value: 'minor-warning'
+  }, {
+    id: 'critical',
+    labelText: 'Critical',
+    value: 'critical'
+  }].concat(_toConsumableArray(includeManyCheckboxes ? generateDummyCheckboxes : []));
+  return {
+    autoHideFilters: includeManyCheckboxes ? false : true,
+    variation: 'panel',
+    panelIconDescription: 'Open filters',
+    sections: [{
+      categoryTitle: 'Category title',
+      hasAccordion: true,
+      filters: [{
+        filterLabel: 'Joined',
+        filter: {
+          type: 'date',
+          column: 'joined',
+          props: {
+            DatePicker: {
+              datePickerType: 'range'
+            },
+            DatePickerInput: {
+              start: {
+                id: 'date-picker-input-id-start',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined start date'
+              },
+              end: {
+                id: 'date-picker-input-id-end',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined end date'
+              }
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Status',
+        filter: {
+          type: 'dropdown',
+          column: 'status',
+          props: {
+            Dropdown: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+              id: 'marital-status-dropdown'
+            }, 'aria-label', 'Marital status dropdown'), "items", ['relationship', 'complicated', 'single']), "label", 'Marital status'), "titleText", 'Marital status'), "onChange", dropdownOnChange)
+          }
+        }
+      }]
+    }, {
+      categoryTitle: 'Category title',
+      filters: [{
+        filterLabel: 'Role',
+        filter: {
+          type: 'radio',
+          column: 'role',
+          props: {
+            FormGroup: {
+              legendText: 'Role'
+            },
+            RadioButtonGroup: {
+              orientation: 'vertical',
+              legend: 'Role legend',
+              name: 'role-radio-button-group'
+            },
+            RadioButton: [{
+              id: 'developer',
+              labelText: 'Developer',
+              value: 'developer'
+            }, {
+              id: 'designer',
+              labelText: 'Designer',
+              value: 'designer'
+            }, {
+              id: 'researcher',
+              labelText: 'Researcher',
+              value: 'researcher'
+            }]
+          }
+        }
+      }, {
+        filterLabel: 'Visits',
+        filter: {
+          type: 'number',
+          column: 'visits',
+          props: {
+            NumberInput: {
+              min: 0,
+              id: 'visits-number-input',
+              invalidText: 'A valid value is required',
+              label: 'Visits',
+              placeholder: 'Type a number amount of visits'
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Password strength',
+        filter: {
+          type: 'checkbox',
+          column: 'passwordStrength',
+          props: {
+            FormGroup: {
+              legendText: 'Password strength'
+            },
+            Checkbox: checkboxList
+          }
+        }
+      }]
+    }],
+    renderLabel: function renderLabel(key, value) {
+      return handleFilterTagLabelText(key, value);
+    },
+    renderDateLabel: function renderDateLabel(start, end) {
+      var startDateObj = new Date(start);
+      var endDateObj = new Date(end);
+      return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
+    }
+  };
+};

package/es/components/EditInPlace/EditInPlace.js

@@ -29,7 +29,6 @@ var defaults = {
   size: 'sm'
 };
 export var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _cx;
   var cancelLabel = _ref.cancelLabel,
     editAlwaysVisible = _ref.editAlwaysVisible,
     editLabel = _ref.editLabel,
@@ -148,7 +147,7 @@ export var EditInPlace = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, "".concat(blockClass, "--").concat(size), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "--focused"), focused), _defineProperty(_cx, "".concat(blockClass, "--invalid"), invalid), _defineProperty(_cx, "".concat(blockClass, "--inherit-type"), inheritTypography), _defineProperty(_cx, "".concat(blockClass, "--overflows"), inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth), _cx)),
+    className: cx(blockClass, "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_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.createElement("label", {

package/es/components/EditTearsheet/EditTearsheetForm.js

@@ -25,7 +25,6 @@ var defaults = {
   hasFieldset: true
 };
 export var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _cx;
   var children = _ref.children,
     className = _ref.className,
     description = _ref.description,
@@ -43,7 +42,7 @@ export var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: title
   });
   return formContext ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _defineProperty(_cx, "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _cx)),
+    className: cx(blockClass, className, _defineProperty(_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.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 12,

package/es/components/FilterSummary/FilterSummary.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["key", "value"];
+var _excluded = ["className", "clearFiltersText", "clearFilters", "filters", "renderLabel", "overflowType", "clearButtonInline"],
+  _excluded2 = ["key", "value"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -16,6 +18,7 @@ import cx from 'classnames';
 import { TagSet } from '../TagSet';
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
 var blockClass = "".concat(pkg.prefix, "--filter-summary");
 var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _filterSummaryClearBu;
@@ -23,22 +26,21 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$clearFiltersText = _ref.clearFiltersText,
     clearFiltersText = _ref$clearFiltersText === void 0 ? 'Clear filters' : _ref$clearFiltersText,
-    _ref$clearFilters = _ref.clearFilters,
-    clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
-    _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    clearFilters = _ref.clearFilters,
+    filters = _ref.filters,
     _ref$renderLabel = _ref.renderLabel,
     renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel,
     _ref$overflowType = _ref.overflowType,
     overflowType = _ref$overflowType === void 0 ? 'default' : _ref$overflowType,
     _ref$clearButtonInlin = _ref.clearButtonInline,
-    clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin;
+    clearButtonInline = _ref$clearButtonInlin === void 0 ? true : _ref$clearButtonInlin,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var filterSummaryId = "".concat(blockClass, "__").concat(uuidv4());
   var tagFilters = filters.map(function (_ref2) {
     var _renderLabel;
     var key = _ref2.key,
       value = _ref2.value,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+      rest = _objectWithoutProperties(_ref2, _excluded2);
     return _objectSpread(_objectSpread({}, rest), {}, {
       type: 'gray',
       label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
@@ -46,12 +48,13 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
   var filterSummaryClearButton = useRef();
   var filterSummaryRef = useRef();
-  var localRef = filterSummaryRef || ref;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: localRef,
-    className: cx([blockClass, className]),
+  var localRef = ref || filterSummaryRef;
+  return /*#__PURE__*/React.createElement("div", _extends({}, getDevtoolsProps(componentName), {
     id: filterSummaryId
-  }, /*#__PURE__*/React.createElement(TagSet, {
+  }, rest, {
+    ref: localRef,
+    className: cx([blockClass, className])
+  }), /*#__PURE__*/React.createElement(TagSet, {
     allTagsModalSearchLabel: "Search all tags",
     allTagsModalSearchPlaceholderText: "Search all tags",
     allTagsModalTitle: "All tags",

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -212,14 +212,13 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
   });
   previousNotifications = sortChronologically(previousNotifications);
   var renderDescription = function renderDescription(id) {
-    var _ref2, _ref3;
     var notification = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
       return item.id === id;
     })[0];
     var trimLength = 88;
     var description = notification.description;
-    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), (_ref2 = {}, _defineProperty(_ref2, "".concat(blockClass, "__notification-long-description"), notification.showAll), _defineProperty(_ref2, "".concat(blockClass, "__notification-short-description"), !notification.showAll), _ref2)]);
-    var showMoreButtonClassName = cx([(_ref3 = {}, _defineProperty(_ref3, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), _defineProperty(_ref3, "".concat(blockClass, "__notification-read-more-button"), !notification.showAll), _ref3)]);
+    var descriptionClassName = cx(["".concat(blockClass, "__notification-description"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-long-description"), notification.showAll), "".concat(blockClass, "__notification-short-description"), !notification.showAll)]);
+    var showMoreButtonClassName = cx([_defineProperty(_defineProperty({}, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), "".concat(blockClass, "__notification-read-more-button"), !notification.showAll)]);
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
       className: descriptionClassName
     }, description), description.length > trimLength && /*#__PURE__*/React.createElement(Button, {

package/es/components/PageHeader/PageHeader.js

@@ -38,7 +38,7 @@ var defaults = {
   narrowGrid: false
 };
 export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _withoutBackground, _enableBreadcrumbScro, _ref7, _cx2, _ref8, _cx4, _cx7;
+  var _withoutBackground, _enableBreadcrumbScro;
   var actionBarItems = _ref.actionBarItems,
     actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
     actionBarOverflowAriaLabel = _ref.actionBarOverflowAriaLabel,
@@ -234,17 +234,15 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
     setPageHeaderStyles(function (prev) {
-      var _objectSpread2;
-      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, "--".concat(blockClass, "--max-action-bar-width-px"), newActionBarWidth), _defineProperty(_objectSpread2, "--".concat(blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)), _objectSpread2));
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty(_defineProperty({}, "--".concat(blockClass, "--max-action-bar-width-px"), newActionBarWidth), "--".concat(blockClass, "--button-set-in-breadcrumb-width-px"), "".concat(newPageActionInBreadcrumbWidth)));
     });
   }, [actionBarColumnWidth, actionBarMaxWidth, actionBarMinWidth, pageActionInBreadcrumbMaxWidth, pageActionInBreadcrumbMinWidth, headerRef]);
   useEffect(function () {
     // Updates custom CSS props used to manage scroll behavior
     /* istanbul ignore next */
     setPageHeaderStyles(function (prev) {
-      var _objectSpread3;
-      return _objectSpread(_objectSpread({}, prev), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), _defineProperty(_objectSpread3, "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
-      )))), _defineProperty(_objectSpread3, "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")), _objectSpread3));
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(blockClass, "--height-px"), "".concat(metrics.headerHeight, "px")), "--".concat(blockClass, "--width-px"), "".concat(metrics.headerWidth, "px")), "--".concat(blockClass, "--header-top"), "".concat(metrics.headerTopValue + metrics.headerOffset, "px")), "--".concat(blockClass, "--breadcrumb-title-visibility"), scrollYValue > 0 ? 'visible' : 'hidden'), "--".concat(blockClass, "--scroll"), "".concat(scrollYValue)), "--".concat(blockClass, "--breadcrumb-title-top"), "".concat(Math.max(0, metrics.breadcrumbTitleHeight + metrics.titleRowSpaceAbove - scrollYValue), "px")), "--".concat(blockClass, "--breadcrumb-title-opacity"), "".concat(Math.min(1, Math.max(0, (scrollYValue - (metrics.titleRowSpaceAbove || 0)) / (metrics.breadcrumbTitleHeight || 1) // don't want to divide by zero
+      )))), "--".concat(blockClass, "--breadcrumb-row-width-px"), "".concat(metrics.breadcrumbRowWidth, "px")));
     });
   }, [headerRef, enableBreadcrumbScroll, metrics, metrics.breadcrumbRowHeight, metrics.breadcrumbRowSpaceBelow, metrics.breadcrumbTitleHeight, metrics.breadcrumbRowWidth, metrics.headerHeight, metrics.headerWidth, metrics.headerOffset, metrics.headerTopValue, metrics.navigationRowHeight, navigation, scrollYValue, tags]);
   useNearestScroll(headerRef,
@@ -323,7 +321,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "--offset-top-measuring-element"),
     ref: offsetTopMeasuringRef
   }), /*#__PURE__*/React.createElement("section", _extends({}, rest, {
-    className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, (_ref7 = {}, _defineProperty(_ref7, "".concat(blockClass, "--has-navigation"), navigation || tags), _defineProperty(_ref7, "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref7)]),
+    className: cx([blockClass, "".concat(blockClass, "--no-margins-below-row"), className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--has-navigation"), navigation || tags), "".concat(blockClass, "--has-navigation-tags-only"), !navigation && tags)]),
     style: pageHeaderStyles,
     ref: headerRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FlexGrid, {
@@ -333,7 +331,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__non-navigation-row-content")
   }, hasBreadcrumbRow ? /*#__PURE__*/React.createElement(Row, {
-    className: cx("".concat(blockClass, "__breadcrumb-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), _defineProperty(_cx2, "".concat(blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), _defineProperty(_cx2, "".concat(blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions), _cx2))
+    className: cx("".concat(blockClass, "__breadcrumb-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), "".concat(blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), "".concat(blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__breadcrumb-row--container")
   }, /*#__PURE__*/React.createElement(Column, {
@@ -344,7 +342,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
   }) : null), /*#__PURE__*/React.createElement(Column, {
-    className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), (_ref8 = {}, _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), _defineProperty(_ref8, "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref8)])
+    className: cx(["".concat(blockClass, "__action-bar-column ").concat(blockClass, "__action-bar-column--background"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__action-bar-column--has-page-actions"), pageActions), "".concat(blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton)])
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__action-bar-column-content"),
     ref: sizingContainerRef
@@ -359,7 +357,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onWidthChange: handleActionBarWidthChange,
     rightAlign: true
   })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/React.createElement(Row, {
-    className: cx("".concat(blockClass, "__title-row"), (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), _defineProperty(_cx4, "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), _defineProperty(_cx4, "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), _defineProperty(_cx4, "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow), _cx4))
+    className: cx("".concat(blockClass, "__title-row"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), "".concat(blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), "".concat(blockClass, "__title-row--has-page-actions"), !!pageActions), "".concat(blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow))
   }, /*#__PURE__*/React.createElement(Column, {
     className: "".concat(blockClass, "__title-column")
   }, title ? /*#__PURE__*/React.createElement(PageHeaderTitle, {
@@ -393,7 +391,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }))) : null),
   // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
   navigation ? /*#__PURE__*/React.createElement(Row, {
-    className: cx("".concat(blockClass, "__navigation-row"), (_cx7 = {}, _defineProperty(_cx7, "".concat(blockClass, "__navigation-row--spacing-above-06"), !!navigation), _defineProperty(_cx7, "".concat(blockClass, "__navigation-row--has-tags"), tags), _cx7))
+    className: cx("".concat(blockClass, "__navigation-row"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__navigation-row--spacing-above-06"), !!navigation), "".concat(blockClass, "__navigation-row--has-tags"), tags))
   }, /*#__PURE__*/React.createElement(Column, {
     className: "".concat(blockClass, "__navigation-tabs")
   }, navigation), tags ? /*#__PURE__*/React.createElement(Column, {

package/es/components/Saving/Saving.js

@@ -18,7 +18,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 var componentName = 'Saving';
 export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _statusObj, _statusObj$status, _statusObj$status2, _statusObj$status3, _statusObj$status4;
+  var _statusObj$status, _statusObj$status2, _statusObj$status3, _statusObj$status4;
   var secondaryButtonText = _ref.secondaryButtonText,
     className = _ref.className,
     defaultIconDescription = _ref.defaultIconDescription,
@@ -34,7 +34,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
     successText = _ref.successText,
     type = _ref.type,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var statusObj = (_statusObj = {
+  var statusObj = _defineProperty(_defineProperty(_defineProperty({
     default: {
       text: defaultText,
       iconDescription: defaultIconDescription,
@@ -44,7 +44,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, props));
       }
     }
-  }, _defineProperty(_statusObj, 'in-progress', {
+  }, 'in-progress', {
     text: inProgressText,
     iconDescription: inProgressIconDescription,
     icon: function icon(props) {
@@ -52,7 +52,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: 16
       }, props));
     }
-  }), _defineProperty(_statusObj, "success", {
+  }), "success", {
     text: successText,
     iconDescription: successIconDescription,
     icon: function icon(props) {
@@ -60,7 +60,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: 16
       }, props));
     }
-  }), _defineProperty(_statusObj, "fail", {
+  }), "fail", {
     text: failText,
     iconDescription: failIconDescription,
     icon: function icon(props) {
@@ -68,7 +68,7 @@ export var Saving = /*#__PURE__*/forwardRef(function (_ref, ref) {
         size: 16
       }, props));
     }
-  }), _statusObj);
+  });
   var blockClass = "".concat(pkg.prefix, "--saving");
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,

package/es/components/SidePanel/SidePanel.js

@@ -54,7 +54,7 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _window, _ref5, _cx4;
+  var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -380,9 +380,9 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container-condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), (_ref5 = {}, _defineProperty(_ref5, "".concat(blockClass, "__container-right-placement"), placement === 'right'), _defineProperty(_ref5, "".concat(blockClass, "__container-left-placement"), placement === 'left'), _defineProperty(_ref5, "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), _defineProperty(_ref5, "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), _defineProperty(_ref5, "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), _defineProperty(_ref5, "".concat(blockClass, "__container--has-slug"), slug), _ref5)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass, "__container"), "".concat(blockClass, "__container--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__container-right-placement"), placement === 'right'), "".concat(blockClass, "__container-left-placement"), placement === 'left'), "".concat(blockClass, "__container-with-action-toolbar"), actionToolbarButtons && actionToolbarButtons.length), "".concat(blockClass, "__container-without-overlay"), !includeOverlay && !slideIn), "".concat(blockClass, "__container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__container--has-slug"), slug)]);
   var renderHeader = function renderHeader() {
-    var _slug$type, _cx, _cx2;
+    var _slug$type;
     var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
     var normalizedSlug;
     if (slug && (slug === null || slug === void 0 || (_slug$type = slug.type) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
@@ -392,7 +392,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "__title-container"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__on-detail-step"), currentStep > 0), _defineProperty(_cx, "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), _defineProperty(_cx, "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), _defineProperty(_cx, "".concat(blockClass, "__title-container-without-title"), !title), _defineProperty(_cx, "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches), _cx))
+      className: cx("".concat(blockClass, "__title-container"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__on-detail-step"), currentStep > 0), "".concat(blockClass, "__on-detail-step-without-title"), currentStep > 0 && !title), "".concat(blockClass, "__title-container--no-title-animation"), !animateTitle), "".concat(blockClass, "__title-container-is-animating"), !animationComplete || !open), "".concat(blockClass, "__title-container-without-title"), !title), "".concat(blockClass, "__title-container--reduced-motion"), reducedMotion.matches))
     }, currentStep > 0 && /*#__PURE__*/React.createElement(Button, {
       "aria-label": navigationBackIconDescription,
       kind: "ghost",
@@ -424,7 +424,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onClick: onRequestClose,
       ref: sidePanelCloseRef
     })), subtitle && /*#__PURE__*/React.createElement("p", {
-      className: cx("".concat(blockClass, "__subtitle-text"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), _defineProperty(_cx2, "".concat(blockClass, "__subtitle-without-title"), !title), _cx2))
+      className: cx("".concat(blockClass, "__subtitle-text"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__subtitle-text-no-animation"), !animateTitle), "".concat(blockClass, "__subtitle-text-no-animation-no-action-toolbar"), !animateTitle && (!actionToolbarButtons || !actionToolbarButtons.length)), "".concat(blockClass, "__subtitle-text-is-animating"), !animationComplete && animateTitle), "".concat(blockClass, "__subtitle-without-title"), !title))
     }, subtitle), actionToolbarButtons && actionToolbarButtons.length && /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__action-toolbar"), _defineProperty({}, "".concat(blockClass, "__action-toolbar-no-animation"), !animateTitle))
     }, actionToolbarButtons.map(function (_ref6) {
@@ -489,7 +489,7 @@ export var SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__visually-hidden")
   }, "Focus sentinel"), !animateTitle && renderHeader(), /*#__PURE__*/React.createElement("div", {
     ref: sidePanelInnerRef,
-    className: cx("".concat(blockClass, "__inner-content"), (_cx4 = {}, _defineProperty(_cx4, "".concat(blockClass, "__static-inner-content"), !animateTitle), _defineProperty(_cx4, "".concat(blockClass, "__static-inner-content-no-actions"), !animateTitle && !(actions !== null && actions !== void 0 && actions.length)), _defineProperty(_cx4, "".concat(blockClass, "__inner-content-with-actions"), actions && actions.length), _cx4))
+    className: cx("".concat(blockClass, "__inner-content"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__static-inner-content"), !animateTitle), "".concat(blockClass, "__static-inner-content-no-actions"), !animateTitle && !(actions !== null && actions !== void 0 && actions.length)), "".concat(blockClass, "__inner-content-with-actions"), actions && actions.length))
   }, animateTitle && renderHeader(), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__body-content")
   }, children), /*#__PURE__*/React.createElement(ActionSet, {

package/es/components/TagSet/TagSetOverflow.js

@@ -82,7 +82,6 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, overflowTags.filter(function (_, index) {
     return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
   }).map(function (tag, index) {
-    var _cx2;
     var tagProps = {};
     if (overflowType === 'tag') {
       tagProps.type = 'high-contrast';
@@ -91,7 +90,7 @@ export var TagSetOverflow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       tagProps.filter = false;
     }
     return /*#__PURE__*/React.createElement("li", {
-      className: cx("".concat(blockClass, "__tag-item"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), _defineProperty(_cx2, "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag'), _cx2)),
+      className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
       key: index
     }, /*#__PURE__*/React.cloneElement(tag, tagProps));
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React.createElement(Link, {

package/es/components/Tearsheet/Tearsheet.js

@@ -112,6 +112,11 @@ Tearsheet.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: PropTypes.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -100,6 +100,11 @@ TearsheetNarrow.propTypes = _objectSpread({
     // we duplicate this Button prop to improve the DocGen here
     onClick: Button.propTypes.onClick
   })))]),
+  /**
+   * The aria-label for the tearsheet, which is optional.
+   * if it is not passed, the title will be used as the aria-label.
+   */
+  ariaLabel: PropTypes.string,
   /**
    * An optional class or classes to be added to the outermost element.
    */

package/es/components/Tearsheet/TearsheetShell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -65,6 +65,7 @@ export var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCl
  * */
 export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
@@ -179,7 +180,6 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }
   if (position <= depth) {
-    var _cx, _ref2, _cx3, _cx5, _cx6;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -188,11 +188,11 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
     return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
-      "aria-label": getNodeTextContent(title),
-      className: cx(bc, className, (_cx = {}, _defineProperty(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      "aria-label": ariaLabel || getNodeTextContent(title),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && prevDepth.current > 1), _defineProperty(_cx, "".concat(bc, "--wide"), wide), _defineProperty(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
-      style: (_ref2 = {}, _defineProperty(_ref2, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), _defineProperty(_ref2, "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width), _ref2),
+      depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide)),
+      style: _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
       onClose: onClose,
       open: open,
@@ -203,7 +203,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
       size: "sm"
     }), includeHeader && /*#__PURE__*/React.createElement(ModalHeader, {
-      className: cx("".concat(bc, "__header"), (_cx3 = {}, _defineProperty(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), _defineProperty(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
+      className: cx("".concat(bc, "__header"), _defineProperty(_defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
       closeClassName: cx(_defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
       closeModal: onClose,
       iconDescription: closeIconDescription
@@ -228,7 +228,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       element: ModalBody,
       className: "".concat(bc, "__body")
     }, /*#__PURE__*/React.createElement(Wrap, {
-      className: cx((_cx5 = {}, _defineProperty(_cx5, "".concat(bc, "__influencer"), true), _defineProperty(_cx5, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx5)),
+      className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition === 'right'
     }, influencer), /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__right")
@@ -239,7 +239,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(bc, "__content"),
       alwaysRender: influencer && influencerPosition === 'right'
     }, children), /*#__PURE__*/React.createElement(Wrap, {
-      className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
+      className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
       neverRender: influencerPosition !== 'right'
     }, influencer)), includeActions && /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__button-container")

package/es/components/WebTerminal/WebTerminal.js

@@ -44,7 +44,6 @@ var defaults = {
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
 export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref3;
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     children = _ref.children,
@@ -108,7 +107,7 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, _objectSpread(_objectSpread({}, rest), getDevtoolsProps(componentName)), {
     ref: ref,
-    className: cx([blockClass, className, (_ref3 = {}, _defineProperty(_ref3, "".concat(blockClass, "--open"), open), _defineProperty(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
+    className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
       animation: !prefersReducedMotion && webTerminalAnimationName
     },