@frequencyads/components 0.1.4 → 0.1.6

package/dist/index.mjs

@@ -1,383 +1,384 @@
 'use client';
-import { jsxs as m, jsx as e, Fragment as ze } from "react/jsx-runtime";
-import { useState as z, useRef as D, useEffect as P, forwardRef as xe, useImperativeHandle as Be, useCallback as S } from "react";
-import { Text as N, Box as k, Group as F, ActionIcon as Y, Slider as Se, Button as re, Portal as Te, Notification as Pe, Title as oe, SimpleGrid as Me, Paper as U, Stack as ce, ThemeIcon as We, useMantineColorScheme as Ee, Badge as $e, Transition as De, Tooltip as Fe, Avatar as je } from "@mantine/core";
-import { motion as B } from "framer-motion";
-import { IconPlayerPauseFilled as Ce, IconPlayerPlayFilled as ke, IconVolumeOff as Ge, IconVolume as Re, IconDownload as Ae, IconX as Oe, IconCheck as He, IconPlus as ue, IconQuote as Ve } from "@tabler/icons-react";
-import qe from "@frequencyads/brand/assets/frequency-mark-white.svg";
-import { gradients as Ue } from "@frequencyads/brand/colors";
-function Cn({
+import { Text as v, Box as x, Group as z, ActionIcon as Z, Slider as Fe, Button as re, Portal as We, Notification as je, Title as se, SimpleGrid as ae, Paper as Y, Stack as K, ThemeIcon as Ae, useMantineColorScheme as Ge, Badge as Be, Transition as Re, Tooltip as qe, Avatar as Oe, Container as Ve, Card as _e, Image as te, Anchor as He, useComputedColorScheme as Ue } from "@mantine/core";
+import { Anchor as Io, Badge as Co, Box as zo, Button as Mo, Card as Bo, Container as Lo, Divider as Do, Flex as So, Grid as Po, Group as Eo, Image as Fo, SimpleGrid as Wo, Stack as jo, Text as Ao, Title as Go } from "@mantine/core";
+import { jsxs as l, jsx as e, Fragment as Le } from "react/jsx-runtime";
+import { useState as T, useRef as j, useEffect as S, forwardRef as De, useImperativeHandle as Xe, useCallback as D } from "react";
+import { motion as L } from "framer-motion";
+import { IconPlayerPauseFilled as Se, IconPlayerPlayFilled as Pe, IconVolumeOff as Ye, IconVolume as Ke, IconDownload as Je, IconX as Qe, IconCheck as Ze, IconPlus as be, IconQuote as et } from "@tabler/icons-react";
+import tt from "@frequencyads/brand/assets/frequency-mark-white.svg";
+import { gradients as nt } from "@frequencyads/brand/colors";
+function io({
   value: t,
   suffix: o = "",
   prefix: a = "",
-  duration: s = 2e3,
-  threshold: r = 0.5,
-  abbreviate: f = !0,
+  duration: r = 2e3,
+  threshold: s = 0.5,
+  abbreviate: h = !0,
   decimals: y,
-  ...g
+  ..._
 }) {
-  const [_, l] = z(0), [d, w] = z(!1), i = D(null);
-  return P(() => {
-    const u = i.current;
-    if (!u) return;
-    const c = new IntersectionObserver(
-      ([b]) => {
-        b.isIntersecting && !d && w(!0);
+  const [g, m] = T(0), [u, k] = T(!1), i = j(null);
+  return S(() => {
+    const c = i.current;
+    if (!c) return;
+    const d = new IntersectionObserver(
+      ([w]) => {
+        w.isIntersecting && !u && k(!0);
       },
-      { threshold: r }
+      { threshold: s }
     );
-    return c.observe(u), () => c.disconnect();
-  }, [d, r]), P(() => {
-    if (!d) return;
-    let u, c;
-    const b = (n) => {
-      u || (u = n);
-      const p = Math.min((n - u) / s, 1), I = 1 - Math.pow(1 - p, 3);
-      l(I * t), p < 1 && (c = requestAnimationFrame(b));
+    return d.observe(c), () => d.disconnect();
+  }, [u, s]), S(() => {
+    if (!u) return;
+    let c, d;
+    const w = (n) => {
+      c || (c = n);
+      const f = Math.min((n - c) / r, 1), N = 1 - Math.pow(1 - f, 3);
+      m(N * t), f < 1 && (d = requestAnimationFrame(w));
     };
-    return c = requestAnimationFrame(b), () => cancelAnimationFrame(c);
-  }, [d, t, s]), /* @__PURE__ */ m(
-    N,
+    return d = requestAnimationFrame(w), () => cancelAnimationFrame(d);
+  }, [u, t, r]), /* @__PURE__ */ l(
+    v,
     {
       component: "span",
       ref: i,
       style: { fontVariantNumeric: "tabular-nums" },
-      ...g,
+      ..._,
       children: [
         a,
         (() => {
-          if (f && t >= 1e3) {
-            const u = _ / 1e3;
-            return u % 1 === 0 ? `${Math.round(u)}K` : `${u.toFixed(1)}K`;
+          if (h && t >= 1e3) {
+            const c = g / 1e3;
+            return c % 1 === 0 ? `${Math.round(c)}K` : `${c.toFixed(1)}K`;
           }
-          return y !== void 0 ? _.toFixed(y) : t !== Math.floor(t) ? _.toFixed(1) : Math.round(_).toString();
+          return y !== void 0 ? g.toFixed(y) : t !== Math.floor(t) ? g.toFixed(1) : Math.round(g).toString();
         })(),
         o
       ]
     }
   );
 }
-const Xe = "_root_1bq7s_1", Ye = "_svg_1bq7s_12", me = {
-  root: Xe,
-  svg: Ye
-}, Ke = 140, he = 3, pe = 10, Le = 150, V = Le / 2;
-function fe({
-  barCount: t = Ke,
+const ot = "_root_1bq7s_1", rt = "_svg_1bq7s_12", ve = {
+  root: ot,
+  svg: rt
+}, at = 140, ye = 3, ke = 10, Ee = 150, U = Ee / 2;
+function we({
+  barCount: t = at,
   duration: o = 3,
   repeatDelay: a = 3
 }) {
-  const [s, r] = z(!1);
-  if (P(() => {
-    r(!0);
-  }, []), !s) return null;
-  const f = t * pe;
-  return /* @__PURE__ */ e("div", { className: me.root, children: /* @__PURE__ */ m(
+  const [r, s] = T(!1);
+  if (S(() => {
+    s(!0);
+  }, []), !r) return null;
+  const h = t * ke;
+  return /* @__PURE__ */ e("div", { className: ve.root, children: /* @__PURE__ */ l(
     "svg",
     {
-      className: me.svg,
-      viewBox: `0 0 ${f} ${Le}`,
+      className: ve.svg,
+      viewBox: `0 0 ${h} ${Ee}`,
       preserveAspectRatio: "none",
       children: [
-        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ m("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
           /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
           /* @__PURE__ */ e("stop", { offset: "15%", stopColor: "white", stopOpacity: "0.15" }),
           /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.25" }),
           /* @__PURE__ */ e("stop", { offset: "85%", stopColor: "white", stopOpacity: "0.15" }),
           /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
         ] }) }),
-        [...Array(t)].map((y, g) => {
-          const _ = g * pe, l = 18 + Math.sin(g * 0.4) * 6 + Math.cos(g * 0.7) * 4, d = Math.min(g, t - 1 - g) * 0.04;
-          return /* @__PURE__ */ m("g", { children: [
+        [...Array(t)].map((y, _) => {
+          const g = _ * ke, m = 18 + Math.sin(_ * 0.4) * 6 + Math.cos(_ * 0.7) * 4, u = Math.min(_, t - 1 - _) * 0.04;
+          return /* @__PURE__ */ l("g", { children: [
             /* @__PURE__ */ e(
-              B.rect,
+              L.rect,
               {
-                x: _,
-                width: he,
+                x: g,
+                width: ye,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: l / 2, y: V - l / 4 },
+                initial: { height: m / 2, y: U - m / 4 },
                 animate: {
-                  height: [l / 2, l * 2, l / 2, l * 1.2, l / 2],
+                  height: [m / 2, m * 2, m / 2, m * 1.2, m / 2],
                   y: [
-                    V - l / 4,
-                    V - l,
-                    V - l / 4,
-                    V - l * 0.6,
-                    V - l / 4
+                    U - m / 4,
+                    U - m,
+                    U - m / 4,
+                    U - m * 0.6,
+                    U - m / 4
                   ]
                 },
                 transition: {
                   duration: o,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: d,
+                  delay: u,
                   repeatDelay: a
                 }
               }
             ),
             /* @__PURE__ */ e(
-              B.rect,
+              L.rect,
               {
-                x: _,
-                y: V,
-                width: he,
+                x: g,
+                y: U,
+                width: ye,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: l / 2 },
+                initial: { height: m / 2 },
                 animate: {
-                  height: [l / 2, l * 2, l / 2, l * 1.2, l / 2]
+                  height: [m / 2, m * 2, m / 2, m * 1.2, m / 2]
                 },
                 transition: {
                   duration: o,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: d,
+                  delay: u,
                   repeatDelay: a
                 }
               }
             )
-          ] }, g);
+          ] }, _);
         })
       ]
     }
   ) });
 }
-const Je = "_root_1pkxe_1", Qe = "_progressOverlay_1pkxe_9", Ze = "_bars_1pkxe_19", et = "_bar_1pkxe_19", tt = "_loading_1pkxe_34", J = {
-  root: Je,
-  progressOverlay: Qe,
-  bars: Ze,
-  bar: et,
-  loading: tt
+const st = "_root_1pkxe_1", it = "_progressOverlay_1pkxe_9", lt = "_bars_1pkxe_19", ct = "_bar_1pkxe_19", dt = "_loading_1pkxe_34", ne = {
+  root: st,
+  progressOverlay: it,
+  bars: lt,
+  bar: ct,
+  loading: dt
 };
-function nt(t = 100) {
+function mt(t = 100) {
   const o = [];
   for (let a = 0; a < t; a++) {
-    const s = a / (t - 1), r = 20 + Math.sin(a * 0.1) * 15, f = (Math.random() - 0.5) * 20, y = Math.sin(s * Math.PI) * 30, g = s > 0.2 && s < 0.8 ? Math.random() * 10 : 0, _ = s < 0.05 || s > 0.95 ? Math.min(s / 0.05, (1 - s) / 0.05) : 1;
-    o.push(Math.max(5, Math.min(90, (r + f + y + g) * _)));
+    const r = a / (t - 1), s = 20 + Math.sin(a * 0.1) * 15, h = (Math.random() - 0.5) * 20, y = Math.sin(r * Math.PI) * 30, _ = r > 0.2 && r < 0.8 ? Math.random() * 10 : 0, g = r < 0.05 || r > 0.95 ? Math.min(r / 0.05, (1 - r) / 0.05) : 1;
+    o.push(Math.max(5, Math.min(90, (s + h + y + _) * g)));
   }
   return o;
 }
-const le = xe(
+const fe = De(
   ({
     audioRef: t,
     currentTime: o = 0,
     onSeek: a,
-    loading: s = !1,
-    waveColor: r = "#CCCCCC",
-    progressColor: f = "#169bde",
+    loading: r = !1,
+    waveColor: s = "#CCCCCC",
+    progressColor: h = "#169bde",
     height: y = 60,
-    barWidth: g = 2,
-    barGap: _ = 1
-  }, l) => {
-    const d = D(null), [w] = z(() => nt()), [i, v] = z(0), [u, c] = z(0);
-    Be(l, () => ({
+    barWidth: _ = 2,
+    barGap: g = 1
+  }, m) => {
+    const u = j(null), [k] = T(() => mt()), [i, b] = T(0), [c, d] = T(0);
+    Xe(m, () => ({
       seekTo: (n) => {
-        i > 0 && c(Math.max(0, Math.min(100, n / i * 100)));
+        i > 0 && d(Math.max(0, Math.min(100, n / i * 100)));
       },
-      getCurrentTime: () => u / 100 * i,
+      getCurrentTime: () => c / 100 * i,
       getDuration: () => i
-    })), P(() => {
+    })), S(() => {
       const n = t.current;
       if (!n) return;
-      const p = () => {
-        n.duration && !isNaN(n.duration) && v(n.duration);
-      }, I = () => {
-        n.duration > 0 && c(n.currentTime / n.duration * 100);
+      const f = () => {
+        n.duration && !isNaN(n.duration) && b(n.duration);
+      }, N = () => {
+        n.duration > 0 && d(n.currentTime / n.duration * 100);
       };
-      return n.duration && !isNaN(n.duration) && v(n.duration), n.addEventListener("loadedmetadata", p), n.addEventListener("timeupdate", I), () => {
-        n.removeEventListener("loadedmetadata", p), n.removeEventListener("timeupdate", I);
+      return n.duration && !isNaN(n.duration) && b(n.duration), n.addEventListener("loadedmetadata", f), n.addEventListener("timeupdate", N), () => {
+        n.removeEventListener("loadedmetadata", f), n.removeEventListener("timeupdate", N);
       };
-    }, [t]), P(() => {
-      i > 0 && typeof o == "number" && c(o / i * 100);
+    }, [t]), S(() => {
+      i > 0 && typeof o == "number" && d(o / i * 100);
     }, [o, i]);
-    const b = S(
+    const w = D(
       (n) => {
-        if (!d.current || !a || i === 0) return;
-        const p = d.current.getBoundingClientRect(), I = (n.clientX - p.left) / p.width * i;
-        a(I);
+        if (!u.current || !a || i === 0) return;
+        const f = u.current.getBoundingClientRect(), N = (n.clientX - f.left) / f.width * i;
+        a(N);
       },
       [a, i]
     );
-    return /* @__PURE__ */ m(
-      k,
+    return /* @__PURE__ */ l(
+      x,
       {
-        ref: d,
-        className: J.root,
+        ref: u,
+        className: ne.root,
         style: { height: y },
-        onClick: b,
+        onClick: w,
         children: [
           /* @__PURE__ */ e(
             "div",
             {
-              className: J.progressOverlay,
-              style: { width: `${u}%`, backgroundColor: `${f}15` }
+              className: ne.progressOverlay,
+              style: { width: `${c}%`, backgroundColor: `${h}15` }
             }
           ),
-          /* @__PURE__ */ e("div", { className: J.bars, style: { gap: _ }, children: w.map((n, p) => {
-            const I = p / w.length * 100 <= u;
+          /* @__PURE__ */ e("div", { className: ne.bars, style: { gap: g }, children: k.map((n, f) => {
+            const N = f / k.length * 100 <= c;
             return /* @__PURE__ */ e(
               "div",
               {
-                className: J.bar,
+                className: ne.bar,
                 style: {
-                  width: g,
+                  width: _,
                   height: `${n}%`,
-                  backgroundColor: I ? f : r
+                  backgroundColor: N ? h : s
                 }
               },
-              p
+              f
             );
           }) }),
-          s && /* @__PURE__ */ e("div", { className: J.loading, children: "Loading waveform..." })
+          r && /* @__PURE__ */ e("div", { className: ne.loading, children: "Loading waveform..." })
         ]
       }
     );
   }
 );
-le.displayName = "AudioWaveform";
-const ot = "_root_n9zxy_1", st = "_playButton_n9zxy_8", at = "_time_n9zxy_22", it = "_volumeGroup_n9zxy_28", Q = {
-  root: ot,
-  playButton: st,
-  time: at,
-  volumeGroup: it
+fe.displayName = "AudioWaveform";
+const ut = "_root_n9zxy_1", ht = "_playButton_n9zxy_8", gt = "_time_n9zxy_22", pt = "_volumeGroup_n9zxy_28", oe = {
+  root: ut,
+  playButton: ht,
+  time: gt,
+  volumeGroup: pt
 };
-function se(t) {
+function he(t) {
   const o = Math.floor(t / 60), a = Math.floor(t % 60);
   return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
 }
-function kn({
+function lo({
   src: t,
   filename: o = "audio",
   playButtonColor: a,
-  playButtonSize: s = 32,
-  waveColor: r = "#D0D0D0",
-  progressColor: f = "#a8a8a8",
+  playButtonSize: r = 32,
+  waveColor: s = "#D0D0D0",
+  progressColor: h = "#a8a8a8",
   waveHeight: y = 64,
-  barWidth: g = 3,
-  barGap: _ = 2,
-  showVolume: l = !0,
-  showDownload: d = !0
+  barWidth: _ = 3,
+  barGap: g = 2,
+  showVolume: m = !0,
+  showDownload: u = !0
 }) {
-  const w = D(null), [i, v] = z(!1), [u, c] = z(0), [b, n] = z("00:00"), [p, I] = z("00:00"), [T, R] = z(50), [A, j] = z(50), [C, M] = z(!1);
-  P(() => {
-    const h = w.current;
-    if (!h) return;
-    h.volume = T / 100;
-    const x = () => {
-      c(h.currentTime), n(se(h.currentTime));
-    }, L = () => I(se(h.duration)), X = () => {
+  const k = j(null), [i, b] = T(!1), [c, d] = T(0), [w, n] = T("00:00"), [f, N] = T("00:00"), [P, q] = T(50), [O, A] = T(50), [M, I] = T(!1);
+  S(() => {
+    const p = k.current;
+    if (!p) return;
+    p.volume = P / 100;
+    const $ = () => {
+      d(p.currentTime), n(he(p.currentTime));
+    }, B = () => N(he(p.duration)), J = () => {
       setTimeout(() => {
-        c(0), n("00:00"), v(!1);
+        d(0), n("00:00"), b(!1);
       }, 500);
-    }, Z = () => v(!0), ee = () => v(!1);
-    return h.addEventListener("timeupdate", x), h.addEventListener("loadedmetadata", L), h.addEventListener("ended", X), h.addEventListener("play", Z), h.addEventListener("pause", ee), () => {
-      h.removeEventListener("timeupdate", x), h.removeEventListener("loadedmetadata", L), h.removeEventListener("ended", X), h.removeEventListener("play", Z), h.removeEventListener("pause", ee);
+    }, ie = () => b(!0), le = () => b(!1);
+    return p.addEventListener("timeupdate", $), p.addEventListener("loadedmetadata", B), p.addEventListener("ended", J), p.addEventListener("play", ie), p.addEventListener("pause", le), () => {
+      p.removeEventListener("timeupdate", $), p.removeEventListener("loadedmetadata", B), p.removeEventListener("ended", J), p.removeEventListener("play", ie), p.removeEventListener("pause", le);
     };
   }, [t]);
-  const E = S(() => {
-    const h = w.current;
-    h && (i ? h.pause() : h.play().catch(() => {
+  const F = D(() => {
+    const p = k.current;
+    p && (i ? p.pause() : p.play().catch(() => {
     }));
-  }, [i]), G = S((h) => {
-    const x = w.current;
-    x && !isNaN(h) && isFinite(h) && (x.currentTime = h, c(h), n(se(h)));
-  }, []), O = S(
-    (h) => {
-      const x = w.current;
-      x && (x.volume = h / 100, R(h), h > 0 ? (j(h), M(!1)) : M(!0));
+  }, [i]), G = D((p) => {
+    const $ = k.current;
+    $ && !isNaN(p) && isFinite(p) && ($.currentTime = p, d(p), n(he(p)));
+  }, []), V = D(
+    (p) => {
+      const $ = k.current;
+      $ && ($.volume = p / 100, q(p), p > 0 ? (A(p), I(!1)) : I(!0));
     },
     []
-  ), H = S(() => {
-    const h = w.current;
-    if (h)
-      if (C) {
-        const x = A || 50;
-        h.volume = x / 100, R(x), M(!1);
+  ), H = D(() => {
+    const p = k.current;
+    if (p)
+      if (M) {
+        const $ = O || 50;
+        p.volume = $ / 100, q($), I(!1);
       } else
-        j(T), h.volume = 0, R(0), M(!0);
-  }, [C, T, A]), K = S(() => {
-    fetch(t).then((h) => h.blob()).then((h) => {
-      const x = URL.createObjectURL(h), L = document.createElement("a");
-      L.href = x, L.download = o, document.body.appendChild(L), L.click(), document.body.removeChild(L), URL.revokeObjectURL(x);
+        A(P), p.volume = 0, q(0), I(!0);
+  }, [M, P, O]), ee = D(() => {
+    fetch(t).then((p) => p.blob()).then((p) => {
+      const $ = URL.createObjectURL(p), B = document.createElement("a");
+      B.href = $, B.download = o, document.body.appendChild(B), B.click(), document.body.removeChild(B), URL.revokeObjectURL($);
     }).catch(() => window.open(t, "_blank"));
   }, [t, o]);
-  return /* @__PURE__ */ m(F, { gap: "sm", wrap: "nowrap", className: Q.root, children: [
-    /* @__PURE__ */ e("audio", { ref: w, src: t, preload: "metadata" }),
+  return /* @__PURE__ */ l(z, { gap: "sm", wrap: "nowrap", className: oe.root, children: [
+    /* @__PURE__ */ e("audio", { ref: k, src: t, preload: "metadata" }),
     /* @__PURE__ */ e(
-      Y,
+      Z,
       {
         variant: "filled",
         radius: "xl",
-        size: s,
+        size: r,
         color: a,
-        onClick: E,
+        onClick: F,
         "aria-label": i ? "Pause" : "Play",
-        className: Q.playButton,
-        children: i ? /* @__PURE__ */ e(Ce, { size: s * 0.5 }) : /* @__PURE__ */ e(ke, { size: s * 0.5 })
+        className: oe.playButton,
+        children: i ? /* @__PURE__ */ e(Se, { size: r * 0.5 }) : /* @__PURE__ */ e(Pe, { size: r * 0.5 })
       }
     ),
-    /* @__PURE__ */ e(N, { size: "xs", ff: "monospace", c: "dimmed", className: Q.time, children: b }),
-    /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-      le,
+    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: oe.time, children: w }),
+    /* @__PURE__ */ e(x, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
+      fe,
       {
-        audioRef: w,
-        currentTime: u,
+        audioRef: k,
+        currentTime: c,
         onSeek: G,
-        waveColor: r,
-        progressColor: f,
+        waveColor: s,
+        progressColor: h,
         height: y,
-        barWidth: g,
-        barGap: _
+        barWidth: _,
+        barGap: g
       }
     ) }),
-    /* @__PURE__ */ e(N, { size: "xs", ff: "monospace", c: "dimmed", className: Q.time, children: p }),
-    l && /* @__PURE__ */ m(F, { gap: 4, wrap: "nowrap", className: Q.volumeGroup, children: [
+    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: oe.time, children: f }),
+    m && /* @__PURE__ */ l(z, { gap: 4, wrap: "nowrap", className: oe.volumeGroup, children: [
       /* @__PURE__ */ e(
-        Y,
+        Z,
         {
           variant: "subtle",
           size: "sm",
           onClick: H,
-          "aria-label": C ? "Unmute" : "Mute",
-          children: C ? /* @__PURE__ */ e(Ge, { size: 16 }) : /* @__PURE__ */ e(Re, { size: 16 })
+          "aria-label": M ? "Unmute" : "Mute",
+          children: M ? /* @__PURE__ */ e(Ye, { size: 16 }) : /* @__PURE__ */ e(Ke, { size: 16 })
         }
       ),
       /* @__PURE__ */ e(
-        Se,
+        Fe,
         {
-          value: T,
-          onChange: O,
+          value: P,
+          onChange: V,
           size: "xs",
           w: 80,
           "aria-label": "Volume"
         }
       )
     ] }),
-    d && /* @__PURE__ */ e(Y, { variant: "subtle", size: "sm", onClick: K, "aria-label": "Download", children: /* @__PURE__ */ e(Ae, { size: 16 }) })
+    u && /* @__PURE__ */ e(Z, { variant: "subtle", size: "sm", onClick: ee, "aria-label": "Download", children: /* @__PURE__ */ e(Je, { size: 16 }) })
   ] });
 }
-const rt = "_root_ujac8_1", ct = "_textarea_ujac8_5", _e = {
-  root: rt,
-  textarea: ct
+const ft = "_root_ujac8_1", _t = "_textarea_ujac8_5", xe = {
+  root: ft,
+  textarea: _t
 };
-function Ln({ code: t, filename: o, height: a = 384 }) {
-  const [s, r] = z(!1), f = S(async () => {
+function co({ code: t, filename: o, height: a = 384 }) {
+  const [r, s] = T(!1), h = D(async () => {
     try {
-      await navigator.clipboard.writeText(t), r(!0), setTimeout(() => r(!1), 2e3);
+      await navigator.clipboard.writeText(t), s(!0), setTimeout(() => s(!1), 2e3);
     } catch {
     }
   }, [t]);
-  return /* @__PURE__ */ m(k, { className: _e.root, children: [
-    /* @__PURE__ */ m(F, { justify: "space-between", mb: "xs", children: [
-      o && /* @__PURE__ */ e(N, { size: "sm", fw: 500, c: "dimmed", children: o }),
+  return /* @__PURE__ */ l(x, { className: xe.root, children: [
+    /* @__PURE__ */ l(z, { justify: "space-between", mb: "xs", children: [
+      o && /* @__PURE__ */ e(v, { size: "sm", fw: 500, c: "dimmed", children: o }),
       /* @__PURE__ */ e(
         re,
         {
           size: "xs",
           radius: "md",
-          color: s ? "green" : "blue",
-          onClick: f,
-          children: s ? "Copied!" : "Copy"
+          color: r ? "green" : "blue",
+          onClick: h,
+          children: r ? "Copied!" : "Copy"
         }
       )
     ] }),
@@ -386,287 +387,287 @@ function Ln({ code: t, filename: o, height: a = 384 }) {
       {
         readOnly: !0,
         value: t,
-        className: _e.textarea,
+        className: xe.textarea,
         style: { height: a }
       }
     )
   ] });
 }
-const lt = "_root_ix1b2_1", dt = "_toast_ix1b2_5", ve = {
-  root: lt,
-  toast: dt
+const bt = "_root_ix1b2_1", vt = "_toast_ix1b2_5", Ne = {
+  root: bt,
+  toast: vt
 };
-function de({ value: t, children: o }) {
-  const [a, s] = z(null), r = S(() => {
+function ue({ value: t, children: o }) {
+  const [a, r] = T(null), s = D(() => {
     navigator.clipboard.writeText(t).then(() => {
-      s(`Copied ${t}`), setTimeout(() => s(null), 1800);
+      r(`Copied ${t}`), setTimeout(() => r(null), 1800);
     });
   }, [t]);
-  return /* @__PURE__ */ m(ze, { children: [
+  return /* @__PURE__ */ l(Le, { children: [
     /* @__PURE__ */ e(
       "span",
       {
-        onClick: r,
-        className: ve.root,
+        onClick: s,
+        className: Ne.root,
         title: `Click to copy ${t}`,
         children: o
       }
     ),
-    a && /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
-      Pe,
+    a && /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(
+      je,
       {
         withCloseButton: !1,
-        className: ve.toast,
+        className: Ne.toast,
         color: "blue",
         children: a
       }
     ) })
   ] });
 }
-const ut = "_root_3ht5s_1", mt = "_shade_3ht5s_5", ht = "_color_3ht5s_10", pt = "_main_3ht5s_20", te = {
-  root: ut,
-  shade: mt,
-  color: ht,
-  main: pt
+const yt = "_root_3ht5s_1", kt = "_shade_3ht5s_5", wt = "_color_3ht5s_10", xt = "_main_3ht5s_20", ce = {
+  root: yt,
+  shade: kt,
+  color: wt,
+  main: xt
 };
-function Bn({ name: t, shades: o, mainIndex: a = 5 }) {
-  return /* @__PURE__ */ m("div", { className: te.root, children: [
-    /* @__PURE__ */ e(oe, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
-    /* @__PURE__ */ e(Me, { cols: 10, spacing: 4, children: o.map((s, r) => /* @__PURE__ */ e(de, { value: s, children: /* @__PURE__ */ m("div", { className: te.shade, children: [
+function mo({ name: t, shades: o, mainIndex: a = 5 }) {
+  return /* @__PURE__ */ l("div", { className: ce.root, children: [
+    /* @__PURE__ */ e(se, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
+    /* @__PURE__ */ e(ae, { cols: 10, spacing: 4, children: o.map((r, s) => /* @__PURE__ */ e(ue, { value: r, children: /* @__PURE__ */ l("div", { className: ce.shade, children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: `${te.color} ${r === a ? te.main : ""}`,
-          style: { backgroundColor: s }
+          className: `${ce.color} ${s === a ? ce.main : ""}`,
+          style: { backgroundColor: r }
         }
       ),
-      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: r }),
-      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: s })
-    ] }) }, r)) })
+      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: s }),
+      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: r })
+    ] }) }, s)) })
   ] });
 }
-const ft = "_root_1vxkx_1", _t = "_preview_1vxkx_11", vt = "_info_1vxkx_15", ae = {
-  root: ft,
-  preview: _t,
-  info: vt
+const Nt = "_root_1vxkx_1", Tt = "_preview_1vxkx_11", $t = "_info_1vxkx_15", ge = {
+  root: Nt,
+  preview: Tt,
+  info: $t
 };
-function Sn({ name: t, hex: o, label: a }) {
-  return /* @__PURE__ */ e(de, { value: o, children: /* @__PURE__ */ m(U, { className: ae.root, shadow: "lg", radius: "md", withBorder: !1, children: [
-    /* @__PURE__ */ e("div", { className: ae.preview, style: { backgroundColor: o } }),
-    /* @__PURE__ */ m("div", { className: ae.info, children: [
-      /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: t }),
-      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ff: "monospace", children: o }),
-      a && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: a })
+function uo({ name: t, hex: o, label: a }) {
+  return /* @__PURE__ */ e(ue, { value: o, children: /* @__PURE__ */ l(Y, { className: ge.root, shadow: "lg", radius: "md", withBorder: !1, children: [
+    /* @__PURE__ */ e("div", { className: ge.preview, style: { backgroundColor: o } }),
+    /* @__PURE__ */ l("div", { className: ge.info, children: [
+      /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: t }),
+      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ff: "monospace", children: o }),
+      a && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: a })
     ] })
   ] }) });
 }
-const gt = "_root_dzed6_1", yt = "_dont_dzed6_7", bt = "_dontIcon_dzed6_12", wt = "_dontLabel_dzed6_13", Nt = "_doIcon_dzed6_22", It = "_doLabel_dzed6_23", q = {
-  root: gt,
-  dont: yt,
-  dontIcon: bt,
-  dontLabel: wt,
+const It = "_root_dzed6_1", Ct = "_dont_dzed6_7", zt = "_dontIcon_dzed6_12", Mt = "_dontLabel_dzed6_13", Bt = "_doIcon_dzed6_22", Lt = "_doLabel_dzed6_23", X = {
+  root: It,
+  dont: Ct,
+  dontIcon: zt,
+  dontLabel: Mt,
   do: "_do_dzed6_7",
-  doIcon: Nt,
-  doLabel: It
+  doIcon: Bt,
+  doLabel: Lt
 };
-function Tn({ items: t }) {
-  return /* @__PURE__ */ e("div", { className: q.root, children: t.map((o, a) => /* @__PURE__ */ m(Me, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
-    /* @__PURE__ */ m(U, { className: q.dont, p: "md", radius: "md", children: [
-      /* @__PURE__ */ m(F, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(Oe, { size: 16, className: q.dontIcon }),
-        /* @__PURE__ */ e(N, { size: "sm", fw: 600, className: q.dontLabel, children: "Don't" })
+function ho({ items: t }) {
+  return /* @__PURE__ */ e("div", { className: X.root, children: t.map((o, a) => /* @__PURE__ */ l(ae, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
+    /* @__PURE__ */ l(Y, { className: X.dont, p: "md", radius: "md", children: [
+      /* @__PURE__ */ l(z, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(Qe, { size: 16, className: X.dontIcon }),
+        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: X.dontLabel, children: "Don't" })
       ] }),
-      /* @__PURE__ */ e(N, { size: "sm", children: o.dont })
+      /* @__PURE__ */ e(v, { size: "sm", children: o.dont })
     ] }),
-    /* @__PURE__ */ m(U, { className: q.do, p: "md", radius: "md", children: [
-      /* @__PURE__ */ m(F, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(He, { size: 16, className: q.doIcon }),
-        /* @__PURE__ */ e(N, { size: "sm", fw: 600, className: q.doLabel, children: "Do" })
+    /* @__PURE__ */ l(Y, { className: X.do, p: "md", radius: "md", children: [
+      /* @__PURE__ */ l(z, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(Ze, { size: 16, className: X.doIcon }),
+        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: X.doLabel, children: "Do" })
       ] }),
-      /* @__PURE__ */ e(N, { size: "sm", children: o.do })
+      /* @__PURE__ */ e(v, { size: "sm", children: o.do })
     ] })
   ] }, a)) });
 }
-const zt = "_root_xi08i_1", xt = "_inner_xi08i_6", ge = {
-  root: zt,
-  inner: xt
+const Dt = "_root_xi08i_1", St = "_inner_xi08i_6", Te = {
+  root: Dt,
+  inner: St
 };
-function Pn({
+function go({
   title: t,
   description: o,
   expandedContent: a,
-  icon: s,
-  color: r = "blue",
-  iconSize: f = "lg",
+  icon: r,
+  color: s = "blue",
+  iconSize: h = "lg",
   collapsedHeight: y = 120,
-  threshold: g = 0.5,
-  delay: _ = 300,
-  expanded: l,
-  onExpandedChange: d
+  threshold: _ = 0.5,
+  delay: g = 300,
+  expanded: m,
+  onExpandedChange: u
 }) {
-  const w = D(null), [i, v] = z(!1), u = l !== void 0, c = u ? l : i;
-  return P(() => {
-    if (u) return;
-    const b = w.current;
-    if (!b) return;
+  const k = j(null), [i, b] = T(!1), c = m !== void 0, d = c ? m : i;
+  return S(() => {
+    if (c) return;
+    const w = k.current;
+    if (!w) return;
     const n = new IntersectionObserver(
-      ([p]) => {
-        p.isIntersecting && setTimeout(() => {
-          v(!0), d == null || d(!0);
-        }, _);
+      ([f]) => {
+        f.isIntersecting && setTimeout(() => {
+          b(!0), u == null || u(!0);
+        }, g);
       },
-      { threshold: g }
+      { threshold: _ }
     );
-    return n.observe(b), () => n.disconnect();
-  }, [u, g, _, d]), /* @__PURE__ */ e(
-    U,
+    return n.observe(w), () => n.disconnect();
+  }, [c, _, g, u]), /* @__PURE__ */ e(
+    Y,
     {
-      ref: w,
+      ref: k,
       radius: 4,
-      className: ge.root,
-      component: B.div,
-      animate: { height: c ? "auto" : y },
+      className: Te.root,
+      component: L.div,
+      animate: { height: d ? "auto" : y },
       transition: { duration: 0.5, ease: "easeOut" },
-      children: /* @__PURE__ */ e("div", { className: ge.inner, children: /* @__PURE__ */ m(F, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
-        /* @__PURE__ */ m(ce, { gap: "xs", style: { flex: 1 }, children: [
-          /* @__PURE__ */ e(N, { fw: 700, size: "xl", lh: 1.3, children: t }),
-          /* @__PURE__ */ e(N, { size: "md", c: "dimmed", children: o }),
+      children: /* @__PURE__ */ e("div", { className: Te.inner, children: /* @__PURE__ */ l(z, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
+        /* @__PURE__ */ l(K, { gap: "xs", style: { flex: 1 }, children: [
+          /* @__PURE__ */ e(v, { fw: 700, size: "xl", lh: 1.3, children: t }),
+          /* @__PURE__ */ e(v, { size: "md", c: "dimmed", children: o }),
           /* @__PURE__ */ e(
-            B.div,
+            L.div,
             {
               initial: { opacity: 0, height: 0 },
               animate: {
-                opacity: c ? 1 : 0,
-                height: c ? "auto" : 0
+                opacity: d ? 1 : 0,
+                height: d ? "auto" : 0
               },
               transition: { duration: 0.4, delay: 0.2 },
               style: { overflow: "hidden" },
-              children: typeof a == "string" ? /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", mt: "sm", children: a }) : a
+              children: typeof a == "string" ? /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "sm", children: a }) : a
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          B.div,
+          L.div,
           {
-            animate: { scale: c ? 1.1 : 1 },
+            animate: { scale: d ? 1.1 : 1 },
             transition: { duration: 0.3 },
-            children: /* @__PURE__ */ e(We, { size: f, radius: 4, color: r, variant: "filled", children: /* @__PURE__ */ e(s, { size: 20, stroke: 1.5 }) })
+            children: /* @__PURE__ */ e(Ae, { size: h, radius: 4, color: s, variant: "filled", children: /* @__PURE__ */ e(r, { size: 20, stroke: 1.5 }) })
           }
         )
       ] }) })
     }
   );
 }
-const Mt = "_root_ho0ln_1", $t = "_visible_ho0ln_7", ye = {
-  root: Mt,
-  visible: $t
+const Pt = "_root_ho0ln_1", Et = "_visible_ho0ln_7", $e = {
+  root: Pt,
+  visible: Et
 };
-function Wn({
+function de({
   children: t,
   delay: o = 0,
   threshold: a = 0.1,
-  className: s,
-  ...r
+  className: r,
+  ...s
 }) {
-  const f = D(null), [y, g] = z(!1);
-  return P(() => {
-    const _ = f.current;
-    if (!_) return;
-    const l = new IntersectionObserver(
-      ([d]) => {
-        d.isIntersecting && (o > 0 ? setTimeout(() => g(!0), o) : g(!0));
+  const h = j(null), [y, _] = T(!1);
+  return S(() => {
+    const g = h.current;
+    if (!g) return;
+    const m = new IntersectionObserver(
+      ([u]) => {
+        u.isIntersecting && (o > 0 ? setTimeout(() => _(!0), o) : _(!0));
       },
       { threshold: a }
     );
-    return l.observe(_), () => l.disconnect();
+    return m.observe(g), () => m.disconnect();
   }, [o, a]), /* @__PURE__ */ e(
-    k,
+    x,
     {
-      ref: f,
-      className: `${ye.root} ${y ? ye.visible : ""} ${s ?? ""}`,
-      ...r,
+      ref: h,
+      className: `${$e.root} ${y ? $e.visible : ""} ${r ?? ""}`,
+      ...s,
       children: t
     }
   );
 }
-function En({ isActive: t = !1, height: o = 60 }) {
-  const a = D(null), s = D(void 0), [r, f] = z(!1), y = D(null), g = D(null), { colorScheme: _ } = Ee(), l = _ === "dark", d = {
-    start: l ? "#7950F2" : "#9775FA",
-    mid: l ? "#BE4BDB" : "#DA77F2",
-    end: l ? "#15AABF" : "#22B8CF"
-  }, w = S(
-    (i, v, u, c) => {
-      i.clearRect(0, 0, v, u);
-      const b = t || r, n = u * 0.65, p = t ? 5 : r ? 7 : 1.5;
-      b && (g.current === null && (g.current = Math.random()), Math.floor(c / 500) !== Math.floor((c - 16) / 500) && (g.current = Math.random()));
-      const I = i.createLinearGradient(0, 0, v, 0);
-      I.addColorStop(0, d.start), I.addColorStop(0.5, d.mid), I.addColorStop(1, d.end), i.strokeStyle = I, i.lineWidth = b ? 2.5 : 1.5, i.lineCap = "round", i.lineJoin = "round", b ? (i.shadowColor = d.mid, i.shadowBlur = r ? 12 : 8) : i.shadowBlur = 0, i.beginPath();
-      const T = 300, R = v / T, A = t ? 0.02 : r ? 0.025 : 3e-3;
-      for (let j = 0; j <= T; j++) {
-        const C = j * R, M = C / v;
-        let E = n;
-        if (b) {
-          const G = Math.sin(M * Math.PI * 6 + c * A) * p, O = Math.sin(M * Math.PI * 12 + c * A * 1.3) * (p * 0.4), H = Math.sin(M * Math.PI * 18 + c * A * 0.8) * (p * 0.2), K = g.current ?? 0.5, h = Math.abs(M - K), x = h < 0.15 ? (1 - h / 0.15) * p * 1 : 0, L = Math.sin(M * Math.PI * 20 + c * A * 2) * x;
-          let X = 0;
-          r && (X = Math.sin(M * Math.PI * 30 + c * 0.03) * p * 0.4, X += Math.sin(M * Math.PI * 8 + c * 0.015) * p * 0.5);
-          const Z = G + O + H + L + X, ee = Math.sin(M * Math.PI);
-          E = n + Z * ee;
+function po({ isActive: t = !1, height: o = 60 }) {
+  const a = j(null), r = j(void 0), [s, h] = T(!1), y = j(null), _ = j(null), { colorScheme: g } = Ge(), m = g === "dark", u = {
+    start: m ? "#7950F2" : "#9775FA",
+    mid: m ? "#BE4BDB" : "#DA77F2",
+    end: m ? "#15AABF" : "#22B8CF"
+  }, k = D(
+    (i, b, c, d) => {
+      i.clearRect(0, 0, b, c);
+      const w = t || s, n = c * 0.65, f = t ? 5 : s ? 7 : 1.5;
+      w && (_.current === null && (_.current = Math.random()), Math.floor(d / 500) !== Math.floor((d - 16) / 500) && (_.current = Math.random()));
+      const N = i.createLinearGradient(0, 0, b, 0);
+      N.addColorStop(0, u.start), N.addColorStop(0.5, u.mid), N.addColorStop(1, u.end), i.strokeStyle = N, i.lineWidth = w ? 2.5 : 1.5, i.lineCap = "round", i.lineJoin = "round", w ? (i.shadowColor = u.mid, i.shadowBlur = s ? 12 : 8) : i.shadowBlur = 0, i.beginPath();
+      const P = 300, q = b / P, O = t ? 0.02 : s ? 0.025 : 3e-3;
+      for (let A = 0; A <= P; A++) {
+        const M = A * q, I = M / b;
+        let F = n;
+        if (w) {
+          const G = Math.sin(I * Math.PI * 6 + d * O) * f, V = Math.sin(I * Math.PI * 12 + d * O * 1.3) * (f * 0.4), H = Math.sin(I * Math.PI * 18 + d * O * 0.8) * (f * 0.2), ee = _.current ?? 0.5, p = Math.abs(I - ee), $ = p < 0.15 ? (1 - p / 0.15) * f * 1 : 0, B = Math.sin(I * Math.PI * 20 + d * O * 2) * $;
+          let J = 0;
+          s && (J = Math.sin(I * Math.PI * 30 + d * 0.03) * f * 0.4, J += Math.sin(I * Math.PI * 8 + d * 0.015) * f * 0.5);
+          const ie = G + V + H + B + J, le = Math.sin(I * Math.PI);
+          F = n + ie * le;
         } else
-          E += Math.sin(M * Math.PI * 2 + c * A) * p;
-        j === 0 ? i.moveTo(C, E) : i.lineTo(C, E);
+          F += Math.sin(I * Math.PI * 2 + d * O) * f;
+        A === 0 ? i.moveTo(M, F) : i.lineTo(M, F);
       }
       if (i.stroke(), t) {
-        const M = v / 80, E = 16;
+        const I = b / 80, F = 16;
         i.shadowBlur = 3;
         for (let G = 0; G < 80; G++) {
-          const O = G * M + M / 2, H = O / v, K = Math.sin(H * Math.PI * 8 + c * 0.025) * 0.5 + Math.sin(H * Math.PI * 14 + c * 0.018) * 0.3 + Math.sin(H * Math.PI * 4 + c * 0.03) * 0.2, h = Math.sin(H * Math.PI), x = Math.abs(K) * E * h, L = i.createLinearGradient(
-            O,
-            n - x / 2,
-            O,
-            n + x / 2
+          const V = G * I + I / 2, H = V / b, ee = Math.sin(H * Math.PI * 8 + d * 0.025) * 0.5 + Math.sin(H * Math.PI * 14 + d * 0.018) * 0.3 + Math.sin(H * Math.PI * 4 + d * 0.03) * 0.2, p = Math.sin(H * Math.PI), $ = Math.abs(ee) * F * p, B = i.createLinearGradient(
+            V,
+            n - $ / 2,
+            V,
+            n + $ / 2
           );
-          L.addColorStop(0, d.start + "90"), L.addColorStop(0.5, d.mid + "70"), L.addColorStop(1, d.end + "50"), i.fillStyle = L, i.fillRect(O - 2 / 2, n - x / 2, 2, x);
+          B.addColorStop(0, u.start + "90"), B.addColorStop(0.5, u.mid + "70"), B.addColorStop(1, u.end + "50"), i.fillStyle = B, i.fillRect(V - 2 / 2, n - $ / 2, 2, $);
         }
       }
-      if (r)
-        for (let C = 0; C < 15; C++) {
-          const M = (Math.sin(c * 1e-3 + C * 1.5) * 0.5 + 0.5) * v, E = n + Math.sin(c * 2e-3 + C) * 8, G = 1.5 + Math.sin(c * 3e-3 + C * 2) * 0.5;
-          i.beginPath(), i.arc(M, E, G, 0, Math.PI * 2), i.fillStyle = C % 2 === 0 ? d.start + "80" : d.end + "80", i.fill();
+      if (s)
+        for (let M = 0; M < 15; M++) {
+          const I = (Math.sin(d * 1e-3 + M * 1.5) * 0.5 + 0.5) * b, F = n + Math.sin(d * 2e-3 + M) * 8, G = 1.5 + Math.sin(d * 3e-3 + M * 2) * 0.5;
+          i.beginPath(), i.arc(I, F, G, 0, Math.PI * 2), i.fillStyle = M % 2 === 0 ? u.start + "80" : u.end + "80", i.fill();
         }
     },
-    [t, r, d.start, d.mid, d.end]
+    [t, s, u.start, u.mid, u.end]
   );
-  return P(() => {
+  return S(() => {
     const i = a.current;
     if (!i) return;
-    const v = i.getContext("2d");
-    if (!v) return;
-    const u = () => {
-      const n = window.devicePixelRatio || 1, p = i.getBoundingClientRect();
-      i.width = p.width * n, i.height = p.height * n, v.scale(n, n);
+    const b = i.getContext("2d");
+    if (!b) return;
+    const c = () => {
+      const n = window.devicePixelRatio || 1, f = i.getBoundingClientRect();
+      i.width = f.width * n, i.height = f.height * n, b.scale(n, n);
     };
-    u(), window.addEventListener("resize", u);
-    const c = performance.now(), b = (n) => {
-      const p = n - c, I = i.getBoundingClientRect();
-      w(v, I.width, I.height, p), s.current = requestAnimationFrame(b);
+    c(), window.addEventListener("resize", c);
+    const d = performance.now(), w = (n) => {
+      const f = n - d, N = i.getBoundingClientRect();
+      k(b, N.width, N.height, f), r.current = requestAnimationFrame(w);
     };
-    return s.current = requestAnimationFrame(b), () => {
-      window.removeEventListener("resize", u), s.current && cancelAnimationFrame(s.current);
+    return r.current = requestAnimationFrame(w), () => {
+      window.removeEventListener("resize", c), r.current && cancelAnimationFrame(r.current);
     };
-  }, [w]), P(() => {
+  }, [k]), S(() => {
     if (t) {
-      queueMicrotask(() => f(!1)), y.current = Date.now();
+      queueMicrotask(() => h(!1)), y.current = Date.now();
       return;
     }
-    const v = setInterval(() => {
-      const u = Date.now();
-      y.current === null && (y.current = u);
-      const c = u - y.current, b = 12e4 + Math.random() * 6e4;
-      c >= b && !r && (f(!0), y.current = u, setTimeout(() => f(!1), 4e3));
+    const b = setInterval(() => {
+      const c = Date.now();
+      y.current === null && (y.current = c);
+      const d = c - y.current, w = 12e4 + Math.random() * 6e4;
+      d >= w && !s && (h(!0), y.current = c, setTimeout(() => h(!1), 4e3));
     }, 5e3);
-    return () => clearInterval(v);
-  }, [t, r]), /* @__PURE__ */ e(
-    k,
+    return () => clearInterval(b);
+  }, [t, s]), /* @__PURE__ */ e(
+    x,
     {
       style: {
         position: "relative",
@@ -674,7 +675,7 @@ function En({ isActive: t = !1, height: o = 60 }) {
         height: o,
         overflow: "hidden",
         pointerEvents: "none",
-        opacity: l ? 1 : 0.8
+        opacity: m ? 1 : 0.8
       },
       children: /* @__PURE__ */ e(
         "canvas",
@@ -690,19 +691,19 @@ function En({ isActive: t = !1, height: o = 60 }) {
     }
   );
 }
-const Ct = "_root_9li00_1", kt = "_preview_9li00_11", Lt = "_info_9li00_15", ie = {
-  root: Ct,
-  preview: kt,
-  info: Lt
+const Ft = "_root_9li00_1", Wt = "_preview_9li00_11", jt = "_info_9li00_15", pe = {
+  root: Ft,
+  preview: Wt,
+  info: jt
 };
-function Dn({ name: t, colors: o, description: a }) {
-  const s = `linear-gradient(135deg, ${o[0]} 0%, ${o[1]} 100%)`;
-  return /* @__PURE__ */ e(de, { value: s, children: /* @__PURE__ */ m(U, { className: ie.root, shadow: "lg", radius: "md", children: [
-    /* @__PURE__ */ e("div", { className: ie.preview, style: { background: s } }),
-    /* @__PURE__ */ m("div", { className: ie.info, children: [
-      /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: t }),
-      a && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: a }),
-      /* @__PURE__ */ m(N, { size: "xs", c: "dimmed", ff: "monospace", children: [
+function fo({ name: t, colors: o, description: a }) {
+  const r = `linear-gradient(135deg, ${o[0]} 0%, ${o[1]} 100%)`;
+  return /* @__PURE__ */ e(ue, { value: r, children: /* @__PURE__ */ l(Y, { className: pe.root, shadow: "lg", radius: "md", children: [
+    /* @__PURE__ */ e("div", { className: pe.preview, style: { background: r } }),
+    /* @__PURE__ */ l("div", { className: pe.info, children: [
+      /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: t }),
+      a && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: a }),
+      /* @__PURE__ */ l(v, { size: "xs", c: "dimmed", ff: "monospace", children: [
         o[0],
         " → ",
         o[1]
@@ -710,167 +711,167 @@ function Dn({ name: t, colors: o, description: a }) {
     ] })
   ] }) });
 }
-const Bt = "_root_1vlvy_1", St = "_video_1vlvy_9", be = {
-  root: Bt,
-  video: St
+const At = "_root_1vlvy_1", Gt = "_video_1vlvy_9", Ie = {
+  root: At,
+  video: Gt
 };
-function Tt({ src: t, opacity: o = 0.3 }) {
-  return /* @__PURE__ */ e("div", { className: be.root, style: { opacity: o }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: be.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
+function Rt({ src: t, opacity: o = 0.3 }) {
+  return /* @__PURE__ */ e("div", { className: Ie.root, style: { opacity: o }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: Ie.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
 }
-const Pt = "_root_1suaa_1", Wt = "_content_1suaa_8", Et = "_label_1suaa_21", Dt = "_vignette_1suaa_37", Ft = "_logoWrapper_1suaa_50", jt = "_logo_1suaa_50", Gt = "_glow_1suaa_73", Rt = "_textWrapper_1suaa_85", At = "_heading_1suaa_91", Ot = "_shimmer_1suaa_125", Ht = "_tagline_1suaa_129", Vt = "_primaryButton_1suaa_143", qt = "_secondaryButton_1suaa_148", Ut = "_scrollIndicator_1suaa_160", Xt = "_scrollLabel_1suaa_171", Yt = "_scrollLine_1suaa_179", $ = {
-  root: Pt,
-  content: Wt,
-  label: Et,
-  vignette: Dt,
-  logoWrapper: Ft,
-  logo: jt,
-  glow: Gt,
-  textWrapper: Rt,
-  heading: At,
-  shimmer: Ot,
-  tagline: Ht,
-  primaryButton: Vt,
-  secondaryButton: qt,
-  scrollIndicator: Ut,
-  scrollLabel: Xt,
-  scrollLine: Yt
+const qt = "_root_h15rs_1", Ot = "_content_h15rs_8", Vt = "_label_h15rs_21", Ht = "_vignette_h15rs_38", Ut = "_logoWrapper_h15rs_51", Xt = "_logo_h15rs_51", Yt = "_glow_h15rs_74", Kt = "_textWrapper_h15rs_86", Jt = "_heading_h15rs_92", Qt = "_shimmer_h15rs_126", Zt = "_tagline_h15rs_130", en = "_primaryButton_h15rs_146", tn = "_secondaryButton_h15rs_157", nn = "_scrollIndicator_h15rs_173", on = "_scrollLabel_h15rs_184", rn = "_scrollLine_h15rs_192", C = {
+  root: qt,
+  content: Ot,
+  label: Vt,
+  vignette: Ht,
+  logoWrapper: Ut,
+  logo: Xt,
+  glow: Yt,
+  textWrapper: Kt,
+  heading: Jt,
+  shimmer: Qt,
+  tagline: Zt,
+  primaryButton: en,
+  secondaryButton: tn,
+  scrollIndicator: nn,
+  scrollLabel: on,
+  scrollLine: rn
 };
-function Fn({
+function _o({
   variant: t = "logo",
   heading: o,
   label: a,
-  tagline: s,
-  logoSrc: r = qe,
-  gradient: f = "frequencyAlive",
+  tagline: r,
+  logoSrc: s = tt,
+  gradient: h = "frequencyAlive",
   shimmer: y = !0,
-  primaryAction: g,
-  secondaryAction: _,
-  backgroundVideoSrc: l,
-  showWaveform: d,
-  showScrollIndicator: w = !1
+  primaryAction: _,
+  secondaryAction: g,
+  backgroundVideoSrc: m,
+  showWaveform: u,
+  showScrollIndicator: k = !1
 }) {
-  const [i, v] = z(!1), u = typeof r == "string" ? r : r == null ? void 0 : r.src, c = o ?? (t === "text" ? "Your Message" : void 0), b = a || (t === "logo" ? "Welcome" : void 0), n = g || _, p = d ?? !0, I = Ue[f];
-  return P(() => {
-    v(!0);
-  }, []), /* @__PURE__ */ m(k, { component: "section", className: $.root, children: [
-    l && /* @__PURE__ */ e(Tt, { src: l }),
-    /* @__PURE__ */ m("div", { className: $.content, children: [
-      i && /* @__PURE__ */ m(ze, { children: [
-        b && /* @__PURE__ */ e(
-          B.p,
+  const [i, b] = T(!1), c = typeof s == "string" ? s : s == null ? void 0 : s.src, d = o ?? (t === "text" ? "Your Message" : void 0), w = a || (t === "logo" ? "Welcome" : void 0), n = _ || g, f = u ?? !0, N = nt[h];
+  return S(() => {
+    b(!0);
+  }, []), /* @__PURE__ */ l(x, { component: "section", className: C.root, children: [
+    m && /* @__PURE__ */ e(Rt, { src: m }),
+    /* @__PURE__ */ l("div", { className: C.content, children: [
+      i && /* @__PURE__ */ l(Le, { children: [
+        w && /* @__PURE__ */ e(
+          L.p,
           {
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             transition: { duration: 0.8, delay: 0.2 },
-            className: $.label,
-            children: b
+            className: C.label,
+            children: w
           }
         ),
-        t === "logo" && /* @__PURE__ */ m(
-          B.div,
+        t === "logo" && /* @__PURE__ */ l(
+          L.div,
           {
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
-            className: $.logoWrapper,
+            className: C.logoWrapper,
             children: [
-              p && /* @__PURE__ */ e(fe, {}),
-              p && /* @__PURE__ */ e("div", { className: $.vignette }),
+              f && /* @__PURE__ */ e(we, {}),
+              f && /* @__PURE__ */ e("div", { className: C.vignette }),
               /* @__PURE__ */ e(
-                B.img,
+                L.img,
                 {
-                  src: u,
-                  alt: c ?? "Frequency",
-                  className: $.logo,
+                  src: c,
+                  alt: d ?? "Frequency",
+                  className: C.logo,
                   animate: { rotate: [0, 0.5, -0.5, 0] },
                   transition: { duration: 8, repeat: 1 / 0, ease: "easeInOut" }
                 }
               ),
-              /* @__PURE__ */ e("div", { className: $.glow })
+              /* @__PURE__ */ e("div", { className: C.glow })
             ]
           }
         ),
-        t === "text" && c && /* @__PURE__ */ m(
-          B.div,
+        t === "text" && d && /* @__PURE__ */ l(
+          L.div,
           {
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
-            className: $.textWrapper,
+            className: C.textWrapper,
             children: [
-              p && /* @__PURE__ */ e(fe, {}),
-              p && /* @__PURE__ */ e("div", { className: $.vignette }),
+              f && /* @__PURE__ */ e(we, {}),
+              f && /* @__PURE__ */ e("div", { className: C.vignette }),
               /* @__PURE__ */ e(
-                oe,
+                se,
                 {
                   order: 1,
-                  className: `${$.heading} ${y ? $.shimmer : ""}`,
+                  className: `${C.heading} ${y ? C.shimmer : ""}`,
                   style: {
-                    backgroundImage: `linear-gradient(135deg, ${I.from}, ${I.to}, ${I.from})`,
+                    backgroundImage: `linear-gradient(135deg, ${N.from}, ${N.to}, ${N.from})`,
                     backgroundSize: y ? "200% 100%" : void 0
                   },
-                  children: c
+                  children: d
                 }
               )
             ]
           }
         ),
-        s && /* @__PURE__ */ e(
-          B.div,
+        r && /* @__PURE__ */ e(
+          L.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.8, delay: 0.7 },
-            children: /* @__PURE__ */ e(N, { className: $.tagline, children: s })
+            children: /* @__PURE__ */ e(v, { className: C.tagline, children: r })
           }
         ),
         n && /* @__PURE__ */ e(
-          B.div,
+          L.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.8, delay: 0.9 },
-            children: /* @__PURE__ */ m(F, { gap: "md", justify: "center", wrap: "wrap", children: [
-              g && /* @__PURE__ */ e(
+            children: /* @__PURE__ */ l(z, { gap: "xl", justify: "center", wrap: "wrap", children: [
+              _ && /* @__PURE__ */ e(
                 re,
                 {
                   component: "a",
-                  href: g.href,
+                  href: _.href,
                   size: "lg",
                   radius: 4,
-                  className: $.primaryButton,
-                  children: g.label
+                  className: C.primaryButton,
+                  children: _.label
                 }
               ),
-              _ && /* @__PURE__ */ e(
+              g && /* @__PURE__ */ e(
                 re,
                 {
                   component: "a",
-                  href: _.href,
+                  href: g.href,
                   size: "lg",
                   radius: 4,
                   variant: "outline",
-                  className: $.secondaryButton,
-                  children: _.label
+                  className: C.secondaryButton,
+                  children: g.label
                 }
               )
             ] })
           }
         )
       ] }),
-      i && w && /* @__PURE__ */ m(
-        B.div,
+      i && k && /* @__PURE__ */ l(
+        L.div,
         {
-          className: $.scrollIndicator,
+          className: C.scrollIndicator,
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           transition: { duration: 1, delay: 1.4 },
           children: [
-            /* @__PURE__ */ e("span", { className: $.scrollLabel, children: "Scroll" }),
+            /* @__PURE__ */ e("span", { className: C.scrollLabel, children: "Scroll" }),
             /* @__PURE__ */ e(
-              B.div,
+              L.div,
               {
-                className: $.scrollLine,
+                className: C.scrollLine,
                 animate: { scaleY: [1, 1.5, 1] },
                 transition: { duration: 1.5, repeat: 1 / 0 }
               }
@@ -881,10 +882,10 @@ function Fn({
     ] })
   ] });
 }
-function we({ variant: t, children: o }) {
+function Ce({ variant: t, children: o }) {
   const a = t === "do";
-  return /* @__PURE__ */ m(
-    $e,
+  return /* @__PURE__ */ l(
+    Be,
     {
       variant: "light",
       color: a ? "green" : "red",
@@ -895,7 +896,7 @@ function we({ variant: t, children: o }) {
         label: { whiteSpace: "normal", lineHeight: 1.4 }
       },
       children: [
-        /* @__PURE__ */ m("strong", { children: [
+        /* @__PURE__ */ l("strong", { children: [
           a ? "Do" : "Don't",
           ":"
         ] }),
@@ -905,77 +906,77 @@ function we({ variant: t, children: o }) {
     }
   );
 }
-const Kt = "_root_13w21_1", Jt = "_playButton_13w21_11", Ne = {
-  root: Kt,
-  playButton: Jt
-}, Qt = {
+const an = "_root_13w21_1", sn = "_playButton_13w21_11", ze = {
+  root: an,
+  playButton: sn
+}, ln = {
   mini: { height: 24, buttonSize: 20, iconSize: 14, waveHeight: 16, barWidth: 1, barGap: 0 },
   small: { height: 32, buttonSize: 28, iconSize: 16, waveHeight: 20, barWidth: 1, barGap: 0 },
   compact: { height: 40, buttonSize: 32, iconSize: 18, waveHeight: 24, barWidth: 2, barGap: 1 }
-}, Zt = xe(
+}, cn = De(
   ({
     audioUrl: t,
     size: o = "mini",
     waveColor: a = "#CCCCCC",
-    progressColor: s = "#169bde",
-    onPlay: r,
-    onPause: f,
+    progressColor: r = "#169bde",
+    onPlay: s,
+    onPause: h,
     className: y,
-    style: g
-  }, _) => {
-    const l = D(null), [d, w] = z(!1), [i, v] = z(0), u = Qt[o];
-    P(() => {
-      const n = l.current;
+    style: _
+  }, g) => {
+    const m = j(null), [u, k] = T(!1), [i, b] = T(0), c = ln[o];
+    S(() => {
+      const n = m.current;
       if (!n) return;
-      const p = () => v(n.currentTime), I = () => {
-        w(!1), v(0);
-      }, T = () => w(!1), R = () => w(!0);
-      return n.addEventListener("timeupdate", p), n.addEventListener("ended", I), n.addEventListener("pause", T), n.addEventListener("play", R), () => {
-        n.removeEventListener("timeupdate", p), n.removeEventListener("ended", I), n.removeEventListener("pause", T), n.removeEventListener("play", R);
+      const f = () => b(n.currentTime), N = () => {
+        k(!1), b(0);
+      }, P = () => k(!1), q = () => k(!0);
+      return n.addEventListener("timeupdate", f), n.addEventListener("ended", N), n.addEventListener("pause", P), n.addEventListener("play", q), () => {
+        n.removeEventListener("timeupdate", f), n.removeEventListener("ended", N), n.removeEventListener("pause", P), n.removeEventListener("play", q);
       };
     }, [t]);
-    const c = S(() => {
-      const n = l.current;
-      n && (d ? (n.pause(), f == null || f()) : (n.play().catch(() => {
-      }), r == null || r()));
-    }, [d, r, f]), b = S((n) => {
-      const p = l.current;
-      p && !isNaN(n) && isFinite(n) && (p.currentTime = n, v(n));
+    const d = D(() => {
+      const n = m.current;
+      n && (u ? (n.pause(), h == null || h()) : (n.play().catch(() => {
+      }), s == null || s()));
+    }, [u, s, h]), w = D((n) => {
+      const f = m.current;
+      f && !isNaN(n) && isFinite(n) && (f.currentTime = n, b(n));
     }, []);
-    return /* @__PURE__ */ m(
-      F,
+    return /* @__PURE__ */ l(
+      z,
       {
-        ref: _,
+        ref: g,
         gap: o === "mini" ? 6 : o === "small" ? 8 : 10,
         wrap: "nowrap",
-        className: `${Ne.root} ${y ?? ""}`,
-        style: { height: u.height, ...g },
+        className: `${ze.root} ${y ?? ""}`,
+        style: { height: c.height, ..._ },
         children: [
-          /* @__PURE__ */ e("audio", { ref: l, src: t, preload: "metadata" }),
+          /* @__PURE__ */ e("audio", { ref: m, src: t, preload: "metadata" }),
           /* @__PURE__ */ e(
-            Y,
+            Z,
             {
               variant: "filled",
               color: "blue",
               radius: "xl",
-              size: u.buttonSize,
-              onClick: c,
-              "aria-label": d ? "Pause" : "Play",
-              className: Ne.playButton,
-              children: d ? /* @__PURE__ */ e(Ce, { size: u.iconSize }) : /* @__PURE__ */ e(ke, { size: u.iconSize })
+              size: c.buttonSize,
+              onClick: d,
+              "aria-label": u ? "Pause" : "Play",
+              className: ze.playButton,
+              children: u ? /* @__PURE__ */ e(Se, { size: c.iconSize }) : /* @__PURE__ */ e(Pe, { size: c.iconSize })
             }
           ),
-          /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
-            le,
+          /* @__PURE__ */ e(x, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
+            fe,
             {
-              audioRef: l,
+              audioRef: m,
               currentTime: i,
-              onSeek: b,
+              onSeek: w,
               waveColor: a,
-              progressColor: s,
-              height: u.waveHeight,
-              barWidth: u.barWidth,
-              barGap: u.barGap
+              progressColor: r,
+              height: c.waveHeight,
+              barWidth: c.barWidth,
+              barGap: c.barGap
             }
           ) })
         ]
@@ -983,88 +984,88 @@ const Kt = "_root_13w21_1", Jt = "_playButton_13w21_11", Ne = {
     );
   }
 );
-Zt.displayName = "MiniAudioPlayer";
-const en = "_root_1bah1_1", tn = {
-  root: en
+cn.displayName = "MiniAudioPlayer";
+const dn = "_root_1bah1_1", mn = {
+  root: dn
 };
-function jn({
+function bo({
   accentColor: t,
   title: o,
   description: a,
-  doHint: s,
-  dontHint: r
+  doHint: r,
+  dontHint: s
 }) {
-  return /* @__PURE__ */ m(
-    U,
+  return /* @__PURE__ */ l(
+    Y,
     {
-      className: tn.root,
+      className: mn.root,
       p: "lg",
       radius: "md",
       style: { borderLeftColor: t },
       children: [
-        /* @__PURE__ */ e(oe, { order: 3, size: "h4", mb: "xs", children: o }),
-        /* @__PURE__ */ e(N, { c: "dimmed", children: a }),
-        (s || r) && /* @__PURE__ */ m(F, { gap: "sm", mt: "md", wrap: "wrap", children: [
-          s && /* @__PURE__ */ e(we, { variant: "do", children: s }),
-          r && /* @__PURE__ */ e(we, { variant: "dont", children: r })
+        /* @__PURE__ */ e(se, { order: 3, size: "h4", mb: "xs", children: o }),
+        /* @__PURE__ */ e(v, { c: "dimmed", children: a }),
+        (r || s) && /* @__PURE__ */ l(z, { gap: "sm", mt: "md", wrap: "wrap", children: [
+          r && /* @__PURE__ */ e(Ce, { variant: "do", children: r }),
+          s && /* @__PURE__ */ e(Ce, { variant: "dont", children: s })
         ] })
       ]
     }
   );
 }
-const nn = "_root_ydu7j_1", on = "_actions_ydu7j_22", sn = "_fab_ydu7j_43", an = "_actionButton_ydu7j_61", ne = {
-  root: nn,
-  actions: on,
-  fab: sn,
-  actionButton: an
+const un = "_root_ydu7j_1", hn = "_actions_ydu7j_22", gn = "_fab_ydu7j_43", pn = "_actionButton_ydu7j_61", me = {
+  root: un,
+  actions: hn,
+  fab: gn,
+  actionButton: pn
 };
-function Gn({
+function vo({
   actions: t,
   icon: o,
   openIcon: a,
-  direction: s = "up",
-  color: r = "blue",
-  size: f = 56,
+  direction: r = "up",
+  color: s = "blue",
+  size: h = 56,
   defaultOpen: y = !1,
-  open: g,
-  onOpenChange: _,
-  style: l,
-  className: d
+  open: _,
+  onOpenChange: g,
+  style: m,
+  className: u
 }) {
-  const [w, i] = z(y), v = g ?? w, u = S(() => {
-    const n = !v;
-    i(n), _ == null || _(n);
-  }, [v, _]), c = S(() => {
-    i(!1), _ == null || _(!1);
-  }, [_]), b = s === "up" || s === "down";
-  return /* @__PURE__ */ m(
-    k,
+  const [k, i] = T(y), b = _ ?? k, c = D(() => {
+    const n = !b;
+    i(n), g == null || g(n);
+  }, [b, g]), d = D(() => {
+    i(!1), g == null || g(!1);
+  }, [g]), w = r === "up" || r === "down";
+  return /* @__PURE__ */ l(
+    x,
     {
-      className: `${ne.root} ${d ?? ""}`,
-      style: l,
-      "data-direction": s,
+      className: `${me.root} ${u ?? ""}`,
+      style: m,
+      "data-direction": r,
       children: [
-        /* @__PURE__ */ e("div", { className: ne.actions, "data-direction": s, children: t.map((n, p) => {
-          const I = s === "up" || s === "left" ? t.length - 1 - p : p;
+        /* @__PURE__ */ e("div", { className: me.actions, "data-direction": r, children: t.map((n, f) => {
+          const N = r === "up" || r === "left" ? t.length - 1 - f : f;
           return /* @__PURE__ */ e(
-            De,
+            Re,
             {
-              mounted: v,
-              transition: b ? "slide-up" : "slide-right",
+              mounted: b,
+              transition: w ? "slide-up" : "slide-right",
               duration: 200,
               timingFunction: "ease",
-              enterDelay: I * 40,
-              children: (T) => /* @__PURE__ */ e(Fe, { label: n.label, position: b ? "left" : "top", children: /* @__PURE__ */ e(
-                Y,
+              enterDelay: N * 40,
+              children: (P) => /* @__PURE__ */ e(qe, { label: n.label, position: w ? "left" : "top", children: /* @__PURE__ */ e(
+                Z,
                 {
                   variant: "filled",
                   color: "gray",
                   radius: "xl",
-                  size: f * 0.7,
-                  style: T,
-                  className: ne.actionButton,
+                  size: h * 0.7,
+                  style: P,
+                  className: me.actionButton,
                   onClick: () => {
-                    n.onClick(), c();
+                    n.onClick(), d();
                   },
                   "aria-label": n.label,
                   children: n.icon
@@ -1075,57 +1076,57 @@ function Gn({
           );
         }) }),
         /* @__PURE__ */ e(
-          Y,
+          Z,
           {
             variant: "filled",
-            color: r,
+            color: s,
             radius: "xl",
-            size: f,
-            onClick: u,
-            className: ne.fab,
-            "data-open": v || void 0,
-            "aria-label": v ? "Close actions" : "Open actions",
-            children: v ? a ?? o ?? /* @__PURE__ */ e(ue, { size: f * 0.45 }) : o ?? /* @__PURE__ */ e(ue, { size: f * 0.45 })
+            size: h,
+            onClick: c,
+            className: me.fab,
+            "data-open": b || void 0,
+            "aria-label": b ? "Close actions" : "Open actions",
+            children: b ? a ?? o ?? /* @__PURE__ */ e(be, { size: h * 0.45 }) : o ?? /* @__PURE__ */ e(be, { size: h * 0.45 })
           }
         )
       ]
     }
   );
 }
-const rn = "_container_9xj91_1", cn = "_layout_9xj91_16", ln = "_reversed_9xj91_29", dn = "_headingSide_9xj91_39", un = "_sticky_9xj91_49", mn = "_stickyInner_9xj91_54", hn = "_contentSide_9xj91_65", pn = "_title_9xj91_76", fn = "_preTitle_9xj91_82", _n = "_titleHighlight_9xj91_88", vn = "_description_9xj91_95", W = {
-  container: rn,
-  layout: cn,
-  reversed: ln,
-  headingSide: dn,
-  sticky: un,
-  stickyInner: mn,
-  contentSide: hn,
-  title: pn,
-  preTitle: fn,
-  titleHighlight: _n,
-  description: vn
+const fn = "_container_9xj91_1", _n = "_layout_9xj91_16", bn = "_reversed_9xj91_29", vn = "_headingSide_9xj91_39", yn = "_sticky_9xj91_49", kn = "_stickyInner_9xj91_54", wn = "_contentSide_9xj91_65", xn = "_title_9xj91_76", Nn = "_preTitle_9xj91_82", Tn = "_titleHighlight_9xj91_88", $n = "_description_9xj91_95", E = {
+  container: fn,
+  layout: _n,
+  reversed: bn,
+  headingSide: vn,
+  sticky: yn,
+  stickyInner: kn,
+  contentSide: wn,
+  title: xn,
+  preTitle: Nn,
+  titleHighlight: Tn,
+  description: $n
 };
-function Rn({
+function yo({
   badge: t,
   badgeColor: o = "violet",
   subtitle: a,
-  title: s,
-  titleColor: r = "blue",
-  preTitle: f,
+  title: r,
+  titleColor: s = "blue",
+  preTitle: h,
   description: y,
-  actions: g,
-  heading: _,
-  children: l,
-  stickyHeading: d = !1,
-  py: w,
+  actions: _,
+  heading: g,
+  children: m,
+  stickyHeading: u = !1,
+  py: k,
   reversed: i = !1,
-  id: v,
-  className: u
+  id: b,
+  className: c
 }) {
-  const c = _ ?? /* @__PURE__ */ m(ce, { gap: "sm", children: [
-    t && /* @__PURE__ */ m(k, { children: [
+  const d = g ?? /* @__PURE__ */ l(K, { gap: "sm", children: [
+    t && /* @__PURE__ */ l(x, { children: [
       /* @__PURE__ */ e(
-        $e,
+        Be,
         {
           color: o,
           variant: "filled",
@@ -1136,95 +1137,377 @@ function Rn({
           children: t
         }
       ),
-      a && /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a })
+      a && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a })
     ] }),
-    !t && a && /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a }),
-    (f || s) && /* @__PURE__ */ m(oe, { order: 2, className: W.title, children: [
-      f && /* @__PURE__ */ e("span", { className: W.preTitle, children: f }),
-      f && /* @__PURE__ */ e("br", {}),
-      s && /* @__PURE__ */ e(
-        N,
+    !t && a && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a }),
+    (h || r) && /* @__PURE__ */ l(se, { order: 2, className: E.title, children: [
+      h && /* @__PURE__ */ e("span", { className: E.preTitle, children: h }),
+      h && /* @__PURE__ */ e("br", {}),
+      r && /* @__PURE__ */ e(
+        v,
         {
           component: "span",
           inherit: !0,
-          className: W.titleHighlight,
-          c: r,
-          children: s
+          className: E.titleHighlight,
+          c: s,
+          children: r
         }
       )
     ] }),
-    y && /* @__PURE__ */ e(N, { size: "lg", c: "dimmed", lh: 1.7, className: W.description, children: y }),
-    g && /* @__PURE__ */ e(k, { mt: "md", children: g })
+    y && /* @__PURE__ */ e(v, { size: "lg", c: "dimmed", lh: 1.7, className: E.description, children: y }),
+    _ && /* @__PURE__ */ e(x, { mt: "md", children: _ })
   ] });
   return /* @__PURE__ */ e(
-    k,
+    x,
     {
       component: "section",
-      py: w ?? "calc(var(--mantine-spacing-xl) * 3)",
+      py: k ?? "calc(var(--mantine-spacing-xl) * 3)",
       pos: "relative",
-      id: v,
-      className: u,
-      children: /* @__PURE__ */ e(k, { className: W.container, children: /* @__PURE__ */ m(k, { className: `${W.layout} ${i ? W.reversed : ""}`, children: [
+      id: b,
+      className: c,
+      children: /* @__PURE__ */ e(x, { className: E.container, children: /* @__PURE__ */ l(x, { className: `${E.layout} ${i ? E.reversed : ""}`, children: [
         /* @__PURE__ */ e(
-          k,
+          x,
           {
-            className: `${W.headingSide} ${d ? W.sticky : ""}`,
-            children: /* @__PURE__ */ e(k, { className: d ? W.stickyInner : void 0, children: c })
+            className: `${E.headingSide} ${u ? E.sticky : ""}`,
+            children: /* @__PURE__ */ e(x, { className: u ? E.stickyInner : void 0, children: d })
           }
         ),
-        /* @__PURE__ */ e(k, { className: W.contentSide, children: l })
+        /* @__PURE__ */ e(x, { className: E.contentSide, children: m })
       ] }) })
     }
   );
 }
-const gn = "_root_ioshc_1", yn = "_quoteIcon_ioshc_6", Ie = {
-  root: gn,
-  quoteIcon: yn
+const In = "_root_ioshc_1", Cn = "_quoteIcon_ioshc_6", Me = {
+  root: In,
+  quoteIcon: Cn
 };
-function bn(t) {
+function zn(t) {
   return t.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2);
 }
-function An({
+function ko({
   quote: t,
   name: o,
   role: a,
-  company: s,
-  avatarSrc: r,
-  accentColor: f = "blue"
+  company: r,
+  avatarSrc: s,
+  accentColor: h = "blue"
 }) {
-  const y = `var(--mantine-color-${f}-filled)`;
-  return /* @__PURE__ */ m(U, { className: Ie.root, p: "lg", radius: "md", style: { borderLeftColor: y }, children: [
-    /* @__PURE__ */ e(Ve, { size: 32, className: Ie.quoteIcon, color: y }),
-    /* @__PURE__ */ e(N, { fs: "italic", mt: "xs", mb: "md", children: t }),
-    /* @__PURE__ */ m(F, { gap: "sm", children: [
-      /* @__PURE__ */ e(je, { src: r, alt: o, color: f, radius: "xl", size: "md", children: bn(o) }),
-      /* @__PURE__ */ m(ce, { gap: 0, children: [
-        /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: o }),
-        (a || s) && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: [a, s].filter(Boolean).join(", ") })
+  const y = `var(--mantine-color-${h}-filled)`;
+  return /* @__PURE__ */ l(Y, { className: Me.root, p: "lg", radius: "md", style: { borderLeftColor: y }, children: [
+    /* @__PURE__ */ e(et, { size: 32, className: Me.quoteIcon, color: y }),
+    /* @__PURE__ */ e(v, { fs: "italic", mt: "xs", mb: "md", children: t }),
+    /* @__PURE__ */ l(z, { gap: "sm", children: [
+      /* @__PURE__ */ e(Oe, { src: s, alt: o, color: h, radius: "xl", size: "md", children: zn(o) }),
+      /* @__PURE__ */ l(K, { gap: 0, children: [
+        /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: o }),
+        (a || r) && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: [a, r].filter(Boolean).join(", ") })
       ] })
     ] })
   ] });
 }
+const Mn = "_root_1bo86_1", Bn = "_label_1bo86_6", Ln = "_title_1bo86_11", Dn = "_description_1bo86_17", Sn = "_logoCard_1bo86_22", Q = {
+  root: Mn,
+  label: Bn,
+  title: Ln,
+  description: Dn,
+  logoCard: Sn
+};
+function wo({
+  title: t = "Our Logos",
+  label: o = "Identity",
+  description: a = "The Frequency identity comes in two forms — the horizontal textmark for standard use and the circular brand mark for compact spaces and hero moments."
+}) {
+  return /* @__PURE__ */ e("section", { className: Q.root, children: /* @__PURE__ */ l(Ve, { size: "xl", children: [
+    /* @__PURE__ */ l(de, { children: [
+      /* @__PURE__ */ e(v, { className: Q.label, size: "xs", tt: "uppercase", c: "blue.5", mb: "xs", children: o }),
+      /* @__PURE__ */ e(se, { order: 2, className: Q.title, mb: "lg", children: t }),
+      /* @__PURE__ */ e(v, { className: Q.description, size: "lg", c: "gray.6", mb: 60, maw: 600, children: a })
+    ] }),
+    /* @__PURE__ */ l(ae, { cols: { base: 1, lg: 2 }, spacing: 32, mb: 48, children: [
+      /* @__PURE__ */ e(de, { delay: 100, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Q.logoCard, children: /* @__PURE__ */ l(K, { gap: 0, children: [
+        /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "white", h: 240, children: /* @__PURE__ */ e(
+          te,
+          {
+            src: "/images/Frequency_logo-light.png",
+            alt: "Frequency textmark on light",
+            h: 48,
+            fit: "contain"
+          }
+        ) }),
+        /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "gray.9", h: 240, children: /* @__PURE__ */ e(
+          te,
+          {
+            src: "/images/Frequency_logo-dark.png",
+            alt: "Frequency textmark on dark",
+            h: 48,
+            fit: "contain"
+          }
+        ) }),
+        /* @__PURE__ */ e(x, { p: "md", bg: "gray.1", children: /* @__PURE__ */ e(v, { size: "sm", c: "gray.6", fw: 600, ff: "Montserrat, sans-serif", children: "Primary Textmark" }) })
+      ] }) }) }),
+      /* @__PURE__ */ e(de, { delay: 200, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Q.logoCard, children: /* @__PURE__ */ l(K, { gap: 0, children: [
+        /* @__PURE__ */ l(ae, { cols: 3, children: [
+          /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "white", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
+            te,
+            {
+              src: "/images/new-frequency-logo.png",
+              alt: "Brand mark on light",
+              w: 80,
+              h: 80,
+              fit: "contain"
+            }
+          ) }),
+          /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "gray.9", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
+            te,
+            {
+              src: "/images/frequency-mark-white.svg",
+              alt: "Brand mark on dark",
+              w: 80,
+              h: 80,
+              fit: "contain"
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              justify: "center",
+              align: "center",
+              style: {
+                aspectRatio: "1/1",
+                background: "linear-gradient(135deg, #169BDE 0%, #7E57C2 100%)"
+              },
+              children: /* @__PURE__ */ e(
+                te,
+                {
+                  src: "/images/frequency-mark-white.svg",
+                  alt: "Brand mark on gradient",
+                  w: 80,
+                  h: 80,
+                  fit: "contain"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(x, { p: "md", bg: "gray.1", children: /* @__PURE__ */ e(v, { size: "sm", c: "gray.6", fw: 600, ff: "Montserrat, sans-serif", children: "Circular Brand Mark" }) })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ e(de, { delay: 300, children: /* @__PURE__ */ l(
+      He,
+      {
+        href: "/logos",
+        fw: 600,
+        c: "blue.5",
+        underline: "hover",
+        style: { display: "flex", alignItems: "center", gap: 8 },
+        children: [
+          "View all logo variants and usage rules",
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "w-4 h-4",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M17 8l4 4m0 0l-4 4m4-4H3" })
+            }
+          )
+        ]
+      }
+    ) })
+  ] }) });
+}
+const Pn = "_toggle_1nlbe_1", En = "_toggleTrack_1nlbe_7", Fn = "_toggleTrackDark_1nlbe_16", Wn = "_toggleThumb_1nlbe_20", jn = "_toggleThumbDark_1nlbe_32", An = "_card_1nlbe_36", Gn = "_preview_1nlbe_49", Rn = "_sampleText_1nlbe_58", qn = "_details_1nlbe_65", R = {
+  toggle: Pn,
+  toggleTrack: En,
+  toggleTrackDark: Fn,
+  toggleThumb: Wn,
+  toggleThumbDark: jn,
+  card: An,
+  preview: Gn,
+  sampleText: Rn,
+  details: qn
+};
+function xo() {
+  const [t, o] = T(!1);
+  Ue("light");
+  const a = {
+    light: {
+      bg: "#FFFFFF",
+      border: "1px solid #e3e3e3",
+      colors: [
+        { name: "Primary Text", hex: "#212121", label: "gray[9]" },
+        { name: "Secondary Text", hex: "#808080", label: "gray[6]" },
+        { name: "Disabled Text", hex: "#CCCCCC", label: "" }
+      ]
+    },
+    dark: {
+      bg: "#1A1A1A",
+      border: "1px solid #424242",
+      colors: [
+        { name: "Primary Text", hex: "#FAFAFA", label: "gray[0]" },
+        { name: "Secondary Text", hex: "#9E9E9E", label: "gray[5]" },
+        { name: "Disabled Text", hex: "#424242", label: "gray[8]" }
+      ]
+    }
+  }, r = t ? a.dark : a.light;
+  return /* @__PURE__ */ l(x, { my: "xl", children: [
+    /* @__PURE__ */ e(x, { mb: "lg", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
+      re,
+      {
+        onClick: () => o(!t),
+        variant: "default",
+        radius: "xl",
+        size: "sm",
+        className: R.toggle,
+        leftSection: /* @__PURE__ */ e(x, { className: `${R.toggleTrack} ${t ? R.toggleTrackDark : ""}`, children: /* @__PURE__ */ e(x, { className: `${R.toggleThumb} ${t ? R.toggleThumbDark : ""}` }) }),
+        children: t ? "Dark Mode" : "Light Mode"
+      }
+    ) }),
+    /* @__PURE__ */ e(ae, { cols: { base: 1, md: 3 }, spacing: "lg", children: r.colors.map((s) => /* @__PURE__ */ e(ue, { value: s.hex, children: /* @__PURE__ */ l(x, { className: R.card, children: [
+      /* @__PURE__ */ e(
+        x,
+        {
+          className: R.preview,
+          style: { backgroundColor: r.bg, border: r.border },
+          children: /* @__PURE__ */ e(v, { style: { color: s.hex }, className: R.sampleText, children: "Aa" })
+        }
+      ),
+      /* @__PURE__ */ l(x, { p: "md", className: R.details, children: [
+        /* @__PURE__ */ e(v, { fw: 600, children: s.name }),
+        /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", ff: "monospace", children: s.hex }),
+        s.label && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: s.label })
+      ] })
+    ] }) }, s.name + s.hex)) })
+  ] });
+}
+const On = "_root_1r7u3_1", Vn = "_chartWrapper_1r7u3_5", Hn = "_circle_1r7u3_9", Un = "_centerText_1r7u3_13", Xn = "_toggle_1r7u3_20", Yn = "_toggleTrack_1r7u3_26", Kn = "_toggleTrackDark_1r7u3_35", Jn = "_toggleThumb_1r7u3_39", Qn = "_toggleThumbDark_1r7u3_51", Zn = "_swatch_1r7u3_55", W = {
+  root: On,
+  chartWrapper: Vn,
+  circle: Hn,
+  centerText: Un,
+  toggle: Xn,
+  toggleTrack: Yn,
+  toggleTrackDark: Kn,
+  toggleThumb: Jn,
+  toggleThumbDark: Qn,
+  swatch: Zn
+};
+function No() {
+  const [t, o] = T(!1), [a, r] = T(0), s = [
+    { color: "#5AB267", label: "Success" },
+    { color: "#E63459", label: "Error" },
+    { color: "#E79E26", label: "Warning" }
+  ];
+  S(() => {
+    const c = setInterval(() => r((d) => (d + 1) % 3), 2e3);
+    return () => clearInterval(c);
+  }, []);
+  const h = s[a], y = [
+    t ? { label: "Dark Backgrounds", pct: 50, color: "#1A1A1A", border: "1px solid #424242" } : { label: "White Backgrounds", pct: 50, color: "#ffffff", border: "1px solid #e3e3e3" },
+    { label: "Primary Blue", pct: 20, color: "#169BDE" },
+    t ? { label: "Light Text & UI", pct: 15, color: "#f0f0f0", border: "1px solid #bdbdbd" } : { label: "Dark Text & UI", pct: 15, color: "#212121" },
+    { label: "Secondary Violet", pct: 10, color: "#7E57C2" },
+    { label: `Semantic (${h.label})`, pct: 5, color: h.color }
+  ], _ = 80, g = 120, m = 120, u = 36, k = 2 * Math.PI * _;
+  let i = 0;
+  const b = y.map((c) => {
+    const d = c.pct / 100 * k, w = { ...c, dasharray: `${d} ${k - d}`, dashoffset: -i };
+    return i += d, w;
+  });
+  return /* @__PURE__ */ l(z, { gap: 40, align: "center", my: "xl", className: W.root, children: [
+    /* @__PURE__ */ e(x, { className: W.chartWrapper, children: /* @__PURE__ */ l("svg", { width: 240, height: 240, viewBox: "0 0 240 240", children: [
+      b.map((c, d) => /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: g,
+          cy: m,
+          r: _,
+          fill: "none",
+          stroke: c.color,
+          strokeWidth: u,
+          strokeDasharray: c.dasharray,
+          strokeDashoffset: c.dashoffset,
+          transform: `rotate(-90 ${g} ${m})`,
+          className: W.circle
+        },
+        d
+      )),
+      /* @__PURE__ */ l("text", { x: g, y: m + 6, textAnchor: "middle", className: W.centerText, children: [
+        t ? "Dark" : "Light",
+        " Mode"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ l(K, { gap: "lg", children: [
+      /* @__PURE__ */ e(
+        re,
+        {
+          onClick: () => o(!t),
+          variant: "default",
+          radius: "xl",
+          size: "sm",
+          className: W.toggle,
+          leftSection: /* @__PURE__ */ e(x, { className: `${W.toggleTrack} ${t ? W.toggleTrackDark : ""}`, children: /* @__PURE__ */ e(x, { className: `${W.toggleThumb} ${t ? W.toggleThumbDark : ""}` }) }),
+          children: t ? "Dark Mode" : "Light Mode"
+        }
+      ),
+      /* @__PURE__ */ e(K, { gap: 8, children: y.map((c, d) => /* @__PURE__ */ l(z, { gap: 8, wrap: "nowrap", children: [
+        /* @__PURE__ */ e(
+          x,
+          {
+            className: W.swatch,
+            style: { backgroundColor: c.color, border: c.border || "none" }
+          }
+        ),
+        /* @__PURE__ */ l(v, { size: "sm", fw: 600, w: 36, children: [
+          c.pct,
+          "%"
+        ] }),
+        /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", children: c.label })
+      ] }, d)) })
+    ] })
+  ] });
+}
 export {
-  Cn as AnimatedCounter,
-  fe as AnimatedWaveform,
-  kn as AudioPlayer,
-  le as AudioWaveform,
-  Ln as CodeBlock,
-  Bn as ColorPalette,
-  Sn as ColorSwatch,
-  de as Copyable,
-  Tn as DosDonts,
-  Pn as ExpandableCard,
-  Wn as FadeInSection,
-  En as FrequencyWave,
-  Dn as GradientSwatch,
-  Fn as Hero,
-  we as HintBadge,
-  Zt as MiniAudioPlayer,
-  jn as PrincipleCard,
-  Gn as SpeedDial,
-  Rn as SplitSection,
-  An as TestimonialCard,
-  Tt as VideoBackground
+  Io as Anchor,
+  io as AnimatedCounter,
+  we as AnimatedWaveform,
+  lo as AudioPlayer,
+  fe as AudioWaveform,
+  Co as Badge,
+  zo as Box,
+  wo as BrandLogos,
+  Mo as Button,
+  Bo as Card,
+  co as CodeBlock,
+  mo as ColorPalette,
+  uo as ColorSwatch,
+  Lo as Container,
+  ue as Copyable,
+  Do as Divider,
+  No as DonutChart,
+  ho as DosDonts,
+  go as ExpandableCard,
+  de as FadeInSection,
+  So as Flex,
+  po as FrequencyWave,
+  fo as GradientSwatch,
+  Po as Grid,
+  Eo as Group,
+  _o as Hero,
+  Ce as HintBadge,
+  Fo as Image,
+  cn as MiniAudioPlayer,
+  bo as PrincipleCard,
+  Wo as SimpleGrid,
+  vo as SpeedDial,
+  yo as SplitSection,
+  jo as Stack,
+  ko as TestimonialCard,
+  Ao as Text,
+  Go as Title,
+  xo as TypographyColors,
+  Rt as VideoBackground
 };