intelicoreact 0.0.2 → 0.0.6

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _fi = require("react-icons/fi");
+var _reactFeather = require("react-feather");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
@@ -40,13 +40,10 @@ var Dropdown = function Dropdown(_ref) {
 
   var options = _ref.options,
       value = _ref.value,
+      error = _ref.error,
       onChange = _ref.onChange,
       placeholder = _ref.placeholder,
       className = _ref.className,
-      label = _ref.label,
-      isLabelBold = _ref.isLabelBold,
-      hint = _ref.hint,
-      hintSide = _ref.hintSide,
       isSearchable = _ref.isSearchable;
 
   var _useState = (0, _react.useState)(false),
@@ -120,7 +117,8 @@ var Dropdown = function Dropdown(_ref) {
       className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), item.value === value), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_disabled"), item.disabled))
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), item.value === value))
-    }, /*#__PURE__*/_react.default.createElement(_fi.FiCheck, null)), /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
+      className: item.className || '',
       dangerouslySetInnerHTML: {
         __html: hightlightedText(item.label)
       }
@@ -159,16 +157,10 @@ var Dropdown = function Dropdown(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className),
     ref: dropdownRef
-  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    className: "".concat(RC, "-label"),
-    isBold: isLabelBold,
-    label: label,
-    hint: hint,
-    hintSide: hintSide
-  }), /*#__PURE__*/_react.default.createElement("button", {
-    className: "".concat(RC, "__trigger"),
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
     onClick: function onClick() {
-      return setIsOpen(!isOpen);
+      return !isSearchable ? setIsOpen(!isOpen) : null;
     }
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),
@@ -176,10 +168,18 @@ var Dropdown = function Dropdown(_ref) {
     onChange: function onChange(e) {
       return onSearchHandler(e.target.value);
     },
-    placeholder: placeholder
-  }) : selectedLabel || placeholder, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
-  }, isOpen ? /*#__PURE__*/_react.default.createElement(_fi.FiChevronUp, null) : /*#__PURE__*/_react.default.createElement(_fi.FiChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    placeholder: placeholder,
+    onFocus: function onFocus() {
+      return setIsOpen(true);
+    }
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__list")
   }, filteredOptions.map(function (filteredOption) {
     var _filteredOption$items2;

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -1,4 +1,4 @@
-@import "../../../../scss/vars";
+@import "../../../scss/vars";
 
 .dropdown {
   display: inline-flex;
@@ -13,7 +13,6 @@
     border-radius: 3px;
     width: 100%;
     height: 28px;
-    display: flex;
     align-items: center;
     cursor: pointer;
     padding-left: 9px;
@@ -26,9 +25,12 @@
     position: relative;
     text-align: left;
 
-    &_error {
+    &.error {
       border-color: $color--secondary;
     }
+    &.placeholder .text{
+      opacity: .7;
+    }
   }
 
   &__input {
@@ -71,6 +73,8 @@
       display: flex;
       align-items: center;
       //justify-content: center;
+      border: none;
+      background: transparent;
       padding: 0 20px 0 30px;
       position: relative;
       cursor: pointer;
@@ -101,6 +105,7 @@
     display: flex;
     align-items: center;
     width: 16px;
+    height: 16px;
     position: absolute;
     right: 4px;
     top: 50%;

package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -17,8 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 
-require("../../../../scss/main.scss");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,12 +24,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 global.lng = 'en';
 var _default = {
   title: 'Dropdown',
-  component: _Dropdown.default
+  component: _Dropdown.default,
+  argTypes: {
+    className: {
+      description: 'string'
+    },
+    value: {
+      description: 'string - current option'
+    },
+    isSearchable: {
+      description: 'boolean - enable search'
+    },
+    onChange: {
+      description: 'callback return selected value'
+    }
+  }
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)({}),
+  var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
@@ -50,11 +62,11 @@ var DropdownTemplate = Template.bind({});
 exports.DropdownTemplate = DropdownTemplate;
 DropdownTemplate.args = {
   placeholder: 'Placeholder',
-  label: '',
   isSearchable: true,
   options: [{
     label: 'Dropdown1',
-    value: 'drop1'
+    value: 'drop1',
+    className: 'status status--approved'
   }, {
     label: 'Dropdown2',
     value: 'drop2'
@@ -96,5 +108,6 @@ DropdownTemplate.args = {
       label: 'Group 23',
       value: 'group23'
     }]
-  }]
+  }],
+  error: ''
 };

package/dist/Atomic/FormElements/Header/Header.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _fi = require("react-icons/fi");
+var _reactFeather = require("react-feather");
 
 var _go = require("react-icons/go");
 
@@ -21,9 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("../../../Functions/utils");
 
-var _Hint = _interopRequireDefault(require("../Hint/Hint"));
-
-var _default_ava = _interopRequireDefault(require("../../../../assets/images/default_ava.png"));
+var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
 
 require("./Header.scss");
 
@@ -67,7 +65,7 @@ var Header = function Header(_ref) {
   };
   (0, _utils.useOutsideToggle)(userMenu, handle.closeMenu);
   return /*#__PURE__*/_react.default.createElement("header", {
-    className: "header"
+    className: (0, _classnames.default)('header', className)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "df"
   }, /*#__PURE__*/_react.default.createElement(_Hint.default, {
@@ -77,18 +75,18 @@ var Header = function Header(_ref) {
     label: hintLabel,
     iconOutline: true
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "j6 user-menu rel"
+    className: "j6 user-menu"
   }, /*#__PURE__*/_react.default.createElement("div", {
     onClick: function onClick() {},
     className: "header--bell"
-  }, /*#__PURE__*/_react.default.createElement(_fi.FiBell, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Bell, {
     className: "header--bell-icon"
-  }), /*#__PURE__*/_react.default.createElement(_go.GoPrimitiveDot, {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "header--bell-notification-icon"
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "header--user-ava"
   }, /*#__PURE__*/_react.default.createElement("img", {
-    src: img || _default_ava.default,
+    src: img,
     alt: ""
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "dfc mr10"
@@ -96,7 +94,7 @@ var Header = function Header(_ref) {
     className: "header--user-name"
   }, name, " ", surname), /*#__PURE__*/_react.default.createElement("span", {
     className: "header--user-status"
-  }, status)), /*#__PURE__*/_react.default.createElement(_fi.FiChevronRight, {
+  }, status)), /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronRight, {
     onClick: handle.toggleMenu,
     className: (0, _classnames.default)('accordion--title-chevron', {
       'accordion--title-chevron-open': isOpen
@@ -107,7 +105,7 @@ var Header = function Header(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "user-menu__item",
     onClick: handle.logout
-  }, /*#__PURE__*/_react.default.createElement(_fi.FiPower, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Power, {
     className: "mr10"
   }), " Logout"))));
 };

package/dist/Atomic/FormElements/Header/Header.scss

@@ -1,5 +1,3 @@
-@import "../../../scss/anme/anme-vars";
-
 .header {
   display: flex;
   align-items: center;
@@ -43,12 +41,20 @@
     position: relative;
     margin-right: 22px;
     cursor: pointer;
+    width: 16px;
+    height: 16px;
+    max-width: 16px;
+    min-width: 16px;
 
     &-notification-icon {
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-radius: 15px;
       position: absolute;
-      color: #f06d8d;
-      top: -8px;
-      left: 10px;
+      top: -3px;
+      right: -6px;
+      background-color: #f06d8d;
     }
   }
 
@@ -76,7 +82,12 @@
 .user-menu__item {
   padding: 5px 15px;
   cursor: pointer;
+
   &:hover {
     background: #e2e5ec;
   }
 }
+
+.user-menu {
+  position: relative;
+}

package/dist/Atomic/FormElements/Header/Header.stories.js

@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Header = _interopRequireDefault(require("./Header"));
 
-require("../../../../scss/main.scss");
-
 global.lng = 'en';
 var _default = {
   title: 'Header',

package/dist/Atomic/FormElements/Input/Input.js

@@ -9,56 +9,50 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _fi = require("react-icons/fi");
+var _reactFeather = require("react-feather");
 
-var _Label = _interopRequireDefault(require("../Label/Label"));
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
 require("./Input.scss");
 
-var _excluded = ["error", "onChange", "disabled", "withDelete", "isNumeric", "min", "max", "value", "placeholder", "hint", "label", "hintSide", "className", "isLabelBold", "type", "onBlur", "icon", "isRequired"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var RC = 'input-classic';
-
 var Input = function Input(_ref) {
-  var error = _ref.error,
-      onChange = _ref.onChange,
+  var onChange = _ref.onChange,
       disabled = _ref.disabled,
       withDelete = _ref.withDelete,
       isNumeric = _ref.isNumeric,
-      min = _ref.min,
+      _ref$numStep = _ref.numStep,
+      numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
       max = _ref.max,
-      _ref$value = _ref.value,
-      value = _ref$value === void 0 ? min : _ref$value,
+      value = _ref.value,
       placeholder = _ref.placeholder,
-      hint = _ref.hint,
-      label = _ref.label,
-      hintSide = _ref.hintSide,
       className = _ref.className,
-      isLabelBold = _ref.isLabelBold,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      _ref$onBlur = _ref.onBlur,
-      _onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      onKeyUp = _ref.onKeyUp,
+      mask = _ref.mask,
+      error = _ref.error,
       icon = _ref.icon,
-      isRequired = _ref.isRequired,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      symbolsLimit = _ref.symbolsLimit;
 
+  // STATES
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isFocused = _useState2[0],
@@ -66,98 +60,96 @@ var Input = function Input(_ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      onInputHover = _useState4[0],
-      setOnInputHover = _useState4[1];
+      isEditing = _useState4[0],
+      setEditing = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isEditing = _useState6[0],
-      setEditing = _useState6[1];
+  var inputRef = (0, _react.useRef)(null); // HANDLES
 
-  var inputRef = (0, _react.useRef)(null);
-
-  var changeHandler = function changeHandler(inputValue) {
-    if (isNumeric || type === 'number' && inputValue !== '') {
-      var totalValue = Number(+inputValue);
-      if (totalValue >= (min !== null && min !== void 0 ? min : -Infinity) && totalValue <= (max !== null && max !== void 0 ? max : Infinity)) onChange(totalValue);
-      return;
-    }
+  var handle = {
+    change: function change(e) {
+      var inputValue = e.target ? e.target.value : e;
 
-    onChange(inputValue);
-  };
+      if (isNumeric || type === 'number' && inputValue !== '') {
+        inputValue = parseFloat(inputValue) || '';
 
-  var toggleEditing = function toggleEditing() {
-    setEditing(!isEditing);
-  };
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
 
-  (0, _react.useEffect)(function () {
-    if (isEditing) {
-      inputRef.current.focus();
-    }
-  }, [isEditing, isFocused]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(className, RC)
-  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    className: "".concat(RC, "-label"),
-    isBold: isLabelBold,
-    label: label,
-    hint: hint,
-    hintSide: hintSide,
-    isRequired: isRequired
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    onMouseEnter: function onMouseEnter() {
-      return setOnInputHover(true);
+      onChange(inputValue.toString());
     },
-    onMouseLeave: function onMouseLeave() {
-      return setOnInputHover(false);
+    toggleEdit: function toggleEdit() {
+      setEditing(!isEditing);
+      onChange('');
     },
-    className: (0, _classnames.default)("".concat(RC, "__wrap"), (0, _defineProperty2.default)({}, "".concat(RC, "__wrap_focus"), isFocused), (0, _defineProperty2.default)({}, "".concat(RC, "__wrap_error"), error), (0, _defineProperty2.default)({}, "".concat(RC, "__wrap_disabled"), disabled))
-  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-    ref: inputRef,
-    className: (0, _classnames.default)("".concat(RC, "__input")),
-    type: isNumeric ? 'number' : type,
-    onChange: function onChange(e) {
-      return changeHandler(e.target.value);
+    focus: function focus(e) {
+      setIsFocused(true);
+      if (onFocus) onFocus(e);
     },
-    value: value || '',
-    disabled: disabled,
-    onBlur: function onBlur() {
+    blur: function blur(e) {
       setIsFocused(false);
       setEditing(false);
-
-      _onBlur();
-    },
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    },
-    placeholder: placeholder
-  }, props)), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(RC, "__nums")
-  }, /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return changeHandler(value - 1);
+      if (onBlur) onBlur(e);
     },
-    className: (0, _classnames.default)("".concat(RC, "__num-btn"), {
-      disabled: value === min
-    })
-  }, /*#__PURE__*/_react.default.createElement(_fi.FiMinus, null)), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return changeHandler(value + 1);
-    },
-    className: (0, _classnames.default)("".concat(RC, "__num-btn"), {
-      disabled: value === max
-    })
-  }, /*#__PURE__*/_react.default.createElement(_fi.FiPlus, null))), withDelete && onInputHover && !isNumeric && /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames.default)("".concat(RC, "__close"), {
+    keyUp: function keyUp(e) {
+      return onKeyUp ? onKeyUp(e.keyCode, event) : null;
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (isEditing) inputRef.current.focus();
+  }, [isEditing, isFocused]);
+  var uniProps = {
+    className: "input ".concat(className),
+    placeholder: placeholder,
+    value: value || '',
+    disabled: disabled,
+    onChange: handle.change,
+    onFocus: handle.focus,
+    onBlur: handle.blur,
+    onKeyUp: handle.keyUp,
+    min: min,
+    max: max
+  };
+
+  function renderInput() {
+    if (mask) {
+      return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
+        ref: inputRef,
+        mask: mask
+      }));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
+      ref: inputRef,
+      type: isNumeric ? 'number' : type
+    })), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
+      className: "input__nums"
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      onClick: function onClick() {
+        return handle.change(value - numStep);
+      },
+      className: (0, _classnames.default)("input__num-btn", {
+        disabled: value <= min
+      })
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
+      onClick: function onClick() {
+        return handle.change(+value + +numStep);
+      },
+      className: (0, _classnames.default)("input__num-btn", {
+        disabled: value >= max
+      })
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
+  }, renderInput(), icon, withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("input__close", {
       hidden: !value
     }),
