@semcore/input 4.43.0-prerelease.5 → 4.43.0-prerelease.6

package/lib/esm/Input.mjs

@@ -1,73 +1,90 @@
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 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, lastInteraction, assignProps, Component, createComponent } from "@semcore/core";
-import { Box, NeighborLocation, InvalidStateBox } from "@semcore/base-components";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
 import React from "react";
+import { InvalidStateBox, Box } from "@semcore/flex-box";
+import NeighborLocation from "@semcore/neighbor-location";
+import autoFocusEnhance from "@semcore/utils/lib/enhances/autoFocusEnhance";
+import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
 /*!__reshadow-styles__:"./style/input.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SInput_80gtr_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_80gtr_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_80gtr_gg_ input:-webkit-autofill~.___SOutline_80gtr_gg_{background-color:#faffbd}.___SInput_80gtr_gg_ .___SValue_80gtr_gg_:focus,.___SInput_80gtr_gg_ .___SValue_80gtr_gg_:focus-visible,.___SInput_80gtr_gg_ .___SValue_80gtr_gg_:focus-visible::after,.___SInput_80gtr_gg_ .___SValue_80gtr_gg_:focus::after{outline:0}.___SValue_80gtr_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_80gtr_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_80gtr_gg_::placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_80gtr_gg_:not(:disabled):-moz-read-only~.___SOutline_80gtr_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_80gtr_gg_:not(:disabled):read-only~.___SOutline_80gtr_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_80gtr_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SInput_80gtr_gg_.__disabled_80gtr_gg_ .___SOutline_80gtr_gg_,.___SValue_80gtr_gg_:disabled~.___SOutline_80gtr_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SOutline_80gtr_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_80gtr_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_80gtr_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SAddon_80gtr_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SAddon_80gtr_gg_.__interactive_80gtr_gg_{cursor:pointer}@media (hover:hover){.___SAddon_80gtr_gg_.__interactive_80gtr_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_80gtr_gg_.__interactive_80gtr_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SAddon_80gtr_gg_.__interactive_80gtr_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}}.___SAddon_80gtr_gg_.__disabled_80gtr_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_80gtr_gg_._size_m_80gtr_gg_:not(.___SButton_80gtr_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_80gtr_gg_._size_l_80gtr_gg_._neighborLocation_right_80gtr_gg_:not(.___SButton_80gtr_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SAddon_80gtr_gg_._size_l_80gtr_gg_._neighborLocation_left_80gtr_gg_:not(.___SButton_80gtr_gg_){padding:0 var(--intergalactic-spacing-3x, 12px)0 var(--intergalactic-spacing-2x, 8px)}.___SInput_80gtr_gg_ .___SAddon_80gtr_gg_:nth-last-child(2){margin-right:-1px}.___SValue_80gtr_gg_._size_m_80gtr_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_80gtr_gg_._size_l_80gtr_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_80gtr_gg_._size_m_80gtr_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_80gtr_gg_._size_l_80gtr_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible){z-index:1}.___SInput_80gtr_gg_._state_normal_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___SInput_80gtr_gg_._state_normal_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInput_80gtr_gg_._state_normal_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInput_80gtr_gg_._state_normal_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_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_80gtr_gg_._state_normal_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 32, 221, 0.469))}@media (color-gamut:p3){.___SInput_80gtr_gg_._state_normal_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SInput_80gtr_gg_._state_valid_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0%)){.___SInput_80gtr_gg_._state_valid_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_80gtr_gg_._state_valid_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInput_80gtr_gg_._state_valid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_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_80gtr_gg_._state_valid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_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_80gtr_gg_._state_valid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_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_80gtr_gg_._state_valid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_gg_{outline-color:var(--intergalactic-keyboard-focus-valid-outline, rgb(0, 190, 142))}@media (color-gamut:p3){.___SInput_80gtr_gg_._state_valid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_gg_{outline-color:var(--intergalactic-keyboard-focus-valid-outline, oklch(0.711 0.146 166.9))}}}.___SInput_80gtr_gg_._state_invalid_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0%)){.___SInput_80gtr_gg_._state_invalid_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_80gtr_gg_._state_invalid_80gtr_gg_ .___SOutline_80gtr_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_80gtr_gg_._state_invalid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_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_80gtr_gg_._state_invalid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_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_80gtr_gg_._state_invalid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_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_80gtr_gg_._state_invalid_80gtr_gg_:has(.___SValue_80gtr_gg_:focus-visible) .___SOutline_80gtr_gg_{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652))}}.___SInput_80gtr_gg_._neighborLocation_right_80gtr_gg_ .___SOutline_80gtr_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_80gtr_gg_._neighborLocation_both_80gtr_gg_ .___SOutline_80gtr_gg_{border-radius:0;border-left:none}.___SInput_80gtr_gg_._neighborLocation_left_80gtr_gg_ .___SOutline_80gtr_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_80gtr_gg_._neighborLocation_right_80gtr_gg_{padding-right:0}.___SValue_80gtr_gg_._neighborLocation_both_80gtr_gg_{padding-left:0;padding-right:0}.___SValue_80gtr_gg_._neighborLocation_left_80gtr_gg_{padding-left:0}",
+    ".___SInput_1a7yt_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1a7yt_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1a7yt_gg_ input:-webkit-autofill~.___SOutline_1a7yt_gg_{background-color:#faffbd}.___SValue_1a7yt_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_1a7yt_gg_:focus{outline:0}.___SValue_1a7yt_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1a7yt_gg_::placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1a7yt_gg_:not(:disabled):-moz-read-only~.___SOutline_1a7yt_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1a7yt_gg_:not(:disabled):read-only~.___SOutline_1a7yt_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1a7yt_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SInput_1a7yt_gg_.__disabled_1a7yt_gg_ .___SOutline_1a7yt_gg_,.___SValue_1a7yt_gg_:disabled~.___SOutline_1a7yt_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SOutline_1a7yt_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_1a7yt_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_1a7yt_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SAddon_1a7yt_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SAddon_1a7yt_gg_.__interactive_1a7yt_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1a7yt_gg_.__interactive_1a7yt_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_1a7yt_gg_.__interactive_1a7yt_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SAddon_1a7yt_gg_.__interactive_1a7yt_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}}.___SAddon_1a7yt_gg_.__disabled_1a7yt_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_1a7yt_gg_._size_m_1a7yt_gg_:not(.___SButton_1a7yt_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1a7yt_gg_._size_l_1a7yt_gg_:not(.___SButton_1a7yt_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1a7yt_gg_ .___SAddon_1a7yt_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1a7yt_gg_._size_m_1a7yt_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1a7yt_gg_._size_l_1a7yt_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1a7yt_gg_._size_m_1a7yt_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1a7yt_gg_._size_l_1a7yt_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1a7yt_gg_.__focused_1a7yt_gg_{z-index:1}.___SInput_1a7yt_gg_._state_normal_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___SInput_1a7yt_gg_._state_normal_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInput_1a7yt_gg_._state_normal_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInput_1a7yt_gg_._state_normal_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___SInput_1a7yt_gg_._state_normal_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SInput_1a7yt_gg_._state_normal_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SInput_1a7yt_gg_._state_valid_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0)){.___SInput_1a7yt_gg_._state_valid_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_1a7yt_gg_._state_valid_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInput_1a7yt_gg_._state_valid_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154));box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgb(0, 190, 142))}@supports (color:color(display-p3 0 0 0)){.___SInput_1a7yt_gg_._state_valid_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154));box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgb(0, 190, 142))}@media (color-gamut:p3){.___SInput_1a7yt_gg_._state_valid_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714));box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px color(display-p3 0.33388 0.7337 0.56959))}}}.___SInput_1a7yt_gg_._state_invalid_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0)){.___SInput_1a7yt_gg_._state_invalid_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1a7yt_gg_._state_invalid_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1a7yt_gg_._state_invalid_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56));box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 2, 7, 0.652))}@supports (color:color(display-p3 0 0 0)){.___SInput_1a7yt_gg_._state_invalid_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1a7yt_gg_._state_invalid_1a7yt_gg_.__focused_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1a7yt_gg_._neighborLocation_right_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1a7yt_gg_._neighborLocation_both_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-radius:0;border-left:none}.___SInput_1a7yt_gg_._neighborLocation_left_1a7yt_gg_ .___SOutline_1a7yt_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1a7yt_gg_._neighborLocation_right_1a7yt_gg_{padding-right:0}.___SValue_1a7yt_gg_._neighborLocation_both_1a7yt_gg_{padding-left:0;padding-right:0}.___SValue_1a7yt_gg_._neighborLocation_left_1a7yt_gg_{padding-left:0}",
     /*__inner_css_end__*/
