import { t as i } from "./vendor/react.js";
import { t as c } from "./utils.js";
var r = i();
function l() {
  return /* @__PURE__ */ (0, r.jsxs)("g", {
    className: "stroke-border",
    strokeWidth: "1",
    children: [Array.from({ length: 17 }).map((t, e) => /* @__PURE__ */ (0, r.jsx)("line", {
      x1: e * 48,
      y1: "0",
      x2: e * 48,
      y2: "768"
    }, `v-${e}`)), Array.from({ length: 17 }).map((t, e) => /* @__PURE__ */ (0, r.jsx)("line", {
      x1: "0",
      y1: e * 48,
      x2: "768",
      y2: e * 48
    }, `h-${e}`))]
  });
}
function d() {
  return /* @__PURE__ */ (0, r.jsx)("g", {
    className: "stroke-border",
    strokeWidth: "1",
    fill: "none",
    children: [
      48,
      96,
      144,
      192,
      240,
      288,
      336,
      384
    ].map((t) => /* @__PURE__ */ (0, r.jsx)("circle", {
      cx: "384",
      cy: "384",
      r: t
    }, t))
  });
}
var s = "radial-gradient(circle at center, black 0%, transparent 70%)";
function x({ pattern: t, offset: e = "top", className: o }) {
  const a = e === "icon-center", n = a ? void 0 : e === "top" ? -260 : e === "center" ? -384 : e;
  return /* @__PURE__ */ (0, r.jsx)("div", {
    "data-slot": "page-background",
    className: c("pointer-events-none absolute left-1/2 -translate-x-1/2 size-[768px]", a && "top-1/2 -translate-y-1/2", o),
    style: {
      ...n !== void 0 ? { top: n } : {},
      maskImage: s,
      WebkitMaskImage: s
    },
    "aria-hidden": "true",
    children: /* @__PURE__ */ (0, r.jsx)("svg", {
      className: "absolute inset-0 size-[768px]",
      viewBox: "0 0 768 768",
      fill: "none",
      focusable: "false",
      children: t === "grid" ? /* @__PURE__ */ (0, r.jsx)(l, {}) : /* @__PURE__ */ (0, r.jsx)(d, {})
    })
  });
}
x.displayName = "PageBackground";
export {
  x as t
};

//# sourceMappingURL=PageBackground.js.map