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

package/lib/esm/Input.mjs

@@ -1,90 +1,73 @@
 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 _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
+import { sstyled, lastInteraction, assignProps, Component, createComponent } from "@semcore/core";
+import { Box, NeighborLocation, InvalidStateBox } from "@semcore/base-components";
 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_1v5g2_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1v5g2_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-control-rounded, 6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1v5g2_gg_ input:-webkit-autofill~.___SOutline_1v5g2_gg_{background-color:#faffbd}.___SValue_1v5g2_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_1v5g2_gg_:focus{outline:0}.___SValue_1v5g2_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1v5g2_gg_::placeholder{color:var(--intergalactic-text-placeholder, rgba(0, 5, 2, 0.457))}.___SValue_1v5g2_gg_:not(:disabled):-moz-read-only~.___SOutline_1v5g2_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1v5g2_gg_:not(:disabled):read-only~.___SOutline_1v5g2_gg_{background:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}.___SValue_1v5g2_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SInput_1v5g2_gg_.__disabled_1v5g2_gg_ .___SOutline_1v5g2_gg_,.___SValue_1v5g2_gg_:disabled~.___SOutline_1v5g2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SOutline_1v5g2_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_1v5g2_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_1v5g2_gg_{color:var(--intergalactic-icon-secondary-neutral, rgba(0, 5, 2, 0.385))}@media (color-gamut:p3){.___SAddon_1v5g2_gg_{color:var(--intergalactic-icon-secondary-neutral, color(display-p3 0.0036 0.02041 0.00996 / 0.385))}}}.___SAddon_1v5g2_gg_.__interactive_1v5g2_gg_{cursor:pointer}@media (hover:hover){.___SAddon_1v5g2_gg_.__interactive_1v5g2_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_1v5g2_gg_.__interactive_1v5g2_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, rgba(0, 5, 2, 0.433))}@media (color-gamut:p3){.___SAddon_1v5g2_gg_.__interactive_1v5g2_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, color(display-p3 0.00333 0.01824 0.00791 / 0.433))}}}}.___SAddon_1v5g2_gg_.__disabled_1v5g2_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none}.___SAddon_1v5g2_gg_._size_m_1v5g2_gg_:not(.___SButton_1v5g2_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)}.___SAddon_1v5g2_gg_._size_l_1v5g2_gg_:not(.___SButton_1v5g2_gg_){padding:0 var(--intergalactic-spacing-2x, 8px)0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1v5g2_gg_ .___SAddon_1v5g2_gg_:nth-last-child(2){margin-right:-1px}.___SValue_1v5g2_gg_._size_m_1v5g2_gg_{padding:0 var(--intergalactic-spacing-2x, 8px)}.___SValue_1v5g2_gg_._size_l_1v5g2_gg_{padding:0 var(--intergalactic-spacing-3x, 12px)}.___SInput_1v5g2_gg_._size_m_1v5g2_gg_{font-size:var(--intergalactic-fs-200, 14px);height:var(--intergalactic-form-control-m, 28px)}.___SInput_1v5g2_gg_._size_l_1v5g2_gg_{font-size:var(--intergalactic-fs-300, 16px);height:var(--intergalactic-form-control-l, 40px)}.___SInput_1v5g2_gg_.__focused_1v5g2_gg_{z-index:1}.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386));box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 18, 193, 0.441))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-info-active, rgba(0, 22, 195, 0.386))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_normal_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-info-active, color(display-p3 0.01805 0.08333 0.73488 / 0.386))}}}.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, rgb(0, 204, 154))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-success-active, color(display-p3 0.36013 0.78771 0.61714))}}}.___SInput_1v5g2_gg_._state_valid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_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_1v5g2_gg_._state_valid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_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_1v5g2_gg_._state_valid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_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_1v5g2_gg_._state_invalid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@supports (color:color(display-p3 0 0 0)){.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_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_1v5g2_gg_._state_invalid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, rgba(255, 0, 4, 0.56))}@media (color-gamut:p3){.___SInput_1v5g2_gg_._state_invalid_1v5g2_gg_.__focused_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-color:var(--intergalactic-border-critical-active, color(display-p3 0.918 0.19866 0.14259 / 0.56))}}}.___SInput_1v5g2_gg_._neighborLocation_right_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1v5g2_gg_._neighborLocation_both_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-radius:0;border-left:none}.___SInput_1v5g2_gg_._neighborLocation_left_1v5g2_gg_ .___SOutline_1v5g2_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1v5g2_gg_._neighborLocation_right_1v5g2_gg_{padding-right:0}.___SValue_1v5g2_gg_._neighborLocation_both_1v5g2_gg_{padding-left:0;padding-right:0}.___SValue_1v5g2_gg_._neighborLocation_left_1v5g2_gg_{padding-left:0}",
+    ".___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}",
     /*__inner_css_end__*/
-    "1v5g2_gg_"
+    "80gtr_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SInput": "___SInput_1v5g2_gg_",
-    "_disabled": "__disabled_1v5g2_gg_",
-    "__SOutline": "___SOutline_1v5g2_gg_",
-    "__SValue": "___SValue_1v5g2_gg_",
-    "__SAddon": "___SAddon_1v5g2_gg_",
-    "_size_m": "_size_m_1v5g2_gg_",
-    "__SButton": "___SButton_1v5g2_gg_",
-    "_size_l": "_size_l_1v5g2_gg_",
-    "_focused": "__focused_1v5g2_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_1v5g2_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_1v5g2_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_1v5g2_gg_",
-    "_interactive": "__interactive_1v5g2_gg_",
-    "_state_normal": "_state_normal_1v5g2_gg_",
-    "_state_valid": "_state_valid_1v5g2_gg_",
-    "_state_invalid": "_state_invalid_1v5g2_gg_"
+    "__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_"
   })
 );
