@semcore/input 16.1.2-prerelease.9 → 16.2.0-prerelease.1

package/lib/esm/Input.mjs

@@ -1,183 +1,181 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 { createComponent, sstyled, Component, lastInteraction, assignProps } from "@semcore/core";
-import { NeighborLocation, Box, InvalidStateBox } from "@semcore/base-components";
+import { createComponent, sstyled, assignProps, Component, lastInteraction } from "@semcore/core";
+import autoFocusEnhance from "@semcore/core/lib/utils/enhances/autoFocusEnhance";
+import { Box, InvalidStateBox } from "@semcore/flex-box";
+import NeighborLocation from "@semcore/neighbor-location";
 import React from "react";
 /*!__reshadow-styles__:"./style/input.shadow.css"*/
-const style = (
+var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SInput_1yq06_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1yq06_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1yq06_gg_ input:-webkit-autofill~.___SOutline_1yq06_gg_{background-color:#faffbd}.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus,.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus-visible,.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus-visible::after,.___SInput_1yq06_gg_ .___SValue_1yq06_gg_:focus::after{outline:0}.___SValue_1yq06_gg_{min-width:0;width:100%;height:100%;padding:0;border:0;box-sizing:border-box;color:var(--intergalactic-text-primary, #191b23);font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:0 0}.___SValue_1yq06_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1yq06_gg_::placeholder{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SValue_1yq06_gg_:not(:disabled):-moz-read-only~.___SOutline_1yq06_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1yq06_gg_:not(:disabled):read-only~.___SOutline_1yq06_gg_{background:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SValue_1yq06_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SInput_1yq06_gg_.__disabled_1yq06_gg_ .___SOutline_1yq06_gg_,.___SValue_1yq06_gg_:disabled~.___SOutline_1yq06_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SOutline_1yq06_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:var(--intergalactic-control-rounded, 6px);z-index:-1;background:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SAddon_1yq06_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 var(--intergalactic-spacing-2x, 8px);height:100%;color:var(--intergalactic-icon-secondary-neutral, #a9abb6)}.___SAddon_1yq06_gg_.__interactive_1yq06_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1yq06_gg_.__interactive_1yq06_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #878992)}}.___SAddon_1yq06_gg_.__disabled_1yq06_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_1yq06_gg_._size_m_1yq06_gg_:not(.___SButton_1yq06_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1yq06_gg_._size_l_1yq06_gg_._neighborLocation_right_1yq06_gg_:not(.___SButton_1yq06_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SAddon_1yq06_gg_._size_l_1yq06_gg_._neighborLocation_left_1yq06_gg_:not(.___SButton_1yq06_gg_){padding:0 var(--intergalactic-spacing-3x, 12px)0 var(--intergalactic-spacing-2x, 8px)}.___SInput_1yq06_gg_ .___SAddon_1yq06_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1yq06_gg_._size_m_1yq06_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1yq06_gg_._size_l_1yq06_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1yq06_gg_._size_m_1yq06_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1yq06_gg_._size_l_1yq06_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible){z-index:1}.___SInput_1yq06_gg_._state_normal_1yq06_gg_ .___SOutline_1yq06_gg_{border-color:var(--intergalactic-border-primary, #c4c7cf)}.___SInput_1yq06_gg_._state_normal_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible) .___SOutline_1yq06_gg_{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;border-color:var(--intergalactic-border-info-active, #006dca)}.___SInput_1yq06_gg_._state_valid_1yq06_gg_ .___SOutline_1yq06_gg_{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInput_1yq06_gg_._state_valid_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible) .___SOutline_1yq06_gg_{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;border-color:var(--intergalactic-border-success-active, #007c65);outline-color:var(--intergalactic-keyboard-focus-valid-outline, #009f81)}.___SInput_1yq06_gg_._state_invalid_1yq06_gg_ .___SOutline_1yq06_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SInput_1yq06_gg_._state_invalid_1yq06_gg_:has(.___SValue_1yq06_gg_:focus-visible) .___SOutline_1yq06_gg_{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;border-color:var(--intergalactic-border-critical-active, #d1002f);outline-color:var(--intergalactic-keyboard-focus-invalid-outline, #ff4953)}.___SInput_1yq06_gg_._neighborLocation_right_1yq06_gg_ .___SOutline_1yq06_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1yq06_gg_._neighborLocation_both_1yq06_gg_ .___SOutline_1yq06_gg_{border-radius:0;border-left:none}.___SInput_1yq06_gg_._neighborLocation_left_1yq06_gg_ .___SOutline_1yq06_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1yq06_gg_._neighborLocation_right_1yq06_gg_{padding-right:0}.___SValue_1yq06_gg_._neighborLocation_both_1yq06_gg_{padding-left:0;padding-right:0}.___SValue_1yq06_gg_._neighborLocation_left_1yq06_gg_{padding-left:0}",
+    ".___SInput_1lwg8_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1lwg8_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1lwg8_gg_ input:-webkit-autofill~.___SOutline_1lwg8_gg_{background-color:#faffbd}.___SInput_1lwg8_gg_ .___SValue_1lwg8_gg_:focus,.___SInput_1lwg8_gg_ .___SValue_1lwg8_gg_:focus-visible,.___SInput_1lwg8_gg_ .___SValue_1lwg8_gg_:focus-visible::after,.___SInput_1lwg8_gg_ .___SValue_1lwg8_gg_:focus::after{outline:0}.___SValue_1lwg8_gg_{min-width:0;width:100%;height:100%;padding:0;border:0;box-sizing:border-box;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:0 0}.___SValue_1lwg8_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1lwg8_gg_::placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1lwg8_gg_:not(:disabled):-moz-read-only~.___SOutline_1lwg8_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1lwg8_gg_:not(:disabled):read-only~.___SOutline_1lwg8_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1lwg8_gg_:disabled{-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SInput_1lwg8_gg_.__disabled_1lwg8_gg_ .___SOutline_1lwg8_gg_,.___SValue_1lwg8_gg_:disabled~.___SOutline_1lwg8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SOutline_1lwg8_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:var(--intergalactic-control-rounded, 6px);z-index:-1;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255))}.___SAddon_1lwg8_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 var(--intergalactic-spacing-2x, 8px);height:100%;color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@supports (color:color(display-p3 0 0 0%)){.___SAddon_1lwg8_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SAddon_1lwg8_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SAddon_1lwg8_gg_.__interactive_1lwg8_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1lwg8_gg_.__interactive_1lwg8_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@supports (color:color(display-p3 0 0 0%)){.___SAddon_1lwg8_gg_.__interactive_1lwg8_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SAddon_1lwg8_gg_.__interactive_1lwg8_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}}.___SAddon_1lwg8_gg_.__disabled_1lwg8_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_1lwg8_gg_._size_m_1lwg8_gg_:not(.___SButton_1lwg8_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1lwg8_gg_._size_l_1lwg8_gg_:not(.___SButton_1lwg8_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1lwg8_gg_ .___SAddon_1lwg8_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1lwg8_gg_._size_m_1lwg8_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1lwg8_gg_._size_l_1lwg8_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1lwg8_gg_._size_m_1lwg8_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1lwg8_gg_._size_l_1lwg8_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible){z-index:1}.___SInput_1lwg8_gg_._state_normal_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1lwg8_gg_._state_normal_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInput_1lwg8_gg_._state_normal_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInput_1lwg8_gg_._state_normal_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{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;border-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1lwg8_gg_._state_normal_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInput_1lwg8_gg_._state_normal_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{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;border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469));border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}@supports (color:oklab(0%0 0%)){.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-valid-outline, rgb(0, 190, 142))}@media (color-gamut:p3){.___SInput_1lwg8_gg_._state_valid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9))}}}.___SInput_1lwg8_gg_._state_invalid_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1lwg8_gg_._state_invalid_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1lwg8_gg_._state_invalid_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1lwg8_gg_._state_invalid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{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;border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0%)){.___SInput_1lwg8_gg_._state_invalid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469));border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1lwg8_gg_._state_invalid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469));border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}@supports (color:oklab(0%0 0%)){.___SInput_1lwg8_gg_._state_invalid_1lwg8_gg_:has(.___SValue_1lwg8_gg_:focus-visible) .___SOutline_1lwg8_gg_{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652))}}.___SInput_1lwg8_gg_._neighborLocation_right_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1lwg8_gg_._neighborLocation_both_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-radius:0;border-left:none}.___SInput_1lwg8_gg_._neighborLocation_left_1lwg8_gg_ .___SOutline_1lwg8_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1lwg8_gg_._neighborLocation_right_1lwg8_gg_{padding-right:0}.___SValue_1lwg8_gg_._neighborLocation_both_1lwg8_gg_{padding-left:0;padding-right:0}.___SValue_1lwg8_gg_._neighborLocation_left_1lwg8_gg_{padding-left:0}",
     /*__inner_css_end__*/
-    "1yq06_gg_"
+    "1lwg8_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SInput": "___SInput_1yq06_gg_",
-    "_disabled": "__disabled_1yq06_gg_",
-    "__SOutline": "___SOutline_1yq06_gg_",
-    "__SValue": "___SValue_1yq06_gg_",
-    "__SAddon": "___SAddon_1yq06_gg_",
-    "_size_m": "_size_m_1yq06_gg_",
-    "__SButton": "___SButton_1yq06_gg_",
-    "_size_l": "_size_l_1yq06_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_1yq06_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_1yq06_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_1yq06_gg_",
-    "_interactive": "__interactive_1yq06_gg_",
-    "_state_normal": "_state_normal_1yq06_gg_",
-    "_state_valid": "_state_valid_1yq06_gg_",
-    "_state_invalid": "_state_invalid_1yq06_gg_"
+    "__SInput": "___SInput_1lwg8_gg_",
+    "_disabled": "__disabled_1lwg8_gg_",
+    "__SOutline": "___SOutline_1lwg8_gg_",
+    "__SValue": "___SValue_1lwg8_gg_",
+    "__SAddon": "___SAddon_1lwg8_gg_",
+    "_size_m": "_size_m_1lwg8_gg_",
+    "__SButton": "___SButton_1lwg8_gg_",
+    "_size_l": "_size_l_1lwg8_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_1lwg8_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_1lwg8_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1lwg8_gg_",
+    "_interactive": "__interactive_1lwg8_gg_",
+    "_state_normal": "_state_normal_1lwg8_gg_",
+    "_state_valid": "_state_valid_1lwg8_gg_",
+    "_state_invalid": "_state_invalid_1lwg8_gg_"
   })
 );
