@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/datePicker/index.js

@@ -1,13 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _datePicker = require("./datePicker");
-
-var _datePicker2 = _interopRequireDefault(_datePicker);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _datePicker2.default;
+exports["default"] = void 0;
+var _datePicker = _interopRequireDefault(require("./datePicker"));
+var _default = exports["default"] = _datePicker["default"];

package/atoms/dateTime/dateTime.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 var monthName = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var DateTime = {
   toDateString: function toDateString(date, format) {
@@ -16,24 +17,20 @@ var DateTime = {
       ;
     }
   },
-
   toTimeString: function toTimeString(date, format) {
     if (typeof date === "number") {
       date = new Date(date);
     }
     var hrs = date.getHours(),
-        mins = date.getMinutes();
-
+      mins = date.getMinutes();
     if (format === "HH:MM AP") {
       return (hrs < 12 ? hrs === 0 ? "12" : hrs < 10 ? "0" + hrs : hrs : hrs === 12 ? "12" : hrs < 22 ? "0" + (hrs - 12) : hrs - 12) + ":" + (mins < 10 ? "0" + mins : mins) + " " + (hrs < 12 ? "AM" : "PM");
     } else {
       return (hrs < 10 ? "0" + hrs : hrs) + ":" + (mins < 10 ? "0" + mins : mins);
     }
   },
-
   toDateTimeString: function toDateTimeString(date) {
     return DateTime.toDateString(date) + " - " + DateTime.toTimeString(date, "HH:MM AP");
   }
 };
-
-exports.default = DateTime;
+var _default = exports["default"] = DateTime;

package/atoms/dateTime/dateTime.story.js

@@ -1,65 +1,19 @@
-'use strict';
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _dateTime = require('./dateTime');
-
-var _dateTime2 = _interopRequireDefault(_dateTime);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('DateTime').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'DateTime', background: 'light' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'h1',
-          null,
-          _dateTime2.default.toDateString(1579176064345, 'mmm DD, YYYY')
-        ),
-        _react2.default.createElement(
-          'h1',
-          null,
-          _dateTime2.default.toTimeString(1579176064345, 'HH:MM AP')
-        )
-      )
-    )
-  );
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../_helpers/story-helpers");
+var _dateTime = _interopRequireDefault(require("./dateTime"));
+(0, _react2.storiesOf)('DateTime').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "DateTime",
+    background: "light"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", null, _dateTime["default"].toDateString(1579176064345, 'mmm DD, YYYY')), /*#__PURE__*/_react["default"].createElement("h1", null, _dateTime["default"].toTimeString(1579176064345, 'HH:MM AP')))));
 });
-
-(0, _react3.storiesOf)('DateTime').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'DateTime', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'h1',
-          null,
-          _dateTime2.default.toDateString(1579176064345, 'mmm DD, YYYY')
-        ),
-        _react2.default.createElement(
-          'h1',
-          null,
-          _dateTime2.default.toTimeString(1579176064345, 'HH:MM AP')
-        )
-      )
-    )
-  );
+(0, _react2.storiesOf)('DateTime').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "DateTime",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", null, _dateTime["default"].toDateString(1579176064345, 'mmm DD, YYYY')), /*#__PURE__*/_react["default"].createElement("h1", null, _dateTime["default"].toTimeString(1579176064345, 'HH:MM AP')))));
 });

package/atoms/dateTime/index.js

@@ -1,13 +1,9 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _dateTime = require('./dateTime');
-
-var _dateTime2 = _interopRequireDefault(_dateTime);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _dateTime2.default;
+exports["default"] = void 0;
+var _dateTime = _interopRequireDefault(require("./dateTime"));
+var _default = exports["default"] = _dateTime["default"];

package/atoms/draftInputText/draftInputText.js

