@semcore/bulk-textarea 16.8.0 → 16.8.1

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

@@ -7,9 +7,9 @@ import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { Box } from "@semcore/flex-box";
 import Tooltip from "@semcore/tooltip";
 import DOMPurify from "dompurify";
 import React from "react";
@@ -18,22 +18,22 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SInputField_l9wtj_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_l9wtj_gg_>div{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_>div{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInputField_l9wtj_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457));position:absolute}.___SInputField_l9wtj_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_l9wtj_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_l9wtj_gg_>div:nth-child(even)::before{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_>div:nth-child(even)::before{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SInputField_l9wtj_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_l9wtj_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_l9wtj_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_l9wtj_gg_>div>p:not(:empty)::before{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_>div>p:not(:empty)::before{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SInputField_l9wtj_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_l9wtj_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, rgb(255, 235, 239))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, color(display-p3 1 0.92002 0.9342))}}}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+1000))>p{padding-left:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px))}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+1000))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+100)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_l9wtj_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+1000)::before{padding-left:0}.___SInputField_l9wtj_gg_.__showErrors_l9wtj_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_l9wtj_gg_._size_m_l9wtj_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_l9wtj)*20px);max-height:calc((var(--maxRows_l9wtj) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_l9wtj_gg_._size_m_l9wtj_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_l9wtj_gg_._size_l_l9wtj_gg_>div:empty::before,.___SInputField_l9wtj_gg_._size_m_l9wtj_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_l9wtj_gg_._size_l_l9wtj_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_l9wtj)*24px);max-height:calc((var(--maxRows_l9wtj) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_l9wtj_gg_._size_l_l9wtj_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_l9wtj_gg_._state_normal_l9wtj_gg_:not(.__disabled_l9wtj_gg_)>div:focus{border-color:var(--intergalactic-border-info-active, rgb(135, 150, 239));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));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_l9wtj_gg_._state_normal_l9wtj_gg_:not(.__disabled_l9wtj_gg_)>div:focus{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_._state_normal_l9wtj_gg_:not(.__disabled_l9wtj_gg_)>div:focus{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SInputField_l9wtj_gg_._state_valid_l9wtj_gg_>div{border-color:var(--intergalactic-border-success-active, rgb(0, 185, 145))}@supports (color:color(display-p3 0 0 0%)){.___SInputField_l9wtj_gg_._state_valid_l9wtj_gg_>div{border-color:var(--intergalactic-border-success-active, rgb(0, 185, 145))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_._state_valid_l9wtj_gg_>div{border-color:var(--intergalactic-border-success-active, color(display-p3 0.21847 0.73243 0.56937))}}}.___SInputField_l9wtj_gg_._state_valid_l9wtj_gg_>div:focus{border-color:var(--intergalactic-border-success-active, rgb(0, 185, 145));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));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_l9wtj_gg_._state_valid_l9wtj_gg_>div:focus{border-color:var(--intergalactic-border-success-active, rgb(0, 185, 145));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_._state_valid_l9wtj_gg_>div:focus{border-color:var(--intergalactic-border-success-active, color(display-p3 0.21847 0.73243 0.56937));outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}@supports (color:oklab(0%0 0%)){.___SInputField_l9wtj_gg_._state_valid_l9wtj_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-valid-outline, rgb(0, 190, 142))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_._state_valid_l9wtj_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9))}}}.___SInputField_l9wtj_gg_._state_invalid_l9wtj_gg_>div{border-color:var(--intergalactic-border-critical-active, rgb(255, 99, 100));background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgb(255, 99, 100) 0, rgb(255, 99, 100) 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_l9wtj_gg_._state_invalid_l9wtj_gg_>div{border-color:var(--intergalactic-border-critical-active, rgb(255, 99, 100));background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgb(255, 99, 100) 0, rgb(255, 99, 100) 1px, transparent 0, transparent 50%))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_._state_invalid_l9wtj_gg_>div{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.95478 0.398 0.38923));background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, color(display-p3 0.95478 0.398 0.38923) 0, color(display-p3 0.95478 0.398 0.38923) 1px, transparent 0, transparent 50%))}}}.___SInputField_l9wtj_gg_._state_invalid_l9wtj_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, rgb(255, 99, 100));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));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_l9wtj_gg_._state_invalid_l9wtj_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, rgb(255, 99, 100));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInputField_l9wtj_gg_._state_invalid_l9wtj_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.95478 0.398 0.38923));outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}@supports (color:oklab(0%0 0%)){.___SInputField_l9wtj_gg_._state_invalid_l9wtj_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652))}}.___SInputField_l9wtj_gg_.__readonly_l9wtj_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SInputField_l9wtj_gg_.__disabled_l9wtj_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.4)}',
+    '.___SInputField_13ko1_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_13ko1_gg_>div{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInputField_13ko1_gg_>div{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInputField_13ko1_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457));position:absolute}.___SInputField_13ko1_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_13ko1_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_13ko1_gg_>div:nth-child(even)::before{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SInputField_13ko1_gg_>div:nth-child(even)::before{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SInputField_13ko1_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_13ko1_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_13ko1_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_13ko1_gg_>div>p:not(:empty)::before{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SInputField_13ko1_gg_>div>p:not(:empty)::before{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SInputField_13ko1_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_13ko1_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, rgb(255, 235, 239))}@media (color-gamut:p3){.___SInputField_13ko1_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, color(display-p3 1 0.92002 0.9342))}}}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+1000))>p{padding-left:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px))}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+1000))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+100)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_13ko1_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+1000)::before{padding-left:0}.___SInputField_13ko1_gg_.__showErrors_13ko1_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_13ko1_gg_._size_m_13ko1_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_13ko1)*20px);max-height:calc((var(--maxRows_13ko1) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_13ko1_gg_._size_m_13ko1_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_13ko1_gg_._size_l_13ko1_gg_>div:empty::before,.___SInputField_13ko1_gg_._size_m_13ko1_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_13ko1_gg_._size_l_13ko1_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_13ko1)*24px);max-height:calc((var(--maxRows_13ko1) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_13ko1_gg_._size_l_13ko1_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_13ko1_gg_._state_normal_13ko1_gg_:not(.__disabled_13ko1_gg_)>div:focus{border-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));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_13ko1_gg_._state_normal_13ko1_gg_:not(.__disabled_13ko1_gg_)>div:focus{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInputField_13ko1_gg_._state_normal_13ko1_gg_:not(.__disabled_13ko1_gg_)>div:focus{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SInputField_13ko1_gg_._state_valid_13ko1_gg_>div{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0%)){.___SInputField_13ko1_gg_._state_valid_13ko1_gg_>div{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInputField_13ko1_gg_._state_valid_13ko1_gg_>div{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInputField_13ko1_gg_._state_valid_13ko1_gg_>div:focus{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));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_13ko1_gg_._state_valid_13ko1_gg_>div:focus{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInputField_13ko1_gg_._state_valid_13ko1_gg_>div:focus{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714));outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}@supports (color:oklab(0%0 0%)){.___SInputField_13ko1_gg_._state_valid_13ko1_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-valid-outline, rgb(0, 190, 142))}@media (color-gamut:p3){.___SInputField_13ko1_gg_._state_valid_13ko1_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9))}}}.___SInputField_13ko1_gg_._state_invalid_13ko1_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_13ko1_gg_._state_invalid_13ko1_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_13ko1_gg_._state_invalid_13ko1_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_13ko1_gg_._state_invalid_13ko1_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));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_13ko1_gg_._state_invalid_13ko1_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInputField_13ko1_gg_._state_invalid_13ko1_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56));outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}@supports (color:oklab(0%0 0%)){.___SInputField_13ko1_gg_._state_invalid_13ko1_gg_>div:focus{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652))}}.___SInputField_13ko1_gg_.__readonly_13ko1_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SInputField_13ko1_gg_.__disabled_13ko1_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.4)}',
     /*__inner_css_end__*/
-    "l9wtj_gg_"
+    "13ko1_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SInputField": "___SInputField_l9wtj_gg_",
-    "_showErrors": "__showErrors_l9wtj_gg_",
-    "_readonly": "__readonly_l9wtj_gg_",
-    "_disabled": "__disabled_l9wtj_gg_",
-    "_size_m": "_size_m_l9wtj_gg_",
-    "--minRows": "--minRows_l9wtj",
-    "--maxRows": "--maxRows_l9wtj",
-    "_size_l": "_size_l_l9wtj_gg_",
-    "_state_normal": "_state_normal_l9wtj_gg_",
-    "_state_valid": "_state_valid_l9wtj_gg_",
-    "_state_invalid": "_state_invalid_l9wtj_gg_"
+    "__SInputField": "___SInputField_13ko1_gg_",
+    "_showErrors": "__showErrors_13ko1_gg_",
+    "_readonly": "__readonly_13ko1_gg_",
+    "_disabled": "__disabled_13ko1_gg_",
+    "_size_m": "_size_m_13ko1_gg_",
+    "--minRows": "--minRows_13ko1",
+    "--maxRows": "--maxRows_13ko1",
+    "_size_l": "_size_l_13ko1_gg_",
+    "_state_normal": "_state_normal_13ko1_gg_",
+    "_state_valid": "_state_valid_13ko1_gg_",
+    "_state_invalid": "_state_invalid_13ko1_gg_"
   })
 );
 var InputField = /* @__PURE__ */ (function(_Component) {
@@ -105,7 +105,8 @@ var InputField = /* @__PURE__ */ (function(_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$containerRef$cu, _this2 = this;
-      var _this$asProps = this.asProps, autoFocus = _this$asProps.autoFocus, disabled = _this$asProps.disabled, readonly = _this$asProps.readonly;
+      var _this$asProps = this.asProps, autoFocus = _this$asProps.autoFocus, disabled = _this$asProps.disabled;
+      _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 = {

package/lib/esm/components/InputField/inputField.shadow.css

@@ -159,7 +159,7 @@ SInputField[size='l']>div {
 
 SInputField[state='normal']:not([disabled])>div {
   &:focus {
-    border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
+    border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
     @mixin focus-outline-mixin {
       outline-offset: 0;
       transition-property: outline-color, outline-width;
@@ -168,10 +168,10 @@ SInputField[state='normal']:not([disabled])>div {
 }
 
 SInputField[state='valid']>div {
-  border-color: var(--intergalactic-border-success-active, oklch(0.7 0.166 170));
+  border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
 
   &:focus {
-    border-color: var(--intergalactic-border-success-active, oklch(0.7 0.166 170));
+    border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
     @mixin focus-outline-mixin {
       outline-offset: 0;
       transition-property: outline-color, outline-width;
@@ -181,10 +181,10 @@ SInputField[state='valid']>div {
 }
 
 SInputField[state='invalid']>div {
-  border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
+  border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
 
   &:focus {
-    border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
+    border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
     @mixin focus-outline-mixin {
       outline-offset: 0;
       transition-property: outline-color, outline-width;
@@ -192,7 +192,7 @@ SInputField[state='invalid']>div {
     outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
   }
 
-  background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.7 0.21 23) 0, oklch(0.7 0.21 23) 1px, transparent 0, transparent 50%));
+  background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, oklch(0.628 0.258 29 / 0.56) 0, oklch(0.628 0.258 29 / 0.56) 1px, transparent 0, transparent 50%));
   background-size: 6px 6px;
   background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
   border-bottom-left-radius: var(--intergalactic-control-rounded, 6px);

package/lib/types/BulkTextarea.types.d.ts

@@ -1,10 +1,9 @@
-import type { BoxProps } from '@semcore/base-components';
 import type Button from '@semcore/button';
 import type { Intergalactic } from '@semcore/core';
+import type { BoxProps } from '@semcore/flex-box';
 import type { CounterProps } from './components/Counter';
 import type { ErrorsNavigationProps } from './components/ErrorsNavigation';
 import type { InputFieldProps } from './components/InputField/InputField';
-import type { PasteProps } from './components/InputField/InputField.types';
 export type BulkTextareaProps<T extends string | string[]> = {
     /** The current value */
     value?: InputFieldProps<T>['value'];
@@ -39,7 +38,7 @@ export type BulkTextareaProps<T extends string | string[]> = {
     /** List of errors */
     errors?: InputFieldProps<T>['errors'];
     /** Defines whether to show errors or not */
-    showErrors?: InputFieldProps<T>['showErrors'];
+    showErrors?: boolean;
     /** Internal */
     onErrorsChange?: InputFieldProps<T>['onErrorsChange'];
     /** Internal */
@@ -48,91 +47,8 @@ export type BulkTextareaProps<T extends string | string[]> = {
     onImmediatelyChange?: InputFieldProps<T>['onImmediatelyChange'];
 };
 type BulkTextareaComponent = (<T extends string | string[]>(props: Intergalactic.InternalTypings.ComponentProps<'div', 'div', BoxProps & BulkTextareaProps<T>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', {}>;
-export type BulkTextareaInputFieldProps<T extends string | string[] = string | string[]> = BoxProps & {
-    /**
-     * Unique id
-     */
-    id?: string;
-    /**
-     * Placeholder for field
-     */
-    placeholder?: string;
-    /**
-     * String to render in textarea. OnChanging value, it will go throw paste pipeline
-     */
-    value?: T;
-    /**
-     * This component doesn't have default onChange callback, because we think that you need only the result after every changes/fixes
-     */
-    onBlur?: (value: T, e: Event) => void;
-    /**
-     * Size of component
-     * @default m
-     */
-    size?: 'm' | 'l';
-    /**
-     * State for show errors or valid(green) borders
-     * @default normal
-     */
-    state?: 'normal' | 'valid' | 'invalid';
-    /**
-     * Flag for disabling field
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Flag for readonly field
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * Min rows
-     * @default 2
-     */
-    minRows?: number;
-    /**
-     * Max rows
-     * @default 10
-     */
-    maxRows?: number;
-    /**
-     * List of available points to validate value
-     * @default blur
-     */
-    validateOn?: ('blur' | 'blurLine' | 'paste')[];
-    /**
-     * Function to validate line
-     */
-    lineValidation?: (line: string, lines: string[]) => {
-        isValid: boolean;
-        errorMessage: string;
-    };
-    /**
-     * Message for display error about whole field, not only one line.
-     * If set empty string, field will not have invalid state.
-     */
-    commonErrorMessage: string;
-    /**
-     * Delimiters (event.key) for lines
-     * @default Enter
-     */
-    linesDelimiters?: string[];
-    /**
-     * Count of max lines in badge
-     * @default 100
-     */
-    maxLines?: number;
-    /**
-     * Paste props
-     */
-    pasteProps?: PasteProps;
-    /**
-     * Function for process line after it was blurred
-     */
-    lineProcessing?: (line: string, lines: string[]) => string;
-};
 export type BulkTextareaType<T extends string | string[]> = BulkTextareaComponent & {
-    InputField: Intergalactic.Component<'div', BulkTextareaInputFieldProps<T>>;
+    InputField: Intergalactic.Component<'div', Pick<InputFieldProps<T>, 'commonErrorMessage' | 'id'> & Partial<BulkTextareaProps<T>> & BoxProps>;
     Counter: Intergalactic.Component<'div', Partial<CounterProps>>;
     ClearAll: typeof Button;
     ErrorsNavigation: Intergalactic.Component<'div', Partial<ErrorsNavigationProps>>;

package/lib/types/components/InputField/InputField.d.ts

@@ -1,5 +1,5 @@
-import type { PopperContext } from '@semcore/base-components';
 import { Component } from '@semcore/core';
+import type { PopperContext } from '@semcore/popper';
 import React from 'react';
 import type { InputFieldProps, ErrorItem } from './InputField.types';
 type IndexKeys = 'keyboardLineIndex' | 'mouseLineIndex';
@@ -8,11 +8,7 @@ type State = {
 } & {
     visibleErrorPopper: boolean;
 };
-declare class InputField<T extends string | string[]> extends Component<InputFieldProps<T>, typeof InputField.enhance, {
-    value: null;
-    linesCount: null;
-    errorIndex: null;
-}, {}, State> {
+declare class InputField<T extends string | string[]> extends Component<InputFieldProps<T>, {}, State, typeof InputField.enhance> {
     static displayName: string;
     static style: {
         [key: string]: string;

package/lib/types/components/InputField/InputField.types.d.ts

@@ -1,5 +1,4 @@
-import type { BulkTextareaInputFieldProps } from '../../BulkTextarea.types';
-export type PasteProps = {
+type PasteProps = {
     /**
      * @default '\n'
      */
@@ -18,27 +17,151 @@ export type ErrorItem = {
     lineNode?: Node;
     errorMessage: string;
 };
-export type InputFieldProps<T extends string | string[]> = BulkTextareaInputFieldProps<T> & Required<Pick<BulkTextareaInputFieldProps<T>, 'value' | 'onBlur' | 'size' | 'state' | 'minRows' | 'maxRows' | 'validateOn' | 'maxLines' | 'pasteProps'>> & {
+export type InputFieldProps<T extends string | string[]> = {
+    /**
+     * Unique id
+     */
+    id?: string;
+    /**
+     * Placeholder for field
+     */
+    placeholder?: string;
+    /**
+     * String to render in textarea. OnChanging value, it will go throw paste pipeline
+     */
+    value: T;
+    /**
+     * This component doesn't have default onChange callback, because we think that you need only the result after every changes/fixes
+     */
+    onBlur: (value: T, e: Event) => void;
+    /**
+     * Size of component
+     * @default m
+     */
+    size: 'm' | 'l';
+    /**
+     * State for show errors or valid(green) borders
+     * @default normal
+     */
+    state: 'normal' | 'valid' | 'invalid';
+    /**
+     * Flag for disabling field
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Flag for readonly field
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Min rows
+     * @default 2
+     */
+    minRows: number;
+    /**
+     * Max rows
+     * @default 10
+     */
+    maxRows: number;
+    /**
+     * List of available points to validate value
+     * @default blur
+     */
+    validateOn: ('blur' | 'blurLine' | 'paste')[];
+    /**
+     * Function to validate line
+     */
+    lineValidation?: (line: string, lines: string[]) => {
+        isValid: boolean;
+        errorMessage: string;
+    };
+    /**
+     * Message for display error about whole field, not only one line.
+     * If set empty string, field will not have invalid state.
+     */
+    commonErrorMessage: string;
+    /**
+     * Delimiters (event.key) for lines
+     * @default Enter
+     */
+    linesDelimiters?: string[];
+    /**
+     * Count of max lines in badge
+     * @default 100
+     */
+    maxLines: number;
+    /**
+     * Paste props
+     */
+    pasteProps: PasteProps;
+    /**
+     * Function for process line after it was blurred
+     */
+    lineProcessing?: (line: string, lines: string[]) => string;
+    /** Defines whether the input should receive focus on initial render */
+    autoFocus?: boolean;
+    /**
+     * Internal
+     */
     prevError: ErrorItem;
+    /**
+     * Internal
+     */
     currentLineIndex: number;
+    /**
+     * Internal
+     */
     linesCount: number;
+    /**
+     * Internal
+     */
     onChangeLineIndex: (newIndex: number) => void;
+    /**
+     * Internal
+     */
     onChangeLinesCount: (rowsCount: number) => void;
+    /**
+     * Internal
+     */
     showErrors: boolean;
-    /** List of errors in rows */
+    /**
+     * Internal
+     * List of errors in rows
+     */
     errors: ErrorItem[];
-    /** Select row with error */
+    /**
+     * Internal
+     * Select row with error
+     */
     errorIndex: number;
-    /** Flag for select all row */
+    /**
+     * Internal
+     * Flag for select all row
+     */
     highlightErrorIndex: boolean;
+    /**
+     * Internal
+     */
     onErrorsChange: (errors: ErrorItem[]) => void;
+    /**
+     * Internal
+     */
     onShowErrorsChange: (showErrors: boolean) => void;
+    /**
+     * Internal
+     */
     onErrorIndexChange: (errorIndex: number) => void;
     /**
-   * Return lines from textarea immediately they changed (uses mutation observer on textarea node under the hood)
-   * Throttling may be required during processing this cb
-   */
+     * Return lines from textarea immediately they changed (uses mutation observer on textarea node under the hood)
+     * Throttling may be required during processing this cb
+     * Internal
+     */
     onImmediatelyChange?: (lines: string[], value: string) => void;
 } & {
+    /**
+     * Internal
+     */
     'aria-describedby'?: string;
 };
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/bulk-textarea",
   "description": "Semrush BulkTextarea Component",
-  "version": "16.8.0",
+  "version": "16.8.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,13 +14,13 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "16.1.0",
-    "@semcore/button": "16.1.0",
-    "@semcore/typography": "16.4.0",
-    "@semcore/counter": "16.1.0",
-    "@semcore/icon": "16.8.0",
-    "@semcore/popper": "16.1.0",
-    "@semcore/tooltip": "16.1.0",
+    "@semcore/flex-box": "16.1.1",
+    "@semcore/button": "16.1.1",
+    "@semcore/typography": "16.4.1",
+    "@semcore/counter": "16.1.1",
+    "@semcore/icon": "16.8.1",
+    "@semcore/popper": "16.1.1",
+    "@semcore/tooltip": "16.1.1",
     "dompurify": "3.2.3"
   },
   "peerDependencies": {
@@ -33,8 +33,8 @@
   },
   "devDependencies": {
     "@types/dompurify": "3.2.0",
-    "@semcore/testing-utils": "1.0.0",
-    "@semcore/core": "16.6.0"
+    "@semcore/core": "16.6.0",
+    "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=ts && pnpm vite build"