@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -21,39 +20,37 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _InlineCheckbox$propT;
 /** @type any */
 
-var InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function InlineCheckbox(props, forwardRef) {
-  var ariaLabel = props['aria-label'],
-      deprecatedAriaLabel = props.ariaLabel,
-      _props$checked = props.checked,
-      checked = _props$checked === void 0 ? false : _props$checked,
-      disabled = props.disabled,
-      id = props.id,
-      indeterminate = props.indeterminate,
-      name = props.name,
-      _props$onChange = props.onChange,
-      _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
-      onClick = props.onClick,
-      onKeyDown = props.onKeyDown,
-      title = props.title;
-
-  var prefix = usePrefix.usePrefix();
-  var inputRef = React.useRef(null);
-  var ref = useMergedRefs.useMergedRefs([inputRef, forwardRef]);
-  var inputProps = {
-    checked: checked,
-    className: "".concat(prefix, "--checkbox"),
-    disabled: disabled,
-    id: id,
-    name: name,
-    onClick: onClick,
-    onChange: function onChange(evt) {
-      _onChange(evt.target.checked, id, evt);
+const InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function InlineCheckbox(props, forwardRef) {
+  const {
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    checked = false,
+    disabled,
+    id,
+    indeterminate,
+    name,
+    onChange = () => {},
+    onClick,
+    onKeyDown,
+    title
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const inputRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([inputRef, forwardRef]);
+  const inputProps = {
+    checked,
+    className: `${prefix}--checkbox`,
+    disabled,
+    id,
+    name,
+    onClick,
+    onChange: evt => {
+      onChange(evt.target.checked, id, evt);
     },
-    onKeyDown: onKeyDown,
-    ref: ref,
+    onKeyDown,
+    ref,
     type: 'checkbox'
   };
 
@@ -61,26 +58,82 @@ var InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function
     inputProps.checked = false;
   }
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--checkbox--inline")
+    className: `${prefix}--checkbox--inline`
   }, /*#__PURE__*/React__default["default"].createElement("input", inputProps),
   /*#__PURE__*/
 
   /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
   React__default["default"].createElement("label", {
     htmlFor: id,
-    className: "".concat(prefix, "--checkbox-label"),
+    className: `${prefix}--checkbox-label`,
     "aria-label": deprecatedAriaLabel || ariaLabel,
     title: title,
-    onClick: function onClick(evt) {
+    onClick: evt => {
       evt.stopPropagation();
     }
   }));
 });
-InlineCheckbox.propTypes = (_InlineCheckbox$propT = {}, _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "ariaLabel", deprecate["default"](PropTypes__default["default"].string.isRequired, 'The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release.')), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "checked", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "indeterminate", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "name", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "onClick", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_InlineCheckbox$propT, "title", PropTypes__default["default"].string), _InlineCheckbox$propT);
+InlineCheckbox.propTypes = {
+  /**
+   * Specify the label for the control
+   */
+  ['aria-label']: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify the label for the control
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].string.isRequired, 'The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release.'),
+
+  /**
+   * Specify whether the underlying control is checked, or not
+   */
+  checked: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the underlying input control should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an `id` for the underlying input control
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether the control is in an indterminate state
+   */
+  indeterminate: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a `name` for the underlying input control
+   */
+  name: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional tooltip for the InlineCheckbox
+   */
+  title: PropTypes__default["default"].string
+};
 var InlineCheckbox$1 = InlineCheckbox;
 
 exports["default"] = InlineCheckbox$1;

package/lib/components/InlineLoading/InlineLoading.js

