nfx-ui 0.16.2 → 0.20.0

package/dist/chunk-animations-DKyNVF-O.mjs

@@ -0,0 +1,973 @@
+import { n as ot } from "./chunk-useTheme-C2Ip6OAs.mjs";
+import { memo as z, useCallback as O, useEffect as nt, useMemo as K, useRef as p } from "react";
+import { jsx as v, jsxs as J } from "react/jsx-runtime";
+var gt = "styles-module__loading___bgEAk", mt = "styles-module__back___XLPvD", ft = "styles-module__front___hSxig", _t = "styles-module__dash_682___AQzo6", yt = "styles-module__dash_682___AQzo6", ct = {
+  loading: gt,
+  back: mt,
+  front: ft,
+  dash_682: _t,
+  dash682: yt
+}, xt = z(({ size: r = "medium", className: e }) => {
+  const { width: l, height: t } = {
+    small: {
+      width: "48px",
+      height: "36px"
+    },
+    medium: {
+      width: "64px",
+      height: "48px"
+    },
+    large: {
+      width: "96px",
+      height: "72px"
+    }
+  }[r];
+  return /* @__PURE__ */ v("div", {
+    className: `${ct.loading} ${e || ""}`,
+    children: /* @__PURE__ */ J("svg", {
+      width: l,
+      height: t,
+      viewBox: "0 0 64 48",
+      children: [/* @__PURE__ */ v("polyline", {
+        points: "0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24",
+        id: "back",
+        className: ct.back
+      }), /* @__PURE__ */ v("polyline", {
+        points: "0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24",
+        id: "front",
+        className: ct.front
+      })]
+    })
+  });
+});
+xt.displayName = "ECGLoading";
+var wt = "styles-module__loader___E7OIM", pt = "styles-module__truckWrapper___Sk4zX", Mt = "styles-module__truckBody___j7w2C", bt = "styles-module__motion___IiNlW", kt = "styles-module__truckTires___4ncTl", Ct = "styles-module__tiresvg___IBQcN", $t = "styles-module__road___sxx-E", Lt = "styles-module__roadAnimation___yvrHP", Rt = "styles-module__lampPost___okcN5", G = {
+  loader: wt,
+  truckWrapper: pt,
+  truckBody: Mt,
+  motion: bt,
+  truckTires: kt,
+  tiresvg: Ct,
+  road: $t,
+  roadAnimation: Lt,
+  lampPost: Rt
+}, Et = z(({ size: r = "medium", className: e }) => {
+  const { width: l, height: t, svgScale: u } = {
+    small: {
+      width: "150px",
+      height: "75px",
+      svgScale: 0.75
+    },
+    medium: {
+      width: "200px",
+      height: "100px",
+      svgScale: 1
+    },
+    large: {
+      width: "300px",
+      height: "150px",
+      svgScale: 1.5
+    }
+  }[r];
+  return /* @__PURE__ */ v("div", {
+    className: `${G.loader} ${e || ""}`,
+    style: {
+      width: l,
+      height: t
+    },
+    children: /* @__PURE__ */ J("div", {
+      className: G.truckWrapper,
+      style: { transform: `scale(${u})` },
+      children: [
+        /* @__PURE__ */ v("div", {
+          className: G.truckBody,
+          children: /* @__PURE__ */ J("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 198 93",
+            className: G.trucksvg,
+            children: [
+              /* @__PURE__ */ v("path", {
+                strokeWidth: "3",
+                stroke: "var(--color-fg-heading)",
+                fill: "var(--color-primary)",
+                d: "M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z"
+              }),
+              /* @__PURE__ */ v("path", {
+                strokeWidth: "3",
+                stroke: "var(--color-fg-heading)",
+                fill: "var(--color-bg-3)",
+                d: "M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z"
+              }),
+              /* @__PURE__ */ v("path", {
+                strokeWidth: "2",
+                stroke: "var(--color-fg-heading)",
+                fill: "var(--color-fg-heading)",
+                d: "M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z"
+              }),
+              /* @__PURE__ */ v("rect", {
+                strokeWidth: "2",
+                stroke: "var(--color-fg-heading)",
+                fill: "var(--color-warning)",
+                rx: "1",
+                height: "7",
+                width: "5",
+                y: "63",
+                x: "187"
+              }),
+              /* @__PURE__ */ v("rect", {
+                strokeWidth: "2",
+                stroke: "var(--color-fg-heading)",
+                fill: "var(--color-fg-heading)",
+                rx: "1",
+                height: "11",
+                width: "4",
+                y: "81",
+                x: "193"
+              }),
+              /* @__PURE__ */ v("rect", {
+                strokeWidth: "3",
+                stroke: "var(--color-fg-heading)",
+                fill: "var(--color-bg-2)",
+                rx: "2.5",
+                height: "90",
+                width: "121",
+                y: "1.5",
+                x: "6.5"
+              }),
+              /* @__PURE__ */ v("rect", {
+                strokeWidth: "2",
+                stroke: "var(--color-fg-heading)",
+                fill: "var(--color-bg-2)",
+                rx: "2",
+                height: "4",
+                width: "6",
+                y: "84",
+                x: "1"
+              })
+            ]
+          })
+        }),
+        /* @__PURE__ */ J("div", {
+          className: G.truckTires,
+          children: [/* @__PURE__ */ J("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 30 30",
+            className: G.tiresvg,
+            children: [/* @__PURE__ */ v("circle", {
+              strokeWidth: "3",
+              stroke: "var(--color-fg-heading)",
+              fill: "var(--color-fg-heading)",
+              r: "13.5",
+              cy: "15",
+              cx: "15"
+            }), /* @__PURE__ */ v("circle", {
+              fill: "var(--color-bg-2)",
+              r: "7",
+              cy: "15",
+              cx: "15"
+            })]
+          }), /* @__PURE__ */ J("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 30 30",
+            className: G.tiresvg,
+            children: [/* @__PURE__ */ v("circle", {
+              strokeWidth: "3",
+              stroke: "var(--color-fg-heading)",
+              fill: "var(--color-fg-heading)",
+              r: "13.5",
+              cy: "15",
+              cx: "15"
+            }), /* @__PURE__ */ v("circle", {
+              fill: "var(--color-bg-2)",
+              r: "7",
+              cy: "15",
+              cx: "15"
+            })]
+          })]
+        }),
+        /* @__PURE__ */ v("div", { className: G.road }),
+        /* @__PURE__ */ v("svg", {
+          xmlSpace: "preserve",
+          viewBox: "0 0 453.459 453.459",
+          xmlns: "http://www.w3.org/2000/svg",
+          version: "1.1",
+          fill: "var(--color-fg-heading)",
+          className: G.lampPost,
+          children: /* @__PURE__ */ v("path", { d: `M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993
+c-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514
+c0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16
+c29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914
+h-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75
+v-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795
+V196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z
+M232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017
+h78.747C231.693,100.736,232.77,106.162,232.77,111.694z` })
+        })
+      ]
+    })
+  });
+});
+Et.displayName = "TruckLoading";
+var It = "styles-module__loader___pFUzL", Nt = "styles-module__shadow324___sutUe", Pt = "styles-module__square___GKjhm", At = "styles-module__jump7456Square___Z-D9b", Tt = "styles-module__circle___bUpSN", Bt = "styles-module__jump7456Circle___2AfF7", it = {
+  loader: It,
+  shadow324: Nt,
+  square: Pt,
+  jump7456Square: At,
+  circle: Tt,
+  jump7456Circle: Bt
+}, Wt = z(({ size: r = "medium", shape: e = "square", className: l }) => {
+  const t = {
+    small: "32px",
+    medium: "48px",
+    large: "64px"
+  }[r];
+  return /* @__PURE__ */ v("div", {
+    className: `${it.loader} ${it[e]} ${l || ""}`,
+    style: {
+      width: t,
+      height: t
+    }
+  });
+});
+Wt.displayName = "BounceLoading";
+var Ft = "style-module__waves___oR3u7", Vt = "style-module__wavesCanvas___zkhTC", ut = {
+  waves: Ft,
+  wavesCanvas: Vt
+}, P = class {
+  x;
+  y;
+  z;
+  constructor(r, e, l) {
+    this.x = r, this.y = e, this.z = l;
+  }
+  dot2(r, e) {
+    return this.x * r + this.y * e;
+  }
+}, Xt = class {
+  grad3;
+  p;
+  perm;
+  gradP;
+  constructor(r = 0) {
+    this.grad3 = [
+      new P(1, 1, 0),
+      new P(-1, 1, 0),
+      new P(1, -1, 0),
+      new P(-1, -1, 0),
+      new P(1, 0, 1),
+      new P(-1, 0, 1),
+      new P(1, 0, -1),
+      new P(-1, 0, -1),
+      new P(0, 1, 1),
+      new P(0, -1, 1),
+      new P(0, 1, -1),
+      new P(0, -1, -1)
+    ], this.p = [
+      151,
+      160,
+      137,
+      91,
+      90,
+      15,
+      131,
+      13,
+      201,
+      95,
+      96,
+      53,
+      194,
+      233,
+      7,
+      225,
+      140,
+      36,
+      103,
+      30,
+      69,
+      142,
+      8,
+      99,
+      37,
+      240,
+      21,
+      10,
+      23,
+      190,
+      6,
+      148,
+      247,
+      120,
+      234,
+      75,
+      0,
+      26,
+      197,
+      62,
+      94,
+      252,
+      219,
+      203,
+      117,
+      35,
+      11,
+      32,
+      57,
+      177,
+      33,
+      88,
+      237,
+      149,
+      56,
+      87,
+      174,
+      20,
+      125,
+      136,
+      171,
+      168,
+      68,
+      175,
+      74,
+      165,
+      71,
+      134,
+      139,
+      48,
+      27,
+      166,
+      77,
+      146,
+      158,
+      231,
+      83,
+      111,
+      229,
+      122,
+      60,
+      211,
+      133,
+      230,
+      220,
+      105,
+      92,
+      41,
+      55,
+      46,
+      245,
+      40,
+      244,
+      102,
+      143,
+      54,
+      65,
+      25,
+      63,
+      161,
+      1,
+      216,
+      80,
+      73,
+      209,
+      76,
+      132,
+      187,
+      208,
+      89,
+      18,
+      169,
+      200,
+      196,
+      135,
+      130,
+      116,
+      188,
+      159,
+      86,
+      164,
+      100,
+      109,
+      198,
+      173,
+      186,
+      3,
+      64,
+      52,
+      217,
+      226,
+      250,
+      124,
+      123,
+      5,
+      202,
+      38,
+      147,
+      118,
+      126,
+      255,
+      82,
+      85,
+      212,
+      207,
+      206,
+      59,
+      227,
+      47,
+      16,
+      58,
+      17,
+      182,
+      189,
+      28,
+      42,
+      223,
+      183,
+      170,
+      213,
+      119,
+      248,
+      152,
+      2,
+      44,
+      154,
+      163,
+      70,
+      221,
+      153,
+      101,
+      155,
+      167,
+      43,
+      172,
+      9,
+      129,
+      22,
+      39,
+      253,
+      19,
+      98,
+      108,
+      110,
+      79,
+      113,
+      224,
+      232,
+      178,
+      185,
+      112,
+      104,
+      218,
+      246,
+      97,
+      228,
+      251,
+      34,
+      242,
+      193,
+      238,
+      210,
+      144,
+      12,
+      191,
+      179,
+      162,
+      241,
+      81,
+      51,
+      145,
+      235,
+      249,
+      14,
+      239,
+      107,
+      49,
+      192,
+      214,
+      31,
+      181,
+      199,
+      106,
+      157,
+      184,
+      84,
+      204,
+      176,
+      115,
+      121,
+      50,
+      45,
+      127,
+      4,
+      150,
+      254,
+      138,
+      236,
+      205,
+      93,
+      222,
+      114,
+      67,
+      29,
+      24,
+      72,
+      243,
+      141,
+      128,
+      195,
+      78,
+      66,
+      215,
+      61,
+      156,
+      180
+    ], this.perm = new Array(512), this.gradP = new Array(512), this.seed(r);
+  }
+  seed(r) {
+    r > 0 && r < 1 && (r *= 65536), r = Math.floor(r), r < 256 && (r |= r << 8);
+    for (let e = 0; e < 256; e++) {
+      let l = e & 1 ? this.p[e] ^ r & 255 : this.p[e] ^ r >> 8 & 255;
+      this.perm[e] = this.perm[e + 256] = l, this.gradP[e] = this.gradP[e + 256] = this.grad3[l % 12];
+    }
+  }
+  fade(r) {
+    return r * r * r * (r * (r * 6 - 15) + 10);
+  }
+  lerp(r, e, l) {
+    return (1 - l) * r + l * e;
+  }
+  perlin2(r, e) {
+    let l = Math.floor(r), t = Math.floor(e);
+    r -= l, e -= t, l &= 255, t &= 255;
+    const u = this.gradP[l + this.perm[t]].dot2(r, e), _ = this.gradP[l + this.perm[t + 1]].dot2(r, e - 1), x = this.gradP[l + 1 + this.perm[t]].dot2(r - 1, e), g = this.gradP[l + 1 + this.perm[t + 1]].dot2(r - 1, e - 1), y = this.fade(r);
+    return this.lerp(this.lerp(u, x, y), this.lerp(_, g, y), this.fade(e));
+  }
+}, Ht = ({ lineColor: r = "black", backgroundColor: e = "transparent", waveSpeedX: l = 0.0125, waveSpeedY: t = 5e-3, waveAmpX: u = 32, waveAmpY: _ = 16, xGap: x = 10, yGap: g = 32, friction: y = 0.925, tension: k = 5e-3, maxCursorMove: h = 100, style: D = {}, className: X = "" }) => {
+  const m = p(null), $ = p(null), i = p(null), C = p({
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0
+  }), Y = p(new Xt(Math.random())), H = p([]), B = p({
+    x: -10,
+    y: 0,
+    lx: 0,
+    ly: 0,
+    sx: 0,
+    sy: 0,
+    v: 0,
+    vs: 0,
+    a: 0,
+    set: !1
+  }), I = p({
+    lineColor: r,
+    waveSpeedX: l,
+    waveSpeedY: t,
+    waveAmpX: u,
+    waveAmpY: _,
+    friction: y,
+    tension: k,
+    maxCursorMove: h,
+    xGap: x,
+    yGap: g
+  }), A = p(null);
+  return nt(() => {
+    I.current = {
+      lineColor: r,
+      waveSpeedX: l,
+      waveSpeedY: t,
+      waveAmpX: u,
+      waveAmpY: _,
+      friction: y,
+      tension: k,
+      maxCursorMove: h,
+      xGap: x,
+      yGap: g
+    };
+  }, [
+    r,
+    l,
+    t,
+    u,
+    _,
+    y,
+    k,
+    h,
+    x,
+    g
+  ]), nt(() => {
+    const b = $.current, L = m.current;
+    if (!b || !L) return;
+    i.current = b.getContext("2d");
+    function W() {
+      if (!L || !b) return;
+      const a = L.getBoundingClientRect();
+      C.current = {
+        width: a.width,
+        height: a.height,
+        left: a.left,
+        top: a.top
+      }, b.width = a.width, b.height = a.height;
+    }
+    function N() {
+      const { width: a, height: o } = C.current;
+      H.current = [];
+      const c = a + 200, M = o + 30, { xGap: R, yGap: Z } = I.current, Q = Math.ceil(c / R), j = Math.ceil(M / Z), U = (a - R * Q) / 2, q = (o - Z * j) / 2;
+      for (let S = 0; S <= Q; S++) {
+        const tt = [];
+        for (let f = 0; f <= j; f++) tt.push({
+          x: U + R * S,
+          y: q + Z * f,
+          wave: {
+            x: 0,
+            y: 0
+          },
+          cursor: {
+            x: 0,
+            y: 0,
+            vx: 0,
+            vy: 0
+          }
+        });
+        H.current.push(tt);
+      }
+    }
+    function E(a) {
+      const o = H.current, c = B.current, M = Y.current, { waveSpeedX: R, waveSpeedY: Z, waveAmpX: Q, waveAmpY: j, friction: U, tension: q, maxCursorMove: S } = I.current;
+      o.forEach((tt) => {
+        tt.forEach((f) => {
+          const at = M.perlin2((f.x + a * R) * 2e-3, (f.y + a * Z) * 15e-4) * 12;
+          f.wave.x = Math.cos(at) * Q, f.wave.y = Math.sin(at) * j;
+          const ht = f.x - c.sx, dt = f.y - c.sy, st = Math.hypot(ht, dt), rt = Math.max(175, c.vs);
+          if (st < rt) {
+            const vt = 1 - st / rt, lt = Math.cos(st * 1e-3) * vt;
+            f.cursor.vx += Math.cos(c.a) * lt * rt * c.vs * 65e-5, f.cursor.vy += Math.sin(c.a) * lt * rt * c.vs * 65e-5;
+          }
+          f.cursor.vx += (0 - f.cursor.x) * q, f.cursor.vy += (0 - f.cursor.y) * q, f.cursor.vx *= U, f.cursor.vy *= U, f.cursor.x += f.cursor.vx * 2, f.cursor.y += f.cursor.vy * 2, f.cursor.x = Math.min(S, Math.max(-S, f.cursor.x)), f.cursor.y = Math.min(S, Math.max(-S, f.cursor.y));
+        });
+      });
+    }
+    function T(a, o = !0) {
+      const c = a.x + a.wave.x + (o ? a.cursor.x : 0), M = a.y + a.wave.y + (o ? a.cursor.y : 0);
+      return {
+        x: Math.round(c * 10) / 10,
+        y: Math.round(M * 10) / 10
+      };
+    }
+    function F() {
+      const { width: a, height: o } = C.current, c = i.current;
+      c && (c.clearRect(0, 0, a, o), c.beginPath(), c.strokeStyle = I.current.lineColor, H.current.forEach((M) => {
+        let R = T(M[0], !1);
+        c.moveTo(R.x, R.y), M.forEach((Z, Q) => {
+          const j = Q === M.length - 1;
+          R = T(Z, !j);
+          const U = T(M[Q + 1] || M[M.length - 1], !j);
+          c.lineTo(R.x, R.y), j && c.moveTo(U.x, U.y);
+        });
+      }), c.stroke());
+    }
+    function V(a) {
+      if (!L) return;
+      const o = B.current;
+      o.sx += (o.x - o.sx) * 0.1, o.sy += (o.y - o.sy) * 0.1;
+      const c = o.x - o.lx, M = o.y - o.ly, R = Math.hypot(c, M);
+      o.v = R, o.vs += (R - o.vs) * 0.1, o.vs = Math.min(100, o.vs), o.lx = o.x, o.ly = o.y, o.a = Math.atan2(M, c), L.style.setProperty("--x", `${o.sx}px`), L.style.setProperty("--y", `${o.sy}px`), E(a), F(), A.current = requestAnimationFrame(V);
+    }
+    function n() {
+      W(), N();
+    }
+    function d(a) {
+      w(a.clientX, a.clientY);
+    }
+    function s(a) {
+      const o = a.touches[0];
+      w(o.clientX, o.clientY);
+    }
+    function w(a, o) {
+      const c = B.current, M = C.current;
+      c.x = a - M.left, c.y = o - M.top, c.set || (c.sx = c.x, c.sy = c.y, c.lx = c.x, c.ly = c.y, c.set = !0);
+    }
+    return W(), N(), A.current = requestAnimationFrame(V), window.addEventListener("resize", n), window.addEventListener("mousemove", d), window.addEventListener("touchmove", s, { passive: !1 }), () => {
+      window.removeEventListener("resize", n), window.removeEventListener("mousemove", d), window.removeEventListener("touchmove", s), A.current !== null && cancelAnimationFrame(A.current);
+    };
+  }, []), /* @__PURE__ */ v("div", {
+    ref: m,
+    className: `${ut.waves} ${X}`,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      margin: 0,
+      padding: 0,
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      backgroundColor: e,
+      ...D
+    },
+    children: /* @__PURE__ */ v("canvas", {
+      ref: $,
+      className: ut.wavesCanvas
+    })
+  });
+}, qt = (r) => {
+  const { currentTheme: e } = ot(), l = K(() => {
+    const t = e.colors.variables.primary || "rgb(220, 38, 38)", u = (g, y, k, h = 0.4) => `rgb(${Math.round(g + (255 - g) * h)}, ${Math.round(y + (255 - y) * h)}, ${Math.round(k + (255 - k) * h)})`;
+    if (t.startsWith("#")) {
+      const g = t.slice(1);
+      return u(parseInt(g.slice(0, 2), 16), parseInt(g.slice(2, 4), 16), parseInt(g.slice(4, 6), 16));
+    }
+    const _ = t.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (_) return u(parseInt(_[1], 10), parseInt(_[2], 10), parseInt(_[3], 10));
+    const x = t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    return x ? u(parseInt(x[1], 10), parseInt(x[2], 10), parseInt(x[3], 10)) : t;
+  }, [e]);
+  return /* @__PURE__ */ v(Ht, {
+    lineColor: l,
+    backgroundColor: "transparent",
+    waveSpeedX: 0.05,
+    waveSpeedY: 0.01,
+    waveAmpX: 40,
+    waveAmpY: 20,
+    ...r
+  });
+}, Gt = "style-module__squaresCanvas___22kMc", Yt = { squaresCanvas: Gt }, jt = ({ direction: r = "right", speed: e = 1, borderColor: l = "#6B7280", squareSize: t = 40, hoverFillColor: u = "#111827", className: _ = "", style: x = {} }) => {
+  const { currentTheme: g } = ot(), y = g.colors.variables.fgHeading, k = p(null), h = p(null), D = p(0), X = p(0), m = p({
+    x: 0,
+    y: 0
+  }), $ = p(null);
+  return nt(() => {
+    const i = k.current;
+    if (!i) return;
+    const C = i.getContext("2d"), Y = () => {
+      i.width = i.offsetWidth, i.height = i.offsetHeight, D.current = Math.ceil(i.width / t) + 1, X.current = Math.ceil(i.height / t) + 1;
+    };
+    window.addEventListener("resize", Y), Y();
+    const H = () => {
+      if (!C) return;
+      C.clearRect(0, 0, i.width, i.height);
+      const b = Math.floor(m.current.x / t) * t, L = Math.floor(m.current.y / t) * t;
+      for (let N = b; N < i.width + t; N += t) for (let E = L; E < i.height + t; E += t) {
+        const T = N - m.current.x % t, F = E - m.current.y % t;
+        $.current && Math.floor((N - b) / t) === $.current.x && Math.floor((E - L) / t) === $.current.y && (C.fillStyle = u, C.fillRect(T, F, t, t)), C.strokeStyle = l, C.strokeRect(T, F, t, t);
+      }
+      const W = C.createRadialGradient(i.width / 2, i.height / 2, 0, i.width / 2, i.height / 2, Math.sqrt(i.width ** 2 + i.height ** 2) / 2);
+      W.addColorStop(0, "rgba(0, 0, 0, 0)"), W.addColorStop(1, y), C.fillStyle = W, C.fillRect(0, 0, i.width, i.height);
+    }, B = () => {
+      const b = Math.max(e, 0.1);
+      switch (r) {
+        case "right":
+          m.current.x = (m.current.x - b + t) % t;
+          break;
+        case "left":
+          m.current.x = (m.current.x + b + t) % t;
+          break;
+        case "up":
+          m.current.y = (m.current.y + b + t) % t;
+          break;
+        case "down":
+          m.current.y = (m.current.y - b + t) % t;
+          break;
+        case "diagonal":
+          m.current.x = (m.current.x - b + t) % t, m.current.y = (m.current.y - b + t) % t;
+      }
+      H(), h.current = requestAnimationFrame(B);
+    }, I = (b) => {
+      const L = i.getBoundingClientRect(), W = b.clientX - L.left, N = b.clientY - L.top, E = Math.floor(m.current.x / t) * t, T = Math.floor(m.current.y / t) * t, F = Math.floor((W + m.current.x - E) / t), V = Math.floor((N + m.current.y - T) / t);
+      (!$.current || $.current.x !== F || $.current.y !== V) && ($.current = {
+        x: F,
+        y: V
+      });
+    }, A = () => {
+      $.current = null;
+    };
+    return i.addEventListener("mousemove", I), i.addEventListener("mouseleave", A), h.current = requestAnimationFrame(B), () => {
+      window.removeEventListener("resize", Y), h.current && cancelAnimationFrame(h.current), i.removeEventListener("mousemove", I), i.removeEventListener("mouseleave", A);
+    };
+  }, [
+    r,
+    e,
+    l,
+    u,
+    t,
+    y
+  ]), /* @__PURE__ */ v("canvas", {
+    ref: k,
+    className: `${Yt.squaresCanvas} ${_}`,
+    style: x
+  });
+}, tr = (r) => {
+  const { currentTheme: e } = ot(), l = K(() => {
+    const u = e.colors.variables.border5 || e.colors.variables.fg || "#6B7280";
+    if (u.startsWith("#")) return u;
+    const _ = u.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    return _ ? `#${parseInt(_[1], 10).toString(16).padStart(2, "0")}${parseInt(_[2], 10).toString(16).padStart(2, "0")}${parseInt(_[3], 10).toString(16).padStart(2, "0")}` : u;
+  }, [e]), t = K(() => {
+    const u = e.colors.variables.bg3 || e.colors.variables.border3 || "#F3F4F6", _ = (g, y, k, h = 0.3) => `rgb(${Math.round(g * (1 - h))}, ${Math.round(y * (1 - h))}, ${Math.round(k * (1 - h))})`;
+    if (u.startsWith("#")) {
+      const g = u.slice(1);
+      return _(parseInt(g.slice(0, 2), 16), parseInt(g.slice(2, 4), 16), parseInt(g.slice(4, 6), 16));
+    }
+    const x = u.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    return x ? _(parseInt(x[1], 10), parseInt(x[2], 10), parseInt(x[3], 10)) : u;
+  }, [e]);
+  return /* @__PURE__ */ v(jt, {
+    borderColor: l,
+    hoverFillColor: t,
+    speed: 0.5,
+    squareSize: 40,
+    direction: "diagonal",
+    ...r
+  });
+}, St = "style-module__container___HkxIe", Dt = "style-module__canvas___MR9JX", Zt = "style-module__outerVignette___i75nw", Qt = "style-module__centerVignette___n9uVG", et = {
+  container: St,
+  canvas: Dt,
+  outerVignette: Zt,
+  centerVignette: Qt
+}, Ut = z(({ glitchColors: r = [
+  "#7F1D1D",
+  "#16A34A",
+  "#2563EB"
+], glitchSpeed: e = 500, centerVignette: l = !1, outerVignette: t = !0, smooth: u = !0, characters: _ = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$&*()-_+=/[]{};:<>.,0123456789", className: x = "", style: g = {} }) => {
+  const y = p(null), k = p(null), h = p([]), D = p({
+    columns: 0,
+    rows: 0
+  }), X = p(null), m = p(Date.now()), $ = K(() => Array.from(_), [_]), i = p(/* @__PURE__ */ new Map()), C = 16, Y = 10, H = 20, B = O(() => $[Math.floor(Math.random() * $.length)], [$]), I = O(() => r[Math.floor(Math.random() * r.length)], [r]), A = O((n) => {
+    if (i.current.has(n)) return i.current.get(n);
+    const d = n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (a, o, c, M) => o + o + c + c + M + M), s = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(d), w = s ? {
+      r: parseInt(s[1], 16),
+      g: parseInt(s[2], 16),
+      b: parseInt(s[3], 16)
+    } : null;
+    return i.current.set(n, w), w;
+  }, []), b = (n, d, s) => {
+    const w = {
+      r: Math.round(n.r + (d.r - n.r) * s),
+      g: Math.round(n.g + (d.g - n.g) * s),
+      b: Math.round(n.b + (d.b - n.b) * s)
+    };
+    return `rgb(${w.r}, ${w.g}, ${w.b})`;
+  }, L = (n, d) => ({
+    columns: Math.ceil(n / Y),
+    rows: Math.ceil(d / H)
+  }), W = (n, d) => {
+    D.current = {
+      columns: n,
+      rows: d
+    };
+    const s = n * d;
+    h.current = Array.from({ length: s }, () => ({
+      char: B(),
+      color: I(),
+      targetColor: I(),
+      colorProgress: 1
+    }));
+  }, N = () => {
+    const n = y.current;
+    if (!n) return;
+    const d = n.parentElement;
+    if (!d) return;
+    const s = window.devicePixelRatio || 1, w = d.getBoundingClientRect();
+    n.width = w.width * s, n.height = w.height * s, n.style.width = `${w.width}px`, n.style.height = `${w.height}px`, X.current && X.current.setTransform(s, 0, 0, s, 0, 0);
+    const { columns: a, rows: o } = L(w.width, w.height);
+    W(a, o), E();
+  }, E = O(() => {
+    if (!X.current || h.current.length === 0) return;
+    const n = X.current, d = y.current;
+    d && (n.clearRect(0, 0, d.width, d.height), n.font = `${C}px monospace`, n.textBaseline = "top", n.textAlign = "left", h.current.forEach((s, w) => {
+      const a = w % D.current.columns * Y, o = Math.floor(w / D.current.columns) * H;
+      n.fillStyle = s.color, n.fillText(s.char, a, o);
+    }));
+  }, []), T = O(() => {
+    if (!h.current || h.current.length === 0) return;
+    const n = Math.max(1, Math.floor(h.current.length * 0.02));
+    for (let d = 0; d < n; d++) {
+      const s = Math.floor(Math.random() * h.current.length);
+      h.current[s] && (h.current[s].char = B(), h.current[s].targetColor = I(), u ? h.current[s].colorProgress = 0 : (h.current[s].color = h.current[s].targetColor, h.current[s].colorProgress = 1));
+    }
+  }, [
+    B,
+    I,
+    u
+  ]), F = O(() => {
+    let n = !1, d = 0;
+    h.current.forEach((s) => {
+      if (s.colorProgress < 1) {
+        d++, s.colorProgress += 0.03, s.colorProgress > 1 && (s.colorProgress = 1);
+        const w = A(s.color), a = A(s.targetColor);
+        w && a && (s.color = b(w, a, s.colorProgress), n = !0);
+      }
+    }), n && d > 0 && E();
+  }, [A, E]), V = O(() => {
+    const n = Date.now();
+    n - m.current >= e ? (T(), E(), m.current = n) : u && F(), k.current = requestAnimationFrame(V);
+  }, [
+    e,
+    u,
+    T,
+    F
+  ]);
+  return nt(() => {
+    const n = y.current;
+    if (!n) return;
+    X.current = n.getContext("2d"), N(), V();
+    let d;
+    const s = () => {
+      clearTimeout(d), d = setTimeout(() => {
+        k.current && cancelAnimationFrame(k.current), N(), V();
+      }, 100);
+    };
+    return window.addEventListener("resize", s), () => {
+      k.current && cancelAnimationFrame(k.current), window.removeEventListener("resize", s), clearTimeout(d), i.current.clear();
+    };
+  }, [
+    e,
+    u,
+    r,
+    V
+  ]), /* @__PURE__ */ J("div", {
+    className: `${et.container} ${x}`,
+    style: g,
+    children: [
+      /* @__PURE__ */ v("canvas", {
+        ref: y,
+        className: et.canvas
+      }),
+      t && /* @__PURE__ */ v("div", { className: et.outerVignette }),
+      l && /* @__PURE__ */ v("div", { className: et.centerVignette })
+    ]
+  });
+}), Ot = z((r) => {
+  const { currentTheme: e } = ot(), l = K(() => {
+    const t = e.colors.variables.primary || "#DC2626", u = e.colors.variables.info || "#2563EB", _ = e.colors.variables.success || "#16A34A", x = (g) => {
+      if (g.startsWith("#")) return g;
+      const y = g.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+      return y ? `#${parseInt(y[1], 10).toString(16).padStart(2, "0")}${parseInt(y[2], 10).toString(16).padStart(2, "0")}${parseInt(y[3], 10).toString(16).padStart(2, "0")}` : g;
+    };
+    return [
+      x(t),
+      x(u),
+      x(_)
+    ];
+  }, [e]);
+  return /* @__PURE__ */ v(Ut, {
+    glitchColors: l,
+    glitchSpeed: 300,
+    centerVignette: !0,
+    outerVignette: !1,
+    smooth: !0,
+    ...r
+  });
+});
+Ot.displayName = "LetterGlitchBackground";
+export {
+  Et as a,
+  Wt as i,
+  tr as n,
+  xt as o,
+  qt as r,
+  Ot as t
+};
+
+//# sourceMappingURL=chunk-animations-DKyNVF-O.mjs.map