@@ -1,112 +1,76 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width:92%;\n  margin-bottom:10px;\n  margin-top:10px\n  display: block;\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n'], ['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width:92%;\n  margin-bottom:10px;\n  margin-top:10px\n  display: block;\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n'], ['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n'], ['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\nmax-height:48px;\n  overflow-y:scroll;\n::-webkit-scrollbar {\n    width: 0;  /* Remove scrollbar space */\n    background: transparent;  /* Optional: just make scrollbar invisible */\n }\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n'], ['\nmax-height:48px;\n  overflow-y:scroll;\n::-webkit-scrollbar {\n    width: 0;  /* Remove scrollbar space */\n    background: transparent;  /* Optional: just make scrollbar invisible */\n }\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ', ';\n \n\n  font-family: "SFUIText-Medium";\n  font-size: 14px;\n  color: ', ';\n\n  display: inline-block;\n  position: relative;\n  padding: ', ';\n  &:hover {\n    border-color: ', ';\n  }\n\n  &:focus-within {\n    border-color: ', ';\n  }\n\n  &::placeholder {\n    color: ', ';\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ', ';\n    opacity: ', ';\n  }\n\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _draftJs = require('draft-js');
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _draftConvert = require('draft-convert');
-
-var _icon = require('../icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var DraftInputTextDiv = _styledComponents2.default.div(_templateObject);
-
-var PasswordToggleButton = _styledComponents2.default.div(_templateObject2);
-
-var CountWrappper = _styledComponents2.default.div(_templateObject3);
-
-var DraftInputError = _styledComponents2.default.span(_templateObject4, function (props) {
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _draftJs = require("draft-js");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _draftConvert = require("draft-convert");
+var _icon = _interopRequireDefault(require("../icon"));
+var _excluded = ["maxLength", "defaultValue", "type", "showLengthCount", "label", "value", "autoFocus", "isFocused"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var DraftInputTextDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: transparent;\n  font-family: 'SFUIText-Medium';\n  position: relative;\n  width:92%;\n  margin-bottom:10px;\n  margin-top:10px\n  display: block;\n  > label {\n    color: #999999;\n    font-size: 14px;\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > div:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > div ~ label.floaton {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"])));
+var PasswordToggleButton = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n"])));
+var CountWrappper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303f51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #ffffff;\n"])));
+var DraftInputError = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n"])), function (props) {
   return _tokens.colors[props.theme].inputError.color;
 });
-
 var DraftInputText = function DraftInputText(_ref) {
   var maxLength = _ref.maxLength,
-      defaultValue = _ref.defaultValue,
-      type = _ref.type,
-      showLengthCount = _ref.showLengthCount,
-      label = _ref.label,
-      value = _ref.value,
-      autoFocus = _ref.autoFocus,
-      isFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, ['maxLength', 'defaultValue', 'type', 'showLengthCount', 'label', 'value', 'autoFocus', 'isFocused']);
-
+    defaultValue = _ref.defaultValue,
+    type = _ref.type,
+    showLengthCount = _ref.showLengthCount,
+    label = _ref.label,
+    value = _ref.value,
+    autoFocus = _ref.autoFocus,
+    isFocused = _ref.isFocused,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      hidden = _useState2[0],
-      togglePassword = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    hidden = _useState2[0],
+    togglePassword = _useState2[1];
   var _useState3 = (0, _react.useState)(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      diff = _useState4[0],
-      setDiff = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    diff = _useState4[0],
+    setDiff = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      focus = _useState6[0],
-      setFocus = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    focus = _useState6[0],
+    setFocus = _useState6[1];
   var _useState7 = (0, _react.useState)(function () {
-    return _draftJs.EditorState.createEmpty();
-  }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      editorState = _useState8[0],
-      setEditorState = _useState8[1];
-
+      return _draftJs.EditorState.createEmpty();
+    }),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    editorState = _useState8[0],
+    setEditorState = _useState8[1];
   var editorRef = (0, _react.useRef)(null);
-
   var _useState9 = (0, _react.useState)(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      listScrollTop = _useState10[0],
-      setListScrollTop = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    listScrollTop = _useState10[0],
+    setListScrollTop = _useState10[1];
   var contentLength = editorState.getCurrentContent().getPlainText('').length;
   var scrollObject = localStorage.getItem('scrollObject');
-
   if (scrollObject && JSON.parse(scrollObject).tableListScrollTop !== listScrollTop) {
     setListScrollTop(JSON.parse(scrollObject).tableListScrollTop);
   }
-
   if (props.error && props.error.length > 0) {
     var errorMesssage = props.error;
   }
-
   if (props.readOnly) {
     props.disabled = true;
   }
-
   if (props.passwordButton) {
     var passwordButton = props.passwordButton;
   }
@@ -119,7 +83,6 @@ var DraftInputText = function DraftInputText(_ref) {
    */
   var handleKeyCommand = function handleKeyCommand(command, editorState) {
     var newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
-
     if (newState) {
       setEditorState(newState);
       return 'handled';
@@ -134,9 +97,7 @@ var DraftInputText = function DraftInputText(_ref) {
   var _getLengthOfSelectedText = function _getLengthOfSelectedText() {
     var currentSelection = editorState.getSelection();
     var isCollapsed = currentSelection.isCollapsed();
-
     var length = 0;
-
     if (!isCollapsed) {
       var currentContent = editorState.getCurrentContent();
       var startKey = currentSelection.getStartKey();
@@ -147,12 +108,10 @@ var DraftInputText = function DraftInputText(_ref) {
       var startSelectedTextLength = startBlockTextLength - currentSelection.getStartOffset();
       var endSelectedTextLength = currentSelection.getEndOffset();
       var keyAfterEnd = currentContent.getKeyAfter(endKey);
-
       if (isStartAndEndBlockAreTheSame) {
         length += currentSelection.getEndOffset() - currentSelection.getStartOffset();
       } else {
         var currentKey = startKey;
-
         while (currentKey && currentKey !== keyAfterEnd) {
           if (currentKey === startKey) {
             length += startSelectedTextLength + 1;
@@ -161,12 +120,10 @@ var DraftInputText = function DraftInputText(_ref) {
           } else {
             length += currentContent.getBlockForKey(currentKey).getLength() + 1;
           }
-
           currentKey = currentContent.getKeyAfter(currentKey);
         }
       }
     }
-
     return length;
   };
 
@@ -180,7 +137,6 @@ var DraftInputText = function DraftInputText(_ref) {
     var currentContent = editorState.getCurrentContent();
     var currentContentLength = currentContent.getPlainText('').length;
     var selectedTextLength = _getLengthOfSelectedText();
-
     if (position === 'before') {
       if (currentContentLength - selectedTextLength + text.length > maxLength - 1) {
         console.log('You can type a maximum of ten characters');
@@ -219,7 +175,6 @@ var DraftInputText = function DraftInputText(_ref) {
   var _handleChange = function _handleChange(newEditorState) {
     var contentState = newEditorState.getCurrentContent();
     var text = contentState.getPlainText();
-
     if (text.length <= maxLength) {
       setEditorState(newEditorState);
     } else {
@@ -237,7 +192,6 @@ var DraftInputText = function DraftInputText(_ref) {
     var match = htmlString.match(regex);
     return match ? match[1] : htmlString;
   };
-
   var changeEmToI = function changeEmToI(str) {
     return str.replace(/<[/]?em>/g, function (match) {
       return match === '<em>' ? '<i>' : '</i>';
@@ -282,7 +236,6 @@ var DraftInputText = function DraftInputText(_ref) {
       setDiff(false);
       var dummy = (0, _draftConvert.convertFromHTML)(value);
       var newState = _draftJs.EditorState.createWithContent(dummy);
-
       if (focus) {
         isFocused = true;
       }
@@ -318,81 +271,64 @@ var DraftInputText = function DraftInputText(_ref) {
       editorRef.current.focus();
     }
   }, [autoFocus]);
-
-  return _react2.default.createElement(
-    DraftInputTextDiv,
-    { theme: props.theme, inputWidth: props.inputWidth },
-    _react2.default.createElement(
-      RichTextEditorContainer,
-      _extends({
-        type: hidden ? type : 'text',
-        value: value,
-        defaultValue: defaultValue
-      }, props, {
-        maxLength: maxLength || '',
-        showLengthCount: showLengthCount || false
-      }),
-      _react2.default.createElement(_draftJs.Editor, {
-        ref: editorRef,
-        editorState: editorState,
-        onChange: _handleChange,
-        handleBeforeInput: _handleBeforeInput,
-        handlePastedText: _handlePastedText,
-        handleKeyCommand: handleKeyCommand,
-        onFocus: function onFocus() {
-          return setFocus(true);
-        },
-        onBlur: function onBlur() {
-          return setFocus(false);
-        },
-        handleReturn: function handleReturn(e) {
-          props.onKeyDownFn();
-          return 'handled';
-        }
-      })
-    ),
-    label && _react2.default.createElement(
-      'label',
-      {
-        htmlFor: props.id,
-        className: editorState.getCurrentContent().hasText() || focus ? 'floaton' : ''
-      },
-      '' + label + (props.isRequired ? '*' : '')
-    ),
-    errorMesssage ? _react2.default.createElement(
-      DraftInputError,
-      { value: value, theme: props.theme, error: props.error },
-      errorMesssage
-    ) : '',
-    maxLength && showLengthCount && _react2.default.createElement(
-      CountWrappper,
-      null,
-      contentLength,
-      '/',
-      maxLength
-    ),
-    type == 'password' || passwordButton ? _react2.default.createElement(
-      PasswordToggleButton,
-      {
-        type: 'button',
-        className: 'password-toggle',
-        onClick: function onClick() {
-          return togglePassword(!hidden);
-        },
-        hiddenEye: errorMesssage ? true : false
-      },
-      hidden ? _react2.default.createElement(_icon2.default, { name: 'show-password', width: 18, height: 15, color: '#999' }) : _react2.default.createElement(_icon2.default, { name: 'hide-password', width: 18, height: 15, color: '#999' })
-    ) : ''
-  );
+  return /*#__PURE__*/_react["default"].createElement(DraftInputTextDiv, {
+    theme: props.theme,
+    inputWidth: props.inputWidth
+  }, /*#__PURE__*/_react["default"].createElement(RichTextEditorContainer, (0, _extends2["default"])({
+    type: hidden ? type : 'text',
+    value: value,
+    defaultValue: defaultValue
+  }, props, {
+    maxLength: maxLength || '',
+    showLengthCount: showLengthCount || false
+  }), /*#__PURE__*/_react["default"].createElement(_draftJs.Editor, {
+    ref: editorRef,
+    editorState: editorState,
+    onChange: _handleChange,
+    handleBeforeInput: _handleBeforeInput,
+    handlePastedText: _handlePastedText,
+    handleKeyCommand: handleKeyCommand,
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
+    },
+    handleReturn: function handleReturn(e) {
+      props.onKeyDownFn();
+      return 'handled';
+    }
+  })), label && /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: props.id,
+    className: editorState.getCurrentContent().hasText() || focus ? 'floaton' : ''
+  }, "".concat(label).concat(props.isRequired ? '*' : '')), errorMesssage ? /*#__PURE__*/_react["default"].createElement(DraftInputError, {
+    value: value,
+    theme: props.theme,
+    error: props.error
+  }, errorMesssage) : '', maxLength && showLengthCount && /*#__PURE__*/_react["default"].createElement(CountWrappper, null, contentLength, "/", maxLength), type == 'password' || passwordButton ? /*#__PURE__*/_react["default"].createElement(PasswordToggleButton, {
+    type: "button",
+    className: "password-toggle",
+    onClick: function onClick() {
+      return togglePassword(!hidden);
+    },
+    hiddenEye: errorMesssage ? true : false
+  }, hidden ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "show-password",
+    width: 18,
+    height: 15,
+    color: "#999"
+  }) : /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    name: "hide-password",
+    width: 18,
+    height: 15,
+    color: "#999"
+  })) : '');
 };
-
 var returnPadding = function returnPadding(props) {
   var digitCount = props.maxLength.toString().length;
-
   if (props.type === 'password') {
     return '7px 23px 2px 0px';
   }
-
   switch (digitCount) {
     case 0:
       return '7px 0px 2px 0px';
@@ -410,8 +346,7 @@ var returnPadding = function returnPadding(props) {
       return '7px 0px 2px 0px';
   }
 };
-
-var RichTextEditorContainer = _styledComponents2.default.div(_templateObject5, function (props) {
+var RichTextEditorContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\nmax-height:48px;\n  overflow-y:scroll;\n::-webkit-scrollbar {\n    width: 0;  /* Remove scrollbar space */\n    background: transparent;  /* Optional: just make scrollbar invisible */\n }\nwhite-space: nowrap;\n width:100%\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n \n\n  font-family: \"SFUIText-Medium\";\n  font-size: 14px;\n  color: ", ";\n\n  display: inline-block;\n  position: relative;\n  padding: ", ";\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus-within {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus-within::placeholder {\n    color: ", ";\n    opacity: ", ";\n  }\n\n"])), function (props) {
   return props.theme === 'light' ? _tokens.colors.light.inputCommon.border : _tokens.colors.dark.inputCommon.border;
 }, function (props) {
   return props.theme === 'light' ? _tokens.colors.light.inputCommon.color : _tokens.colors.dark.inputCommon.color;
@@ -430,38 +365,36 @@ var RichTextEditorContainer = _styledComponents2.default.div(_templateObject5, f
 }, function (props) {
   return props.label ? '1' : '1';
 });
-
 DraftInputText.propTypes = {
-  masked: _propTypes2.default.bool,
+  masked: _propTypes["default"].bool,
   /** Make input readOnly if it does not validate constraint */
-  readOnly: _propTypes2.default.bool,
+  readOnly: _propTypes["default"].bool,
   /** Use when the expected input is code */
-  code: _propTypes2.default.bool,
+  code: _propTypes["default"].bool,
   /** Pass hasError to show error state */
-  hasError: _propTypes2.default.bool,
+  hasError: _propTypes["default"].bool,
   /** Pass error string directly to show error state */
-  error: _propTypes2.default.string,
+  error: _propTypes["default"].string,
   /** onChange transparently passed to the input */
-  onChange: _propTypes2.default.func,
-  onKeyDownFn: _propTypes2.default.func,
+  onChange: _propTypes["default"].func,
+  onKeyDownFn: _propTypes["default"].func,
   /** Text to display when the input is empty */
-  placeholder: _propTypes2.default.string,
+  placeholder: _propTypes["default"].string,
   /** The default value for the field */
-  defaultValue: _propTypes2.default.string,
+  defaultValue: _propTypes["default"].string,
   /** The (HTML) type for the input. */
-  type: _propTypes2.default.string,
-  value: _propTypes2.default.string,
+  type: _propTypes["default"].string,
+  value: _propTypes["default"].string,
   /** The (HTML) maxLength for the input. */
-  maxLength: _propTypes2.default.number,
-  inputWidth: _propTypes2.default.number,
-  showLengthCount: _propTypes2.default.bool,
-  simpleEdit: _propTypes2.default.bool,
-  autoFocus: _propTypes2.default.bool,
-  isFocused: _propTypes2.default.bool,
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  fieldType: _propTypes2.default.oneOf(['inputField', 'textArea'])
+  maxLength: _propTypes["default"].number,
+  inputWidth: _propTypes["default"].number,
+  showLengthCount: _propTypes["default"].bool,
+  simpleEdit: _propTypes["default"].bool,
+  autoFocus: _propTypes["default"].bool,
+  isFocused: _propTypes["default"].bool,
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  fieldType: _propTypes["default"].oneOf(['inputField', 'textArea'])
 };
-
 DraftInputText.defaultProps = {
   isFocused: false,
   autoFocus: false,
@@ -475,5 +408,4 @@ DraftInputText.defaultProps = {
   showLengthCount: false,
   simpleEdit: false
 };
-
-exports.default = DraftInputText;
+var _default = exports["default"] = DraftInputText;