-    "80gtr_gg_"
+    "1a7yt_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SInput": "___SInput_80gtr_gg_",
-    "_disabled": "__disabled_80gtr_gg_",
-    "__SOutline": "___SOutline_80gtr_gg_",
-    "__SValue": "___SValue_80gtr_gg_",
-    "__SAddon": "___SAddon_80gtr_gg_",
-    "_size_m": "_size_m_80gtr_gg_",
-    "__SButton": "___SButton_80gtr_gg_",
-    "_size_l": "_size_l_80gtr_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_80gtr_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_80gtr_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_80gtr_gg_",
-    "_interactive": "__interactive_80gtr_gg_",
-    "_state_normal": "_state_normal_80gtr_gg_",
-    "_state_valid": "_state_valid_80gtr_gg_",
-    "_state_invalid": "_state_invalid_80gtr_gg_"
+    "__SInput": "___SInput_1a7yt_gg_",
+    "_disabled": "__disabled_1a7yt_gg_",
+    "__SOutline": "___SOutline_1a7yt_gg_",
+    "__SValue": "___SValue_1a7yt_gg_",
+    "__SAddon": "___SAddon_1a7yt_gg_",
+    "_size_m": "_size_m_1a7yt_gg_",
+    "__SButton": "___SButton_1a7yt_gg_",
+    "_size_l": "_size_l_1a7yt_gg_",
+    "_focused": "__focused_1a7yt_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_1a7yt_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_1a7yt_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_1a7yt_gg_",
+    "_interactive": "__interactive_1a7yt_gg_",
+    "_state_normal": "_state_normal_1a7yt_gg_",
+    "_state_valid": "_state_valid_1a7yt_gg_",
+    "_state_invalid": "_state_invalid_1a7yt_gg_"
   })
 );
