import { jsxs as p, jsx as r } from "react/jsx-runtime";
import { useRef as d, useState as g, useEffect as b } from "react";
import a from "../../utils/classNames.js";
const w = (f) => {
  const { className: l = "", children: o, supportingText: e, ...n } = f, i = d(null), [t, c] = g(null), u = "htmlFor" in n;
  b(() => {
    if (!i.current)
      return;
    const s = i.current.parentElement;
    s && (s.classList.contains("form-group-lg") ? c("lg") : s.classList.contains("form-group-sm") && c("sm"));
  }, []);
  const m = a(
    "text-color-gray",
    typeof e == "string" && "text-italic",
    t === "sm" && "text-size-10",
    t === "lg" && "text-size-14",
    !t && "text-size-12"
  );
  if (u && n.htmlFor) {
    const s = a(
      !e && "display-inline-block",
      e && "display-inline-flex flex-wrap justify-content-between width-100pct",
      l
    );
    return /* @__PURE__ */ p("label", { ref: i, ...n, className: s, children: [
      /* @__PURE__ */ r("span", { children: o }),
      e && /* @__PURE__ */ r("span", { className: m, children: e })
    ] });
  }
  const x = a(
    "text-color-dark",
    "max-width-100pct",
    t === "sm" && "text-size-10",
    t === "lg" && "text-size-14",
    !t && "text-size-12",
    !e && "display-inline-block",
    e && "display-inline-flex flex-wrap justify-content-between width-100pct",
    !l.includes("margin-bottom") && "margin-bottom-5",
    l
  );
  return (
    // @ts-expect-error
    /* @__PURE__ */ p("div", { ref: i, ...n, className: x, children: [
      o,
      e && /* @__PURE__ */ r("span", { className: m, children: e })
    ] })
  );
};
export {
  w as default
};
//# sourceMappingURL=FormLabel.js.map
