import { jsx as e, jsxs as r } from "react/jsx-runtime";
import a from "../../modules/CircleHighlights/circleHighlights.module.css";
import { Typography as l } from "../../components/Typography/Typography.es.js";
const o = ({ highlights: s }) => /* @__PURE__ */ e("div", { className: a.root, children: /* @__PURE__ */ e("div", { className: a.wrapper, children: s.map((i, t) => /* @__PURE__ */ r("div", { className: a.highlight, children: [
  /* @__PURE__ */ e(
    "div",
    {
      className: a.image,
      style: { backgroundImage: `url(${i.image})` },
      "aria-label": i.title
    }
  ),
  /* @__PURE__ */ r("div", { className: a.content, children: [
    /* @__PURE__ */ e(l, { as: "h3", defaultVariant: "headingLg", className: a.title, children: i.title }),
    /* @__PURE__ */ e(l, { as: "p", defaultVariant: "bodyMd", className: a.description, children: i.description })
  ] })
] }, t)) }) });
export {
  o as CircleHighlights
};
