@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/Slider/index.js

@@ -13,7 +13,7 @@ var Slider$1 = require('./Slider.js');
 var createClassWrapper = require('../../internal/createClassWrapper.js');
 var Slider_Skeleton = require('./Slider.Skeleton.js');
 
-var Slider = createClassWrapper.createClassWrapper(Slider$1["default"]);
+const Slider = createClassWrapper.createClassWrapper(Slider$1["default"]);
 
 exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.Slider = Slider;

package/lib/components/Stack/Stack.js

@@ -22,15 +22,14 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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: layout.spacing.length - 1
-}).map(function (_, step) {
+}).map((_, step) => {
   return step + 1;
 });
 /**
@@ -51,24 +50,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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--stack-").concat(orientation), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--stack-scale-").concat(gap), typeof gap === 'number'), _cx));
-  var style = {};
+const Stack = /*#__PURE__*/React__default["default"].forwardRef(function Stack(props, ref) {
+  const {
+    as: BaseComponent = 'div',
+    children,
+    className: customClassName,
+    gap,
+    orientation = 'vertical',
+    ...rest
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](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/lib/components/Stack/index.js

@@ -17,13 +17,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var HStack = /*#__PURE__*/React__default["default"].forwardRef(function HStack(props, ref) {
+const HStack = /*#__PURE__*/React__default["default"].forwardRef(function HStack(props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref,
     orientation: "horizontal"
   }));
 });
-var VStack = /*#__PURE__*/React__default["default"].forwardRef(function VStack(props, ref) {
+const VStack = /*#__PURE__*/React__default["default"].forwardRef(function VStack(props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref,
     orientation: "vertical"

package/lib/components/StructuredList/StructuredList.Skeleton.js

@@ -23,47 +23,48 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var StructuredListSkeletonClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--structured-list"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--structured-list--border"), border), _cx));
-  var rows = [];
+const StructuredListSkeleton = _ref => {
+  let {
+    rowCount,
+    border,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const StructuredListSkeletonClasses = cx__default["default"](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["default"].createElement("div", {
-      className: "".concat(prefix, "--structured-list-row"),
+      className: `${prefix}--structured-list-row`,
       key: i
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--structured-list-td")
+      className: `${prefix}--structured-list-td`
     }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--structured-list-td")
+      className: `${prefix}--structured-list-td`
     }), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--structured-list-td")
+      className: `${prefix}--structured-list-td`
     })));
   }
 
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: StructuredListSkeletonClasses
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--structured-list-thead")
+    className: `${prefix}--structured-list-thead`
   }, /*#__PURE__*/React__default["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["default"].createElement("div", {
-    className: "".concat(prefix, "--structured-list-th")
+    className: `${prefix}--structured-list-th`
   }, _span || (_span = /*#__PURE__*/React__default["default"].createElement("span", null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--structured-list-th")
+    className: `${prefix}--structured-list-th`
   }, _span2 || (_span2 = /*#__PURE__*/React__default["default"].createElement("span", null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--structured-list-th")
+    className: `${prefix}--structured-list-th`
   }, _span3 || (_span3 = /*#__PURE__*/React__default["default"].createElement("span", null))))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--structured-list-tbody")
+    className: `${prefix}--structured-list-tbody`
   }, rows));
 };
 

package/lib/components/StructuredList/StructuredList.js