@@ -23,38 +23,36 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "status", "iconDescription", "description", "onSuccess", "successDelay"];
 function InlineLoading(_ref) {
-  var className = _ref.className,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? 'active' : _ref$status,
-      iconDescription = _ref.iconDescription,
-      description = _ref.description,
-      onSuccess = _ref.onSuccess,
-      _ref$successDelay = _ref.successDelay,
-      successDelay = _ref$successDelay === void 0 ? 1500 : _ref$successDelay,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var loadingClasses = cx__default["default"]("".concat(prefix, "--inline-loading"), className);
-
-  var getLoading = function getLoading() {
-    var iconLabel = iconDescription ? iconDescription : status;
+  let {
+    className,
+    status = 'active',
+    iconDescription,
+    description,
+    onSuccess,
+    successDelay = 1500,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const loadingClasses = cx__default["default"](`${prefix}--inline-loading`, className);
+
+  const getLoading = () => {
+    let iconLabel = iconDescription ? iconDescription : status;
 
     if (status === 'error') {
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.ErrorFilled, {
-        className: "".concat(prefix, "--inline-loading--error")
+        className: `${prefix}--inline-loading--error`
       }, /*#__PURE__*/React__default["default"].createElement("title", null, iconLabel));
     }
 
     if (status === 'finished') {
-      setTimeout(function () {
+      setTimeout(() => {
         if (onSuccess) {
           onSuccess();
         }
       }, successDelay);
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, {
-        className: "".concat(prefix, "--inline-loading__checkmark-container")
+        className: `${prefix}--inline-loading__checkmark-container`
       }, /*#__PURE__*/React__default["default"].createElement("title", null, iconLabel));
     }
 
@@ -74,12 +72,12 @@ function InlineLoading(_ref) {
     return undefined;
   };
 
-  var loadingText = /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--inline-loading__text")
+  const loadingText = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--inline-loading__text`
   }, description);
-  var loading = getLoading();
-  var loadingAnimation = loading && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--inline-loading__animation")
+  const loading = getLoading();
+  const loadingAnimation = loading && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--inline-loading__animation`
   }, loading);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: loadingClasses

package/lib/components/Layer/LayerContext.js

@@ -15,6 +15,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var LayerContext = /*#__PURE__*/React__default["default"].createContext(1);
+const LayerContext = /*#__PURE__*/React__default["default"].createContext(1);
 
 exports.LayerContext = LayerContext;

package/lib/components/Layer/index.js

@@ -22,9 +22,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["as", "className", "children", "level"];
-var levels = ['one', 'two', 'three'];
-var MAX_LEVEL = levels.length - 1;
+const levels = ['one', 'two', 'three'];
+const MAX_LEVEL = levels.length - 1;
 /**
  * A custom hook that will return information about the current layer. A common
  * field to pull from this is the `level` for the layer that the component that
@@ -32,25 +31,25 @@ var MAX_LEVEL = levels.length - 1;
  */
 
 function useLayer() {
-  var level = React__default["default"].useContext(LayerContext.LayerContext);
+  const level = React__default["default"].useContext(LayerContext.LayerContext);
   return {
-    level: level
+    level
   };
 }
 function Layer(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      customClassName = _ref.className,
-      children = _ref.children,
-      overrideLevel = _ref.level,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  let {
+    as: BaseComponent = 'div',
+    className: customClassName,
+    children,
+    level: overrideLevel,
+    ...rest
+  } = _ref;
+  const contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
+  const level = overrideLevel ?? contextLevel;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--layer-${levels[level]}`, customClassName); // The level should be between 0 and MAX_LEVEL
 
-  var contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
-  var level = overrideLevel !== null && overrideLevel !== void 0 ? overrideLevel : contextLevel;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--layer-").concat(levels[level]), customClassName); // The level should be between 0 and MAX_LEVEL
-
-  var value = Math.max(0, Math.min(level + 1, MAX_LEVEL));
+  const value = Math.max(0, Math.min(level + 1, MAX_LEVEL));
   return /*#__PURE__*/React__default["default"].createElement(LayerContext.LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {

package/lib/components/Layout/LayoutDirection.js

@@ -19,16 +19,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["as", "children", "dir"];
-
 function LayoutDirection(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      children = _ref.children,
-      dir = _ref.dir,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var value = React__default["default"].useMemo(function () {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    dir,
+    ...rest
+  } = _ref;
+  const value = React__default["default"].useMemo(() => {
     return {
       direction: dir
     };

package/lib/components/Layout/LayoutDirectionContext.js

@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var LayoutDirectionContext = /*#__PURE__*/React__default["default"].createContext({
+const LayoutDirectionContext = /*#__PURE__*/React__default["default"].createContext({
   direction: 'ltr'
 });
 

package/lib/components/Link/Link.js

@@ -21,29 +21,29 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["children", "className", "href", "disabled", "inline", "visited", "renderIcon", "size"];
-var Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref, ref) {
-  var _cx;
-
-  var children = _ref.children,
-      customClassName = _ref.className,
-      href = _ref.href,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$visited = _ref.visited,
-      visited = _ref$visited === void 0 ? false : _ref$visited,
-      Icon = _ref.renderIcon,
-      size = _ref.size,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--link"), customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--link--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--link--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--link--visited"), visited), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--link--").concat(size), size), _cx));
-  var rel = rest.target === '_blank' ? 'noopener' : null;
-  var linkProps = {
-    className: className,
-    rel: rel
+const Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref, ref) {
+  let {
+    children,
+    className: customClassName,
+    href,
+    disabled = false,
+    inline = false,
+    visited = false,
+    renderIcon: Icon,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--link`, customClassName, {
+    [`${prefix}--link--disabled`]: disabled,
+    [`${prefix}--link--inline`]: inline,
+    [`${prefix}--link--visited`]: visited,
+    [`${prefix}--link--${size}`]: size
+  });
+  const rel = rest.target === '_blank' ? 'noopener' : null;
+  const linkProps = {
+    className,
+    rel
   }; // Reference for disabled links:
   // https://www.scottohara.me/blog/2021/05/28/disabled-links.html
 
@@ -57,7 +57,7 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function Link(_ref,
   return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({
     ref: ref
   }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--link__icon")
+    className: `${prefix}--link__icon`
   }, /*#__PURE__*/React__default["default"].createElement(Icon, null)));
 });
 Link.displayName = 'Link';

package/lib/components/ListBox/ListBox.js