-var Input = /* @__PURE__ */ (function(_Component) {
+var Input = /* @__PURE__ */ function(_Component) {
+  _inherits(Input2, _Component);
+  var _super = _createSuper(Input2);
   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) {
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      focused: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDownAddon", function(event) {
       var _this$inputRef$curren;
       event.preventDefault();
-      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 || _this$inputRef$curren.focus();
+      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
     });
-    _defineProperty(_this, "handleClick", function() {
-      if (!lastInteraction.isKeyboard) return;
-      setTimeout(function() {
-        if (document.activeElement === document.body) {
-          var _this$inputRef$curren2;
-          (_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 || _this$inputRef$curren2.focus();
-        }
-      }, 0);
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(event) {
+      if (event.key === "Enter") {
+        setTimeout(function() {
+          if (document.activeElement === document.body) {
+            var _this$inputRef$curren2;
+            (_this$inputRef$curren2 = _this.inputRef.current) === null || _this$inputRef$curren2 === void 0 ? void 0 : _this$inputRef$curren2.focus();
+          }
+        }, 10);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandleValueFocused", function(focused) {
+      return function() {
+        return _this.setState({
+          focused
+        });
+      };
     });
     return _this;
   }
-  _inherits(Input2, _Component);
-  return _createClass(Input2, [{
+  _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
       };
     }
@@ -76,10 +93,12 @@ var Input = /* @__PURE__ */ (function(_Component) {
     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,
+        ref: this.inputRef,
         size,
         disabled,
         state,
+        onFocus: this.bindHandleValueFocused(true),
+        onBlur: this.bindHandleValueFocused(false),
         role,
         placeholder,
         "aria-haspopup": ariaHaspopup,
@@ -90,18 +109,30 @@ var Input = /* @__PURE__ */ (function(_Component) {
         "aria-activedescendant": ariaActivedescendant
       };
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.disabled !== this.asProps.disabled && this.asProps.disabled) {
+        this.setState({
+          focused: false
+        });
+      }
+    }
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps;
+      var _ref = this.asProps, _this2 = this;
       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;
+      var focused = this.state.focused;
       return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
         neighborLocation
       }, function(neighborLocation2) {
         var _ref4;
-        return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
+        return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
+          "focused": focused,
+          "onKeyDown": _this2.handleKeyDown,
           "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", {
@@ -110,37 +141,22 @@ var Input = /* @__PURE__ */ (function(_Component) {
       });
     }
   }]);
-})(Component);
+  return Input2;
+}(Component);
 _defineProperty(Input, "displayName", "Input");
 _defineProperty(Input, "defaultProps", {
   size: "m",
   state: "normal"
 });
 _defineProperty(Input, "style", style);