-    onClick: function onClick() {
-      toggleEditing();
-      onChange('');
-    }
-  }), icon !== null && icon !== void 0 ? icon : null), error && /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(RC, "__error")
-  }, error));
+    onClick: handle.toggleEdit
+  }));
 };
 
 var _default = Input;

package/dist/Atomic/FormElements/Input/Input.scss

@@ -1,8 +1,14 @@
-@import "../../../../scss/vars";
-
-.input-classic {
+.input {
   position: relative;
   word-break: break-all;
+  border: none;
+  background: none;
+  padding: 0 10px;
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+  }
 
   &__wrap {
     display: flex;
@@ -12,8 +18,9 @@
     background-color: #fff;
     height: 28px;
     border-radius: 4px;
+
     &_focus {
-      border-color: $color--primary;
+      border-color: #6b81dd;
       filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
     }
 
@@ -25,7 +32,7 @@
     }
 
     &_error {
-      border-color: $color--secondary;
+      border-color: #f06d8d;
     }
   }
 
@@ -37,7 +44,7 @@
   }
 
   &_error {
-    border-color: $color--secondary;
+    border-color: #f06d8d;
   }
 
   svg {
@@ -50,21 +57,12 @@
     box-sizing: border-box;
     font-size: 13px;
     font-weight: 400;
-    color: $color--dark;
+    color: #1e1e2d;
     border: none;
     padding: 0 5px;
     border-radius: 4px;
   }
 
-  &__error {
-    margin-top: 2px;
-    margin-left: 1px;
-    position: absolute;
-    display: block;
-    font-size: 10px;
-    color: $color--secondary;
-  }
-
   &__close {
     position: relative;
     opacity: 0.6;
@@ -73,7 +71,8 @@
     background: none;
     cursor: pointer;
     margin-right: 4px;
-
+    visibility: hidden;
+    pointer-events: none;
     &:hover {
       opacity: 1;
     }
@@ -88,7 +87,7 @@
       margin: auto;
       height: 14px;
       width: 2px;
-      background-color: $color--gray--dark;
+      background-color: #9aa0b9;
     }
 
     &:before {
@@ -117,7 +116,9 @@
     background: none;
     font-size: 20px;
     user-select: none;
-
+    &.disabled {
+      opacity: 0.3;
+    }
     svg {
       margin-right: 0;
     }
@@ -127,3 +128,9 @@
     margin-bottom: 5px;
   }
 }
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}
+