@semcore/input 2.2.4 → 3.0.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.1] - 2022-05-18
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.24.0 ~> 2.25.0]).
+
+## [3.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+- Remove value "xl"/"s"" for "size".
+
+## [2.2.5] - 2022-03-14
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/flex-box` [4.5.0 ~> 4.5.1]).
+
 ## [2.2.4] - 2022-02-24
 
 ### Added

package/lib/cjs/Input.js

@@ -50,28 +50,26 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SInput_1hvq5_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1hvq5_gg_ input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1hvq5_gg_ input:-webkit-autofill~.___SOutline_1hvq5_gg_{background-color:#faffbd}.___SValue_1hvq5_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#333333;font-size:inherit;line-height:1.1;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1hvq5_gg_:focus{outline:none}.___SValue_1hvq5_gg_::-moz-placeholder{color:#aaaaaa}.___SValue_1hvq5_gg_:-ms-input-placeholder{color:#aaaaaa}.___SValue_1hvq5_gg_::placeholder{color:#aaaaaa}.___SValue_1hvq5_gg_:-moz-read-only~.___SOutline_1hvq5_gg_{background:#f5f5f5}.___SValue_1hvq5_gg_:read-only~.___SOutline_1hvq5_gg_{background:#f5f5f5}.___SValue_1hvq5_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_1hvq5_gg_:disabled~.___SOutline_1hvq5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1hvq5_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;z-index:-1;background:#fff}.___SAddon_1hvq5_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;height:100%;color:#666666}.___SAddon_1hvq5_gg_.__interactive_1hvq5_gg_{color:#a6b0b3;cursor:pointer}.___SAddon_1hvq5_gg_.__interactive_1hvq5_gg_:hover{color:#929b9e}.___SAddon_1hvq5_gg_.__disabled_1hvq5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1hvq5_gg_._size_s_1hvq5_gg_{font-size:10px;height:18px}.___SInput_1hvq5_gg_._size_s_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:2px}.___SInput_1hvq5_gg_._size_s_1hvq5_gg_ input:-webkit-autofill{border-radius:1px}.___SAddon_1hvq5_gg_._size_s_1hvq5_gg_,.___SValue_1hvq5_gg_._size_s_1hvq5_gg_{padding:0 4px}.___SInput_1hvq5_gg_._size_m_1hvq5_gg_{font-size:12px;height:26px}.___SInput_1hvq5_gg_._size_m_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:3px}.___SInput_1hvq5_gg_._size_m_1hvq5_gg_ input:-webkit-autofill{border-radius:2px}.___SAddon_1hvq5_gg_._size_m_1hvq5_gg_,.___SValue_1hvq5_gg_._size_m_1hvq5_gg_{padding:0 8px}.___SInput_1hvq5_gg_._size_l_1hvq5_gg_{font-size:14px;height:32px}.___SInput_1hvq5_gg_._size_l_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:4px}.___SInput_1hvq5_gg_._size_l_1hvq5_gg_ input:-webkit-autofill{border-radius:3px}.___SAddon_1hvq5_gg_._size_l_1hvq5_gg_,.___SValue_1hvq5_gg_._size_l_1hvq5_gg_{padding:0 8px}.___SInput_1hvq5_gg_._size_xl_1hvq5_gg_{font-size:16px;height:42px}.___SInput_1hvq5_gg_._size_xl_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:5px}.___SInput_1hvq5_gg_._size_xl_1hvq5_gg_ input:-webkit-autofill{border-radius:4px}.___SAddon_1hvq5_gg_._size_xl_1hvq5_gg_,.___SValue_1hvq5_gg_._size_xl_1hvq5_gg_{padding:0 12px}.___SInput_1hvq5_gg_.__focused_1hvq5_gg_{z-index:1}.___SInput_1hvq5_gg_._state_normal_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-color:#a6b0b3}.___SInput_1hvq5_gg_._state_normal_1hvq5_gg_ .___SValue_1hvq5_gg_:focus~.___SOutline_1hvq5_gg_{border-color:#2b94e1;box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SInput_1hvq5_gg_._state_valid_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-color:#4fae33}.___SInput_1hvq5_gg_._state_valid_1hvq5_gg_ .___SValue_1hvq5_gg_:focus~.___SOutline_1hvq5_gg_{border-color:#4fae33;box-shadow:0 0 0 3px rgba(79,174,51,.3)}.___SInput_1hvq5_gg_._state_invalid_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-color:#ff7f00}.___SInput_1hvq5_gg_._state_invalid_1hvq5_gg_ .___SValue_1hvq5_gg_:focus~.___SOutline_1hvq5_gg_{border-color:#ff7f00;box-shadow:0 0 0 3px rgba(255,127,0,.3)}.___SInput_1hvq5_gg_._neighborLocation_right_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1hvq5_gg_._neighborLocation_both_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:0;border-left:none}.___SInput_1hvq5_gg_._neighborLocation_left_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1hvq5_gg_._neighborLocation_right_1hvq5_gg_{padding-right:0}.___SValue_1hvq5_gg_._neighborLocation_both_1hvq5_gg_{padding-left:0;padding-right:0}.___SValue_1hvq5_gg_._neighborLocation_left_1hvq5_gg_{padding-left:0}"
+".___SInput_12tss_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_12tss_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_12tss_gg_ input:-webkit-autofill~.___SOutline_12tss_gg_{background-color:#faffbd}.___SInput_12tss_gg_ .___SOutline_12tss_gg_{border-radius:6px}.___SValue_12tss_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_12tss_gg_:focus{outline:none}.___SValue_12tss_gg_::-moz-placeholder{color:#a9abb6}.___SValue_12tss_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_12tss_gg_::placeholder{color:#a9abb6}.___SValue_12tss_gg_:-moz-read-only~.___SOutline_12tss_gg_{background:#f4f5f9}.___SValue_12tss_gg_:read-only~.___SOutline_12tss_gg_{background:#f4f5f9}.___SValue_12tss_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_12tss_gg_:disabled~.___SOutline_12tss_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_12tss_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;z-index:-1;background:#fff}.___SAddon_12tss_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_12tss_gg_.__interactive_12tss_gg_{cursor:pointer}.___SAddon_12tss_gg_.__interactive_12tss_gg_:hover{color:#8a8e9b}.___SAddon_12tss_gg_.__disabled_12tss_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_12tss_gg_._size_m_12tss_gg_{font-size:14px;height:28px}.___SValue_12tss_gg_._size_l_12tss_gg_,.___SValue_12tss_gg_._size_m_12tss_gg_{padding:0 8px}.___SInput_12tss_gg_._size_l_12tss_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_12tss_gg_.__focused_12tss_gg_{z-index:1}.___SInput_12tss_gg_._state_normal_12tss_gg_ .___SOutline_12tss_gg_{border-color:#c4c7cf}.___SInput_12tss_gg_._state_normal_12tss_gg_ .___SValue_12tss_gg_:focus~.___SOutline_12tss_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_12tss_gg_._state_valid_12tss_gg_ .___SOutline_12tss_gg_{border-color:#59ddaa}.___SInput_12tss_gg_._state_valid_12tss_gg_ .___SValue_12tss_gg_:focus~.___SOutline_12tss_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_12tss_gg_._state_invalid_12tss_gg_ .___SOutline_12tss_gg_{border-color:#ffaeb5}.___SInput_12tss_gg_._state_invalid_12tss_gg_ .___SValue_12tss_gg_:focus~.___SOutline_12tss_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_12tss_gg_._neighborLocation_right_12tss_gg_ .___SOutline_12tss_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_12tss_gg_._neighborLocation_both_12tss_gg_ .___SOutline_12tss_gg_{border-radius:0;border-left:none}.___SInput_12tss_gg_._neighborLocation_left_12tss_gg_ .___SOutline_12tss_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_12tss_gg_._neighborLocation_right_12tss_gg_{padding-right:8px}.___SAddon_12tss_gg_._neighborLocation_left_12tss_gg_{padding-left:8px}.___SValue_12tss_gg_._neighborLocation_right_12tss_gg_{padding-right:0}.___SValue_12tss_gg_._neighborLocation_both_12tss_gg_{padding-left:0;padding-right:0}.___SValue_12tss_gg_._neighborLocation_left_12tss_gg_{padding-left:0}"
 /*__inner_css_end__*/
-, "oj6rjz_gg_")
+, "17wylmg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInput": "___SInput_1hvq5_gg_",
-  "__SOutline": "___SOutline_1hvq5_gg_",
-  "__SValue": "___SValue_1hvq5_gg_",
-  "__SAddon": "___SAddon_1hvq5_gg_",
-  "_interactive": "__interactive_1hvq5_gg_",
-  "_disabled": "__disabled_1hvq5_gg_",
-  "_size_s": "_size_s_1hvq5_gg_",
-  "_size_m": "_size_m_1hvq5_gg_",
-  "_size_l": "_size_l_1hvq5_gg_",
-  "_size_xl": "_size_xl_1hvq5_gg_",
-  "_focused": "__focused_1hvq5_gg_",
-  "_state_normal": "_state_normal_1hvq5_gg_",
-  "_state_valid": "_state_valid_1hvq5_gg_",
-  "_state_invalid": "_state_invalid_1hvq5_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1hvq5_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1hvq5_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1hvq5_gg_"
+  "__SInput": "___SInput_12tss_gg_",
+  "__SOutline": "___SOutline_12tss_gg_",
+  "__SValue": "___SValue_12tss_gg_",
+  "__SAddon": "___SAddon_12tss_gg_",
+  "_interactive": "__interactive_12tss_gg_",
+  "_disabled": "__disabled_12tss_gg_",
+  "_size_m": "_size_m_12tss_gg_",
+  "_size_l": "_size_l_12tss_gg_",
+  "_focused": "__focused_12tss_gg_",
+  "_state_normal": "_state_normal_12tss_gg_",
+  "_state_valid": "_state_valid_12tss_gg_",
+  "_state_invalid": "_state_invalid_12tss_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_12tss_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_12tss_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_12tss_gg_"
 });
 
 var Input = /*#__PURE__*/function (_Component) {
@@ -92,12 +90,10 @@ var Input = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
       focused: false
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "inputRef", _react["default"].createRef());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseDownAddon", function (e) {
-      var _this$inputRef$curren;
-
       e.preventDefault();
-      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
+      _this.inputRef.current?.focus();
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerValueFocused", function (focused) {
       return function () {
@@ -112,19 +108,22 @@ var Input = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(Input, [{
     key: "getAddonProps",
     value: function getAddonProps() {
-      var size = this.asProps.size;
+      var disabled = this.asProps.disabled;
       return {
-        size: size,
+        disabled: disabled,
         onMouseDown: this.handleMouseDownAddon
       };
     }
   }, {
     key: "getValueProps",
     value: function getValueProps() {
-      var size = this.asProps.size;
+      var _this$asProps = this.asProps,
+          size = _this$asProps.size,
+          disabled = _this$asProps.disabled;
       return {
         ref: this.inputRef,
         size: size,
+        disabled: disabled,
         onFocus: this.bindHandlerValueFocused(true),
         onBlur: this.bindHandlerValueFocused(false)
       };
@@ -132,15 +131,15 @@ var Input = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref4;
 
       var SInput = _flexBox.Box;
       var SOutline = 'div';
-      var _this$asProps = this.asProps,
-          Children = _this$asProps.Children,
-          styles = _this$asProps.styles,
-          controlsLength = _this$asProps.controlsLength;
+      var _this$asProps2 = this.asProps,
+          Children = _this$asProps2.Children,
+          styles = _this$asProps2.styles,
+          controlsLength = _this$asProps2.controlsLength;
       var focused = this.state.focused;
       return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SInput, _ref4.cn("SInput", _objectSpread({}, (0, _core.assignProps)({
         "focused": focused
@@ -182,7 +181,7 @@ var Value = /*#__PURE__*/function (_Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _ref2 = this ? this.asProps : arguments[0],
+      var _ref2 = this.asProps,
           _ref5;
 
       var SValue = _flexBox.Box;
@@ -201,7 +200,7 @@ var Value = /*#__PURE__*/function (_Component2) {
 (0, _defineProperty2["default"])(Value, "enhance", [(0, _autoFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()]);
 
 function Addon(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref6;
 
   var SAddon = _flexBox.Box;

package/lib/cjs/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Input.js"],"names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","size","asProps","onMouseDown","handleMouseDownAddon","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","Box","SOutline","Children","styles","controlsLength","state","Component","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n  static displayName = 'Input';\n\n  static defaultProps = {\n    size: 'm',\n    state: 'normal',\n  };\n  static style = style;\n  static enhance = [neighborLocationEnhance()];\n\n  state = {\n    focused: false,\n  };\n\n  inputRef = React.createRef();\n\n  handleMouseDownAddon = (e) => {\n    e.preventDefault();\n    this.inputRef.current?.focus();\n  };\n\n  bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n  getAddonProps() {\n    const { size } = this.asProps;\n    return {\n      size,\n      onMouseDown: this.handleMouseDownAddon,\n    };\n  }\n\n  getValueProps() {\n    const { size } = this.asProps;\n    return {\n      ref: this.inputRef,\n      size,\n      onFocus: this.bindHandlerValueFocused(true),\n      onBlur: this.bindHandlerValueFocused(false),\n    };\n  }\n\n  render() {\n    const SInput = Root;\n    const SOutline = 'div';\n    const { Children, styles, controlsLength } = this.asProps;\n    const { focused } = this.state;\n\n    return sstyled(styles)(\n      <SInput render={Box} focused={focused}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SOutline />\n      </SInput>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    defaultValue: '',\n  };\n  static enhance = [autoFocusEnhance(), neighborLocationEnhance()];\n\n  uncontrolledProps() {\n    return {\n      value: (e) => e.target.value,\n    };\n  }\n\n  render() {\n    const SValue = Root;\n\n    return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n  }\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n  Addon,\n  Value,\n});\n"],"file":"Input.js"}
+{"version":3,"sources":["../../src/Input.jsx"],"names":["Input","focused","React","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","Box","SOutline","Children","styles","controlsLength","state","Component","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n  static displayName = 'Input';\n\n  static defaultProps = {\n    size: 'm',\n    state: 'normal',\n  };\n  static style = style;\n  static enhance = [neighborLocationEnhance()];\n\n  state = {\n    focused: false,\n  };\n\n  inputRef = React.createRef();\n\n  handleMouseDownAddon = (e) => {\n    e.preventDefault();\n    this.inputRef.current?.focus();\n  };\n\n  bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n  getAddonProps() {\n    const { disabled } = this.asProps;\n    return {\n      disabled,\n      onMouseDown: this.handleMouseDownAddon,\n    };\n  }\n\n  getValueProps() {\n    const { size, disabled } = this.asProps;\n    return {\n      ref: this.inputRef,\n      size,\n      disabled,\n      onFocus: this.bindHandlerValueFocused(true),\n      onBlur: this.bindHandlerValueFocused(false),\n    };\n  }\n\n  render() {\n    const SInput = Root;\n    const SOutline = 'div';\n    const { Children, styles, controlsLength } = this.asProps;\n    const { focused } = this.state;\n\n    return sstyled(styles)(\n      <SInput render={Box} focused={focused}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SOutline />\n      </SInput>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    defaultValue: '',\n  };\n  static enhance = [autoFocusEnhance(), neighborLocationEnhance()];\n\n  uncontrolledProps() {\n    return {\n      value: (e) => e.target.value,\n    };\n  }\n\n  render() {\n    const SValue = Root;\n\n    return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n  }\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n  Addon,\n  Value,\n});\n"],"file":"Input.js"}

package/lib/cjs/index.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { PropGetterFn } from '@semcore/core';
+import { IBoxProps } from '@semcore/flex-box';
+import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
+import { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';
+
+/* utils type */
+type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
+  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
+};
+type ReturnEl = React.ReactElement | null;
+/* utils type */
+
+export type InputSize = 'm' | 'l';
+
+export interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {
+  /**
+   * Sets the input and addons to the disabled state
+   * */
+  disabled?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
+  /**
+   * Sets the input state
+   * @default normal
+   */
+  state?: 'normal' | 'invalid' | 'valid';
+}
+
+export interface IInputValueProps
+  extends IBoxProps,
+    INeighborItemProps,
+    IWithAutoFocusEnhanceProps {
+  /**
+   * Input value
+   */
+  value?: string;
+  /**
+   * Handler for changing the value
+   */
+  onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
+  /**
+   * Sets the input to the disabled state
+   * */
+  disabled?: boolean;
+  /**
+   * Sets the input to the read-only state
+   * */
+  readOnly?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
+}
+
+export interface IInputAddonProps extends IBoxProps, INeighborItemProps {
+  /**
+   * Adds styles for interactive icons
+   */
+  interactive?: boolean;
+  /**
+   * Blocks the addon
+   * */
+  disabled?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
+}
+
+interface IInputCtx {
+  getValueProps: PropGetterFn;
+  getAddonProps: PropGetterFn;
+}
+
+declare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {
+  Value: <T>(props: IInputValueProps & T) => ReturnEl;
+  Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;
+};
+export default Input;

package/lib/cjs/style/input.shadow.css

@@ -11,12 +11,17 @@ SInput {
   box-sizing: border-box;
 
   & input:-webkit-autofill {
+    border-radius: var(--rounded-m);
     -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
 
     & ~ SOutline {
       background-color: rgb(250, 255, 189);
     }
   }
+
+  & SOutline {
+    border-radius: var(--rounded-m);
+  }
 }
 
 SValue {
@@ -27,9 +32,8 @@ SValue {
   padding: 0;
   border: none;
   box-sizing: border-box;
-  color: var(--gray20);
+  color: var(--gray-800);
   font-size: inherit;
-  line-height: 1.1;
   text-overflow: ellipsis;
   font-family: inherit;
   background: transparent;
@@ -39,11 +43,11 @@ SValue {
   }
 
   &::placeholder {
-    color: var(--gray70);
+    color: var(--gray-300);
   }
 
   &:read-only ~ SOutline {
-    background: var(--gray96);
+    background: var(--gray-50);
   }
 
   &:disabled {
@@ -74,16 +78,16 @@ SAddon {
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
+  padding: 0 8px;
   height: 100%;
-  color: var(--gray40);
+  color: var(--gray-300);
 }
 
 SAddon[interactive] {
-  color: var(--stone);
   cursor: pointer;
 
   &:hover {
-    color: color-mod(var(--stone) shade(12%));
+    color: var(--gray-400);
   }
 }
 
@@ -93,76 +97,21 @@ SAddon[disabled] {
   pointer-events: none;
 }
 
-SInput[size='s'] {
-  font-size: 10px;
-  height: 18px;
-
-  & SOutline {
-    border-radius: 2px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 1px;
-  }
-}
-
-SValue[size='s'],
-SAddon[size='s'] {
-  padding: 0 4px;
-}
-
 SInput[size='m'] {
-  font-size: 12px;
-  height: 26px;
-
-  & SOutline {
-    border-radius: 3px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 2px;
-  }
+  font-size: var(--fs-200);
+  height: var(--form-control-m);
 }
 
 SValue[size='m'],
-SAddon[size='m'] {
+SValue[size='l'] {
   padding: 0 8px;
 }
 
 SInput[size='l'] {
-  font-size: 14px;
-  height: 32px;
-
-  & SOutline {
-    border-radius: 4px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 3px;
-  }
-}
-
-SValue[size='l'],
-SAddon[size='l'] {
-  padding: 0 8px;
-}
-
-SInput[size='xl'] {
-  font-size: 16px;
-  height: 42px;
-
-  & SOutline {
-    border-radius: 5px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 4px;
-  }
-}
-
-SValue[size='xl'],
-SAddon[size='xl'] {
-  padding: 0 12px;
+  font-size: var(--fs-300);
+  height: var(--form-control-l);
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 SInput[focused] {
@@ -171,32 +120,32 @@ SInput[focused] {
 
 SInput[state='normal'] {
   & SOutline {
-    border-color: var(--stone);
+    border-color: var(--gray-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--light-blue);
-    box-shadow: var(--keyborad-focus);
+    border-color: var(--blue-400);
+    box-shadow: var(--keyboard-focus);
   }
 }
 SInput[state='valid'] {
   & SOutline {
-    border-color: var(--green);
+    border-color: var(--green-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--green);
-    box-shadow: 0 0 0 3px color-mod(var(--green) a(30%));
+    border-color: var(--green-400);
+    box-shadow: var(--keyboard-focus-valid);
   }
 }
 SInput[state='invalid'] {
   & SOutline {
-    border-color: var(--orange);
+    border-color: var(--red-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--orange);
-    box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
+    border-color: var(--red-400);
+    box-shadow: var(--keyboard-focus-invalid);
   }
 }
 
@@ -220,6 +169,14 @@ SInput[neighborLocation='left'] {
   }
 }
 
+SAddon[neighborLocation='right'] {
+  padding-right: 8px;
+}
+
+SAddon[neighborLocation='left'] {
+  padding-left: 8px;
+}
+
 SValue[neighborLocation='right'] {
   padding-right: 0;
 }

package/lib/es6/Input.js

@@ -29,28 +29,26 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SInput_1hvq5_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1hvq5_gg_ input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1hvq5_gg_ input:-webkit-autofill~.___SOutline_1hvq5_gg_{background-color:#faffbd}.___SValue_1hvq5_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#333333;font-size:inherit;line-height:1.1;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1hvq5_gg_:focus{outline:none}.___SValue_1hvq5_gg_::-moz-placeholder{color:#aaaaaa}.___SValue_1hvq5_gg_:-ms-input-placeholder{color:#aaaaaa}.___SValue_1hvq5_gg_::placeholder{color:#aaaaaa}.___SValue_1hvq5_gg_:-moz-read-only~.___SOutline_1hvq5_gg_{background:#f5f5f5}.___SValue_1hvq5_gg_:read-only~.___SOutline_1hvq5_gg_{background:#f5f5f5}.___SValue_1hvq5_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_1hvq5_gg_:disabled~.___SOutline_1hvq5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1hvq5_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;z-index:-1;background:#fff}.___SAddon_1hvq5_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;height:100%;color:#666666}.___SAddon_1hvq5_gg_.__interactive_1hvq5_gg_{color:#a6b0b3;cursor:pointer}.___SAddon_1hvq5_gg_.__interactive_1hvq5_gg_:hover{color:#929b9e}.___SAddon_1hvq5_gg_.__disabled_1hvq5_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1hvq5_gg_._size_s_1hvq5_gg_{font-size:10px;height:18px}.___SInput_1hvq5_gg_._size_s_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:2px}.___SInput_1hvq5_gg_._size_s_1hvq5_gg_ input:-webkit-autofill{border-radius:1px}.___SAddon_1hvq5_gg_._size_s_1hvq5_gg_,.___SValue_1hvq5_gg_._size_s_1hvq5_gg_{padding:0 4px}.___SInput_1hvq5_gg_._size_m_1hvq5_gg_{font-size:12px;height:26px}.___SInput_1hvq5_gg_._size_m_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:3px}.___SInput_1hvq5_gg_._size_m_1hvq5_gg_ input:-webkit-autofill{border-radius:2px}.___SAddon_1hvq5_gg_._size_m_1hvq5_gg_,.___SValue_1hvq5_gg_._size_m_1hvq5_gg_{padding:0 8px}.___SInput_1hvq5_gg_._size_l_1hvq5_gg_{font-size:14px;height:32px}.___SInput_1hvq5_gg_._size_l_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:4px}.___SInput_1hvq5_gg_._size_l_1hvq5_gg_ input:-webkit-autofill{border-radius:3px}.___SAddon_1hvq5_gg_._size_l_1hvq5_gg_,.___SValue_1hvq5_gg_._size_l_1hvq5_gg_{padding:0 8px}.___SInput_1hvq5_gg_._size_xl_1hvq5_gg_{font-size:16px;height:42px}.___SInput_1hvq5_gg_._size_xl_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:5px}.___SInput_1hvq5_gg_._size_xl_1hvq5_gg_ input:-webkit-autofill{border-radius:4px}.___SAddon_1hvq5_gg_._size_xl_1hvq5_gg_,.___SValue_1hvq5_gg_._size_xl_1hvq5_gg_{padding:0 12px}.___SInput_1hvq5_gg_.__focused_1hvq5_gg_{z-index:1}.___SInput_1hvq5_gg_._state_normal_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-color:#a6b0b3}.___SInput_1hvq5_gg_._state_normal_1hvq5_gg_ .___SValue_1hvq5_gg_:focus~.___SOutline_1hvq5_gg_{border-color:#2b94e1;box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}.___SInput_1hvq5_gg_._state_valid_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-color:#4fae33}.___SInput_1hvq5_gg_._state_valid_1hvq5_gg_ .___SValue_1hvq5_gg_:focus~.___SOutline_1hvq5_gg_{border-color:#4fae33;box-shadow:0 0 0 3px rgba(79,174,51,.3)}.___SInput_1hvq5_gg_._state_invalid_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-color:#ff7f00}.___SInput_1hvq5_gg_._state_invalid_1hvq5_gg_ .___SValue_1hvq5_gg_:focus~.___SOutline_1hvq5_gg_{border-color:#ff7f00;box-shadow:0 0 0 3px rgba(255,127,0,.3)}.___SInput_1hvq5_gg_._neighborLocation_right_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1hvq5_gg_._neighborLocation_both_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-radius:0;border-left:none}.___SInput_1hvq5_gg_._neighborLocation_left_1hvq5_gg_ .___SOutline_1hvq5_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1hvq5_gg_._neighborLocation_right_1hvq5_gg_{padding-right:0}.___SValue_1hvq5_gg_._neighborLocation_both_1hvq5_gg_{padding-left:0;padding-right:0}.___SValue_1hvq5_gg_._neighborLocation_left_1hvq5_gg_{padding-left:0}"
+".___SInput_12tss_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_12tss_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_12tss_gg_ input:-webkit-autofill~.___SOutline_12tss_gg_{background-color:#faffbd}.___SInput_12tss_gg_ .___SOutline_12tss_gg_{border-radius:6px}.___SValue_12tss_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_12tss_gg_:focus{outline:none}.___SValue_12tss_gg_::-moz-placeholder{color:#a9abb6}.___SValue_12tss_gg_:-ms-input-placeholder{color:#a9abb6}.___SValue_12tss_gg_::placeholder{color:#a9abb6}.___SValue_12tss_gg_:-moz-read-only~.___SOutline_12tss_gg_{background:#f4f5f9}.___SValue_12tss_gg_:read-only~.___SOutline_12tss_gg_{background:#f4f5f9}.___SValue_12tss_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.3}.___SValue_12tss_gg_:disabled~.___SOutline_12tss_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_12tss_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;z-index:-1;background:#fff}.___SAddon_12tss_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_12tss_gg_.__interactive_12tss_gg_{cursor:pointer}.___SAddon_12tss_gg_.__interactive_12tss_gg_:hover{color:#8a8e9b}.___SAddon_12tss_gg_.__disabled_12tss_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_12tss_gg_._size_m_12tss_gg_{font-size:14px;height:28px}.___SValue_12tss_gg_._size_l_12tss_gg_,.___SValue_12tss_gg_._size_m_12tss_gg_{padding:0 8px}.___SInput_12tss_gg_._size_l_12tss_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_12tss_gg_.__focused_12tss_gg_{z-index:1}.___SInput_12tss_gg_._state_normal_12tss_gg_ .___SOutline_12tss_gg_{border-color:#c4c7cf}.___SInput_12tss_gg_._state_normal_12tss_gg_ .___SValue_12tss_gg_:focus~.___SOutline_12tss_gg_{border-color:#008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SInput_12tss_gg_._state_valid_12tss_gg_ .___SOutline_12tss_gg_{border-color:#59ddaa}.___SInput_12tss_gg_._state_valid_12tss_gg_ .___SValue_12tss_gg_:focus~.___SOutline_12tss_gg_{border-color:#009f81;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.2)}.___SInput_12tss_gg_._state_invalid_12tss_gg_ .___SOutline_12tss_gg_{border-color:#ffaeb5}.___SInput_12tss_gg_._state_invalid_12tss_gg_ .___SValue_12tss_gg_:focus~.___SOutline_12tss_gg_{border-color:#ff4953;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.2)}.___SInput_12tss_gg_._neighborLocation_right_12tss_gg_ .___SOutline_12tss_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_12tss_gg_._neighborLocation_both_12tss_gg_ .___SOutline_12tss_gg_{border-radius:0;border-left:none}.___SInput_12tss_gg_._neighborLocation_left_12tss_gg_ .___SOutline_12tss_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SAddon_12tss_gg_._neighborLocation_right_12tss_gg_{padding-right:8px}.___SAddon_12tss_gg_._neighborLocation_left_12tss_gg_{padding-left:8px}.___SValue_12tss_gg_._neighborLocation_right_12tss_gg_{padding-right:0}.___SValue_12tss_gg_._neighborLocation_both_12tss_gg_{padding-left:0;padding-right:0}.___SValue_12tss_gg_._neighborLocation_left_12tss_gg_{padding-left:0}"
 /*__inner_css_end__*/
-, "oj6rjz_gg_")
+, "17wylmg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInput": "___SInput_1hvq5_gg_",
-  "__SOutline": "___SOutline_1hvq5_gg_",
-  "__SValue": "___SValue_1hvq5_gg_",
-  "__SAddon": "___SAddon_1hvq5_gg_",
-  "_interactive": "__interactive_1hvq5_gg_",
-  "_disabled": "__disabled_1hvq5_gg_",
-  "_size_s": "_size_s_1hvq5_gg_",
-  "_size_m": "_size_m_1hvq5_gg_",
-  "_size_l": "_size_l_1hvq5_gg_",
-  "_size_xl": "_size_xl_1hvq5_gg_",
-  "_focused": "__focused_1hvq5_gg_",
-  "_state_normal": "_state_normal_1hvq5_gg_",
-  "_state_valid": "_state_valid_1hvq5_gg_",
-  "_state_invalid": "_state_invalid_1hvq5_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1hvq5_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1hvq5_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1hvq5_gg_"
+  "__SInput": "___SInput_12tss_gg_",
+  "__SOutline": "___SOutline_12tss_gg_",
+  "__SValue": "___SValue_12tss_gg_",
+  "__SAddon": "___SAddon_12tss_gg_",
+  "_interactive": "__interactive_12tss_gg_",
+  "_disabled": "__disabled_12tss_gg_",
+  "_size_m": "_size_m_12tss_gg_",
+  "_size_l": "_size_l_12tss_gg_",
+  "_focused": "__focused_12tss_gg_",
+  "_state_normal": "_state_normal_12tss_gg_",
+  "_state_valid": "_state_valid_12tss_gg_",
+  "_state_invalid": "_state_invalid_12tss_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_12tss_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_12tss_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_12tss_gg_"
 });
 
 var Input = /*#__PURE__*/function (_Component) {
@@ -73,13 +71,11 @@ var Input = /*#__PURE__*/function (_Component) {
       focused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "inputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "inputRef", React.createRef());
 
     _defineProperty(_assertThisInitialized(_this), "handleMouseDownAddon", function (e) {
-      var _this$inputRef$curren;
-
       e.preventDefault();
-      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
+      _this.inputRef.current?.focus();
     });
 
     _defineProperty(_assertThisInitialized(_this), "bindHandlerValueFocused", function (focused) {
@@ -96,19 +92,22 @@ var Input = /*#__PURE__*/function (_Component) {
   _createClass(Input, [{
     key: "getAddonProps",
     value: function getAddonProps() {
-      var size = this.asProps.size;
+      var disabled = this.asProps.disabled;
       return {
-        size: size,
+        disabled: disabled,
         onMouseDown: this.handleMouseDownAddon
       };
     }
   }, {
     key: "getValueProps",
     value: function getValueProps() {
-      var size = this.asProps.size;
+      var _this$asProps = this.asProps,
+          size = _this$asProps.size,
+          disabled = _this$asProps.disabled;
       return {
         ref: this.inputRef,
         size: size,
+        disabled: disabled,
         onFocus: this.bindHandlerValueFocused(true),
         onBlur: this.bindHandlerValueFocused(false)
       };
@@ -116,15 +115,15 @@ var Input = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref4;
 
       var SInput = Box;
       var SOutline = 'div';
-      var _this$asProps = this.asProps,
-          Children = _this$asProps.Children,
-          styles = _this$asProps.styles,
-          controlsLength = _this$asProps.controlsLength;
+      var _this$asProps2 = this.asProps,
+          Children = _this$asProps2.Children,
+          styles = _this$asProps2.styles,
+          controlsLength = _this$asProps2.controlsLength;
       var focused = this.state.focused;
       return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, _assignProps({
         "focused": focused
@@ -171,7 +170,7 @@ var Value = /*#__PURE__*/function (_Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _ref2 = this ? this.asProps : arguments[0],
+      var _ref2 = this.asProps,
           _ref5;
 
       var SValue = Box;
@@ -192,7 +191,7 @@ _defineProperty(Value, "defaultProps", {
 _defineProperty(Value, "enhance", [autoFocusEnhance(), neighborLocationEnhance()]);
 
 function Addon(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref6;
 
   var SAddon = Box;

package/lib/es6/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Input.js"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","autoFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","size","asProps","onMouseDown","handleMouseDownAddon","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","controlsLength","state","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n  static displayName = 'Input';\n\n  static defaultProps = {\n    size: 'm',\n    state: 'normal',\n  };\n  static style = style;\n  static enhance = [neighborLocationEnhance()];\n\n  state = {\n    focused: false,\n  };\n\n  inputRef = React.createRef();\n\n  handleMouseDownAddon = (e) => {\n    e.preventDefault();\n    this.inputRef.current?.focus();\n  };\n\n  bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n  getAddonProps() {\n    const { size } = this.asProps;\n    return {\n      size,\n      onMouseDown: this.handleMouseDownAddon,\n    };\n  }\n\n  getValueProps() {\n    const { size } = this.asProps;\n    return {\n      ref: this.inputRef,\n      size,\n      onFocus: this.bindHandlerValueFocused(true),\n      onBlur: this.bindHandlerValueFocused(false),\n    };\n  }\n\n  render() {\n    const SInput = Root;\n    const SOutline = 'div';\n    const { Children, styles, controlsLength } = this.asProps;\n    const { focused } = this.state;\n\n    return sstyled(styles)(\n      <SInput render={Box} focused={focused}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SOutline />\n      </SInput>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    defaultValue: '',\n  };\n  static enhance = [autoFocusEnhance(), neighborLocationEnhance()];\n\n  uncontrolledProps() {\n    return {\n      value: (e) => e.target.value,\n    };\n  }\n\n  render() {\n    const SValue = Root;\n\n    return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n  }\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n  Addon,\n  Value,\n});\n"],"file":"Input.js"}
+{"version":3,"sources":["../../src/Input.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","autoFocusEnhance","Input","focused","createRef","e","preventDefault","inputRef","current","focus","setState","disabled","asProps","onMouseDown","handleMouseDownAddon","size","ref","onFocus","bindHandlerValueFocused","onBlur","SInput","SOutline","Children","styles","controlsLength","state","style","Value","value","target","SValue","defaultValue","Addon","props","SAddon","enhance"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,gBAAP,IAA2BC,uBAA3B,QAA0D,4BAA1D;AACA,OAAOC,gBAAP,MAA6B,8CAA7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMC,K;;;;;;;;;;;;;;;;4DAUI;AACNC,MAAAA,OAAO,EAAE;AADH,K;;+DAIGV,KAAK,CAACW,SAAN,E;;2EAEY,UAACC,CAAD,EAAO;AAC5BA,MAAAA,CAAC,CAACC,cAAF;AACA,YAAKC,QAAL,CAAcC,OAAd,EAAuBC,KAAvB;AACD,K;;8EAEyB,UAACN,OAAD;AAAA,aAAa;AAAA,eAAM,MAAKO,QAAL,CAAc;AAAEP,UAAAA,OAAO,EAAPA;AAAF,SAAd,CAAN;AAAA,OAAb;AAAA,K;;;;;;;WAE1B,yBAAgB;AACd,UAAQQ,QAAR,GAAqB,KAAKC,OAA1B,CAAQD,QAAR;AACA,aAAO;AACLA,QAAAA,QAAQ,EAARA,QADK;AAELE,QAAAA,WAAW,EAAE,KAAKC;AAFb,OAAP;AAID;;;WAED,yBAAgB;AACd,0BAA2B,KAAKF,OAAhC;AAAA,UAAQG,IAAR,iBAAQA,IAAR;AAAA,UAAcJ,QAAd,iBAAcA,QAAd;AACA,aAAO;AACLK,QAAAA,GAAG,EAAE,KAAKT,QADL;AAELQ,QAAAA,IAAI,EAAJA,IAFK;AAGLJ,QAAAA,QAAQ,EAARA,QAHK;AAILM,QAAAA,OAAO,EAAE,KAAKC,uBAAL,CAA6B,IAA7B,CAJJ;AAKLC,QAAAA,MAAM,EAAE,KAAKD,uBAAL,CAA6B,KAA7B;AALH,OAAP;AAOD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAME,MAAM,GAMMtB,GANlB;AACA,UAAMuB,QAAQ,GAAG,KAAjB;AACA,2BAA6C,KAAKT,OAAlD;AAAA,UAAQU,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BC,cAA1B,kBAA0BA,cAA1B;AACA,UAAQrB,OAAR,GAAoB,KAAKsB,KAAzB,CAAQtB,OAAR;AAEA,qBAAOP,OAAO,CAAC2B,MAAD,CAAd,eACE,oBAAC,MAAD;AAAA,mBAA8BpB;AAA9B,+BACE,oBAAC,gBAAD;AAAA,0BAAkCqB;AAAlC,uBACE,oBAAC,QAAD,2BADF,CADF,eAIE,oBAAC,QAAD,2BAJF,CADF;AAQD;;;;EAxDiB7B,S;;gBAAdO,K,iBACiB,O;;gBADjBA,K,kBAGkB;AACpBa,EAAAA,IAAI,EAAE,GADc;AAEpBU,EAAAA,KAAK,EAAE;AAFa,C;;gBAHlBvB,K,WAOWwB,K;;gBAPXxB,K,aAQa,CAACF,uBAAuB,EAAxB,C;;IAmDb2B,K;;;;;;;;;;;;;WAMJ,6BAAoB;AAClB,aAAO;AACLC,QAAAA,KAAK,EAAE,eAACvB,CAAD;AAAA,iBAAOA,CAAC,CAACwB,MAAF,CAASD,KAAhB;AAAA;AADF,OAAP;AAGD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAME,MAAM,GAEwChC,GAFpD;AAEA,qBAAOF,OAAO,CAAC,KAAKgB,OAAL,CAAaW,MAAd,CAAd,eAAoC,oBAAC,MAAD;AAAA,eAAyB,OAAzB;AAAA,gBAAsC;AAAtC,kBAApC;AACD;;;;EAhBiB5B,S;;gBAAdgC,K,kBACkB;AACpBI,EAAAA,YAAY,EAAE;AADM,C;;gBADlBJ,K,aAIa,CAAC1B,gBAAgB,EAAjB,EAAqBD,uBAAuB,EAA5C,C;;AAenB,SAASgC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GACiCpC,GAD7C;AACA,iBAAOF,OAAO,CAACqC,KAAK,CAACV,MAAP,CAAd,eAA6B,oBAAC,MAAD,kEAA7B;AACD;;AAEDS,KAAK,CAACG,OAAN,GAAgB,CAACnC,uBAAuB,EAAxB,CAAhB;AAEA,eAAeN,eAAe,CAACQ,KAAD,EAAQ;AACpC8B,EAAAA,KAAK,EAALA,KADoC;AAEpCL,EAAAA,KAAK,EAALA;AAFoC,CAAR,CAA9B","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport autoFocusEnhance from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\nimport style from './style/input.shadow.css';\n\nclass Input extends Component {\n  static displayName = 'Input';\n\n  static defaultProps = {\n    size: 'm',\n    state: 'normal',\n  };\n  static style = style;\n  static enhance = [neighborLocationEnhance()];\n\n  state = {\n    focused: false,\n  };\n\n  inputRef = React.createRef();\n\n  handleMouseDownAddon = (e) => {\n    e.preventDefault();\n    this.inputRef.current?.focus();\n  };\n\n  bindHandlerValueFocused = (focused) => () => this.setState({ focused });\n\n  getAddonProps() {\n    const { disabled } = this.asProps;\n    return {\n      disabled,\n      onMouseDown: this.handleMouseDownAddon,\n    };\n  }\n\n  getValueProps() {\n    const { size, disabled } = this.asProps;\n    return {\n      ref: this.inputRef,\n      size,\n      disabled,\n      onFocus: this.bindHandlerValueFocused(true),\n      onBlur: this.bindHandlerValueFocused(false),\n    };\n  }\n\n  render() {\n    const SInput = Root;\n    const SOutline = 'div';\n    const { Children, styles, controlsLength } = this.asProps;\n    const { focused } = this.state;\n\n    return sstyled(styles)(\n      <SInput render={Box} focused={focused}>\n        <NeighborLocation controlsLength={controlsLength}>\n          <Children />\n        </NeighborLocation>\n        <SOutline />\n      </SInput>,\n    );\n  }\n}\n\nclass Value extends Component {\n  static defaultProps = {\n    defaultValue: '',\n  };\n  static enhance = [autoFocusEnhance(), neighborLocationEnhance()];\n\n  uncontrolledProps() {\n    return {\n      value: (e) => e.target.value,\n    };\n  }\n\n  render() {\n    const SValue = Root;\n\n    return sstyled(this.asProps.styles)(<SValue render={Box} tag=\"input\" type=\"text\" />);\n  }\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nAddon.enhance = [neighborLocationEnhance()];\n\nexport default createComponent(Input, {\n  Addon,\n  Value,\n});\n"],"file":"Input.js"}

package/lib/es6/index.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { PropGetterFn } from '@semcore/core';
+import { IBoxProps } from '@semcore/flex-box';
+import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
+import { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';
+
+/* utils type */
+type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
+  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
+};
+type ReturnEl = React.ReactElement | null;
+/* utils type */
+
+export type InputSize = 'm' | 'l';
+
+export interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {
+  /**
+   * Sets the input and addons to the disabled state
+   * */
+  disabled?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
+  /**
+   * Sets the input state
+   * @default normal
+   */
+  state?: 'normal' | 'invalid' | 'valid';
+}
+
+export interface IInputValueProps
+  extends IBoxProps,
+    INeighborItemProps,
+    IWithAutoFocusEnhanceProps {
+  /**
+   * Input value
+   */
+  value?: string;
+  /**
+   * Handler for changing the value
+   */
+  onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
+  /**
+   * Sets the input to the disabled state
+   * */
+  disabled?: boolean;
+  /**
+   * Sets the input to the read-only state
+   * */
+  readOnly?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
+}
+
+export interface IInputAddonProps extends IBoxProps, INeighborItemProps {
+  /**
+   * Adds styles for interactive icons
+   */
+  interactive?: boolean;
+  /**
+   * Blocks the addon
+   * */
+  disabled?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
+}
+
+interface IInputCtx {
+  getValueProps: PropGetterFn;
+  getAddonProps: PropGetterFn;
+}
+
+declare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {
+  Value: <T>(props: IInputValueProps & T) => ReturnEl;
+  Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;
+};
+export default Input;

package/lib/es6/style/input.shadow.css

@@ -11,12 +11,17 @@ SInput {
   box-sizing: border-box;
 
   & input:-webkit-autofill {
+    border-radius: var(--rounded-m);
     -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
 
     & ~ SOutline {
       background-color: rgb(250, 255, 189);
     }
   }
+
+  & SOutline {
+    border-radius: var(--rounded-m);
+  }
 }
 
 SValue {
@@ -27,9 +32,8 @@ SValue {
   padding: 0;
   border: none;
   box-sizing: border-box;
-  color: var(--gray20);
+  color: var(--gray-800);
   font-size: inherit;
-  line-height: 1.1;
   text-overflow: ellipsis;
   font-family: inherit;
   background: transparent;
@@ -39,11 +43,11 @@ SValue {
   }
 
   &::placeholder {
-    color: var(--gray70);
+    color: var(--gray-300);
   }
 
   &:read-only ~ SOutline {
-    background: var(--gray96);
+    background: var(--gray-50);
   }
 
   &:disabled {
@@ -74,16 +78,16 @@ SAddon {
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
+  padding: 0 8px;
   height: 100%;
-  color: var(--gray40);
+  color: var(--gray-300);
 }
 
 SAddon[interactive] {
-  color: var(--stone);
   cursor: pointer;
 
   &:hover {
-    color: color-mod(var(--stone) shade(12%));
+    color: var(--gray-400);
   }
 }
 
@@ -93,76 +97,21 @@ SAddon[disabled] {
   pointer-events: none;
 }
 
-SInput[size='s'] {
-  font-size: 10px;
-  height: 18px;
-
-  & SOutline {
-    border-radius: 2px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 1px;
-  }
-}
-
-SValue[size='s'],
-SAddon[size='s'] {
-  padding: 0 4px;
-}
-
 SInput[size='m'] {
-  font-size: 12px;
-  height: 26px;
-
-  & SOutline {
-    border-radius: 3px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 2px;
-  }
+  font-size: var(--fs-200);
+  height: var(--form-control-m);
 }
 
 SValue[size='m'],
-SAddon[size='m'] {
+SValue[size='l'] {
   padding: 0 8px;
 }
 
 SInput[size='l'] {
-  font-size: 14px;
-  height: 32px;
-
-  & SOutline {
-    border-radius: 4px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 3px;
-  }
-}
-
-SValue[size='l'],
-SAddon[size='l'] {
-  padding: 0 8px;
-}
-
-SInput[size='xl'] {
-  font-size: 16px;
-  height: 42px;
-
-  & SOutline {
-    border-radius: 5px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 4px;
-  }
-}
-
-SValue[size='xl'],
-SAddon[size='xl'] {
-  padding: 0 12px;
+  font-size: var(--fs-300);
+  height: var(--form-control-l);
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 SInput[focused] {
@@ -171,32 +120,32 @@ SInput[focused] {
 
 SInput[state='normal'] {
   & SOutline {
-    border-color: var(--stone);
+    border-color: var(--gray-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--light-blue);
-    box-shadow: var(--keyborad-focus);
+    border-color: var(--blue-400);
+    box-shadow: var(--keyboard-focus);
   }
 }
 SInput[state='valid'] {
   & SOutline {
-    border-color: var(--green);
+    border-color: var(--green-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--green);
-    box-shadow: 0 0 0 3px color-mod(var(--green) a(30%));
+    border-color: var(--green-400);
+    box-shadow: var(--keyboard-focus-valid);
   }
 }
 SInput[state='invalid'] {
   & SOutline {
-    border-color: var(--orange);
+    border-color: var(--red-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--orange);
-    box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
+    border-color: var(--red-400);
+    box-shadow: var(--keyboard-focus-invalid);
   }
 }
 
@@ -220,6 +169,14 @@ SInput[neighborLocation='left'] {
   }
 }
 
+SAddon[neighborLocation='right'] {
+  padding-right: 8px;
+}
+
+SAddon[neighborLocation='left'] {
+  padding-left: 8px;
+}
+
 SValue[neighborLocation='right'] {
   padding-right: 0;
 }

package/lib/types/index.d.ts

@@ -11,9 +11,13 @@ type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
 type ReturnEl = React.ReactElement | null;
 /* utils type */
 
-export type InputSize = 's' | 'm' | 'l' | 'xl';
+export type InputSize = 'm' | 'l';
 
 export interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {
+  /**
+   * Sets the input and addons to the disabled state
+   * */
+  disabled?: boolean;
   /**
    * Input size
    * @default m
@@ -31,14 +35,26 @@ export interface IInputValueProps
     INeighborItemProps,
     IWithAutoFocusEnhanceProps {
   /**
-   * Input size
-   * @default m
+   * Input value
    */
-  size?: InputSize;
+  value?: string;
   /**
    * Handler for changing the value
    */
   onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
+  /**
+   * Sets the input to the disabled state
+   * */
+  disabled?: boolean;
+  /**
+   * Sets the input to the read-only state
+   * */
+  readOnly?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
 }
 
 export interface IInputAddonProps extends IBoxProps, INeighborItemProps {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/input",
   "description": "SEMRush Input Component",
-  "version": "2.2.4",
+  "version": "3.0.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -28,5 +28,9 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/input"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@semcore/icon": "*"
   }
 }

package/src/{Input.js → Input.jsx}

@@ -30,18 +30,19 @@ class Input extends Component {
   bindHandlerValueFocused = (focused) => () => this.setState({ focused });
 
   getAddonProps() {
-    const { size } = this.asProps;
+    const { disabled } = this.asProps;
     return {
-      size,
+      disabled,
       onMouseDown: this.handleMouseDownAddon,
     };
   }
 
   getValueProps() {
-    const { size } = this.asProps;
+    const { size, disabled } = this.asProps;
     return {
       ref: this.inputRef,
       size,
+      disabled,
       onFocus: this.bindHandlerValueFocused(true),
       onBlur: this.bindHandlerValueFocused(false),
     };

package/src/index.d.ts

@@ -11,9 +11,13 @@ type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
 type ReturnEl = React.ReactElement | null;
 /* utils type */
 
-export type InputSize = 's' | 'm' | 'l' | 'xl';
+export type InputSize = 'm' | 'l';
 
 export interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {
+  /**
+   * Sets the input and addons to the disabled state
+   * */
+  disabled?: boolean;
   /**
    * Input size
    * @default m
@@ -31,14 +35,26 @@ export interface IInputValueProps
     INeighborItemProps,
     IWithAutoFocusEnhanceProps {
   /**
-   * Input size
-   * @default m
+   * Input value
    */
-  size?: InputSize;
+  value?: string;
   /**
    * Handler for changing the value
    */
   onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
+  /**
+   * Sets the input to the disabled state
+   * */
+  disabled?: boolean;
+  /**
+   * Sets the input to the read-only state
+   * */
+  readOnly?: boolean;
+  /**
+   * Input size
+   * @default m
+   */
+  size?: InputSize;
 }
 
 export interface IInputAddonProps extends IBoxProps, INeighborItemProps {

package/src/style/input.shadow.css

@@ -11,12 +11,17 @@ SInput {
   box-sizing: border-box;
 
   & input:-webkit-autofill {
+    border-radius: var(--rounded-m);
     -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
 
     & ~ SOutline {
       background-color: rgb(250, 255, 189);
     }
   }
+
+  & SOutline {
+    border-radius: var(--rounded-m);
+  }
 }
 
 SValue {
@@ -27,9 +32,8 @@ SValue {
   padding: 0;
   border: none;
   box-sizing: border-box;
-  color: var(--gray20);
+  color: var(--gray-800);
   font-size: inherit;
-  line-height: 1.1;
   text-overflow: ellipsis;
   font-family: inherit;
   background: transparent;
@@ -39,11 +43,11 @@ SValue {
   }
 
   &::placeholder {
-    color: var(--gray70);
+    color: var(--gray-300);
   }
 
   &:read-only ~ SOutline {
-    background: var(--gray96);
+    background: var(--gray-50);
   }
 
   &:disabled {
@@ -74,16 +78,16 @@ SAddon {
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
+  padding: 0 8px;
   height: 100%;
-  color: var(--gray40);
+  color: var(--gray-300);
 }
 
 SAddon[interactive] {
-  color: var(--stone);
   cursor: pointer;
 
   &:hover {
-    color: color-mod(var(--stone) shade(12%));
+    color: var(--gray-400);
   }
 }
 
@@ -93,76 +97,21 @@ SAddon[disabled] {
   pointer-events: none;
 }
 
-SInput[size='s'] {
-  font-size: 10px;
-  height: 18px;
-
-  & SOutline {
-    border-radius: 2px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 1px;
-  }
-}
-
-SValue[size='s'],
-SAddon[size='s'] {
-  padding: 0 4px;
-}
-
 SInput[size='m'] {
-  font-size: 12px;
-  height: 26px;
-
-  & SOutline {
-    border-radius: 3px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 2px;
-  }
+  font-size: var(--fs-200);
+  height: var(--form-control-m);
 }
 
 SValue[size='m'],
-SAddon[size='m'] {
+SValue[size='l'] {
   padding: 0 8px;
 }
 
 SInput[size='l'] {
-  font-size: 14px;
-  height: 32px;
-
-  & SOutline {
-    border-radius: 4px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 3px;
-  }
-}
-
-SValue[size='l'],
-SAddon[size='l'] {
-  padding: 0 8px;
-}
-
-SInput[size='xl'] {
-  font-size: 16px;
-  height: 42px;
-
-  & SOutline {
-    border-radius: 5px;
-  }
-
-  & input:-webkit-autofill {
-    border-radius: 4px;
-  }
-}
-
-SValue[size='xl'],
-SAddon[size='xl'] {
-  padding: 0 12px;
+  font-size: var(--fs-300);
+  height: var(--form-control-l);
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 SInput[focused] {
@@ -171,32 +120,32 @@ SInput[focused] {
 
 SInput[state='normal'] {
   & SOutline {
-    border-color: var(--stone);
+    border-color: var(--gray-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--light-blue);
-    box-shadow: var(--keyborad-focus);
+    border-color: var(--blue-400);
+    box-shadow: var(--keyboard-focus);
   }
 }
 SInput[state='valid'] {
   & SOutline {
-    border-color: var(--green);
+    border-color: var(--green-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--green);
-    box-shadow: 0 0 0 3px color-mod(var(--green) a(30%));
+    border-color: var(--green-400);
+    box-shadow: var(--keyboard-focus-valid);
   }
 }
 SInput[state='invalid'] {
   & SOutline {
-    border-color: var(--orange);
+    border-color: var(--red-200);
   }
 
   & SValue:focus ~ SOutline {
-    border-color: var(--orange);
-    box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
+    border-color: var(--red-400);
+    box-shadow: var(--keyboard-focus-invalid);
   }
 }
 
@@ -220,6 +169,14 @@ SInput[neighborLocation='left'] {
   }
 }
 
+SAddon[neighborLocation='right'] {
+  padding-right: 8px;
+}
+
+SAddon[neighborLocation='left'] {
+  padding-left: 8px;
+}
+
 SValue[neighborLocation='right'] {
   padding-right: 0;
 }