@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/icon/index.js

@@ -1,16 +1,23 @@
-'use strict';
+"use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconsJson = exports.__ICONNAMES__ = undefined;
-
-var _icon = require('./icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _icon2.default;
-exports.__ICONNAMES__ = _icon.__ICONNAMES__;
-exports.IconsJson = _icon.IconsJson;
+Object.defineProperty(exports, "IconsJson", {
+  enumerable: true,
+  get: function get() {
+    return _icon.IconsJson;
+  }
+});
+Object.defineProperty(exports, "__ICONNAMES__", {
+  enumerable: true,
+  get: function get() {
+    return _icon.__ICONNAMES__;
+  }
+});
+exports["default"] = void 0;
+var _icon = _interopRequireWildcard(require("./icon"));
+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 _default = exports["default"] = _icon["default"];

package/atoms/image/image.js

@@ -1,51 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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 _templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  pointer-events: none;\n  width: ", ";\n  height: ", ";\n  top: 50%;\n  left: 50%;\n  position: relative;\n  transform: translate(-50%, -50%);\n  -webkit-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n"], ["\n  user-select: none;\n  pointer-events: none;\n  width: ", ";\n  height: ", ";\n  top: 50%;\n  left: 50%;\n  position: relative;\n  transform: translate(-50%, -50%);\n  -webkit-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n"]);
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require("styled-components");
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledImage = _styledComponents2.default.img(_templateObject, function (props) {
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var StyledImage = _styledComponents["default"].img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  user-select: none;\n  pointer-events: none;\n  width: ", ";\n  height: ", ";\n  top: 50%;\n  left: 50%;\n  position: relative;\n  transform: translate(-50%, -50%);\n  -webkit-transform: translate(-50%, -50%);\n  -moz-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  -o-transform: translate(-50%, -50%);\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
 });
-
 var Image = function Image(props) {
-  return _react2.default.createElement(StyledImage, _extends({ src: props.source, alt: props.alt }, props));
+  return /*#__PURE__*/_react["default"].createElement(StyledImage, (0, _extends2["default"])({
+    src: props.source,
+    alt: props.alt
+  }, props));
 };
-
 Image.propTypes = {
-  source: _propTypes2.default.string.isRequired,
-  alt: _propTypes2.default.string,
-  width: _propTypes2.default.string,
-  height: _propTypes2.default.string
+  source: _propTypes["default"].string.isRequired,
+  alt: _propTypes["default"].string,
+  width: _propTypes["default"].string,
+  height: _propTypes["default"].string
 };
-
 Image.defaultProps = {
   source: null,
   alt: null,
   width: "100%",
   height: "auto"
 };
-
-exports.default = Image;
+var _default = exports["default"] = Image;

package/atoms/image/image.story.js

@@ -1,24 +1,15 @@
 "use strict";
 
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require("@storybook/react");
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
 var _storyHelpers = require("../../_helpers/story-helpers");
-
 var _components = require("../../components");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)("Image").add("url", function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: "Icons" },
-    _react2.default.createElement(_components.Image, {
-      source: "https://tassets.desynova.com/img/topaz-logo.png",
-      alt: "topaz logo"
-    })
-  );
+(0, _react2.storiesOf)("Image").add("url", function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Icons"
+  }, /*#__PURE__*/_react["default"].createElement(_components.Image, {
+    source: "https://tassets.desynova.com/img/topaz-logo.png",
+    alt: "topaz logo"
+  }));
 });

package/atoms/image/index.js

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

package/atoms/inputText/index.js

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

package/atoms/inputText/inputText.js

@@ -1,71 +1,46 @@
 "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: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\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  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\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: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\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  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"]),
-    _templateObject2 = _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"]),
-    _templateObject3 = _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"]),
-    _templateObject4 = _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"]),
-    _templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ", ";\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ", ";\n\n  font-family: \"SFUIText-Medium\";\n  color: ", ";\n\n  cursor: ", ";\n\n  font-size: 14px;\n  padding: ", ";\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ", ";\n  }\n  &:disabled:hover {\n    border-color: ", ";\n  }\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n  }\n"], ["\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ", ";\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ", ";\n\n  font-family: \"SFUIText-Medium\";\n  color: ", ";\n\n  cursor: ", ";\n\n  font-size: 14px;\n  padding: ", ";\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ", ";\n  }\n  &:disabled:hover {\n    border-color: ", ";\n  }\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n  }\n"]);
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require("styled-components");
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _icon = require("../icon");
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
+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 _styledComponents = _interopRequireDefault(require("styled-components"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tokens = require("@desynova-digital/tokens");
-
-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 InputTextDiv = _styledComponents2.default.div(_templateObject);
-
-var InputError = _styledComponents2.default.span(_templateObject2, function (props) {
+var _excluded = ["theme", "maxLength", "defaultValue", "type", "showLengthCount", "disablePaste"];
+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 InputTextDiv = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: transparent;\n  font-family: \"SFUIText-Medium\";\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\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  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n"])));
+var InputError = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (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 PasswordToggleButton = _styledComponents2.default.div(_templateObject3);
-
-var CountWrappper = _styledComponents2.default.div(_templateObject4);
-
-var InputText = function InputText(_ref) {
+var PasswordToggleButton = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (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(_templateObject4 || (_templateObject4 = (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 _InputText = function InputText(_ref) {
   var theme = _ref.theme,
-      maxLength = _ref.maxLength,
-      defaultValue = _ref.defaultValue,
-      type = _ref.type,
-      showLengthCount = _ref.showLengthCount,
-      disablePaste = _ref.disablePaste,
-      props = _objectWithoutProperties(_ref, ["theme", "maxLength", "defaultValue", "type", "showLengthCount", "disablePaste"]);
-
+    maxLength = _ref.maxLength,
+    defaultValue = _ref.defaultValue,
+    type = _ref.type,
+    showLengthCount = _ref.showLengthCount,
+    disablePaste = _ref.disablePaste,
+    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];
   if (props.masked) {
     var length = defaultValue ? defaultValue.length : 8;
     var maskedValue = new Array(length).join("•");
-    return _react2.default.createElement(InputText.Element, _extends({
+    return /*#__PURE__*/_react["default"].createElement(_InputText.Element, (0, _extends2["default"])({
       theme: theme,
       value: props.value,
       type: type
@@ -77,75 +52,59 @@ var InputText = function InputText(_ref) {
   if (props.error && props.error.length > 0) {
     var errorMesssage = props.error;
   }
-
   if (props.readOnly) {
     props.disabled = true;
   }
-
   if (props.passwordButton) {
     var passwordButton = props.passwordButton;
   }
-
   var handleCutCopyPaste = function handleCutCopyPaste(e) {
     disablePaste && e.preventDefault();
   };
-
-  return _react2.default.createElement(
-    InputTextDiv,
-    { theme: theme },
-    _react2.default.createElement(InputText.Element, _extends({
-      theme: theme,
-      type: hidden ? type : "text",
-      value: props.value,
-      defaultValue: defaultValue
-    }, props, {
-      maxLength: maxLength || "",
-      showLengthCount: showLengthCount || false,
-      onCopy: handleCutCopyPaste,
-      onCut: handleCutCopyPaste,
-      onPaste: handleCutCopyPaste
-    })),
-    props.label ? _react2.default.createElement(
-      "label",
-      {
-        htmlFor: props.id,
-        className: props.value && props.value.length > 0 ? "floaton" : ""
-      },
-      "" + props.label + (props.isRequired ? "*" : "")
-    ) : "",
-    errorMesssage ? _react2.default.createElement(
-      InputError,
-      { value: props.value, theme: theme, error: props.error },
-      errorMesssage
-    ) : "",
-    maxLength && showLengthCount && _react2.default.createElement(
-      CountWrappper,
-      null,
-      props.value.length,
-      "/",
-      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(InputTextDiv, {
+    theme: theme
+  }, /*#__PURE__*/_react["default"].createElement(_InputText.Element, (0, _extends2["default"])({
+    theme: theme,
+    type: hidden ? type : "text",
+    value: props.value,
+    defaultValue: defaultValue
+  }, props, {
+    maxLength: maxLength || "",
+    showLengthCount: showLengthCount || false,
+    onCopy: handleCutCopyPaste,
+    onCut: handleCutCopyPaste,
+    onPaste: handleCutCopyPaste
+  })), props.label ? /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: props.id,
+    className: props.value && props.value.length > 0 ? "floaton" : ""
+  }, "".concat(props.label).concat(props.isRequired ? "*" : "")) : "", errorMesssage ? /*#__PURE__*/_react["default"].createElement(InputError, {
+    value: props.value,
+    theme: theme,
+    error: props.error
+  }, errorMesssage) : "", maxLength && showLengthCount && /*#__PURE__*/_react["default"].createElement(CountWrappper, null, props.value.length, "/", 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";
@@ -163,8 +122,7 @@ var returnPadding = function returnPadding(props) {
       return "7px 0px 2px 0px";
   }
 };
-
-InputText.Element = _styledComponents2.default.input(_templateObject5, function (props) {
+_InputText.Element = _styledComponents["default"].input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ", ";\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ", ";\n\n  font-family: \"SFUIText-Medium\";\n  color: ", ";\n\n  cursor: ", ";\n\n  font-size: 14px;\n  padding: ", ";\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ", ";\n  }\n  &:disabled:hover {\n    border-color: ", ";\n  }\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ", ";\n\n    opacity: ", ";\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].inputCommon.background;
 }, function (props) {
   if (props.error) {
@@ -205,38 +163,36 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
 }, function (props) {
   return props.placeholder ? "1" : "1";
 });
-
-InputText.propTypes = {
+_InputText.propTypes = {
   /** Hide input, similar to passwords but for other private information. Implies readOnly. */
-  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,
+  onChange: _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,
-  showLengthCount: _propTypes2.default.bool,
-  theme: _propTypes2.default.oneOf(["light", "dark", "nexc"]),
-  disablePaste: _propTypes2.default.bool
+  maxLength: _propTypes["default"].number,
+  showLengthCount: _propTypes["default"].bool,
+  theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
+  disablePaste: _propTypes["default"].bool
 
   /** deprecate error string prop */
   // _error: props => deprecate(props, { name: 'error', replacement: 'hasError' })
 };
-
-InputText.defaultProps = {
+_InputText.defaultProps = {
   readOnly: false,
   code: false,
   error: null,
@@ -248,5 +204,4 @@ InputText.defaultProps = {
   showLengthCount: false,
   disablePaste: false
 };
-
-exports.default = InputText;
+var _default = exports["default"] = _InputText;