@frequencyads/components 0.1.6 → 0.1.7

package/dist/index.mjs

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