import { as as g, b as j, e as u, j as e, z as i, $ as b, aS as v } from "./index-c65ca4a4.mjs";
const N = ({ title: r, label: c, value: a, onChange: l, disabled: o, error: s, hint: d, checked: t, separator: n }) => {
  const h = g(), [k, x] = j(t);
  u(() => {
    x(t);
  }, [t]);
  const m = (p) => {
    const f = p.target.checked;
    x(f), l(f);
  };
  return /* @__PURE__ */ e.jsxs("div", { children: [
    /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-1 ${n && "pb-2"}`, children: [
      r && /* @__PURE__ */ e.jsx(i, { grey: !0, level: 6, children: r }),
      /* @__PURE__ */ e.jsxs("label", { className: `flex cursor-pointer items-start ${r && "-mb-1 mt-1"}`, htmlFor: h, children: [
        /* @__PURE__ */ e.jsx(
          "input",
          {
            checked: k,
            className: "relative float-left mt-[3px] h-4 w-4 appearance-none border-2 border-solid border-grey-200 bg-grey-200 outline-none checked:border-black checked:bg-black checked:after:absolute checked:after:-mt-px checked:after:ml-[3px] checked:after:block checked:after:h-[11px] checked:after:w-[6px] checked:after:rotate-45 checked:after:border-[2px] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer focus:shadow-none focus:transition-[border-color_0.2s] dark:border-grey-600 dark:checked:border-green dark:checked:bg-green",
            disabled: o,
            id: h,
            type: "checkbox",
            value: a,
            onChange: m
          }
        ),
        /* @__PURE__ */ e.jsxs("div", { className: `ml-2 flex flex-col ${d && "mb-2"}`, children: [
          /* @__PURE__ */ e.jsx("span", { className: `inline-block text-[1.425rem] ${d && "-mb-1"}`, children: c }),
          d && /* @__PURE__ */ e.jsx(b, { color: s ? "red" : "", children: d })
        ] })
      ] })
    ] }),
    (n || s) && /* @__PURE__ */ e.jsx(v, { className: s ? "border-red" : "" })
  ] });
}, y = ({
  title: r,
  checkboxes: c,
  hint: a,
  error: l
}) => /* @__PURE__ */ e.jsxs("div", { children: [
  r && /* @__PURE__ */ e.jsx(i, { grey: !0, level: 6, children: r }),
  /* @__PURE__ */ e.jsx("div", { className: "mt-2 flex flex-col gap-1", children: c == null ? void 0 : c.map(({ key: o, ...s }) => /* @__PURE__ */ e.jsx(N, { ...s }, o)) }),
  /* @__PURE__ */ e.jsx("div", { className: `flex flex-col ${a && "mb-2"}`, children: a && /* @__PURE__ */ e.jsx(b, { color: l ? "red" : "", children: a }) })
] });
export {
  y as C
};
//# sourceMappingURL=CheckboxGroup-61a40f23.mjs.map
