import { jsxs as s, Fragment as d, jsx as r } from "react/jsx-runtime";
import i from "../text/Text.js";
import o from "../grid/Grid.js";
const g = ({ label: a, children: n, columns: e = { xs: 1, lg: 2 } }) => /* @__PURE__ */ s("fieldset", { className: "rounded-[var(--border-radius-lg)] border border-solid border-[var(--base-border)] bg-[var(--base-background)] p-[var(--spacing-2)_var(--spacing-4)_var(--spacing-4)_var(--spacing-4)] max-md:border-0 max-md:p-[var(--spacing-2)]", children: [
  a && /* @__PURE__ */ s(d, { children: [
    /* @__PURE__ */ r("legend", { className: "flex justify-center items-center px-[var(--spacing-1)] gap-[var(--spacing-6)] ml-[-4px] max-md:sr-only", children: /* @__PURE__ */ r("label", { className: "text-[var(--base-muted-foreground)] text-[length:var(--typography-base-sizes-small-font-size)] font-(var(--typography-font-family-font-sans)) font-[var(--font-weight-medium)]", children: a }) }),
    /* @__PURE__ */ r("div", { "aria-hidden": "true", className: "mb-[var(--spacing-4)] hidden max-md:block", children: /* @__PURE__ */ r(i, { type: "h4", children: a }) })
  ] }),
  /* @__PURE__ */ r(o, { columns: typeof e == "number" ? { lg: e } : e, className: "max-md:gap-[var(--spacing-4)]", children: n })
] });
export {
  g as default
};
//# sourceMappingURL=FormGroup.js.map