-class Input extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "inputRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(this, "handleMouseDownAddon", (event) => {
-      var _a;
+var Input = /* @__PURE__ */ (function(_Component) {
+  function Input2() {
+    var _this;
+    _classCallCheck(this, Input2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Input2, [].concat(args));
+    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "handleMouseDownAddon", function(event) {
+      var _this$inputRef$curren;
       event.preventDefault();
-      (_a = this.inputRef.current) == null ? void 0 : _a.focus();
+      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 || _this$inputRef$curren.focus();
     });
-    _defineProperty(this, "handleClick", () => {
+    _defineProperty(_this, "handleClick", function() {
       if (!lastInteraction.isKeyboard) return;
-      setTimeout(() => {
-        var _a;
+      setTimeout(function() {
         if (document.activeElement === document.body) {
-          (_a = this.inputRef.current) == null ? void 0 : _a.focus();
+          var _this$inputRef$curren2;
+          (_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 || _this$inputRef$curren2.focus();
         }
       }, 0);
     });
+    return _this;
   }
-  getAddonProps() {
-    const {
-      disabled,
-      size
-    } = this.asProps;
-    return {
-      disabled,
-      onMouseDown: this.handleMouseDownAddon,
-      onClick: this.handleClick,
-      size
-    };
-  }
-  getValueProps() {
-    const {
-      size,
-      disabled,
-      state,
-      role,
-      placeholder,
-      // these props might be passed from the <Select /> component
-      "aria-haspopup": ariaHaspopup,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-autocomplete": ariaAutocomplete,
-      "aria-owns": ariaOwns,
-      "aria-activedescendant": ariaActivedescendant
-    } = this.asProps;
-    return {
-      "ref": this.inputRef,
-      size,
-      disabled,
-      state,
-      role,
-      placeholder,
-      "aria-haspopup": ariaHaspopup,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-autocomplete": ariaAutocomplete,
-      "aria-owns": ariaOwns,
-      "aria-activedescendant": ariaActivedescendant
-    };
-  }
-  render() {
-    var _ref = this.asProps;
-    const SInput = Box;
-    const SOutline = "div";
-    const {
-      Children,
-      styles,
-      neighborLocation,
-      controlsLength,
-      state
-    } = this.asProps;
-    return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
-      neighborLocation
-    }, (neighborLocation2) => {
-      var _ref4;
-      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", {
-        ...assignProps({
+  _inherits(Input2, _Component);
+  return _createClass(Input2, [{
+    key: "getAddonProps",
+    value: function getAddonProps() {
+      var _this$asProps = this.asProps, disabled = _this$asProps.disabled, size = _this$asProps.size;
+      return {
+        disabled,
+        onMouseDown: this.handleMouseDownAddon,
+        onClick: this.handleClick,
+        size
+      };
+    }
+  }, {
+    key: "getValueProps",
+    value: function getValueProps() {
+      var _this$asProps2 = this.asProps, size = _this$asProps2.size, disabled = _this$asProps2.disabled, state = _this$asProps2.state, role = _this$asProps2.role, placeholder = _this$asProps2.placeholder, ariaHaspopup = _this$asProps2["aria-haspopup"], ariaControls = _this$asProps2["aria-controls"], ariaExpanded = _this$asProps2["aria-expanded"], ariaAutocomplete = _this$asProps2["aria-autocomplete"], ariaOwns = _this$asProps2["aria-owns"], ariaActivedescendant = _this$asProps2["aria-activedescendant"];
+      return {
+        "ref": this.inputRef,
+        size,
+        disabled,
+        state,
+        role,
+        placeholder,
+        "aria-haspopup": ariaHaspopup,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-autocomplete": ariaAutocomplete,
+        "aria-owns": ariaOwns,
+        "aria-activedescendant": ariaActivedescendant
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps;
+      var SInput = Box;
+      var SOutline = "div";
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, neighborLocation = _this$asProps3.neighborLocation, controlsLength = _this$asProps3.controlsLength, state = _this$asProps3.state;
+      return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
+        neighborLocation
+      }, function(neighborLocation2) {
+        var _ref4;
+        return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
           "neighborLocation": neighborLocation2,
           "__excludeProps": ["role", "aria-haspopup", "aria-controls", "aria-expanded", "placeholder", "aria-autocomplete", "aria-owns", "aria-activedescendant", "tabIndex"]
-        }, _ref)
-      }), /* @__PURE__ */ React.createElement(NeighborLocation, _ref4.cn("NeighborLocation", {
-        "controlsLength": controlsLength
-      }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))), /* @__PURE__ */ React.createElement(SOutline, _ref4.cn("SOutline", {}), state === "invalid" && /* @__PURE__ */ React.createElement(InvalidStateBox, _ref4.cn("InvalidStateBox", {}))));
-    });
-  }
-}
+        }, _ref))), /* @__PURE__ */ React.createElement(NeighborLocation, _ref4.cn("NeighborLocation", {
+          "controlsLength": controlsLength
+        }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))), /* @__PURE__ */ React.createElement(SOutline, _ref4.cn("SOutline", {}), state === "invalid" && /* @__PURE__ */ React.createElement(InvalidStateBox, _ref4.cn("InvalidStateBox", {}))));
+      });
+    }
+  }]);
+})(Component);
 _defineProperty(Input, "displayName", "Input");
 _defineProperty(Input, "defaultProps", {
   size: "m",
   state: "normal"
 });
 _defineProperty(Input, "style", style);
