@wix/editor-react-components 1.2763.0 → 1.2765.0

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

@@ -1,21 +1,17 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { createContext, useState, useRef, useCallback, Component, createElement, Suspense, useContext } from "react";
+import React__default, { createContext, useState, useRef, useCallback } 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 { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
-import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
+import { c as componentClassNames, D as DesignStates, E as ERROR_MESSAGE_PREVIEW_TEXT } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
-import { T as TranslationsDefinition } from "../chunks/index4.js";
-import { c as $3e6197669829fe11$export$40bfa8c7b0832715, d as $d1116acdf220c2da$export$4c014de7c8940b4c, e as $3274bf1495747a7b$export$5add1d006293d136, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, h as $01b77f81d0f07f68$export$75b6ee27786ba447, i as $a049562f99e7db0e$export$f9c6924e160136d1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.js";
-import { d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Tooltip.js";
-import { a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, b as $f39a9eba43920ace$export$86427a43e3e48ebb, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
-import { S as SdkStateDefinition } from "../chunks/index7.js";
-import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
+import { b as $fd2148440a13ec26$export$fc1a364ae1f3ff10, c as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, d as $860f7da480e22816$export$b8473d3665f3a75a, e as $d3e0e05bdfcf66bd$export$c24727297075ec6a, f as $3985021b0ad6602f$export$37fb8590cf2c088c, g as $514c0188e459b4c0$export$9afb8bc826b033ea, h as $ee014567cb39d3f0$export$ff05c3ac10437e03, i as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Input.js";
+import { b as $3e6197669829fe11$export$40bfa8c7b0832715, c as $d1116acdf220c2da$export$4c014de7c8940b4c, d as $3274bf1495747a7b$export$5add1d006293d136, e as $bbaa08b3cd72f041$export$9d1611c77c2fe928, f as $23f2114a1b82827e$export$e58f029f0fbfdb29, g as $01b77f81d0f07f68$export$75b6ee27786ba447, h as $a049562f99e7db0e$export$f9c6924e160136d1, a 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";
 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;
@@ -183,837 +179,165 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920
     ]
   }, renderProps.children));
 });
