import { j as o } from "../../node_modules/react/jsx-runtime.js";
import * as m from "react";
import { cn as t } from "../../utils/index.js";
import { Label as c } from "../Label/index.js";
import { GridLayout as i } from "../GridLayout/index.js";
const F = ({
  className: e,
  ...r
}) => /* @__PURE__ */ o.jsx("div", { className: t("space-y-2", e), ...r }), l = m.forwardRef(({ className: e, variant: r, ...a }, s) => /* @__PURE__ */ o.jsx(
  c,
  {
    ref: s,
    className: t(
      r === "error" && "text-interaction-critical-default",
      e
    ),
    ...a
  }
));
l.displayName = "FormLabel";
const n = m.forwardRef(({ className: e, ...r }, a) => /* @__PURE__ */ o.jsx("p", { ref: a, className: t("form-footnote", e), ...r }));
n.displayName = "FormDescription";
const f = m.forwardRef(({ className: e, children: r, ...a }, s) => r ? /* @__PURE__ */ o.jsx(
  "p",
  {
    ref: s,
    className: t("text-xs text-interaction-critical-default", e),
    ...a,
    children: r
  }
) : null);
f.displayName = "FormMessage";
function N({
  className: e,
  children: r,
  inSideNavLayout: a,
  ...s
}) {
  return /* @__PURE__ */ o.jsx(
    i,
    {
      variant: a ? "inSideNav" : "compact",
      className: t(e, "my-8"),
      ...s,
      children: /* @__PURE__ */ o.jsx(
        "section",
        {
          className: t(
            a && "lg:col-span-8 lg:col-start-3",
            "col-span-full",
            "flex flex-col gap-10"
          ),
          children: r
        }
      )
    }
  );
}
export {
  N as FormContainer,
  n as FormDescription,
  F as FormField,
  l as FormLabel,
  f as FormMessage
};
