"use client";
import { j as i } from "./index.esm38.js";
import { useRef as y, useState as F, useEffect as O, useMemo as $ } from "react";
import f from "./index.esm40.js";
import { createSeededRandom as k, generatePattern as X } from "./index.esm58.js";
import r from "./index.esm59.js";
import { PatternCell as Y } from "./index.esm60.js";
import { Root as B } from "./index.esm8.js";
const R = 24, G = 1, H = 8, S = 400, K = 1e6, U = [
  "var(--palette-border-subtle)",
  "var(--palette-background-accent)",
  "var(--palette-border-default)",
  "var(--palette-secondary-main)",
  "var(--palette-secondary-hover)",
  "var(--palette-primary-main)",
  "var(--palette-primary-hover)",
  "var(--palette-text-secondary)",
  "var(--palette-background-default)",
  "transparent"
];
function V(t) {
  return Math.min(H, Math.max(G, t));
}
function Z(t, c, n) {
  return t && t.width > 0 && t.height > 0 ? t : c ? { width: S, height: n } : { width: n, height: S };
}
function q({
  edge: t = "right",
  direction: c = "external",
  boxSize: n = 32,
  stripDensity: D = 2,
  colors: l = U,
  seed: E,
  children: b,
  className: x,
  contentClassName: N,
  contentStyle: _,
  testId: M,
  ...w
}) {
  const { style: g, ...I } = w, T = y(E ?? Math.floor(Date.now() + Math.random() * K)), d = y(null), [m, j] = F(null), p = t === "top" || t === "bottom", h = V(D ?? 2), o = R * h;
  O(() => {
    const e = d.current;
    if (!e) return;
    const a = new ResizeObserver((u) => {
      const v = u[0];
      if (v) {
        const { width: P, height: C } = v.contentRect;
        j({ width: P, height: C });
      }
    });
    return a.observe(e), () => a.disconnect();
  }, [t]);
  const A = $(() => {
    if (!m) return [];
    const { width: e, height: a } = Z(m, p, o), u = k(T.current);
    return X(e, a, n, l.length, u, t, h);
  }, [n, h, l.length, t, m, p, o]), L = p ? { height: o } : { width: o, minHeight: R }, s = /* @__PURE__ */ i.jsx(
    "div",
    {
      ref: d,
      className: f(r.strip, r[`strip--${t}`], c === "internal" && r.stripMirror),
      style: L,
      "aria-hidden": !0,
      children: A.map((e) => /* @__PURE__ */ i.jsx(Y, { cell: e, colors: l }, `${e.x}-${e.y}`))
    }
  );
  return /* @__PURE__ */ i.jsxs(
    B,
    {
      as: "div",
      className: f(r.root, r[`root--edge-${t}`], x),
      style: g,
      testId: M,
      ...I,
      children: [
        t === "top" && s,
        t === "left" && s,
        /* @__PURE__ */ i.jsx("div", { className: f(r.content, N), style: _, children: b }),
        t === "right" && s,
        t === "bottom" && s
      ]
    }
  );
}
q.displayName = "DecorativeFrame";
export {
  q as DecorativeFrame
};
//# sourceMappingURL=index.esm32.js.map