-class Value extends Component {
-  uncontrolledProps() {
-    return {
-      value: (e) => e.target.value
-    };
+var Value = /* @__PURE__ */ (function(_Component2) {
+  function Value2() {
+    _classCallCheck(this, Value2);
+    return _callSuper(this, Value2, arguments);
   }
-  render() {
-    var _ref2 = this.asProps;
-    const SValue = Box;
-    const {
-      styles,
-      neighborLocation,
-      state
-    } = this.asProps;
-    return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
-      neighborLocation
-    }, (neighborLocation2) => {
-      var _ref5;
-      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", {
-        ...assignProps({
+  _inherits(Value2, _Component2);
+  return _createClass(Value2, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        value: function value(e) {
+          return e.target.value;
+        }
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref2 = this.asProps;
+      var SValue = Box;
+      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, neighborLocation = _this$asProps4.neighborLocation, state = _this$asProps4.state;
+      return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
+        neighborLocation
+      }, function(neighborLocation2) {
+        var _ref5;
+        return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
           "inAfterOutline": true,
           "neighborLocation": neighborLocation2,
           "tag": "input",
           "type": "text",
           "aria-invalid": state === "invalid"
-        }, _ref2)
-      }));
-    });
-  }
-}
+        }, _ref2))));
+      });
+    }
+  }]);
+})(Component);
 _defineProperty(Value, "defaultProps", {
   defaultValue: ""
 });
