intelicoreact 1.3.22 → 1.3.24

package/dist/Atomic/FormElements/InputMask3/InputMask3.js

@@ -7,21 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = InputMask3;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactFeather = require("react-feather");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _DynamicIcon = _interopRequireDefault(require("../../UI/DynamicIcon/DynamicIcon"));
+var _reactFeather = require("react-feather");
+var _index = require("../../../Constants/index.constants");
+var _utils = require("../../../Functions/utils");
 var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
+var _DynamicIcon = _interopRequireDefault(require("../../UI/DynamicIcon/DynamicIcon"));
 var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
-var _index = require("../../../Constants/index.constants");
 var _config = require("./config");
 var _functions = require("./functions");
-var _utils = require("../../../Functions/utils");
 require("./InputMask3.scss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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; }
 function InputMask3() {
   let {
-    autocomplete = 'off',
+    autocomplete = "off",
     maskPattern,
     maskPatternPlaceholder,
     maskPlaceholder,
@@ -35,7 +35,7 @@ function InputMask3() {
     adaptTextCase,
     isUseAutoSelect = true,
     isLoading = false,
-    hiddenChar = '*',
+    hiddenChar = "*",
     withHiddenMode = false,
     maxHiddenIndex = -1,
     isValueHiddenDefault = false,
@@ -49,20 +49,20 @@ function InputMask3() {
     blinkErrors = true,
     blinkDuration = 100,
     showErrors = false,
-    className = '',
+    className = "",
     errors: customErrors = _config.DEFAULT_ERRORS,
-    error: customError = '',
+    error: customError = "",
     onChange: onChangeProp = () => {},
     onFocus: onFocusProp = () => {},
     onBlur: onBlurProp = () => {},
     onKeyDown: onKeyDownProp = () => {},
     onFilled: onFilledProp = () => {},
     showHint = false,
-    hintText = '',
-    hintClassName = '',
+    hintText = "",
+    hintClassName = "",
     isHintRight = true,
     isHintLeft = false,
-    hintPosition = 'right',
+    hintPosition = "right",
     hideMaskOnBlur = true,
     returnMaskedValue = false,
     name,
@@ -131,14 +131,14 @@ function InputMask3() {
   };
   const resetInnerValue = () => {
     setInnerValue(innerValue => innerValue.map(item => {
-      if (!item.isSpecialSymbol && item.char !== null) item.char = '';
+      if (!item.isSpecialSymbol && item.char !== null) item.char = "";
       return item;
     }));
   };
   const setValue = function (value) {
     var _maskPattern;
     let disableErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    value = value === null || value === undefined ? '' : value.toString();
+    value = value === null || value === undefined ? "" : value.toString();
     resetInnerValue();
     const staticLength = maskPattern.length - maxEditableIndex;
     if (value.length > maxEditableIndex) value = value.slice(0, value.length - staticLength);else if (maxEditableIndex !== ((_maskPattern = maskPattern) === null || _maskPattern === void 0 ? void 0 : _maskPattern.length) - 1) value = value.slice(0, maxEditableIndex);
@@ -188,12 +188,12 @@ function InputMask3() {
     const isSpecialSymbolMask = isSpecialSymbolMaskChar({
       char
     });
-    if (char === ' ') char = _config.SPACE_CHAR;
+    if (char === " ") char = _config.SPACE_CHAR;
     return {
-      char: isSpecialSymbolMask ? char : '',
+      char: isSpecialSymbolMask ? char : "",
       maskChar: char,
       isSpecialSymbol: isSpecialSymbolMask,
-      isCharSymbol: !isSpecialSymbol && char !== '' && isSpecialSymbolMask,
+      isCharSymbol: !isSpecialSymbol && char !== "" && isSpecialSymbolMask,
       ref: /*#__PURE__*/(0, _react.createRef)(),
       ...data
     };
@@ -230,14 +230,14 @@ function InputMask3() {
         char,
         isSpecialSymbol
       } = _ref2;
-      return char !== '' && !isSpecialSymbol ? i : result;
+      return char !== "" && !isSpecialSymbol ? i : result;
     }, 0);
     const value = innerValue.reduce((result, _ref3, i) => {
       let {
         char,
         isSpecialSymbol
       } = _ref3;
-      if (char !== '' && isValid && (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)) {
+      if (char !== "" && isValid && (!noLastTyppedCharIndexCheck ? i <= lastTyppedCharIndex : true)) {
         if (isValueHidden && !isSpecialSymbol && !noHide && (maxHiddenIndex === -1 || i <= maxHiddenIndex)) {
           result += hiddenChar;
         } else {
@@ -247,8 +247,8 @@ function InputMask3() {
         isValid = false;
       }
       return result;
-    }, '');
-    if (((_getClearInnerValueAs = getClearInnerValueAsString(value)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) === 0) return '';
+    }, "");
+    if (((_getClearInnerValueAs = getClearInnerValueAsString(value)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) === 0) return "";
     return value;
   };
   const getClearInnerValueAsString = valueProp => {
@@ -266,10 +266,10 @@ function InputMask3() {
     const clearValue = (_ref5 = valueProp !== null && valueProp !== void 0 ? valueProp : getInputValue({
       noLastTyppedCharIndexCheck: true,
       noHide: true
-    })) === null || _ref5 === void 0 || (_ref5 = _ref5.split('')) === null || _ref5 === void 0 ? void 0 : _ref5.reduce((resultStr, symbol, i) => {
+    })) === null || _ref5 === void 0 || (_ref5 = _ref5.split("")) === null || _ref5 === void 0 ? void 0 : _ref5.reduce((resultStr, symbol, i) => {
       if (!symbolsInfo[i].isSpecialSymbol || symbolsInfo[i].isCharSymbol) resultStr += symbol;
       return resultStr;
-    }, '');
+    }, "");
     return clearValue;
   };
   const inputValue = (0, _react.useMemo)(getInputValue, [innerValue, isValueHidden]);
@@ -421,13 +421,13 @@ function InputMask3() {
         value
       }
     } = e;
-    if (value.replace(/-/g, '').length < SSN.replace(/-/g, '').length) {
+    if (value.replace(/-/g, "").length < SSN.replace(/-/g, "").length) {
       const last = SSN.length - 1;
       setValue(SSN.slice(0, last));
       return;
     }
-    let numValue = value.replace(/\D/g, '');
-    let newSSN = '';
+    const numValue = value.replace(/\D/g, "");
+    let newSSN = "";
     const staticLength = maxHiddenIndex !== -1 ? maxHiddenIndex : (_maskPattern3 = maskPattern) === null || _maskPattern3 === void 0 ? void 0 : _maskPattern3.length;
     if (SSN.length > staticLength) {
       newSSN = SSN.slice(0, staticLength) + numValue;
@@ -499,8 +499,8 @@ function InputMask3() {
     setIsInitValue(false);
     setInnerValue([]);
     setMaskRendered(false);
-    if (!maskPattern) maskPattern = '';
-    maskPattern.split('').map((char, id) => {
+    if (!maskPattern) maskPattern = "";
+    maskPattern.split("").map((char, id) => {
       addInnerValueChar({
         char,
         data: {
@@ -515,7 +515,7 @@ function InputMask3() {
     setMaskRendered(true);
   }, [maskPattern]);
   (0, _react.useEffect)(() => {
-    if (isMaskRendered && !isInitValue || isInitValue && ![getInputValue(), getClearInnerValueAsString()].includes(value) && value !== '') {
+    if (isMaskRendered && !isInitValue || isInitValue && ![getInputValue(), getClearInnerValueAsString()].includes(value) && value !== "") {
       setValue(value);
       setIsInitValue(true);
     }
@@ -547,14 +547,14 @@ function InputMask3() {
     }
   }, [blinkError]);
   (0, _react.useEffect)(() => {
-    setError(customError !== '');
-    setErrorMessage(customError === '' ? errors.default : customError);
+    setError(customError !== "");
+    setErrorMessage(customError === "" ? errors.default : customError);
   }, [customError, isError]);
 
   /// --- RENDER ---///
 
   const renderChar = function (obj, i) {
-    let className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    let className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
     const {
       char,
       ref,
@@ -565,21 +565,21 @@ function InputMask3() {
       tabIndex: -1,
       key: i,
       "attr-char-id": i,
-      className: (0, _classnames.default)('input-mask_value_item', className, {
-        'input-mask_value_item--digit': (0, _functions.isDigitMaskChar)(obj.maskChar),
-        'input-mask_value_item--letter': (0, _functions.isLetterMaskChar)(obj.maskChar),
-        'input-mask_value_item--spec': obj.isSpecialSymbol,
-        'input-mask_value_item--hidden': i < inputValue.length
+      className: (0, _classnames.default)("input-mask_value_item", className, {
+        "input-mask_value_item--digit": (0, _functions.isDigitMaskChar)(obj.maskChar),
+        "input-mask_value_item--letter": (0, _functions.isLetterMaskChar)(obj.maskChar),
+        "input-mask_value_item--spec": obj.isSpecialSymbol,
+        "input-mask_value_item--hidden": i < inputValue.length
       }),
       ref: ref
-    }, !isFocused && hideMaskOnBlur && getClearInnerValueAsString().length === 0 ? _config.SPACE_CHAR : isSpecialSymbol ? maskChar : char === '' ? getPlaceholderCharByIndex(i) : char);
+    }, !isFocused && hideMaskOnBlur && getClearInnerValueAsString().length === 0 ? _config.SPACE_CHAR : isSpecialSymbol ? maskChar : char === "" ? getPlaceholderCharByIndex(i) : char);
   };
-  const renderMaskChar = (obj, i) => renderChar(obj, i, 'input-mask_value_item_mask-char');
+  const renderMaskChar = (obj, i) => renderChar(obj, i, "input-mask_value_item_mask-char");
   const renderValueChar = (obj, i) => isValueHidden && (maxHiddenIndex === -1 || i <= maxHiddenIndex) ? renderChar({
     ...obj,
     char: hiddenChar
-  }, i, 'input-mask_value_item_value-hidden-char') : renderChar(obj, i, 'input-mask_value_item_value-char');
-  const renderSpecialChar = (obj, i) => renderChar(obj, i, 'input-mask_value_item_spec-char');
+  }, i, "input-mask_value_item_value-hidden-char") : renderChar(obj, i, "input-mask_value_item_value-char");
+  const renderSpecialChar = (obj, i) => renderChar(obj, i, "input-mask_value_item_spec-char");
   const renderInputValue = () => {
     return innerValue.map((obj, i) => {
       const {
@@ -589,7 +589,7 @@ function InputMask3() {
       if (isSpecialSymbol) {
         return renderSpecialChar(obj, i);
       }
-      const isMaskItem = (() => char === '')();
+      const isMaskItem = (() => char === "")();
       return isMaskItem ? renderMaskChar(obj, i) : renderValueChar(obj, i);
     });
   };
@@ -602,7 +602,7 @@ function InputMask3() {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       tabIndex: disabled || isLoading ? -1 : 0,
       readOnly: disabled || isLoading,
-      name: name || fieldKey || id || testId || '',
+      name: name || fieldKey || id || testId || "",
       "data-testid": testId,
       className: "input-mask_input ".concat(className),
       ref: inputRef,
@@ -633,7 +633,7 @@ function InputMask3() {
       className: "formatted-raw-ssn-eye-holder",
       onClick: onHiddenToggle,
       "data-testid": "formattedRawSNN--eye--key-".concat(testId, "--container")
-    }, ' ', isValueHidden ? /*#__PURE__*/_react.default.createElement(_reactFeather.Eye, {
+    }, " ", isValueHidden ? /*#__PURE__*/_react.default.createElement(_reactFeather.Eye, {
       strokeWidth: 1,
       className: "password-icon"
     }) : /*#__PURE__*/_react.default.createElement(_reactFeather.EyeOff, {
@@ -658,26 +658,26 @@ function InputMask3() {
     }));
   };
   const renderIcon = function () {
-    let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'left';
+    let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "left";
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_icon input-mask_icon--".concat(position)
     }, DynamicIconComponent !== null && DynamicIconComponent !== void 0 ? DynamicIconComponent : icon);
   };
   const render = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('input-mask3_wrapper', className, {
-        'input-mask_error': isError
+      className: (0, _classnames.default)("input-mask3_wrapper", className, {
+        "input-mask_error": isError
       }, {
-        'input-mask_focus': isFocused
+        "input-mask_focus": isFocused
       }, {
-        'input-mask_blink-error': blinkError
+        "input-mask_blink-error": blinkError
       }, {
         disabled: disabled || isLoading
       }),
       tabIndex: -1
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "\n            input-mask\n            ".concat(isError ? 'input-mask_error' : '', "\n            ").concat(isFocused ? 'input-mask_focus' : '', "\n            ").concat(blinkError ? 'input-mask_blink-error' : '', "\n          ")
-    }, showHint && isHintLeft && renderHint(), isIconLeft && showIcon && renderIcon('left'), renderMask(), renderInput(), withHiddenMode && renderHideToggler(), isClearable && renderClearButton(), isIconRight && showIcon && renderIcon('right'), showHint && isHintRight && renderHint()), showErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+      className: "\n            input-mask\n            ".concat(isError ? "input-mask_error" : "", "\n            ").concat(isFocused ? "input-mask_focus" : "", "\n            ").concat(blinkError ? "input-mask_blink-error" : "", "\n          ")
+    }, showHint && isHintLeft && renderHint(), isIconLeft && showIcon && renderIcon("left"), renderMask(), renderInput(), withHiddenMode && renderHideToggler(), isClearable && renderClearButton(), isIconRight && showIcon && renderIcon("right"), showHint && isHintRight && renderHint()), showErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_error-text"
     }, errorMessage), isLoading && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
       size: "small"

package/dist/Atomic/FormElements/InputMask3/InputMask3.scss

@@ -6,6 +6,7 @@
 
 .input-mask3_wrapper {
   position: relative;
+
   display: block;
   // width: fit-content;
   width: 100%;
@@ -16,8 +17,8 @@
     position: relative;
 
     display: inline-flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
 
     box-sizing: border-box;
     width: 100%;
@@ -25,9 +26,9 @@
 
     cursor: text;
 
-    border: 1px solid #E2E5EC;
+    border: 1px solid #e2e5ec;
     border-radius: 4px;
-    background-color: #FFF;
+    background-color: #fff;
 
     &_input {
       position: absolute;
@@ -39,22 +40,22 @@
       height: 100%;
       padding: 8px;
 
+      font-size: 16px;
+
       color: #333;
       border: none;
       outline: none;
       background: rgb(0 0 0 / 0%);
-
-      font-size: 16px;
     }
 
     &_focus {
-      border-color: #6B81DD;
+      border-color: #6b81dd;
       filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
     }
 
     &_error,
     &_blink-error {
-      border-color: #DD6B6B;
+      border-color: #dd6b6b;
       filter: drop-shadow(0 0 4px rgb(255 93 93 / 50%));
     }
 
@@ -144,13 +145,13 @@
         margin: 0;
         padding: 0;
 
+        font-size: 16px;
+
         border: none;
         outline: none;
 
-        font-size: 16px;
-
         &_mask-char {
-          color: #9C9C9C;
+          color: #9c9c9c;
         }
 
         &_value-char {
@@ -171,9 +172,9 @@
   .input-mask_error-text {
     margin-top: 8px;
 
-    color: rgb(211 82 82);
-
     font-size: 12px;
+
+    color: rgb(211 82 82);
   }
 
   .lds-ring.lds-ring_small {

package/dist/Atomic/FormElements/InputMask3/config.js

@@ -1,17 +1,17 @@
 "use strict";
 
 module.exports = {
-  UPPERCASE_LETTER_MASK_CHAR: 'L',
-  LOWERCASE_LETTER_MASK_CHAR: 'l',
-  DIGIT_MASK_CHAR: 'D',
-  SPACE_CHAR: '\u00A0',
+  UPPERCASE_LETTER_MASK_CHAR: "L",
+  LOWERCASE_LETTER_MASK_CHAR: "l",
+  DIGIT_MASK_CHAR: "D",
+  SPACE_CHAR: "\u00A0",
   ANDROID_CHROME_TEXT_CODE: 229,
-  EXCLUDED_KEYS: ['Tab'],
+  EXCLUDED_KEYS: ["Tab"],
   DEFAULT_ERRORS: {
-    onlyLetter: 'Type letter',
-    onlyDigit: 'Type digit',
-    onlyUpperCase: 'Type letter in UpperCase',
-    onlyLowerCase: 'Type letter in LowerCase',
+    onlyLetter: "Type letter",
+    onlyDigit: "Type digit",
+    onlyUpperCase: "Type letter in UpperCase",
+    onlyLowerCase: "Type letter in LowerCase",
     default: null
   }
 };

package/dist/Atomic/FormElements/InputMask3/functions.js

@@ -7,13 +7,13 @@ exports.voidFn = exports.selectElementContents = exports.resetSelectionText = ex
 var _config = require("./config");
 const getSelectionText = () => {
   var _text;
-  let text = '';
+  let text = "";
   if (window.getSelection) {
     text = window.getSelection().toString();
-  } else if (document.selection && document.selection.type !== 'Control') {
+  } else if (document.selection && document.selection.type !== "Control") {
     text = document.selection.createRange().text;
   }
-  return (_text = text) === null || _text === void 0 ? void 0 : _text.replace(/\n/g, '');
+  return (_text = text) === null || _text === void 0 ? void 0 : _text.replace(/\n/g, "");
 };
 exports.getSelectionText = getSelectionText;
 const resetSelectionText = () => {
@@ -25,13 +25,13 @@ exports.resetSelectionText = resetSelectionText;
 const copyToClipboard = str => {
   if (navigator && navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(str);
   // eslint-disable-next-line prefer-promise-reject-errors
-  return Promise.reject('The Clipboard API is not available.');
+  return Promise.reject("The Clipboard API is not available.");
 };
 exports.copyToClipboard = copyToClipboard;
 const selectElementContents = function (el) {
   let startOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
   let endOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
-  let sel = window.getSelection();
+  const sel = window.getSelection();
   sel.selectAllChildren(el);
 };
 exports.selectElementContents = selectElementContents;
@@ -48,7 +48,7 @@ const isLowerCaseLetter = char => {
 };
 exports.isLowerCaseLetter = isLowerCaseLetter;
 const isDigit = char => {
-  return Boolean(Number.isInteger(parseInt(char)));
+  return Boolean(Number.isInteger(parseInt(char, 10)));
 };
 exports.isDigit = isDigit;
 const isDigitMaskChar = char => {
@@ -60,6 +60,7 @@ const isLetterMaskChar = char => {
 };
 exports.isLetterMaskChar = isLetterMaskChar;
 const voidFn = () => {
-  console.error('Void Function Called');
+  // eslint-disable-next-line no-console
+  console.error("Void Function Called");
 };
 exports.voidFn = voidFn;

package/dist/Atomic/FormElements/InputWithAction/InputWithAction.js

@@ -8,32 +8,30 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _Input = _interopRequireDefault(require("../Input/Input"));
-var _Button = _interopRequireDefault(require("../../UI/Button/Button"));
 var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
+var _Button = _interopRequireDefault(require("../../UI/Button/Button"));
+var _Input = _interopRequireDefault(require("../Input/Input"));
 require("./InputWithAction.scss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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; }
-/* eslint-disable react/display-name */
-
-const RC = 'input-with-action';
+const RC = "input-with-action";
 const InputWithAction = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     className,
     inputClassName,
     isHideAction = false,
-    actionLabel = 'Generate',
+    actionLabel = "Generate",
     doAction,
     actionContent,
     actionProps,
     isNoChangeAfterAction = false,
     isWithCopy = true,
-    copyLabel = 'Copy',
+    copyLabel = "Copy",
     copy,
     copyIcon,
     isNoCopyIcon,
     isCopyIconRight,
-    copyButtonVariant = 'dark-outline',
+    copyButtonVariant = "dark-outline",
     disabled,
     isInputZoneDisabled,
     isInputDisabled,
@@ -53,7 +51,7 @@ const InputWithAction = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       return result;
     },
     copy: () => {
-      if (typeof copy === 'function') copy(value);
+      if (typeof copy === "function") copy(value);
     }
   };
   (0, _react.useEffect)(() => {

package/dist/Atomic/FormElements/InputWithAction/InputWithAction.scss

@@ -1,95 +1,98 @@
 .input-with-action {
-  box-sizing: border-box;
-  width: 100%;
-
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: stretch;
 
+  box-sizing: border-box;
+  width: 100%;
+
   &__input-zone {
-    flex-grow: 1;
+    position: relative;
 
     display: flex;
+    flex-grow: 1;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
 
-    position: relative;
     padding: 0 10px;
-    border: 1px solid #E2E5EC;
+
+    border: 1px solid #e2e5ec;
     border-radius: 3px;
   }
 
   &__action-container {
-    height: 100%;
-    margin-left: 8px;
-
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
 
-    background-color: transparent;
-
+    height: 100%;
+    margin-left: 8px;
 
+    background-color: transparent;
   }
 
   &__action-label {
-    background-color: transparent;
+    font-family: "Roboto";
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
     cursor: pointer;
     user-select: none;
 
-    font-family: 'Roboto';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 20px;
-    color: #6B81DD;
+    color: #6b81dd;
+    background-color: transparent;
   }
 
   &__coppy-button {
     width: 63px;
     margin-left: 4px;
-    user-select: none
+
+    user-select: none;
   }
 
   &_disabled {
-    opacity: 0.5;
     pointer-events: none;
 
+    opacity: 0.5;
+
     .input-with-action__input-zone {
-      background-color: #F7F8FA;
+      background-color: #f7f8fa;
     }
 
     .input__wrap {
-      background-color: #F7F8FA;
+      background-color: #f7f8fa;
     }
   }
 
   &__input-zone_disabled {
-    opacity: 0.5;
     pointer-events: none;
-    background-color: #F7F8FA;
+
+    opacity: 0.5;
+    background-color: #f7f8fa;
 
     .input__wrap {
-      background-color: #F7F8FA;
+      background-color: #f7f8fa;
     }
   }
 
   &__input-zone_input-disabled {
-    background-color: #F7F8FA;
-    
+    background-color: #f7f8fa;
+
     .input-with-action__action-container {
-      background-color: rgba(#F7F8FA, 0.5);
+      background-color: rgba(#f7f8fa, 0.5);
     }
     .input__wrap {
-      background-color: #F7F8FA;
+      background-color: #f7f8fa;
     }
   }
 
   .input__wrap {
     flex-grow: 1;
+
     border: none;
 
     &_focus {
@@ -102,8 +105,8 @@
   }
 
   .lds-ring_small {
-    width: 20px !important;;
-    height: 20px !important;;
+    width: 20px !important;
+    height: 20px !important;
 
     & div {
       border-width: 3px !important;