@frequencyads/components 0.1.6 → 0.1.8

package/dist/index.mjs

@@ -1,511 +1,230 @@
 'use client';
-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: r = 2e3,
-  threshold: s = 0.5,
-  abbreviate: h = !0,
-  decimals: y,
-  ..._
+import { useMantineColorScheme as Le, Anchor as Se, Text as v, Box as x, Container as Ge, Title as se, SimpleGrid as re, Card as _e, Stack as Y, Group as z, Image as te, Paper as K, ThemeIcon as Re, Badge as Pe, Avatar as qe, Button as ae, Portal as Oe, Notification as Ve, useComputedColorScheme as He, ActionIcon as Z, Slider as Ue, Transition as Xe, Tooltip as Ye } from "@mantine/core";
+import { Anchor as Lo, Badge as So, Box as Po, Button as Eo, Card as Fo, Container as Wo, Divider as Ao, Flex as jo, Grid as Go, Group as Ro, Image as qo, SimpleGrid as Oo, Stack as Vo, Text as Ho, Title as Uo } from "@mantine/core";
+import { jsx as e, jsxs as l, Fragment as Ee } from "react/jsx-runtime";
+import { fonts as be } from "@frequencyads/brand/typography";
+import { useRef as A, useState as T, useEffect as S, forwardRef as Fe, useImperativeHandle as Ke, useCallback as L } from "react";
+import { IconX as Je, IconCheck as Qe, IconQuote as Ze, IconPlayerPauseFilled as We, IconPlayerPlayFilled as Ae, IconVolumeOff as et, IconVolume as tt, IconDownload as nt, IconPlus as ve } from "@tabler/icons-react";
+import { motion as D } from "framer-motion";
+import ot from "@frequencyads/brand/assets/frequency-mark-white.svg";
+import { gradients as rt } from "@frequencyads/brand/colors";
+const at = "_container_4mojd_1", st = "_appName_4mojd_7", ye = {
+  container: at,
+  appName: st
+};
+function uo({
+  appName: t,
+  textColor: o,
+  href: a = "/",
+  ...r
 }) {
-  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: s }
-    );
-    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 d = requestAnimationFrame(w), () => cancelAnimationFrame(d);
-  }, [u, t, r]), /* @__PURE__ */ l(
-    v,
+  const { colorScheme: s } = Le(), y = s === "dark" ? "dark.0" : "gray.9";
+  return /* @__PURE__ */ e(
+    Se,
     {
-      component: "span",
-      ref: i,
-      style: { fontVariantNumeric: "tabular-nums" },
-      ..._,
-      children: [
-        a,
-        (() => {
-          if (h && t >= 1e3) {
-            const c = g / 1e3;
-            return c % 1 === 0 ? `${Math.round(c)}K` : `${c.toFixed(1)}K`;
-          }
-          return y !== void 0 ? g.toFixed(y) : t !== Math.floor(t) ? g.toFixed(1) : Math.round(g).toString();
-        })(),
-        o
-      ]
+      href: a,
+      className: ye.container,
+      underline: "never",
+      style: {
+        // @ts-ignore - CSS custom properties
+        "--heading-font-family": be.heading.family,
+        "--heading-font-weight-semibold": be.heading.weights.semibold
+      },
+      ...r,
+      children: /* @__PURE__ */ e(v, { className: ye.appName, c: o ?? y, children: t })
     }
   );
 }
-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 it = "_root_6irix_1", lt = "_visible_6irix_9", ke = {
+  root: it,
+  visible: lt
+};
+function ce({
+  children: t,
+  delay: o = 0,
+  threshold: a = 0.1,
+  className: r,
+  ...s
 }) {
-  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",
+  const u = A(null), [y, _] = T(!1);
+  return S(() => {
+    const g = u.current;
+    if (!g) return;
+    const m = new IntersectionObserver(
+      ([h]) => {
+        h.isIntersecting && (o > 0 ? setTimeout(() => _(!0), o) : _(!0));
+      },
+      { threshold: a }
+    );
+    return m.observe(g), () => m.disconnect();
+  }, [o, a]), /* @__PURE__ */ e(
+    x,
     {
-      className: ve.svg,
-      viewBox: `0 0 ${h} ${Ee}`,
-      preserveAspectRatio: "none",
-      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, _) => {
-          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(
-              L.rect,
-              {
-                x: g,
-                width: ye,
-                rx: "1.5",
-                fill: "url(#waveformBarGradient)",
-                initial: { height: m / 2, y: U - m / 4 },
-                animate: {
-                  height: [m / 2, m * 2, m / 2, m * 1.2, m / 2],
-                  y: [
-                    U - m / 4,
-                    U - m,
-                    U - m / 4,
-                    U - m * 0.6,
-                    U - m / 4
-                  ]
-                },
-                transition: {
-                  duration: o,
-                  repeat: 1 / 0,
-                  ease: "easeInOut",
-                  delay: u,
-                  repeatDelay: a
-                }
-              }
-            ),
-            /* @__PURE__ */ e(
-              L.rect,
-              {
-                x: g,
-                y: U,
-                width: ye,
-                rx: "1.5",
-                fill: "url(#waveformBarGradient)",
-                initial: { height: m / 2 },
-                animate: {
-                  height: [m / 2, m * 2, m / 2, m * 1.2, m / 2]
-                },
-                transition: {
-                  duration: o,
-                  repeat: 1 / 0,
-                  ease: "easeInOut",
-                  delay: u,
-                  repeatDelay: a
-                }
-              }
-            )
-          ] }, _);
-        })
-      ]
+      ref: u,
+      className: `${ke.root} ${y ? ke.visible : ""} ${r ?? ""}`,
+      ...s,
+      children: t
     }
-  ) });
+  );
 }
-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
+const ct = "_root_1bo86_1", dt = "_label_1bo86_6", mt = "_title_1bo86_11", ht = "_description_1bo86_17", ut = "_logoCard_1bo86_22", Q = {
+  root: ct,
+  label: dt,
+  title: mt,
+  description: ht,
+  logoCard: ut
 };
