@semcore/bulk-textarea 1.4.2-prerelease.0 → 1.5.0-prerelease.0

package/lib/cjs/components/InputField/InputField.js

@@ -1,84 +1,99 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InputField = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _index = require("@semcore/utils/lib/core/index");
 var _core = require("@semcore/core");
-var _react = _interopRequireDefault(require("react"));
-var _flexBox = require("@semcore/flex-box");
+var _baseComponents = require("@semcore/base-components");
+var _ariaProps = require("@semcore/core/lib/utils/ariaProps");
+var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
 var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
-var _ariaProps = require("@semcore/utils/lib/ariaProps");
-var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
 var _dompurify = _interopRequireDefault(require("dompurify"));
+var _react = _interopRequireDefault(require("react"));
 /*!__reshadow-styles__:"./inputField.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SInputField_1vc4q_gg_>div{box-sizing:content-box;outline:0;border-radius:var(--intergalactic-control-rounded, 6px);border-color:var(--intergalactic-border-primary, #c4c7cf);border-style:solid;border-width:1px;overflow:auto;position:relative;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);word-wrap:break-word;word-break:break-word;font-family:inherit}.___SInputField_1vc4q_gg_>div:empty::before{content:\"1. \"attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_1vc4q_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_1vc4q_gg_>div:nth-child(even)::before{content:counter(row)\".\";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SInputField_1vc4q_gg_>div>p{counter-increment:row;margin:0 0 var(--intergalactic-spacing-1x, 4px)0;position:relative;word-break:break-all;white-space:pre-wrap;padding:0 var(--intergalactic-spacing-5x, 20px)0 var(--intergalactic-spacing-4x, 16px)}.___SInputField_1vc4q_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_1vc4q_gg_>div>p:not(:empty)::before{content:counter(row)\".\";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px);position:absolute;left:0}.___SInputField_1vc4q_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_1vc4q_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_1vc4q_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_1vc4q_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_1vc4q_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_1vc4q_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_1vc4q_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_1vc4q_gg_.__showErrors_1vc4q_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0;top:var(--intergalactic-spacing-05x, 2px)}.___SInputField_1vc4q_gg_._size_m_1vc4q_gg_>div{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);min-height:calc(var(--minRows_1vc4q)*20px);max-height:calc((var(--maxRows_1vc4q) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_1vc4q_gg_._size_m_1vc4q_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_1vc4q_gg_._size_l_1vc4q_gg_>div:empty::before,.___SInputField_1vc4q_gg_._size_m_1vc4q_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_1vc4q_gg_._size_l_1vc4q_gg_>div{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);min-height:calc(var(--minRows_1vc4q)*24px);max-height:calc((var(--maxRows_1vc4q) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_1vc4q_gg_._size_l_1vc4q_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_1vc4q_gg_._state_normal_1vc4q_gg_:not(.__disabled_1vc4q_gg_)>div:focus:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SInputField_1vc4q_gg_._state_valid_1vc4q_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_1vc4q_gg_._state_valid_1vc4q_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInputField_1vc4q_gg_._state_invalid_1vc4q_gg_>div{border-color:var(--intergalactic-border-critical-active, #d1002f);background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);background-repeat:repeat-y}.___SInputField_1vc4q_gg_._state_invalid_1vc4q_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInputField_1vc4q_gg_.__readonly_1vc4q_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_1vc4q_gg_.__disabled_1vc4q_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}", /*__inner_css_end__*/"1vc4q_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SInputField_w0knh_gg_>div{box-sizing:content-box;outline:0;border-radius:var(--intergalactic-control-rounded, 6px);border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-style:solid;border-width:1px;overflow:auto;position:relative;background-color:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));word-wrap:break-word;word-break:break-word;font-family:inherit}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_>div{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInputField_w0knh_gg_>div{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInputField_w0knh_gg_>div:empty::before{content:\"1. \"attr(placeholder);color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457));position:absolute}.___SInputField_w0knh_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_w0knh_gg_>div:nth-child(even)::before{content:counter(row)\".\";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));margin-right:var(--intergalactic-spacing-1x, 4px)}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_>div:nth-child(even)::before{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SInputField_w0knh_gg_>div:nth-child(even)::before{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SInputField_w0knh_gg_>div>p{counter-increment:row;margin:0 0 var(--intergalactic-spacing-1x, 4px)0;position:relative;word-break:break-all;white-space:pre-wrap;padding:0 var(--intergalactic-spacing-5x, 20px)0 var(--intergalactic-spacing-4x, 16px)}.___SInputField_w0knh_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_w0knh_gg_>div>p:not(:empty)::before{content:counter(row)\".\";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));margin-right:var(--intergalactic-spacing-1x, 4px);position:absolute;left:0}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_>div>p:not(:empty)::before{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SInputField_w0knh_gg_>div>p:not(:empty)::before{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SInputField_w0knh_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, rgb(255, 235, 239))}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, rgb(255, 235, 239))}@media (color-gamut:p3){.___SInputField_w0knh_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, color(display-p3 1 0.92002 0.9342))}}}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+1000))>p{padding-left:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px))}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+1000))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+100)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_w0knh_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+1000)::before{padding-left:0}.___SInputField_w0knh_gg_.__showErrors_w0knh_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0;top:var(--intergalactic-spacing-05x, 2px)}.___SInputField_w0knh_gg_._size_m_w0knh_gg_>div{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);min-height:calc(var(--minRows_w0knh)*20px);max-height:calc((var(--maxRows_w0knh) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_w0knh_gg_._size_m_w0knh_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_w0knh_gg_._size_l_w0knh_gg_>div:empty::before,.___SInputField_w0knh_gg_._size_m_w0knh_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_w0knh_gg_._size_l_w0knh_gg_>div{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);min-height:calc(var(--minRows_w0knh)*24px);max-height:calc((var(--maxRows_w0knh) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_w0knh_gg_._size_l_w0knh_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_w0knh_gg_._state_normal_w0knh_gg_:not(.__disabled_w0knh_gg_)>div:focus{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386));outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_._state_normal_w0knh_gg_:not(.__disabled_w0knh_gg_)>div:focus{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___SInputField_w0knh_gg_._state_normal_w0knh_gg_:not(.__disabled_w0knh_gg_)>div:focus{border-color:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08334 0.73488 / 0.386))}}}.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div:focus{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154));outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div:focus{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div:focus{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}@supports (color:oklab(0%0 0%)){.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-valid-outline, rgb(0, 190, 142))}@media (color-gamut:p3){.___SInputField_w0knh_gg_._state_valid_w0knh_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9))}}}.___SInputField_w0knh_gg_._state_invalid_w0knh_gg_>div{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(255, 0, 4, 0.56) 0, rgba(255, 0, 4, 0.56) 1px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);background-repeat:repeat-y}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_._state_invalid_w0knh_gg_>div{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(255, 0, 4, 0.56) 0, rgba(255, 0, 4, 0.56) 1px, transparent 0, transparent 50%))}@media (color-gamut:p3){.___SInputField_w0knh_gg_._state_invalid_w0knh_gg_>div{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56));background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, color(display-p3 0.918 0.19866 0.14259 / 0.56) 0, color(display-p3 0.918 0.19866 0.14259 / 0.56) 1px, transparent 0, transparent 50%))}}}.___SInputField_w0knh_gg_._state_invalid_w0knh_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width}@supports (color:color(display-p3 0 0 0%)){.___SInputField_w0knh_gg_._state_invalid_w0knh_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInputField_w0knh_gg_._state_invalid_w0knh_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}@supports (color:oklab(0%0 0%)){.___SInputField_w0knh_gg_._state_invalid_w0knh_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652))}}.___SInputField_w0knh_gg_.__readonly_w0knh_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SInputField_w0knh_gg_.__disabled_w0knh_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.4)}", /*__inner_css_end__*/"w0knh_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SInputField": "___SInputField_1vc4q_gg_",