-var Input = /* @__PURE__ */ function(_Component) {
-  _inherits(Input2, _Component);
-  var _super = _createSuper(Input2);
+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 = _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) {
+    _this = _callSuper(this, Input2, [].concat(args));
+    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "handleMouseDownAddon", function(event) {
       var _this$inputRef$curren;
       event.preventDefault();
-      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.focus();
-    });
-    _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);
-      }
+      (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 || _this$inputRef$curren.focus();
     });
-    _defineProperty(_assertThisInitialized(_this), "bindHandleValueFocused", function(focused) {
-      return function() {
-        return _this.setState({
-          focused
-        });
-      };
+    _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);
     });
     return _this;
   }
-  _createClass(Input2, [{
+  _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
       };
     }
@@ -93,12 +76,10 @@ 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,
@@ -109,30 +90,18 @@ 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, _this2 = this;
+      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;
-      var focused = this.state.focused;
       return /* @__PURE__ */ React.createElement(NeighborLocation.Detect, {
         neighborLocation
       }, function(neighborLocation2) {
         var _ref4;
-        return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInput, _ref4.cn("SInput", _objectSpread({}, assignProps({
-          "focused": focused,
-          "onKeyDown": _this2.handleKeyDown,
+        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", {
@@ -141,22 +110,37 @@ var Input = /* @__PURE__ */ function(_Component) {
       });
     }
   }]);
-  return Input2;
-}(Component);
+})(Component);
 _defineProperty(Input, "displayName", "Input");
 _defineProperty(Input, "defaultProps", {
   size: "m",
   state: "normal"
 });
 _defineProperty(Input, "style", style);
-var Value = /* @__PURE__ */ function(_Component2) {
-  _inherits(Value2, _Component2);
-  var _super2 = _createSuper(Value2);
+var Value = /* @__PURE__ */ (function(_Component2) {
   function Value2() {
+    var _this2;
     _classCallCheck(this, Value2);
-    return _super2.apply(this, arguments);
+    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;
   }
-  _createClass(Value2, [{
+  _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);
+      }
+    }
+  }, {
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -168,28 +152,29 @@ var Value = /* @__PURE__ */ function(_Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _ref2 = this.asProps;
+      var _ref2 = this.asProps, _this4 = this;
       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$1(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
+        return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SValue, _ref5.cn("SValue", _objectSpread({}, assignProps({
+          "ref": _this4.inputRef,
+          "inAfterOutline": true,
           "neighborLocation": neighborLocation2,
           "tag": "input",
           "type": "text",
-          "aria-invalid": state === "invalid"
+          "aria-invalid": state === "invalid",
+          "use:autoFocus": false
         }, _ref2))));
       });
     }
   }]);
-  return Value2;
-}(Component);
+})(Component);
 _defineProperty(Value, "defaultProps", {
   defaultValue: ""
 });
