@wix/editor-react-components 1.2289.0 → 1.2291.0

package/dist/site/components/TextInput/component.js

@@ -1,17 +1,185 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { Component, createElement, createContext, Suspense, useContext, useState, useRef, useCallback } from "react";
+import React__default, { createContext, useState, useRef, useCallback, Component, createElement, Suspense, useContext } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { s as selectors } from "../chunks/constants2.js";
+import { s as selectors } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index5.js";
 import { $ as $fd2148440a13ec26$export$fc1a364ae1f3ff10, a as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, b as $860f7da480e22816$export$b8473d3665f3a75a, c as $d3e0e05bdfcf66bd$export$c24727297075ec6a, d as $3985021b0ad6602f$export$37fb8590cf2c088c, e as $514c0188e459b4c0$export$9afb8bc826b033ea, f as $ee014567cb39d3f0$export$ff05c3ac10437e03, g as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Input.js";
-import { $ as $3e6197669829fe11$export$40bfa8c7b0832715, a as $d1116acdf220c2da$export$4c014de7c8940b4c, b as $3274bf1495747a7b$export$5add1d006293d136, c as $bbaa08b3cd72f041$export$9d1611c77c2fe928, d as $23f2114a1b82827e$export$e58f029f0fbfdb29, e as $01b77f81d0f07f68$export$75b6ee27786ba447, f as $a049562f99e7db0e$export$f9c6924e160136d1, g as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
+import { a as $3e6197669829fe11$export$40bfa8c7b0832715, b as $3274bf1495747a7b$export$5add1d006293d136, c as $bbaa08b3cd72f041$export$9d1611c77c2fe928, d as $23f2114a1b82827e$export$e58f029f0fbfdb29, e as $01b77f81d0f07f68$export$75b6ee27786ba447, f as $a049562f99e7db0e$export$f9c6924e160136d1, g as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
 import { $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, a as $f39a9eba43920ace$export$86427a43e3e48ebb, b as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$fabf2dc03a41866e, d as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, e as $64fa3d84918910a7$export$ef03459518577ad4, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
+import { $ as $d1116acdf220c2da$export$4c014de7c8940b4c } from "../chunks/useFocusable.js";
 import { S as SdkStateDefinition } from "../chunks/index6.js";
+const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
+function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {
+  let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;
+  let [value, setValue] = $3e6197669829fe11$export$40bfa8c7b0832715(props.value, props.defaultValue || "", props.onChange);
+  let { focusableProps } = $d1116acdf220c2da$export$4c014de7c8940b4c(props, ref);
+  let validationState = $fd2148440a13ec26$export$fc1a364ae1f3ff10({
+    ...props,
+    value
+  });
+  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $191c9b6d48a0a4e2$export$294aa081a6c6f55d({
+    ...props,
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  });
+  let domProps = $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  const inputOnlyProps = {
+    type,
+    pattern: props.pattern
+  };
+  let [initialValue] = useState(value);
+  $3274bf1495747a7b$export$5add1d006293d136(ref, props.defaultValue ?? initialValue, setValue);
+  $860f7da480e22816$export$b8473d3665f3a75a(props, validationState, ref);
+  return {
+    labelProps,
+    inputProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(domProps, inputElementType === "input" ? inputOnlyProps : void 0, {
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired && validationBehavior === "native",
+      "aria-required": isRequired && validationBehavior === "aria" || void 0,
+      "aria-invalid": isInvalid || void 0,
+      "aria-errormessage": props["aria-errormessage"],
+      "aria-activedescendant": props["aria-activedescendant"],
+      "aria-autocomplete": props["aria-autocomplete"],
+      "aria-haspopup": props["aria-haspopup"],
+      "aria-controls": props["aria-controls"],
+      value,
+      onChange: (e) => setValue($23f2114a1b82827e$export$e58f029f0fbfdb29(e).value),
+      autoComplete: props.autoComplete,
+      autoCapitalize: props.autoCapitalize,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      form: props.form,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      autoCorrect: props.autoCorrect,
+      spellCheck: props.spellCheck,
+      [parseInt(React__default.version, 10) >= 17 ? "enterKeyHint" : "enterkeyhint"]: props.enterKeyHint,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput,
+      ...focusableProps,
+      ...fieldProps
+    }),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
+const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
+const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TextField(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
+  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
+  var _props_validationBehavior, _ref;
+  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
+  let inputRef = useRef(null);
+  [props, inputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, inputRef, $8e6cc465cc68f603$export$698f465ec27e93df);
+  let [labelRef, label2] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
+  let [inputElementType, setInputElementType] = useState("input");
+  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $054f71d2330da2e3$export$712718f7aec83d5({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    inputElementType,
+    label: label2,
+    validationBehavior
+  }, inputRef);
+  let inputOrTextAreaRef = useCallback((el) => {
+    inputRef.current = el;
+    if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
+  }, [
+    inputRef
+  ]);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: "react-aria-TextField"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-invalid": validation.isInvalid || void 0,
+    "data-readonly": props.isReadOnly || void 0,
+    "data-required": props.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef
+        }
+      ],
+      [
+        $3985021b0ad6602f$export$37fb8590cf2c088c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $216918bed6669f72$export$2dc6166a7e65358c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $a049562f99e7db0e$export$f9c6924e160136d1,
+        {
+          role: "presentation",
+          isInvalid: validation.isInvalid,
+          isDisabled: props.isDisabled || false
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, renderProps.children));
+});
 const ABORT_SIGNAL_TIMEOUT = 5e3;
 function createTimeoutSignal(timeout) {
   if (typeof AbortSignal.timeout === "function") {
@@ -395,173 +563,6 @@ const getPhoneFormatLengthValidationError = (phoneFormat, phoneFormatLengthValid
   "{digits}",
   `${phoneFormat ? phoneFormat.replace(/-/g, "").length : 0}`
 );
-const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
-function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {
-  let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;
-  let [value, setValue] = $3e6197669829fe11$export$40bfa8c7b0832715(props.value, props.defaultValue || "", props.onChange);
-  let { focusableProps } = $d1116acdf220c2da$export$4c014de7c8940b4c(props, ref);
-  let validationState = $fd2148440a13ec26$export$fc1a364ae1f3ff10({
-    ...props,
-    value
-  });
-  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
-  let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $191c9b6d48a0a4e2$export$294aa081a6c6f55d({
-    ...props,
-    isInvalid,
-    errorMessage: props.errorMessage || validationErrors
-  });
-  let domProps = $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, {
-    labelable: true
-  });
-  const inputOnlyProps = {
-    type,
-    pattern: props.pattern
-  };
-  let [initialValue] = useState(value);
-  $3274bf1495747a7b$export$5add1d006293d136(ref, props.defaultValue ?? initialValue, setValue);
-  $860f7da480e22816$export$b8473d3665f3a75a(props, validationState, ref);
-  return {
-    labelProps,
-    inputProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(domProps, inputElementType === "input" ? inputOnlyProps : void 0, {
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      required: isRequired && validationBehavior === "native",
-      "aria-required": isRequired && validationBehavior === "aria" || void 0,
-      "aria-invalid": isInvalid || void 0,
-      "aria-errormessage": props["aria-errormessage"],
-      "aria-activedescendant": props["aria-activedescendant"],
-      "aria-autocomplete": props["aria-autocomplete"],
-      "aria-haspopup": props["aria-haspopup"],
-      "aria-controls": props["aria-controls"],
-      value,
-      onChange: (e) => setValue($23f2114a1b82827e$export$e58f029f0fbfdb29(e).value),
-      autoComplete: props.autoComplete,
-      autoCapitalize: props.autoCapitalize,
-      maxLength: props.maxLength,
-      minLength: props.minLength,
-      name: props.name,
-      form: props.form,
-      placeholder: props.placeholder,
-      inputMode: props.inputMode,
-      autoCorrect: props.autoCorrect,
-      spellCheck: props.spellCheck,
-      [parseInt(React__default.version, 10) >= 17 ? "enterKeyHint" : "enterkeyhint"]: props.enterKeyHint,
-      // Clipboard events
-      onCopy: props.onCopy,
-      onCut: props.onCut,
-      onPaste: props.onPaste,
-      // Composition events
-      onCompositionEnd: props.onCompositionEnd,
-      onCompositionStart: props.onCompositionStart,
-      onCompositionUpdate: props.onCompositionUpdate,
-      // Selection events
-      onSelect: props.onSelect,
-      // Input events
-      onBeforeInput: props.onBeforeInput,
-      onInput: props.onInput,
-      ...focusableProps,
-      ...fieldProps
-    }),
-    descriptionProps,
-    errorMessageProps,
-    isInvalid,
-    validationErrors,
-    validationDetails
-  };
-}
-const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
-const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
-const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TextField(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
-  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
-  var _props_validationBehavior, _ref;
-  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
-  let inputRef = useRef(null);
-  [props, inputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, inputRef, $8e6cc465cc68f603$export$698f465ec27e93df);
-  let [labelRef, label2] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
-  let [inputElementType, setInputElementType] = useState("input");
-  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $054f71d2330da2e3$export$712718f7aec83d5({
-    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
-    inputElementType,
-    label: label2,
-    validationBehavior
-  }, inputRef);
-  let inputOrTextAreaRef = useCallback((el) => {
-    inputRef.current = el;
-    if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
-  }, [
-    inputRef
-  ]);
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: {
-      isDisabled: props.isDisabled || false,
-      isInvalid: validation.isInvalid,
-      isReadOnly: props.isReadOnly || false,
-      isRequired: props.isRequired || false
-    },
-    defaultClassName: "react-aria-TextField"
-  });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
-    ...DOMProps,
-    ...renderProps,
-    ref,
-    slot: props.slot || void 0,
-    "data-disabled": props.isDisabled || void 0,
-    "data-invalid": validation.isInvalid || void 0,
-    "data-readonly": props.isReadOnly || void 0,
-    "data-required": props.isRequired || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
-    values: [
-      [
-        $01b77f81d0f07f68$export$75b6ee27786ba447,
-        {
-          ...labelProps,
-          ref: labelRef
-        }
-      ],
-      [
-        $3985021b0ad6602f$export$37fb8590cf2c088c,
-        {
-          ...inputProps,
-          ref: inputOrTextAreaRef
-        }
-      ],
-      [
-        $216918bed6669f72$export$2dc6166a7e65358c,
-        {
-          ...inputProps,
-          ref: inputOrTextAreaRef
-        }
-      ],
-      [
-        $a049562f99e7db0e$export$f9c6924e160136d1,
-        {
-          role: "presentation",
-          isInvalid: validation.isInvalid,
-          isDisabled: props.isDisabled || false
-        }
-      ],
-      [
-        $514c0188e459b4c0$export$9afb8bc826b033ea,
-        {
-          slots: {
-            description: descriptionProps,
-            errorMessage: errorMessageProps
-          }
-        }
-      ],
-      [
-        $ee014567cb39d3f0$export$ff05c3ac10437e03,
-        validation
-      ]
-    ]
-  }, renderProps.children));
-});
 const useSdkState = (componentId, key, defaultValue) => {
   const $sig = useService(SdkStateDefinition).for(componentId).getSignal(key, defaultValue);
   return [$sig.get(), (value) => $sig.set(value)];
@@ -584,7 +585,9 @@ const TextInput = (props, ref) => {
     pattern,
     autoComplete,
     autoComplete_,
+    autocompleteToken,
     maxLength,
+    minLength,
     min,
     max,
     step,
@@ -623,6 +626,13 @@ const TextInput = (props, ref) => {
   const [shouldShowValidityIndication, setValidityIndication] = React.useState(
     sdkValidityIndication
   );
+  const boundValue = props.value;
+  React.useEffect(() => {
+    if (boundValue !== void 0 && boundValue !== value) {
+      setValue(boundValue);
+      setSdkValue(boundValue);
+    }
+  }, [boundValue]);
   const isTextInputAutoFillFixExperimentEnabled = isExperimentOpen(
     "specs.thunderbolt.TextInputAutoFillFix"
   );
@@ -671,9 +681,10 @@ const TextInput = (props, ref) => {
     };
   });
   const valueChanged = React.useRef();
+  const activePhoneFormat = inputType === "tel" ? phoneFormat : "";
   const formattedValue = React.useMemo(() => {
-    return inputType === "tel" && phoneFormat ? formatPhoneNumber(value, phoneFormat) : value;
-  }, [value, phoneFormat, inputType]);
+    return activePhoneFormat ? formatPhoneNumber(value, activePhoneFormat) : value;
+  }, [value, activePhoneFormat]);
   const handleAutoFillChange = (event) => {
     if (isTextInputAutoFillFixExperimentEnabled && !hasFocus()) {
       onChange({
@@ -687,11 +698,11 @@ const TextInput = (props, ref) => {
     shouldCallOnInput
   }) => (newValue) => {
     let unformattedNumber = newValue;
-    if (phoneFormat) {
+    if (activePhoneFormat) {
       const didDeleteChars = newValue.length < formattedValue.length;
       unformattedNumber = getUnformattedNumber(
         newValue,
-        phoneFormat,
+        activePhoneFormat,
         didDeleteChars
       );
       if (hasNonNumericChar(unformattedNumber)) {
@@ -716,7 +727,7 @@ const TextInput = (props, ref) => {
     }
     if (shouldCallOnInput) {
       const syntheticEvent = {
-        target: { value },
+        target: { value: unformattedNumber },
         type: "input"
       };
       onInput(syntheticEvent);
@@ -770,12 +781,12 @@ const TextInput = (props, ref) => {
   });
   const getMaxLength = () => {
     let updatedMaxLength = maxLength === null ? void 0 : maxLength;
-    if (phoneFormat) {
-      updatedMaxLength = phoneFormat.length;
+    if (activePhoneFormat) {
+      updatedMaxLength = activePhoneFormat.length;
     }
     return updatedMaxLength;
   };
-  const getMinLength = () => phoneFormat ? phoneFormat.length : void 0;
+  const getMinLength = () => activePhoneFormat ? activePhoneFormat.length : minLength ?? void 0;
   const {
     ariaAttributes: { "aria-label": ariaLabel, ...restAriaAttributes }
   } = getAccessibilityAttributes({ ariaAttributes });
@@ -806,7 +817,7 @@ const TextInput = (props, ref) => {
     pattern,
     maxLength: getMaxLength(),
     minLength: getMinLength(),
-    autoComplete: autoComplete ? "on" : autoComplete_ || "off",
+    autoComplete: autoComplete ? autocompleteToken || "on" : autoComplete_ || "off",
     step: step === null ? void 0 : step,
     min: min === null ? void 0 : min,
     max: max === null ? void 0 : max,

package/dist/site/components/TextInput/component.preview.d.ts

@@ -0,0 +1,4 @@
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+import { default as TextInput } from './TextInput';
+export default TextInput;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

package/dist/site/components/TextInput/constants.d.ts

@@ -1,6 +1,26 @@
 export declare const selectors: {
     readonly root: "textInput";
 };
+export declare const DesignStates: {
+    readonly root: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "textInput--hover";
+        };
+        readonly focus: {
+            readonly displayName: "Focus";
+            readonly className: "textInput--focus";
+        };
+        readonly error: {
+            readonly displayName: "Error";
+            readonly className: "textInput--error";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "textInput--disabled";
+        };
+    };
+};
 export declare const DisplayNames: {
     root: {
         elementDisplayName: string;
@@ -20,6 +40,12 @@ export declare const DisplayNames: {
         inputAlign: string;
     };
     data: {
+        value: string;
+        isDisabled: string;
+        name: string;
+        minLength: string;
+        autocompleteToken: string;
+        numberSpinnerHidden: string;
         labelDirection: string;
         inputDirection: string;
         inputType: string;
@@ -30,6 +56,7 @@ export declare const DisplayNames: {
         phoneFormat: string;
         label: string;
         placeholder: string;
+        tooltip: string;
         autoComplete: string;
         readOnly: string;
         required: string;

package/dist/site/components/TextInput/css.css

@@ -103,15 +103,15 @@
   opacity: 0.6;
 }
 .root__zQlRz .input__fyTfx:hover {
-  background-color: #ffffff;
-  border-color: #a3d9f6;
-  border-width: 1px;
+  background-color: var(--hoverBackground, #ffffff);
+  border-color: var(--hoverBorderColor, #a3d9f6);
+  border-width: var(--hoverBorderWidth, 1px);
 }
 .root__zQlRz .input__fyTfx:disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #e3e3e3;
-  border-width: 1px;
+  background-color: var(--disabledBackground, #f5f5f5);
+  color: var(--disabledTextColor, #999);
+  border-color: var(--disabledBorderColor, #e3e3e3);
+  border-width: var(--disabledBorderWidth, 1px);
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -128,9 +128,32 @@
   padding-inline-end: calc(var(--textPaddingInlineEnd) + var(--prefixWidth));
 }
 .root__zQlRz:not(.validation-indication__QMvkt) .input__fyTfx:focus {
-  background-color: #ffffff;
-  border-color: #a3d9f6;
-  border-width: 1px;
+  background-color: var(--focusBackground, #ffffff);
+  border-color: var(--focusBorderColor, #a3d9f6);
+  border-width: var(--focusBorderWidth, 1px);
+}
+.root__zQlRz.textInput--hover .input__fyTfx {
+  background-color: var(--hoverBackground, #ffffff);
+  border-color: var(--hoverBorderColor, #a3d9f6);
+  border-width: var(--hoverBorderWidth, 1px);
+}
+.root__zQlRz.textInput--focus .input__fyTfx {
+  background-color: var(--focusBackground, #ffffff);
+  border-color: var(--focusBorderColor, #a3d9f6);
+  border-width: var(--focusBorderWidth, 1px);
+}
+.root__zQlRz.textInput--error .input__fyTfx {
+  background-color: var(--errorBackground, #ffffff);
+  border-color: var(--errorBorderColor, #e3e3e3);
+  border-width: var(--errorBorderWidth, 1px);
+}
+.root__zQlRz.textInput--disabled .input__fyTfx {
+  background-color: var(--disabledBackground, #f5f5f5);
+  color: var(--disabledTextColor, #999);
+  border-color: var(--disabledBorderColor, #e3e3e3);
+  border-width: var(--disabledBorderWidth, 1px);
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 .root__zQlRz.validation-indication__QMvkt .input__fyTfx:invalid {
   background-color: #ffffff;
@@ -162,7 +185,7 @@
   color: var(--requiredTextColor);
 }
 .root__zQlRz.validationIndication__GE20D .input__fyTfx:invalid {
-  background-color: #ffffff;
-  border-color: #e3e3e3;
-  border-width: 1px;
+  background-color: var(--errorBackground, #ffffff);
+  border-color: var(--errorBorderColor, #e3e3e3);
+  border-width: var(--errorBorderWidth, 1px);
 }