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

package/build/{TextArea-26d3c8a1.js → TextArea-1e5b9201.js}

@@ -1,28 +1,20 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var lodash = require('lodash');
-var useMergedRefs = require('@restart/hooks/useMergedRefs');
-var nanoid = require('nanoid');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-require('./Alert-8a511bdc.js');
-require('./Badge-aa4cd9c1.js');
-require('./Popover-c4be47ea.js');
-require('./Tab-ccbca1f2.js');
-require('./Tabs-b06c0e24.js');
-var Tooltip = require('./Tooltip-d5882b82.js');
-require('./VerificationStatusIcon-9876b68f.js');
-var editNote = require('./edit-note-cefe2215.js');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var useMergedRefs__default = /*#__PURE__*/_interopDefaultLegacy(useMergedRefs);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const fadeInCheck = styled.keyframes`
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { isEmpty } from 'lodash';
+import useMergedRefs from '@restart/hooks/useMergedRefs';
+import { nanoid } from 'nanoid';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import './Alert-e6847a22.js';
+import './Badge-d93586a9.js';
+import './Popover-20050b91.js';
+import './Tab-04d435c3.js';
+import './Tabs-74d1ea8a.js';
+import { T as Tooltip } from './Tooltip-c1d1199e.js';
+import './VerificationStatusIcon-49cb1c1b.js';
+import { S as SvgEditNote } from './edit-note-283a0e15.js';
+import styled, { keyframes, css } from 'styled-components';
+
+const fadeInCheck = keyframes`
   from {
     opacity: 0
   }
@@ -30,7 +22,7 @@ const fadeInCheck = styled.keyframes`
     opacity: 1
   }
 `;
-const fadeOutCheck = styled.keyframes`
+const fadeOutCheck = keyframes`
   from {
     opacity: 1
   }
@@ -38,7 +30,7 @@ const fadeOutCheck = styled.keyframes`
     opacity: 0
   }
 `;
-const activeLabel = styled.css`
+const activeLabel = css`
   font-size: 0.75rem;
   padding: 0 3px;
   top: -7px;
@@ -46,10 +38,10 @@ const activeLabel = styled.css`
   left: 8px !important;
   opacity: 1 !important;
 `;
-const TextAreaContainter = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const TextAreaContainter = styled.div.attrs(applyDefaultTheme)`
   display: flex;
 `;
-const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)`
+const Label = styled.label.attrs(applyDefaultTheme)`
   ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
   flex-basis: 33.33%;
   font-size: 0.875rem;
@@ -59,11 +51,11 @@ const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTh
   justify-content: space-between;
   align-items: center;
   padding-top: 13px;
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled && css`
       cursor: not-allowed;
     `}
 `;
-const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const InputIconContainer = styled.div.attrs(applyDefaultTheme)`
   opacity: 0;
   pointer-events: none;
   border-top-right-radius: 3px;