-var Value = /* @__PURE__ */ (function(_Component2) {
+var Value = /* @__PURE__ */ function(_Component2) {
+  _inherits(Value2, _Component2);
+  var _super2 = _createSuper(Value2);
   function Value2() {
-    var _this2;
     _classCallCheck(this, Value2);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this2 = _callSuper(this, Value2, [].concat(args));
-    _defineProperty(_this2, "inputRef", /* @__PURE__ */ React.createRef());
-    return _this2;
+    return _super2.apply(this, arguments);
   }
-  _inherits(Value2, _Component2);
-  return _createClass(Value2, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this3 = this;
-      if (this.asProps.autoFocus) {
-        setTimeout(function() {
-          var _this3$inputRef$curre;
-          (_this3$inputRef$curre = _this3.inputRef.current) === null || _this3$inputRef$curre === void 0 || _this3$inputRef$curre.focus();
-        }, 10);
-      }
-    }
-  }, {
+  _createClass(Value2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -152,29 +168,28 @@ var Value = /* @__PURE__ */ (function(_Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _ref2 = this.asProps, _this4 = this;
+      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({
-          "ref": _this4.inputRef,
-          "inAfterOutline": true,
+        return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
           "neighborLocation": neighborLocation2,
           "tag": "input",
           "type": "text",
-          "aria-invalid": state === "invalid",
-          "use:autoFocus": false
+          "aria-invalid": state === "invalid"
         }, _ref2))));
       });
     }
   }]);
-})(Component);
+  return Value2;
+}(Component);
 _defineProperty(Value, "defaultProps", {
   defaultValue: ""
 });