-const ABORT_SIGNAL_TIMEOUT = 5e3;
-function createTimeoutSignal(timeout) {
-  if (typeof AbortSignal.timeout === "function") {
-    return AbortSignal.timeout(timeout);
-  }
-  const controller = new AbortController();
-  setTimeout(() => {
-    try {
-      controller.abort(
-        new DOMException(
-          "The operation was aborted due to timeout",
-          "TimeoutError"
-        )
-      );
-    } catch {
-      controller.abort();
-    }
-  }, timeout);
-  return controller.signal;
-}
-class IconContentFetcher {
-  constructor() {
-    this.cache = /* @__PURE__ */ new Map();
-    this.pendingRequests = /* @__PURE__ */ new Map();
-    this.failedRequests = /* @__PURE__ */ new Set();
-  }
-  fetch(params) {
-    const { name, theme, category, hash } = params;
-    const cacheKey = `${name}.${theme}`;
-    if (this.cache.has(cacheKey)) {
-      return this.cache.get(cacheKey);
-    }
-    if (this.failedRequests.has(cacheKey)) {
-      throw new Error(`Icon ${name} failed to load`);
-    }
-    if (this.pendingRequests.has(cacheKey)) {
-      throw this.pendingRequests.get(cacheKey);
-    }
-    if (typeof fetch !== "function") {
-      return "";
-    }
-    const url = `https://static.parastorage.com/services/wix-ui-icons-common/dist/icons/${theme}/${category}/${name}.${hash}.json`;
-    const request = fetch(url, {
-      signal: createTimeoutSignal(ABORT_SIGNAL_TIMEOUT)
-    }).then((res) => {
-      if (!res.ok) {
-        throw new Error(`Failed to fetch icon: ${res.status}`);
-      }
-      return res.json();
-    }).then((data) => {
-      this.cache.set(cacheKey, data.content);
-      this.pendingRequests.delete(cacheKey);
-    }).catch((error) => {
-      this.pendingRequests.delete(cacheKey);
-      this.failedRequests.add(cacheKey);
-      console.error(`Error fetching icon ${name}:`, error);
-      throw error;
-    });
-    this.pendingRequests.set(cacheKey, request);
-    throw request;
-  }
-}
-const iconContentFetcher = new IconContentFetcher();
-const ErrorBoundaryContext = createContext(null);
-const initialState = {
-  didCatch: false,
-  error: null
-};
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
-    this.state = initialState;
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      didCatch: true,
-      error
-    };
-  }
-  resetErrorBoundary() {
-    const {
-      error
-    } = this.state;
-    if (error !== null) {
-      var _this$props$onReset, _this$props;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
-        args,
-        reason: "imperative-api"
-      });
-      this.setState(initialState);
-    }
-  }
-  componentDidCatch(error, info) {
-    var _this$props$onError, _this$props2;
-    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      didCatch
-    } = this.state;
-    const {
-      resetKeys
-    } = this.props;
-    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
-      var _this$props$onReset2, _this$props3;
-      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
-        next: resetKeys,
-        prev: prevProps.resetKeys,
-        reason: "keys"
-      });
-      this.setState(initialState);
-    }
-  }
-  render() {
-    const {
-      children,
-      fallbackRender,
-      FallbackComponent,
-      fallback
-    } = this.props;
-    const {
-      didCatch,
-      error
-    } = this.state;
-    let childToRender = children;
-    if (didCatch) {
-      const props = {
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      };
-      if (typeof fallbackRender === "function") {
-        childToRender = fallbackRender(props);
-      } else if (FallbackComponent) {
-        childToRender = createElement(FallbackComponent, props);
-      } else if (fallback !== void 0) {
-        childToRender = fallback;
-      } else {
-        throw error;
-      }
-    }
-    return createElement(ErrorBoundaryContext.Provider, {
-      value: {
-        didCatch,
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      }
-    }, childToRender);
-  }
-}
-function hasArrayChanged() {
-  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
-}
-function getIconAttrs(params) {
-  const { size, width, height } = params;
-  return {
-    dimensions: size ? { width: size, height: size } : { width, height },
-    viewBox: `0 0 ${width} ${height}`
-  };
-}
-function EmptyState({
-  width,
-  height,
-  size,
-  restProps
-}) {
-  const { dimensions, viewBox } = getIconAttrs({
-    size,
-    width,
-    height
-  });
-  return /* @__PURE__ */ React__default.createElement("svg", { viewBox, ...dimensions, ...restProps });
-}
-if (!globalThis.__WDSIconThemeContext__) {
-  globalThis.__WDSIconThemeContext__ = createContext("default");
-}
-const IconThemeContext = globalThis.__WDSIconThemeContext__;
-const icon = (params) => {
-  const { name, hashes, category, width, height } = params;
-  const IconContent = (props) => {
-    const { size, ...restProps } = props;
-    const selectedTheme = useContext(IconThemeContext);
-    let themeToUse = selectedTheme;
-    let hash = hashes[themeToUse];
-    if (!hash) {
-      themeToUse = hashes.default ? "default" : "odeditor";
-      hash = hashes.default || hashes.odeditor;
-    }
-    const content = iconContentFetcher.fetch({
-      name,
-      theme: themeToUse,
-      category,
-      hash
-    });
-    const { dimensions, viewBox } = getIconAttrs({
-      size,
-      width,
-      height
-    });
-    return /* @__PURE__ */ React__default.createElement("svg", { fill: "currentColor", viewBox, ...dimensions, ...restProps }, /* @__PURE__ */ React__default.createElement(
-      "g",
-      {
-        ...{
-          // eslint-disable-next-line no-useless-concat
-          ["dangerouslySetInnerHTML"]: { __html: content }
-        }
-      }
-    ));
-  };
-  const Icon = (props) => {
-    const { size, ...restProps } = props;
-    return /* @__PURE__ */ React__default.createElement(
-      ErrorBoundary,
-      {
-        fallback: /* @__PURE__ */ React__default.createElement(
-          EmptyState,
-          {
-            width,
-            height,
-            size,
-            restProps
-          }
-        )
-      },
-      /* @__PURE__ */ React__default.createElement(
-        Suspense,
-        {
-          fallback: /* @__PURE__ */ React__default.createElement(
-            EmptyState,
-            {
-              width,
-              height,
-              size,
-              restProps
-            }
-          )
-        },
-        /* @__PURE__ */ React__default.createElement(IconContent, { ...props })
-      )
-    );
-  };
-  Icon.displayName = `Icon(${params.name})`;
-  return Icon;
-};
-var StatusAlertSmall_default = icon({
-  name: "StatusAlertSmall",
-  hashes: { "default": "0ea2", "odeditor": "a9df" },
-  category: "general",
-  width: 18,
-  height: 18
-});
-const inlineErrorIndication = "inlineErrorIndication__3ZgfF";
-const iconErrorMessage = "iconErrorMessage__ZKTPr";
-const txtErrMsg = "txtErrMsg__Wqn6o";
-const style$1 = {
-  inlineErrorIndication,
-  iconErrorMessage,
-  txtErrMsg
-};
-const errorMessageFallbackText = "Error text displays here.";
-const InlineErrorMessage = ({
-  id,
-  errorMessage,
-  errorMessageType,
-  shouldShowValidityIndication,
-  translations,
-  dataHook,
-  componentViewMode
-}) => {
-  const getOnStageErrorText = () => {
-    return (translations == null ? void 0 : translations.errorMessage) || errorMessageFallbackText;
-  };
-  const errorMessageText = componentViewMode === "editor" ? getOnStageErrorText() : errorMessage;
-  const hasInlineErrorMessage = errorMessageType === "inline" && shouldShowValidityIndication && errorMessageText;
-  return hasInlineErrorMessage ? /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-hook": dataHook ? dataHook : "inline-error-message",
-      className: style$1.inlineErrorIndication,
-      children: [
-        /* @__PURE__ */ jsx(StatusAlertSmall_default, { className: style$1.iconErrorMessage }),
-        /* @__PURE__ */ jsx("span", { id, className: style$1.txtErrMsg, children: errorMessageText })
-      ]
-    }
-  ) : null;
-};
 const root = "root__zQlRz";
 const inputWrapper = "inputWrapper__2KDrH";
