"use client";
import { jsxs as f, jsx as e } from "react/jsx-runtime";
import { Label as h } from "../shared/label.js";
import { Textarea as v } from "../shared/textarea.js";
import { useSettings as S } from "../../hooks/use-settings.js";
import { createId as V, classNames as b } from "../../utils/index.js";
import { useRef as j, useEffect as k } from "react";
import { l as C } from "../../../../../_virtual/lodash.js";
import { useFieldName as E } from "../../hooks/use-field-name.js";
import { BreakpointSelector as F } from "../shared/breakpoint-selector.js";
import { LanguageSelector as I } from "../shared/language-selector.js";
const H = ({
  className: n,
  label: o,
  type: c,
  fieldName: u,
  mode: i,
  responsive: a,
  isLocalized: m,
  inputProps: p,
  labelProps: d
}) => {
  const x = E({
    key: u,
    responsive: a,
    mode: i,
    isLocalized: m
  }), [l, g] = S(x, c), s = V(), t = j(null), N = C.debounce((r) => {
    g(r);
  }, 400);
  return k(() => {
    t.current && (t.current.value = l ?? "");
  }, [l]), /* @__PURE__ */ f("div", { className: b("mt-4 grid w-full gap-1.5", n), children: [
    o && /* @__PURE__ */ f(h, { htmlFor: s, className: "flex flex-1 items-center gap-1", ...d, children: [
      /* @__PURE__ */ e("span", { children: o }),
      a && /* @__PURE__ */ e(F, {}),
      m && /* @__PURE__ */ e(I, { className: "ms-auto" })
    ] }),
    /* @__PURE__ */ e(
      v,
      {
        ref: t,
        id: s,
        className: "flex-1 text-[12px]",
        defaultValue: "",
        onChange: (r) => N(r.target.value),
        ...p
      }
    )
  ] });
};
export {
  H as TextareaControl
};
//# sourceMappingURL=textarea.control.js.map