@@ -89,12 +81,12 @@ const InputIconContainer = styled__default["default"].div.attrs(defaultTheme.app
     opacity: 0.7;
     transition: opacity 250ms;
 
-    ${props => props.disabled && styled.css`
+    ${props => props.disabled && css`
         display: none;
       `}
   }
 `;
-const TextInputField = styled__default["default"].textarea.attrs(defaultTheme.applyDefaultTheme)`
+const TextInputField = styled.textarea.attrs(applyDefaultTheme)`
   width: 100%;
   font-family: inherit;
   font-size: 0.875rem;
@@ -109,37 +101,37 @@ const TextInputField = styled__default["default"].textarea.attrs(defaultTheme.ap
 
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
 
-  ${props => props.borderRadius && styled.css`
+  ${props => props.borderRadius && css`
       border-radius: ${props.borderRadius}px;
     `}
 
   ${props => {
   if (props.type === 'error') {
-    return styled.css`
+    return css`
         ${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 styled.css`
+    return css`
         ${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 styled.css`
+    return css`
         ${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 styled.css`
+    return css`
         ${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 styled.css`
+    return css`
         ${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'))}
@@ -148,43 +140,43 @@ const TextInputField = styled__default["default"].textarea.attrs(defaultTheme.ap
 }}
 
 
-  ${props => props.readOnly && styled.css`
+  ${props => props.readOnly && css`
       cursor: default;
       border-color: transparent !important;
       padding: 12px 10px;
     `}
 
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled && css`
       cursor: not-allowed;
     `}
 
 
-  ${props => props.noBorder && !props.type && styled.css`
+  ${props => props.noBorder && !props.type && css`
       ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
     `} 
 
-  ${props => props.noBorder && props.type === 'warning' && styled.css`
+  ${props => props.noBorder && props.type === 'warning' && css`
       ${props => props.theme.themeProp('border-color', '#634E01', '#FFFDE8')}
     `}
 
-  ${props => props.noBorder && props.type === 'error' && styled.css`
+  ${props => props.noBorder && props.type === 'error' && css`
       ${props => props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
     `}
 
 
-  ${props => props.padding === 'small' && styled.css`
+  ${props => props.padding === 'small' && css`
       padding: 5px 10px;
     `}
 
-  ${props => props.padding === 'medium' && styled.css`
+  ${props => props.padding === 'medium' && css`
       padding: 13px 15px;
     `}
 
-  ${props => props.padding === 'large' && styled.css`
+  ${props => props.padding === 'large' && css`
       padding: 15px 55px;
     `}
 
-  ${props => props.hasIcon && styled.css`
+  ${props => props.hasIcon && css`
       padding-left: 55px;
       padding-right: 35px;
       padding-top: 13.5px;
@@ -220,7 +212,7 @@ const TextInputField = styled__default["default"].textarea.attrs(defaultTheme.ap
 
     & + ${InputIconContainer} {
       opacity: 1;
-      ${props => props.type === 'success' && styled.css`
+      ${props => props.type === 'success' && css`
           opacity: 0;
         `}
     }
@@ -282,19 +274,19 @@ const TextInputField = styled__default["default"].textarea.attrs(defaultTheme.ap
     return '';
   }
   if (props.type === 'error') {
-    return styled.css`
+    return css`
           ${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 styled.css`
+    return css`
           ${props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}
           ${props.theme.themeProp('background', 'white', 'white')}
         ${props.theme.themeProp('color', 'black', 'black')}
         `;
   } else {
-    return styled.css`
+    return css`
           ${props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'))}
           ${props.theme.themeProp('background', 'transparent', props.theme.getColor('white'))}
         `;
@@ -317,12 +309,12 @@ const TextInputField = styled__default["default"].textarea.attrs(defaultTheme.ap
 
     ${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 && styled.css`
+    ${props => props.noBorder && props.edit && css`
         ${props => props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)')}
       `}
   }
 `;
-const TextInputLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)`
+const TextInputLabel = styled.label.attrs(applyDefaultTheme)`
   position: absolute;
   top: 13px;
   left: 11px;
@@ -335,20 +327,20 @@ const TextInputLabel = styled__default["default"].label.attrs(defaultTheme.apply
 
   ${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 && styled.css`
+  ${props => !props.inputIsEmpty && css`
       ${activeLabel}
     `}
 
-  ${props => props.hasPlaceholder && styled.css`
+  ${props => props.hasPlaceholder && css`
       ${activeLabel};
     `}
   content: "";
 
-  ${props => props.hasIcon && styled.css`
+  ${props => props.hasIcon && css`
       left: 55px;
     `}
 `;
-const TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)`
   position: absolute;
   top: 0;
   left: 0;
@@ -362,7 +354,7 @@ const TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.app
     transition: opacity 250ms;
   }
 `;
-const TextInputFieldIconAlert = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const TextInputFieldIconAlert = styled.div.attrs(applyDefaultTheme)`
   position: absolute;
   top: 2.8px;
   display: flex;
@@ -375,11 +367,11 @@ const TextInputFieldIconAlert = styled__default["default"].div.attrs(defaultThem
     width: 15px;
   }
 `;
-const TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const TextInput = styled.div.attrs(applyDefaultTheme)`
   position: relative;
   flex-basis: ${props => props.$fieldLabel ? '66.66%' : '100%'};
 
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled && css`
       opacity: 0.5;
 
       > * {
@@ -404,7 +396,7 @@ const TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefault
     ${props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
   }
 `;
-const Description = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Description = styled.div.attrs(applyDefaultTheme)`
   margin: 8px 0 0 0;
   padding: 0 0.6875rem;
   font-size: 0.75rem;
@@ -412,15 +404,15 @@ const Description = styled__default["default"].div.attrs(defaultTheme.applyDefau
 
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
 
-  ${props => (props.type === 'warning-border' || props.type === 'warning') && styled.css`
+  ${props => (props.type === 'warning-border' || props.type === 'warning') && css`
       ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))}
     `}
 
-  ${props => (props.type === 'error-border' || props.type === 'error') && styled.css`
+  ${props => (props.type === 'error-border' || props.type === 'error') && css`
       ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
     `}
 `;
-const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const SuccessContainer = styled.div.attrs(applyDefaultTheme)`
   opacity: 1;
   pointer-events: none;
   opacity: ${props => props.fadeIn ? 0 : 1};
@@ -438,7 +430,7 @@ const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.apply
     width: 15px;
   }
 `;
-const SuccessContainerLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const SuccessContainerLabel = styled.div.attrs(applyDefaultTheme)`
   opacity: 1;
   pointer-events: none;
   opacity: ${props => props.fadeIn ? 0 : 1};
@@ -456,7 +448,7 @@ const SuccessContainerLabel = styled__default["default"].div.attrs(defaultTheme.
   }
 `;
 
-const TextArea = React__default["default"].forwardRef(function TextArea({
+const TextArea = React__default.forwardRef(function TextArea({
   value,
   defaultValue,
   name,
@@ -485,36 +477,36 @@ const TextArea = React__default["default"].forwardRef(function TextArea({
   fieldLabel,
   ...rest
 }, forwardedRef) {
-  const textInputDomNode = React.useRef(null);
-  const textInputRef = useMergedRefs__default["default"](forwardedRef, textInputDomNode);
-  const [inputIsEmpty, setInputIsEmpty] = React.useState(!(value || defaultValue));
-  const [autoFocus, setAutoFocus] = React.useState(false);
-  const [uniqueId] = React.useState(nanoid.nanoid());
-  const memoizedDescriptionToolTip = React.useMemo(() => {
+  const textInputDomNode = useRef(null);
+  const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
+  const [inputIsEmpty, setInputIsEmpty] = useState(!(value || defaultValue));
+  const [autoFocus, setAutoFocus] = useState(false);
+  const [uniqueId] = useState(nanoid());
+  const memoizedDescriptionToolTip = useMemo(() => {
     return descriptionToolTip;
   }, [descriptionToolTip]);
-  React.useEffect(() => {
+  useEffect(() => {
     setAutoFocus(false);
   }, [value, defaultValue]);
-  const onKeyDown = React.useCallback(event => {
+  const onKeyDown = useCallback(event => {
     if (event.key === 'Enter') {
       event.stopPropagation();
     }
   }, []);
   const input = () => {
-    return React__default["default"].createElement(TextAreaContainter, null, fieldLabel && React__default["default"].createElement(Label, {
+    return React__default.createElement(TextAreaContainter, null, fieldLabel && React__default.createElement(Label, {
       htmlFor: uniqueId,
       disabled: disabled
-    }, fieldLabel, React__default["default"].createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default["default"].createElement(TextInput, {
-      $fieldLabel: !lodash.isEmpty(fieldLabel),
+    }, fieldLabel, React__default.createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(TextInput, {
+      $fieldLabel: !isEmpty(fieldLabel),
       disabled: disabled,
       readOnly: readOnly,
       type: type,
       className: className,
       style: style
-    }, React__default["default"].createElement(TextInputFieldIconAlert, {
+    }, React__default.createElement(TextInputFieldIconAlert, {
       type: type
-    }, icon), React__default["default"].createElement(TextInputField, _rollupPluginBabelHelpers._extends({
+    }, icon), React__default.createElement(TextInputField, _extends({
       autoFocus: autoFocus,
       borderRadius: borderRadius,
       ref: textInputRef,
@@ -551,21 +543,21 @@ const TextArea = React__default["default"].forwardRef(function TextArea({
       onKeyDown: onKeyDown,
       onBlur: onBlur,
       noBorder: noBorder
-    }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default["default"].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default["default"].createElement(InputIconContainer, {
+    }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default.createElement(InputIconContainer, {
       disabled: disabled
-    }, React__default["default"].createElement(editNote.SvgEditNote, {
+    }, React__default.createElement(SvgEditNote, {
       className: padding === 'small' ? 'smallPadingIcon' : undefined
-    })), label && React__default["default"].createElement(TextInputLabel, {
+    })), label && React__default.createElement(TextInputLabel, {
       htmlFor: `text-input-${uniqueId}`,
       hasPlaceholder: Boolean(placeholder),
       hasIcon: Boolean(icon),
       inputIsEmpty: inputIsEmpty
-    }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default["default"].createElement(Description, {
+    }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default.createElement(Description, {
       type: type
     }, description)));
   };
   if (hidden) return null;
-  return React__default["default"].createElement(React__default["default"].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default["default"].createElement("div", null, React__default["default"].createElement(Tooltip.Tooltip, {
+  return React__default.createElement(React__default.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default.createElement("div", null, React__default.createElement(Tooltip, {
     content: memoizedDescriptionToolTip,
     key: "tooltipTextArea1",
     placement: "bottom-end",
@@ -587,33 +579,33 @@ TextArea.defaultProps = {
   borderRadius: 0
 };
 TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
-  value: defaultTheme.PropTypes.string,
-  defaultValue: defaultTheme.PropTypes.string,
-  name: defaultTheme.PropTypes.string,
-  label: defaultTheme.PropTypes.string,
-  fieldLabel: defaultTheme.PropTypes.string,
-  placeholder: defaultTheme.PropTypes.string,
-  required: defaultTheme.PropTypes.bool,
-  disabled: defaultTheme.PropTypes.bool,
-  hidden: defaultTheme.PropTypes.bool,
-  readOnly: defaultTheme.PropTypes.bool,
-  edit: defaultTheme.PropTypes.bool,
-  autoComplete: defaultTheme.PropTypes.string,
-  description: defaultTheme.PropTypes.string,
-  icon: defaultTheme.PropTypes.element,
-  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
-  className: defaultTheme.PropTypes.string,
-  style: defaultTheme.PropTypes.object,
-  padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
-  onChange: defaultTheme.PropTypes.func,
-  onBlur: defaultTheme.PropTypes.func,
-  noBorder: defaultTheme.PropTypes.bool,
-  isExpanded: defaultTheme.PropTypes.func,
-  type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
-  loadingIcon: defaultTheme.PropTypes.element,
-  successIcon: defaultTheme.PropTypes.element,
-  descriptionToolTip: defaultTheme.PropTypes.string,
-  borderRadius: defaultTheme.PropTypes.number
+  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,
+  isExpanded: PropTypes.func,
+  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
+  loadingIcon: PropTypes.element,
+  successIcon: PropTypes.element,
+  descriptionToolTip: PropTypes.string,
+  borderRadius: PropTypes.number
 } : {};
 
-exports.TextArea = TextArea;
+export { TextArea as T };