var z = Object.defineProperty;
var a = (e, t) => z(e, "name", { value: t, configurable: !0 });

// src/backgrounds/preview.ts
import { definePreview as V } from "storybook/preview-api";

// src/backgrounds/constants.ts
var N = "storybook/background", c = "backgrounds";
var W = {
  UPDATE: `${N}/update`
};

// src/backgrounds/decorator.ts
import { useEffect as L } from "storybook/preview-api";

// src/backgrounds/defaults.ts
var R = {
  light: { name: "light", value: "#F8F8F8" },
  dark: { name: "dark", value: "#333" }
};

// src/backgrounds/utils.ts
var { document: n } = globalThis, P = /* @__PURE__ */ a(() => globalThis?.matchMedia ? !!globalThis.matchMedia("(prefers-reduced-motion: red\
uce)")?.matches : !1, "isReduceMotionEnabled"), k = /* @__PURE__ */ a((e) => {
  (Array.isArray(e) ? e : [e]).forEach(U);
}, "clearStyles"), U = /* @__PURE__ */ a((e) => {
  if (!n)
    return;
  let t = n.getElementById(e);
  t && t.parentElement && t.parentElement.removeChild(t);
}, "clearStyle"), D = /* @__PURE__ */ a((e, t) => {
  if (!n)
    return;
  let i = n.getElementById(e);
  if (i)
    i.innerHTML !== t && (i.innerHTML = t);
  else {
    let r = n.createElement("style");
    r.setAttribute("id", e), r.innerHTML = t, n.head.appendChild(r);
  }
}, "addGridStyle"), _ = /* @__PURE__ */ a((e, t, i) => {
  if (!n)
    return;
  let r = n.getElementById(e);
  if (r)
    r.innerHTML !== t && (r.innerHTML = t);
  else {
    let o = n.createElement("style");
    o.setAttribute("id", e), o.innerHTML = t;
    let d = `addon-backgrounds-grid${i ? `-docs-${i}` : ""}`, l = n.getElementById(d);
    l ? l.parentElement?.insertBefore(o, l) : n.head.appendChild(o);
  }
}, "addBackgroundStyle");

// src/backgrounds/decorator.ts
var Y = {
  cellSize: 100,
  cellAmount: 10,
  opacity: 0.8
}, v = "addon-backgrounds", C = "addon-backgrounds-grid", j = P() ? "" : "transition: background-color 0.3s;", w = /* @__PURE__ */ a((e, t) => {
  let { globals: i = {}, parameters: r = {}, viewMode: o, id: d } = t, {
    options: l = R,
    disable: F,
    grid: H = Y
  } = r[c] || {}, p = i[c] || {}, S = typeof p == "string" ? p : p?.value, y = S ? l[S] : void 0, E = typeof y == "string" ? y : y?.value ||
  "transparent", A = typeof p == "string" ? !1 : p.grid || !1, B = !!y && !F, h = o === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-mai\
n", M = o === "docs" ? `#anchor--${d} .docs-story` : ".sb-show-main", K = r.layout === void 0 || r.layout === "padded", G = o === "docs" ? 20 :
  K ? 16 : 0, { cellAmount: g, cellSize: s, opacity: u, offsetX: m = G, offsetY: f = G } = H, b = o === "docs" ? `${v}-docs-${d}` : `${v}-co\
lor`, T = o === "docs" ? d : null;
  L(() => {
    let $ = `
    ${h} {
      background: ${E} !important;
      ${j}
      }`;
    if (!B) {
      k(b);
      return;
    }
    _(b, $, T);
  }, [h, b, T, B, E]);
  let x = o === "docs" ? `${C}-docs-${d}` : `${C}`;
  return L(() => {
    if (!A) {
      k(x);
      return;
    }
    let $ = [
      `${s * g}px ${s * g}px`,
      `${s * g}px ${s * g}px`,
      `${s}px ${s}px`,
      `${s}px ${s}px`
    ].join(", "), O = `
        ${M} {
          background-size: ${$} !important;
          background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;
          background-blend-mode: difference !important;
          background-image: linear-gradient(rgba(130, 130, 130, ${u}) 1px, transparent 1px),
           linear-gradient(90deg, rgba(130, 130, 130, ${u}) 1px, transparent 1px),
           linear-gradient(rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px),
           linear-gradient(90deg, rgba(130, 130, 130, ${u / 2}) 1px, transparent 1px) !important;
        }
      `;
    D(x, O);
  }, [g, s, M, x, A, m, f, u]), e();
}, "withBackgroundAndGrid");

// src/backgrounds/preview.ts
var X = [w], q = {
  [c]: {
    grid: {
      cellSize: 20,
      opacity: 0.5,
      cellAmount: 5
    },
    disable: !1
  }
}, J = {
  [c]: { value: void 0, grid: !1 }
}, I = /* @__PURE__ */ a(() => V({
  decorators: X,
  parameters: q,
  initialGlobals: J
}), "default");

// src/backgrounds/index.ts
var ft = I;
export {
  ft as default
};