+_defineProperty(Value, "enhance", [autoFocusEnhance()]);
 function Addon(props) {
   var _ref3 = arguments[0];
-  const SAddon = Box;
-  const {
-    Children,
-    styles,
-    neighborLocation
-  } = props;
+  var SAddon = Box;
+  var Children = props.Children, styles = props.styles, neighborLocation = props.neighborLocation;
   return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
     neighborLocation
-  }, (neighborLocation2) => {
+  }, function(neighborLocation2) {
     var _ref6;
-    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", {
-      ...assignProps({
-        "neighborLocation": neighborLocation2
-      }, _ref3)
-    }), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({
+      "neighborLocation": neighborLocation2
+    }, _ref3))), /* @__PURE__ */ React.createElement(Children, _ref6.cn("Children", {})));
   });
 }
-const Input_default = createComponent(Input, {
+const Input$1 = createComponent(Input, {
   Addon,
   Value
 });
 export {
-  Input_default as default
+  Input$1 as default
 };

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

@@ -37,30 +37,30 @@ SValue {
   padding: 0;
   border: none;
   box-sizing: border-box;
-  color: var(--intergalactic-text-primary, #191b23);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   font-size: inherit;
   text-overflow: ellipsis;
   font-family: inherit;
   background: transparent;
 
   &::placeholder {
-    color: var(--intergalactic-text-placeholder, #8a8e9b);
+    color: var(--intergalactic-text-placeholder, oklch(0.098 0.023 157.4 / 0.457));
   }
 
   &:not(:disabled):read-only~SOutline {
-    background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
+    background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
   }
 
   &:disabled {
     user-select: none;
-    opacity: var(--intergalactic-disabled-opacity, 0.3);
+    opacity: var(--intergalactic-disabled-opacity, 0.4);
   }
 }
 
 SInput[disabled] SOutline,
 SValue:disabled~SOutline {
 
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   pointer-events: none;
 }
@@ -74,7 +74,7 @@ SOutline {
   border: 1px solid;
   border-radius: var(--intergalactic-control-rounded, 6px);
   z-index: -1;
-  background: var(--intergalactic-bg-primary-neutral, #ffffff);
+  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
 }
 
 SAddon {
@@ -84,19 +84,19 @@ SAddon {
   flex: 0 0 auto;
   padding: 0 var(--intergalactic-spacing-2x, 8px);
   height: 100%;
-  color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
+  color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
 }
 
 SAddon[interactive] {
   cursor: pointer;
 
   &:hover {
-    color: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
+    color: var(--intergalactic-icon-secondary-neutral-hover-active, oklch(0.1 0.023 159.1 / 0.433));
   }
 }
 
 SAddon[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
   pointer-events: none;
 }
@@ -105,14 +105,10 @@ SAddon[size='m']:not(SButton) {
   padding: 0 var(--intergalactic-spacing-2x, 8px);
 }
 
-SAddon[size='l'][neighborLocation='right']:not(SButton) {
+SAddon[size='l']:not(SButton) {
   padding: 0 var(--intergalactic-spacing-2x, 8px) 0 var(--intergalactic-spacing-3x, 12px);
 }
 
-SAddon[size='l'][neighborLocation='left']:not(SButton) {
-  padding: 0 var(--intergalactic-spacing-3x, 12px) 0 var(--intergalactic-spacing-2x, 8px);
-}
-
 SInput SAddon:nth-last-child(2) {
   margin-right: -1px;
 }
@@ -141,7 +137,7 @@ SInput:has(SValue:focus-visible) {
 
 SInput[state='normal'] {
   & SOutline {
-    border-color: var(--intergalactic-border-primary, #c4c7cf);
+    border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
   &:has(SValue:focus-visible) SOutline {
@@ -149,13 +145,13 @@ SInput[state='normal'] {
       outline-offset: 0;
       transition-property: outline-color, outline-width;
     }
-    border-color: var(--intergalactic-border-info-active, #006dca);
+    border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
   }
 }
 
 SInput[state='valid'] {
   & SOutline {
-    border-color: var(--intergalactic-border-success-active, #007c65);
+    border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
   }
 
   &:has(SValue:focus-visible) SOutline {
@@ -163,14 +159,14 @@ SInput[state='valid'] {
       outline-offset: 0;
       transition-property: outline-color, outline-width;
     }
-    border-color: var(--intergalactic-border-success-active, #007c65);
-    outline-color: var(--intergalactic-keyboard-focus-valid-outline, #009f81);
+    border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
+    outline-color: var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9));
   }
 }
 
 SInput[state='invalid'] {
   & SOutline {
-    border-color: var(--intergalactic-border-critical-active, #d1002f);
+    border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
   }
 
   &:has(SValue:focus-visible) SOutline {
@@ -178,8 +174,8 @@ SInput[state='invalid'] {
       outline-offset: 0;
       transition-property: outline-color, outline-width;
     }
-    border-color: var(--intergalactic-border-critical-active, #d1002f);
-    outline-color: var(--intergalactic-keyboard-focus-invalid-outline, #ff4953);
+    border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
+    outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
   }
 }
 

package/lib/types/index.d.ts

@@ -1,9 +1,13 @@
-import type { BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
-import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { Intergalactic, PropGetterFn, UnknownProperties } from '@semcore/core';
+import type { WithAutoFocusEnhanceProps } from '@semcore/core/lib/utils/enhances/autoFocusEnhance';
+import type { BoxProps } from '@semcore/flex-box';
+import type { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
 import type React from 'react';
 
 export type InputSize = 'm' | 'l';
 
+/** @deprecated */
+export interface IInputProps extends InputProps, UnknownProperties {}
 export type InputProps = BoxProps &
   NeighborItemProps &
   NeighborLocationProps & {
@@ -23,8 +27,11 @@ export type InputProps = BoxProps &
     state?: 'normal' | 'invalid' | 'valid';
   };
 
+/** @deprecated */
+export interface IInputValueProps extends InputValueProps, UnknownProperties {}
 export type InputValueProps = BoxProps &
-  NeighborItemProps & {
+  NeighborItemProps &
+  WithAutoFocusEnhanceProps & {
     /**
      * Input value
      */
@@ -37,6 +44,10 @@ export type InputValueProps = BoxProps &
      * Handler for changing the value
      */
     onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
+    /**
+     * @deprecated Set `disabled` on `Input` instead.
+     * */
+    disabled?: boolean;
     /**
      * Sets the input to the read-only state
      * */
@@ -50,13 +61,10 @@ export type InputValueProps = BoxProps &
      * Placeholder for input
      */
     placeholder?: string;
-    /**
-     * Flag to enable autofocusing after component mounting
-     * @default false
-     */
-    autoFocus?: boolean;
   };
 
+/** @deprecated */
+export interface IInputAddonProps extends InputAddonProps, UnknownProperties {}
 export type InputAddonProps = BoxProps &
   NeighborItemProps & {
     /**
@@ -74,6 +82,8 @@ export type InputAddonProps = BoxProps &
     size?: InputSize;
   };
 
+/** @deprecated */
+export interface IInputCtx extends InputCtx, UnknownProperties {}
 export type InputCtx = {
   getValueProps: PropGetterFn;
   getAddonProps: PropGetterFn;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/input",
   "description": "Semrush Input Component",
-  "version": "16.1.2-prerelease.9",
+  "version": "16.2.0-prerelease.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -13,8 +13,12 @@
     "import": "./lib/esm/index.mjs",
     "types": "./lib/types/index.d.ts"
   },
+  "dependencies": {
+    "@semcore/flex-box": "16.1.0-prerelease.1",
+    "@semcore/neighbor-location": "16.1.0-prerelease.1"
+  },
   "peerDependencies": {
-    "@semcore/base-components": "^16.4.3-prerelease.9"
+    "@semcore/base-components": "^16.6.0-prerelease.1"
   },
   "repository": {
     "type": "git",
@@ -22,10 +26,9 @@
     "directory": "semcore/input"
   },
   "devDependencies": {
-    "@semcore/core": "16.5.1",
-    "@semcore/base-components": "16.4.3-prerelease.9",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "16.7.2-prerelease.9"
+    "@semcore/core": "16.6.0-prerelease.1",
+    "@semcore/icon": "16.8.0-prerelease.1"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js && pnpm vite build"