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

package/lib/components/Tabs/usePressable.js

@@ -9,50 +9,41 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
 function usePressable(ref) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      onPress = _ref.onPress,
-      onPressIn = _ref.onPressIn,
-      onPressOut = _ref.onPressOut,
-      onLongPress = _ref.onLongPress,
-      _ref$delayLongPressMs = _ref.delayLongPressMs,
-      delayLongPressMs = _ref$delayLongPressMs === void 0 ? 500 : _ref$delayLongPressMs;
-
-  var savedOnPress = React.useRef(onPress);
-  var savedOnPressIn = React.useRef(onPressIn);
-  var savedOnPressOut = React.useRef(onPressOut);
-  var savedOnLongPress = React.useRef(onLongPress);
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      pendingLongPress = _useState2[0],
-      setPendingLongPress = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      longPress = _useState4[0],
-      setLongPress = _useState4[1];
-
-  var state = React.useRef({
+  let {
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+    delayLongPressMs = 500
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const savedOnPress = React.useRef(onPress);
+  const savedOnPressIn = React.useRef(onPressIn);
+  const savedOnPressOut = React.useRef(onPressOut);
+  const savedOnLongPress = React.useRef(onLongPress);
+  const [pendingLongPress, setPendingLongPress] = React.useState(false);
+  const [longPress, setLongPress] = React.useState(false);
+  const state = React.useRef({
     longPress: false
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     savedOnPress.current = onPress;
   }, [onPress]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     savedOnPressIn.current = onPressIn;
   }, [onPressIn]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     savedOnPressOut.current = onPressOut;
   }, [onPressOut]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     savedOnLongPress.current = onLongPress;
   }, [onLongPress]);
