import { jsxs as w, jsx as r } from "react/jsx-runtime";
import { VisuallyHidden as g } from "@react-aria/visually-hidden";
import { cloneElement as y } from "react";
import { Tooltip as v } from "../Tooltip/Tooltip.es.js";
import { generateRandomId as F } from "../../utilities/generateRandomId.es.js";
import { HelperText as u } from "../../utilities/input.es.js";
import { merge as x } from "../../utilities/merge.es.js";
import { Validation as h } from "../../utilities/validation.es.js";
const $ = ({ tooltips: n }) => n.map((t) => /* @__PURE__ */ r(
  v,
  {
    content: t.content,
    size: t.size,
    "data-test-id": t["data-test-id"],
    children: t.children
  },
  `form-field-tooltip-${F()}`
)), L = ({ label: n, disabled: t, readOnly: f, dataTestId: d }) => {
  const { text: m, required: a, secondaryLabel: i, hugWidth: s, tooltips: e } = n, o = [], c = "tw-w-full tw-flex tw-flex-nowrap tw-justify-between", l = !s && i;
  let p = m;
  return a && (p += " *"), e != null && e.length ? o.push(
    /* @__PURE__ */ w("span", { className: "tw-flex tw-gap-2", children: [
      p,
      /* @__PURE__ */ r($, { tooltips: e })
    ] })
  ) : o.push(/* @__PURE__ */ r("span", { children: p })), l && o.push(/* @__PURE__ */ r("span", { children: i })), /* @__PURE__ */ w(
    "span",
    {
      className: x([
        "tw-whitespace-nowrap",
        s && "tw-pt-2",
        l && c,
        t || f ? "tw-text-black-60" : "tw-text-black-80"
      ]),
      "data-test-id": `${d}-label-text`,
      children: [
        ...o
      ]
    }
  );
}, S = ({
  children: n,
  disabled: t = !1,
  error: f = !1,
  errorText: d,
  errorTextColor: m = h.Error,
  helperText: a,
  helperTextColor: i = h.Default,
  hiddenLabel: s = !1,
  label: e,
  readOnly: o = !1,
  status: c = h.Default,
  "data-test-id": l = "fondue-form-field"
}) => /* @__PURE__ */ w(
  "label",
  {
    className: x([
      "tw-flex tw-text-text-weak tw-gap-2 tw-select-none tw-max-w-full",
      e.hugWidth ? "tw-w-fit tw-items-start tw-justify-start" : "tw-w-full tw-flex-col",
      t || o ? "hover:tw-cursor-not-allowed tw-pointer-events-none" : "hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text"
    ]),
    "data-test-id": `${l}-label`,
    children: [
      s ? /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r("span", { children: e.text }) }) : /* @__PURE__ */ r(L, { label: e, dataTestId: l, disabled: t, readOnly: o }),
      /* @__PURE__ */ w("div", { className: "tw-w-full tw-flex tw-flex-col tw-gap-2", "data-test-id": `${l}-input`, children: [
        y(n, {
          hugWidth: e.hugWidth,
          required: e.required,
          status: c,
          disabled: t,
          readOnly: o
        }),
        f && /* @__PURE__ */ r(
          u,
          {
            text: d ?? "Something went wrong",
            validationStyle: m,
            disabled: t,
            "data-test-id": `${l}-error-text`
          }
        ),
        a && /* @__PURE__ */ r(
          u,
          {
            text: a,
            validationStyle: i,
            disabled: t,
            "data-test-id": `${l}-helper-text`
          }
        )
      ] })
    ]
  }
);
S.displayname = "FondueFormField";
export {
  S as FormField
};
//# sourceMappingURL=FormField.es.js.map
