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

package/lib/esm/components/InputField/InputField.mjs

@@ -1,84 +1,98 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
-import React from "react";
-import { Box } from "@semcore/flex-box";
+import { sstyled, assignProps, Component } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import Tooltip from "@semcore/tooltip";
-import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
 import DOMPurify from "dompurify";
+import React from "react";
 /*!__reshadow-styles__:"./inputField.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (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)}',
+    '.___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__*/
-    "1vc4q_gg_"
+    "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) {
-  _inherits(InputField2, _Component);
-  var _super = _createSuper(InputField2);
+var InputField = /* @__PURE__ */ (function(_Component) {
   function InputField2(props) {
     var _this;
     _classCallCheck(this, InputField2);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "delimiter", "\n");
-    _defineProperty(_assertThisInitialized(_this), "skipEmptyLines", true);
-    _defineProperty(_assertThisInitialized(_this), "emptyLineValue", "");
-    _defineProperty(_assertThisInitialized(_this), "spaceLineValue", " ");
-    _defineProperty(_assertThisInitialized(_this), "containerRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "textarea", void 0);
-    _defineProperty(_assertThisInitialized(_this), "popper", null);
-    _defineProperty(_assertThisInitialized(_this), "setPopperTrigger", null);
-    _defineProperty(_assertThisInitialized(_this), "errorByInteraction", null);
-    _defineProperty(_assertThisInitialized(_this), "changeTriggerTimeout", 0);
-    _defineProperty(_assertThisInitialized(_this), "isScrolling", false);
-    _defineProperty(_assertThisInitialized(_this), "scrollingTimeout", 0);
-    _defineProperty(_assertThisInitialized(_this), "toggleErrorsPopperTimeout", 0);
-    _defineProperty(_assertThisInitialized(_this), "isFocusing", false);
-    _defineProperty(_assertThisInitialized(_this), "linesCountTimeout", 0);
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this = _callSuper(this, InputField2, [props]);
+    _defineProperty(_this, "delimiter", "\n");
+    _defineProperty(_this, "skipEmptyLines", true);
+    _defineProperty(_this, "emptyLineValue", "");
+    _defineProperty(_this, "spaceLineValue", " ");
+    _defineProperty(_this, "containerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "textarea", void 0);
+    _defineProperty(_this, "popper", null);
+    _defineProperty(_this, "setPopperTrigger", null);
+    _defineProperty(_this, "errorByInteraction", null);
+    _defineProperty(_this, "changeTriggerTimeout", 0);
+    _defineProperty(_this, "isScrolling", false);
+    _defineProperty(_this, "scrollingTimeout", 0);
+    _defineProperty(_this, "toggleErrorsPopperTimeout", 0);
+    _defineProperty(_this, "isFocusing", false);
+    _defineProperty(_this, "linesCountTimeout", 0);
+    _defineProperty(_this, "observer", void 0);
+    _defineProperty(_this, "state", {
       visibleErrorPopper: false,
       keyboardLineIndex: -1,
       mouseLineIndex: -1
     });
-    _this.handlePaste = _this.handlePaste.bind(_assertThisInitialized(_this));
-    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
-    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
-    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
-    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
-    _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_this));
-    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
-    _this.handleSelectAll = _this.handleSelectAll.bind(_assertThisInitialized(_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 = _createForOfIteratorHelper(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;
   }
-  _createClass(InputField2, [{
+  _inherits(InputField2, _Component);
+  return _createClass(InputField2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -90,22 +104,54 @@ 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) {
+        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 = /* @__PURE__ */ 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 = void 0;
+              }
+            }
+          });
+        }
         this.toggleAriaInvalid(showErrors, errors.length);
         if (showErrors === false) {
           this.textarea.setAttribute("aria-describedby", ariaDescribedby);
@@ -145,9 +191,9 @@ 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);
         }
@@ -162,11 +208,12 @@ 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);
     }
   }, {
@@ -179,7 +226,7 @@ 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;
       var currentLineIndex = this.errorByInteraction === "keyboard" ? keyboardLineIndex : this.errorByInteraction === "mouse" ? mouseLineIndex : -1;
       var errorItem = errors[errorIndex];
@@ -230,7 +277,7 @@ 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);
@@ -245,13 +292,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);
     }
   }, {
@@ -280,7 +327,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
     }
   }, {
     key: "handleMouseLeave",
-    value: function handleMouseLeave(event) {
+    value: function handleMouseLeave() {
       if (this.changeTriggerTimeout) {
         clearTimeout(this.changeTriggerTimeout);
       }
@@ -327,9 +374,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();
@@ -338,7 +385,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, _toConsumableArray(listOfNodes));
           if (_lastNodeToInsert) {
             var _lastNodeToInsert$tex2, _lastNodeToInsert$tex3;
@@ -357,8 +404,7 @@ 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;
@@ -387,7 +433,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({
@@ -439,7 +485,7 @@ 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);
@@ -447,10 +493,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
@@ -459,7 +505,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);
@@ -480,7 +526,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) {
@@ -492,19 +538,19 @@ 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);
@@ -512,7 +558,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();
@@ -529,7 +575,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 !== void 0 && selectionOffset !== ((_selectionNode$textCo = selectionNode.textContent) === null || _selectionNode$textCo === void 0 ? void 0 : _selectionNode$textCo.length)) {
@@ -560,7 +606,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
               this.recalculateLinesCount();
             }
             setTimeout(function() {
-              _this5.recalculateErrors();
+              _this6.recalculateErrors();
             }, 0);
             this.toggleErrorsPopperByKeyboard(0);
           }
@@ -593,12 +639,12 @@ var InputField = /* @__PURE__ */ function(_Component) {
               }
             }
             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;
@@ -620,10 +666,10 @@ var InputField = /* @__PURE__ */ function(_Component) {
             this.setErrorIndex(currentNode);
             this.recalculateLinesCount();
             setTimeout(function() {
-              _this5.recalculateErrors();
+              _this6.recalculateErrors();
             }, 0);
             this.toggleErrorsPopperByKeyboard(0);
-          } 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)) {
             event.preventDefault();
             var paragraphs = Array.from(this.textarea.children);
             var _anchorParagraph = anchorElement.parentElement;
@@ -634,10 +680,10 @@ var InputField = /* @__PURE__ */ function(_Component) {
               this.setSelection(this.textarea, 0, 0);
             } else {
               var isCleaning = false;
-              var _iterator = _createForOfIteratorHelper(paragraphs), _step;
+              var _iterator2 = _createForOfIteratorHelper(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) {
@@ -650,16 +696,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);
           }
@@ -671,14 +717,14 @@ var InputField = /* @__PURE__ */ function(_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps, _ref2, _this$containerRef$cu2, _this6 = this;
+      var _ref = this.asProps, _ref2, _this$containerRef$cu2, _this7 = this;
       var SInputField = Box;
-      var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, showErrors = _this$asProps5.showErrors;
+      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, isCommonError = _this$errorMessage.isCommonError;
       var visibleErrorTooltip = showErrors && visibleErrorPopper && Boolean(errorMessage) && !this.isDisabled;
       var _extractAriaProps2 = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps2.__excludeProps;
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, _ref2.cn("Tooltip", {
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, _ref2.cn("Tooltip", {
         "interaction": "none",
         "placement": isCommonError ? "right-start" : "right",
         "visible": visibleErrorTooltip,
@@ -688,14 +734,14 @@ var InputField = /* @__PURE__ */ function(_Component) {
           boundary: (_this$containerRef$cu2 = this.containerRef.current) !== null && _this$containerRef$cu2 !== void 0 ? _this$containerRef$cu2 : void 0,
           tether: false
         }
-      }), function(_ref4) {
-        var popper = _ref4.popper, setTrigger = _ref4.setTrigger;
-        if (!_this6.popper) {
-          _this6.setPopperTrigger = setTrigger;
-          _this6.popper = popper;
+      }), function(_ref3) {
+        var popper = _ref3.popper, setTrigger = _ref3.setTrigger;
+        if (!_this7.popper) {
+          _this7.setPopperTrigger = setTrigger;
+          _this7.popper = popper;
         }
         return /* @__PURE__ */ React.createElement(Tooltip.Popper, {
-          id: _this6.popperDescribedId
+          id: _this7.popperDescribedId
         }, errorMessage);
       }), /* @__PURE__ */ React.createElement(SInputField, _ref2.cn("SInputField", _objectSpread({}, assignProps({
         "ref": this.containerRef,
@@ -705,7 +751,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
   }, {
     key: "prepareNodesForPaste",
     value: function prepareNodesForPaste(value) {
-      var _pasteProps$lineProce, _pasteProps$skipEmpty, _pasteProps$delimiter, _this7 = this;
+      var _pasteProps$lineProce, _pasteProps$skipEmpty, _pasteProps$delimiter, _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) {
@@ -720,15 +766,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.sanitize(preparedLine.replace(allSpacesRegExp, _this7.spaceLineValue));
+            node.innerHTML = DOMPurify.sanitize(preparedLine.replace(allSpacesRegExp, _this8.spaceLineValue));
           } else {
             node.append(document.createTextNode(preparedLine));
           }
           listOfNodes.push(node);
-          _this7.validateLine(node);
+          _this8.validateLine(node);
         }
       });
       return listOfNodes;
@@ -753,17 +799,17 @@ 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";
@@ -772,7 +818,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
           }
         });
         if (linesCount !== lines) {
-          _this8.asProps.onChangeLinesCount(lines);
+          _this9.asProps.onChangeLinesCount(lines);
         }
       }, 100);
     }
@@ -799,57 +845,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();
               }
             });
           }
@@ -874,7 +920,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
   }, {
     key: "handleChangeErrorIndex",
     value: function handleChangeErrorIndex(errorIndex) {
-      var _error$lineNode, _this11 = this;
+      var _error$lineNode, _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;
@@ -886,9 +932,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);
       }
@@ -919,8 +965,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({
@@ -1062,8 +1108,7 @@ var InputField = /* @__PURE__ */ function(_Component) {
       return null;
     }
   }]);
-  return InputField2;
-}(Component);
+})(Component);
 _defineProperty(InputField, "displayName", "Textarea");
 _defineProperty(InputField, "style", style);
 _defineProperty(InputField, "enhance", [uniqueIDEnhancement()]);