@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -26,92 +26,98 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["labelText", "className", "id", "placeholder", "onChange", "onClick", "hideLabel", "invalid", "invalidText", "helperText", "light", "type", "togglePasswordVisibility", "tooltipPosition", "tooltipAlignment", "hidePasswordLabel", "showPasswordLabel", "size"];
-var getInstanceId = setupGetInstanceId["default"]();
-var didWarnAboutDeprecation = false;
-var ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function ControlledPasswordInput(_ref, ref) {
-  var _classNames, _classNames2, _classNames4;
-
-  var labelText = _ref.labelText,
-      className = _ref.className,
-      id = _ref.id,
-      placeholder = _ref.placeholder,
-      _onChange = _ref.onChange,
-      _onClick = _ref.onClick,
-      hideLabel = _ref.hideLabel,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      helperText = _ref.helperText,
-      light = _ref.light,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'password' : _ref$type,
-      togglePasswordVisibility = _ref.togglePasswordVisibility,
-      _ref$tooltipPosition = _ref.tooltipPosition,
-      tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
-      _ref$tooltipAlignment = _ref.tooltipAlignment,
-      tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
-      _ref$hidePasswordLabe = _ref.hidePasswordLabel,
-      hidePasswordLabel = _ref$hidePasswordLabe === void 0 ? 'Hide password' : _ref$hidePasswordLabe,
-      _ref$showPasswordLabe = _ref.showPasswordLabel,
-      showPasswordLabel = _ref$showPasswordLabe === void 0 ? 'Show password' : _ref$showPasswordLabe,
-      size = _ref.size,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useRef = React.useRef(getInstanceId()),
-      controlledPasswordInstanceId = _useRef.current;
+const getInstanceId = setupGetInstanceId["default"]();
+let didWarnAboutDeprecation = false;
+const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function ControlledPasswordInput(_ref, ref) {
+  let {
+    labelText,
+    className,
+    id,
+    placeholder,
+    onChange,
+    onClick,
+    hideLabel,
+    invalid,
+    invalidText,
+    helperText,
+    light,
+    // eslint-disable-next-line react/prop-types
+    type = 'password',
+    // eslint-disable-next-line react/prop-types
+    togglePasswordVisibility,
+    tooltipPosition = 'bottom',
+    tooltipAlignment = 'center',
+    hidePasswordLabel = 'Hide password',
+    showPasswordLabel = 'Show password',
+    size,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const {
+    current: controlledPasswordInstanceId
+  } = React.useRef(getInstanceId());
 
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
     didWarnAboutDeprecation = true;
   }
 
-  var errorId = id + '-error-msg';
-  var textInputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--password-input"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
-
-  var sharedTextInputProps = _rollupPluginBabelHelpers.objectSpread2({
-    id: id,
-    onChange: function onChange(evt) {
+  const errorId = id + '-error-msg';
+  const textInputClasses = cx__default["default"](`${prefix}--text-input`, `${prefix}--password-input`, className, {
+    [`${prefix}--text-input--light`]: light,
+    [`${prefix}--text-input--invalid`]: invalid,
+    [`${prefix}--text-input--${size}`]: size
+  });
+  const sharedTextInputProps = {
+    id,
+    onChange: evt => {
       if (!other.disabled) {
-        _onChange(evt);
+        onChange(evt);
       }
     },
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (!other.disabled) {
-        _onClick(evt);
+        onClick(evt);
       }
     },
-    placeholder: placeholder,
-    type: type,
-    ref: ref,
-    className: textInputClasses
-  }, other);
-
-  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), other.disabled), _classNames2));
-  var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), other.disabled));
-  var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+    placeholder,
+    type,
+    ref,
+    className: textInputClasses,
+    ...other
+  };
+  const labelClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: other.disabled
+  });
+  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled
+  });
+  const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  var error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-requirement"),
+  const error = invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--form-requirement`,
     id: errorId
   }, invalidText) : null;
-  var passwordIsVisible = type === 'text';
-  var passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default["default"].createElement(iconsReact.ViewOff, {
-    className: "".concat(prefix, "--icon-visibility-off")
+  const passwordIsVisible = type === 'text';
+  const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default["default"].createElement(iconsReact.ViewOff, {
+    className: `${prefix}--icon-visibility-off`
   }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.View, {
-    className: "".concat(prefix, "--icon-visibility-on")
+    className: `${prefix}--icon-visibility-on`
+  });
+  const passwordVisibilityToggleClasses = cx__default["default"](`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
+    [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
+    [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
-  var passwordVisibilityToggleClasses = cx__default["default"]("".concat(prefix, "--text-input--password__visibility__toggle"), "".concat(prefix, "--btn"), "".concat(prefix, "--btn--icon-only"), "".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--tooltip--").concat(tooltipPosition), tooltipPosition), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--tooltip--align-").concat(tooltipAlignment), tooltipAlignment), _classNames4));
-  var helperId = !helperText ? undefined : "controlled-password-helper-text-".concat(controlledPasswordInstanceId);
-  var input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
-    invalid: invalid,
-    sharedTextInputProps: sharedTextInputProps,
+  const helperId = !helperText ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
+  const input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
+    invalid,
+    sharedTextInputProps,
     invalidId: errorId,
     hasHelper: !error && helperText,
-    helperId: helperId
+    helperId
   }), {
     "data-toggle-password-visibility": type === 'password'
   })), /*#__PURE__*/React__default["default"].createElement("button", {
@@ -119,19 +125,19 @@ var ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(
     className: passwordVisibilityToggleClasses,
     onClick: togglePasswordVisibility
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
+    className: `${prefix}--assistive-text`
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,
     className: helperTextClasses
   }, helperText) : null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--form-item ").concat(prefix, "--text-input-wrapper ").concat(prefix, "--password-input-wrapper")
+    className: `${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`
   }, label, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--text-input__field-wrapper"),
+    className: `${prefix}--text-input__field-wrapper`,
     "data-invalid": invalid || null
   }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-    className: "".concat(prefix, "--text-input__invalid-icon")
+    className: `${prefix}--text-input__invalid-icon`
   }), input), error ? error : helper);
 });
 ControlledPasswordInput.displayName = 'ControlledPasswordInput';
@@ -240,8 +246,8 @@ ControlledPasswordInput.propTypes = {
 };
 ControlledPasswordInput.defaultProps = {
   disabled: false,
-  onChange: function onChange() {},
-  onClick: function onClick() {},
+  onChange: () => {},
+  onClick: () => {},
   invalid: false,
   invalidText: '',
   helperText: '',

package/lib/components/TextInput/PasswordInput.js

@@ -27,113 +27,123 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "readOnly", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
-var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function PasswordInput(_ref, ref) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
-
-  var className = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      helperText = _ref.helperText,
-      hideLabel = _ref.hideLabel,
-      _ref$hidePasswordLabe = _ref.hidePasswordLabel,
-      hidePasswordLabel = _ref$hidePasswordLabe === void 0 ? 'Hide password' : _ref$hidePasswordLabe,
-      id = _ref.id,
-      inline = _ref.inline,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      invalidText = _ref.invalidText,
-      labelText = _ref.labelText,
-      light = _ref.light,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      onTogglePasswordVisibility = _ref.onTogglePasswordVisibility,
-      placeholder = _ref.placeholder,
-      readOnly = _ref.readOnly,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$showPasswordLabe = _ref.showPasswordLabel,
-      showPasswordLabel = _ref$showPasswordLabe === void 0 ? 'Show password' : _ref$showPasswordLabe,
-      _ref$tooltipPosition = _ref.tooltipPosition,
-      tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
-      _ref$tooltipAlignment = _ref.tooltipAlignment,
-      tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'password' : _ref$type,
-      _ref$warn = _ref.warn,
-      warn = _ref$warn === void 0 ? false : _ref$warn,
-      warnText = _ref.warnText,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var _useState = React.useState(type),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      inputType = _useState2[0],
-      setInputType = _useState2[1];
-
-  var prefix = usePrefix.usePrefix();
-  var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
-    id: id,
-    invalid: invalid,
-    invalidText: invalidText,
-    warn: warn,
-    warnText: warnText,
-    readOnly: readOnly,
-    disabled: disabled
+const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function PasswordInput(_ref, ref) {
+  let {
+    className,
+    disabled = false,
+    helperText,
+    hideLabel,
+    hidePasswordLabel = 'Hide password',
+    id,
+    inline,
+    invalid = false,
+    invalidText,
+    labelText,
+    light,
+    onChange = () => {},
+    onClick = () => {},
+    onTogglePasswordVisibility,
+    placeholder,
+    readOnly,
+    size = 'md',
+    showPasswordLabel = 'Show password',
+    tooltipPosition = 'bottom',
+    tooltipAlignment = 'center',
+    type = 'password',
+    warn = false,
+    warnText,
+    ...rest
+  } = _ref;
+  const [inputType, setInputType] = React.useState(type);
+  const prefix = usePrefix.usePrefix();
+  const normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+    readOnly,
+    disabled
   });
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
 
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var handleTogglePasswordVisibility = function handleTogglePasswordVisibility(event) {
+  const handleTogglePasswordVisibility = event => {
     setInputType(inputType === 'password' ? 'text' : 'password');
     onTogglePasswordVisibility && onTogglePasswordVisibility(event);
   };
 
-  var textInputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--password-input"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
-
-  var sharedTextInputProps = _rollupPluginBabelHelpers.objectSpread2({
-    id: id,
-    onChange: function onChange(evt) {
+  const textInputClasses = cx__default["default"](`${prefix}--text-input`, `${prefix}--password-input`, className, {
+    [`${prefix}--text-input--light`]: light,
+    [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+    [`${prefix}--text-input--warning`]: normalizedProps.warn,
+    [`${prefix}--text-input--${size}`]: size
+  });
+  const sharedTextInputProps = {
+    id,
+    onChange: evt => {
       if (!disabled) {
-        _onChange(evt);
+        onChange(evt);
       }
     },
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (!disabled) {
-        _onClick(evt);
+        onClick(evt);
       }
     },
-    placeholder: placeholder,
+    placeholder,
     type: inputType,
     className: textInputClasses,
-    ref: ref
-  }, rest);
-
-  var inputWrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input--fluid"), isFluid), _classNames2));
-  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
-  var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
-  var fieldOuterWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-outer-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
-  var fieldWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _classNames7));
-  var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+    ref,
+    ...rest
+  };
+  const inputWrapperClasses = cx__default["default"](`${prefix}--form-item`, `${prefix}--text-input-wrapper`, `${prefix}--password-input-wrapper`, {
+    [`${prefix}--text-input-wrapper--light`]: light,
+    [`${prefix}--text-input-wrapper--inline`]: inline,
+    [`${prefix}--text-input--fluid`]: isFluid
+  });
+  const labelClasses = cx__default["default"](`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--inline`]: inline,
+    [`${prefix}--label--inline--${size}`]: inline && !!size
+  });
+  const helperTextClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled,
+    [`${prefix}--form__helper-text--inline`]: inline
+  });
+  const fieldOuterWrapperClasses = cx__default["default"](`${prefix}--text-input__field-outer-wrapper`, {
+    [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
+  });
+  const fieldWrapperClasses = cx__default["default"](`${prefix}--text-input__field-wrapper`, {
+    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+  });
+  const iconClasses = cx__default["default"]({
+    [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
+    [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
+  });
+  const label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
-  var passwordIsVisible = inputType === 'text';
-  var passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default["default"].createElement(iconsReact.ViewOff, {
-    className: "".concat(prefix, "--icon-visibility-off")
+  const passwordIsVisible = inputType === 'text';
+  const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default["default"].createElement(iconsReact.ViewOff, {
+    className: `${prefix}--icon-visibility-off`
   }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.View, {
-    className: "".concat(prefix, "--icon-visibility-on")
+    className: `${prefix}--icon-visibility-on`
+  });
+  const passwordVisibilityToggleClasses = cx__default["default"](`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
+    [`${prefix}--btn--disabled`]: disabled,
+    [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
+    [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
-  var passwordVisibilityToggleClasses = cx__default["default"]("".concat(prefix, "--text-input--password__visibility__toggle"), "".concat(prefix, "--btn"), "".concat(prefix, "--btn--icon-only"), "".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), (_classNames8 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--btn--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--tooltip--").concat(tooltipPosition), tooltipPosition), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--tooltip--align-").concat(tooltipAlignment), tooltipAlignment), _classNames8));
-  var input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
-    sharedTextInputProps: sharedTextInputProps,
+  const input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
+    sharedTextInputProps,
     invalid: normalizedProps.invalid,
     invalidId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
@@ -144,23 +154,23 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
     disabled: disabled,
     "data-toggle-password-visibility": inputType === 'password'
   })), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
-    className: "".concat(prefix, "--text-input__divider")
+    className: `${prefix}--text-input__divider`
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
     onClick: handleTogglePasswordVisibility
   }, !disabled && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
+    className: `${prefix}--assistive-text`
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-  React.useEffect(function () {
+  React.useEffect(() => {
     setInputType(type);
   }, [type]);
-  var Icon = normalizedProps.icon;
+  const Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? label : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+    className: `${prefix}--text-input__label-helper-wrapper`
   }, label, !isFluid && helper), /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/TextInput/TextInput.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 = ["hideLabel", "className"];
-
-var TextInputSkeleton = function TextInputSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+const TextInputSkeleton = _ref => {
+  let {
+    hideLabel,
+    className,
+    ...rest
+  } = _ref;
+  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-input")
+    className: `${prefix}--skeleton ${prefix}--text-input`
   }));
 };