@@ -23,36 +23,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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["default"].createContext(null);
-var GridSelectedRowDispatchContext = /*#__PURE__*/React__default["default"].createContext(null);
+const GridSelectedRowStateContext = /*#__PURE__*/React__default["default"].createContext(null);
+const GridSelectedRowDispatchContext = /*#__PURE__*/React__default["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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--structured-list--selection"), selection), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--structured-list--condensed"), isCondensed), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--structured-list--flush"), isFlush), _classNames));
-
-  var _React$useState = React__default["default"].useState(null),
-      _React$useState2 = _rollupPluginBabelHelpers.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.usePrefix();
+  const classes = cx__default["default"](`${prefix}--structured-list`, className, {
+    [`${prefix}--structured-list--selection`]: selection,
+    [`${prefix}--structured-list--condensed`]: isCondensed,
+    [`${prefix}--structured-list--flush`]: isFlush
+  });
+  const [selectedRow, setSelectedRow] = React__default["default"].useState(null);
   return /*#__PURE__*/React__default["default"].createElement(GridSelectedRowStateContext.Provider, {
     value: selectedRow
   }, /*#__PURE__*/React__default["default"].createElement(GridSelectedRowDispatchContext.Provider, {
@@ -64,19 +54,57 @@ function StructuredListWrapper(props) {
     "aria-label": deprecatedAriaLabel || ariaLabel
   }), children)));
 }
