@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -5,7 +5,7 @@
  * 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 cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState } from 'react';
@@ -14,9 +14,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["children", "className", "currentIndex", "onChange", "spaceEqually", "vertical"],
-    _excluded2 = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"];
-var defaultTranslations = {
+const defaultTranslations = {
   'carbon.progress-step.complete': 'Complete',
   'carbon.progress-step.incomplete': 'Incomplete',
   'carbon.progress-step.current': 'Current',
@@ -28,30 +26,24 @@ function translateWithId(messageId) {
 }
 
 function ProgressIndicator(_ref) {
-  var _cx;
-
-  var children = _ref.children,
-      customClassName = _ref.className,
-      _ref$currentIndex = _ref.currentIndex,
-      controlledIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
-      onChange = _ref.onChange,
-      spaceEqually = _ref.spaceEqually,
-      vertical = _ref.vertical,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useState = useState(controlledIndex),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentIndex = _useState2[0],
-      setCurrentIndex = _useState2[1];
-
-  var _useState3 = useState(controlledIndex),
-      _useState4 = _slicedToArray(_useState3, 2),
-      prevControlledIndex = _useState4[0],
-      setPrevControlledIndex = _useState4[1];
-
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--progress"), true), _defineProperty(_cx, "".concat(prefix, "--progress--vertical"), vertical), _defineProperty(_cx, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _defineProperty(_cx, customClassName, customClassName), _cx));
+  let {
+    children,
+    className: customClassName,
+    currentIndex: controlledIndex = 0,
+    onChange,
+    spaceEqually,
+    vertical,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const [currentIndex, setCurrentIndex] = useState(controlledIndex);
+  const [prevControlledIndex, setPrevControlledIndex] = useState(controlledIndex);
+  const className = cx({
+    [`${prefix}--progress`]: true,
+    [`${prefix}--progress--vertical`]: vertical,
+    [`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
+    [customClassName]: customClassName
+  });
 
   if (controlledIndex !== prevControlledIndex) {
     setCurrentIndex(controlledIndex);
@@ -60,34 +52,32 @@ function ProgressIndicator(_ref) {
 
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     className: className
-  }, rest), React__default.Children.map(children, function (child, index) {
+  }, rest), React__default.Children.map(children, (child, index) => {
     // only setup click handlers if onChange event is passed
-    var onClick = onChange ? function () {
-      return onChange(index);
-    } : undefined;
+    const onClick = onChange ? () => onChange(index) : undefined;
 
     if (index === currentIndex) {
       return /*#__PURE__*/React__default.cloneElement(child, {
         complete: child.props.complete,
         current: child.props.complete ? false : true,
-        index: index,
-        onClick: onClick
+        index,
+        onClick
       });
     }
 
     if (index < currentIndex) {
       return /*#__PURE__*/React__default.cloneElement(child, {
         complete: true,
-        index: index,
-        onClick: onClick
+        index,
+        onClick
       });
     }
 
     if (index > currentIndex) {
       return /*#__PURE__*/React__default.cloneElement(child, {
         complete: child.props.complete || false,
-        index: index,
-        onClick: onClick
+        index,
+        onClick
       });
     }
 
@@ -129,40 +119,48 @@ ProgressIndicator.propTypes = {
 };
 
 function ProgressStep(_ref2) {
-  var _cx2;
-
-  var label = _ref2.label,
-      description = _ref2.description,
-      className = _ref2.className,
-      current = _ref2.current,
-      complete = _ref2.complete,
-      invalid = _ref2.invalid,
-      secondaryLabel = _ref2.secondaryLabel,
-      disabled = _ref2.disabled,
-      onClick = _ref2.onClick,
-      t = _ref2.translateWithId,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
-
-  var prefix = usePrefix();
-  var classes = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--progress-step"), true), _defineProperty(_cx2, "".concat(prefix, "--progress-step--current"), current), _defineProperty(_cx2, "".concat(prefix, "--progress-step--complete"), complete), _defineProperty(_cx2, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _defineProperty(_cx2, "".concat(prefix, "--progress-step--disabled"), disabled), _defineProperty(_cx2, className, className), _cx2));
-
-  var handleKeyDown = function handleKeyDown(e) {
+  let {
+    label,
+    description,
+    className,
+    current,
+    complete,
+    invalid,
+    secondaryLabel,
+    disabled,
+    onClick,
+    translateWithId: t,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix();
+  const classes = cx({
+    [`${prefix}--progress-step`]: true,
+    [`${prefix}--progress-step--current`]: current,
+    [`${prefix}--progress-step--complete`]: complete,
+    [`${prefix}--progress-step--incomplete`]: !complete && !current,
+    [`${prefix}--progress-step--disabled`]: disabled,
+    [className]: className
+  });
+
+  const handleKeyDown = e => {
     if (matches(e, [Enter, Space])) {
       onClick();
     }
   }; // eslint-disable-next-line react/prop-types
 
 
-  var SVGIcon = function SVGIcon(_ref3) {
-    var complete = _ref3.complete,
-        current = _ref3.current,
-        description = _ref3.description,
-        invalid = _ref3.invalid,
-        prefix = _ref3.prefix;
+  const SVGIcon = _ref3 => {
+    let {
+      complete,
+      current,
+      description,
+      invalid,
+      prefix
+    } = _ref3;
 
     if (invalid) {
       return /*#__PURE__*/React__default.createElement(Warning, {
-        className: "".concat(prefix, "--progress__warning")
+        className: `${prefix}--progress__warning`
       }, /*#__PURE__*/React__default.createElement("title", null, description));
     }
 
@@ -177,7 +175,7 @@ function ProgressStep(_ref2) {
     return /*#__PURE__*/React__default.createElement(CircleDash, null, /*#__PURE__*/React__default.createElement("title", null, description));
   };
 
-  var message = t('carbon.progress-step.incomplete');
+  let message = t('carbon.progress-step.incomplete');
 
   if (current) {
     message = t('carbon.progress-step.current');
@@ -195,7 +193,9 @@ function ProgressStep(_ref2) {
     className: classes
   }, /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
-    className: cx("".concat(prefix, "--progress-step-button"), _defineProperty({}, "".concat(prefix, "--progress-step-button--unclickable"), !onClick || current)),
+    className: cx(`${prefix}--progress-step-button`, {
+      [`${prefix}--progress-step-button--unclickable`]: !onClick || current
+    }),
     disabled: disabled,
     "aria-disabled": disabled,
     tabIndex: !current && onClick && !disabled ? 0 : -1,
@@ -209,15 +209,15 @@ function ProgressStep(_ref2) {
     invalid: invalid,
     prefix: prefix
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--progress-text")
+    className: `${prefix}--progress-text`
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(prefix, "--progress-label")
+    className: `${prefix}--progress-label`
   }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(prefix, "--progress-optional")
+    className: `${prefix}--progress-optional`
   }, secondaryLabel) : null), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
+    className: `${prefix}--assistive-text`
   }, message), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--progress-line")
+    className: `${prefix}--progress-line`
   })));
 }
 
@@ -289,7 +289,7 @@ ProgressStep.propTypes = {
   translateWithId: PropTypes.func
 };
 ProgressStep.defaultProps = {
-  translateWithId: translateWithId
+  translateWithId
 };
 
 export { ProgressIndicator, ProgressStep };

package/es/components/RadioButton/RadioButton.Skeleton.js

@@ -5,25 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, 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';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className"];
-
 function RadioButtonSkeleton(props) {
-  var className = props.className,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
+  const {
+    className,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx("".concat(prefix, "--radio-button-wrapper"), className)
+    className: cx(`${prefix}--radio-button-wrapper`, className)
   }, rest), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--radio-button ").concat(prefix, "--skeleton")
+    className: `${prefix}--radio-button ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--radio-button__label ").concat(prefix, "--skeleton")
+    className: `${prefix}--radio-button__label ${prefix}--skeleton`
   }));
 }
 

package/es/components/RadioButton/RadioButton.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, { useRef } from 'react';
 import cx from 'classnames';
@@ -15,39 +15,39 @@ import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { Text } from '../Text/Text.js';
 
-var _excluded = ["className", "disabled", "hideLabel", "id", "labelPosition", "labelText", "name", "onChange", "value"];
-var RadioButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var className = props.className,
-      disabled = props.disabled,
-      hideLabel = props.hideLabel,
-      id = props.id,
-      _props$labelPosition = props.labelPosition,
-      labelPosition = _props$labelPosition === void 0 ? 'right' : _props$labelPosition,
-      _props$labelText = props.labelText,
-      labelText = _props$labelText === void 0 ? '' : _props$labelText,
-      name = props.name,
-      _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
-      _props$value = props.value,
-      value = _props$value === void 0 ? '' : _props$value,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-  var uid = useId('radio-button');
-  var uniqueId = id || uid;
+const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    className,
+    disabled,
+    hideLabel,
+    id,
+    labelPosition = 'right',
+    labelText = '',
+    name,
+    onChange = () => {},
+    value = '',
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const uid = useId('radio-button');
+  const uniqueId = id || uid;
 
   function handleOnChange(event) {
     onChange(value, name, event);
   }
 
-  var innerLabelClasses = cx("".concat(prefix, "--radio-button__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
-  var wrapperClasses = cx(className, "".concat(prefix, "--radio-button-wrapper"), _defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
-  var inputRef = useRef(null);
+  const innerLabelClasses = cx(`${prefix}--radio-button__label-text`, {
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  const wrapperClasses = cx(className, `${prefix}--radio-button-wrapper`, {
+    [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right'
+  });
+  const inputRef = useRef(null);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
     type: "radio",
-    className: "".concat(prefix, "--radio-button"),
+    className: `${prefix}--radio-button`,
     onChange: handleOnChange,
     id: uniqueId,
     ref: mergeRefs(inputRef, ref),
@@ -56,9 +56,9 @@ var RadioButton = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     name: name
   })), /*#__PURE__*/React__default.createElement("label", {
     htmlFor: uniqueId,
-    className: "".concat(prefix, "--radio-button__label")
+    className: `${prefix}--radio-button__label`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--radio-button__appearance")
+    className: `${prefix}--radio-button__appearance`
   }), labelText && /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
   }, labelText)));

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -5,7 +5,7 @@
  * 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, useRef } from 'react';
 import cx from 'classnames';
@@ -15,67 +15,49 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import mergeRefs from '../../tools/mergeRefs.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
-var _excluded = ["children", "className", "defaultSelected", "disabled", "helperText", "invalid", "invalidText", "labelPosition", "legendText", "name", "onChange", "orientation", "readOnly", "valueSelected", "warn", "warnText"];
-var getInstanceId = setupGetInstanceId();
-var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var _classNames;
-
-  var children = props.children,
-      className = props.className,
-      defaultSelected = props.defaultSelected,
-      disabled = props.disabled,
-      helperText = props.helperText,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
-      invalidText = props.invalidText,
-      _props$labelPosition = props.labelPosition,
-      labelPosition = _props$labelPosition === void 0 ? 'right' : _props$labelPosition,
-      legendText = props.legendText,
-      name = props.name,
-      _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-      readOnly = props.readOnly,
-      valueSelected = props.valueSelected,
-      _props$warn = props.warn,
-      warn = _props$warn === void 0 ? false : _props$warn,
-      warnText = props.warnText,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useState = useState(valueSelected !== null && valueSelected !== void 0 ? valueSelected : defaultSelected),
-      _useState2 = _slicedToArray(_useState, 2),
-      selected = _useState2[0],
-      setSelected = _useState2[1];
-
-  var _useState3 = useState(valueSelected),
-      _useState4 = _slicedToArray(_useState3, 2),
-      prevValueSelected = _useState4[0],
-      setPrevValueSelected = _useState4[1];
-
-  var _useRef = useRef(getInstanceId()),
-      radioButtonGroupInstanceId = _useRef.current;
+const getInstanceId = setupGetInstanceId();
+const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    defaultSelected,
+    disabled,
+    helperText,
+    invalid = false,
+    invalidText,
+    labelPosition = 'right',
+    legendText,
+    name,
+    onChange = () => {},
+    orientation = 'horizontal',
+    readOnly,
+    valueSelected,
+    warn = false,
+    warnText,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
+  const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
+  const {
+    current: radioButtonGroupInstanceId
+  } = useRef(getInstanceId());
   /**
    * prop + state alignment - getDerivedStateFromProps
    * only update if selected prop changes
    */
 
-
   if (valueSelected !== prevValueSelected) {
     setSelected(valueSelected);
     setPrevValueSelected(valueSelected);
   }
 
   function getRadioButtons() {
-    var mappedChildren = React__default.Children.map(children, function (radioButton) {
-      var _props;
-
-      var _ref = (_props = radioButton === null || radioButton === void 0 ? void 0 : radioButton.props) !== null && _props !== void 0 ? _props : undefined,
-          value = _ref.value;
-
-      var newProps = {
+    const mappedChildren = React__default.Children.map(children, radioButton => {
+      const {
+        value
+      } = (radioButton === null || radioButton === void 0 ? void 0 : radioButton.props) ?? undefined;
+      const newProps = {
         name: name,
         key: value,
         value: value,
@@ -103,17 +85,25 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, r
     }
   }
 
-  var showWarning = !readOnly && !invalid && warn;
-  var showHelper = !invalid && !disabled && !warn;
-  var wrapperClasses = cx("".concat(prefix, "--form-item"), className);
-  var fieldsetClasses = cx("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--invalid"), !readOnly && invalid), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--warning"), showWarning), _classNames));
-  var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var helperId = !helperText ? undefined : "radio-button-group-helper-text-".concat(radioButtonGroupInstanceId);
-  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const showWarning = !readOnly && !invalid && warn;
+  const showHelper = !invalid && !disabled && !warn;
+  const wrapperClasses = cx(`${prefix}--form-item`, className);
+  const fieldsetClasses = cx(`${prefix}--radio-button-group`, {
+    [`${prefix}--radio-button-group--${orientation}`]: orientation === 'vertical',
+    [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
+    [`${prefix}--radio-button-group--readonly`]: readOnly,
+    [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
+    [`${prefix}--radio-button-group--warning`]: showWarning
+  });
+  const helperClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const helperId = !helperText ? undefined : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
+  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
-  var divRef = useRef(null);
+  const divRef = useRef(null);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses,
     ref: mergeRefs(divRef, ref)
@@ -124,17 +114,17 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function (props, r
     "aria-readonly": readOnly,
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default.createElement(Legend, {
-    className: "".concat(prefix, "--label")
+    className: `${prefix}--label`
   }, legendText), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--radio-button__validation-msg")
+    className: `${prefix}--radio-button__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
-    className: "".concat(prefix, "--radio-button__invalid-icon")
+    className: `${prefix}--radio-button__invalid-icon`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, invalidText)), showWarning && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-    className: "".concat(prefix, "--radio-button__invalid-icon ").concat(prefix, "--radio-button__invalid-icon--warning")
+    className: `${prefix}--radio-button__invalid-icon ${prefix}--radio-button__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, warnText))), showHelper && helper);
 });
 RadioButtonGroup.propTypes = {

package/es/components/RadioTile/RadioTile.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 { CheckmarkFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -17,26 +17,28 @@ import { matches } from '../../internal/keyboard/match.js';
 import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CheckmarkFilled;
-
-var _excluded = ["children", "className", "disabled", "light", "checked", "name", "value", "id", "onChange", "tabIndex"];
-var RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref, ref) {
-  var _cx;
-
-  var children = _ref.children,
-      customClassName = _ref.className,
-      disabled = _ref.disabled,
-      light = _ref.light,
-      checked = _ref.checked,
-      name = _ref.name,
-      value = _ref.value,
-      id = _ref.id,
-      onChange = _ref.onChange,
-      tabIndex = _ref.tabIndex,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var inputId = useFallbackId(id);
-  var className = cx(customClassName, "".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tile--is-selected"), checked), _defineProperty(_cx, "".concat(prefix, "--tile--light"), light), _defineProperty(_cx, "".concat(prefix, "--tile--disabled"), disabled), _cx));
+const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref, ref) {
+  let {
+    children,
+    className: customClassName,
+    disabled,
+    // eslint-disable-next-line no-unused-vars
+    light,
+    checked,
+    name,
+    value,
+    id,
+    onChange,
+    tabIndex,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const inputId = useFallbackId(id);
+  const className = cx(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, {
+    [`${prefix}--tile--is-selected`]: checked,
+    [`${prefix}--tile--light`]: light,
+    [`${prefix}--tile--disabled`]: disabled
+  });
 
   function handleOnChange(evt) {
     onChange(value, name, evt);
@@ -49,9 +51,9 @@ var RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref,
     }
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
     checked: checked,
-    className: "".concat(prefix, "--tile-input"),
+    className: `${prefix}--tile-input`,
     disabled: disabled,
     id: inputId,
     name: name,
@@ -65,9 +67,9 @@ var RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref,
     htmlFor: inputId,
     className: className
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--tile__checkmark")
+    className: `${prefix}--tile__checkmark`
   }, _CheckmarkFilled || (_CheckmarkFilled = /*#__PURE__*/React__default.createElement(CheckmarkFilled, null))), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--tile-content")
+    className: `${prefix}--tile-content`
   }, children)));
 });
 RadioTile.propTypes = {
@@ -123,7 +125,7 @@ RadioTile.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
 };
 RadioTile.defaultProps = {
-  onChange: function onChange() {},
+  onChange: () => {},
   tabIndex: 0
 };
 var RadioTile$1 = RadioTile;