-const prefix = "prefix__fIo1S";
 const input = "input__fyTfx";
-const hideNumberSpinner = "hideNumberSpinner__nYhia";
-const hasPrefix = "hasPrefix__RXMKp";
-const validationIndication = "validationIndication__GE20D";
-const helperText = "helperText__SfMAH";
 const label = "label__mbGIM";
-const labelRow = "labelRow__tN4T-";
-const tooltipButton = "tooltipButton__7D4vU";
-const infoIcon = "infoIcon__Ksarp";
-const tooltip = "tooltip__JnxIe";
-const hasLabel = "hasLabel__AGhlP";
-const requiredIndicator = "requiredIndicator__RyrLe";
+const helperText = "helperText__SfMAH";
+const errorMessage = "errorMessage__4XDzv";
 const style = {
   root,
   inputWrapper,
-  prefix,
   input,
-  hideNumberSpinner,
-  hasPrefix,
-  validationIndication,
-  helperText,
   label,
-  labelRow,
-  tooltipButton,
-  infoIcon,
-  tooltip,
-  hasLabel,
-  requiredIndicator
-};
-const TranslationKeys = {
-  NAMESPACE: "Text_Input",
-  PHONE_FORMAT_LENGTH_VALIDATION_ERROR: "text_input_phone_format_length_validation_error",
-  PHONE_FORMAT_LENGTH_VALIDATION_ERROR_DEFAULT: "Please enter a phone number with {digits} digits",
-  PHONE_FORMAT_DEFAULT_VALIDATION_ERROR: "text_input_phone_format_default_validation_error",
-  PHONE_FORMAT_DEFAULT_VALIDATION_ERROR_DEFAULT: "Please enter between 4 to 17 digits. You can include hyphens (-) or start with a (+), e.g., 555-123-4567 or +(222)987654321",
-  PHONE_FORMAT_COMPLEX_PHONE_DEFAULT_VALIDATION_ERROR: "text_input_phone_format_complex_phone_default_validation_error",
-  PHONE_FORMAT_COMPLEX_PHONE_DEFAULT_VALIDATION_ERROR_DEFAULT: "Please enter between 4 to 17 digits. You can include dividers (-), e.g., 555-123-4567.",
-  INLINE_ERROR_MESSAGE_DEFAULT_ERROR_MESSAGE: "Text_Input_On_Stage_Error_Text_Label"
-};
-const formatPhoneNumber = (unformattedValue, phoneFormat) => {
-  const spaceInfo = getSpaceIndexesForPhoneFormat(
-    unformattedValue,
-    phoneFormat,
-    false
-  );
-  const newValueAsArray = Array.from(unformattedValue);
-  spaceInfo.forEach((spaceIdx) => {
-    if (spaceIdx < newValueAsArray.length) {
-      newValueAsArray.splice(spaceIdx, 0, " ");
-    }
-  });
-  return newValueAsArray.join("");
-};
-const getSpaceIndexesForPhoneFormat = (val, phoneFormat, isValueFormatted = true) => {
-  const updatedSpaceInfo = Array.from(phoneFormat).reduce((agg, curr, idx) => {
-    return curr === "-" ? [...agg, idx] : agg;
-  }, []).filter((spaceIdx, index) => {
-    return isValueFormatted ? spaceIdx <= val.length : spaceIdx <= val.length + index;
-  });
-  return updatedSpaceInfo;
-};
-const getUnformattedNumber = (val, phoneFormat, didDeleteChars) => {
-  const updatedSpaceInfo = getSpaceIndexesForPhoneFormat(val, phoneFormat);
-  return updatedSpaceInfo.reduce((agg, curr, idx) => {
-    if (val[curr] === " ") {
-      agg.splice(curr - idx, 1);
-    } else if (val[curr + 1] === " " && !didDeleteChars) {
-      const offset = 1 - idx;
-      agg.splice(curr + offset, 1);
-    } else if (val[curr - 1] === " " && didDeleteChars) {
-      const didDeleteSpace = val.split(" ").length - 1 < updatedSpaceInfo.length;
-      if (didDeleteSpace) {
-        agg.splice(curr - idx, 1);
-      } else {
-        agg.splice(curr - idx - 1, 1);
-      }
-    }
-    return agg;
-  }, Array.from(val)).join("");
-};
-const hasNonNumericChar = (str) => !!str.match(/[^\d]/);
-const translateHtmlValidationMessage = (message, {
-  translations,
-  phoneFormat
-}) => {
-  switch (message.key) {
-    case "PHONE_FORMAT_LENGTH_VALIDATION_ERROR":
-      return getPhoneFormatLengthValidationError(
-        phoneFormat,
-        (translations == null ? void 0 : translations.phoneFormatLengthValidationError) || TranslationKeys.PHONE_FORMAT_LENGTH_VALIDATION_ERROR_DEFAULT
-      );
-    case "PHONE_FORMAT_DEFAULT_VALIDATION_ERROR":
-      return (translations == null ? void 0 : translations.phoneFormatDefaultValidationError) || TranslationKeys.PHONE_FORMAT_DEFAULT_VALIDATION_ERROR_DEFAULT;
-    case "PHONE_FORMAT_COMPLEX_PHONE_DEFAULT_VALIDATION_ERROR":
-      return (translations == null ? void 0 : translations.phoneFormatComplexPhoneDefaultValidationError) || TranslationKeys.PHONE_FORMAT_COMPLEX_PHONE_DEFAULT_VALIDATION_ERROR_DEFAULT;
-    default:
-      return message.key;
-  }
-};
-const getPhoneFormatLengthValidationError = (phoneFormat, phoneFormatLengthValidationError) => phoneFormatLengthValidationError.replace(
-  "{digits}",
-  `${phoneFormat ? phoneFormat.replace(/-/g, "").length : 0}`
-);
-const useSdkState = (componentId, key, defaultValue) => {
-  const $sig = useService(SdkStateDefinition).for(componentId).getSignal(key, defaultValue);
-  return [$sig.get(), (value) => $sig.set(value)];
+  helperText,
+  errorMessage
 };
 const noop = () => {
 };
-const TextInput = (props, ref) => {
-  var _a;
+const TextInput = (props) => {
+  var _a, _b, _c, _d;
   const {
-    name,
     id,
     className = "",
     dataTestId,
-    inputType = "text",
     label: label2,
-    tooltip: tooltip2,
     placeholder,
-    description,
+    helperText: helperText2,
+    errorMessage: errorMessage2,
+    previewError,
     direction,
-    labelDirection,
-    inputDirection,
     readOnly,
-    required,
-    isDisabled,
-    pattern,
-    autoComplete,
-    autoComplete_,
-    autocompleteToken,
-    maxLength,
-    minLength,
-    min,
-    max,
-    step,
-    numberSpinnerHidden,
+    disabled,
     autoFocus,
-    prefix: prefix2,
-    phoneFormat = "",
-    errorMessageType = "inline",
-    validateValue = noop,
-    onBlur = noop,
-    onFocus = noop,
-    onKeyPress = noop,
-    onInput = noop,
-    onChange = noop,
-    onClick = noop,
-    onDblClick = noop,
-    onMouseEnter = noop,
-    onMouseLeave = noop,
-    onHydrationComplete = noop,
+    onValueChange = noop,
     a11y,
-    ariaAttributes,
-    contentRef
+    contentRef,
+    elementProps,
+    wix
   } = props;
-  const { isExperimentOpen, getPreviewMode, language } = useService(
-    EnvironmentDefinition
-  );
-  const { translate } = useService(
-    TranslationsDefinition
-  );
-  const [sdkValue, setSdkValue] = useSdkState(
-    props.wix.wixPath,
-    "value",
-    props.defaultValue ?? ""
-  );
-  const [sdkValidityIndication, setSdkValidityIndication] = useSdkState(
-    props.wix.wixPath,
-    "shouldShowValidityIndication",
-    false
-  );
-  const [value, setValue] = React.useState(sdkValue);
-  const [shouldShowValidityIndication, setValidityIndication] = React.useState(
-    sdkValidityIndication
-  );
-  const boundValue = props.value;
-  React.useEffect(() => {
-    if (boundValue !== void 0 && boundValue !== value) {
-      setValue(boundValue);
-      setSdkValue(boundValue);
-    }
-  }, [boundValue]);
-  const defaultValue = props.defaultValue;
-  React.useEffect(() => {
-    if (boundValue === void 0 && defaultValue !== void 0) {
-      setValue(defaultValue);
-      setSdkValue(defaultValue);
-    }
-  }, [defaultValue]);
-  const isTextInputAutoFillFixExperimentEnabled = isExperimentOpen(
-    "specs.thunderbolt.TextInputAutoFillFix"
-  );
-  const translations = {
-    phoneFormatLengthValidationError: translate(TranslationKeys.NAMESPACE)(
-      TranslationKeys.PHONE_FORMAT_LENGTH_VALIDATION_ERROR
-    ),
-    phoneFormatDefaultValidationError: translate(TranslationKeys.NAMESPACE)(
-      TranslationKeys.PHONE_FORMAT_DEFAULT_VALIDATION_ERROR
-    ),
-    phoneFormatComplexPhoneDefaultValidationError: translate(
-      TranslationKeys.NAMESPACE
-    )(TranslationKeys.PHONE_FORMAT_COMPLEX_PHONE_DEFAULT_VALIDATION_ERROR),
-    errorMessage: translate(TranslationKeys.NAMESPACE)(
-      TranslationKeys.INLINE_ERROR_MESSAGE_DEFAULT_ERROR_MESSAGE
-    )
-  };
+  const { language } = useService(EnvironmentDefinition);
+  const value = props.value ?? "";
   const inputRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => {
-    return {
-      focus: () => {
-        var _a2;
-        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-      },
-      blur: () => {
-        var _a2;
-        (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
-      },
-      setCustomValidity: (message) => {
-        var _a2, _b;
-        if (message.type === "message") {
-          (_a2 = inputRef.current) == null ? void 0 : _a2.setCustomValidity(message.message);
-        } else {
-          (_b = inputRef.current) == null ? void 0 : _b.setCustomValidity(
-            translateHtmlValidationMessage(message, {
-              translations: props.translations,
-              phoneFormat: props.phoneFormat
-            })
-          );
-        }
-      },
-      getValidationMessage: () => {
-        var _a2;
-        return (_a2 = inputRef.current) == null ? void 0 : _a2.validationMessage;
-      }
-    };
-  });
-  const valueChanged = React.useRef();
-  const activePhoneFormat = inputType === "tel" ? phoneFormat : "";
-  const formattedValue = React.useMemo(() => {
-    return activePhoneFormat ? formatPhoneNumber(value, activePhoneFormat) : value;
-  }, [value, activePhoneFormat]);
-  const handleAutoFillChange = (event) => {
-    if (isTextInputAutoFillFixExperimentEnabled && !hasFocus()) {
-      onChange({
-        ...event,
-        type: "change"
-      });
-    }
-  };
-  const getOnChangeFn = ({
-    shouldHideValidityIndication,
-    shouldCallOnInput
-  }) => (newValue) => {
-    let unformattedNumber = newValue;
-    if (activePhoneFormat) {
-      const didDeleteChars = newValue.length < formattedValue.length;
-      unformattedNumber = getUnformattedNumber(
-        newValue,
-        activePhoneFormat,
-        didDeleteChars
-      );
-      if (hasNonNumericChar(unformattedNumber)) {
-        return;
-      }
-    }
-    const shouldUpdateValue = unformattedNumber !== value;
-    if (shouldUpdateValue) {
-      valueChanged.current = true;
-      setSdkValue(unformattedNumber);
-      setValue(unformattedNumber);
-      const syntheticEvent = {
-        target: { value: unformattedNumber },
-        type: "change"
-      };
-      unformattedNumber !== value && handleAutoFillChange(syntheticEvent);
-      validateValue();
-    }
-    {
-      setValidityIndication(false);
-      setSdkValidityIndication(false);
-    }
-    if (shouldCallOnInput) {
-      const syntheticEvent = {
-        target: { value: unformattedNumber },
-        type: "input"
-      };
-      onInput(syntheticEvent);
+  const handleValueChange = (newValue) => {
+    if (newValue !== value) {
+      onValueChange(newValue);
     }
   };
   React.useEffect(() => {
     var _a2;
-    const onChangeFn = getOnChangeFn({
-      shouldHideValidityIndication: true,
-      shouldCallOnInput: false
-    });
-    onChangeFn(((_a2 = inputRef.current) == null ? void 0 : _a2.value) ?? "");
-    onHydrationComplete({ type: "onHydrationComplete" });
+    handleValueChange(((_a2 = inputRef.current) == null ? void 0 : _a2.value) ?? "");
   }, []);
-  const useValidationContract = isExperimentOpen(
-    "specs.thunderbolt.textInputBreakingChange"
-  );
-  const nativeValidationMessage = ((_a = inputRef.current) == null ? void 0 : _a.validationMessage) ?? "";
-  const valueMissing = required && !value;
-  const intrinsic = valueMissing ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : {
-    valid: !nativeValidationMessage,
-    validationMessage: nativeValidationMessage
-  };
-  const validityGate = props.showValidityIndication !== void 0 ? props.showValidityIndication : shouldShowValidityIndication;
-  const {
-    validity,
-    showValidityIndication: showIndication,
-    handleBlur: validateOnBlur
-  } = useValidatedField({
-    value,
-    intrinsic,
-    fieldValidity: useValidationContract ? props.fieldValidity : void 0,
-    showValidityIndication: validityGate,
-    onValidate: useValidationContract ? props.onValidate : void 0,
-    onValidityChange: useValidationContract ? props.onValidityChange : void 0
-  });
-  const showErrorIndication = useValidationContract ? showIndication : shouldShowValidityIndication;
-  const isInvalid = useValidationContract ? showIndication && !validity.valid : !!nativeValidationMessage && shouldShowValidityIndication;
-  const errorMessageToShow = useValidationContract ? validity.validationMessage : nativeValidationMessage;
-  const _onBlur = (event) => {
-    onBlur(event);
-    if (valueChanged.current) {
-      onChange({
-        ...event,
-        type: "change"
-      });
-    }
-    valueChanged.current = false;
-    setValidityIndication(true);
-    setSdkValidityIndication(true);
-    validateOnBlur();
-  };
-  const _onClick = (event) => {
-    if (!isDisabled) {
-      onClick(event);
-    }
-  };
-  const _onDblClick = (event) => {
-    if (!isDisabled) {
-      onDblClick(event);
-    }
-  };
-  const _onMouseEnter = (event) => {
-    if (!isDisabled) {
-      onMouseEnter(event);
-    }
-  };
-  const _onMouseLeave = (event) => {
-    if (!isDisabled) {
-      onMouseLeave(event);
-    }
-  };
+  const hasError = !!errorMessage2;
+  const showErrorMessage = previewError === true || hasError;
   const containerClasses = clsx(
     style.root,
-    selectors.root,
+    componentClassNames.root,
     className,
-    !direction && directionStyles.fallbackDirection,
-    {
-      [style.hasLabel]: !!label2,
-      [style.validationIndication]: showErrorIndication
-    }
+    !direction && directionStyles.fallbackDirection
   );
-  const getMaxLength = () => {
-    let updatedMaxLength = maxLength === null ? void 0 : maxLength;
-    if (activePhoneFormat) {
-      updatedMaxLength = activePhoneFormat.length;
-    }
-    return updatedMaxLength;
-  };
-  const getMinLength = () => activePhoneFormat ? activePhoneFormat.length : minLength ?? void 0;
-  const {
-    ariaAttributes: { "aria-label": sdkAriaLabel, ...restAriaAttributes }
-  } = getAccessibilityAttributes({ ariaAttributes });
-  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || sdkAriaLabel;
-  const explicitLabelledBy = restAriaAttributes["aria-labelledby"];
-  const customAccessibleNameId = label2 && ariaLabel && !explicitLabelledBy ? `${id}-accessible-name` : void 0;
-  const componentViewMode = (getPreviewMode == null ? void 0 : getPreviewMode()) ? "preview" : "editor";
-  const hasFocus = () => !!inputRef.current && inputRef.current === document.activeElement;
-  const descriptionId = description ? `description_${id}` : void 0;
-  const errorId = `${id}-error`;
-  const describedByIds = [
-    restAriaAttributes["aria-describedby"],
-    descriptionId,
-    errorMessageType === "inline" && showErrorIndication && (componentViewMode === "editor" || errorMessageToShow) ? errorId : void 0
-  ].filter(Boolean);
+  const ariaLabel = a11y == null ? void 0 : a11y.ariaLabel;
+  const ariaInvalid = hasError ? true : (a11y == null ? void 0 : a11y.ariaInvalid) ?? false;
+  const customAccessibleNameId = label2 && ariaLabel ? `${id}-accessible-name` : void 0;
+  const helperTextId = helperText2 ? `helper_${id}` : void 0;
+  const errorMessageId = showErrorMessage ? `error_${id}` : void 0;
   const inputClasses = clsx(
     style.input,
-    selectors.input,
-    HAS_CUSTOM_FOCUS_CLASSNAME,
+    componentClassNames.input,
+    (_a = elementProps == null ? void 0 : elementProps.input) == null ? void 0 : _a.className,
     {
-      [style.hideNumberSpinner]: numberSpinnerHidden,
-      [style.hasPrefix]: !!prefix2
+      [DesignStates.input.error.className]: hasError
     }
   );
-  const labelClasses = clsx(style.label, selectors.label);
+  const labelClasses = clsx(
+    style.label,
+    componentClassNames.label,
+    (_b = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _b.className
+  );
   const textFieldProps = {
-    value: formattedValue,
-    onChange: getOnChangeFn({
-      shouldHideValidityIndication: true,
-      shouldCallOnInput: true
-    }),
-    isDisabled,
+    value,
+    onChange: handleValueChange,
+    isDisabled: disabled,
     isReadOnly: readOnly,
-    isRequired: required,
     autoFocus,
     "data-testid": "text-field"
   };
+  const describedBy = [
+    a11y == null ? void 0 : a11y.ariaDescribedby,
+    helperTextId,
+    errorMessageId
+  ].filter(Boolean);
   const inputProps = {
     ref: inputRef,
-    name,
-    type: inputType,
+    tabIndex: a11y == null ? void 0 : a11y.tabIndex,
     placeholder,
-    // An empty pattern must NOT set the attribute — `pattern=""` matches only the
-    // empty string, so it would reject every non-empty value.
-    pattern: pattern || void 0,
-    maxLength: getMaxLength(),
-    minLength: getMinLength(),
-    autoComplete: autoComplete ? autocompleteToken || "on" : autoComplete_ || "off",
-    step: step === null ? void 0 : step,
-    min: min === null ? void 0 : min,
-    max: max === null ? void 0 : max,
     className: inputClasses,
     id: `input_${id}`,
-    dir: inputDirection || void 0,
-    onFocus,
-    onKeyDown: onKeyPress,
-    onBlur: _onBlur,
-    "aria-invalid": isInvalid,
+    "aria-invalid": ariaInvalid,
     ...ariaLabel && { "aria-label": ariaLabel },
-    ...!required && { "aria-required": false },
-    ...restAriaAttributes,
     ...customAccessibleNameId && {
       "aria-labelledby": customAccessibleNameId
     },
-    ...describedByIds.length ? {
-      "aria-describedby": describedByIds.join(" ")
-    } : {}
+    ...describedBy.length ? { "aria-describedby": describedBy.join(" ") } : {}
   };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      id,
-      ...getDataAttributes(props),
-      ref: contentRef,
-      className: containerClasses,
-      dir: direction || void 0,
-      "data-testid": dataTestId,
-      onClick: _onClick,
-      onDoubleClick: _onDblClick,
-      onMouseEnter: _onMouseEnter,
-      onMouseLeave: _onMouseLeave,
-      lang: language,
-      children: /* @__PURE__ */ jsxs($bcdf0525bf22703d$export$2c73285ae9390cec, { ...textFieldProps, children: [
-        customAccessibleNameId && /* @__PURE__ */ jsx(
-          "span",
-          {
-            id: customAccessibleNameId,
-            className: accessibilityStyles.visuallyHidden,
-            children: ariaLabel
-          }
-        ),
-        (label2 || tooltip2) && /* @__PURE__ */ jsxs("div", { className: style.labelRow, children: [
-          label2 && /* @__PURE__ */ jsxs(
-            $01b77f81d0f07f68$export$b04be29aa201d4f5,
-            {
-              className: labelClasses,
-              htmlFor: `input_${id}`,
-              dir: labelDirection || void 0,
-              children: [
-                label2,
-                required && /* @__PURE__ */ jsx(
-                  RequiredIndicator,
-                  {
-                    className: clsx(
-                      style.requiredIndicator,
-                      selectors.requiredIndicator
-                    ),
-                    "data-testid": TestIds.requiredIndicator
-                  }
-                )
-              ]
-            }
-          ),
-          tooltip2 && /* @__PURE__ */ jsxs($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, children: [
-            /* @__PURE__ */ jsx(
-              $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+      className: presetWrapperStyles.presetWrapper,
+      ...wix == null ? void 0 : wix.presetsWrapperProps,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id,
+          ...getDataAttributes(props),
+          ref: contentRef,
+          className: containerClasses,
+          dir: direction || void 0,
+          "data-testid": dataTestId,
+          lang: language,
+          children: /* @__PURE__ */ jsxs($bcdf0525bf22703d$export$2c73285ae9390cec, { ...textFieldProps, children: [
+            customAccessibleNameId && /* @__PURE__ */ jsx(
+              "span",
+              {
+                id: customAccessibleNameId,
+                className: accessibilityStyles.visuallyHidden,
+                children: ariaLabel
+              }
+            ),
+            label2 && /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: labelClasses, htmlFor: `input_${id}`, children: label2 }),
+            /* @__PURE__ */ jsx("div", { className: style.inputWrapper, children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { ...inputProps }) }),
+            helperText2 && /* @__PURE__ */ jsx(
+              "p",
               {
-                className: style.tooltipButton,
-                "data-testid": TestIds.tooltipButton,
-                "aria-label": tooltip2,
-                children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": true, className: style.infoIcon })
+                id: helperTextId,
+                className: clsx(
+                  style.helperText,
+                  componentClassNames.helperText,
+                  (_c = elementProps == null ? void 0 : elementProps.helperText) == null ? void 0 : _c.className
+                ),
+                "data-testid": "helper-text",
+                children: helperText2
               }
             ),
-            /* @__PURE__ */ jsx($4e3b923658d69c60$export$28c660c63b792dea, { className: style.tooltip, offset: 6, children: tooltip2 })
+            showErrorMessage && /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: errorMessageId,
+                className: clsx(
+                  style.errorMessage,
+                  componentClassNames.errorMessage,
+                  (_d = elementProps == null ? void 0 : elementProps.errorMessage) == null ? void 0 : _d.className
+                ),
+                "data-testid": "error-message",
+                children: errorMessage2 || ERROR_MESSAGE_PREVIEW_TEXT
+              }
+            )
           ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: style.inputWrapper, children: [
-          prefix2 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(style.prefix, selectors.prefix),
-              "data-testid": "prefix",
-              children: prefix2
-            }
-          ),
-          /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { ...inputProps })
-        ] }),
-        description && /* @__PURE__ */ jsx(
-          "p",
-          {
-            id: descriptionId,
-            className: clsx(style.helperText, selectors.helperText),
-            "data-testid": "helper-text",
-            children: description
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InlineErrorMessage,
-          {
-            id: errorId,
-            errorMessageType,
-            errorMessage: errorMessageToShow,
-            shouldShowValidityIndication: showErrorIndication,
-            translations,
-            componentViewMode
-          }
-        )
-      ] })
+        }
+      )
     }
   );
 };
-const TextInput_default = React.forwardRef(TextInput);
 export {
-  TextInput_default as default
+  TextInput as default
 };