-  React.useEffect(function () {
-    var element = ref.current; // Fired when a pointer becomes active buttons state.
+  React.useEffect(() => {
+    const {
+      current: element
+    } = ref; // Fired when a pointer becomes active buttons state.
 
     function onPointerDown(event) {
       var _savedOnPressIn$curre;
@@ -116,7 +107,7 @@ function usePressable(ref) {
     element.addEventListener('pointerleave', onPointerLeave);
     element.addEventListener('click', onClick);
     element.addEventListener('contextmenu', onContextMenu);
-    return function () {
+    return () => {
       element.removeEventListener('pointerdown', onPointerDown);
       element.removeEventListener('pointerup', onPointerUp);
       element.removeEventListener('pointercancel', onPointerCancel);
@@ -125,18 +116,18 @@ function usePressable(ref) {
       element.removeEventListener('contextmenu', onContextMenu);
     };
   }, [ref]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (pendingLongPress) {
-      var timeoutId = setTimeout(function () {
+      const timeoutId = setTimeout(() => {
         setPendingLongPress(false);
         setLongPress(true);
       }, delayLongPressMs);
-      return function () {
+      return () => {
         clearTimeout(timeoutId);
       };
     }
   }, [pendingLongPress, delayLongPressMs]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (longPress) {
       var _savedOnLongPress$cur;
 

package/lib/components/Tag/Tag.Skeleton.js

@@ -21,16 +21,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "size"];
-
 function TagSkeleton(_ref) {
-  var className = _ref.className,
-      size = _ref.size,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+  let {
+    className,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--tag"), "".concat(prefix, "--skeleton"), className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tag--").concat(size), size))
+    className: cx__default["default"](`${prefix}--tag`, `${prefix}--skeleton`, className, {
+      [`${prefix}--tag--${size}`]: size
+    })
   }, rest));
 }
 

package/lib/components/Tag/Tag.js

@@ -24,10 +24,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
-
-var _excluded = ["children", "className", "id", "type", "filter", "renderIcon", "title", "disabled", "onClose", "size"];
-var getInstanceId = setupGetInstanceId["default"]();
-var TYPES = {
+const getInstanceId = setupGetInstanceId["default"]();
+const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
   purple: 'Purple',
@@ -42,26 +40,31 @@ var TYPES = {
   outline: 'Outline'
 };
 
-var Tag = function Tag(_ref) {
-  var _classNames;
-
-  var children = _ref.children,
-      className = _ref.className,
-      id = _ref.id,
-      type = _ref.type,
-      filter = _ref.filter,
-      CustomIconElement = _ref.renderIcon,
-      title = _ref.title,
-      disabled = _ref.disabled,
-      onClose = _ref.onClose,
-      size = _ref.size,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var tagId = id || "tag-".concat(getInstanceId());
-  var tagClasses = cx__default["default"]("".concat(prefix, "--tag"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tag--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tag--filter"), filter), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tag--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tag--").concat(type), type), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--tag--interactive"), other.onClick && !filter), _classNames));
-
-  var handleClose = function handleClose(event) {
+const Tag = _ref => {
+  let {
+    children,
+    className,
+    id,
+    type,
+    filter,
+    renderIcon: CustomIconElement,
+    title,
+    disabled,
+    onClose,
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const tagId = id || `tag-${getInstanceId()}`;
+  const tagClasses = cx__default["default"](`${prefix}--tag`, className, {
+    [`${prefix}--tag--disabled`]: disabled,
+    [`${prefix}--tag--filter`]: filter,
+    [`${prefix}--tag--${size}`]: size,
+    [`${prefix}--tag--${type}`]: type,
+    [`${prefix}--tag--interactive`]: other.onClick && !filter
+  });
+
+  const handleClose = event => {
     if (onClose) {
       event.stopPropagation();
       onClose(event);
@@ -71,14 +74,14 @@ var Tag = function Tag(_ref) {
   if (filter) {
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
       className: tagClasses,
-      "aria-label": title !== undefined ? "".concat(title, " ").concat(children) : "Clear filter ".concat(children),
+      "aria-label": title !== undefined ? `${title} ${children}` : `Clear filter ${children}`,
       id: tagId
     }, other), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(prefix, "--tag__label"),
+      className: `${prefix}--tag__label`,
       title: typeof children === 'string' ? children : null
     }, children !== null && children !== undefined ? children : TYPES[type]), /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: "".concat(prefix, "--tag__close-icon"),
+      className: `${prefix}--tag__close-icon`,
       onClick: handleClose,
       disabled: disabled,
       "aria-labelledby": tagId,
@@ -86,13 +89,13 @@ var Tag = function Tag(_ref) {
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
   }
 
-  var ComponentTag = other.onClick ? 'button' : 'div';
+  const ComponentTag = other.onClick ? 'button' : 'div';
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
     disabled: ComponentTag === 'button' ? disabled : null,
     className: tagClasses,
     id: tagId
   }, other), CustomIconElement ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--tag__custom-icon")
+    className: `${prefix}--tag__custom-icon`
   }, /*#__PURE__*/React__default["default"].createElement(CustomIconElement, null)) : '', /*#__PURE__*/React__default["default"].createElement("span", {
     title: typeof children === 'string' ? children : null
   }, children !== null && children !== undefined ? children : TYPES[type]));
@@ -151,7 +154,7 @@ Tag.propTypes = {
    */
   type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
 };
-var types = Object.keys(TYPES);
+const types = Object.keys(TYPES);
 var Tag$1 = Tag;
 
 exports["default"] = Tag$1;

package/lib/components/Text/Text.js

@@ -19,32 +19,32 @@ 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 Text(_ref) {
-  var as = _ref.as,
-      children = _ref.children,
-      _ref$dir = _ref.dir,
-      dir = _ref$dir === void 0 ? 'auto' : _ref$dir,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
+  let {
+    as,
+    children,
+    dir = 'auto',
+    ...rest
+  } = _ref;
   // TODO: Update with context typing once its been converted to TS
-  var context = React.useContext(TextDirectionContext.TextDirectionContext);
-  var textProps = {};
-  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
-
-  var value = _rollupPluginBabelHelpers.objectSpread2({}, context);
+  const context = React.useContext(TextDirectionContext.TextDirectionContext);
+  const textProps = {};
+  const BaseComponent = as ?? 'span';
+  const value = { ...context
+  };
 
   if (!context) {
     textProps.dir = dir;
     value.direction = dir;
   } else {
-    var parentDirection = context.direction,
-        getTextDirection = context.getTextDirection;
+    const {
+      direction: parentDirection,
+      getTextDirection
+    } = context;
 
     if (getTextDirection && getTextDirection.current) {
-      var text = getTextFromChildren(children);
-      var override = getTextDirection.current(text);
+      const text = getTextFromChildren(children);
+      const override = getTextDirection.current(text);
 
       if (parentDirection !== override) {
         textProps.dir = override;
@@ -90,13 +90,13 @@ function getTextFromChildren(children) {
     return children;
   }
 
-  var text = (_React$Children$map = React__default["default"].Children.map(children, function (child) {
+  const text = (_React$Children$map = React__default["default"].Children.map(children, child => {
     if (typeof child === 'string') {
       return child;
     }
 
     return null;
-  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(function (text) {
+  })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.filter(text => {
     return text !== null;
   });
 

package/lib/components/Text/TextDirection.js

@@ -19,18 +19,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function TextDirection(_ref) {
-  var children = _ref.children,
-      _ref$dir = _ref.dir,
-      dir = _ref$dir === void 0 ? 'auto' : _ref$dir,
-      getTextDirection = _ref.getTextDirection;
-  var savedCallback = React.useRef(getTextDirection);
-  var value = React.useMemo(function () {
+  let {
+    children,
+    dir = 'auto',
+    getTextDirection
+  } = _ref;
+  const savedCallback = React.useRef(getTextDirection);
+  const value = React.useMemo(() => {
     return {
       direction: dir,
       getTextDirection: savedCallback
     };
   }, [dir]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     savedCallback.current = getTextDirection;
   });
   return /*#__PURE__*/React__default["default"].createElement(TextDirectionContext.TextDirectionContext.Provider, {

package/lib/components/Text/TextDirectionContext.js

@@ -13,6 +13,6 @@ var React = require('react');
 
 /** @type any */
 
-var TextDirectionContext = /*#__PURE__*/React.createContext(null);
+const TextDirectionContext = /*#__PURE__*/React.createContext(null);
 
 exports.TextDirectionContext = TextDirectionContext;

package/lib/components/Text/index.js

@@ -14,7 +14,7 @@ var Text = require('./Text.js');
 var createTextComponent = require('./createTextComponent.js');
 
 createTextComponent.createTextComponent('label', 'Label');
-var Legend = createTextComponent.createTextComponent('legend', 'Legend');
+const Legend = createTextComponent.createTextComponent('legend', 'Legend');
 
 exports.TextDirection = TextDirection.TextDirection;
 exports.Text = Text.Text;

package/lib/components/TextArea/TextArea.Skeleton.js

@@ -21,20 +21,19 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "hideLabel"];
-
-var TextAreaSkeleton = function TextAreaSkeleton(props) {
-  var className = props.className,
-      hideLabel = props.hideLabel,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+const TextAreaSkeleton = props => {
+  const {
+    className,
+    hideLabel,
+    ...rest
+  } = props;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+    className: cx__default["default"](`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-area")
+    className: `${prefix}--skeleton ${prefix}--text-area`
   }));
 };
 

package/lib/components/TextArea/TextArea.js

@@ -30,61 +30,53 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount", "warn", "warnText"];
-var getInstanceId = setupGetInstanceId["default"]();
-var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props, forwardRef) {
-  var _classNames, _classNames4, _classNames5;
-
-  var className = props.className,
-      id = props.id,
-      labelText = props.labelText,
-      hideLabel = props.hideLabel,
-      _onChange = props.onChange,
-      _onClick = props.onClick,
-      invalid = props.invalid,
-      invalidText = props.invalidText,
-      helperText = props.helperText,
-      light = props.light,
-      placeholder = props.placeholder,
-      enableCounter = props.enableCounter,
-      maxCount = props.maxCount,
-      _props$warn = props.warn,
-      warn = _props$warn === void 0 ? false : _props$warn,
-      warnText = props.warnText,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var enabled = index.useFeatureFlag('enable-v11-release');
-  var defaultValue = other.defaultValue,
-      value = other.value,
-      disabled = other.disabled;
-
-  var _useState = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      textCount = _useState2[0],
-      setTextCount = _useState2[1];
-
-  var _useRef = React.useRef(getInstanceId()),
-      textAreaInstanceId = _useRef.current;
-
-  var textareaProps = {
-    id: id,
-    onChange: function onChange(evt) {
-      if (!other.disabled && _onChange) {
+const getInstanceId = setupGetInstanceId["default"]();
+const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwardRef) => {
+  const {
+    className,
+    id,
+    labelText,
+    hideLabel,
+    onChange,
+    onClick,
+    invalid,
+    invalidText,
+    helperText,
+    light,
+    placeholder,
+    enableCounter,
+    maxCount,
+    warn = false,
+    warnText,
+    ...other
+  } = props;
+  const prefix = usePrefix.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const enabled = index.useFeatureFlag('enable-v11-release');
+  const {
+    defaultValue,
+    value,
+    disabled
+  } = other;
+  const [textCount, setTextCount] = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0);
+  const {
+    current: textAreaInstanceId
+  } = React.useRef(getInstanceId());
+  const textareaProps = {
+    id,
+    onChange: evt => {
+      if (!other.disabled && onChange) {
         var _evt$target$value;
 
         setTextCount((_evt$target$value = evt.target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length);
-
-        _onChange(evt);
+        onChange(evt);
       }
     },
-    onClick: function onClick(evt) {
-      if (!other.disabled && _onClick) {
-        _onClick(evt);
+    onClick: evt => {
+      if (!other.disabled && onClick) {
+        onClick(evt);
       }
     }
   };
@@ -93,48 +85,59 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
     textareaProps.maxLength = maxCount;
   }
 
-  var ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
-  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
-  var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+  const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  const labelClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel && !isFluid,
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  var counterClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
-  var counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const counterClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled
+  });
+  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: counterClasses
-  }, "".concat(textCount, "/").concat(maxCount)) : null;
-  var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), other.disabled));
-  var helperId = !helperText ? undefined : "text-area-helper-text-".concat(textAreaInstanceId);
-  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, `${textCount}/${maxCount}`) : null;
+  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled
+  });
+  const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
-  var errorId = id + '-error-msg';
-  var error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const errorId = id + '-error-msg';
+  const error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
     role: "alert",
-    className: "".concat(prefix, "--form-requirement"),
+    className: `${prefix}--form-requirement`,
     id: errorId
   }, invalidText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-    className: "".concat(prefix, "--text-area__invalid-icon")
+    className: `${prefix}--text-area__invalid-icon`
   })) : null;
-  var warning = warn ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const warning = warn ? /*#__PURE__*/React__default["default"].createElement("div", {
     role: "alert",
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, warnText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
-    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
+    className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   })) : null;
-  var textareaClasses = cx__default["default"]("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--warn"), warn), _classNames4));
-  var textareaRef = React.useRef(null);
-  var ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
-  useIsomorphicEffect["default"](function () {
+  const textareaClasses = cx__default["default"](`${prefix}--text-area`, [enabled ? null : className], {
+    [`${prefix}--text-area--light`]: light,
+    [`${prefix}--text-area--invalid`]: invalid,
+    [`${prefix}--text-area--warn`]: warn
+  });
+  const textareaRef = React.useRef(null);
+  const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
+  useIsomorphicEffect["default"](() => {
     if (other.cols && textareaRef.current) {
       textareaRef.current.style.width = '';
       textareaRef.current.style.resize = 'none';
     } else if (textareaRef.current) {
-      textareaRef.current.style.width = "100%";
+      textareaRef.current.style.width = `100%`;
     }
   }, [other.cols]);
-  var ariaDescribedBy;
+  let ariaDescribedBy;
 
   if (invalid) {
     ariaDescribedBy = errorId;
@@ -142,7 +145,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
     ariaDescribedBy = helperId;
   }
 
-  var input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
+  const input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder,
     className: textareaClasses,
     "aria-invalid": invalid,
@@ -152,21 +155,24 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
     ref: ref
   }));
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
+    className: enabled ? cx__default["default"](`${prefix}--form-item`, className) : `${prefix}--form-item`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--text-area__label-wrapper")
+    className: `${prefix}--text-area__label-wrapper`
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(prefix, "--text-area__wrapper"), (_classNames5 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--warn"), warn), _classNames5)),
+    className: cx__default["default"](`${prefix}--text-area__wrapper`, {
+      [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
+      [`${prefix}--text-area__wrapper--warn`]: warn
+    }),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-    className: "".concat(prefix, "--text-area__invalid-icon")
+    className: `${prefix}--text-area__invalid-icon`
   }), warn && !invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
-    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
+    className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   }), input, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--text-area__counter-alert"),
+    className: `${prefix}--text-area__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
-    className: "".concat(prefix, "--text-area__divider")
+    className: `${prefix}--text-area__divider`
   }), isFluid && invalid ? error : null, isFluid && warn && !invalid ? warning : null), !invalid && !warn && !isFluid ? helper : null, invalid && !isFluid ? error : null, warn && !invalid && !isFluid ? warning : null);
 });
 TextArea.displayName = 'TextArea';
@@ -283,8 +289,8 @@ TextArea.propTypes = {
 };
 TextArea.defaultProps = {
   disabled: false,
-  onChange: function onChange() {},
-  onClick: function onClick() {},
+  onChange: () => {},
+  onClick: () => {},
   placeholder: '',
   rows: 4,
   invalid: false,