@@ -25,15 +25,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["children", "className", "disabled", "type", "size", "invalid", "invalidText", "warn", "warnText", "light", "isOpen"];
-
-var handleOnKeyDown = function handleOnKeyDown(event) {
+const handleOnKeyDown = event => {
   if (event.keyCode === 27) {
     event.stopPropagation();
   }
 };
 
-var handleClick = function handleClick(event) {
+const handleClick = event => {
   event.preventDefault();
   event.stopPropagation();
 };
@@ -42,29 +40,38 @@ var handleClick = function handleClick(event) {
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-var ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListBox(_ref, ref) {
-  var _objectSpread2;
-
-  var children = _ref.children,
-      containerClassName = _ref.className,
-      disabled = _ref.disabled,
-      type = _ref.type,
-      size = _ref.size,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      warn = _ref.warn,
-      warnText = _ref.warnText,
-      light = _ref.light,
-      isOpen = _ref.isOpen,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var showWarning = !invalid && warn;
-  var className = cx__default["default"](_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, containerClassName && _rollupPluginBabelHelpers.defineProperty({}, containerClassName, true)), {}, (_objectSpread2 = {}, _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box"), true), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--inline"), type === 'inline'), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--light"), light), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--expanded"), isOpen), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "".concat(prefix, "--list-box--warning"), showWarning), _objectSpread2)));
+const ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListBox(_ref, ref) {
+  let {
+    children,
+    className: containerClassName,
+    disabled,
+    type,
+    size,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+    light,
+    isOpen,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const showWarning = !invalid && warn;
+  const className = cx__default["default"]({ ...(containerClassName && {
+      [containerClassName]: true
+    }),
+    [`${prefix}--list-box`]: true,
+    [`${prefix}--list-box--${size}`]: size,
+    [`${prefix}--list-box--inline`]: type === 'inline',
+    [`${prefix}--list-box--disabled`]: disabled,
+    [`${prefix}--list-box--light`]: light,
+    [`${prefix}--list-box--expanded`]: isOpen,
+    [`${prefix}--list-box--invalid`]: invalid,
+    [`${prefix}--list-box--warning`]: showWarning
+  });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     ref: ref,
@@ -72,11 +79,11 @@ var ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListBox
     onClick: handleClick,
     "data-invalid": invalid || undefined
   }), children), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
-    className: "".concat(prefix, "--list-box__divider")
+    className: `${prefix}--list-box__divider`
   }), invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, invalidText) : null, showWarning ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, warnText) : null);
 });
 ListBox.displayName = 'ListBox';

package/lib/components/ListBox/ListBoxField.js

@@ -19,22 +19,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["children", "disabled", "tabIndex"];
-
 /**
  * `ListBoxField` is responsible for creating the containing node for valid
  * elements inside of a field. It also provides a11y-related attributes like
  * `role` to make sure a user can focus the given field.
  */
 function ListBoxField(_ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      tabIndex = _ref.tabIndex,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+  let {
+    children,
+    disabled,
+    tabIndex,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: "".concat(prefix, "--list-box__field"),
+    className: `${prefix}--list-box__field`,
     tabIndex: !disabled && tabIndex || -1
   }, rest), children);
 }

package/lib/components/ListBox/ListBoxMenu.js

@@ -20,23 +20,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["children", "id"];
-
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-var ListBoxMenu = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenu(_ref, ref) {
-  var children = _ref.children,
-      id = _ref.id,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+const ListBoxMenu = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenu(_ref, ref) {
+  let {
+    children,
+    id,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     id: id,
-    className: "".concat(prefix, "--list-box__menu"),
+    className: `${prefix}--list-box__menu`,
     role: "listbox"
   }, rest), children);
 });

package/lib/components/ListBox/ListBoxMenuIcon.js

@@ -9,7 +9,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
@@ -22,28 +21,31 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _defaultTranslations;
-var translationIds = {
+const translationIds = {
   'close.menu': 'close.menu',
   'open.menu': 'open.menu'
 };
-var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close menu'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['open.menu'], 'Open menu'), _defaultTranslations);
-
-var defaultTranslateWithId = function defaultTranslateWithId(id) {
-  return defaultTranslations[id];
+const defaultTranslations = {
+  [translationIds['close.menu']]: 'Close menu',
+  [translationIds['open.menu']]: 'Open menu'
 };
 
+const defaultTranslateWithId = id => defaultTranslations[id];
+
 /**
  * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-var ListBoxMenuIcon = function ListBoxMenuIcon(_ref) {
-  var isOpen = _ref.isOpen,
-      _ref$translateWithId = _ref.translateWithId,
-      t = _ref$translateWithId === void 0 ? defaultTranslateWithId : _ref$translateWithId;
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--list-box__menu-icon"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--list-box__menu-icon--open"), isOpen));
-  var description = isOpen ? t('close.menu') : t('open.menu');
+const ListBoxMenuIcon = _ref => {
+  let {
+    isOpen,
+    translateWithId: t = defaultTranslateWithId
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--list-box__menu-icon`, {
+    [`${prefix}--list-box__menu-icon--open`]: isOpen
+  });
+  const description = isOpen ? t('close.menu') : t('open.menu');
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {