import { j as r, z as u, $ as s, aS as k } from "./index-c65ca4a4.mjs";
const b = ({ id: n, title: a, options: t, onSelect: f, error: c, hint: d, selectedOption: h, separator: l }) => {
  const o = (e) => {
    f(e.target.value);
  };
  return /* @__PURE__ */ r.jsxs("div", { children: [
    /* @__PURE__ */ r.jsxs("div", { className: `flex flex-col gap-2 ${l && "pb-2"}`, children: [
      a && /* @__PURE__ */ r.jsx(u, { level: 6, children: a }),
      t.map((e) => /* @__PURE__ */ r.jsxs("label", { className: `flex cursor-pointer items-start ${a && "-mb-1 mt-1"}`, htmlFor: e.value, children: [
        /* @__PURE__ */ r.jsx(
          "input",
          {
            checked: h === e.value,
            className: "relative float-left mt-[3px] h-4 w-4 min-w-[16px] appearance-none rounded-full border-2 border-solid border-grey-300 after:absolute after:z-[1] after:block after:h-3 after:w-3 after:rounded-full after:content-[''] checked:border-green checked:after:absolute checked:after:left-1/2 checked:after:top-1/2 checked:after:h-[0.625rem] checked:after:w-[0.625rem] checked:after:rounded-full checked:after:border-green checked:after:bg-green checked:after:content-[''] checked:after:[transform:translate(-50%,-50%)] hover:cursor-pointer focus:shadow-none focus:outline-none focus:ring-0 checked:focus:border-green dark:border-grey-600 dark:checked:border-green dark:checked:after:border-green dark:checked:after:bg-green dark:checked:focus:border-green",
            id: e.value,
            name: n,
            type: "radio",
            value: e.value,
            onChange: o
          }
        ),
        /* @__PURE__ */ r.jsxs("div", { className: `ml-2 flex flex-col ${e.hint && "mb-2"}`, children: [
          /* @__PURE__ */ r.jsx("span", { className: `inline-block text-md ${e.hint && "-mb-1"}`, children: e.label }),
          e.hint && /* @__PURE__ */ r.jsx(s, { children: e.hint })
        ] })
      ] }, e.value)),
      d && /* @__PURE__ */ r.jsx(s, { color: c ? "red" : "", children: d })
    ] }),
    (l || c) && /* @__PURE__ */ r.jsx(k, { className: c ? "border-red" : "" })
  ] });
};
export {
  b as R
};
//# sourceMappingURL=Radio-155d4c50.mjs.map