+_defineProperty(Value, "enhance", [keyboardFocusEnhance(), autoFocusEnhance()]);
 function Addon(props) {
   var _ref3 = arguments[0];
   var SAddon = Box;
@@ -183,15 +198,15 @@ function Addon(props) {
     neighborLocation
   }, function(neighborLocation2) {
     var _ref6;
-    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({
+    return _ref6 = sstyled$1(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

@@ -13,20 +13,10 @@ SInput {
     border-radius: var(--intergalactic-control-rounded, 6px);
     -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
 
-    &~SOutline {
+    & ~ SOutline {
       background-color: rgb(250, 255, 189);
     }
   }
-
-  SValue {
-    &:focus, &:focus-visible {
-      outline: none;
-
-      &::after {
-        outline: none;
-      }
-    }
-  }
 }
 
 SValue {
@@ -43,11 +33,15 @@ SValue {
   font-family: inherit;
   background: transparent;
 
+  &:focus {
+    outline: none;
+  }
+
   &::placeholder {
     color: var(--intergalactic-text-placeholder, oklch(0.098 0.023 157.4 / 0.457));
   }
 
-  &:not(:disabled):read-only~SOutline {
+  &:not(:disabled):read-only ~ SOutline {
     background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
   }
 
@@ -57,8 +51,7 @@ SValue {
   }
 }
 
-SInput[disabled] SOutline,
-SValue:disabled~SOutline {
+SInput[disabled] SOutline, SValue:disabled ~ SOutline {
 
   opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
@@ -104,15 +97,10 @@ SAddon[disabled] {
 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;
 }
@@ -120,7 +108,6 @@ SInput SAddon:nth-last-child(2) {
 SValue[size='m'] {
   padding: 0 var(--intergalactic-spacing-2x, 8px);
 }
-
 SValue[size='l'] {
   padding: 0 var(--intergalactic-spacing-3x, 12px);
 }
@@ -135,7 +122,7 @@ SInput[size='l'] {
   height: var(--intergalactic-form-control-l, 40px);
 }
 
-SInput:has(SValue:focus-visible) {
+SInput[focused] {
   z-index: 1;
 }
 
@@ -144,42 +131,29 @@ SInput[state='normal'] {
     border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
-  &:has(SValue:focus-visible) SOutline {
-    @mixin focus-outline-mixin {
-      outline-offset: 0;
-      transition-property: outline-color, outline-width;
-    }
+  &[focused] SOutline {
     border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
+    box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
   }
 }
-
 SInput[state='valid'] {
   & SOutline {
     border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
   }
 
-  &:has(SValue:focus-visible) SOutline {
-    @mixin focus-outline-mixin {
-      outline-offset: 0;
-      transition-property: outline-color, outline-width;
-    }
+  &[focused] SOutline {
     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));
+    box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px oklch(0.711 0.146 166.9));
   }
 }
-
 SInput[state='invalid'] {
   & SOutline {
     border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
   }
 
-  &:has(SValue:focus-visible) SOutline {
-    @mixin focus-outline-mixin {
-      outline-offset: 0;
-      transition-property: outline-color, outline-width;
-    }
+  &[focused] SOutline {
     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));
+    box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px oklch(0.628 0.257 28.9 / 0.652));
   }
 }
 
@@ -189,14 +163,12 @@ SInput[neighborLocation='right'] {
     border-bottom-right-radius: 0;
   }
 }
-
 SInput[neighborLocation='both'] {
   & SOutline {
     border-radius: 0;
     border-left: none;
   }
 }
-
 SInput[neighborLocation='left'] {
   & SOutline {
     border-top-left-radius: 0;

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 React from 'react';
+import React from 'react';
+import { Intergalactic, PropGetterFn, UnknownProperties } from '@semcore/core';
+import { BoxProps } from '@semcore/flex-box';
+import { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';
+import { WithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';
 
 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,15 +61,29 @@ export type InputValueProps = BoxProps &
      * Placeholder for input
      */
     placeholder?: string;
+  };
+
+/** @deprecated */
+export interface IInputAddonProps extends InputAddonProps, UnknownProperties {}
+export type InputAddonProps = BoxProps &
+  NeighborItemProps & {
     /**
-     * Flag to enable autofocusing after component mounting
-     * @default false
+     * Adds styles for interactive icons
      */
-    autoFocus?: boolean;
+    interactive?: boolean;
+    /**
+     * Blocks the addon
+     * */
+    disabled?: boolean;
+    /**
+     * Input size
+     * @default m
+     */
+    size?: InputSize;
   };
 
-export type InputAddonProps = BoxProps & NeighborItemProps;
-
+/** @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": "4.43.0-prerelease.5",
+  "version": "4.43.0-prerelease.6",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,12 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.49.0-prerelease.5",
-    "@semcore/neighbor-location": "4.41.0-prerelease.5",
-    "@semcore/flex-box": "5.42.0-prerelease.5"
+    "@semcore/utils": "4.49.0-prerelease.6",
+    "@semcore/neighbor-location": "4.41.0-prerelease.6",
+    "@semcore/flex-box": "5.42.0-prerelease.6"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.5",
+    "@semcore/core": "^2.40.0-prerelease.6",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },