@carbon/react 1.27.0 → 1.28.0-rc.0

package/es/components/Slider/index.js

@@ -9,6 +9,6 @@ import Slider$1 from './Slider.js';
 import { createClassWrapper } from '../../internal/createClassWrapper.js';
 export { default as SliderSkeleton } from './Slider.Skeleton.js';
 
-var Slider = createClassWrapper(Slider$1);
+const Slider = createClassWrapper(Slider$1);
 
 export { Slider, Slider as default };

package/es/components/Stack/Stack.js

@@ -5,22 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { spacing } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["as", "children", "className", "gap", "orientation"];
 /**
  * The steps in the spacing scale
  * @type {Array<number>}
  */
 
-var SPACING_STEPS = Array.from({
+const SPACING_STEPS = Array.from({
   length: spacing.length - 1
-}).map(function (_, step) {
+}).map((_, step) => {
   return step + 1;
 });
 /**
@@ -41,24 +40,24 @@ var SPACING_STEPS = Array.from({
  * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
  */
 
-var Stack = /*#__PURE__*/React__default.forwardRef(function Stack(props, ref) {
-  var _cx;
-
-  var _props$as = props.as,
-      BaseComponent = _props$as === void 0 ? 'div' : _props$as,
-      children = props.children,
-      customClassName = props.className,
-      gap = props.gap,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx(customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--stack-").concat(orientation), true), _defineProperty(_cx, "".concat(prefix, "--stack-scale-").concat(gap), typeof gap === 'number'), _cx));
-  var style = {};
+const Stack = /*#__PURE__*/React__default.forwardRef(function Stack(props, ref) {
+  const {
+    as: BaseComponent = 'div',
+    children,
+    className: customClassName,
+    gap,
+    orientation = 'vertical',
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const className = cx(customClassName, {
+    [`${prefix}--stack-${orientation}`]: true,
+    [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number'
+  });
+  const style = {};
 
   if (typeof gap === 'string') {
-    style["--".concat(prefix, "-stack-gap")] = gap;
+    style[`--${prefix}-stack-gap`] = gap;
   }
 
   return (

package/es/components/Stack/index.js

@@ -10,13 +10,13 @@ import React__default from 'react';
 import { Stack } from './Stack.js';
 export { Stack } from './Stack.js';
 
-var HStack = /*#__PURE__*/React__default.forwardRef(function HStack(props, ref) {
+const HStack = /*#__PURE__*/React__default.forwardRef(function HStack(props, ref) {
   return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
     ref: ref,
     orientation: "horizontal"
   }));
 });
-var VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref) {
+const VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref) {
   return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
     ref: ref,
     orientation: "vertical"

package/es/components/StructuredList/StructuredList.Skeleton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -13,47 +13,48 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _span, _span2, _span3;
 
-var _excluded = ["rowCount", "border", "className"];
-
-var StructuredListSkeleton = function StructuredListSkeleton(_ref) {
-  var _cx;
-
-  var rowCount = _ref.rowCount,
-      border = _ref.border,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var StructuredListSkeletonClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--structured-list"), true), _defineProperty(_cx, "".concat(prefix, "--structured-list--border"), border), _cx));
-  var rows = [];
+const StructuredListSkeleton = _ref => {
+  let {
+    rowCount,
+    border,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const StructuredListSkeletonClasses = cx(className, {
+    [`${prefix}--skeleton`]: true,
+    [`${prefix}--structured-list`]: true,
+    [`${prefix}--structured-list--border`]: border
+  });
+  const rows = [];
 
   for (var i = 0; i < rowCount; i++) {
     rows.push( /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--structured-list-row"),
+      className: `${prefix}--structured-list-row`,
       key: i
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--structured-list-td")
+      className: `${prefix}--structured-list-td`
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--structured-list-td")
+      className: `${prefix}--structured-list-td`
     }), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--structured-list-td")
+      className: `${prefix}--structured-list-td`
     })));
   }
 
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: StructuredListSkeletonClasses
   }, rest), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--structured-list-thead")
+    className: `${prefix}--structured-list-thead`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--structured-list-row ").concat(prefix, "--structured-list-row--header-row")
+    className: `${prefix}--structured-list-row ${prefix}--structured-list-row--header-row`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--structured-list-th")
+    className: `${prefix}--structured-list-th`
   }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--structured-list-th")
+    className: `${prefix}--structured-list-th`
   }, _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--structured-list-th")
+    className: `${prefix}--structured-list-th`
   }, _span3 || (_span3 = /*#__PURE__*/React__default.createElement("span", null))))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--structured-list-tbody")
+    className: `${prefix}--structured-list-tbody`
   }, rows));
 };
 

package/es/components/StructuredList/StructuredList.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -13,36 +13,26 @@ import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _StructuredListWrappe;
-
-var _excluded = ["children", "selection", "className", "aria-label", "ariaLabel", "isCondensed", "isFlush"],
-    _excluded2 = ["children", "className"],
-    _excluded3 = ["children", "className"],
-    _excluded4 = ["onKeyDown", "children", "className", "head"],
-    _excluded5 = ["className", "name", "title", "id"],
-    _excluded6 = ["children", "className", "head", "noWrap"];
-var GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
-var GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
+const GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
+const GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListWrapper(props) {
-  var _classNames;
-
-  var children = props.children,
-      selection = props.selection,
-      className = props.className,
-      ariaLabel = props['aria-label'],
-      deprecatedAriaLabel = props.ariaLabel,
-      isCondensed = props.isCondensed,
-      isFlush = props.isFlush,
-      other = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--structured-list--selection"), selection), _defineProperty(_classNames, "".concat(prefix, "--structured-list--condensed"), isCondensed), _defineProperty(_classNames, "".concat(prefix, "--structured-list--flush"), isFlush), _classNames));
-
-  var _React$useState = React__default.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectedRow = _React$useState2[0],
-      setSelectedRow = _React$useState2[1];
-
+  const {
+    children,
+    selection,
+    className,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    isCondensed,
+    isFlush,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const classes = cx(`${prefix}--structured-list`, className, {
+    [`${prefix}--structured-list--selection`]: selection,
+    [`${prefix}--structured-list--condensed`]: isCondensed,
+    [`${prefix}--structured-list--flush`]: isFlush
+  });
+  const [selectedRow, setSelectedRow] = React__default.useState(null);
   return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
     value: selectedRow
   }, /*#__PURE__*/React__default.createElement(GridSelectedRowDispatchContext.Provider, {
@@ -54,19 +44,57 @@ function StructuredListWrapper(props) {
     "aria-label": deprecatedAriaLabel || ariaLabel
   }), children)));
 }
-StructuredListWrapper.propTypes = (_StructuredListWrappe = {}, _defineProperty(_StructuredListWrappe, 'aria-label', PropTypes.string), _defineProperty(_StructuredListWrappe, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_StructuredListWrappe, "children", PropTypes.node), _defineProperty(_StructuredListWrappe, "className", PropTypes.string), _defineProperty(_StructuredListWrappe, "isCondensed", PropTypes.bool), _defineProperty(_StructuredListWrappe, "isFlush", PropTypes.bool), _defineProperty(_StructuredListWrappe, "selection", PropTypes.bool), _StructuredListWrappe);
-StructuredListWrapper.defaultProps = _defineProperty({
+StructuredListWrapper.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * Provide the contents of your StructuredListWrapper
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if structured list is condensed, default is false
+   */
+  isCondensed: PropTypes.bool,
+
+  /**
+   * Specify if structured list is flush, default is false
+   */
+  isFlush: PropTypes.bool,
+
+  /**
+   * Specify whether your StructuredListWrapper should have selections
+   */
+  selection: PropTypes.bool
+};
+StructuredListWrapper.defaultProps = {
   selection: false,
   isCondensed: false,
-  isFlush: false
-}, 'aria-label', 'Structured list section');
+  isFlush: false,
+  ['aria-label']: 'Structured list section'
+};
 function StructuredListHead(props) {
-  var children = props.children,
-      className = props.className,
-      other = _objectWithoutProperties(props, _excluded2);
-
-  var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list-thead"), className);
+  const {
+    children,
+    className,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const classes = cx(`${prefix}--structured-list-thead`, className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     role: "rowgroup",
     className: classes
@@ -84,12 +112,13 @@ StructuredListHead.propTypes = {
   className: PropTypes.string
 };
 function StructuredListBody(props) {
-  var children = props.children,
-      className = props.className,
-      other = _objectWithoutProperties(props, _excluded3);
-
-  var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list-tbody"), className);
+  const {
+    children,
+    className,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const classes = cx(`${prefix}--structured-list-tbody`, className);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classes,
     role: "rowgroup"
@@ -113,31 +142,30 @@ StructuredListBody.propTypes = {
   onKeyDown: PropTypes.func
 };
 StructuredListBody.defaultProps = {
-  onKeyDown: function onKeyDown() {}
+  onKeyDown: () => {}
 };
-var GridRowContext = /*#__PURE__*/React__default.createContext(null);
+const GridRowContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListRow(props) {
-  var _classNames2;
-
-  var onKeyDown = props.onKeyDown,
-      children = props.children,
-      className = props.className,
-      head = props.head,
-      other = _objectWithoutProperties(props, _excluded4);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      hasFocusWithin = _useState2[0],
-      setHasFocusWithin = _useState2[1];
-
-  var id = useId('grid-input');
-  var selectedRow = React__default.useContext(GridSelectedRowStateContext);
-  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
-  var prefix = usePrefix();
-  var value = {
-    id: id
+  const {
+    onKeyDown,
+    children,
+    className,
+    head,
+    ...other
+  } = props;
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  const id = useId('grid-input');
+  const selectedRow = React__default.useContext(GridSelectedRowStateContext);
+  const setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
+  const prefix = usePrefix();
+  const value = {
+    id
   };
-  var classes = cx("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--selected"), selectedRow === id), _classNames2));
+  const classes = cx(`${prefix}--structured-list-row`, className, {
+    [`${prefix}--structured-list-row--header-row`]: head,
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
+    [`${prefix}--structured-list-row--selected`]: selectedRow === id
+  });
   return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {
@@ -148,13 +176,11 @@ function StructuredListRow(props) {
   React__default.createElement("div", _extends({}, other, {
     role: "row",
     className: classes,
-    onClick: function onClick() {
-      return setSelectedRow(id);
-    },
-    onFocus: function onFocus() {
+    onClick: () => setSelectedRow(id),
+    onFocus: () => {
       setHasFocusWithin(true);
     },
-    onBlur: function onBlur() {
+    onBlur: () => {
       setHasFocusWithin(false);
     },
     onKeyDown: onKeyDown
@@ -181,7 +207,7 @@ StructuredListRow.propTypes = {
   /**
    * Specify whether a `<label>` should be used
    */
-  label: deprecate(PropTypes.bool, "\nThe `label` prop is no longer needed and will be removed in the next major version of Carbon."),
+  label: deprecate(PropTypes.bool, `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`),
 
   /**
    * Provide a handler that is invoked on the key down event for the control,
@@ -190,34 +216,33 @@ StructuredListRow.propTypes = {
 };
 StructuredListRow.defaultProps = {
   head: false,
-  onKeyDown: function onKeyDown() {}
+  onKeyDown: () => {}
 };
 function StructuredListInput(props) {
-  var _row$id;
-
-  var defaultId = useId('structureListInput');
-
-  var className = props.className,
-      _props$name = props.name,
-      name = _props$name === void 0 ? "structured-list-input-".concat(defaultId) : _props$name,
-      title = props.title,
-      id = props.id,
-      other = _objectWithoutProperties(props, _excluded5);
-
-  var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list-input"), "".concat(prefix, "--visually-hidden"), className);
-  var row = React__default.useContext(GridRowContext);
-  var selectedRow = React__default.useContext(GridSelectedRowStateContext);
-  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
+  const defaultId = useId('structureListInput');
+  const {
+    className,
+    name = `structured-list-input-${defaultId}`,
+    title,
+    id,
+    onChange,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const classes = cx(`${prefix}--structured-list-input`, `${prefix}--visually-hidden`, className);
+  const row = React__default.useContext(GridRowContext);
+  const selectedRow = React__default.useContext(GridSelectedRowStateContext);
+  const setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
   return /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
     type: "radio",
     tabIndex: 0,
     checked: row && row.id === selectedRow,
-    value: (_row$id = row === null || row === void 0 ? void 0 : row.id) !== null && _row$id !== void 0 ? _row$id : '',
-    onChange: function onChange(event) {
+    value: (row === null || row === void 0 ? void 0 : row.id) ?? '',
+    onChange: event => {
       setSelectedRow(event.target.value);
+      onChange(event);
     },
-    id: id !== null && id !== void 0 ? id : defaultId,
+    id: id ?? defaultId,
     className: classes,
     name: name,
     title: title
@@ -232,7 +257,7 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: deprecate(PropTypes.bool, "\nThe prop `defaultChecked` is no longer needed and will be removed in the next major version of Carbon."),
+  defaultChecked: deprecate(PropTypes.bool, `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`),
 
   /**
    * Specify a custom `id` for the input
@@ -257,22 +282,25 @@ StructuredListInput.propTypes = {
   /**
    * Specify the value of the input
    */
-  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, "\nThe prop `value` will be removed in the next major version of Carbon.")
+  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, `\nThe prop \`value\` will be removed in the next major version of Carbon.`)
 };
 StructuredListInput.defaultProps = {
   title: 'title'
 };
 function StructuredListCell(props) {
-  var _classNames3;
-
-  var children = props.children,
-      className = props.className,
-      head = props.head,
-      noWrap = props.noWrap,
-      other = _objectWithoutProperties(props, _excluded6);
-
-  var prefix = usePrefix();
-  var classes = cx(className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--structured-list-th"), head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-td"), !head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-content--nowrap"), noWrap), _classNames3));
+  const {
+    children,
+    className,
+    head,
+    noWrap,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const classes = cx(className, {
+    [`${prefix}--structured-list-th`]: head,
+    [`${prefix}--structured-list-td`]: !head,
+    [`${prefix}--structured-list-content--nowrap`]: noWrap
+  });
 
   if (head) {
     return /*#__PURE__*/React__default.createElement("span", _extends({

package/es/components/Switch/IconSwitch.js

@@ -5,84 +5,78 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState } from 'react';
 import cx from 'classnames';
 import { IconButton } from '../IconButton/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["align", "children", "className", "disabled", "enterDelayMs", "index", "leaveDelayMs", "name", "onClick", "onKeyDown", "selected", "size", "text"];
-
-var noopFn = function noopFn() {};
-
-var IconSwitch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tabRef) {
-  var _classNames2;
-
-  var align = props.align,
-      children = props.children,
-      className = props.className,
-      disabled = props.disabled,
-      enterDelayMs = props.enterDelayMs,
-      index = props.index,
-      _props$leaveDelayMs = props.leaveDelayMs,
-      leaveDelayMs = _props$leaveDelayMs === void 0 ? 0 : _props$leaveDelayMs,
-      name = props.name,
-      _props$onClick = props.onClick,
-      onClick = _props$onClick === void 0 ? noopFn : _props$onClick,
-      _props$onKeyDown = props.onKeyDown,
-      onKeyDown = _props$onKeyDown === void 0 ? noopFn : _props$onKeyDown,
-      _props$selected = props.selected,
-      selected = _props$selected === void 0 ? false : _props$selected,
-      size = props.size,
-      text = props.text,
-      other = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-
-  var handleClick = function handleClick(e) {
+const noopFn = () => {};
+
+const IconSwitch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tabRef) {
+  const {
+    align,
+    children,
+    className,
+    disabled,
+    enterDelayMs,
+    index,
+    leaveDelayMs = 0,
+    name,
+    onClick = noopFn,
+    onKeyDown = noopFn,
+    selected = false,
+    size,
+    text,
+    ...other
+  } = props;
+  const prefix = usePrefix();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleClick = e => {
     e.preventDefault();
     onClick({
-      index: index,
-      name: name,
-      text: text
+      index,
+      name,
+      text
     });
   };
 
-  var handleKeyDown = function handleKeyDown(event) {
-    var key = event.key || event.which;
+  const handleKeyDown = event => {
+    const key = event.key || event.which;
     onKeyDown({
-      index: index,
-      name: name,
-      text: text,
-      key: key
+      index,
+      name,
+      text,
+      key
     });
   };
 
-  var handleMouseEnter = function handleMouseEnter() {
+  const handleMouseEnter = () => {
     setIsHovered(true);
   };
 
-  var handleMouseLeave = function handleMouseLeave() {
+  const handleMouseLeave = () => {
     setIsHovered(false);
   };
 
-  var classes = cx(className, "".concat(prefix, "--content-switcher-btn"), _defineProperty({}, "".concat(prefix, "--content-switcher--selected"), selected));
-  var iconButtonClasses = cx("".concat(prefix, "--content-switcher-popover__wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--content-switcher-popover--selected"), selected), _defineProperty(_classNames2, "".concat(prefix, "--content-switcher-popover--disabled"), disabled), _classNames2));
-  var commonProps = {
+  const classes = cx(className, `${prefix}--content-switcher-btn`, {
+    [`${prefix}--content-switcher--selected`]: selected
+  });
+  const iconButtonClasses = cx(`${prefix}--content-switcher-popover__wrapper`, {
+    [`${prefix}--content-switcher-popover--selected`]: selected,
+    [`${prefix}--content-switcher-popover--disabled`]: disabled
+  });
+  const commonProps = {
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     className: classes,
-    disabled: disabled,
-    align: align,
-    enterDelayMs: enterDelayMs,
-    leaveDelayMs: leaveDelayMs,
-    size: size
+    disabled,
+    align,
+    enterDelayMs,
+    leaveDelayMs,
+    size
   };
   return /*#__PURE__*/React__default.createElement(IconButton, _extends({
     label: text,