-StructuredListWrapper.propTypes = (_StructuredListWrappe = {}, _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "isCondensed", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "isFlush", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "selection", PropTypes__default["default"].bool), _StructuredListWrappe);
-StructuredListWrapper.defaultProps = _rollupPluginBabelHelpers.defineProperty({
+StructuredListWrapper.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * Provide the contents of your StructuredListWrapper
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify if structured list is condensed, default is false
+   */
+  isCondensed: PropTypes__default["default"].bool,
+
+  /**
+   * Specify if structured list is flush, default is false
+   */
+  isFlush: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether your StructuredListWrapper should have selections
+   */
+  selection: PropTypes__default["default"].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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded2);
-
-  var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list-thead"), className);
+  const {
+    children,
+    className,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](`${prefix}--structured-list-thead`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "rowgroup",
     className: classes
@@ -94,12 +122,13 @@ StructuredListHead.propTypes = {
   className: PropTypes__default["default"].string
 };
 function StructuredListBody(props) {
-  var children = props.children,
-      className = props.className,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded3);
-
-  var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list-tbody"), className);
+  const {
+    children,
+    className,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](`${prefix}--structured-list-tbody`, className);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classes,
     role: "rowgroup"
@@ -123,31 +152,30 @@ StructuredListBody.propTypes = {
   onKeyDown: PropTypes__default["default"].func
 };
 StructuredListBody.defaultProps = {
-  onKeyDown: function onKeyDown() {}
+  onKeyDown: () => {}
 };
-var GridRowContext = /*#__PURE__*/React__default["default"].createContext(null);
+const GridRowContext = /*#__PURE__*/React__default["default"].createContext(null);
 function StructuredListRow(props) {
-  var _classNames2;
-
-  var onKeyDown = props.onKeyDown,
-      children = props.children,
-      className = props.className,
-      head = props.head,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded4);
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      hasFocusWithin = _useState2[0],
-      setHasFocusWithin = _useState2[1];
-
-  var id = useId.useId('grid-input');
-  var selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
-  var setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
-  var prefix = usePrefix.usePrefix();
-  var value = {
-    id: id
+  const {
+    onKeyDown,
+    children,
+    className,
+    head,
+    ...other
+  } = props;
+  const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
+  const id = useId.useId('grid-input');
+  const selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
+  const setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
+  const prefix = usePrefix.usePrefix();
+  const value = {
+    id
   };
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--selected"), selectedRow === id), _classNames2));
+  const classes = cx__default["default"](`${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["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     role: "row"
   }, other, {
@@ -158,13 +186,11 @@ function StructuredListRow(props) {
   React__default["default"].createElement("div", _rollupPluginBabelHelpers["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
@@ -191,7 +217,7 @@ StructuredListRow.propTypes = {
   /**
    * Specify whether a `<label>` should be used
    */
-  label: deprecate["default"](PropTypes__default["default"].bool, "\nThe `label` prop is no longer needed and will be removed in the next major version of Carbon."),
+  label: deprecate["default"](PropTypes__default["default"].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,
@@ -200,34 +226,33 @@ StructuredListRow.propTypes = {
 };
 StructuredListRow.defaultProps = {
   head: false,
-  onKeyDown: function onKeyDown() {}
+  onKeyDown: () => {}
 };
 function StructuredListInput(props) {
-  var _row$id;
-
-  var defaultId = useId.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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded5);
-
-  var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]("".concat(prefix, "--structured-list-input"), "".concat(prefix, "--visually-hidden"), className);
-  var row = React__default["default"].useContext(GridRowContext);
-  var selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
-  var setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
+  const defaultId = useId.useId('structureListInput');
+  const {
+    className,
+    name = `structured-list-input-${defaultId}`,
+    title,
+    id,
+    onChange,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](`${prefix}--structured-list-input`, `${prefix}--visually-hidden`, className);
+  const row = React__default["default"].useContext(GridRowContext);
+  const selectedRow = React__default["default"].useContext(GridSelectedRowStateContext);
+  const setSelectedRow = React__default["default"].useContext(GridSelectedRowDispatchContext);
   return /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["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
@@ -242,7 +267,7 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: deprecate["default"](PropTypes__default["default"].bool, "\nThe prop `defaultChecked` is no longer needed and will be removed in the next major version of Carbon."),
+  defaultChecked: deprecate["default"](PropTypes__default["default"].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
@@ -267,22 +292,25 @@ StructuredListInput.propTypes = {
   /**
    * Specify the value of the input
    */
-  value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]).isRequired, "\nThe prop `value` will be removed in the next major version of Carbon.")
+  value: deprecate["default"](PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded6);
-
-  var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"](className, (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--structured-list-th"), head), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--structured-list-td"), !head), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--structured-list-content--nowrap"), noWrap), _classNames3));
+  const {
+    children,
+    className,
+    head,
+    noWrap,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const classes = cx__default["default"](className, {
+    [`${prefix}--structured-list-th`]: head,
+    [`${prefix}--structured-list-td`]: !head,
+    [`${prefix}--structured-list-content--nowrap`]: noWrap
+  });
 
   if (head) {
     return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({

package/lib/components/Switch/IconSwitch.js

@@ -22,77 +22,71 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["align", "children", "className", "disabled", "enterDelayMs", "index", "leaveDelayMs", "name", "onClick", "onKeyDown", "selected", "size", "text"];
-
-var noopFn = function noopFn() {};
-
-var IconSwitch = /*#__PURE__*/React__default["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$1 = 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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-
-  var handleClick = function handleClick(e) {
+const noopFn = () => {};
+
+const IconSwitch = /*#__PURE__*/React__default["default"].forwardRef(function Switch(props, tabRef) {
+  const {
+    align,
+    children,
+    className,
+    disabled,
+    enterDelayMs,
+    index: index$1,
+    leaveDelayMs = 0,
+    name,
+    onClick = noopFn,
+    onKeyDown = noopFn,
+    selected = false,
+    size,
+    text,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const handleClick = e => {
     e.preventDefault();
     onClick({
       index: index$1,
-      name: name,
-      text: text
+      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$1,
-      name: name,
-      text: text,
-      key: key
+      name,
+      text,
+      key
     });
   };
 
-  var handleMouseEnter = function handleMouseEnter() {
+  const handleMouseEnter = () => {
     setIsHovered(true);
   };
 
-  var handleMouseLeave = function handleMouseLeave() {
+  const handleMouseLeave = () => {
     setIsHovered(false);
   };
 
-  var classes = cx__default["default"](className, "".concat(prefix, "--content-switcher-btn"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--content-switcher--selected"), selected));
-  var iconButtonClasses = cx__default["default"]("".concat(prefix, "--content-switcher-popover__wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--content-switcher-popover--selected"), selected), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--content-switcher-popover--disabled"), disabled), _classNames2));
-  var commonProps = {
+  const classes = cx__default["default"](className, `${prefix}--content-switcher-btn`, {
+    [`${prefix}--content-switcher--selected`]: selected
+  });
+  const iconButtonClasses = cx__default["default"](`${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["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
     label: text,