-function mt(t = 100) {
-  const o = [];
-  for (let a = 0; a < t; a++) {
-    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 fe = De(
-  ({
-    audioRef: t,
-    currentTime: o = 0,
-    onSeek: a,
-    loading: r = !1,
-    waveColor: s = "#CCCCCC",
-    progressColor: h = "#169bde",
-    height: y = 60,
-    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 && d(Math.max(0, Math.min(100, n / i * 100)));
-      },
-      getCurrentTime: () => c / 100 * i,
-      getDuration: () => i
-    })), S(() => {
-      const n = t.current;
-      if (!n) return;
-      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) && b(n.duration), n.addEventListener("loadedmetadata", f), n.addEventListener("timeupdate", N), () => {
-        n.removeEventListener("loadedmetadata", f), n.removeEventListener("timeupdate", N);
-      };
-    }, [t]), S(() => {
-      i > 0 && typeof o == "number" && d(o / i * 100);
-    }, [o, i]);
-    const w = D(
-      (n) => {
-        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__ */ l(
-      x,
+function go({
+  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(Ge, { size: "xl", children: [
+    /* @__PURE__ */ l(ce, { 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(re, { cols: { base: 1, lg: 2 }, spacing: 32, mb: 48, children: [
+      /* @__PURE__ */ e(ce, { delay: 100, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Q.logoCard, children: /* @__PURE__ */ l(Y, { 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(ce, { delay: 200, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Q.logoCard, children: /* @__PURE__ */ l(Y, { gap: 0, children: [
+        /* @__PURE__ */ l(re, { 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(ce, { delay: 300, children: /* @__PURE__ */ l(
+      Se,
       {
-        ref: u,
-        className: ne.root,
-        style: { height: y },
-        onClick: w,
+        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(
-            "div",
+            "svg",
             {
-              className: ne.progressOverlay,
-              style: { width: `${c}%`, backgroundColor: `${h}15` }
+              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" })
             }
-          ),
-          /* @__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: ne.bar,
-                style: {
-                  width: _,
-                  height: `${n}%`,
-                  backgroundColor: N ? h : s
-                }
-              },
-              f
-            );
-          }) }),
-          r && /* @__PURE__ */ e("div", { className: ne.loading, children: "Loading waveform..." })
+          )
         ]
       }
-    );
-  }
-);
-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
+    ) })
+  ] }) });
+}
+const gt = "_root_dzed6_1", pt = "_dont_dzed6_7", ft = "_dontIcon_dzed6_12", _t = "_dontLabel_dzed6_13", bt = "_doIcon_dzed6_22", vt = "_doLabel_dzed6_23", U = {
+  root: gt,
+  dont: pt,
+  dontIcon: ft,
+  dontLabel: _t,
+  do: "_do_dzed6_7",
+  doIcon: bt,
+  doLabel: vt
 };
-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 po({ items: t }) {
+  return /* @__PURE__ */ e("div", { className: U.root, children: t.map((o, a) => /* @__PURE__ */ l(re, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
+    /* @__PURE__ */ l(K, { className: U.dont, p: "md", radius: "md", children: [
+      /* @__PURE__ */ l(z, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(Je, { size: 16, className: U.dontIcon }),
+        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: U.dontLabel, children: "Don't" })
+      ] }),
+      /* @__PURE__ */ e(v, { size: "sm", children: o.dont })
+    ] }),
+    /* @__PURE__ */ l(K, { className: U.do, p: "md", radius: "md", children: [
+      /* @__PURE__ */ l(z, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(Qe, { size: 16, className: U.doIcon }),
+        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: U.doLabel, children: "Do" })
+      ] }),
+      /* @__PURE__ */ e(v, { size: "sm", children: o.do })
+    ] })
+  ] }, a)) });
 }
-function lo({
-  src: t,
-  filename: o = "audio",
-  playButtonColor: a,
-  playButtonSize: r = 32,
-  waveColor: s = "#D0D0D0",
-  progressColor: h = "#a8a8a8",
-  waveHeight: y = 64,
-  barWidth: _ = 3,
-  barGap: g = 2,
-  showVolume: m = !0,
-  showDownload: u = !0
-}) {
-  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(() => {
-        d(0), n("00:00"), b(!1);
-      }, 500);
-    }, 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 F = D(() => {
-    const p = k.current;
-    p && (i ? p.pause() : p.play().catch(() => {
-    }));
-  }, [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 = D(() => {
-    const p = k.current;
-    if (p)
-      if (M) {
-        const $ = O || 50;
-        p.volume = $ / 100, q($), I(!1);
-      } else
-        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__ */ l(z, { gap: "sm", wrap: "nowrap", className: oe.root, children: [
-    /* @__PURE__ */ e("audio", { ref: k, src: t, preload: "metadata" }),
-    /* @__PURE__ */ e(
-      Z,
-      {
-        variant: "filled",
-        radius: "xl",
-        size: r,
-        color: a,
-        onClick: F,
-        "aria-label": i ? "Pause" : "Play",
-        className: oe.playButton,
-        children: i ? /* @__PURE__ */ e(Se, { size: r * 0.5 }) : /* @__PURE__ */ e(Pe, { size: r * 0.5 })
-      }
-    ),
-    /* @__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: k,
-        currentTime: c,
-        onSeek: G,
-        waveColor: s,
-        progressColor: h,
-        height: y,
-        barWidth: _,
-        barGap: g
-      }
-    ) }),
-    /* @__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(
-        Z,
-        {
-          variant: "subtle",
-          size: "sm",
-          onClick: H,
-          "aria-label": M ? "Unmute" : "Mute",
-          children: M ? /* @__PURE__ */ e(Ye, { size: 16 }) : /* @__PURE__ */ e(Ke, { size: 16 })
-        }
-      ),
-      /* @__PURE__ */ e(
-        Fe,
-        {
-          value: P,
-          onChange: V,
-          size: "xs",
-          w: 80,
-          "aria-label": "Volume"
-        }
-      )
-    ] }),
-    u && /* @__PURE__ */ e(Z, { variant: "subtle", size: "sm", onClick: ee, "aria-label": "Download", children: /* @__PURE__ */ e(Je, { size: 16 }) })
-  ] });
-}
-const ft = "_root_ujac8_1", _t = "_textarea_ujac8_5", xe = {
-  root: ft,
-  textarea: _t
-};
-function co({ code: t, filename: o, height: a = 384 }) {
-  const [r, s] = T(!1), h = D(async () => {
-    try {
-      await navigator.clipboard.writeText(t), s(!0), setTimeout(() => s(!1), 2e3);
-    } catch {
-    }
-  }, [t]);
-  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: r ? "green" : "blue",
-          onClick: h,
-          children: r ? "Copied!" : "Copy"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(
-      "textarea",
-      {
-        readOnly: !0,
-        value: t,
-        className: xe.textarea,
-        style: { height: a }
-      }
-    )
-  ] });
-}
-const bt = "_root_ix1b2_1", vt = "_toast_ix1b2_5", Ne = {
-  root: bt,
-  toast: vt
-};
-function ue({ value: t, children: o }) {
-  const [a, r] = T(null), s = D(() => {
-    navigator.clipboard.writeText(t).then(() => {
-      r(`Copied ${t}`), setTimeout(() => r(null), 1800);
-    });
-  }, [t]);
-  return /* @__PURE__ */ l(Le, { children: [
-    /* @__PURE__ */ e(
-      "span",
-      {
-        onClick: s,
-        className: Ne.root,
-        title: `Click to copy ${t}`,
-        children: o
-      }
-    ),
-    a && /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(
-      je,
-      {
-        withCloseButton: !1,
-        className: Ne.toast,
-        color: "blue",
-        children: a
-      }
-    ) })
-  ] });
-}
-const yt = "_root_3ht5s_1", kt = "_shade_3ht5s_5", wt = "_color_3ht5s_10", xt = "_main_3ht5s_20", ce = {
+const yt = "_root_xi08i_1", kt = "_inner_xi08i_6", we = {
   root: yt,
-  shade: kt,
-  color: wt,
-  main: xt
-};
-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: `${ce.color} ${s === a ? ce.main : ""}`,
-          style: { backgroundColor: 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 Nt = "_root_1vxkx_1", Tt = "_preview_1vxkx_11", $t = "_info_1vxkx_15", ge = {
-  root: Nt,
-  preview: Tt,
-  info: $t
-};
-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 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: Bt,
-  doLabel: Lt
+  inner: kt
 };
-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(v, { size: "sm", children: o.dont })
-    ] }),
-    /* @__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(v, { size: "sm", children: o.do })
-    ] })
-  ] }, a)) });
-}
-const Dt = "_root_xi08i_1", St = "_inner_xi08i_6", Te = {
-  root: Dt,
-  inner: St
-};
-function go({
+function fo({
   title: t,
   description: o,
   expandedContent: a,
   icon: r,
   color: s = "blue",
-  iconSize: h = "lg",
+  iconSize: u = "lg",
   collapsedHeight: y = 120,
   threshold: _ = 0.5,
   delay: g = 300,
   expanded: m,
-  onExpandedChange: u
+  onExpandedChange: h
 }) {
-  const k = j(null), [i, b] = T(!1), c = m !== void 0, d = c ? m : i;
+  const k = A(null), [i, b] = T(!1), c = m !== void 0, d = c ? m : i;
   return S(() => {
     if (c) return;
     const w = k.current;
@@ -513,27 +232,27 @@ function go({
     const n = new IntersectionObserver(
       ([f]) => {
         f.isIntersecting && setTimeout(() => {
-          b(!0), u == null || u(!0);
+          b(!0), h == null || h(!0);
         }, g);
       },
       { threshold: _ }
     );
     return n.observe(w), () => n.disconnect();
-  }, [c, _, g, u]), /* @__PURE__ */ e(
-    Y,
+  }, [c, _, g, h]), /* @__PURE__ */ e(
+    K,
     {
       ref: k,
       radius: 4,
-      className: Te.root,
-      component: L.div,
+      className: we.root,
+      component: D.div,
       animate: { height: d ? "auto" : y },
       transition: { duration: 0.5, ease: "easeOut" },
-      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: [
+      children: /* @__PURE__ */ e("div", { className: we.inner, children: /* @__PURE__ */ l(z, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
+        /* @__PURE__ */ l(Y, { 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(
-            L.div,
+            D.div,
             {
               initial: { opacity: 0, height: 0 },
               animate: {
@@ -546,793 +265,544 @@ function go({
             }
           )
         ] }),
-        /* @__PURE__ */ e(
-          L.div,
-          {
-            animate: { scale: d ? 1.1 : 1 },
-            transition: { duration: 0.3 },
-            children: /* @__PURE__ */ e(Ae, { size: h, radius: 4, color: s, variant: "filled", children: /* @__PURE__ */ e(r, { size: 20, stroke: 1.5 }) })
-          }
-        )
+        /* @__PURE__ */ e(D.div, { animate: { scale: d ? 1.1 : 1 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ e(Re, { size: u, radius: 4, color: s, variant: "filled", children: /* @__PURE__ */ e(r, { size: 20, stroke: 1.5 }) }) })
       ] }) })
     }
   );
 }
-const Pt = "_root_ho0ln_1", Et = "_visible_ho0ln_7", $e = {
-  root: Pt,
-  visible: Et
-};
-function de({
-  children: t,
-  delay: o = 0,
-  threshold: a = 0.1,
-  className: r,
-  ...s
-}) {
-  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 m.observe(g), () => m.disconnect();
-  }, [o, a]), /* @__PURE__ */ e(
-    x,
+function xe({ variant: t, children: o }) {
+  const a = t === "do";
+  return /* @__PURE__ */ l(
+    Pe,
     {
-      ref: h,
-      className: `${$e.root} ${y ? $e.visible : ""} ${r ?? ""}`,
-      ...s,
-      children: t
+      variant: "light",
+      color: a ? "green" : "red",
+      size: "lg",
+      radius: "sm",
+      styles: {
+        root: { textTransform: "none", fontWeight: 400 },
+        label: { whiteSpace: "normal", lineHeight: 1.4 }
+      },
+      children: [
+        /* @__PURE__ */ l("strong", { children: [
+          a ? "Do" : "Don't",
+          ":"
+        ] }),
+        " ",
+        o
+      ]
     }
   );
 }
-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
-          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 I = b / 80, F = 16;
-        i.shadowBlur = 3;
-        for (let G = 0; G < 80; G++) {
-          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
-          );
-          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 (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, s, u.start, u.mid, u.end]
-  );
-  return S(() => {
-    const i = a.current;
-    if (!i) return;
-    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);
-    };
-    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 r.current = requestAnimationFrame(w), () => {
-      window.removeEventListener("resize", c), r.current && cancelAnimationFrame(r.current);
-    };
-  }, [k]), S(() => {
-    if (t) {
-      queueMicrotask(() => h(!1)), y.current = Date.now();
-      return;
-    }
-    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(b);
-  }, [t, s]), /* @__PURE__ */ e(
-    x,
-    {
-      style: {
-        position: "relative",
-        width: "100%",
-        height: o,
-        overflow: "hidden",
-        pointerEvents: "none",
-        opacity: m ? 1 : 0.8
-      },
-      children: /* @__PURE__ */ e(
-        "canvas",
-        {
-          ref: a,
-          style: {
-            width: "100%",
-            height: "100%",
-            display: "block"
-          }
-        }
-      )
-    }
-  );
-}
-const Ft = "_root_9li00_1", Wt = "_preview_9li00_11", jt = "_info_9li00_15", pe = {
-  root: Ft,
-  preview: Wt,
-  info: jt
+const wt = "_root_1bah1_1", xt = {
+  root: wt
 };
-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]
-      ] })
+function _o({
+  accentColor: t,
+  title: o,
+  description: a,
+  doHint: r,
+  dontHint: s
+}) {
+  return /* @__PURE__ */ l(K, { className: xt.root, p: "lg", radius: "md", style: { borderLeftColor: t }, children: [
+    /* @__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(xe, { variant: "do", children: r }),
+      s && /* @__PURE__ */ e(xe, { variant: "dont", children: s })
     ] })
-  ] }) });
+  ] });
 }
