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

// src/components/TextArea/TextArea.tsx
import classNames from "classnames/dedupe";
import "@simplybusiness/mobius/src/components/TextArea/TextArea.css";
import { jsx, jsxs } from "react/jsx-runtime";
var TextArea = ({ ref, ...props }) => {
  const {
    isDisabled,
    className,
    errorMessage,
    label,
    isInvalid,
    ...otherProps
  } = props;
  const { inputProps, labelProps, errorMessageProps } = useTextField(props);
  const classes = classNames("mobius", "mobius-text-area", className);
  const validationClasses = useValidationClasses({ isInvalid });
  const inputClasses = classNames("mobius-text-area__input", validationClasses);
  const labelClasses = classNames(
    {
      "--is-disabled": isDisabled
    },
    validationClasses
  );
  return /* @__PURE__ */ jsxs(Stack, { className: classes, gap: "xs", children: [
    label && /* @__PURE__ */ jsx(Label, { ...labelProps, className: labelClasses, children: props.label }),
    /* @__PURE__ */ jsx(
      TextAreaInput,
      {
        ...otherProps,
        ...inputProps,
        ref,
        className: inputClasses,
        isDisabled,
        "aria-invalid": errorMessage != null
      }
    ),
    /* @__PURE__ */ jsx(ErrorMessage, { ...errorMessageProps, errorMessage })
  ] });
};
TextArea.displayName = "TextArea";

export {
  TextArea
};
//# sourceMappingURL=chunk-6JCU4CGA.js.map