-_defineProperty(Value, "enhance", [keyboardFocusEnhance(), autoFocusEnhance()]);
 function Addon(props) {
   var _ref3 = arguments[0];
   var SAddon = Box;
@@ -198,15 +183,15 @@ function Addon(props) {
     neighborLocation
   }, function(neighborLocation2) {
     var _ref6;
-    return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({
+    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$1 = createComponent(Input, {
+const Input_default = createComponent(Input, {
   Addon,
   Value
 });
 export {
-  Input$1 as default
+  Input_default as default
 };

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

@@ -13,10 +13,20 @@ 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 {
@@ -33,15 +43,11 @@ 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));
   }
 
@@ -51,7 +57,8 @@ SValue {
   }
 }
 
-SInput[disabled] SOutline, SValue:disabled ~ SOutline {
+SInput[disabled] SOutline,
+SValue:disabled~SOutline {
 
   opacity: var(--intergalactic-disabled-opacity, 0.4);
   cursor: default;
@@ -97,10 +104,15 @@ SAddon[disabled] {
 SAddon[size='m']:not(SButton) {
   padding: 0 var(--intergalactic-spacing-2x, 8px);
 }
-SAddon[size='l']:not(SButton) {
+
+SAddon[size='l'][neighborLocation='right']: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;
 }
@@ -108,6 +120,7 @@ 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);
 }
@@ -122,7 +135,7 @@ SInput[size='l'] {
   height: var(--intergalactic-form-control-l, 40px);
 }
 
-SInput[focused] {
+SInput:has(SValue:focus-visible) {
   z-index: 1;
 }
 
@@ -131,29 +144,42 @@ SInput[state='normal'] {
     border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
-  &[focused] SOutline {
-    border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
-    box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
+  &:has(SValue:focus-visible) SOutline {
+    @mixin focus-outline-mixin {
+      outline-offset: 0;
+      transition-property: outline-color, outline-width;
+    }
+    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, oklch(0.75 0.153 167.5));
   }
 
-  &[focused] SOutline {
+  &:has(SValue:focus-visible) SOutline {
+    @mixin focus-outline-mixin {
+      outline-offset: 0;
+      transition-property: outline-color, outline-width;
+    }
     border-color: var(--intergalactic-border-success-active, oklch(0.75 0.153 167.5));
-    box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px oklch(0.711 0.146 166.9));
+    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, oklch(0.628 0.258 29 / 0.56));
   }
 
-  &[focused] SOutline {
+  &:has(SValue:focus-visible) SOutline {
+    @mixin focus-outline-mixin {
+      outline-offset: 0;
+      transition-property: outline-color, outline-width;
+    }
     border-color: var(--intergalactic-border-critical-active, oklch(0.628 0.258 29 / 0.56));
-    box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px oklch(0.628 0.257 28.9 / 0.652));
+    outline-color: var(--intergalactic-keyboard-focus-invalid-outline, oklch(0.628 0.257 28.9 / 0.652));
   }
 }
 
@@ -163,12 +189,14 @@ 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,13 +1,9 @@
-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';
+import type { BoxProps, NeighborItemProps, NeighborLocationProps } from '@semcore/base-components';
+import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type React from 'react';
 
 export type InputSize = 'm' | 'l';
 
-/** @deprecated */
-export interface IInputProps extends InputProps, UnknownProperties {}
 export type InputProps = BoxProps &
   NeighborItemProps &
   NeighborLocationProps & {
@@ -27,11 +23,8 @@ export type InputProps = BoxProps &
     state?: 'normal' | 'invalid' | 'valid';
   };
 
-/** @deprecated */
-export interface IInputValueProps extends InputValueProps, UnknownProperties {}
 export type InputValueProps = BoxProps &
-  NeighborItemProps &
-  WithAutoFocusEnhanceProps & {
+  NeighborItemProps & {
     /**
      * Input value
      */
@@ -44,10 +37,6 @@ 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
      * */
@@ -61,29 +50,15 @@ export type InputValueProps = BoxProps &
      * Placeholder for input
      */
     placeholder?: string;
-  };
-
-/** @deprecated */
-export interface IInputAddonProps extends InputAddonProps, UnknownProperties {}
-export type InputAddonProps = BoxProps &
-  NeighborItemProps & {
     /**
-     * Adds styles for interactive icons
+     * Flag to enable autofocusing after component mounting
+     * @default false
      */
-    interactive?: boolean;
-    /**
-     * Blocks the addon
-     * */
-    disabled?: boolean;
-    /**
-     * Input size
-     * @default m
-     */
-    size?: InputSize;
+    autoFocus?: boolean;
   };
 
-/** @deprecated */
-export interface IInputCtx extends InputCtx, UnknownProperties {}
+export type InputAddonProps = BoxProps & NeighborItemProps;
+
 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.1",
+  "version": "4.43.0-prerelease.5",
   "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.1",
-    "@semcore/neighbor-location": "4.41.0-prerelease.1",
-    "@semcore/flex-box": "5.42.0-prerelease.1"
+    "@semcore/utils": "4.49.0-prerelease.5",
+    "@semcore/neighbor-location": "4.41.0-prerelease.5",
+    "@semcore/flex-box": "5.42.0-prerelease.5"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.1",
+    "@semcore/core": "^2.40.0-prerelease.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },