@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/esm/components/inputs/TextArea/TextArea.js

@@ -1,172 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import { isEmpty } from 'lodash';
-import useMergedRefs from '../../../node_modules/@restart/hooks/lib/useMergedRefs.js';
-import { nanoid } from 'nanoid';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import { ReactComponent as SvgEditNote } from '../../../icons/edit-note.svg.js';
-import { TextAreaContainter, Label, SuccessContainerLabel, TextInput, TextInputFieldIconAlert, TextInputField, SuccessContainer, InputIconContainer, TextInputLabel, Description } from './TextArea.styled.js';
-import Tooltip from '../../data/Tooltip/Tooltip.js';
-import { r as react } from '../../../_virtual/index.js';
-
-const _excluded = ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"];
-const TextArea = React.forwardRef(function TextArea(_ref, forwardedRef) {
-  let {
-      value,
-      defaultValue,
-      name,
-      label,
-      placeholder,
-      required,
-      disabled,
-      hidden,
-      readOnly,
-      edit,
-      autoComplete,
-      description,
-      type,
-      icon,
-      rows,
-      className,
-      style,
-      onChange,
-      onBlur,
-      noBorder,
-      loadingIcon,
-      successIcon,
-      padding,
-      descriptionToolTip,
-      borderRadius,
-      fieldLabel
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const textInputDomNode = react.exports.useRef(null);
-  const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
-  const [inputIsEmpty, setInputIsEmpty] = react.exports.useState(!(value || defaultValue));
-  const [autoFocus, setAutoFocus] = react.exports.useState(false);
-  const [uniqueId] = react.exports.useState(nanoid());
-  const memoizedDescriptionToolTip = react.exports.useMemo(() => {
-    return descriptionToolTip;
-  }, [descriptionToolTip]);
-  react.exports.useEffect(() => {
-    setAutoFocus(false);
-  }, [value, defaultValue]);
-  const onKeyDown = react.exports.useCallback(event => {
-    if (event.key === 'Enter') {
-      event.stopPropagation();
-    }
-  }, []);
-  const input = () => {
-    return React.createElement(TextAreaContainter, null, fieldLabel && React.createElement(Label, {
-      htmlFor: uniqueId,
-      disabled: disabled
-    }, fieldLabel, React.createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React.createElement(TextInput, {
-      $fieldLabel: !isEmpty(fieldLabel),
-      disabled: disabled,
-      readOnly: readOnly,
-      type: type,
-      className: className,
-      style: style
-    }, React.createElement(TextInputFieldIconAlert, {
-      type: type
-    }, icon), React.createElement(TextInputField, _extends({
-      autoFocus: autoFocus,
-      $borderRadius: borderRadius,
-      ref: textInputRef,
-      rows: rows,
-      value: value,
-      defaultValue: defaultValue,
-      name: name,
-      placeholder: placeholder || ' ',
-      required: required,
-      readOnly: readOnly,
-      disabled: disabled,
-      $edit: edit,
-      type: type,
-      autoComplete: autoComplete,
-      $hasIcon: Boolean(icon),
-      id: `text-input-${uniqueId}`,
-      key: uniqueId,
-      $padding: padding,
-      onChange: e => {
-        if (e.target.value) {
-          setInputIsEmpty(false);
-          if (!autoFocus) {
-            setAutoFocus(true);
-          }
-        } else {
-          setInputIsEmpty(true);
-          if (!autoFocus) {
-            setAutoFocus(true);
-          }
-        }
-        onChange(e);
-      },
-      onKeyDown: onKeyDown,
-      onBlur: onBlur,
-      $noBorder: noBorder
-    }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React.createElement(InputIconContainer, {
-      disabled: disabled
-    }, React.createElement(SvgEditNote, {
-      className: padding === 'small' ? 'smallPadingIcon' : undefined
-    })), label && React.createElement(TextInputLabel, {
-      htmlFor: `text-input-${uniqueId}`,
-      $hasPlaceholder: Boolean(placeholder),
-      $hasIcon: Boolean(icon),
-      $inputIsEmpty: inputIsEmpty
-    }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React.createElement(Description, {
-      type: type
-    }, description)));
-  };
-  if (hidden) return null;
-  return React.createElement(React.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React.createElement("div", null, React.createElement(Tooltip, {
-    content: memoizedDescriptionToolTip,
-    key: "tooltipTextArea1",
-    placement: "bottom-end",
-    trigger: 'mouseenter',
-    zIndex: 999999
-  }, input())));
-});
-TextArea.defaultProps = {
-  rows: 4,
-  noBorder: false,
-  readOnly: false,
-  edit: false,
-  hidden: false,
-  type: '',
-  padding: 'medium',
-  descriptionToolTip: '',
-  onChange: () => {},
-  borderRadius: 0
-};
-TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  name: PropTypes.string,
-  label: PropTypes.string,
-  fieldLabel: PropTypes.string,
-  placeholder: PropTypes.string,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  hidden: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  edit: PropTypes.bool,
-  autoComplete: PropTypes.string,
-  description: PropTypes.string,
-  icon: PropTypes.element,
-  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  style: PropTypes.object,
-  padding: PropTypes.oneOf(['small', 'medium', 'large']),
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  noBorder: PropTypes.bool,
-  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
-  loadingIcon: PropTypes.element,
-  successIcon: PropTypes.element,
-  descriptionToolTip: PropTypes.string,
-  borderRadius: PropTypes.number
-} : {};
-var TextArea$1 = TextArea;
-
-export { TextArea$1 as default };

package/esm/components/inputs/TextArea/TextArea.styled.js

@@ -1,512 +0,0 @@
-import styled, { keyframes, css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t0,
-  _t1,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25,
-  _t26,
-  _t27,
-  _t28,
-  _t29,
-  _t30,
-  _t31,
-  _t32,
-  _t33,
-  _t34,
-  _t35,
-  _t36,
-  _t37,
-  _t38,
-  _t39,
-  _t40;
-const fadeInCheck = keyframes(_t || (_t = _`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`));
-const fadeOutCheck = keyframes(_t2 || (_t2 = _`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`));
-const activeLabel = css(_t3 || (_t3 = _`
-  font-size: 0.75rem;
-  padding: 0 3px;
-  top: -7px;
-  letter-spacing: 0.03em;
-  left: 8px !important;
-  opacity: 1 !important;
-`));
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const TextAreaContainter = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
-  display: flex;
-`));
-const Label = styled.label.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
-  ${0};
-  flex-basis: 33.33%;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  height: 19px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 13px;
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && css(_t6 || (_t6 = _`
-      cursor: not-allowed;
-    `)));
-const InputIconContainer = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t7 || (_t7 = _`
-  opacity: 0;
-  pointer-events: none;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  display: flex;
-  align-items: flex-start;
-
-  position: absolute;
-  right: 15px;
-  top: 10px;
-  bottom: 0;
-  > .smallPadingIcon {
-    padding: 4px;
-    width: 15px;
-    height: 15px;
-    border-radius: 5px;
-    opacity: 1;
-    margin-top: -5px;
-    ${0}
-  }
-  svg {
-    width: 15px;
-    opacity: 0.7;
-    transition: opacity 250ms;
-
-    ${0}
-  }
-`), props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important'), props => props.disabled && css(_t8 || (_t8 = _`
-        display: none;
-      `)));
-const TextInputField = styled.textarea.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
-  width: 100%;
-  font-family: inherit;
-  font-size: 0.875rem;
-  border-radius: 3px;
-  padding: 5px 10px;
-  resize: vertical;
-  z-index: 0;
-  box-sizing: border-box;
-  appearance: none;
-  border: 1px solid;
-  transition:
-    height 550ms ease-in-out,
-    border-color 350ms,
-    background 350ms;
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-
-  ${0}
-
-  ${0}
-
-
-  ${0} 
-
-  ${0}
-
-  ${0}
-
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-
-  &&:hover:not(:focus) {
-    ${0}
-
-    ${0}
-
-    ${0}
-
-    & + ${0} {
-      opacity: 1;
-      ${0}
-    }
-  }
-
-  &::placeholder {
-    ${0}
-
-    ${0}
-
-      ${0}
-  }
-
-  &:hover::placeholder {
-    ${0}
-
-    ${0}
-  }
-
-  &:focus::placeholder {
-    ${0}
-
-    ${0}
-  }
-
-  &&:focus {
-    outline: none;
-
-    ${0}
-  }
-
-  &&:not(:hover):not(:focus) {
-    ${0}
-
-    ${0}
-
-    ${0}
-  }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.$borderRadius && css(_t0 || (_t0 = _`
-      border-radius: ${0}px;
-    `), props.$borderRadius), props => {
-  if (props.type === 'error') {
-    return css(_t1 || (_t1 = _`
-        ${0}
-        ${0}
-        ${0}
-      `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
-  } else if (props.type === 'warning') {
-    return css(_t10 || (_t10 = _`
-        ${0}
-        ${0}
-        ${0}
-      `), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01', '#FFFDE8'));
-  } else if (props.type === 'error-border') {
-    return css(_t11 || (_t11 = _`
-        ${0}
-        ${0}
-        ${0}
-      `), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
-  } else if (props.type === 'warning-border') {
-    return css(_t12 || (_t12 = _`
-        ${0}
-        ${0}
-        ${0}
-      `), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
-  } else {
-    return css(_t13 || (_t13 = _`
-        ${0}
-        ${0}
-        ${0}
-      `), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white')), props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')));
-  }
-}, props => props.readOnly && css(_t14 || (_t14 = _`
-      cursor: default;
-      border-color: transparent !important;
-      padding: 12px 10px;
-    `)), props => props.disabled && css(_t15 || (_t15 = _`
-      cursor: not-allowed;
-    `)), props => props.$noBorder && !props.type && css(_t16 || (_t16 = _`
-      ${0}
-    `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))), props => props.$noBorder && props.type === 'warning' && css(_t17 || (_t17 = _`
-      ${0}
-    `), props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')), props => props.$noBorder && props.type === 'error' && css(_t18 || (_t18 = _`
-      ${0}
-    `), props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')), props => props.padding === 'small' && css(_t19 || (_t19 = _`
-      padding: 5px 10px;
-    `)), props => props.padding === 'medium' && css(_t20 || (_t20 = _`
-      padding: 13px 15px;
-    `)), props => props.padding === 'large' && css(_t21 || (_t21 = _`
-      padding: 15px 55px;
-    `)), props => props.$hasIcon && css(_t22 || (_t22 = _`
-      padding-left: 55px;
-      padding-right: 35px;
-      padding-top: 13.5px;
-    `)), props => {
-  if (props.disabled) {
-    return '';
-  }
-  if (props.readOnly) {
-    if (props.type === 'error') {
-      return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
-    } else if (props.type === 'warning') {
-      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
-    }
-    return '';
-  }
-  if (props.type === 'error') {
-    return props.theme.themeProp('background', '#901d1d', '#F7D5D0');
-  } else if (props.type === 'warning') {
-    return props.theme.themeProp('background', '#806403', '#FFFEBF');
-  } else if (!props.disabled) {
-    return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
-  }
-  return '';
-}, props => props.$edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.$noBorder && !props.readOnly && props.type !== 'warning' && props.type !== 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : '', InputIconContainer, props => props.type === 'success' && css(_t23 || (_t23 = _`
-          opacity: 0;
-        `)), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => {
-  if (props.type === 'warning') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
-  } else if (props.type === 'error') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
-  }
-  return '';
-}, props => props.theme.themeProp('opacity', 0.6, 0.5), props => {
-  if (props.type === 'warning') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
-  } else if (props.type === 'error') {
-    return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
-  } else {
-    return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
-  }
-}, props => props.theme.themeProp('opacity', 0.6, 0.5), props => {
-  if (props.type === 'warning') {
-    return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
-  } else if (props.type === 'error') {
-    return props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'));
-  } else {
-    return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
-  }
-}, props => {
-  if (props.readOnly) {
-    if (props.type === 'error') {
-      return props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
-    } else if (props.type === 'warning') {
-      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
-    }
-    return '';
-  }
-  if (props.type === 'error') {
-    return css(_t24 || (_t24 = _`
-          ${0}
-          ${0}
-        ${0}
-        `), props.theme.themeProp('border-color', '#D83018', '#D83018'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
-  } else if (props.type === 'warning') {
-    return css(_t25 || (_t25 = _`
-          ${0}
-          ${0}
-        ${0}
-        `), props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
-  } else {
-    return css(_t26 || (_t26 = _`
-          ${0}
-          ${0}
-        `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-600')), props.theme.themeProp('background', 'transparent', props.theme.getColor('white')));
-  }
-}, props => {
-  if (props.$edit) {
-    if (props.type === 'error') {
-      return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');
-    } else if (props.type === 'warning') {
-      return props.theme.themeProp('background', '#634E01', '#FFFDE8');
-    } else {
-      return props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
-    }
-  }
-}, props => props.$edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.$noBorder && props.$edit && css(_t27 || (_t27 = _`
-        ${0}
-      `), props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')));
-const TextInputLabel = styled.label.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t28 || (_t28 = _`
-  position: absolute;
-  top: 13px;
-  left: 11px;
-  line-height: 1.2;
-  font-size: 0.875rem;
-  transition: all 150ms;
-  margin-botton: 50px;
-
-  ${0};
-
-      ${0}
-
-
-  ${0}
-
-  ${0}
-
-  ${0}
-  content: "";
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.theme.themeProp('opacity', 0.6, 0.5), props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`), props => !props.$inputIsEmpty && css(_t29 || (_t29 = _`
-      ${0}
-    `), activeLabel), props => props.$hasPlaceholder && css(_t30 || (_t30 = _`
-      ${0};
-    `), activeLabel), props => props.$hasIcon && css(_t31 || (_t31 = _`
-      left: 55px;
-    `)));
-const TextInputFieldIcon = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t32 || (_t32 = _`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 2.625rem;
-  display: flex;
-  padding: 0 10px;
-
-  svg {
-    width: 15px;
-    opacity: 0.6;
-    transition: opacity 250ms;
-  }
-`));
-const TextInputFieldIconAlert = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t33 || (_t33 = _`
-  position: absolute;
-  top: 2.8px;
-  display: flex;
-  padding: 0 10px 0 30px;
-  opacity: 0.6;
-  transition: opacity 250ms;
-  ${0}
-  svg {
-    margin-top: 12px;
-    width: 15px;
-  }
-`), props => props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402'));
-const TextInput = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t34 || (_t34 = _`
-  position: relative;
-  flex-basis: ${0};
-
-  ${0}
-
-  &:focus-within {
-    ${0} {
-      ${0};
-    }
-
-    ${0} {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  ${0}:not(:placeholder-shown) + ${0} {
-    ${0};
-    ${0}
-  }
-`), props => props.$fieldLabel ? '66.66%' : '100%', props => props.disabled && css(_t35 || (_t35 = _`
-      opacity: 0.5;
-
-      > * {
-        cursor: not-allowed;
-      }
-    `)), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
-const Description = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t36 || (_t36 = _`
-  margin: 8px 0 0 0;
-  padding: 0 0.6875rem;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${0};
-
-  ${0}
-
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => (props.type === 'warning-border' || props.type === 'warning') && css(_t37 || (_t37 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))), props => (props.type === 'error-border' || props.type === 'error') && css(_t38 || (_t38 = _`
-      ${0}
-    `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));
-const SuccessContainer = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t39 || (_t39 = _`
-  opacity: 1;
-  pointer-events: none;
-  opacity: ${0};
-  animation: ${0} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  position: absolute;
-  margin-top: -35px;
-  margin-left: 5px;
-  width: 15px;
-  height: 15px;
-  padding: 5px;
-  ${0}
-
-  > svg {
-    width: 15px;
-  }
-`), props => props.$fadeIn ? 0 : 1, props => props.$fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const SuccessContainerLabel = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t40 || (_t40 = _`
-  opacity: 1;
-  pointer-events: none;
-  opacity: ${0};
-  animation: ${0} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  margin-right: 5px;
-  margin-top: -7px;
-  width: 15px;
-  height: 15px;
-  padding: 5px;
-  ${0}
-
-  > svg {
-    width: 13px;
-  }
-`), props => props.$fadeIn ? 0 : 1, props => props.$fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-
-export { Description, InputIconContainer, Label, SuccessContainer, SuccessContainerLabel, TextAreaContainter, TextInput, TextInputField, TextInputFieldIcon, TextInputFieldIconAlert, TextInputLabel };

package/esm/components/inputs/TextArea/inputs/TextArea/index.js

@@ -1 +0,0 @@
-export { default } from '../../TextArea.js';