-const At = "_root_1vlvy_1", Gt = "_video_1vlvy_9", Ie = {
-  root: At,
-  video: Gt
+const Nt = "_root_ioshc_1", Tt = "_quoteIcon_ioshc_6", Ne = {
+  root: Nt,
+  quoteIcon: Tt
 };
-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" }) }) });
+function $t(t) {
+  return t.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2);
 }
-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 _o({
-  variant: t = "logo",
-  heading: o,
-  label: a,
-  tagline: r,
-  logoSrc: s = tt,
-  gradient: h = "frequencyAlive",
-  shimmer: y = !0,
-  primaryAction: _,
-  secondaryAction: g,
-  backgroundVideoSrc: m,
-  showWaveform: u,
-  showScrollIndicator: k = !1
+function bo({
+  quote: t,
+  name: o,
+  role: a,
+  company: r,
+  avatarSrc: s,
+  accentColor: u = "blue"
 }) {
-  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: C.label,
-            children: w
-          }
-        ),
-        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: C.logoWrapper,
-            children: [
-              f && /* @__PURE__ */ e(we, {}),
-              f && /* @__PURE__ */ e("div", { className: C.vignette }),
-              /* @__PURE__ */ e(
-                L.img,
-                {
-                  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: C.glow })
-            ]
-          }
-        ),
-        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: C.textWrapper,
-            children: [
-              f && /* @__PURE__ */ e(we, {}),
-              f && /* @__PURE__ */ e("div", { className: C.vignette }),
-              /* @__PURE__ */ e(
-                se,
-                {
-                  order: 1,
-                  className: `${C.heading} ${y ? C.shimmer : ""}`,
-                  style: {
-                    backgroundImage: `linear-gradient(135deg, ${N.from}, ${N.to}, ${N.from})`,
-                    backgroundSize: y ? "200% 100%" : void 0
-                  },
-                  children: d
-                }
-              )
-            ]
-          }
-        ),
-        r && /* @__PURE__ */ e(
-          L.div,
+  const y = `var(--mantine-color-${u}-filled)`;
+  return /* @__PURE__ */ l(K, { className: Ne.root, p: "lg", radius: "md", style: { borderLeftColor: y }, children: [
+    /* @__PURE__ */ e(Ze, { size: 32, className: Ne.quoteIcon, color: y }),
+    /* @__PURE__ */ e(v, { fs: "italic", mt: "xs", mb: "md", children: t }),
+    /* @__PURE__ */ l(z, { gap: "sm", children: [
+      /* @__PURE__ */ e(qe, { src: s, alt: o, color: u, radius: "xl", size: "md", children: $t(o) }),
+      /* @__PURE__ */ l(Y, { 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 Ct = "_root_1r7u3_1", It = "_chartWrapper_1r7u3_5", zt = "_circle_1r7u3_9", Mt = "_centerText_1r7u3_13", Bt = "_toggle_1r7u3_20", Dt = "_toggleTrack_1r7u3_26", Lt = "_toggleTrackDark_1r7u3_35", St = "_toggleThumb_1r7u3_39", Pt = "_toggleThumbDark_1r7u3_51", Et = "_swatch_1r7u3_55", W = {
+  root: Ct,
+  chartWrapper: It,
+  circle: zt,
+  centerText: Mt,
+  toggle: Bt,
+  toggleTrack: Dt,
+  toggleTrackDark: Lt,
+  toggleThumb: St,
+  toggleThumbDark: Pt,
+  swatch: Et
+};
+function vo() {
+  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 u = 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 (${u.label})`, pct: 5, color: u.color }
+  ], _ = 80, g = 120, m = 120, h = 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: h,
+          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(Y, { gap: "lg", children: [
+      /* @__PURE__ */ e(
+        ae,
+        {
+          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(Y, { gap: 8, children: y.map((c, d) => /* @__PURE__ */ l(z, { gap: 8, wrap: "nowrap", children: [
+        /* @__PURE__ */ e(
+          x,
           {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { duration: 0.8, delay: 0.7 },
-            children: /* @__PURE__ */ e(v, { className: C.tagline, children: r })
+            className: W.swatch,
+            style: { backgroundColor: c.color, border: c.border || "none" }
           }
         ),
-        n && /* @__PURE__ */ e(
-          L.div,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { duration: 0.8, delay: 0.9 },
-            children: /* @__PURE__ */ l(z, { gap: "xl", justify: "center", wrap: "wrap", children: [
-              _ && /* @__PURE__ */ e(
-                re,
-                {
-                  component: "a",
-                  href: _.href,
-                  size: "lg",
-                  radius: 4,
-                  className: C.primaryButton,
-                  children: _.label
-                }
-              ),
-              g && /* @__PURE__ */ e(
-                re,
-                {
-                  component: "a",
-                  href: g.href,
-                  size: "lg",
-                  radius: 4,
-                  variant: "outline",
-                  className: C.secondaryButton,
-                  children: g.label
-                }
-              )
-            ] })
-          }
-        )
-      ] }),
-      i && k && /* @__PURE__ */ l(
-        L.div,
-        {
-          className: C.scrollIndicator,
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          transition: { duration: 1, delay: 1.4 },
-          children: [
-            /* @__PURE__ */ e("span", { className: C.scrollLabel, children: "Scroll" }),
-            /* @__PURE__ */ e(
-              L.div,
-              {
-                className: C.scrollLine,
-                animate: { scaleY: [1, 1.5, 1] },
-                transition: { duration: 1.5, repeat: 1 / 0 }
-              }
-            )
-          ]
-        }
-      )
+        /* @__PURE__ */ l(v, { size: "sm", fw: 600, w: 36, children: [
+          c.pct,
+          "%"
+        ] }),
+        /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", children: c.label })
+      ] }, d)) })
     ] })
   ] });
 }
-function Ce({ variant: t, children: o }) {
-  const a = t === "do";
-  return /* @__PURE__ */ l(
-    Be,
+const Ft = "_root_1bq7s_1", Wt = "_svg_1bq7s_12", Te = {
+  root: Ft,
+  svg: Wt
+}, At = 140, $e = 3, Ce = 10, je = 150, X = je / 2;
+function Ie({
+  barCount: t = At,
+  duration: o = 3,
+  repeatDelay: a = 3
+}) {
+  const [r, s] = T(!1);
+  if (S(() => {
+    s(!0);
+  }, []), !r) return null;
+  const u = t * Ce;
+  return /* @__PURE__ */ e("div", { className: Te.root, children: /* @__PURE__ */ l(
+    "svg",
     {
-      variant: "light",
-      color: a ? "green" : "red",
-      size: "lg",
-      radius: "sm",
-      styles: {
-        root: { textTransform: "none", fontWeight: 400 },
-        label: { whiteSpace: "normal", lineHeight: 1.4 }
-      },
+      className: Te.svg,
+      viewBox: `0 0 ${u} ${je}`,
+      preserveAspectRatio: "none",
       children: [
-        /* @__PURE__ */ l("strong", { children: [
-          a ? "Do" : "Don't",
-          ":"
-        ] }),
-        " ",
-        o
-      ]
-    }
-  );
-}
-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 }
-}, cn = De(
+        /* @__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, _) => {
+          const g = _ * Ce, m = 18 + Math.sin(_ * 0.4) * 6 + Math.cos(_ * 0.7) * 4, h = Math.min(_, t - 1 - _) * 0.04;
+          return /* @__PURE__ */ l("g", { children: [
+            /* @__PURE__ */ e(
+              D.rect,
+              {
+                x: g,
+                width: $e,
+                rx: "1.5",
+                fill: "url(#waveformBarGradient)",
+                initial: { height: m / 2, y: X - m / 4 },
+                animate: {
+                  height: [
+                    m / 2,
+                    m * 2,
+                    m / 2,
+                    m * 1.2,
+                    m / 2
+                  ],
+                  y: [
+                    X - m / 4,
+                    X - m,
+                    X - m / 4,
+                    X - m * 0.6,
+                    X - m / 4
+                  ]
+                },
+                transition: {
+                  duration: o,
+                  repeat: 1 / 0,
+                  ease: "easeInOut",
+                  delay: h,
+                  repeatDelay: a
+                }
+              }
+            ),
+            /* @__PURE__ */ e(
+              D.rect,
+              {
+                x: g,
+                y: X,
+                width: $e,
+                rx: "1.5",
+                fill: "url(#waveformBarGradient)",
+                initial: { height: m / 2 },
+                animate: {
+                  height: [
+                    m / 2,
+                    m * 2,
+                    m / 2,
+                    m * 1.2,
+                    m / 2
+                  ]
+                },
+                transition: {
+                  duration: o,
+                  repeat: 1 / 0,
+                  ease: "easeInOut",
+                  delay: h,
+                  repeatDelay: a
+                }
+              }
+            )
+          ] }, _);
+        })
+      ]
+    }
+  ) });
+}
+const jt = "_root_1pkxe_1", Gt = "_progressOverlay_1pkxe_9", Rt = "_bars_1pkxe_19", qt = "_bar_1pkxe_19", Ot = "_loading_1pkxe_34", ne = {
+  root: jt,
+  progressOverlay: Gt,
+  bars: Rt,
+  bar: qt,
+  loading: Ot
+};
+function Vt(t = 100) {
+  const o = [];
+  for (let a = 0; a < t; a++) {
+    const r = a / (t - 1), s = 20 + Math.sin(a * 0.1) * 15, u = (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 + u + y + _) * g)));
+  }
+  return o;
+}
+const fe = Fe(
   ({
-    audioUrl: t,
-    size: o = "mini",
-    waveColor: a = "#CCCCCC",
-    progressColor: r = "#169bde",
-    onPlay: s,
-    onPause: h,
-    className: y,
-    style: _
-  }, g) => {
-    const m = j(null), [u, k] = T(!1), [i, b] = T(0), c = ln[o];
-    S(() => {
-      const n = m.current;
+    audioRef: t,
+    currentTime: o = 0,
+    onSeek: a,
+    loading: r = !1,
+    waveColor: s = "#CCCCCC",
+    progressColor: u = "#169bde",
+    height: y = 60,
+    barWidth: _ = 2,
+    barGap: g = 1
+  }, m) => {
+    const h = A(null), [k] = T(() => Vt()), [i, b] = T(0), [c, d] = T(0);
+    Ke(m, () => ({
+      seekTo: (n) => {
+        i > 0 && d(Math.max(0, Math.min(100, n / i * 100)));
+      },
+      getCurrentTime: () => c / 100 * i,
+      getDuration: () => i
+    })), S(() => {
+      const n = t.current;
       if (!n) return;
-      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);
+      const f = () => {
+        n.duration && !isNaN(n.duration) && b(n.duration);
+      }, N = () => {
+        n.duration > 0 && d(n.currentTime / n.duration * 100);
       };
-    }, [t]);
-    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__ */ l(
-      z,
-      {
-        ref: g,
-        gap: o === "mini" ? 6 : o === "small" ? 8 : 10,
-        wrap: "nowrap",
-        className: `${ze.root} ${y ?? ""}`,
-        style: { height: c.height, ..._ },
-        children: [
-          /* @__PURE__ */ e("audio", { ref: m, src: t, preload: "metadata" }),
-          /* @__PURE__ */ e(
-            Z,
-            {
-              variant: "filled",
-              color: "blue",
-              radius: "xl",
-              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(x, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
-            fe,
-            {
-              audioRef: m,
-              currentTime: i,
-              onSeek: w,
-              waveColor: a,
-              progressColor: r,
-              height: c.waveHeight,
-              barWidth: c.barWidth,
-              barGap: c.barGap
-            }
-          ) })
-        ]
-      }
+      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]), S(() => {
+      i > 0 && typeof o == "number" && d(o / i * 100);
+    }, [o, i]);
+    const w = L(
+      (n) => {
+        if (!h.current || !a || i === 0) return;
+        const f = h.current.getBoundingClientRect(), N = (n.clientX - f.left) / f.width * i;
+        a(N);
+      },
+      [a, i]
     );
+    return /* @__PURE__ */ l(x, { ref: h, className: ne.root, style: { height: y }, onClick: w, children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: ne.progressOverlay,
+          style: { width: `${c}%`, backgroundColor: `${u}15` }
+        }
+      ),
+      /* @__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: ne.bar,
+            style: {
+              width: _,
+              height: `${n}%`,
+              backgroundColor: N ? u : s
+            }
+          },
+          f
+        );
+      }) }),
+      r && /* @__PURE__ */ e("div", { className: ne.loading, children: "Loading waveform..." })
+    ] });
   }
 );
-cn.displayName = "MiniAudioPlayer";
-const dn = "_root_1bah1_1", mn = {
-  root: dn
-};
-function bo({
-  accentColor: t,
-  title: o,
-  description: a,
-  doHint: r,
-  dontHint: s
-}) {
-  return /* @__PURE__ */ l(
-    Y,
+fe.displayName = "AudioWaveform";
+function yo({ isActive: t = !1, height: o = 60 }) {
+  const a = A(null), r = A(void 0), [s, u] = T(!1), y = A(null), _ = A(null), { colorScheme: g } = Le(), m = g === "dark", h = {
+    start: m ? "#7950F2" : "#9775FA",
+    mid: m ? "#BE4BDB" : "#DA77F2",
+    end: m ? "#15AABF" : "#22B8CF"
+  }, k = L(
+    (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, h.start), N.addColorStop(0.5, h.mid), N.addColorStop(1, h.end), i.strokeStyle = N, i.lineWidth = w ? 2.5 : 1.5, i.lineCap = "round", i.lineJoin = "round", w ? (i.shadowColor = h.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 j = 0; j <= P; j++) {
+        const M = j * q, C = M / b;
+        let F = n;
+        if (w) {
+          const G = Math.sin(C * Math.PI * 6 + d * O) * f, V = Math.sin(C * Math.PI * 12 + d * O * 1.3) * (f * 0.4), H = Math.sin(C * Math.PI * 18 + d * O * 0.8) * (f * 0.2), ee = _.current ?? 0.5, p = Math.abs(C - ee), $ = p < 0.15 ? (1 - p / 0.15) * f * 1 : 0, B = Math.sin(C * Math.PI * 20 + d * O * 2) * $;
+          let J = 0;
+          s && (J = Math.sin(C * Math.PI * 30 + d * 0.03) * f * 0.4, J += Math.sin(C * Math.PI * 8 + d * 0.015) * f * 0.5);
+          const ie = G + V + H + B + J, le = Math.sin(C * Math.PI);
+          F = n + ie * le;
+        } else
+          F += Math.sin(C * Math.PI * 2 + d * O) * f;
+        j === 0 ? i.moveTo(M, F) : i.lineTo(M, F);
+      }
+      if (i.stroke(), t) {
+        const C = b / 80, F = 16;
+        i.shadowBlur = 3;
+        for (let G = 0; G < 80; G++) {
+          const V = G * C + C / 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
+          );
+          B.addColorStop(0, h.start + "90"), B.addColorStop(0.5, h.mid + "70"), B.addColorStop(1, h.end + "50"), i.fillStyle = B, i.fillRect(V - 2 / 2, n - $ / 2, 2, $);
+        }
+      }
+      if (s)
+        for (let M = 0; M < 15; M++) {
+          const C = (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(C, F, G, 0, Math.PI * 2), i.fillStyle = M % 2 === 0 ? h.start + "80" : h.end + "80", i.fill();
+        }
+    },
+    [t, s, h.start, h.mid, h.end]
+  );
+  return S(() => {
+    const i = a.current;
+    if (!i) return;
+    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);
+    };
+    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 r.current = requestAnimationFrame(w), () => {
+      window.removeEventListener("resize", c), r.current && cancelAnimationFrame(r.current);
+    };
+  }, [k]), S(() => {
+    if (t) {
+      queueMicrotask(() => u(!1)), y.current = Date.now();
+      return;
+    }
+    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 && (u(!0), y.current = c, setTimeout(() => u(!1), 4e3));
+    }, 5e3);
+    return () => clearInterval(b);
+  }, [t, s]), /* @__PURE__ */ e(
+    x,
     {
-      className: mn.root,
-      p: "lg",
-      radius: "md",
-      style: { borderLeftColor: t },
-      children: [
-        /* @__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 })
-        ] })
-      ]
+      style: {
+        position: "relative",
+        width: "100%",
+        height: o,
+        overflow: "hidden",
+        pointerEvents: "none",
+        opacity: m ? 1 : 0.8
+      },
+      children: /* @__PURE__ */ e(
+        "canvas",
+        {
+          ref: a,
+          style: {
+            width: "100%",
+            height: "100%",
+            display: "block"
+          }
+        }
+      )
     }
   );
 }
-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
+const Ht = "_root_1vlvy_1", Ut = "_video_1vlvy_9", ze = {
+  root: Ht,
+  video: Ut
 };
-function vo({
-  actions: t,
-  icon: o,
-  openIcon: a,
-  direction: r = "up",
-  color: s = "blue",
-  size: h = 56,
-  defaultOpen: y = !1,
-  open: _,
-  onOpenChange: g,
-  style: m,
-  className: u
-}) {
-  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: `${me.root} ${u ?? ""}`,
-      style: m,
-      "data-direction": r,
-      children: [
-        /* @__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(
-            Re,
-            {
-              mounted: b,
-              transition: w ? "slide-up" : "slide-right",
-              duration: 200,
-              timingFunction: "ease",
-              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: h * 0.7,
-                  style: P,
-                  className: me.actionButton,
-                  onClick: () => {
-                    n.onClick(), d();
-                  },
-                  "aria-label": n.label,
-                  children: n.icon
-                }
-              ) })
-            },
-            n.label
-          );
-        }) }),
-        /* @__PURE__ */ e(
-          Z,
-          {
-            variant: "filled",
-            color: s,
-            radius: "xl",
-            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 })
-          }
-        )
-      ]
-    }
-  );
+function Xt({ src: t, opacity: o = 0.3 }) {
+  return /* @__PURE__ */ e("div", { className: ze.root, style: { opacity: o }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: ze.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
 }
-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
+const Yt = "_root_ix1b2_1", Kt = "_toast_ix1b2_5", Me = {
+  root: Yt,
+  toast: Kt
 };
-function yo({
-  badge: t,
-  badgeColor: o = "violet",
-  subtitle: a,
-  title: r,
-  titleColor: s = "blue",
-  preTitle: h,
-  description: y,
-  actions: _,
-  heading: g,
-  children: m,
-  stickyHeading: u = !1,
-  py: k,
-  reversed: i = !1,
-  id: b,
-  className: c
-}) {
-  const d = g ?? /* @__PURE__ */ l(K, { gap: "sm", children: [
-    t && /* @__PURE__ */ l(x, { children: [
+function he({ value: t, children: o }) {
+  const [a, r] = T(null), s = L(() => {
+    navigator.clipboard.writeText(t).then(() => {
+      r(`Copied ${t}`), setTimeout(() => r(null), 1800);
+    });
+  }, [t]);
+  return /* @__PURE__ */ l(Ee, { children: [
+    /* @__PURE__ */ e("span", { onClick: s, className: Me.root, title: `Click to copy ${t}`, children: o }),
+    a && /* @__PURE__ */ e(Oe, { children: /* @__PURE__ */ e(Ve, { withCloseButton: !1, className: Me.toast, color: "blue", children: a }) })
+  ] });
+}
+const Jt = "_root_3ht5s_1", Qt = "_shade_3ht5s_5", Zt = "_color_3ht5s_10", en = "_main_3ht5s_20", de = {
+  root: Jt,
+  shade: Qt,
+  color: Zt,
+  main: en
+};
+function ko({ name: t, shades: o, mainIndex: a = 5 }) {
+  return /* @__PURE__ */ l("div", { className: de.root, children: [
+    /* @__PURE__ */ e(se, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
+    /* @__PURE__ */ e(re, { cols: 10, spacing: 4, children: o.map((r, s) => /* @__PURE__ */ e(he, { value: r, children: /* @__PURE__ */ l("div", { className: de.shade, children: [
       /* @__PURE__ */ e(
-        Be,
+        "div",
         {
-          color: o,
-          variant: "filled",
-          size: "sm",
-          radius: 4,
-          tt: "uppercase",
-          fw: 700,
-          children: t
+          className: `${de.color} ${s === a ? de.main : ""}`,
+          style: { backgroundColor: r }
         }
       ),
-      a && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a })
-    ] }),
-    !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: E.titleHighlight,
-          c: s,
-          children: r
-        }
-      )
-    ] }),
-    y && /* @__PURE__ */ e(v, { size: "lg", c: "dimmed", lh: 1.7, className: E.description, children: y }),
-    _ && /* @__PURE__ */ e(x, { mt: "md", children: _ })
+      /* @__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)) })
   ] });
-  return /* @__PURE__ */ e(
-    x,
-    {
-      component: "section",
-      py: k ?? "calc(var(--mantine-spacing-xl) * 3)",
-      pos: "relative",
-      id: b,
-      className: c,
-      children: /* @__PURE__ */ e(x, { className: E.container, children: /* @__PURE__ */ l(x, { className: `${E.layout} ${i ? E.reversed : ""}`, children: [
-        /* @__PURE__ */ e(
-          x,
-          {
-            className: `${E.headingSide} ${u ? E.sticky : ""}`,
-            children: /* @__PURE__ */ e(x, { className: u ? E.stickyInner : void 0, children: d })
-          }
-        ),
-        /* @__PURE__ */ e(x, { className: E.contentSide, children: m })
-      ] }) })
-    }
-  );
 }
-const In = "_root_ioshc_1", Cn = "_quoteIcon_ioshc_6", Me = {
-  root: In,
-  quoteIcon: Cn
+const tn = "_root_1vxkx_1", nn = "_preview_1vxkx_11", on = "_info_1vxkx_15", ue = {
+  root: tn,
+  preview: nn,
+  info: on
 };
-function zn(t) {
-  return t.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2);
-}
-function ko({
-  quote: t,
-  name: o,
-  role: a,
-  company: r,
-  avatarSrc: s,
-  accentColor: h = "blue"
-}) {
-  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(", ") })
-      ] })
+function wo({ name: t, hex: o, label: a }) {
+  return /* @__PURE__ */ e(he, { value: o, children: /* @__PURE__ */ l(K, { className: ue.root, shadow: "lg", radius: "md", withBorder: !1, children: [
+    /* @__PURE__ */ e("div", { className: ue.preview, style: { backgroundColor: o } }),
+    /* @__PURE__ */ l("div", { className: ue.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 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
+const rn = "_root_9li00_1", an = "_preview_9li00_11", sn = "_info_9li00_15", ge = {
+  root: rn,
+  preview: an,
+  info: 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" })
-            }
-          )
-        ]
-      }
-    ) })
+function xo({ name: t, colors: o, description: a }) {
+  const r = `linear-gradient(135deg, ${o[0]} 0%, ${o[1]} 100%)`;
+  return /* @__PURE__ */ e(he, { value: r, children: /* @__PURE__ */ l(K, { className: ge.root, shadow: "lg", radius: "md", children: [
+    /* @__PURE__ */ e("div", { className: ge.preview, style: { background: r } }),
+    /* @__PURE__ */ l("div", { className: ge.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]
+      ] })
+    ] })
   ] }) });
 }
-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
+const ln = "_toggle_1nlbe_1", cn = "_toggleTrack_1nlbe_7", dn = "_toggleTrackDark_1nlbe_16", mn = "_toggleThumb_1nlbe_20", hn = "_toggleThumbDark_1nlbe_32", un = "_card_1nlbe_36", gn = "_preview_1nlbe_49", pn = "_sampleText_1nlbe_58", fn = "_details_1nlbe_65", R = {
+  toggle: ln,
+  toggleTrack: cn,
+  toggleTrackDark: dn,
+  toggleThumb: mn,
+  toggleThumbDark: hn,
+  card: un,
+  preview: gn,
+  sampleText: pn,
+  details: fn
 };
-function xo() {
+function No() {
   const [t, o] = T(!1);
-  Ue("light");
+  He("light");
   const a = {
     light: {
       bg: "#FFFFFF",
@@ -1355,7 +825,7 @@ function xo() {
   }, 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,
+      ae,
       {
         onClick: () => o(!t),
         variant: "default",
@@ -1366,7 +836,7 @@ function xo() {
         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(re, { cols: { base: 1, md: 3 }, spacing: "lg", children: r.colors.map((s) => /* @__PURE__ */ e(he, { value: s.hex, children: /* @__PURE__ */ l(x, { className: R.card, children: [
       /* @__PURE__ */ e(
         x,
         {
@@ -1383,131 +853,598 @@ function xo() {
     ] }) }, 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
+const _n = "_root_n9zxy_1", bn = "_playButton_n9zxy_8", vn = "_time_n9zxy_22", yn = "_volumeGroup_n9zxy_28", oe = {
+  root: _n,
+  playButton: bn,
+  time: vn,
+  volumeGroup: yn
 };
-function No() {
-  const [t, o] = T(!1), [a, r] = T(0), s = [
-    { color: "#5AB267", label: "Success" },
-    { color: "#E63459", label: "Error" },
-    { color: "#E79E26", label: "Warning" }
-  ];
+function pe(t) {
+  const o = Math.floor(t / 60), a = Math.floor(t % 60);
+  return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
+}
+function To({
+  src: t,
+  filename: o = "audio",
+  playButtonColor: a,
+  playButtonSize: r = 32,
+  waveColor: s = "#D0D0D0",
+  progressColor: u = "#a8a8a8",
+  waveHeight: y = 64,
+  barWidth: _ = 3,
+  barGap: g = 2,
+  showVolume: m = !0,
+  showDownload: h = !0
+}) {
+  const k = A(null), [i, b] = T(!1), [c, d] = T(0), [w, n] = T("00:00"), [f, N] = T("00:00"), [P, q] = T(50), [O, j] = T(50), [M, C] = T(!1);
   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"
-        }
+    const p = k.current;
+    if (!p) return;
+    p.volume = P / 100;
+    const $ = () => {
+      d(p.currentTime), n(pe(p.currentTime));
+    }, B = () => N(pe(p.duration)), J = () => {
+      setTimeout(() => {
+        d(0), n("00:00"), b(!1);
+      }, 500);
+    }, 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 F = L(() => {
+    const p = k.current;
+    p && (i ? p.pause() : p.play().catch(() => {
+    }));
+  }, [i]), G = L((p) => {
+    const $ = k.current;
+    $ && !isNaN(p) && isFinite(p) && ($.currentTime = p, d(p), n(pe(p)));
+  }, []), V = L((p) => {
+    const $ = k.current;
+    $ && ($.volume = p / 100, q(p), p > 0 ? (j(p), C(!1)) : C(!0));
+  }, []), H = L(() => {
+    const p = k.current;
+    if (p)
+      if (M) {
+        const $ = O || 50;
+        p.volume = $ / 100, q($), C(!1);
+      } else
+        j(P), p.volume = 0, q(0), C(!0);
+  }, [M, P, O]), ee = L(() => {
+    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__ */ l(z, { gap: "sm", wrap: "nowrap", className: oe.root, children: [
+    /* @__PURE__ */ e("audio", { ref: k, src: t, preload: "metadata" }),
+    /* @__PURE__ */ e(
+      Z,
+      {
+        variant: "filled",
+        radius: "xl",
+        size: r,
+        color: a,
+        onClick: F,
+        "aria-label": i ? "Pause" : "Play",
+        className: oe.playButton,
+        children: i ? /* @__PURE__ */ e(We, { size: r * 0.5 }) : /* @__PURE__ */ e(Ae, { size: r * 0.5 })
+      }
+    ),
+    /* @__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: k,
+        currentTime: c,
+        onSeek: G,
+        waveColor: s,
+        progressColor: u,
+        height: y,
+        barWidth: _,
+        barGap: g
+      }
+    ) }),
+    /* @__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(
+        Z,
+        {
+          variant: "subtle",
+          size: "sm",
+          onClick: H,
+          "aria-label": M ? "Unmute" : "Mute",
+          children: M ? /* @__PURE__ */ e(et, { size: 16 }) : /* @__PURE__ */ e(tt, { size: 16 })
+        }
       ),
-      /* @__PURE__ */ e(K, { gap: 8, children: y.map((c, d) => /* @__PURE__ */ l(z, { gap: 8, wrap: "nowrap", children: [
-        /* @__PURE__ */ e(
-          x,
+      /* @__PURE__ */ e(
+        Ue,
+        {
+          value: P,
+          onChange: V,
+          size: "xs",
+          w: 80,
+          "aria-label": "Volume"
+        }
+      )
+    ] }),
+    h && /* @__PURE__ */ e(Z, { variant: "subtle", size: "sm", onClick: ee, "aria-label": "Download", children: /* @__PURE__ */ e(nt, { size: 16 }) })
+  ] });
+}
+const kn = "_root_13w21_1", wn = "_playButton_13w21_11", Be = {
+  root: kn,
+  playButton: wn
+}, xn = {
+  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 }
+}, Nn = Fe(
+  ({
+    audioUrl: t,
+    size: o = "mini",
+    waveColor: a = "#CCCCCC",
+    progressColor: r = "#169bde",
+    onPlay: s,
+    onPause: u,
+    className: y,
+    style: _
+  }, g) => {
+    const m = A(null), [h, k] = T(!1), [i, b] = T(0), c = xn[o];
+    S(() => {
+      const n = m.current;
+      if (!n) return;
+      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 d = L(() => {
+      const n = m.current;
+      n && (h ? (n.pause(), u == null || u()) : (n.play().catch(() => {
+      }), s == null || s()));
+    }, [h, s, u]), w = L((n) => {
+      const f = m.current;
+      f && !isNaN(n) && isFinite(n) && (f.currentTime = n, b(n));
+    }, []);
+    return /* @__PURE__ */ l(
+      z,
+      {
+        ref: g,
+        gap: o === "mini" ? 6 : o === "small" ? 8 : 10,
+        wrap: "nowrap",
+        className: `${Be.root} ${y ?? ""}`,
+        style: { height: c.height, ..._ },
+        children: [
+          /* @__PURE__ */ e("audio", { ref: m, src: t, preload: "metadata" }),
+          /* @__PURE__ */ e(
+            Z,
+            {
+              variant: "filled",
+              color: "blue",
+              radius: "xl",
+              size: c.buttonSize,
+              onClick: d,
+              "aria-label": h ? "Pause" : "Play",
+              className: Be.playButton,
+              children: h ? /* @__PURE__ */ e(We, { size: c.iconSize }) : /* @__PURE__ */ e(Ae, { size: c.iconSize })
+            }
+          ),
+          /* @__PURE__ */ e(x, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
+            fe,
+            {
+              audioRef: m,
+              currentTime: i,
+              onSeek: w,
+              waveColor: a,
+              progressColor: r,
+              height: c.waveHeight,
+              barWidth: c.barWidth,
+              barGap: c.barGap
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Nn.displayName = "MiniAudioPlayer";
+const Tn = "_root_4fblk_1", $n = "_actions_4fblk_22", Cn = "_fab_4fblk_43", In = "_actionButton_4fblk_63", me = {
+  root: Tn,
+  actions: $n,
+  fab: Cn,
+  actionButton: In
+};
+function $o({
+  actions: t,
+  icon: o,
+  openIcon: a,
+  direction: r = "up",
+  color: s = "blue",
+  size: u = 56,
+  defaultOpen: y = !1,
+  open: _,
+  onOpenChange: g,
+  style: m,
+  className: h
+}) {
+  const [k, i] = T(y), b = _ ?? k, c = L(() => {
+    const n = !b;
+    i(n), g == null || g(n);
+  }, [b, g]), d = L(() => {
+    i(!1), g == null || g(!1);
+  }, [g]), w = r === "up" || r === "down";
+  return /* @__PURE__ */ l(x, { className: `${me.root} ${h ?? ""}`, style: m, "data-direction": r, children: [
+    /* @__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(
+        Xe,
+        {
+          mounted: b,
+          transition: w ? "slide-up" : "slide-right",
+          duration: 200,
+          timingFunction: "ease",
+          enterDelay: N * 40,
+          children: (P) => /* @__PURE__ */ e(Ye, { label: n.label, position: w ? "left" : "top", children: /* @__PURE__ */ e(
+            Z,
+            {
+              variant: "filled",
+              color: "gray",
+              radius: "xl",
+              size: u * 0.7,
+              style: P,
+              className: me.actionButton,
+              onClick: () => {
+                n.onClick(), d();
+              },
+              "aria-label": n.label,
+              children: n.icon
+            }
+          ) })
+        },
+        n.label
+      );
+    }) }),
+    /* @__PURE__ */ e(
+      Z,
+      {
+        variant: "filled",
+        color: s,
+        radius: "xl",
+        size: u,
+        onClick: c,
+        className: me.fab,
+        "data-open": b || void 0,
+        "aria-label": b ? "Close actions" : "Open actions",
+        children: b ? a ?? o ?? /* @__PURE__ */ e(ve, { size: u * 0.45 }) : o ?? /* @__PURE__ */ e(ve, { size: u * 0.45 })
+      }
+    )
+  ] });
+}
+const zn = "_root_h15rs_1", Mn = "_content_h15rs_8", Bn = "_label_h15rs_21", Dn = "_vignette_h15rs_38", Ln = "_logoWrapper_h15rs_51", Sn = "_logo_h15rs_51", Pn = "_glow_h15rs_74", En = "_textWrapper_h15rs_86", Fn = "_heading_h15rs_92", Wn = "_shimmer_h15rs_126", An = "_tagline_h15rs_130", jn = "_primaryButton_h15rs_146", Gn = "_secondaryButton_h15rs_157", Rn = "_scrollIndicator_h15rs_173", qn = "_scrollLabel_h15rs_184", On = "_scrollLine_h15rs_192", I = {
+  root: zn,
+  content: Mn,
+  label: Bn,
+  vignette: Dn,
+  logoWrapper: Ln,
+  logo: Sn,
+  glow: Pn,
+  textWrapper: En,
+  heading: Fn,
+  shimmer: Wn,
+  tagline: An,
+  primaryButton: jn,
+  secondaryButton: Gn,
+  scrollIndicator: Rn,
+  scrollLabel: qn,
+  scrollLine: On
+};
+function Co({
+  variant: t = "logo",
+  heading: o,
+  label: a,
+  tagline: r,
+  logoSrc: s = ot,
+  gradient: u = "frequencyAlive",
+  shimmer: y = !0,
+  primaryAction: _,
+  secondaryAction: g,
+  backgroundVideoSrc: m,
+  showWaveform: h,
+  showScrollIndicator: k = !1
+}) {
+  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 = h ?? !0, N = rt[u];
+  return S(() => {
+    b(!0);
+  }, []), /* @__PURE__ */ l(x, { component: "section", className: I.root, children: [
+    m && /* @__PURE__ */ e(Xt, { src: m }),
+    /* @__PURE__ */ l("div", { className: I.content, children: [
+      i && /* @__PURE__ */ l(Ee, { children: [
+        w && /* @__PURE__ */ e(
+          D.p,
           {
-            className: W.swatch,
-            style: { backgroundColor: c.color, border: c.border || "none" }
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.8, delay: 0.2 },
+            className: I.label,
+            children: w
           }
         ),
-        /* @__PURE__ */ l(v, { size: "sm", fw: 600, w: 36, children: [
-          c.pct,
-          "%"
-        ] }),
-        /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", children: c.label })
-      ] }, d)) })
+        t === "logo" && /* @__PURE__ */ l(
+          D.div,
+          {
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: I.logoWrapper,
+            children: [
+              f && /* @__PURE__ */ e(Ie, {}),
+              f && /* @__PURE__ */ e("div", { className: I.vignette }),
+              /* @__PURE__ */ e(
+                D.img,
+                {
+                  src: c,
+                  alt: d ?? "Frequency",
+                  className: I.logo,
+                  animate: { rotate: [0, 0.5, -0.5, 0] },
+                  transition: { duration: 8, repeat: 1 / 0, ease: "easeInOut" }
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: I.glow })
+            ]
+          }
+        ),
+        t === "text" && d && /* @__PURE__ */ l(
+          D.div,
+          {
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: I.textWrapper,
+            children: [
+              f && /* @__PURE__ */ e(Ie, {}),
+              f && /* @__PURE__ */ e("div", { className: I.vignette }),
+              /* @__PURE__ */ e(
+                se,
+                {
+                  order: 1,
+                  className: `${I.heading} ${y ? I.shimmer : ""}`,
+                  style: {
+                    backgroundImage: `linear-gradient(135deg, ${N.from}, ${N.to}, ${N.from})`,
+                    backgroundSize: y ? "200% 100%" : void 0
+                  },
+                  children: d
+                }
+              )
+            ]
+          }
+        ),
+        r && /* @__PURE__ */ e(
+          D.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.7 },
+            children: /* @__PURE__ */ e(v, { className: I.tagline, children: r })
+          }
+        ),
+        n && /* @__PURE__ */ e(
+          D.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.9 },
+            children: /* @__PURE__ */ l(z, { gap: "xl", justify: "center", wrap: "wrap", children: [
+              _ && /* @__PURE__ */ e(
+                ae,
+                {
+                  component: "a",
+                  href: _.href,
+                  size: "lg",
+                  radius: 4,
+                  className: I.primaryButton,
+                  children: _.label
+                }
+              ),
+              g && /* @__PURE__ */ e(
+                ae,
+                {
+                  component: "a",
+                  href: g.href,
+                  size: "lg",
+                  radius: 4,
+                  variant: "outline",
+                  className: I.secondaryButton,
+                  children: g.label
+                }
+              )
+            ] })
+          }
+        )
+      ] }),
+      i && k && /* @__PURE__ */ l(
+        D.div,
+        {
+          className: I.scrollIndicator,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { duration: 1, delay: 1.4 },
+          children: [
+            /* @__PURE__ */ e("span", { className: I.scrollLabel, children: "Scroll" }),
+            /* @__PURE__ */ e(
+              D.div,
+              {
+                className: I.scrollLine,
+                animate: { scaleY: [1, 1.5, 1] },
+                transition: { duration: 1.5, repeat: 1 / 0 }
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] });
 }
+const Vn = "_container_9xj91_1", Hn = "_layout_9xj91_16", Un = "_reversed_9xj91_29", Xn = "_headingSide_9xj91_39", Yn = "_sticky_9xj91_49", Kn = "_stickyInner_9xj91_54", Jn = "_contentSide_9xj91_65", Qn = "_title_9xj91_76", Zn = "_preTitle_9xj91_82", eo = "_titleHighlight_9xj91_88", to = "_description_9xj91_95", E = {
+  container: Vn,
+  layout: Hn,
+  reversed: Un,
+  headingSide: Xn,
+  sticky: Yn,
+  stickyInner: Kn,
+  contentSide: Jn,
+  title: Qn,
+  preTitle: Zn,
+  titleHighlight: eo,
+  description: to
+};
+function Io({
+  badge: t,
+  badgeColor: o = "violet",
+  subtitle: a,
+  title: r,
+  titleColor: s = "blue",
+  preTitle: u,
+  description: y,
+  actions: _,
+  heading: g,
+  children: m,
+  stickyHeading: h = !1,
+  py: k,
+  reversed: i = !1,
+  id: b,
+  className: c
+}) {
+  const d = g ?? /* @__PURE__ */ l(Y, { gap: "sm", children: [
+    t && /* @__PURE__ */ l(x, { children: [
+      /* @__PURE__ */ e(Pe, { color: o, variant: "filled", size: "sm", radius: 4, tt: "uppercase", fw: 700, children: t }),
+      a && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a })
+    ] }),
+    !t && a && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a }),
+    (u || r) && /* @__PURE__ */ l(se, { order: 2, className: E.title, children: [
+      u && /* @__PURE__ */ e("span", { className: E.preTitle, children: u }),
+      u && /* @__PURE__ */ e("br", {}),
+      r && /* @__PURE__ */ e(v, { component: "span", inherit: !0, className: E.titleHighlight, c: s, children: r })
+    ] }),
+    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(
+    x,
+    {
+      component: "section",
+      py: k ?? "calc(var(--mantine-spacing-xl) * 3)",
+      pos: "relative",
+      id: b,
+      className: c,
+      children: /* @__PURE__ */ e(x, { className: E.container, children: /* @__PURE__ */ l(x, { className: `${E.layout} ${i ? E.reversed : ""}`, children: [
+        /* @__PURE__ */ e(x, { className: `${E.headingSide} ${h ? E.sticky : ""}`, children: /* @__PURE__ */ e(x, { className: h ? E.stickyInner : void 0, children: d }) }),
+        /* @__PURE__ */ e(x, { className: E.contentSide, children: m })
+      ] }) })
+    }
+  );
+}
+function zo({
+  value: t,
+  suffix: o = "",
+  prefix: a = "",
+  duration: r = 2e3,
+  threshold: s = 0.5,
+  abbreviate: u = !0,
+  decimals: y,
+  ..._
+}) {
+  const [g, m] = T(0), [h, k] = T(!1), i = A(null);
+  return S(() => {
+    const c = i.current;
+    if (!c) return;
+    const d = new IntersectionObserver(
+      ([w]) => {
+        w.isIntersecting && !h && k(!0);
+      },
+      { threshold: s }
+    );
+    return d.observe(c), () => d.disconnect();
+  }, [h, s]), S(() => {
+    if (!h) 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 d = requestAnimationFrame(w), () => cancelAnimationFrame(d);
+  }, [h, t, r]), /* @__PURE__ */ l(v, { component: "span", ref: i, style: { fontVariantNumeric: "tabular-nums" }, ..._, children: [
+    a,
+    (() => {
+      if (u && t >= 1e3) {
+        const c = g / 1e3;
+        return c % 1 === 0 ? `${Math.round(c)}K` : `${c.toFixed(1)}K`;
+      }
+      return y !== void 0 ? g.toFixed(y) : t !== Math.floor(t) ? g.toFixed(1) : Math.round(g).toString();
+    })(),
+    o
+  ] });
+}
+const no = "_root_ujac8_1", oo = "_textarea_ujac8_5", De = {
+  root: no,
+  textarea: oo
+};
+function Mo({ code: t, filename: o, height: a = 384 }) {
+  const [r, s] = T(!1), u = L(async () => {
+    try {
+      await navigator.clipboard.writeText(t), s(!0), setTimeout(() => s(!1), 2e3);
+    } catch {
+    }
+  }, [t]);
+  return /* @__PURE__ */ l(x, { className: De.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(ae, { size: "xs", radius: "md", color: r ? "green" : "blue", onClick: u, children: r ? "Copied!" : "Copy" })
+    ] }),
+    /* @__PURE__ */ e("textarea", { readOnly: !0, value: t, className: De.textarea, style: { height: a } })
+  ] });
+}
 export {
-  Io as Anchor,
-  io as AnimatedCounter,
-  we as AnimatedWaveform,
-  lo as AudioPlayer,
+  Lo as Anchor,
+  zo as AnimatedCounter,
+  Ie as AnimatedWaveform,
+  To 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
+  So as Badge,
+  Po as Box,
+  go as BrandLogos,
+  uo as BrandedAppName,
+  Eo as Button,
+  Fo as Card,
+  Mo as CodeBlock,
+  ko as ColorPalette,
+  wo as ColorSwatch,
+  Wo as Container,
+  he as Copyable,
+  Ao as Divider,
+  vo as DonutChart,
+  po as DosDonts,
+  fo as ExpandableCard,
+  ce as FadeInSection,
+  jo as Flex,
+  yo as FrequencyWave,
+  xo as GradientSwatch,
+  Go as Grid,
+  Ro as Group,
+  Co as Hero,
+  xe as HintBadge,
+  qo as Image,
+  Nn as MiniAudioPlayer,
+  _o as PrincipleCard,
+  Oo as SimpleGrid,
+  $o as SpeedDial,
+  Io as SplitSection,
+  Vo as Stack,
+  bo as TestimonialCard,
+  Ho as Text,
+  Uo as Title,
+  No as TypographyColors,
+  Xt as VideoBackground
 };