import {
  adornmentWithClassName
} from "./chunk-I6CFRGID.js";
import {
  ErrorMessage
} from "./chunk-MZJT3USG.js";
import {
  Stack
} from "./chunk-XH3OJQMW.js";
import {
  Label
} from "./chunk-ZN7OWLZY.js";
import {
  useTextField
} from "./chunk-UYVF3QSW.js";
import {
  useValidationClasses
} from "./chunk-DYOFXXZD.js";

// src/components/TextField/TextField.tsx
import classNames from "classnames/dedupe";
import { memo } from "react";
import "@simplybusiness/mobius/src/components/TextField/TextField.css";
import { jsx, jsxs } from "react/jsx-runtime";
var TextFieldInner = ({ ref, ...props }) => {
  const {
    isDisabled,
    type = "text",
    isInvalid,
    className,
    label,
    errorMessage,
    children,
    isRequired,
    prefixInside,
    prefixOutside,
    suffixInside,
    suffixOutside,
    autoComplete,
    isReadOnly,
    ...otherProps
  } = props;
  const resolvedAutoComplete = autoComplete ?? (type === "email" ? "email" : type === "tel" ? "tel" : void 0);
  const { inputProps, labelProps, errorMessageProps } = useTextField({
    ...props,
    autoComplete: resolvedAutoComplete,
    "aria-errormessage": errorMessage
  });
  const hidden = type === "hidden";
  const validationClasses = useValidationClasses({ isInvalid });
  const textfieldClasses = {
    "--is-disabled": isDisabled,
    "--is-required": typeof isRequired === "boolean" && isRequired,
    "--is-optional": typeof isRequired === "boolean" && !isRequired,
    "--is-hidden": hidden,
    [className || ""]: true
  };
  const sharedClasses = classNames(validationClasses, textfieldClasses);
  const labelClasses = classNames(
    {
      "--is-disabled": isDisabled
    },
    validationClasses
  );
  const containerClasses = classNames(
    "mobius",
    "mobius-text-field",
    sharedClasses
  );
  const inputClasses = classNames(
    "mobius",
    "mobius-text-field__input",
    sharedClasses
  );
  const inputWrapperClasses = classNames(
    "mobius-text-field__input-wrapper",
    sharedClasses
  );
  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", className: containerClasses, children: [
    label && !hidden && /* @__PURE__ */ jsx(Label, { ...labelProps, className: labelClasses, children: label }),
    /* @__PURE__ */ jsxs("div", { className: "mobius-text-field__inner-container", children: [
      adornmentWithClassName(
        prefixOutside,
        labelClasses,
        "mobius-text-field__prefix-outside"
      ),
      /* @__PURE__ */ jsxs("div", { className: inputWrapperClasses, children: [
        adornmentWithClassName(
          prefixInside,
          labelClasses,
          "mobius-text-field__prefix-inside"
        ),
        /* @__PURE__ */ jsx(
          "input",
          {
            ...otherProps,
            ...inputProps,
            ref,
            type,
            className: inputClasses
          }
        ),
        adornmentWithClassName(
          suffixInside,
          labelClasses,
          "mobius-text-field__suffix-inside"
        )
      ] }),
      adornmentWithClassName(
        suffixOutside,
        labelClasses,
        "mobius-text-field__suffix-outside"
      )
    ] }),
    children && /* @__PURE__ */ jsx("div", { className: "mobius-text-field__children", children }),
    /* @__PURE__ */ jsx(ErrorMessage, { ...errorMessageProps, errorMessage })
  ] });
};
var TextField = memo(TextFieldInner);
TextField.displayName = "TextField";

export {
  TextField
};
//# sourceMappingURL=chunk-6RDK3FM2.js.map
