import { jsx as e } from "react/jsx-runtime";
import { Grid as n } from "@mui/material";
import a from "./PricingPlan.js";
import { styled as m } from "../Theme/index.js";
import { withDeprecated as o } from "../Util/deprecate.js";
function d({ plans: i = [] }) {
  return i && i.length > 0 ? /* @__PURE__ */ e(f, { variant: "even", children: /* @__PURE__ */ e(
    n,
    {
      container: !0,
      spacing: 2,
      sx: {
        justifyContent: "center"
      },
      children: i.map((t, r) => /* @__PURE__ */ e(
        n,
        {
          className: "plan-item",
          size: {
            xs: 12,
            sm: 6,
            md: 3
          },
          children: /* @__PURE__ */ e(a, { plan: t })
        },
        r
      ))
    }
  ) }) : null;
}
const g = o(d, { name: "PricingTable" }), f = m("div")`
  padding: 100px 0;
  text-align: center;
  background-color: ${(i) => i.variant === "even" ? "#fbfbfb" : "#ffffff"};
  @media (max-width: 320px) {
    padding: 50px 0;
  }
  .plan-item {
    @media (max-width: 320px) {
      margin-bottom: 30px;
    }
  }
`;
export {
  g as default
};
