@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,1164 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import React__default, { Component, createElement, createContext, Suspense, useContext, useRef, useEffect, useMemo, useState, useCallback } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { d as definitionExports } 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 require$$0, { useService } from "@wix/services-manager-react";
+import { d as definitionExports$1 } from "../chunks/index5.js";
+import { $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, a as $f39a9eba43920ace$export$86427a43e3e48ebb, b as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
+import { $ as $c4867b2f328c2698$export$e5c5a5f917a5871c, a as $fe16bffc7a557bf0$export$7f54fc3180508a52, b as $8f5a2122b0992be3$export$8397ddfc504fdb9a, c as $23f2114a1b82827e$export$e58f029f0fbfdb29, d as $0beb20c9744a2065$export$8467354a121f1b9f, e as $390e54f620492c70$export$b4cc09c592e8fdb8, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, g as $3e6197669829fe11$export$40bfa8c7b0832715, h as $d1116acdf220c2da$export$4c014de7c8940b4c, i as $3274bf1495747a7b$export$5add1d006293d136, j as $e969f22b6713ca4a$export$ae780daf29e6d456, k as $0c4a58759813079a$export$4e328f61c538687f, l as $01b77f81d0f07f68$export$75b6ee27786ba447, m as $a049562f99e7db0e$export$f9c6924e160136d1, n as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
+import { r as requireDefinition } from "../chunks/index6.js";
+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);
+    }
+    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 = ({
+  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", { className: style$1.txtErrMsg, children: errorMessageText })
+      ]
+    }
+  ) : null;
+};
+const textInput = "textInput__aQChN";
+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 label = "label__mbGIM";
+const hasLabel = "hasLabel__AGhlP";
+const requiredIndication = "requiredIndication__H3yrQ";
+const style = {
+  textInput,
+  inputWrapper,
+  prefix,
+  input,
+  hideNumberSpinner,
+  hasPrefix,
+  validationIndication,
+  label,
+  hasLabel,
+  requiredIndication
+};
+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 $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
+function $860f7da480e22816$export$b8473d3665f3a75a(props, state, ref) {
+  let { validationBehavior, focus } = props;
+  $c4867b2f328c2698$export$e5c5a5f917a5871c(() => {
+    if (validationBehavior === "native" && (ref == null ? void 0 : ref.current) && !ref.current.disabled) {
+      let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
+      ref.current.setCustomValidity(errorMessage);
+      if (!ref.current.hasAttribute("title")) ref.current.title = "";
+      if (!state.realtimeValidation.isInvalid) state.updateValidation($860f7da480e22816$var$getNativeValidity(ref.current));
+    }
+  });
+  let isIgnoredReset = useRef(false);
+  let onReset = $fe16bffc7a557bf0$export$7f54fc3180508a52(() => {
+    if (!isIgnoredReset.current) state.resetValidation();
+  });
+  let onInvalid = $fe16bffc7a557bf0$export$7f54fc3180508a52((e) => {
+    var _a, _b;
+    if (!state.displayValidation.isInvalid) state.commitValidation();
+    let form = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.form;
+    if (!e.defaultPrevented && ref && form && $860f7da480e22816$var$getFirstInvalidInput(form) === ref.current) {
+      if (focus) focus();
+      else (_b = ref.current) == null ? void 0 : _b.focus();
+      $8f5a2122b0992be3$export$8397ddfc504fdb9a("keyboard");
+    }
+    e.preventDefault();
+  });
+  let onChange = $fe16bffc7a557bf0$export$7f54fc3180508a52(() => {
+    state.commitValidation();
+  });
+  useEffect(() => {
+    let input2 = ref == null ? void 0 : ref.current;
+    if (!input2) return;
+    let form = input2.form;
+    let reset = form == null ? void 0 : form.reset;
+    if (form)
+      form.reset = () => {
+        isIgnoredReset.current = !window.event || window.event.type === "message" && $23f2114a1b82827e$export$e58f029f0fbfdb29(window.event) instanceof MessagePort;
+        reset == null ? void 0 : reset.call(form);
+        isIgnoredReset.current = false;
+      };
+    input2.addEventListener("invalid", onInvalid);
+    input2.addEventListener("change", onChange);
+    form == null ? void 0 : form.addEventListener("reset", onReset);
+    return () => {
+      input2.removeEventListener("invalid", onInvalid);
+      input2.removeEventListener("change", onChange);
+      form == null ? void 0 : form.removeEventListener("reset", onReset);
+      if (form)
+        form.reset = reset;
+    };
+  }, [
+    ref,
+    validationBehavior
+  ]);
+}
+function $860f7da480e22816$var$getValidity(input2) {
+  let validity = input2.validity;
+  return {
+    badInput: validity.badInput,
+    customError: validity.customError,
+    patternMismatch: validity.patternMismatch,
+    rangeOverflow: validity.rangeOverflow,
+    rangeUnderflow: validity.rangeUnderflow,
+    stepMismatch: validity.stepMismatch,
+    tooLong: validity.tooLong,
+    tooShort: validity.tooShort,
+    typeMismatch: validity.typeMismatch,
+    valueMissing: validity.valueMissing,
+    valid: validity.valid
+  };
+}
+function $860f7da480e22816$var$getNativeValidity(input2) {
+  return {
+    isInvalid: !input2.validity.valid,
+    validationDetails: $860f7da480e22816$var$getValidity(input2),
+    validationErrors: input2.validationMessage ? [
+      input2.validationMessage
+    ] : []
+  };
+}
+function $860f7da480e22816$var$getFirstInvalidInput(form) {
+  var _a;
+  for (let i = 0; i < form.elements.length; i++) {
+    let element = form.elements[i];
+    if (((_a = element.validity) == null ? void 0 : _a.valid) === false) return element;
+  }
+  return null;
+}
+const $fd2148440a13ec26$export$aca958c65c314e6c = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+const $fd2148440a13ec26$var$CUSTOM_VALIDITY_STATE = {
+  ...$fd2148440a13ec26$export$aca958c65c314e6c,
+  customError: true,
+  valid: false
+};
+const $fd2148440a13ec26$export$dad6ae84456c676a = {
+  isInvalid: false,
+  validationDetails: $fd2148440a13ec26$export$aca958c65c314e6c,
+  validationErrors: []
+};
+const $fd2148440a13ec26$export$571b5131b7e65c11 = createContext({});
+const $fd2148440a13ec26$export$a763b9476acd3eb = "__reactAriaFormValidationState";
+function $fd2148440a13ec26$export$fc1a364ae1f3ff10(props) {
+  if (props[$fd2148440a13ec26$export$a763b9476acd3eb]) {
+    let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$fd2148440a13ec26$export$a763b9476acd3eb];
+    return {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    };
+  }
+  return $fd2148440a13ec26$var$useFormValidationStateImpl(props);
+}
+function $fd2148440a13ec26$var$useFormValidationStateImpl(props) {
+  let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
+  if (validationState) isInvalid || (isInvalid = validationState === "invalid");
+  let controlledError = isInvalid !== void 0 ? {
+    isInvalid,
+    validationErrors: [],
+    validationDetails: $fd2148440a13ec26$var$CUSTOM_VALIDITY_STATE
+  } : null;
+  let clientError = useMemo(() => {
+    if (!validate || value == null) return null;
+    let validateErrors = $fd2148440a13ec26$var$runValidate(validate, value);
+    return $fd2148440a13ec26$var$getValidationResult(validateErrors);
+  }, [
+    validate,
+    value
+  ]);
+  if (builtinValidation == null ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = void 0;
+  let serverErrors = useContext($fd2148440a13ec26$export$571b5131b7e65c11);
+  let serverErrorMessages = useMemo(() => {
+    if (name) return Array.isArray(name) ? name.flatMap((name2) => $fd2148440a13ec26$var$asArray(serverErrors[name2])) : $fd2148440a13ec26$var$asArray(serverErrors[name]);
+    return [];
+  }, [
+    serverErrors,
+    name
+  ]);
+  let [lastServerErrors, setLastServerErrors] = useState(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = useState(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+  let serverError = useMemo(() => $fd2148440a13ec26$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
+    isServerErrorCleared,
+    serverErrorMessages
+  ]);
+  let nextValidation = useRef($fd2148440a13ec26$export$dad6ae84456c676a);
+  let [currentValidity, setCurrentValidity] = useState($fd2148440a13ec26$export$dad6ae84456c676a);
+  let lastError = useRef($fd2148440a13ec26$export$dad6ae84456c676a);
+  let commitValidation = () => {
+    if (!commitQueued) return;
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
+    if (!$fd2148440a13ec26$var$isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+    }
+  };
+  let [commitQueued, setCommitQueued] = useState(false);
+  useEffect(commitValidation);
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $fd2148440a13ec26$export$dad6ae84456c676a;
+  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value2) {
+      if (validationBehavior === "aria" && !$fd2148440a13ec26$var$isEqualValidation(currentValidity, value2)) setCurrentValidity(value2);
+      else nextValidation.current = value2;
+    },
+    resetValidation() {
+      let error = $fd2148440a13ec26$export$dad6ae84456c676a;
+      if (!$fd2148440a13ec26$var$isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+      if (validationBehavior === "native") setCommitQueued(false);
+      setServerErrorCleared(true);
+    },
+    commitValidation() {
+      if (validationBehavior === "native") setCommitQueued(true);
+      setServerErrorCleared(true);
+    }
+  };
+}
+function $fd2148440a13ec26$var$asArray(v) {
+  if (!v) return [];
+  return Array.isArray(v) ? v : [
+    v
+  ];
+}
+function $fd2148440a13ec26$var$runValidate(validate, value) {
+  if (typeof validate === "function") {
+    let e = validate(value);
+    if (e && typeof e !== "boolean") return $fd2148440a13ec26$var$asArray(e);
+  }
+  return [];
+}
+function $fd2148440a13ec26$var$getValidationResult(errors) {
+  return errors.length ? {
+    isInvalid: true,
+    validationErrors: errors,
+    validationDetails: $fd2148440a13ec26$var$CUSTOM_VALIDITY_STATE
+  } : null;
+}
+function $fd2148440a13ec26$var$isEqualValidation(a, b) {
+  if (a === b) return true;
+  return !!a && !!b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
+function $191c9b6d48a0a4e2$export$294aa081a6c6f55d(props) {
+  let { description, errorMessage, isInvalid, validationState } = props;
+  let { labelProps, fieldProps } = $0beb20c9744a2065$export$8467354a121f1b9f(props);
+  let descriptionId = $390e54f620492c70$export$b4cc09c592e8fdb8([
+    Boolean(description),
+    Boolean(errorMessage),
+    isInvalid,
+    validationState
+  ]);
+  let errorMessageId = $390e54f620492c70$export$b4cc09c592e8fdb8([
+    Boolean(description),
+    Boolean(errorMessage),
+    isInvalid,
+    validationState
+  ]);
+  fieldProps = $bbaa08b3cd72f041$export$9d1611c77c2fe928(fieldProps, {
+    "aria-describedby": [
+      descriptionId,
+      // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+      errorMessageId,
+      props["aria-describedby"]
+    ].filter(Boolean).join(" ") || void 0
+  });
+  return {
+    labelProps,
+    fieldProps,
+    descriptionProps: {
+      id: descriptionId
+    },
+    errorMessageProps: {
+      id: errorMessageId
+    }
+  };
+}
+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 $514c0188e459b4c0$export$9afb8bc826b033ea = /* @__PURE__ */ createContext({});
+const $ee014567cb39d3f0$export$ff05c3ac10437e03 = /* @__PURE__ */ createContext(null);
+const $d3e0e05bdfcf66bd$export$c24727297075ec6a = /* @__PURE__ */ createContext(null);
+const $3985021b0ad6602f$export$37fb8590cf2c088c = /* @__PURE__ */ createContext({});
+let $3985021b0ad6602f$var$filterHoverProps = (props) => {
+  let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
+  return otherProps;
+};
+const $3985021b0ad6602f$export$f5b8910cec6cf069 = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function Input(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $3985021b0ad6602f$export$37fb8590cf2c088c);
+  let { hoverProps, isHovered } = $e969f22b6713ca4a$export$ae780daf29e6d456(props);
+  let { isFocused, isFocusVisible, focusProps } = $0c4a58759813079a$export$4e328f61c538687f({
+    isTextInput: true,
+    autoFocus: props.autoFocus
+  });
+  let isInvalid = !!props["aria-invalid"] && props["aria-invalid"] !== "false";
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled: props.disabled || false,
+      isInvalid
+    },
+    defaultClassName: "react-aria-Input"
+  });
+  return /* @__PURE__ */ React__default.createElement("input", {
+    ...$bbaa08b3cd72f041$export$9d1611c77c2fe928($3985021b0ad6602f$var$filterHoverProps(props), focusProps, hoverProps),
+    ...renderProps,
+    ref,
+    "data-focused": isFocused || void 0,
+    "data-disabled": props.disabled || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-invalid": isInvalid || void 0
+  });
+});
+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));
+});
+var helpers = {};
+var hasRequiredHelpers;
+function requireHelpers() {
+  if (hasRequiredHelpers) return helpers;
+  hasRequiredHelpers = 1;
+  Object.defineProperty(helpers, "__esModule", { value: true });
+  helpers.useSdkState = void 0;
+  const services_manager_react_1 = require$$0;
+  const definition_1 = /* @__PURE__ */ requireDefinition();
+  const useSdkState = (componentId, key, defaultValue) => {
+    const $sig = (0, services_manager_react_1.useService)(definition_1.SdkStateDefinition).for(componentId).getSignal(key, defaultValue);
+    return [$sig.get(), (value) => $sig.set(value)];
+  };
+  helpers.useSdkState = useSdkState;
+  return helpers;
+}
+var helpersExports = /* @__PURE__ */ requireHelpers();
+const noop = () => {
+};
+const TextInput = (props, ref) => {
+  var _a, _b;
+  const {
+    name,
+    id,
+    className = "",
+    dataTestId,
+    inputType = "text",
+    label: label2,
+    placeholder,
+    readOnly,
+    required,
+    isDisabled,
+    pattern,
+    autoComplete,
+    autoComplete_,
+    maxLength,
+    min,
+    max,
+    step,
+    numberSpinnerHidden,
+    autoFocus,
+    prefix: prefix2,
+    phoneFormat = "",
+    errorMessageType = "tooltip",
+    validateValue = noop,
+    onBlur = noop,
+    onFocus = noop,
+    onKeyPress = noop,
+    onInput = noop,
+    onChange = noop,
+    onClick = noop,
+    onDblClick = noop,
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+    onHydrationComplete = noop,
+    ariaAttributes,
+    contentRef
+  } = props;
+  const { isExperimentOpen, getPreviewMode, language } = useService(
+    definitionExports.EnvironmentDefinition
+  );
+  const { translate } = useService(
+    definitionExports$1.TranslationsDefinition
+  );
+  const [sdkValue, setSdkValue] = helpersExports.useSdkState(props.wix.wixPath, "value", "");
+  const [sdkValidityIndication, setSdkValidityIndication] = helpersExports.useSdkState(
+    props.wix.wixPath,
+    "shouldShowValidityIndication",
+    false
+  );
+  const [value, setValue] = React.useState(sdkValue);
+  const [shouldShowValidityIndication, setValidityIndication] = React.useState(
+    sdkValidityIndication
+  );
+  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 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, _b2;
+        if (message.type === "message") {
+          (_a2 = inputRef.current) == null ? void 0 : _a2.setCustomValidity(message.message);
+        } else {
+          (_b2 = inputRef.current) == null ? void 0 : _b2.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 formattedValue = React.useMemo(() => {
+    return inputType === "tel" && phoneFormat ? formatPhoneNumber(value, phoneFormat) : value;
+  }, [value, phoneFormat, inputType]);
+  const handleAutoFillChange = (event) => {
+    if (isTextInputAutoFillFixExperimentEnabled && !hasFocus()) {
+      onChange({
+        ...event,
+        type: "change"
+      });
+    }
+  };
+  const getOnChangeFn = ({
+    shouldHideValidityIndication,
+    shouldCallOnInput
+  }) => (newValue) => {
+    let unformattedNumber = newValue;
+    if (phoneFormat) {
+      const didDeleteChars = newValue.length < formattedValue.length;
+      unformattedNumber = getUnformattedNumber(
+        newValue,
+        phoneFormat,
+        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 },
+        type: "input"
+      };
+      onInput(syntheticEvent);
+    }
+  };
+  React.useEffect(() => {
+    var _a2;
+    const onChangeFn = getOnChangeFn({
+      shouldHideValidityIndication: true,
+      shouldCallOnInput: false
+    });
+    onChangeFn(((_a2 = inputRef.current) == null ? void 0 : _a2.value) ?? "");
+    onHydrationComplete({ type: "onHydrationComplete" });
+  }, []);
+  const _onBlur = (event) => {
+    onBlur(event);
+    if (valueChanged.current) {
+      onChange({
+        ...event,
+        type: "change"
+      });
+    }
+    valueChanged.current = false;
+    setValidityIndication(true);
+    setSdkValidityIndication(true);
+  };
+  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 containerClasses = clsx(style.textInput, className, {
+    [style.hasLabel]: !!label2,
+    [style.requiredIndication]: required,
+    [style.validationIndication]: !!shouldShowValidityIndication
+  });
+  const getMaxLength = () => {
+    let updatedMaxLength = maxLength === null ? void 0 : maxLength;
+    if (phoneFormat) {
+      updatedMaxLength = phoneFormat.length;
+    }
+    return updatedMaxLength;
+  };
+  const getMinLength = () => phoneFormat ? phoneFormat.length : void 0;
+  const {
+    ariaAttributes: { "aria-label": ariaLabel, ...restAriaAttributes }
+  } = getAccessibilityAttributes({ ariaAttributes });
+  const hasFocus = () => !!inputRef.current && inputRef.current === document.activeElement;
+  const hasInvalidErrorMessage = !!((_a = inputRef.current) == null ? void 0 : _a.validationMessage) && shouldShowValidityIndication;
+  const inputClasses = clsx(style.input, HAS_CUSTOM_FOCUS_CLASSNAME, {
+    [style.hideNumberSpinner]: numberSpinnerHidden,
+    [style.hasPrefix]: !!prefix2
+  });
+  const labelClasses = clsx(style.label);
+  const textFieldProps = {
+    value: formattedValue,
+    onChange: getOnChangeFn({
+      shouldHideValidityIndication: true,
+      shouldCallOnInput: true
+    }),
+    isDisabled,
+    isReadOnly: readOnly,
+    isRequired: required,
+    autoFocus,
+    "data-testid": "text-field"
+  };
+  const inputProps = {
+    ref: inputRef,
+    name,
+    type: inputType,
+    placeholder,
+    pattern,
+    maxLength: getMaxLength(),
+    minLength: getMinLength(),
+    autoComplete: autoComplete ? "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}`,
+    onFocus,
+    onKeyDown: onKeyPress,
+    onBlur: _onBlur,
+    "aria-invalid": hasInvalidErrorMessage,
+    ...ariaLabel && { "aria-label": ariaLabel },
+    ...!required && { "aria-required": false },
+    ...restAriaAttributes
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      ...getDataAttributes(props),
+      ref: contentRef,
+      className: containerClasses,
+      "data-testid": dataTestId,
+      onClick: _onClick,
+      onDoubleClick: _onDblClick,
+      onMouseEnter: _onMouseEnter,
+      onMouseLeave: _onMouseLeave,
+      lang: language,
+      children: /* @__PURE__ */ jsxs($bcdf0525bf22703d$export$2c73285ae9390cec, { ...textFieldProps, children: [
+        label2 && /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: labelClasses, htmlFor: `input_${id}`, children: label2 }),
+        /* @__PURE__ */ jsxs("div", { className: style.inputWrapper, children: [
+          prefix2 && /* @__PURE__ */ jsx("div", { className: style.prefix, "data-testid": "prefix", children: prefix2 }),
+          /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { ...inputProps })
+        ] }),
+        /* @__PURE__ */ jsx(
+          InlineErrorMessage,
+          {
+            errorMessageType,
+            errorMessage: (_b = inputRef.current) == null ? void 0 : _b.validationMessage,
+            shouldShowValidityIndication,
+            translations,
+            componentViewMode: (getPreviewMode == null ? void 0 : getPreviewMode()) ? "preview" : "editor"
+          }
+        )
+      ] })
+    }
+  );
+};
+const TextInput_default = React.forwardRef(TextInput);
+export {
+  TextInput_default as default
+};