@theguild/components/dist/components/info-list.js

import { jsx, jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { Anchor } from "./anchor";
const InfoList = ({ title, items, className }) => /* @__PURE__ */ jsx("section", { className: clsx("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs("div", { className: "container max-w-[90rem] py-12", children: [
  title && /* @__PURE__ */ jsx("h2", { className: "mb-4 mt-0 text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap", children: items.map((item, index) => /* @__PURE__ */ jsxs(
    "section",
    {
      className: "mb-9 box-border flex w-full max-w-lg flex-col pr-10 last:mb-0 md:w-1/2 lg:mb-0 lg:w-1/3",
      children: [
        /* @__PURE__ */ jsx("h3", { className: "m-0 text-base font-semibold text-black dark:text-gray-50", children: item.title }),
        /* @__PURE__ */ jsx("p", { className: "mb-4 mt-2 grow text-sm text-gray-500 dark:text-gray-400", children: item.description }),
        item.link && /* @__PURE__ */ jsx(
          Anchor,
          {
            className: "mt-auto w-max text-sm text-cyan-400 hover:text-cyan-300",
            ...item.link
          }
        )
      ]
    },
    `info-${index}`
  )) })
] }) });
export {
  InfoList
};