border-beam 1.2.0 → 1.3.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs as he, Fragment as Ce, jsx as ze } from "react/jsx-runtime";
-import { forwardRef as Ge, useId as Me, useRef as Ie, useState as L, useEffect as P, useCallback as ye, useMemo as ke } from "react";
+import { forwardRef as Ge, useId as Me, useRef as Ie, useState as P, useEffect as B, useCallback as ye, useMemo as ve } from "react";
 const Le = {
   sm: {
     borderRadius: 32,
@@ -547,7 +547,7 @@ const De = {
     }
   }
 };
-function U(t, e) {
+function K(t, e) {
   const a = t.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
   if (a) return `rgba(${a[1]}, ${a[2]}, ${a[3]}, ${e})`;
   const r = t.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
@@ -560,28 +560,28 @@ function q(t, e) {
   return r ? `rgba(${r[1]}, ${r[2]}, ${r[3]}, ${e.toFixed(2)})` : t;
 }
 function Ue(t, e, a) {
-  const r = _e(t, e), o = De[t][e ? "dark" : "light"], s = t === "mono", i = s ? 0.14 : 1, c = s ? q(r.primary, 0.14) : r.primary, b = s ? q(r.primary, 0.09) : r.primary, p = s ? q(r.secondary, 0.12) : r.secondary, m = s ? U(r.secondary, 0.06) : U(r.secondary, 0.49), n = o.spikes.map(
-    ($) => s ? { color1: q($.color1, i), color2: q($.color2, i * 0.7) } : $
-  ), l = s ? "12px" : "0.8px", f = s ? "14px" : "2px", v = s ? "12px" : "1.2px", d = s ? "10px" : "0.6px", g = s ? "42px" : "92px", W = s ? "38px" : "72px", Y = s ? "40px" : "85px", y = s ? "32px" : "60px", H = s ? "12px" : "1px", x = s ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 1)", w = s ? "rgba(255, 255, 255, 0.45)" : "rgba(255, 255, 255, 0.9)", k = s ? "rgba(255, 255, 255, 0.25)" : "rgba(255, 255, 255, 0.5)", h = s ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.3)", X = s ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.12)", u = s ? "rgba(255, 255, 255, 0.015)" : "rgba(255, 255, 255, 0.03)";
+  const r = _e(t, e), o = De[t][e ? "dark" : "light"], s = t === "mono", i = s ? 0.14 : 1, c = s ? q(r.primary, 0.14) : r.primary, p = s ? q(r.primary, 0.09) : r.primary, b = s ? q(r.secondary, 0.12) : r.secondary, m = s ? K(r.secondary, 0.06) : K(r.secondary, 0.49), n = o.spikes.map(
+    (v) => s ? { color1: q(v.color1, i), color2: q(v.color2, i * 0.7) } : v
+  ), l = s ? "12px" : "0.8px", d = s ? "14px" : "2px", k = s ? "12px" : "1.2px", f = s ? "10px" : "0.6px", g = s ? "42px" : "92px", W = s ? "38px" : "72px", Y = s ? "40px" : "85px", z = s ? "32px" : "60px", H = s ? "12px" : "1px", $ = s ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 1)", w = s ? "rgba(255, 255, 255, 0.45)" : "rgba(255, 255, 255, 0.9)", y = s ? "rgba(255, 255, 255, 0.25)" : "rgba(255, 255, 255, 0.5)", x = s ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.3)", X = s ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.12)", u = s ? "rgba(255, 255, 255, 0.015)" : "rgba(255, 255, 255, 0.03)";
   if (e)
-    return `radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${b} 30%, transparent 88%),
-       radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${m} 50%, transparent 95%),
-       radial-gradient(ellipse calc(${f} * (2 - var(--beam-spike-${a}))) calc(${W} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
+    return `radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${p} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${b}, ${m} 50%, transparent 95%),
+       radial-gradient(ellipse calc(${d} * (2 - var(--beam-spike-${a}))) calc(${W} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
        radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${n[1].color1}, ${n[1].color2} 55%, transparent 96%),
-       radial-gradient(ellipse calc(${v} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(${k} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
        radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${n[3].color1}, ${n[3].color2} 48%, transparent 94%),
-       radial-gradient(ellipse calc(${d} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
-       radial-gradient(ellipse calc(21px * var(--beam-spike-${a})) calc(15px * var(--beam-spike2-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100% + 1px), ${x} 0%, ${w} 20%, ${k} 50%, transparent 100%),
-       radial-gradient(ellipse calc(42px * var(--beam-w-${a})) calc(40px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) 100%, ${h} 0%, ${X} 25%, ${u} 55%, transparent 80%)`;
+       radial-gradient(ellipse calc(${f} * (2 - var(--beam-spike-${a}))) calc(${z} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(21px * var(--beam-spike-${a})) calc(15px * var(--beam-spike2-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100% + 1px), ${$} 0%, ${w} 20%, ${y} 50%, transparent 100%),
+       radial-gradient(ellipse calc(42px * var(--beam-w-${a})) calc(40px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) 100%, ${x} 0%, ${X} 25%, ${u} 55%, transparent 80%)`;
   {
-    const $ = s ? q(r.primary, 0.11) : U(r.primary, 0.85), F = s ? q(r.secondary, 0.09) : U(r.secondary, 0.7);
-    return `radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${$} 30%, transparent 88%),
-       radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${p}, ${F} 50%, transparent 95%),
-       radial-gradient(ellipse calc(${f} * (2 - var(--beam-spike-${a}))) calc(${W} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
+    const v = s ? q(r.primary, 0.11) : K(r.primary, 0.85), S = s ? q(r.secondary, 0.09) : K(r.secondary, 0.7);
+    return `radial-gradient(ellipse calc(${l} * var(--beam-spike-${a})) calc(${g} * var(--beam-h-${a})) at 8% calc(100% - 2px), ${c}, ${v} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${a})) calc(35px * var(--beam-h-${a})) at 22% calc(100% - 4px), ${b}, ${S} 50%, transparent 95%),
+       radial-gradient(ellipse calc(${d} * (2 - var(--beam-spike-${a}))) calc(${W} * var(--beam-h-${a})) at 36% calc(100% - 3px), ${n[0].color1}, ${n[0].color2} 40%, transparent 90%),
        radial-gradient(ellipse calc(14px * var(--beam-spike2-${a})) calc(28px * var(--beam-h-${a})) at 50% calc(100% - 2px), ${n[1].color1}, ${n[1].color2} 55%, transparent 96%),
-       radial-gradient(ellipse calc(${v} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(${k} * (2 - var(--beam-spike2-${a}))) calc(${Y} * var(--beam-h-${a})) at 64% calc(100% - 4px), ${n[2].color1}, ${n[2].color2} 35%, transparent 89%),
        radial-gradient(ellipse calc(7px * var(--beam-spike-${a})) calc(45px * var(--beam-h-${a})) at 78% calc(100% - 2px), ${n[3].color1}, ${n[3].color2} 48%, transparent 94%),
-       radial-gradient(ellipse calc(${H} * (2 - var(--beam-spike-${a}))) calc(${y} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(${H} * (2 - var(--beam-spike-${a}))) calc(${z} * var(--beam-h-${a})) at 92% calc(100% - 3px), ${n[4].color1}, ${n[4].color2} 42%, transparent 91%),
        radial-gradient(ellipse calc(50px * var(--beam-w-${a})) calc(32px * var(--beam-h-${a})) at calc(var(--beam-x-${a}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
   }
 }
@@ -613,7 +613,7 @@ const Xe = [
   { ci: 5, region: 3, quad: "br", w: 102, h: 31 },
   { ci: 6, region: 1, quad: "tr", w: 89, h: 38 },
   { ci: 8, region: 3, quad: "tr", w: 62, h: 58 }
-], ve = [
+], ke = [
   { ci: 0, region: 1, quad: "tl", w: 80, h: 19, x: "27%", y: "0%" },
   { ci: 6, region: 2, quad: "tr", w: 74, h: 11, x: "73%", y: "-1%" },
   { ci: 7, region: 3, quad: "tr", w: 15, h: 44, x: "100%", y: "33%" },
@@ -635,48 +635,48 @@ function Je(t, e, a) {
   const r = t.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
   return `rgba(${r ? `${r[1]}, ${r[2]}, ${r[3]}` : "255, 255, 255"}, var(--bop-${e}-${a}))`;
 }
-function pe(t, e, a, r, o, s, i, c) {
-  return `radial-gradient(ellipse calc(${e}px * var(--bw${r}-${c}) * var(--pulse-glow-sx, 1)) calc(${a}px * var(--bh${r}-${c}) * var(--bgh-${c}) * var(--pulse-glow-sy, 1)) at calc(${s} + var(--bx${r}-${c})) calc(${i} + var(--by${r}-${c})), ${Je(t, o, c)}, transparent)`;
+function be(t, e, a, r, o, s, i, c) {
+  return `radial-gradient(ellipse calc(${e}px * var(--bw${r}-${c}) * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(${a}px * var(--bh${r}-${c}) * var(--bgh-${c}) * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at calc(${s} + var(--bx${r}-${c})) calc(${i} + var(--by${r}-${c})), ${Je(t, o, c)}, transparent)`;
 }
 function ea(t, e) {
   return C[t].border.map((a, r) => {
-    const { region: o, quad: s } = Xe[r], [i, c] = a.pos.split(" "), [b, p] = a.size.split(" ").map(parseFloat);
-    return pe(a.color, b, p, o, s, i, c, e);
+    const { region: o, quad: s } = Xe[r], [i, c] = a.pos.split(" "), [p, b] = a.size.split(" ").map(parseFloat);
+    return be(a.color, p, b, o, s, i, c, e);
   }).join(`,
     `);
 }
 function aa(t, e, a) {
-  const o = C[t].border.map((p, m) => {
-    const { region: n, quad: l } = Xe[m], [f, v] = p.pos.split(" "), [d, g] = Ke[m];
-    return pe(p.color, d, g, n, l, f, v, e);
-  }), s = a ? "255, 255, 255" : "0, 0, 0", i = a ? 0.18 : 0.08, b = [
+  const o = C[t].border.map((b, m) => {
+    const { region: n, quad: l } = Xe[m], [d, k] = b.pos.split(" "), [f, g] = Ke[m];
+    return be(b.color, f, g, n, l, d, k, e);
+  }), s = a ? "255, 255, 255" : "0, 0, 0", i = a ? 0.18 : 0.08, p = [
     ["0%", "0%", "tl"],
     ["100%", "0%", "tr"],
     ["0%", "100%", "bl"],
     ["100%", "100%", "br"]
   ].map(
-    ([p, m, n]) => `radial-gradient(ellipse 60px 60px at ${p} ${m}, rgba(${s}, calc(${i} * var(--bop-${n}-${e}))), transparent 70%)`
+    ([b, m, n]) => `radial-gradient(ellipse 60px 60px at ${b} ${m}, rgba(${s}, calc(${i} * var(--bop-${n}-${e}))), transparent 70%)`
   );
-  return [...o, ...b].join(`,
+  return [...o, ...p].join(`,
     `);
 }
 function we(t, e, a) {
   const r = C[e].border;
   return t.map((o) => {
     const s = r[o.ci], [i, c] = s.pos.split(" ");
-    return pe(s.color, o.w, o.h, o.region, o.quad, o.x ?? i, o.y ?? c, a);
+    return be(s.color, o.w, o.h, o.region, o.quad, o.x ?? i, o.y ?? c, a);
   }).join(`,
     `);
 }
 function Ye(t, e, a) {
   const r = C[e].border, o = +a.toFixed(3);
   return t.map((s) => {
-    const i = r[s.ci], [c, b] = i.pos.split(" "), p = s.x ?? c, m = s.y ?? b, n = i.color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/), l = n ? `${n[1]}, ${n[2]}, ${n[3]}` : "255, 255, 255";
-    return `radial-gradient(ellipse calc(${s.w}px * var(--pulse-glow-sx, 1)) calc(${s.h}px * var(--pulse-glow-sy, 1)) at ${p} ${m}, rgba(${l}, ${o}), transparent)`;
+    const i = r[s.ci], [c, p] = i.pos.split(" "), b = s.x ?? c, m = s.y ?? p, n = i.color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/), l = n ? `${n[1]}, ${n[2]}, ${n[3]}` : "255, 255, 255";
+    return `radial-gradient(ellipse calc(${s.w}px * var(--pulse-glow-sx, 1) * var(--pulse-glow-boost, 1)) calc(${s.h}px * var(--pulse-glow-sy, 1) * var(--pulse-glow-boost, 1)) at ${b} ${m}, rgba(${l}, ${o}), transparent)`;
   }).join(`,
     `);
 }
-function A(t) {
+function _(t) {
   return `
 [data-beam="${t}"][data-paused],
 [data-beam="${t}"][data-paused]::after,
@@ -719,7 +719,7 @@ ${o}
   inherits: true;
 }`;
 }
-function be(t, e, a) {
+function pe(t, e, a) {
   const r = e === "dark", o = a / 2.3;
   return t === "pulse-inner" ? {
     sp: 0.28,
@@ -744,7 +744,7 @@ function be(t, e, a) {
   };
 }
 function ra(t, e) {
-  const { sp: a, dr: r, op: o, gh: s, bs: i, ss: c, ghs: b } = e;
+  const { sp: a, dr: r, op: o, gh: s, bs: i, ss: c, ghs: p } = e;
   return [
     { prop: `--bw1-${t}`, a: 1 - a, b: 1 + a * 1.1, period: c * 0.9, delay: 0, unit: "" },
     { prop: `--bh1-${t}`, a: 1 + a * 0.9, b: 1 - a * 0.85, period: c * 1.26, delay: 0, unit: "" },
@@ -758,7 +758,7 @@ function ra(t, e) {
     { prop: `--bh3-${t}`, a: 1 + a * 0.75, b: 1 - a, period: c * 1.4, delay: 0, unit: "" },
     { prop: `--bx3-${t}`, a: -r * 0.6, b: r, period: i * 1.45, delay: 0, unit: "px" },
     { prop: `--by3-${t}`, a: -r * 0.85, b: r * 0.45, period: i * 1.45, delay: 0, unit: "px" },
-    { prop: `--bgh-${t}`, a: 1 - s, b: 1 + s, period: b, delay: 0, unit: "" },
+    { prop: `--bgh-${t}`, a: 1 - s, b: 1 + s, period: p, delay: 0, unit: "" },
     { prop: `--bop-tl-${t}`, a: 1 - o, b: 1, period: i, delay: 0, unit: "" },
     { prop: `--bop-tr-${t}`, a: 1 - o, b: 1, period: i * 1.32, delay: i * 0.28, unit: "" },
     { prop: `--bop-bl-${t}`, a: 1 - o, b: 1, period: i * 0.84, delay: i * 0.55, unit: "" },
@@ -767,7 +767,7 @@ function ra(t, e) {
 }
 function ta(t, e, a, r, o, s) {
   if (t !== "pulse-inner" && t !== "pulse-outside") return null;
-  const i = be(t, e, a);
+  const i = pe(t, e, a);
   return {
     oscillators: ra(s, i),
     // Pulse colors continuously rotate a full hue circle so the palette is never
@@ -775,12 +775,12 @@ function ta(t, e, a, r, o, s) {
     hue: o ? null : { prop: `--beam-hue-${s}`, range: 360, period: i.huePeriod, continuous: !0 }
   };
 }
-function K(t, e, a) {
+function Q(t, e, a) {
   return `  animation: ${e}-${t} ${a}s ease forwards;`;
 }
 function oa(t) {
   const { size: e } = t;
-  return e === "line" ? pa(t) : e === "sm" ? sa(t) : e === "pulse-inner" ? na(t) : e === "pulse-outside" ? ca(t) : ia(t);
+  return e === "line" ? ba(t) : e === "sm" ? sa(t) : e === "pulse-inner" ? na(t) : e === "pulse-outside" ? ca(t) : ia(t);
 }
 function sa(t) {
   const {
@@ -791,19 +791,19 @@ function sa(t) {
     strokeOpacity: s,
     innerOpacity: i,
     bloomOpacity: c,
-    innerShadow: b,
-    colorVariant: p,
+    innerShadow: p,
+    colorVariant: b,
     staticColors: m,
     brightness: n,
     saturation: l,
-    hueRange: f,
-    theme: v
-  } = t, d = Math.max(0, a - r), g = p === "mono" ? 0.5 : 1, W = s * g, Y = i * g, y = c * g, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, x = m ? "" : `
+    hueRange: d,
+    theme: k
+  } = t, f = Math.max(0, a - r), g = b === "mono" ? 0.5 : 1, W = s * g, Y = i * g, z = c * g, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, $ = m ? "" : `
 @keyframes beam-hue-shift-${e} {
-  0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-}`, w = v === "dark", k = w ? `conic-gradient(
+  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+}`, w = k === "dark", y = w ? `conic-gradient(
         from var(--beam-angle-${e}),
         transparent 0%, transparent 54%,
         rgba(255, 255, 255, 0.1) 57%,
@@ -825,7 +825,7 @@ function sa(t) {
         rgba(0, 0, 0, 0.2) 72%,
         rgba(0, 0, 0, 0.08) 75%,
         transparent 78%, transparent 100%
-      )`, h = Pe(p), X = Be(p), u = w ? `conic-gradient(
+      )`, x = Pe(b), X = Be(b), u = w ? `conic-gradient(
         from var(--beam-angle-${e}),
         transparent 0%, transparent 58%,
         rgba(255, 255, 255, 0.03) 62%,
@@ -853,7 +853,7 @@ function sa(t) {
         rgba(0, 0, 0, 0.08) 75%,
         rgba(0, 0, 0, 0.02) 78%,
         transparent 82%
-      )`, $ = `conic-gradient(
+      )`, v = `conic-gradient(
     from var(--beam-angle-${e}),
     transparent 0%, transparent 22%,
     rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
@@ -897,10 +897,10 @@ function sa(t) {
   content: "";
   position: absolute;
   inset: 0;
-  border-radius: ${d}px;
+  border-radius: ${f}px;
   padding: ${r}px;
   clip-path: inset(0 round ${a}px);
-  background: ${k},${h};
+  background: ${y},${x};
   -webkit-mask:
     conic-gradient(
       from var(--beam-angle-${e}),
@@ -927,7 +927,7 @@ function sa(t) {
   mask-composite: intersect, exclude;
   pointer-events: none;
   z-index: 2;
-  opacity: calc(var(--beam-opacity-${e}) * ${W.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * ${W.toFixed(2)} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
   ${H}
 }
 
@@ -939,14 +939,14 @@ function sa(t) {
   border-radius: ${a}px;
   clip-path: inset(0 round ${a}px);
   background: ${X};
-  box-shadow: inset 0 0 5px 1px ${b};
-  -webkit-mask-image: ${$};
+  box-shadow: inset 0 0 5px 1px ${p};
+  -webkit-mask-image: ${v};
   -webkit-mask-composite: source-over;
-  mask-image: ${$};
+  mask-image: ${v};
   mask-composite: add;
   pointer-events: none;
   z-index: 1;
-  opacity: calc(var(--beam-opacity-${e}) * ${Y.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * ${Y.toFixed(2)} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
   ${H}
 }
 
@@ -954,7 +954,7 @@ function sa(t) {
   display: none;
   position: absolute;
   inset: 0;
-  border-radius: ${d}px;
+  border-radius: ${f}px;
   clip-path: inset(0 round ${a}px);
   background: ${u};
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -971,7 +971,7 @@ function sa(t) {
 [data-beam="${e}"][data-active] [data-beam-bloom],
 [data-beam="${e}"][data-fading] [data-beam-bloom] {
   display: block;
-  opacity: calc(var(--beam-opacity-${e}) * ${y.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * ${z.toFixed(2)} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
 }
 
 @keyframes beam-spin-${e} {
@@ -986,8 +986,8 @@ function sa(t) {
   from { --beam-opacity-${e}: 1; }
   to { --beam-opacity-${e}: 0; }
 }
-${x}
-${A(e)}
+${$}
+${_(e)}
 `;
 }
 function ia(t) {
@@ -999,19 +999,19 @@ function ia(t) {
     strokeOpacity: s,
     innerOpacity: i,
     bloomOpacity: c,
-    innerShadow: b,
-    colorVariant: p,
+    innerShadow: p,
+    colorVariant: b,
     staticColors: m,
     brightness: n,
     saturation: l,
-    hueRange: f,
-    theme: v
-  } = t, d = Math.max(0, a - r), g = p === "mono" ? 0.5 : 1, W = s * g, Y = i * g, y = c * g, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, x = m ? "" : `
+    hueRange: d,
+    theme: k
+  } = t, f = Math.max(0, a - r), g = b === "mono" ? 0.5 : 1, W = s * g, Y = i * g, z = c * g, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, $ = m ? "" : `
 @keyframes beam-hue-shift-${e} {
-  0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-}`, w = v === "dark", k = w ? `conic-gradient(
+  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+}`, w = k === "dark", y = w ? `conic-gradient(
         from var(--beam-angle-${e}),
         transparent 0%, transparent 54%,
         rgba(255, 255, 255, 0.1) 57%,
@@ -1033,7 +1033,7 @@ function ia(t) {
         rgba(0, 0, 0, 0.2) 72%,
         rgba(0, 0, 0, 0.08) 75%,
         transparent 78%, transparent 100%
-      )`, h = Ee(p), X = Ae(p), u = w ? `conic-gradient(
+      )`, x = Ee(b), X = Ae(b), u = w ? `conic-gradient(
         from var(--beam-angle-${e}),
         transparent 0%, transparent 58%,
         rgba(255, 255, 255, 0.03) 62%,
@@ -1098,10 +1098,10 @@ function ia(t) {
   content: "";
   position: absolute;
   inset: 0;
-  border-radius: ${d}px;
+  border-radius: ${f}px;
   padding: ${r}px;
   clip-path: inset(0 round ${a}px);
-  background: ${k},${h};
+  background: ${y},${x};
   -webkit-mask:
     conic-gradient(
       from var(--beam-angle-${e}),
@@ -1128,7 +1128,7 @@ function ia(t) {
   mask-composite: intersect, exclude;
   pointer-events: none;
   z-index: 2;
-  opacity: calc(var(--beam-opacity-${e}) * ${W.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * ${W.toFixed(2)} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
   ${H}
 }
 
@@ -1139,7 +1139,7 @@ function ia(t) {
   inset: 0;
   border-radius: ${a}px;
   background: ${X};
-  box-shadow: inset 0 0 9px 1px ${b};
+  box-shadow: inset 0 0 9px 1px ${p};
   -webkit-mask-image:
     conic-gradient(
       from var(--beam-angle-${e}),
@@ -1166,7 +1166,7 @@ function ia(t) {
   mask-composite: intersect, add;
   pointer-events: none;
   z-index: 1;
-  opacity: calc(var(--beam-opacity-${e}) * ${Y.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * ${Y.toFixed(2)} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
   clip-path: inset(0 round ${a}px);
   ${H}
 }
@@ -1175,7 +1175,7 @@ function ia(t) {
   display: none;
   position: absolute;
   inset: 0;
-  border-radius: ${d}px;
+  border-radius: ${f}px;
   clip-path: inset(0 round ${a}px);
   background: ${u};
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -1192,7 +1192,7 @@ function ia(t) {
 [data-beam="${e}"][data-active] [data-beam-bloom],
 [data-beam="${e}"][data-fading] [data-beam-bloom] {
   display: block;
-  opacity: calc(var(--beam-opacity-${e}) * ${y.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * ${z.toFixed(2)} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
 }
 
 @keyframes beam-spin-${e} {
@@ -1207,8 +1207,8 @@ function ia(t) {
   from { --beam-opacity-${e}: 1; }
   to { --beam-opacity-${e}: 0; }
 }
-${x}
-${A(e)}
+${$}
+${_(e)}
 `;
 }
 function na(t) {
@@ -1220,13 +1220,13 @@ function na(t) {
     strokeOpacity: s,
     innerOpacity: i,
     bloomOpacity: c,
-    colorVariant: b,
-    staticColors: p,
+    colorVariant: p,
+    staticColors: b,
     brightness: m,
     saturation: n,
     hueRange: l,
-    theme: f
-  } = t, v = f === "dark", d = b === "mono" ? 0.5 : 1, g = (s * d).toFixed(2), W = (i * d).toFixed(2), Y = (c * d).toFixed(2), { op: y } = be("pulse-inner", f, o), H = 8, x = m.toFixed(2), w = n.toFixed(2), k = p ? `filter: brightness(${x}) saturate(${w});` : `filter: hue-rotate(var(--beam-hue-${e})) brightness(${x}) saturate(${w});`, h = p ? `filter: blur(${H}px) brightness(${x}) saturate(${w});` : `filter: blur(${H}px) hue-rotate(var(--beam-hue-${e})) brightness(${x}) saturate(${w});`, X = ea(b, e), u = aa(b, e, v), $ = Ye(Qe, b, 1 - y * 0.5);
+    theme: d
+  } = t, k = d === "dark", f = p === "mono" ? 0.5 : 1, g = (s * f).toFixed(2), W = (i * f).toFixed(2), Y = (c * f).toFixed(2), { op: z } = pe("pulse-inner", d, o), H = 8, $ = m.toFixed(2), w = n.toFixed(2), y = b ? `filter: brightness(${$}) saturate(${w});` : `filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${e}))) brightness(${$}) saturate(${w});`, x = b ? `filter: blur(${H}px) brightness(${$}) saturate(${w});` : `filter: blur(${H}px) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${e}))) brightness(${$}) saturate(${w});`, X = ea(p, e), u = aa(p, e, k), v = Ye(Qe, p, 1 - z * 0.5);
   return `
 ${Oe(e)}
 
@@ -1238,11 +1238,11 @@ ${Oe(e)}
 }
 
 [data-beam="${e}"][data-active] {
-${K(e, "beam-fade-in", 0.6)}
+${Q(e, "beam-fade-in", 0.6)}
 }
 
 [data-beam="${e}"][data-fading] {
-${K(e, "beam-fade-out", 0.5)}
+${Q(e, "beam-fade-out", 0.5)}
 }
 
 [data-beam="${e}"][data-active]::after,
@@ -1261,8 +1261,8 @@ ${K(e, "beam-fade-out", 0.5)}
   pointer-events: none;
   z-index: 2;
   will-change: opacity, filter;
-  opacity: calc(var(--beam-opacity-${e}) * ${g} * var(--beam-strength, 1));
-  ${k}
+  opacity: calc(var(--beam-opacity-${e}) * ${g} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  ${y}
 }
 
 [data-beam="${e}"][data-active]::before,
@@ -1284,8 +1284,8 @@ ${K(e, "beam-fade-out", 0.5)}
   pointer-events: none;
   z-index: 1;
   will-change: opacity, filter;
-  opacity: calc(var(--beam-opacity-${e}) * ${W} * var(--beam-strength, 1));
-  ${k}
+  opacity: calc(var(--beam-opacity-${e}) * ${W} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  ${y}
 }
 
 [data-beam="${e}"] [data-beam-bloom] {
@@ -1294,7 +1294,7 @@ ${K(e, "beam-fade-out", 0.5)}
   inset: 0;
   border-radius: ${a}px;
   clip-path: inset(0 round ${a}px);
-  background: ${$};
+  background: ${v};
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -1309,13 +1309,13 @@ ${K(e, "beam-fade-out", 0.5)}
 [data-beam="${e}"][data-active] [data-beam-bloom],
 [data-beam="${e}"][data-fading] [data-beam-bloom] {
   display: block;
-  opacity: calc(var(--beam-opacity-${e}) * ${Y} * var(--beam-strength, 1));
-  ${h}
+  opacity: calc(var(--beam-opacity-${e}) * ${Y} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+  ${x}
 }
 
 @keyframes beam-fade-in-${e} { to { --beam-opacity-${e}: 1; } }
 @keyframes beam-fade-out-${e} { from { --beam-opacity-${e}: 1; } to { --beam-opacity-${e}: 0; } }
-${A(e)}
+${_(e)}
 
 @media (prefers-reduced-motion: reduce) {
   [data-beam="${e}"][data-active],
@@ -1340,14 +1340,14 @@ function ca(t) {
     innerOpacity: s,
     bloomOpacity: i,
     colorVariant: c,
-    staticColors: b,
-    brightness: p,
+    staticColors: p,
+    brightness: b,
     saturation: m,
     hueRange: n,
     theme: l,
-    hairlineOpacity: f = 0
-  } = t, v = l === "dark", d = c === "mono" ? 0.5 : 1, g = (o * d).toFixed(2), W = (s * d).toFixed(2), Y = (i * d).toFixed(2), y = v ? "70, 70, 70" : "0, 0, 0", H = f.toFixed(2), x = `linear-gradient(rgba(${y}, ${H}), rgba(${y}, ${H}))`, { op: w } = be("pulse-outside", l, r), k = 0.95, h = 0.9, X = v ? 3 : 6, u = v ? 22.5 : 15, $ = p.toFixed(2), F = m.toFixed(2), Z = b ? `filter: brightness(${$}) saturate(${F});` : `filter: hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`, J = b ? `filter: blur(${X}px) brightness(${$}) saturate(${F});` : `filter: blur(${X}px) hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`, ee = b ? `filter: blur(${u}px) brightness(${$}) saturate(${F});` : `filter: blur(${u}px) hue-rotate(var(--beam-hue-${e})) brightness(${$}) saturate(${F});`, E = we(ve, c, e), _ = we(ve, c, e), ae = Ye(Ze, c, 1 - w * 0.5), R = f > 0 ? `${E},
-    ${x}` : E;
+    hairlineOpacity: d = 0
+  } = t, k = l === "dark", f = c === "mono" ? 0.5 : 1, g = (o * f).toFixed(2), W = (s * f).toFixed(2), Y = (i * f).toFixed(2), z = k ? "70, 70, 70" : "0, 0, 0", H = d.toFixed(2), $ = `linear-gradient(rgba(${z}, ${H}), rgba(${z}, ${H}))`, { op: w } = pe("pulse-outside", l, r), y = 0.95, x = 0.9, X = k ? 3 : 6, u = k ? 22.5 : 15, v = b.toFixed(2), S = m.toFixed(2), J = p ? `filter: brightness(${v}) saturate(${S});` : `filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${e}))) brightness(${v}) saturate(${S});`, G = `brightness(var(--beam-glow-brightness, ${v})) saturate(var(--beam-glow-saturate, ${S}))`, ee = p ? `filter: blur(var(--beam-core-blur, ${X}px)) ${G};` : `filter: blur(var(--beam-core-blur, ${X}px)) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${e}))) ${G};`, j = p ? `filter: blur(var(--beam-bloom-blur, ${u}px)) ${G};` : `filter: blur(var(--beam-bloom-blur, ${u}px)) hue-rotate(calc(var(--beam-hue-base, 0deg) + var(--beam-hue-${e}))) ${G};`, A = we(ke, c, e), ae = we(ke, c, e), R = Ye(Ze, c, 1 - w * 0.5), O = d > 0 ? `${A},
+    ${$}` : A;
   return `
 ${Oe(e)}
 
@@ -1359,13 +1359,13 @@ ${Oe(e)}
 }
 
 [data-beam="${e}"][data-active] {
-${K(e, "beam-fade-in", 0.6)}
+${Q(e, "beam-fade-in", 0.6)}
 }
 
 [data-beam="${e}"][data-fading] {
-${K(e, "beam-fade-out", 0.5)}
+${Q(e, "beam-fade-out", 0.5)}
 }
-${f > 0 ? `
+${d > 0 ? `
 /* Idle hairline — painted above the (opaque) child in the inner 1px edge ring so
    it overlaps a standard inset component border exactly. */
 [data-beam="${e}"]::after {
@@ -1375,7 +1375,7 @@ ${f > 0 ? `
   border-radius: ${a}px;
   padding: 1px;
   clip-path: inset(0 round ${a}px);
-  background: ${x};
+  background: ${$};
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -1392,7 +1392,7 @@ ${f > 0 ? `
   border-radius: ${a}px;
   padding: 1px;
   clip-path: inset(0 round ${a}px);
-  background: ${R};
+  background: ${O};
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -1400,8 +1400,8 @@ ${f > 0 ? `
   pointer-events: none;
   z-index: 2;
   will-change: opacity, filter;
-  opacity: calc(var(--beam-opacity-${e}) * ${g} * var(--beam-strength, 1));
-  ${Z}
+  opacity: calc(var(--beam-opacity-${e}) * ${g} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  ${J}
 }
 
 [data-beam="${e}"][data-active]::before,
@@ -1411,12 +1411,12 @@ ${f > 0 ? `
   inset: -10px;
   z-index: -1;
   border-radius: ${a + 10}px;
-  background: ${_};
-  transform: scale(${k}, ${h});
+  background: ${ae};
+  transform: scale(${y}, ${x});
   pointer-events: none;
   will-change: opacity, filter;
-  opacity: calc(var(--beam-opacity-${e}) * ${W} * var(--beam-strength, 1));
-  ${J}
+  opacity: calc(var(--beam-opacity-${e}) * ${W} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  ${ee}
 }
 
 [data-beam="${e}"] [data-beam-bloom] {
@@ -1425,8 +1425,8 @@ ${f > 0 ? `
   inset: -30px;
   z-index: -1;
   border-radius: ${a + 30}px;
-  background: ${ae};
-  transform: scale(${k}, ${h});
+  background: ${R};
+  transform: scale(${y}, ${x});
   pointer-events: none;
   will-change: transform;
   opacity: 0;
@@ -1435,13 +1435,13 @@ ${f > 0 ? `
 [data-beam="${e}"][data-active] [data-beam-bloom],
 [data-beam="${e}"][data-fading] [data-beam-bloom] {
   display: block;
-  opacity: calc(var(--beam-opacity-${e}) * ${Y} * var(--beam-strength, 1));
-  ${ee}
+  opacity: calc(var(--beam-opacity-${e}) * ${Y} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+  ${j}
 }
 
 @keyframes beam-fade-in-${e} { to { --beam-opacity-${e}: 1; } }
 @keyframes beam-fade-out-${e} { from { --beam-opacity-${e}: 1; } to { --beam-opacity-${e}: 0; } }
-${A(e)}
+${_(e)}
 
 @media (prefers-reduced-motion: reduce) {
   [data-beam="${e}"][data-active],
@@ -1457,7 +1457,7 @@ ${A(e)}
 }
 `;
 }
-function pa(t) {
+function ba(t) {
   const {
     id: e,
     borderRadius: a,
@@ -1466,25 +1466,25 @@ function pa(t) {
     strokeOpacity: s,
     innerOpacity: i,
     bloomOpacity: c,
-    innerShadow: b,
-    colorVariant: p,
+    innerShadow: p,
+    colorVariant: b,
     staticColors: m,
     brightness: n,
     saturation: l,
-    hueRange: f,
-    theme: v
-  } = t, d = Math.max(0, a - r), g = v === "dark", W = s, Y = i, y = c, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, x = m ? "" : `animation: beam-hue-shift-bloom-${e} 8s ease-in-out infinite;`, w = m ? "" : `
+    hueRange: d,
+    theme: k
+  } = t, f = Math.max(0, a - r), g = k === "dark", W = s, Y = i, z = c, H = m ? "" : `animation: beam-hue-shift-${e} 12s ease-in-out infinite;`, $ = m ? "" : `animation: beam-hue-shift-bloom-${e} 8s ease-in-out infinite;`, w = m ? "" : `
 @keyframes beam-hue-shift-${e} {
-  0% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  50% { filter: hue-rotate(${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  100% { filter: hue-rotate(-${f}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
 }
 
 @keyframes beam-hue-shift-bloom-${e} {
-  0% { filter: blur(8px) hue-rotate(-${f + 10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  50% { filter: blur(8px) hue-rotate(${f + 10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-  100% { filter: blur(8px) hue-rotate(-${f + 10}deg) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
-}`, k = g ? `radial-gradient(
+  0% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d + 10}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  50% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) + ${d + 10}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+  100% { filter: blur(8px) hue-rotate(calc(var(--beam-hue-base, 0deg) - ${d + 10}deg)) brightness(${n.toFixed(2)}) saturate(${l.toFixed(2)}); }
+}`, y = g ? `radial-gradient(
         ellipse calc(24px * var(--beam-w-${e})) calc(28px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) calc(100% + 2px),
         rgba(255, 255, 255, 0.38) 0%,
         rgba(255, 255, 255, 0.12) 30%,
@@ -1494,7 +1494,7 @@ function pa(t) {
         rgba(0, 0, 0, 0.6) 0%,
         rgba(0, 0, 0, 0.25) 35%,
         transparent 70%
-      )`, h = Te(p, g, e), X = Ve(p, e), u = Ue(p, g, e), $ = p === "mono" ? "filter: blur(6px);" : "";
+      )`, x = Te(b, g, e), X = Ve(b, e), u = Ue(b, g, e), v = b === "mono" ? "filter: blur(6px);" : "";
   return `
 @property --beam-x-${e} {
   syntax: "<number>";
@@ -1569,10 +1569,10 @@ function pa(t) {
   content: "";
   position: absolute;
   inset: 0;
-  border-radius: ${d}px;
+  border-radius: ${f}px;
   padding: ${r}px;
   clip-path: inset(0 round ${a}px);
-  background: ${k}, ${h};
+  background: ${y}, ${x};
   -webkit-mask:
     radial-gradient(
       ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
@@ -1591,7 +1591,7 @@ function pa(t) {
   mask-composite: intersect, exclude;
   pointer-events: none;
   z-index: 2;
-  opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${W.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${W.toFixed(2)} * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
   ${H}
 }
 
@@ -1602,7 +1602,7 @@ function pa(t) {
   inset: 0;
   border-radius: ${a}px;
   background: ${X};
-  box-shadow: inset 0 0 9px 1px ${b};
+  box-shadow: inset 0 0 9px 1px ${p};
   -webkit-mask-image:
     radial-gradient(
       ellipse calc(78px * var(--beam-w-${e})) calc(60px * var(--beam-h-${e})) at calc(var(--beam-x-${e}) * 100%) 100%,
@@ -1621,7 +1621,7 @@ function pa(t) {
   mask-composite: intersect, add;
   pointer-events: none;
   z-index: 1;
-  opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${Y.toFixed(2)} * var(--beam-strength, 1));
+  opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${Y.toFixed(2)} * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
   clip-path: inset(0 round ${a}px);
   ${H}
 }
@@ -1630,7 +1630,7 @@ function pa(t) {
   display: none;
   position: absolute;
   inset: 0;
-  border-radius: ${d}px;
+  border-radius: ${f}px;
   clip-path: inset(0 round ${a}px);
   padding: 0;
   -webkit-mask: radial-gradient(
@@ -1644,7 +1644,7 @@ function pa(t) {
   );
   mask-composite: add;
   background: ${u};
-  ${$}
+  ${v}
   pointer-events: none;
   z-index: 3;
   opacity: 0;
@@ -1653,8 +1653,8 @@ function pa(t) {
 [data-beam="${e}"][data-active] [data-beam-bloom],
 [data-beam="${e}"][data-fading] [data-beam-bloom] {
   display: block;
-  opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${y.toFixed(2)} * var(--beam-strength, 1));
-  ${x}
+  opacity: calc(var(--beam-opacity-${e}) * var(--beam-edge-${e}) * ${z.toFixed(2)} * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+  ${$}
 }
 
 @keyframes beam-travel-${e} {
@@ -1712,20 +1712,20 @@ function pa(t) {
   to { --beam-opacity-${e}: 0; }
 }
 ${w}
-${A(e)}
+${_(e)}
 `;
 }
-const Q = /* @__PURE__ */ new Set();
-let B = null, ce = 0;
-const ba = 1e3 / 30 - 2, la = Math.PI * 2;
+const Z = /* @__PURE__ */ new Set();
+let E = null, ce = 0;
+const pa = 1e3 / 30 - 2, la = Math.PI * 2;
 function We(t) {
   return (1 - Math.cos(la * t)) / 2;
 }
 function Fe(t) {
-  if (B = requestAnimationFrame(Fe), t - ce < ba) return;
+  if (E = requestAnimationFrame(Fe), t - ce < pa) return;
   ce = t;
   const e = t / 1e3;
-  Q.forEach(({ el: a, config: r }) => {
+  Z.forEach(({ el: a, config: r }) => {
     for (const o of r.oscillators) {
       const s = (e - o.delay) / o.period, i = o.a + (o.b - o.a) * We(s);
       a.style.setProperty(
@@ -1734,26 +1734,26 @@ function Fe(t) {
       );
     }
     if (r.hue) {
-      const { prop: o, range: s, period: i, continuous: c } = r.hue, b = c ? e / i % 1 * s : -s + 2 * s * We(e / i);
-      a.style.setProperty(o, `${b.toFixed(2)}deg`);
+      const { prop: o, range: s, period: i, continuous: c } = r.hue, p = c ? e / i % 1 * s : -s + 2 * s * We(e / i);
+      a.style.setProperty(o, `${p.toFixed(2)}deg`);
     }
   });
 }
-function fa() {
-  B == null && (ce = 0, B = requestAnimationFrame(Fe));
-}
 function da() {
-  Q.size === 0 && B != null && (cancelAnimationFrame(B), B = null);
+  E == null && (ce = 0, E = requestAnimationFrame(Fe));
+}
+function fa() {
+  Z.size === 0 && E != null && (cancelAnimationFrame(E), E = null);
 }
 function ga(t, e) {
   const a = { el: t, config: e };
-  return Q.add(a), fa(), () => {
-    Q.delete(a), da();
+  return Z.add(a), da(), () => {
+    Z.delete(a), fa();
   };
 }
 function ma() {
-  const [t, e] = L(() => typeof window > "u" || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-  return P(() => {
+  const [t, e] = P(() => typeof window > "u" || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  return B(() => {
     if (typeof window > "u") return;
     const a = window.matchMedia("(prefers-color-scheme: dark)"), r = (o) => {
       e(o.matches ? "dark" : "light");
@@ -1773,129 +1773,129 @@ const za = Ge(
     staticColors: s = !1,
     duration: i,
     active: c = !0,
-    borderRadius: b,
-    brightness: p,
+    borderRadius: p,
+    brightness: b,
     saturation: m,
     hueRange: n = 30,
     strength: l = 1,
-    className: f,
-    style: v,
-    onActivate: d,
+    className: d,
+    style: k,
+    onActivate: f,
     onDeactivate: g,
     onAnimationEnd: W,
     ...Y
-  }, y) {
-    const x = Me().replace(/:/g, "-"), w = ma(), k = Ie(null), [h, X] = L(c), [u, $] = L(!1), [F, Z] = L(!0), [J, ee] = L(null), [E, _] = L({ x: 1, y: 1 });
-    P(() => {
-      if (b != null) return;
-      const z = k.current;
-      if (!z) return;
-      const O = () => {
-        const M = z.firstElementChild;
-        if (!M) return;
-        const se = getComputedStyle(M), I = parseFloat(se.borderTopLeftRadius);
-        !isNaN(I) && I > 0 && ee(I);
+  }, z) {
+    const $ = Me().replace(/:/g, "-"), w = ma(), y = Ie(null), [x, X] = P(c), [u, v] = P(!1), [S, J] = P(!0), [G, ee] = P(null), [j, A] = P({ x: 1, y: 1 });
+    B(() => {
+      if (p != null) return;
+      const h = y.current;
+      if (!h) return;
+      const F = () => {
+        const I = h.firstElementChild;
+        if (!I) return;
+        const se = getComputedStyle(I), L = parseFloat(se.borderTopLeftRadius);
+        !isNaN(L) && L > 0 && ee(L);
       };
-      O();
-      const G = new MutationObserver(O);
-      return G.observe(z, { childList: !0, subtree: !1 }), () => G.disconnect();
-    }, [b, e]), P(() => {
-      c && !h && !u ? X(!0) : !c && h && !u && $(!0);
-    }, [c, h, u]), P(() => {
-      const z = k.current;
-      if (!z || typeof IntersectionObserver > "u") return;
-      const O = new IntersectionObserver(
-        (G) => {
-          for (const M of G) Z(M.isIntersecting);
+      F();
+      const M = new MutationObserver(F);
+      return M.observe(h, { childList: !0, subtree: !1 }), () => M.disconnect();
+    }, [p, e]), B(() => {
+      c && !x && !u ? X(!0) : !c && x && !u && v(!0);
+    }, [c, x, u]), B(() => {
+      const h = y.current;
+      if (!h || typeof IntersectionObserver > "u") return;
+      const F = new IntersectionObserver(
+        (M) => {
+          for (const I of M) J(I.isIntersecting);
         },
         // Start animating slightly before the element scrolls into view.
         { rootMargin: "256px" }
       );
-      return O.observe(z), () => O.disconnect();
-    }, []), P(() => {
+      return F.observe(h), () => F.disconnect();
+    }, []), B(() => {
       if (a !== "pulse-outside") {
-        _({ x: 1, y: 1 });
+        A({ x: 1, y: 1 });
         return;
       }
-      const z = k.current;
-      if (!z) return;
-      const O = 350, G = 140, M = 0.35, se = 4, I = (V) => Math.max(M, Math.min(se, V)), ge = () => {
-        const V = z.firstElementChild;
-        if (!V) return;
-        const D = V.getBoundingClientRect();
-        if (!D.width || !D.height) return;
-        const xe = +I(D.width / O).toFixed(3), ue = +I(D.height / G).toFixed(3);
-        _((ie) => ie.x === xe && ie.y === ue ? ie : { x: xe, y: ue });
+      const h = y.current;
+      if (!h) return;
+      const F = 350, M = 140, I = 0.35, se = 4, L = (D) => Math.max(I, Math.min(se, D)), ge = () => {
+        const D = h.firstElementChild;
+        if (!D) return;
+        const U = D.getBoundingClientRect();
+        if (!U.width || !U.height) return;
+        const ue = +L(U.width / F).toFixed(3), xe = +L(U.height / M).toFixed(3);
+        A((ie) => ie.x === ue && ie.y === xe ? ie : { x: ue, y: xe });
       };
       if (ge(), typeof ResizeObserver > "u") return;
-      const me = z.firstElementChild;
+      const me = h.firstElementChild;
       if (!me) return;
       const $e = new ResizeObserver(ge);
       return $e.observe(me), () => $e.disconnect();
     }, [a, e]);
     const ae = ye(
-      (z) => {
-        const O = z.animationName;
-        O.includes("fade-out") ? (X(!1), $(!1), g == null || g()) : O.includes("fade-in") && (d == null || d()), W == null || W(z);
+      (h) => {
+        const F = h.animationName;
+        F.includes("fade-out") ? (X(!1), v(!1), g == null || g()) : F.includes("fade-in") && (f == null || f()), W == null || W(h);
       },
-      [d, g, W]
-    ), R = $a(o, w), S = ne[a][R], re = Le[a], te = a === "pulse-inner" || a === "pulse-outside", le = b ?? J ?? re.borderRadius, j = i ?? (a === "line" ? 3.1 : te ? 2.3 : 1.96), fe = m ?? S.saturation, de = p ?? S.brightness ?? 1.3, T = a === "line" ? Math.min(n, 13) : n, N = r === "mono" ? !0 : s, Se = ke(
+      [f, g, W]
+    ), R = $a(o, w), O = ne[a][R], re = Le[a], te = a === "pulse-inner" || a === "pulse-outside", le = p ?? G ?? re.borderRadius, T = i ?? (a === "line" ? 3.1 : te ? 2.3 : 1.96), de = m ?? O.saturation, fe = b ?? O.brightness ?? 1.3, N = a === "line" ? Math.min(n, 13) : n, V = r === "mono" ? !0 : s, Se = ve(
       () => oa({
-        id: x,
+        id: $,
         borderRadius: le,
         borderWidth: re.borderWidth,
-        duration: j,
-        strokeOpacity: S.strokeOpacity,
-        innerOpacity: S.innerOpacity,
-        bloomOpacity: S.bloomOpacity,
-        innerShadow: S.innerShadow,
+        duration: T,
+        strokeOpacity: O.strokeOpacity,
+        innerOpacity: O.innerOpacity,
+        bloomOpacity: O.bloomOpacity,
+        innerShadow: O.innerShadow,
         size: a,
         colorVariant: r,
-        staticColors: N,
-        brightness: de,
-        saturation: fe,
-        hueRange: T,
+        staticColors: V,
+        brightness: fe,
+        saturation: de,
+        hueRange: N,
         theme: R,
-        hairlineOpacity: S.hairlineOpacity
+        hairlineOpacity: O.hairlineOpacity
       }),
       [
-        x,
+        $,
         le,
         re.borderWidth,
-        j,
-        S.strokeOpacity,
-        S.innerOpacity,
-        S.bloomOpacity,
-        S.innerShadow,
-        S.hairlineOpacity,
+        T,
+        O.strokeOpacity,
+        O.innerOpacity,
+        O.bloomOpacity,
+        O.innerShadow,
+        O.hairlineOpacity,
         a,
         r,
-        N,
-        de,
+        V,
         fe,
-        T,
+        de,
+        N,
         R
       ]
-    ), oe = ke(
-      () => te ? ta(a, R, j, T, N, x) : null,
-      [te, a, R, j, T, N, x]
+    ), oe = ve(
+      () => te ? ta(a, R, T, N, V, $) : null,
+      [te, a, R, T, N, V, $]
     );
-    P(() => {
-      var O;
-      if (!oe || !(h || u) || !F) return;
-      const z = k.current;
-      if (z && !(typeof window < "u" && ((O = window.matchMedia) != null && O.call(window, "(prefers-reduced-motion: reduce)").matches)))
-        return ga(z, oe);
-    }, [oe, h, u, F]);
+    B(() => {
+      var F;
+      if (!oe || !(x || u) || !S) return;
+      const h = y.current;
+      if (h && !(typeof window < "u" && ((F = window.matchMedia) != null && F.call(window, "(prefers-reduced-motion: reduce)").matches)))
+        return ga(h, oe);
+    }, [oe, x, u, S]);
     const Re = ye(
-      (z) => {
-        k.current = z, typeof y == "function" ? y(z) : y && (y.current = z);
+      (h) => {
+        y.current = h, typeof z == "function" ? z(h) : z && (z.current = h);
       },
-      [y]
+      [z]
     ), qe = {
-      ...v ?? {},
+      ...k ?? {},
       "--beam-strength": Math.max(0, Math.min(1, l)),
-      ...a === "pulse-outside" ? { "--pulse-glow-sx": E.x, "--pulse-glow-sy": E.y } : {}
+      ...a === "pulse-outside" ? { "--pulse-glow-sx": j.x, "--pulse-glow-sy": j.y } : {}
     };
     return /* @__PURE__ */ he(Ce, { children: [
       /* @__PURE__ */ ze("style", { children: Se }),
@@ -1904,11 +1904,11 @@ const za = Ge(
         {
           ...Y,
           ref: Re,
-          "data-beam": x,
-          "data-active": h && !u ? "" : void 0,
+          "data-beam": $,
+          "data-active": x && !u ? "" : void 0,
           "data-fading": u ? "" : void 0,
-          "data-paused": h && !u && !F ? "" : void 0,
-          className: f,
+          "data-paused": x && !u && !S ? "" : void 0,
+          className: d,
           style: qe,
           onAnimationEnd: ae,
           children: [