-  "_showErrors": "__showErrors_1vc4q_gg_",
-  "_readonly": "__readonly_1vc4q_gg_",
-  "_disabled": "__disabled_1vc4q_gg_",
-  "_size_m": "_size_m_1vc4q_gg_",
-  "--minRows": "--minRows_1vc4q",
-  "--maxRows": "--maxRows_1vc4q",
-  "_size_l": "_size_l_1vc4q_gg_",
-  "_state_normal": "_state_normal_1vc4q_gg_",
-  "_state_valid": "_state_valid_1vc4q_gg_",
-  "_state_invalid": "_state_invalid_1vc4q_gg_"
+  "__SInputField": "___SInputField_w0knh_gg_",
+  "_showErrors": "__showErrors_w0knh_gg_",
+  "_readonly": "__readonly_w0knh_gg_",
+  "_disabled": "__disabled_w0knh_gg_",
+  "_size_m": "_size_m_w0knh_gg_",
+  "--minRows": "--minRows_w0knh",
+  "--maxRows": "--maxRows_w0knh",
+  "_size_l": "_size_l_w0knh_gg_",
+  "_state_normal": "_state_normal_w0knh_gg_",
+  "_state_valid": "_state_valid_w0knh_gg_",
+  "_state_invalid": "_state_invalid_w0knh_gg_"
 });
-var InputField = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(InputField, _Component);
-  var _super = (0, _createSuper2["default"])(InputField);
+var InputField = exports.InputField = /*#__PURE__*/function (_Component) {
   function InputField(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, InputField);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "delimiter", '\n');
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "skipEmptyLines", true);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "emptyLineValue", '');
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "spaceLineValue", ' ');
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "textarea", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "popper", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setPopperTrigger", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "errorByInteraction", null);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeTriggerTimeout", 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isScrolling", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollingTimeout", 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleErrorsPopperTimeout", 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isFocusing", false);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "linesCountTimeout", 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+    _this = (0, _callSuper2["default"])(this, InputField, [props]);
+    (0, _defineProperty2["default"])(_this, "delimiter", '\n');
+    (0, _defineProperty2["default"])(_this, "skipEmptyLines", true);
+    (0, _defineProperty2["default"])(_this, "emptyLineValue", '');
+    (0, _defineProperty2["default"])(_this, "spaceLineValue", ' ');
+    (0, _defineProperty2["default"])(_this, "containerRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])(_this, "textarea", void 0);
+    (0, _defineProperty2["default"])(_this, "popper", null);
+    (0, _defineProperty2["default"])(_this, "setPopperTrigger", null);
+    (0, _defineProperty2["default"])(_this, "errorByInteraction", null);
+    (0, _defineProperty2["default"])(_this, "changeTriggerTimeout", 0);
+    (0, _defineProperty2["default"])(_this, "isScrolling", false);
+    (0, _defineProperty2["default"])(_this, "scrollingTimeout", 0);
+    (0, _defineProperty2["default"])(_this, "toggleErrorsPopperTimeout", 0);
+    (0, _defineProperty2["default"])(_this, "isFocusing", false);
+    (0, _defineProperty2["default"])(_this, "linesCountTimeout", 0);
+    (0, _defineProperty2["default"])(_this, "observer", void 0);
+    (0, _defineProperty2["default"])(_this, "state", {
       visibleErrorPopper: false,
       keyboardLineIndex: -1,
       mouseLineIndex: -1
     });
-    _this.handlePaste = _this.handlePaste.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleMouseDown = _this.handleMouseDown.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleMouseMove = _this.handleMouseMove.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleMouseLeave = _this.handleMouseLeave.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2["default"])(_this));
-    _this.handleSelectAll = _this.handleSelectAll.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handlePaste = _this.handlePaste.bind(_this);
+    _this.handleChange = _this.handleChange.bind(_this);
+    _this.handleFocus = _this.handleFocus.bind(_this);
+    _this.handleBlur = _this.handleBlur.bind(_this);
+    _this.handleKeyDown = _this.handleKeyDown.bind(_this);
+    _this.handleMouseDown = _this.handleMouseDown.bind(_this);
+    _this.handleMouseMove = _this.handleMouseMove.bind(_this);
+    _this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
+    _this.handleScroll = _this.handleScroll.bind(_this);
+    _this.handleSelectAll = _this.handleSelectAll.bind(_this);
     _this.textarea = _this.createContentEditableElement(props);
+    _this.observer = new MutationObserver(function (mutationsList, observer) {
+      var _iterator = (0, _createForOfIteratorHelper2["default"])(mutationsList),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var mutation = _step.value;
+          if (mutation.type === 'characterData' || mutation.type === 'childList') {
+            var _this$props$onImmedia, _this$props, _this$textarea$textCo;
+            (_this$props$onImmedia = (_this$props = _this.props).onImmediatelyChange) === null || _this$props$onImmedia === void 0 || _this$props$onImmedia.call(_this$props, _this.getValues(), (_this$textarea$textCo = _this.textarea.textContent) !== null && _this$textarea$textCo !== void 0 ? _this$textarea$textCo : '');
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
     return _this;
   }
-  (0, _createClass2["default"])(InputField, [{
+  (0, _inherits2["default"])(InputField, _Component);
+  return (0, _createClass2["default"])(InputField, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -90,32 +105,71 @@ var InputField = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$containerRef$cu;
-      (_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.append(this.textarea);
+      var _this$containerRef$cu,
+        _this2 = this;
+      var _this$asProps = this.asProps,
+        autoFocus = _this$asProps.autoFocus,
+        disabled = _this$asProps.disabled,
+        readonly = _this$asProps.readonly;
+      (_this$containerRef$cu = this.containerRef.current) === null || _this$containerRef$cu === void 0 || _this$containerRef$cu.append(this.textarea);
       this.handleValueOutChange();
+      var config = {
+        childList: true,
+        characterData: true,
+        subtree: true
+      };
+      if (this.props.onImmediatelyChange) {
+        this.observer.observe(this.textarea, config);
+      }
+      if (autoFocus && !disabled) {
+        /* Safari & Firefox may silently ignore programmatic focus calls with very short
+          delays (<10ms). Using 10ms as a safe threshold based on observed behavior.
+        */
+        setTimeout(function () {
+          return _this2.textarea.focus();
+        }, 10);
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this2 = this;
-      var _this$props = this.props,
-        value = _this$props.value,
-        errors = _this$props.errors,
-        errorIndex = _this$props.errorIndex,
-        showErrors = _this$props.showErrors,
-        disabled = _this$props.disabled,
-        readonly = _this$props.readonly,
-        highlightErrorIndex = _this$props.highlightErrorIndex,
-        lineProcessing = _this$props.lineProcessing,
-        _this$props$ariaDesc = _this$props['aria-describedby'],
-        ariaDescribedby = _this$props$ariaDesc === void 0 ? '' : _this$props$ariaDesc;
+      var _this3 = this;
+      var _this$props2 = this.props,
+        value = _this$props2.value,
+        errors = _this$props2.errors,
+        errorIndex = _this$props2.errorIndex,
+        showErrors = _this$props2.showErrors,
+        disabled = _this$props2.disabled,
+        readonly = _this$props2.readonly,
+        highlightErrorIndex = _this$props2.highlightErrorIndex,
+        lineProcessing = _this$props2.lineProcessing,
+        _this$props2$ariaDes = _this$props2['aria-describedby'],
+        ariaDescribedby = _this$props2$ariaDes === void 0 ? '' : _this$props2$ariaDes;
       if (prevProps.value !== value) {
         var currentValue = this.getValues().join(this.delimiter);
         if (typeof value === 'string' ? value !== currentValue : value.join(this.delimiter) !== currentValue) {
           this.handleValueOutChange();
         }
       }
-      if (prevProps.showErrors !== showErrors || prevProps.errors.length !== errors.length) {
+      if (prevProps.showErrors !== showErrors || prevProps.errors !== errors) {
+        if (showErrors) {
+          var errorsMap = new Map();
+          errors.forEach(function (error) {
+            errorsMap.set(error.lineIndex, error);
+          });
+          this.textarea.childNodes.forEach(function (node, index) {
+            if (node instanceof HTMLParagraphElement) {
+              var errorItem = errorsMap.get(index);
+              if (errorItem) {
+                node.setAttribute('aria-invalid', 'true');
+                node.dataset.errormessage = errorItem.errorMessage;
+              } else {
+                node.removeAttribute('aria-invalid');
+                node.dataset.errormessage = undefined;
+              }
+            }
+          });
+        }
         this.toggleAriaInvalid(showErrors, errors.length);
         if (showErrors === false) {
           this.textarea.setAttribute('aria-describedby', ariaDescribedby);
@@ -155,13 +209,12 @@ var InputField = /*#__PURE__*/function (_Component) {
           }
           this.validateLine(paragraph);
           setTimeout(function () {
-            var newNode = _this2.textarea.childNodes.item(keyboardLineIndex);
+            var newNode = _this3.textarea.childNodes.item(keyboardLineIndex);
             if (newNode) {
-              _this2.setErrorIndex(newNode);
+              _this3.setErrorIndex(newNode);
             }
           }, 0); // need this timeout to update errorIndex to the new (usually empty) line
         }
-
         if (!showErrors) {
           this.recalculateErrors();
         }
@@ -173,13 +226,14 @@ var InputField = /*#__PURE__*/function (_Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.removeEventListeners(this.textarea);
+      this.observer.disconnect();
     }
   }, {
     key: "isDisabled",
     get: function get() {
-      var _this$asProps = this.asProps,
-        disabled = _this$asProps.disabled,
-        readonly = _this$asProps.readonly;
+      var _this$asProps2 = this.asProps,
+        disabled = _this$asProps2.disabled,
+        readonly = _this$asProps2.readonly;
       return Boolean(disabled || readonly);
     }
   }, {
@@ -192,11 +246,11 @@ var InputField = /*#__PURE__*/function (_Component) {
     key: "errorMessage",
     get: function get() {
       var _errorItem$errorMessa, _errorItem, _errorItem2;
-      var _this$asProps2 = this.asProps,
-        errors = _this$asProps2.errors,
-        errorIndex = _this$asProps2.errorIndex,
-        commonErrorMessage = _this$asProps2.commonErrorMessage,
-        prevError = _this$asProps2.prevError;
+      var _this$asProps3 = this.asProps,
+        errors = _this$asProps3.errors,
+        errorIndex = _this$asProps3.errorIndex,
+        commonErrorMessage = _this$asProps3.commonErrorMessage,
+        prevError = _this$asProps3.prevError;
       var _this$state = this.state,
         mouseLineIndex = _this$state.mouseLineIndex,
         keyboardLineIndex = _this$state.keyboardLineIndex;
@@ -251,9 +305,9 @@ var InputField = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleValueOutChange",
     value: function handleValueOutChange() {
-      var _this$props2 = this.props,
-        value = _this$props2.value,
-        onChangeLinesCount = _this$props2.onChangeLinesCount;
+      var _this$props3 = this.props,
+        value = _this$props3.value,
+        onChangeLinesCount = _this$props3.onChangeLinesCount;
       if (value === '') {
         this.textarea.textContent = '';
         onChangeLinesCount(0);
@@ -268,13 +322,13 @@ var InputField = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleScroll",
     value: function handleScroll() {
-      var _this3 = this;
+      var _this4 = this;
       if (this.scrollingTimeout) {
         clearTimeout(this.scrollingTimeout);
       }
       this.isScrolling = true;
       this.scrollingTimeout = window.setTimeout(function () {
-        _this3.isScrolling = false;
+        _this4.isScrolling = false;
       }, 50);
     }
   }, {
@@ -304,7 +358,7 @@ var InputField = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "handleMouseLeave",
-    value: function handleMouseLeave(event) {
+    value: function handleMouseLeave() {
       if (this.changeTriggerTimeout) {
         clearTimeout(this.changeTriggerTimeout);
       }
@@ -351,9 +405,9 @@ var InputField = /*#__PURE__*/function (_Component) {
           textNode = lastNodeToInsert.childNodes.item(0);
           position = ((_lastNodeToInsert$tex = lastNodeToInsert.textContent) !== null && _lastNodeToInsert$tex !== void 0 ? _lastNodeToInsert$tex : '').length;
         } else if (focusNode instanceof HTMLParagraphElement && anchorNode instanceof HTMLParagraphElement) {
-          var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2, _ref3;
-          var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$textConte2 = anchorNode.textContent) === null || _anchorNode$textConte2 === void 0 ? void 0 : _anchorNode$textConte2.substring(0, fromOffset)) !== null && _anchorNode$textConte !== void 0 ? _anchorNode$textConte : '';
-          var after = (_focusNode$textConten = focusNode === null || focusNode === void 0 ? void 0 : (_focusNode$textConten2 = focusNode.textContent) === null || _focusNode$textConten2 === void 0 ? void 0 : _focusNode$textConten2.substring(toOffset)) !== null && _focusNode$textConten !== void 0 ? _focusNode$textConten : '';
+          var _anchorNode$textConte, _anchorNode$textConte2, _focusNode$textConten, _focusNode$textConten2, _firstNodeToInsert$te;
+          var before = (_anchorNode$textConte = anchorNode === null || anchorNode === void 0 || (_anchorNode$textConte2 = anchorNode.textContent) === null || _anchorNode$textConte2 === void 0 ? void 0 : _anchorNode$textConte2.substring(0, fromOffset)) !== null && _anchorNode$textConte !== void 0 ? _anchorNode$textConte : '';
+          var after = (_focusNode$textConten = focusNode === null || focusNode === void 0 || (_focusNode$textConten2 = focusNode.textContent) === null || _focusNode$textConten2 === void 0 ? void 0 : _focusNode$textConten2.substring(toOffset)) !== null && _focusNode$textConten !== void 0 ? _focusNode$textConten : '';
           var noEmptyLineBefore = before.trim() === '' ? '' : before;
           var noEmptyLineAfter = after.trim() === '' ? '' : after;
           selection.deleteFromDocument();
@@ -362,7 +416,7 @@ var InputField = /*#__PURE__*/function (_Component) {
           }
           var firstNodeToInsert = listOfNodes.splice(0, 1)[0];
           var _lastNodeToInsert = listOfNodes[listOfNodes.length - 1];
-          anchorNode.textContent = (_ref3 = noEmptyLineBefore + (firstNodeToInsert === null || firstNodeToInsert === void 0 ? void 0 : firstNodeToInsert.textContent)) !== null && _ref3 !== void 0 ? _ref3 : '';
+          anchorNode.textContent = noEmptyLineBefore + ((_firstNodeToInsert$te = firstNodeToInsert === null || firstNodeToInsert === void 0 ? void 0 : firstNodeToInsert.textContent) !== null && _firstNodeToInsert$te !== void 0 ? _firstNodeToInsert$te : '');
           anchorNode.after.apply(anchorNode, (0, _toConsumableArray2["default"])(listOfNodes));
           if (_lastNodeToInsert) {
             var _lastNodeToInsert$tex2, _lastNodeToInsert$tex3;
@@ -381,11 +435,11 @@ var InputField = /*#__PURE__*/function (_Component) {
           }
         }
         if (textNode instanceof Text) {
-          var _position, _position2;
-          this.setSelection(textNode, (_position = position) !== null && _position !== void 0 ? _position : 1, (_position2 = position) !== null && _position2 !== void 0 ? _position2 : 1);
+          this.setSelection(textNode, position !== null && position !== void 0 ? position : 1, position !== null && position !== void 0 ? position : 1);
           this.toggleErrorsPopper('keyboardLineIndex', textNode.parentNode);
         } else {
           var _textNode;
+          // eslint-disable-next-line no-console
           console.warn('incorrect child type', textNode, (_textNode = textNode) === null || _textNode === void 0 ? void 0 : _textNode.parentNode);
         }
       }
@@ -411,7 +465,7 @@ var InputField = /*#__PURE__*/function (_Component) {
           var text = document.createTextNode(nodeText);
           firstRow.append(text);
           firstNode.replaceWith(firstRow);
-          selection === null || selection === void 0 ? void 0 : selection.setPosition(firstRow, nodeText.length);
+          selection === null || selection === void 0 || selection.setPosition(firstRow, nodeText.length);
         } else if (!firstNode || firstNode instanceof HTMLBRElement && nodes.length === 1) {
           this.textarea.textContent = '';
           this.setState({
@@ -463,9 +517,9 @@ var InputField = /*#__PURE__*/function (_Component) {
           } else if (childNodes.length === 1 && childNodes[0] instanceof HTMLBRElement) {
             rowNode.innerHTML = this.emptyLineValue;
           }
-          var _this$asProps3 = this.asProps,
-            errors = _this$asProps3.errors,
-            showErrors = _this$asProps3.showErrors;
+          var _this$asProps4 = this.asProps,
+            errors = _this$asProps4.errors,
+            showErrors = _this$asProps4.showErrors;
           var isValid = this.validateLine(rowNode);
           this.recalculateErrors();
           this.setErrorIndex(rowNode);
@@ -473,10 +527,10 @@ var InputField = /*#__PURE__*/function (_Component) {
             this.toggleErrorsPopper('keyboardLineIndex', rowNode, 0);
           }
           var trigger = !isValid || isValid && errors.length === 1 && errors[0].lineNode === rowNode ? rowNode : this.textarea;
-          if (showErrors && ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.current.state.elements.reference) !== trigger) {
+          if (showErrors && ((_this$popper = this.popper) === null || _this$popper === void 0 || (_this$popper = _this$popper.current) === null || _this$popper === void 0 ? void 0 : _this$popper.state.elements.reference) !== trigger) {
             if (this.shouldChangePopperTrigger(trigger)) {
               var _this$setPopperTrigge;
-              (_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0 ? void 0 : _this$setPopperTrigge.call(this, trigger);
+              (_this$setPopperTrigge = this.setPopperTrigger) === null || _this$setPopperTrigge === void 0 || _this$setPopperTrigge.call(this, trigger);
             } else {
               this.setState({
                 visibleErrorPopper: false
@@ -485,7 +539,7 @@ var InputField = /*#__PURE__*/function (_Component) {
           }
         } else if (rowNode === null) {
           var _this$setPopperTrigge2;
-          (_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0 ? void 0 : _this$setPopperTrigge2.call(this, this.textarea);
+          (_this$setPopperTrigge2 = this.setPopperTrigger) === null || _this$setPopperTrigge2 === void 0 || _this$setPopperTrigge2.call(this, this.textarea);
           if ((selection === null || selection === void 0 ? void 0 : selection.focusNode) === this.textarea && this.textarea.childNodes.length > 1) {
             var nodeIndex = selection.focusOffset;
             var emptyParagraph = this.textarea.childNodes.item(nodeIndex - 1);
@@ -506,7 +560,7 @@ var InputField = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "handleFocus",
-    value: function handleFocus(event) {
+    value: function handleFocus() {
       this.isFocusing = true;
       this.errorByInteraction = 'keyboard';
       if (this.asProps.showErrors) {
@@ -518,22 +572,22 @@ var InputField = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleBlur",
     value: function handleBlur(event) {
-      var _this4 = this;
+      var _this5 = this;
       this.isFocusing = false;
       this.setState({
         visibleErrorPopper: false
       });
-      var _this$asProps4 = this.asProps,
-        validateOn = _this$asProps4.validateOn,
-        onBlur = _this$asProps4.onBlur,
-        value = _this$asProps4.value;
+      var _this$asProps5 = this.asProps,
+        validateOn = _this$asProps5.validateOn,
+        onBlur = _this$asProps5.onBlur,
+        value = _this$asProps5.value;
       if (validateOn.includes('blur')) {
         this.recalculateErrors();
       }
       var valueToChange = typeof value === 'string' ? this.getValues().join(this.delimiter) : this.getValues();
       onBlur(valueToChange, event);
       setTimeout(function () {
-        _this4.setState({
+        _this5.setState({
           keyboardLineIndex: -1
         });
       }, 200);
@@ -541,7 +595,7 @@ var InputField = /*#__PURE__*/function (_Component) {
   }, {
     key: "handleKeyDown",
     value: function handleKeyDown(event) {
-      var _this5 = this;
+      var _this6 = this;
       this.errorByInteraction = 'keyboard';
       var linesDelimiters = this.asProps.linesDelimiters;
       var currentNode = this.getNodeFromSelection();
@@ -558,7 +612,7 @@ var InputField = /*#__PURE__*/function (_Component) {
             var _selection$focusNode, _selectionNode$textCo, _currentNode$textCont2, _row$textContent;
             event.preventDefault();
             var selection = document.getSelection();
-            var selectionNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode : selection === null || selection === void 0 ? void 0 : (_selection$focusNode = selection.focusNode) === null || _selection$focusNode === void 0 ? void 0 : _selection$focusNode.childNodes.item(0);
+            var selectionNode = (selection === null || selection === void 0 ? void 0 : selection.focusNode) instanceof Text ? selection.focusNode : selection === null || selection === void 0 || (_selection$focusNode = selection.focusNode) === null || _selection$focusNode === void 0 ? void 0 : _selection$focusNode.childNodes.item(0);
             var selectionOffset = selection === null || selection === void 0 ? void 0 : selection.focusOffset;
             var newRowValue = '';
             if (selectionNode instanceof Text && selectionOffset !== undefined && selectionOffset !== ((_selectionNode$textCo = selectionNode.textContent) === null || _selectionNode$textCo === void 0 ? void 0 : _selectionNode$textCo.length)) {
@@ -589,7 +643,7 @@ var InputField = /*#__PURE__*/function (_Component) {
               this.recalculateLinesCount();
             }
             setTimeout(function () {
-              _this5.recalculateErrors();
+              _this6.recalculateErrors();
             }, 0);
             this.toggleErrorsPopperByKeyboard(0);
           }
@@ -619,16 +673,17 @@ var InputField = /*#__PURE__*/function (_Component) {
                 var offset = (_text$textContent$len = (_text$textContent = text.textContent) === null || _text$textContent === void 0 ? void 0 : _text$textContent.length) !== null && _text$textContent$len !== void 0 ? _text$textContent$len : 0;
                 this.setSelection(text, offset, offset);
               } else {
+                // eslint-disable-next-line no-console
                 console.warn('incorrect prevNode type', prevNode);
               }
             }
             setTimeout(function () {
-              _this5.recalculateErrors();
+              _this6.recalculateErrors();
             }, 0);
             this.toggleErrorsPopperByKeyboard(0);
           }
         } else if (this.isRangeSelection()) {
-          var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2, _focusElement$parentN3;
+          var _currentNode$textCont4, _focusElement$parentN, _anchorElement$parent, _focusElement$parentN2;
           var _selection = document.getSelection();
           var direction = this.getSelectionDirection();
           var anchorElement = direction === 'backward' ? _selection === null || _selection === void 0 ? void 0 : _selection.focusNode : _selection === null || _selection === void 0 ? void 0 : _selection.anchorNode;
@@ -652,12 +707,11 @@ var InputField = /*#__PURE__*/function (_Component) {
             this.setErrorIndex(currentNode);
             this.recalculateLinesCount();
             setTimeout(function () {
-              _this5.recalculateErrors();
+              _this6.recalculateErrors();
             }, 0);
             this.toggleErrorsPopperByKeyboard(0);
-          }
-          // Backspace on selected few full rows
-          else if (focusElement !== anchorElement && focusElement instanceof Text && anchorElement instanceof Text && (focusElement === null || focusElement === void 0 ? void 0 : focusElement.textContent) === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN = focusElement.parentNode) === null || _focusElement$parentN === void 0 ? void 0 : _focusElement$parentN.textContent) && (anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.textContent) === (anchorElement === null || anchorElement === void 0 ? void 0 : (_anchorElement$parent = anchorElement.parentNode) === null || _anchorElement$parent === void 0 ? void 0 : _anchorElement$parent.textContent) && anchorOffset === 0 && focusOffset === (focusElement === null || focusElement === void 0 ? void 0 : (_focusElement$parentN2 = focusElement.parentNode) === null || _focusElement$parentN2 === void 0 ? void 0 : (_focusElement$parentN3 = _focusElement$parentN2.textContent) === null || _focusElement$parentN3 === void 0 ? void 0 : _focusElement$parentN3.length)) {
+          } else if (focusElement !== anchorElement && focusElement instanceof Text && anchorElement instanceof Text && (focusElement === null || focusElement === void 0 ? void 0 : focusElement.textContent) === (focusElement === null || focusElement === void 0 || (_focusElement$parentN = focusElement.parentNode) === null || _focusElement$parentN === void 0 ? void 0 : _focusElement$parentN.textContent) && (anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.textContent) === (anchorElement === null || anchorElement === void 0 || (_anchorElement$parent = anchorElement.parentNode) === null || _anchorElement$parent === void 0 ? void 0 : _anchorElement$parent.textContent) && anchorOffset === 0 && focusOffset === (focusElement === null || focusElement === void 0 || (_focusElement$parentN2 = focusElement.parentNode) === null || _focusElement$parentN2 === void 0 || (_focusElement$parentN2 = _focusElement$parentN2.textContent) === null || _focusElement$parentN2 === void 0 ? void 0 : _focusElement$parentN2.length)) {
+            // Backspace on selected few full rows
             event.preventDefault();
             var paragraphs = Array.from(this.textarea.children);
             var _anchorParagraph = anchorElement.parentElement;
@@ -668,11 +722,11 @@ var InputField = /*#__PURE__*/function (_Component) {
               this.setSelection(this.textarea, 0, 0);
             } else {
               var isCleaning = false;
-              var _iterator = (0, _createForOfIteratorHelper2["default"])(paragraphs),
-                _step;
+              var _iterator2 = (0, _createForOfIteratorHelper2["default"])(paragraphs),
+                _step2;
               try {
-                for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                  var paragraph = _step.value;
+                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                  var paragraph = _step2.value;
                   if (paragraph === _anchorParagraph || isCleaning) {
                     isCleaning = true;
                     if (paragraph === _focusParagraph) {
@@ -685,16 +739,16 @@ var InputField = /*#__PURE__*/function (_Component) {
                   }
                 }
               } catch (err) {
-                _iterator.e(err);
+                _iterator2.e(err);
               } finally {
-                _iterator.f();
+                _iterator2.f();
               }
               this.validateLine(currentNode);
             }
             this.setErrorIndex(currentNode);
             this.recalculateLinesCount();
             setTimeout(function () {
-              _this5.recalculateErrors();
+              _this6.recalculateErrors();
             }, 0);
             this.toggleErrorsPopperByKeyboard(0);
           }
@@ -709,11 +763,11 @@ var InputField = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref2,
         _this$containerRef$cu2,
-        _this6 = this;
-      var SInputField = _flexBox.Box;
-      var _this$asProps5 = this.asProps,
-        styles = _this$asProps5.styles,
-        showErrors = _this$asProps5.showErrors;
+        _this7 = this;
+      var SInputField = _baseComponents.Box;
+      var _this$asProps6 = this.asProps,
+        styles = _this$asProps6.styles,
+        showErrors = _this$asProps6.showErrors;
       var visibleErrorPopper = this.state.visibleErrorPopper;
       var _this$errorMessage = this.errorMessage,
         errorMessage = _this$errorMessage.errorMessage,
@@ -731,16 +785,16 @@ var InputField = /*#__PURE__*/function (_Component) {
           boundary: (_this$containerRef$cu2 = this.containerRef.current) !== null && _this$containerRef$cu2 !== void 0 ? _this$containerRef$cu2 : undefined,
           tether: false
         }
-      }), function (_ref4) {
-        var popper = _ref4.popper,
-          setTrigger = _ref4.setTrigger;
-        if (!_this6.popper) {
-          _this6.setPopperTrigger = setTrigger;
+      }), function (_ref3) {
+        var popper = _ref3.popper,
+          setTrigger = _ref3.setTrigger;
+        if (!_this7.popper) {
+          _this7.setPopperTrigger = setTrigger;
           // @ts-ignore
-          _this6.popper = popper;
+          _this7.popper = popper;
         }
         return /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Popper, {
-          id: _this6.popperDescribedId
+          id: _this7.popperDescribedId
         }, errorMessage);
       }), /*#__PURE__*/_react["default"].createElement(SInputField, _ref2.cn("SInputField", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "ref": this.containerRef,
@@ -753,7 +807,7 @@ var InputField = /*#__PURE__*/function (_Component) {
       var _pasteProps$lineProce,
         _pasteProps$skipEmpty,
         _pasteProps$delimiter,
-        _this7 = this;
+        _this8 = this;
       var listOfNodes = [];
       var pasteProps = this.asProps.pasteProps;
       var lineProcessing = (_pasteProps$lineProce = pasteProps === null || pasteProps === void 0 ? void 0 : pasteProps.lineProcessing) !== null && _pasteProps$lineProce !== void 0 ? _pasteProps$lineProce : function (line) {
@@ -768,15 +822,15 @@ var InputField = /*#__PURE__*/function (_Component) {
         if (preparedLine === '' && skipEmptyLines === false || preparedLine !== '') {
           var node = document.createElement('p');
           if (preparedLine === '') {
-            node.innerHTML = _this7.emptyLineValue;
+            node.innerHTML = _this8.emptyLineValue;
           } else if (preparedLine.trim() === '') {
             var allSpacesRegExp = new RegExp('\\s', 'g');
-            node.innerHTML = _dompurify["default"].sanitize(preparedLine.replace(allSpacesRegExp, _this7.spaceLineValue));
+            node.innerHTML = _dompurify["default"].sanitize(preparedLine.replace(allSpacesRegExp, _this8.spaceLineValue));
           } else {
             node.append(document.createTextNode(preparedLine));
           }
           listOfNodes.push(node);
-          _this7.validateLine(node);
+          _this8.validateLine(node);
         }
       });
       return listOfNodes;
@@ -801,19 +855,19 @@ var InputField = /*#__PURE__*/function (_Component) {
   }, {
     key: "recalculateLinesCount",
     value: function recalculateLinesCount() {
-      var _this8 = this;
+      var _this9 = this;
       if (this.linesCountTimeout) {
         clearTimeout(this.linesCountTimeout);
       }
       this.linesCountTimeout = window.setTimeout(function () {
         var lines = 0;
-        var _this8$asProps = _this8.asProps,
-          maxLines = _this8$asProps.maxLines,
-          linesCount = _this8$asProps.linesCount;
-        _this8.textarea.childNodes.forEach(function (node, index) {
+        var _this9$asProps = _this9.asProps,
+          maxLines = _this9$asProps.maxLines,
+          linesCount = _this9$asProps.linesCount;
+        _this9.textarea.childNodes.forEach(function (node) {
           if (node instanceof HTMLParagraphElement) {
             node.dataset.overMaxRows = 'false';
-            if (node.textContent !== _this8.getEmptyParagraph().textContent && node.textContent !== '') {
+            if (node.textContent !== _this9.getEmptyParagraph().textContent && node.textContent !== '') {
               lines++;
               if (lines > maxLines) {
                 node.dataset.overMaxRows = 'true';
@@ -822,7 +876,7 @@ var InputField = /*#__PURE__*/function (_Component) {
           }
         });
         if (linesCount !== lines) {
-          _this8.asProps.onChangeLinesCount(lines);
+          _this9.asProps.onChangeLinesCount(lines);
         }
       }, 100);
     }
@@ -849,57 +903,57 @@ var InputField = /*#__PURE__*/function (_Component) {
   }, {
     key: "toggleErrorsPopperByKeyboard",
     value: function toggleErrorsPopperByKeyboard(timer) {
-      var _this9 = this;
+      var _this0 = this;
       if (this.toggleErrorsPopperTimeout) {
         clearTimeout(this.toggleErrorsPopperTimeout);
       }
       if (!this.isScrolling) {
         setTimeout(function () {
-          var rowNode = _this9.getNodeFromSelection();
-          _this9.toggleErrorsPopper('keyboardLineIndex', rowNode, timer);
+          var rowNode = _this0.getNodeFromSelection();
+          _this0.toggleErrorsPopper('keyboardLineIndex', rowNode, timer);
         }, 0);
       } else {
         this.toggleErrorsPopperTimeout = window.setTimeout(function () {
-          _this9.toggleErrorsPopperByKeyboard(timer);
+          _this0.toggleErrorsPopperByKeyboard(timer);
         }, 50);
       }
     }
   }, {
     key: "toggleErrorsPopper",
     value: function toggleErrorsPopper(key, target, timer) {
-      var _this10 = this;
+      var _this1 = this;
       if (target instanceof HTMLDivElement || target instanceof HTMLParagraphElement) {
         if (this.changeTriggerTimeout) {
           clearTimeout(this.changeTriggerTimeout);
         }
         this.changeTriggerTimeout = window.setTimeout(function () {
-          var targetElement = target === _this10.textarea ? _this10.getNodeFromSelection() : target;
+          var targetElement = target === _this1.textarea ? _this1.getNodeFromSelection() : target;
           var lineIndex = -1;
           var isInvalidRow = false;
           if (targetElement instanceof HTMLParagraphElement) {
             isInvalidRow = targetElement.getAttribute('aria-invalid') === 'true';
-            lineIndex = Array.from(_this10.textarea.childNodes).indexOf(targetElement);
-          } else if (targetElement === _this10.textarea) {
+            lineIndex = Array.from(_this1.textarea.childNodes).indexOf(targetElement);
+          } else if (targetElement === _this1.textarea) {
             lineIndex = 0;
           }
           if (targetElement instanceof HTMLElement) {
-            _this10.setState(function (prevState) {
+            _this1.setState(function (prevState) {
               var newState = {
-                visibleErrorPopper: _this10.isFocusing && Boolean(_this10.asProps.commonErrorMessage) ? true : isInvalidRow,
+                visibleErrorPopper: _this1.isFocusing && Boolean(_this1.asProps.commonErrorMessage) ? true : isInvalidRow,
                 mouseLineIndex: prevState.mouseLineIndex,
                 keyboardLineIndex: prevState.keyboardLineIndex
               };
-              if (_this10.isFocusing || key === 'mouseLineIndex' && isInvalidRow) {
+              if (_this1.isFocusing || key === 'mouseLineIndex' && isInvalidRow) {
                 newState[key] = lineIndex;
               }
               return newState;
             }, function () {
-              _this10.errorByInteraction = key === 'mouseLineIndex' ? 'mouse' : 'keyboard';
-              var trigger = isInvalidRow ? targetElement : _this10.textarea;
-              if (_this10.shouldChangePopperTrigger(trigger)) {
-                var _this10$setPopperTrig;
-                (_this10$setPopperTrig = _this10.setPopperTrigger) === null || _this10$setPopperTrig === void 0 ? void 0 : _this10$setPopperTrig.call(_this10, trigger);
-                _this10.forceUpdate();
+              _this1.errorByInteraction = key === 'mouseLineIndex' ? 'mouse' : 'keyboard';
+              var trigger = isInvalidRow ? targetElement : _this1.textarea;
+              if (_this1.shouldChangePopperTrigger(trigger)) {
+                var _this1$setPopperTrigg;
+                (_this1$setPopperTrigg = _this1.setPopperTrigger) === null || _this1$setPopperTrigg === void 0 || _this1$setPopperTrigg.call(_this1, trigger);
+                _this1.forceUpdate();
               }
             });
           }
@@ -925,7 +979,7 @@ var InputField = /*#__PURE__*/function (_Component) {
     key: "handleChangeErrorIndex",
     value: function handleChangeErrorIndex(errorIndex) {
       var _error$lineNode,
-        _this11 = this;
+        _this10 = this;
       var error = this.asProps.errors[errorIndex];
       var childNodes = this.textarea.childNodes;
       var node = error ? (_error$lineNode = error.lineNode) !== null && _error$lineNode !== void 0 ? _error$lineNode : childNodes.item(error.lineIndex) : null;
@@ -937,9 +991,9 @@ var InputField = /*#__PURE__*/function (_Component) {
         setTimeout(function () {
           var text = node.childNodes.item(0);
           if (text instanceof Text) {
-            _this11.setSelection(text, 0, text.length);
+            _this10.setSelection(text, 0, text.length);
           } else {
-            _this11.setSelection(node, 0, 1);
+            _this10.setSelection(node, 0, 1);
           }
         }, 150);
       }
@@ -972,8 +1026,8 @@ var InputField = /*#__PURE__*/function (_Component) {
       var range = document.createRange();
       range.setStart(node, start);
       range.setEnd(node, end);
-      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+      selection === null || selection === void 0 || selection.removeAllRanges();
+      selection === null || selection === void 0 || selection.addRange(range);
       var nodeToScroll = node instanceof Text ? node.parentNode : node;
       if (nodeToScroll instanceof HTMLElement) {
         nodeToScroll.scrollIntoView({
@@ -1120,9 +1174,7 @@ var InputField = /*#__PURE__*/function (_Component) {
       return null;
     }
   }]);
-  return InputField;
 }(_core.Component);
-exports.InputField = InputField;
 (0, _defineProperty2["default"])(InputField, "displayName", 'Textarea');
 (0, _defineProperty2["default"])(InputField, "style", style);
 (0, _defineProperty2["default"])(InputField, "enhance", [(0, _uniqueID["default"])()]);