import { jsx as e, jsxs as i } from "react/jsx-runtime";
import r from "../../modules/Compare/compare.module.css";
import { Typography as n } from "../../components/Typography/Typography.es.js";
import { HighlightedTitle as s } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
import { Pricing as t } from "../../components/Pricing/Pricing.es.js";
const g = ({ label: a, title: l, leftElement: m, rightElement: o }) => /* @__PURE__ */ e("section", { className: r.root, children: /* @__PURE__ */ i("div", { className: r.container, children: [
  /* @__PURE__ */ i("div", { className: r.header, children: [
    a && /* @__PURE__ */ e(n, { defaultVariant: "labelMd", mobileVariant: "labelSm", emphasis: !0, children: a }),
    /* @__PURE__ */ e(
      s,
      {
        title: l,
        defaultVariant: "displayMd",
        mobileVariant: "headingXl",
        className: r.title
      }
    )
  ] }),
  /* @__PURE__ */ i("div", { className: r.content, children: [
    /* @__PURE__ */ e(t, { ...m, element: "left_card" }),
    /* @__PURE__ */ e(t, { ...o, element: "right_card" })
  ] })
] }) });
export {
  g as Compare
};
