@frequencyads/components 0.1.5 → 0.1.7

package/dist/index.mjs

@@ -1,84 +1,489 @@
 'use client';
-import { jsxs as m, jsx as e, Fragment as ze } from "react/jsx-runtime";
-import { useState as z, useRef as D, useEffect as P, forwardRef as xe, useImperativeHandle as Be, useCallback as S } from "react";
-import { Text as N, Box as k, Group as F, ActionIcon as Y, Slider as Se, Button as re, Portal as Te, Notification as Pe, Title as oe, SimpleGrid as Me, Paper as U, Stack as ce, ThemeIcon as We, useMantineColorScheme as Ee, Badge as $e, Transition as De, Tooltip as Fe, Avatar as je } from "@mantine/core";
-import { motion as B } from "framer-motion";
-import { IconPlayerPauseFilled as Ce, IconPlayerPlayFilled as ke, IconVolumeOff as Ge, IconVolume as Re, IconDownload as Ae, IconX as Oe, IconCheck as He, IconPlus as ue, IconQuote as Ve } from "@tabler/icons-react";
-import qe from "@frequencyads/brand/assets/frequency-mark-white.svg";
-import { gradients as Ue } from "@frequencyads/brand/colors";
-function Cn({
-  value: t,
-  suffix: o = "",
-  prefix: a = "",
-  duration: s = 2e3,
-  threshold: r = 0.5,
-  abbreviate: f = !0,
-  decimals: y,
-  ...g
+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 [_, l] = z(0), [d, w] = z(!1), i = D(null);
-  return P(() => {
-    const u = i.current;
-    if (!u) return;
-    const c = new IntersectionObserver(
-      ([b]) => {
-        b.isIntersecting && !d && w(!0);
+  const { 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
+      },
+      ...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 c.observe(u), () => c.disconnect();
-  }, [d, r]), P(() => {
-    if (!d) return;
-    let u, c;
-    const b = (n) => {
-      u || (u = n);
-      const p = Math.min((n - u) / s, 1), I = 1 - Math.pow(1 - p, 3);
-      l(I * t), p < 1 && (c = requestAnimationFrame(b));
-    };
-    return c = requestAnimationFrame(b), () => cancelAnimationFrame(c);
-  }, [d, t, s]), /* @__PURE__ */ m(
-    N,
+    return m.observe(p), () => m.disconnect();
+  }, [o, r]), /* @__PURE__ */ e(
+    x,
     {
-      component: "span",
-      ref: i,
-      style: { fontVariantNumeric: "tabular-nums" },
-      ...g,
-      children: [
-        a,
-        (() => {
-          if (f && t >= 1e3) {
-            const u = _ / 1e3;
-            return u % 1 === 0 ? `${Math.round(u)}K` : `${u.toFixed(1)}K`;
+      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"
+          }
+        ) }),
+        /* @__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"
           }
-          return y !== void 0 ? _.toFixed(y) : t !== Math.floor(t) ? _.toFixed(1) : Math.round(_).toString();
-        })(),
+        ) }),
+        /* @__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 Xe = "_root_1bq7s_1", Ye = "_svg_1bq7s_12", me = {
-  root: Xe,
-  svg: Ye
-}, Ke = 140, he = 3, pe = 10, Le = 150, V = Le / 2;
-function fe({
-  barCount: t = Ke,
+const 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 [s, r] = z(!1);
-  if (P(() => {
-    r(!0);
-  }, []), !s) return null;
-  const f = t * pe;
-  return /* @__PURE__ */ e("div", { className: me.root, children: /* @__PURE__ */ m(
+  const [a, s] = T(!1);
+  if (D(() => {
+    s(!0);
+  }, []), !a) return null;
+  const u = t * Ie;
+  return /* @__PURE__ */ e("div", { className: $e.root, children: /* @__PURE__ */ l(
     "svg",
     {
-      className: me.svg,
-      viewBox: `0 0 ${f} ${Le}`,
+      className: $e.svg,
+      viewBox: `0 0 ${u} ${Ve}`,
       preserveAspectRatio: "none",
       children: [
-        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ m("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
           /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
           /* @__PURE__ */ e("stop", { offset: "15%", stopColor: "white", stopOpacity: "0.15" }),
           /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.25" }),
@@ -86,53 +491,65 @@ function fe({
           /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
         ] }) }),
         [...Array(t)].map((y, g) => {
-          const _ = g * pe, l = 18 + Math.sin(g * 0.4) * 6 + Math.cos(g * 0.7) * 4, d = Math.min(g, t - 1 - g) * 0.04;
-          return /* @__PURE__ */ m("g", { children: [
+          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(
-              B.rect,
+              S.rect,
               {
-                x: _,
-                width: he,
+                x: p,
+                width: Ce,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: l / 2, y: V - l / 4 },
+                initial: { height: m / 2, y: K - m / 4 },
                 animate: {
-                  height: [l / 2, l * 2, l / 2, l * 1.2, l / 2],
+                  height: [
+                    m / 2,
+                    m * 2,
+                    m / 2,
+                    m * 1.2,
+                    m / 2
+                  ],
                   y: [
-                    V - l / 4,
-                    V - l,
-                    V - l / 4,
-                    V - l * 0.6,
-                    V - l / 4
+                    K - m / 4,
+                    K - m,
+                    K - m / 4,
+                    K - m * 0.6,
+                    K - m / 4
                   ]
                 },
                 transition: {
                   duration: o,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: d,
-                  repeatDelay: a
+                  delay: h,
+                  repeatDelay: r
                 }
               }
             ),
             /* @__PURE__ */ e(
-              B.rect,
+              S.rect,
               {
-                x: _,
-                y: V,
-                width: he,
+                x: p,
+                y: K,
+                width: Ce,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: l / 2 },
+                initial: { height: m / 2 },
                 animate: {
-                  height: [l / 2, l * 2, l / 2, l * 1.2, l / 2]
+                  height: [
+                    m / 2,
+                    m * 2,
+                    m / 2,
+                    m * 1.2,
+                    m / 2
+                  ]
                 },
                 transition: {
                   duration: o,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: d,
-                  repeatDelay: a
+                  delay: h,
+                  repeatDelay: r
                 }
               }
             )
@@ -142,531 +559,168 @@ function fe({
     }
   ) });
 }
-const Je = "_root_1pkxe_1", Qe = "_progressOverlay_1pkxe_9", Ze = "_bars_1pkxe_19", et = "_bar_1pkxe_19", tt = "_loading_1pkxe_34", J = {
-  root: Je,
-  progressOverlay: Qe,
-  bars: Ze,
-  bar: et,
-  loading: tt
+const 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 nt(t = 100) {
+function nn(t = 100) {
   const o = [];
-  for (let a = 0; a < t; a++) {
-    const s = a / (t - 1), r = 20 + Math.sin(a * 0.1) * 15, f = (Math.random() - 0.5) * 20, y = Math.sin(s * Math.PI) * 30, g = s > 0.2 && s < 0.8 ? Math.random() * 10 : 0, _ = s < 0.05 || s > 0.95 ? Math.min(s / 0.05, (1 - s) / 0.05) : 1;
-    o.push(Math.max(5, Math.min(90, (r + f + y + g) * _)));
+  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 le = xe(
+const _e = Ge(
   ({
     audioRef: t,
     currentTime: o = 0,
-    onSeek: a,
-    loading: s = !1,
-    waveColor: r = "#CCCCCC",
-    progressColor: f = "#169bde",
+    onSeek: r,
+    loading: a = !1,
+    waveColor: s = "#CCCCCC",
+    progressColor: u = "#169bde",
     height: y = 60,
     barWidth: g = 2,
-    barGap: _ = 1
-  }, l) => {
-    const d = D(null), [w] = z(() => nt()), [i, v] = z(0), [u, c] = z(0);
-    Be(l, () => ({
+    barGap: p = 1
+  }, m) => {
+    const h = A(null), [k] = T(() => nn()), [i, _] = T(0), [c, d] = T(0);
+    at(m, () => ({
       seekTo: (n) => {
-        i > 0 && c(Math.max(0, Math.min(100, n / i * 100)));
+        i > 0 && d(Math.max(0, Math.min(100, n / i * 100)));
       },
-      getCurrentTime: () => u / 100 * i,
+      getCurrentTime: () => c / 100 * i,
       getDuration: () => i
-    })), P(() => {
+    })), D(() => {
       const n = t.current;
       if (!n) return;
-      const p = () => {
-        n.duration && !isNaN(n.duration) && v(n.duration);
-      }, I = () => {
-        n.duration > 0 && c(n.currentTime / n.duration * 100);
+      const b = () => {
+        n.duration && !isNaN(n.duration) && _(n.duration);
+      }, N = () => {
+        n.duration > 0 && d(n.currentTime / n.duration * 100);
       };
-      return n.duration && !isNaN(n.duration) && v(n.duration), n.addEventListener("loadedmetadata", p), n.addEventListener("timeupdate", I), () => {
-        n.removeEventListener("loadedmetadata", p), n.removeEventListener("timeupdate", I);
+      return n.duration && !isNaN(n.duration) && _(n.duration), n.addEventListener("loadedmetadata", b), n.addEventListener("timeupdate", N), () => {
+        n.removeEventListener("loadedmetadata", b), n.removeEventListener("timeupdate", N);
       };
-    }, [t]), P(() => {
-      i > 0 && typeof o == "number" && c(o / i * 100);
+    }, [t]), D(() => {
+      i > 0 && typeof o == "number" && d(o / i * 100);
     }, [o, i]);
-    const b = S(
+    const w = L(
       (n) => {
-        if (!d.current || !a || i === 0) return;
-        const p = d.current.getBoundingClientRect(), I = (n.clientX - p.left) / p.width * i;
-        a(I);
+        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__ */ m(
-      k,
-      {
-        ref: d,
-        className: J.root,
-        style: { height: y },
-        onClick: b,
-        children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: J.progressOverlay,
-              style: { width: `${u}%`, backgroundColor: `${f}15` }
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: J.bars, style: { gap: _ }, children: w.map((n, p) => {
-            const I = p / w.length * 100 <= u;
-            return /* @__PURE__ */ e(
-              "div",
-              {
-                className: J.bar,
-                style: {
-                  width: g,
-                  height: `${n}%`,
-                  backgroundColor: I ? f : r
-                }
-              },
-              p
-            );
-          }) }),
-          s && /* @__PURE__ */ e("div", { className: J.loading, children: "Loading waveform..." })
-        ]
-      }
-    );
-  }
-);
-le.displayName = "AudioWaveform";
-const ot = "_root_n9zxy_1", st = "_playButton_n9zxy_8", at = "_time_n9zxy_22", it = "_volumeGroup_n9zxy_28", Q = {
-  root: ot,
-  playButton: st,
-  time: at,
-  volumeGroup: it
-};
-function se(t) {
-  const o = Math.floor(t / 60), a = Math.floor(t % 60);
-  return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
-}
-function kn({
-  src: t,
-  filename: o = "audio",
-  playButtonColor: a,
-  playButtonSize: s = 32,
-  waveColor: r = "#D0D0D0",
-  progressColor: f = "#a8a8a8",
-  waveHeight: y = 64,
-  barWidth: g = 3,
-  barGap: _ = 2,
-  showVolume: l = !0,
-  showDownload: d = !0
-}) {
-  const w = D(null), [i, v] = z(!1), [u, c] = z(0), [b, n] = z("00:00"), [p, I] = z("00:00"), [T, R] = z(50), [A, j] = z(50), [C, M] = z(!1);
-  P(() => {
-    const h = w.current;
-    if (!h) return;
-    h.volume = T / 100;
-    const x = () => {
-      c(h.currentTime), n(se(h.currentTime));
-    }, L = () => I(se(h.duration)), X = () => {
-      setTimeout(() => {
-        c(0), n("00:00"), v(!1);
-      }, 500);
-    }, Z = () => v(!0), ee = () => v(!1);
-    return h.addEventListener("timeupdate", x), h.addEventListener("loadedmetadata", L), h.addEventListener("ended", X), h.addEventListener("play", Z), h.addEventListener("pause", ee), () => {
-      h.removeEventListener("timeupdate", x), h.removeEventListener("loadedmetadata", L), h.removeEventListener("ended", X), h.removeEventListener("play", Z), h.removeEventListener("pause", ee);
-    };
-  }, [t]);
-  const E = S(() => {
-    const h = w.current;
-    h && (i ? h.pause() : h.play().catch(() => {
-    }));
-  }, [i]), G = S((h) => {
-    const x = w.current;
-    x && !isNaN(h) && isFinite(h) && (x.currentTime = h, c(h), n(se(h)));
-  }, []), O = S(
-    (h) => {
-      const x = w.current;
-      x && (x.volume = h / 100, R(h), h > 0 ? (j(h), M(!1)) : M(!0));
-    },
-    []
-  ), H = S(() => {
-    const h = w.current;
-    if (h)
-      if (C) {
-        const x = A || 50;
-        h.volume = x / 100, R(x), M(!1);
-      } else
-        j(T), h.volume = 0, R(0), M(!0);
-  }, [C, T, A]), K = S(() => {
-    fetch(t).then((h) => h.blob()).then((h) => {
-      const x = URL.createObjectURL(h), L = document.createElement("a");
-      L.href = x, L.download = o, document.body.appendChild(L), L.click(), document.body.removeChild(L), URL.revokeObjectURL(x);
-    }).catch(() => window.open(t, "_blank"));
-  }, [t, o]);
-  return /* @__PURE__ */ m(F, { gap: "sm", wrap: "nowrap", className: Q.root, children: [
-    /* @__PURE__ */ e("audio", { ref: w, src: t, preload: "metadata" }),
-    /* @__PURE__ */ e(
-      Y,
-      {
-        variant: "filled",
-        radius: "xl",
-        size: s,
-        color: a,
-        onClick: E,
-        "aria-label": i ? "Pause" : "Play",
-        className: Q.playButton,
-        children: i ? /* @__PURE__ */ e(Ce, { size: s * 0.5 }) : /* @__PURE__ */ e(ke, { size: s * 0.5 })
-      }
-    ),
-    /* @__PURE__ */ e(N, { size: "xs", ff: "monospace", c: "dimmed", className: Q.time, children: b }),
-    /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-      le,
-      {
-        audioRef: w,
-        currentTime: u,
-        onSeek: G,
-        waveColor: r,
-        progressColor: f,
-        height: y,
-        barWidth: g,
-        barGap: _
-      }
-    ) }),
-    /* @__PURE__ */ e(N, { size: "xs", ff: "monospace", c: "dimmed", className: Q.time, children: p }),
-    l && /* @__PURE__ */ m(F, { gap: 4, wrap: "nowrap", className: Q.volumeGroup, children: [
-      /* @__PURE__ */ e(
-        Y,
-        {
-          variant: "subtle",
-          size: "sm",
-          onClick: H,
-          "aria-label": C ? "Unmute" : "Mute",
-          children: C ? /* @__PURE__ */ e(Ge, { size: 16 }) : /* @__PURE__ */ e(Re, { size: 16 })
-        }
-      ),
-      /* @__PURE__ */ e(
-        Se,
-        {
-          value: T,
-          onChange: O,
-          size: "xs",
-          w: 80,
-          "aria-label": "Volume"
-        }
-      )
-    ] }),
-    d && /* @__PURE__ */ e(Y, { variant: "subtle", size: "sm", onClick: K, "aria-label": "Download", children: /* @__PURE__ */ e(Ae, { size: 16 }) })
-  ] });
-}
-const rt = "_root_ujac8_1", ct = "_textarea_ujac8_5", _e = {
-  root: rt,
-  textarea: ct
-};
-function Ln({ code: t, filename: o, height: a = 384 }) {
-  const [s, r] = z(!1), f = S(async () => {
-    try {
-      await navigator.clipboard.writeText(t), r(!0), setTimeout(() => r(!1), 2e3);
-    } catch {
-    }
-  }, [t]);
-  return /* @__PURE__ */ m(k, { className: _e.root, children: [
-    /* @__PURE__ */ m(F, { justify: "space-between", mb: "xs", children: [
-      o && /* @__PURE__ */ e(N, { size: "sm", fw: 500, c: "dimmed", children: o }),
-      /* @__PURE__ */ e(
-        re,
-        {
-          size: "xs",
-          radius: "md",
-          color: s ? "green" : "blue",
-          onClick: f,
-          children: s ? "Copied!" : "Copy"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(
-      "textarea",
-      {
-        readOnly: !0,
-        value: t,
-        className: _e.textarea,
-        style: { height: a }
-      }
-    )
-  ] });
-}
-const lt = "_root_ix1b2_1", dt = "_toast_ix1b2_5", ve = {
-  root: lt,
-  toast: dt
-};
-function de({ value: t, children: o }) {
-  const [a, s] = z(null), r = S(() => {
-    navigator.clipboard.writeText(t).then(() => {
-      s(`Copied ${t}`), setTimeout(() => s(null), 1800);
-    });
-  }, [t]);
-  return /* @__PURE__ */ m(ze, { children: [
-    /* @__PURE__ */ e(
-      "span",
-      {
-        onClick: r,
-        className: ve.root,
-        title: `Click to copy ${t}`,
-        children: o
-      }
-    ),
-    a && /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
-      Pe,
-      {
-        withCloseButton: !1,
-        className: ve.toast,
-        color: "blue",
-        children: a
-      }
-    ) })
-  ] });
-}
-const ut = "_root_3ht5s_1", mt = "_shade_3ht5s_5", ht = "_color_3ht5s_10", pt = "_main_3ht5s_20", te = {
-  root: ut,
-  shade: mt,
-  color: ht,
-  main: pt
-};
-function Bn({ name: t, shades: o, mainIndex: a = 5 }) {
-  return /* @__PURE__ */ m("div", { className: te.root, children: [
-    /* @__PURE__ */ e(oe, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
-    /* @__PURE__ */ e(Me, { cols: 10, spacing: 4, children: o.map((s, r) => /* @__PURE__ */ e(de, { value: s, children: /* @__PURE__ */ m("div", { className: te.shade, children: [
+    return /* @__PURE__ */ l(x, { ref: h, className: ne.root, style: { height: y }, onClick: w, children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: `${te.color} ${r === a ? te.main : ""}`,
-          style: { backgroundColor: s }
+          className: ne.progressOverlay,
+          style: { width: `${c}%`, backgroundColor: `${u}15` }
         }
       ),
-      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: r }),
-      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: s })
-    ] }) }, r)) })
-  ] });
-}
-const ft = "_root_1vxkx_1", _t = "_preview_1vxkx_11", vt = "_info_1vxkx_15", ae = {
-  root: ft,
-  preview: _t,
-  info: vt
-};
-function Sn({ name: t, hex: o, label: a }) {
-  return /* @__PURE__ */ e(de, { value: o, children: /* @__PURE__ */ m(U, { className: ae.root, shadow: "lg", radius: "md", withBorder: !1, children: [
-    /* @__PURE__ */ e("div", { className: ae.preview, style: { backgroundColor: o } }),
-    /* @__PURE__ */ m("div", { className: ae.info, children: [
-      /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: t }),
-      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ff: "monospace", children: o }),
-      a && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: a })
-    ] })
-  ] }) });
-}
-const gt = "_root_dzed6_1", yt = "_dont_dzed6_7", bt = "_dontIcon_dzed6_12", wt = "_dontLabel_dzed6_13", Nt = "_doIcon_dzed6_22", It = "_doLabel_dzed6_23", q = {
-  root: gt,
-  dont: yt,
-  dontIcon: bt,
-  dontLabel: wt,
-  do: "_do_dzed6_7",
-  doIcon: Nt,
-  doLabel: It
-};
-function Tn({ items: t }) {
-  return /* @__PURE__ */ e("div", { className: q.root, children: t.map((o, a) => /* @__PURE__ */ m(Me, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
-    /* @__PURE__ */ m(U, { className: q.dont, p: "md", radius: "md", children: [
-      /* @__PURE__ */ m(F, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(Oe, { size: 16, className: q.dontIcon }),
-        /* @__PURE__ */ e(N, { size: "sm", fw: 600, className: q.dontLabel, children: "Don't" })
-      ] }),
-      /* @__PURE__ */ e(N, { size: "sm", children: o.dont })
-    ] }),
-    /* @__PURE__ */ m(U, { className: q.do, p: "md", radius: "md", children: [
-      /* @__PURE__ */ m(F, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(He, { size: 16, className: q.doIcon }),
-        /* @__PURE__ */ e(N, { size: "sm", fw: 600, className: q.doLabel, children: "Do" })
-      ] }),
-      /* @__PURE__ */ e(N, { size: "sm", children: o.do })
-    ] })
-  ] }, a)) });
-}
-const zt = "_root_xi08i_1", xt = "_inner_xi08i_6", ge = {
-  root: zt,
-  inner: xt
-};
-function Pn({
-  title: t,
-  description: o,
-  expandedContent: a,
-  icon: s,
-  color: r = "blue",
-  iconSize: f = "lg",
-  collapsedHeight: y = 120,
-  threshold: g = 0.5,
-  delay: _ = 300,
-  expanded: l,
-  onExpandedChange: d
-}) {
-  const w = D(null), [i, v] = z(!1), u = l !== void 0, c = u ? l : i;
-  return P(() => {
-    if (u) return;
-    const b = w.current;
-    if (!b) return;
-    const n = new IntersectionObserver(
-      ([p]) => {
-        p.isIntersecting && setTimeout(() => {
-          v(!0), d == null || d(!0);
-        }, _);
-      },
-      { threshold: g }
-    );
-    return n.observe(b), () => n.disconnect();
-  }, [u, g, _, d]), /* @__PURE__ */ e(
-    U,
-    {
-      ref: w,
-      radius: 4,
-      className: ge.root,
-      component: B.div,
-      animate: { height: c ? "auto" : y },
-      transition: { duration: 0.5, ease: "easeOut" },
-      children: /* @__PURE__ */ e("div", { className: ge.inner, children: /* @__PURE__ */ m(F, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
-        /* @__PURE__ */ m(ce, { gap: "xs", style: { flex: 1 }, children: [
-          /* @__PURE__ */ e(N, { fw: 700, size: "xl", lh: 1.3, children: t }),
-          /* @__PURE__ */ e(N, { size: "md", c: "dimmed", children: o }),
-          /* @__PURE__ */ e(
-            B.div,
-            {
-              initial: { opacity: 0, height: 0 },
-              animate: {
-                opacity: c ? 1 : 0,
-                height: c ? "auto" : 0
-              },
-              transition: { duration: 0.4, delay: 0.2 },
-              style: { overflow: "hidden" },
-              children: typeof a == "string" ? /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", mt: "sm", children: a }) : a
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          B.div,
-          {
-            animate: { scale: c ? 1.1 : 1 },
-            transition: { duration: 0.3 },
-            children: /* @__PURE__ */ e(We, { size: f, radius: 4, color: r, variant: "filled", children: /* @__PURE__ */ e(s, { size: 20, stroke: 1.5 }) })
-          }
-        )
-      ] }) })
-    }
-  );
-}
-const Mt = "_root_ho0ln_1", $t = "_visible_ho0ln_7", ye = {
-  root: Mt,
-  visible: $t
-};
-function Wn({
-  children: t,
-  delay: o = 0,
-  threshold: a = 0.1,
-  className: s,
-  ...r
-}) {
-  const f = D(null), [y, g] = z(!1);
-  return P(() => {
-    const _ = f.current;
-    if (!_) return;
-    const l = new IntersectionObserver(
-      ([d]) => {
-        d.isIntersecting && (o > 0 ? setTimeout(() => g(!0), o) : g(!0));
-      },
-      { threshold: a }
-    );
-    return l.observe(_), () => l.disconnect();
-  }, [o, a]), /* @__PURE__ */ e(
-    k,
-    {
-      ref: f,
-      className: `${ye.root} ${y ? ye.visible : ""} ${s ?? ""}`,
-      ...r,
-      children: t
-    }
-  );
-}
-function En({ isActive: t = !1, height: o = 60 }) {
-  const a = D(null), s = D(void 0), [r, f] = z(!1), y = D(null), g = D(null), { colorScheme: _ } = Ee(), l = _ === "dark", d = {
-    start: l ? "#7950F2" : "#9775FA",
-    mid: l ? "#BE4BDB" : "#DA77F2",
-    end: l ? "#15AABF" : "#22B8CF"
-  }, w = S(
-    (i, v, u, c) => {
-      i.clearRect(0, 0, v, u);
-      const b = t || r, n = u * 0.65, p = t ? 5 : r ? 7 : 1.5;
-      b && (g.current === null && (g.current = Math.random()), Math.floor(c / 500) !== Math.floor((c - 16) / 500) && (g.current = Math.random()));
-      const I = i.createLinearGradient(0, 0, v, 0);
-      I.addColorStop(0, d.start), I.addColorStop(0.5, d.mid), I.addColorStop(1, d.end), i.strokeStyle = I, i.lineWidth = b ? 2.5 : 1.5, i.lineCap = "round", i.lineJoin = "round", b ? (i.shadowColor = d.mid, i.shadowBlur = r ? 12 : 8) : i.shadowBlur = 0, i.beginPath();
-      const T = 300, R = v / T, A = t ? 0.02 : r ? 0.025 : 3e-3;
-      for (let j = 0; j <= T; j++) {
-        const C = j * R, M = C / v;
-        let E = n;
-        if (b) {
-          const G = Math.sin(M * Math.PI * 6 + c * A) * p, O = Math.sin(M * Math.PI * 12 + c * A * 1.3) * (p * 0.4), H = Math.sin(M * Math.PI * 18 + c * A * 0.8) * (p * 0.2), K = g.current ?? 0.5, h = Math.abs(M - K), x = h < 0.15 ? (1 - h / 0.15) * p * 1 : 0, L = Math.sin(M * Math.PI * 20 + c * A * 2) * x;
-          let X = 0;
-          r && (X = Math.sin(M * Math.PI * 30 + c * 0.03) * p * 0.4, X += Math.sin(M * Math.PI * 8 + c * 0.015) * p * 0.5);
-          const Z = G + O + H + L + X, ee = Math.sin(M * Math.PI);
-          E = n + Z * ee;
+      /* @__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
+            }
+          },
+          b
+        );
+      }) }),
+      a && /* @__PURE__ */ e("div", { className: ne.loading, children: "Loading waveform..." })
+    ] });
+  }
+);
+_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
-          E += Math.sin(M * Math.PI * 2 + c * A) * p;
-        j === 0 ? i.moveTo(C, E) : i.lineTo(C, E);
+          F += Math.sin(C * Math.PI * 2 + d * O) * b;
+        j === 0 ? i.moveTo(M, F) : i.lineTo(M, F);
       }
       if (i.stroke(), t) {
-        const M = v / 80, E = 16;
+        const C = _ / 80, F = 16;
         i.shadowBlur = 3;
-        for (let G = 0; G < 80; G++) {
-          const O = G * M + M / 2, H = O / v, K = Math.sin(H * Math.PI * 8 + c * 0.025) * 0.5 + Math.sin(H * Math.PI * 14 + c * 0.018) * 0.3 + Math.sin(H * Math.PI * 4 + c * 0.03) * 0.2, h = Math.sin(H * Math.PI), x = Math.abs(K) * E * h, L = i.createLinearGradient(
-            O,
-            n - x / 2,
-            O,
-            n + x / 2
+        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
           );
-          L.addColorStop(0, d.start + "90"), L.addColorStop(0.5, d.mid + "70"), L.addColorStop(1, d.end + "50"), i.fillStyle = L, i.fillRect(O - 2 / 2, n - x / 2, 2, x);
+          B.addColorStop(0, h.start + "90"), B.addColorStop(0.5, h.mid + "70"), B.addColorStop(1, h.end + "50"), i.fillStyle = B, i.fillRect(V - 2 / 2, n - $ / 2, 2, $);
         }
       }
-      if (r)
-        for (let C = 0; C < 15; C++) {
-          const M = (Math.sin(c * 1e-3 + C * 1.5) * 0.5 + 0.5) * v, E = n + Math.sin(c * 2e-3 + C) * 8, G = 1.5 + Math.sin(c * 3e-3 + C * 2) * 0.5;
-          i.beginPath(), i.arc(M, E, G, 0, Math.PI * 2), i.fillStyle = C % 2 === 0 ? d.start + "80" : d.end + "80", i.fill();
+      if (s)
+        for (let M = 0; M < 15; M++) {
+          const 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();
         }
     },
-    [t, r, d.start, d.mid, d.end]
+    [t, s, h.start, h.mid, h.end]
   );
-  return P(() => {
-    const i = a.current;
+  return D(() => {
+    const i = r.current;
     if (!i) return;
-    const v = i.getContext("2d");
-    if (!v) return;
-    const u = () => {
-      const n = window.devicePixelRatio || 1, p = i.getBoundingClientRect();
-      i.width = p.width * n, i.height = p.height * n, v.scale(n, n);
+    const _ = 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);
     };
-    u(), window.addEventListener("resize", u);
-    const c = performance.now(), b = (n) => {
-      const p = n - c, I = i.getBoundingClientRect();
-      w(v, I.width, I.height, p), s.current = requestAnimationFrame(b);
+    c(), window.addEventListener("resize", c);
+    const d = performance.now(), w = (n) => {
+      const b = n - d, N = i.getBoundingClientRect();
+      k(_, N.width, N.height, b), a.current = requestAnimationFrame(w);
     };
-    return s.current = requestAnimationFrame(b), () => {
-      window.removeEventListener("resize", u), s.current && cancelAnimationFrame(s.current);
+    return a.current = requestAnimationFrame(w), () => {
+      window.removeEventListener("resize", c), a.current && cancelAnimationFrame(a.current);
     };
-  }, [w]), P(() => {
+  }, [k]), D(() => {
     if (t) {
-      queueMicrotask(() => f(!1)), y.current = Date.now();
+      queueMicrotask(() => u(!1)), y.current = Date.now();
       return;
     }
-    const v = setInterval(() => {
-      const u = Date.now();
-      y.current === null && (y.current = u);
-      const c = u - y.current, b = 12e4 + Math.random() * 6e4;
-      c >= b && !r && (f(!0), y.current = u, setTimeout(() => f(!1), 4e3));
+    const _ = 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(v);
-  }, [t, r]), /* @__PURE__ */ e(
-    k,
+    return () => clearInterval(_);
+  }, [t, s]), /* @__PURE__ */ e(
+    x,
     {
       style: {
         position: "relative",
@@ -674,12 +728,12 @@ function En({ isActive: t = !1, height: o = 60 }) {
         height: o,
         overflow: "hidden",
         pointerEvents: "none",
-        opacity: l ? 1 : 0.8
+        opacity: m ? 1 : 0.8
       },
       children: /* @__PURE__ */ e(
         "canvas",
         {
-          ref: a,
+          ref: r,
           style: {
             width: "100%",
             height: "100%",
@@ -690,19 +744,78 @@ function En({ isActive: t = !1, height: o = 60 }) {
     }
   );
 }
-const Ct = "_root_9li00_1", kt = "_preview_9li00_11", Lt = "_info_9li00_15", ie = {
-  root: Ct,
-  preview: kt,
-  info: Lt
+const 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 [r, a] = T(null), s = L(() => {
+    navigator.clipboard.writeText(t).then(() => {
+      a(`Copied ${t}`), setTimeout(() => a(null), 1800);
+    });
+  }, [t]);
+  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 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 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(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: `${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: a })
+    ] }) }, s)) })
+  ] });
+}
+const un = "_root_1vxkx_1", gn = "_preview_1vxkx_11", pn = "_info_1vxkx_15", ge = {
+  root: un,
+  preview: gn,
+  info: pn
+};
+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 }),
+      r && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: r })
+    ] })
+  ] }) });
+}
+const fn = "_root_9li00_1", _n = "_preview_9li00_11", bn = "_info_9li00_15", pe = {
+  root: fn,
+  preview: _n,
+  info: bn
 };
-function Dn({ name: t, colors: o, description: a }) {
-  const s = `linear-gradient(135deg, ${o[0]} 0%, ${o[1]} 100%)`;
-  return /* @__PURE__ */ e(de, { value: s, children: /* @__PURE__ */ m(U, { className: ie.root, shadow: "lg", radius: "md", children: [
-    /* @__PURE__ */ e("div", { className: ie.preview, style: { background: s } }),
-    /* @__PURE__ */ m("div", { className: ie.info, children: [
-      /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: t }),
-      a && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: a }),
-      /* @__PURE__ */ m(N, { size: "xs", c: "dimmed", ff: "monospace", children: [
+function 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]
@@ -710,167 +823,493 @@ function Dn({ name: t, colors: o, description: a }) {
     ] })
   ] }) });
 }
-const Bt = "_root_1vlvy_1", St = "_video_1vlvy_9", be = {
-  root: Bt,
-  video: 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 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 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 Tt({ src: t, opacity: o = 0.3 }) {
-  return /* @__PURE__ */ e("div", { className: be.root, style: { opacity: o }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: be.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
+function fe(t) {
+  const o = Math.floor(t / 60), r = Math.floor(t % 60);
+  return `${o.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
 }
-const Pt = "_root_1suaa_1", Wt = "_content_1suaa_8", Et = "_label_1suaa_21", Dt = "_vignette_1suaa_37", Ft = "_logoWrapper_1suaa_50", jt = "_logo_1suaa_50", Gt = "_glow_1suaa_73", Rt = "_textWrapper_1suaa_85", At = "_heading_1suaa_91", Ot = "_shimmer_1suaa_125", Ht = "_tagline_1suaa_129", Vt = "_primaryButton_1suaa_143", qt = "_secondaryButton_1suaa_148", Ut = "_scrollIndicator_1suaa_160", Xt = "_scrollLabel_1suaa_171", Yt = "_scrollLine_1suaa_179", $ = {
-  root: Pt,
-  content: Wt,
-  label: Et,
-  vignette: Dt,
-  logoWrapper: Ft,
-  logo: jt,
-  glow: Gt,
-  textWrapper: Rt,
-  heading: At,
-  shimmer: Ot,
-  tagline: Ht,
-  primaryButton: Vt,
-  secondaryButton: qt,
-  scrollIndicator: Ut,
-  scrollLabel: Xt,
-  scrollLine: Yt
+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 })
+      }
+    ),
+    /* @__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 })
+        }
+      ),
+      /* @__PURE__ */ e(
+        Qe,
+        {
+          value: P,
+          onChange: V,
+          size: "xs",
+          w: 80,
+          "aria-label": "Volume"
+        }
+      )
+    ] }),
+    h && /* @__PURE__ */ e(ee, { variant: "subtle", size: "sm", onClick: te, "aria-label": "Download", children: /* @__PURE__ */ e(mt, { size: 16 }) })
+  ] });
+}
+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 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 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 Fn({
+function Ro({
   variant: t = "logo",
   heading: o,
-  label: a,
-  tagline: s,
-  logoSrc: r = qe,
-  gradient: f = "frequencyAlive",
+  label: r,
+  tagline: a,
+  logoSrc: s = ht,
+  gradient: u = "frequencyAlive",
   shimmer: y = !0,
   primaryAction: g,
-  secondaryAction: _,
-  backgroundVideoSrc: l,
-  showWaveform: d,
-  showScrollIndicator: w = !1
+  secondaryAction: p,
+  backgroundVideoSrc: m,
+  showWaveform: h,
+  showScrollIndicator: k = !1
 }) {
-  const [i, v] = z(!1), u = typeof r == "string" ? r : r == null ? void 0 : r.src, c = o ?? (t === "text" ? "Your Message" : void 0), b = a || (t === "logo" ? "Welcome" : void 0), n = g || _, p = d ?? !0, I = Ue[f];
-  return P(() => {
-    v(!0);
-  }, []), /* @__PURE__ */ m(k, { component: "section", className: $.root, children: [
-    l && /* @__PURE__ */ e(Tt, { src: l }),
-    /* @__PURE__ */ m("div", { className: $.content, children: [
-      i && /* @__PURE__ */ m(ze, { children: [
-        b && /* @__PURE__ */ e(
-          B.p,
+  const [i, _] = 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(
+          S.p,
           {
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             transition: { duration: 0.8, delay: 0.2 },
-            className: $.label,
-            children: b
+            className: z.label,
+            children: w
           }
         ),
-        t === "logo" && /* @__PURE__ */ m(
-          B.div,
+        t === "logo" && /* @__PURE__ */ l(
+          S.div,
           {
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
-            className: $.logoWrapper,
+            className: z.logoWrapper,
             children: [
-              p && /* @__PURE__ */ e(fe, {}),
-              p && /* @__PURE__ */ e("div", { className: $.vignette }),
+              b && /* @__PURE__ */ e(ze, {}),
+              b && /* @__PURE__ */ e("div", { className: z.vignette }),
               /* @__PURE__ */ e(
-                B.img,
+                S.img,
                 {
-                  src: u,
-                  alt: c ?? "Frequency",
-                  className: $.logo,
+                  src: c,
+                  alt: d ?? "Frequency",
+                  className: z.logo,
                   animate: { rotate: [0, 0.5, -0.5, 0] },
                   transition: { duration: 8, repeat: 1 / 0, ease: "easeInOut" }
                 }
               ),
-              /* @__PURE__ */ e("div", { className: $.glow })
+              /* @__PURE__ */ e("div", { className: z.glow })
             ]
           }
         ),
-        t === "text" && c && /* @__PURE__ */ m(
-          B.div,
+        t === "text" && d && /* @__PURE__ */ l(
+          S.div,
           {
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
-            className: $.textWrapper,
+            className: z.textWrapper,
             children: [
-              p && /* @__PURE__ */ e(fe, {}),
-              p && /* @__PURE__ */ e("div", { className: $.vignette }),
+              b && /* @__PURE__ */ e(ze, {}),
+              b && /* @__PURE__ */ e("div", { className: z.vignette }),
               /* @__PURE__ */ e(
-                oe,
+                se,
                 {
                   order: 1,
-                  className: `${$.heading} ${y ? $.shimmer : ""}`,
+                  className: `${z.heading} ${y ? z.shimmer : ""}`,
                   style: {
-                    backgroundImage: `linear-gradient(135deg, ${I.from}, ${I.to}, ${I.from})`,
+                    backgroundImage: `linear-gradient(135deg, ${N.from}, ${N.to}, ${N.from})`,
                     backgroundSize: y ? "200% 100%" : void 0
                   },
-                  children: c
+                  children: d
                 }
               )
             ]
           }
         ),
-        s && /* @__PURE__ */ e(
-          B.div,
+        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(N, { className: $.tagline, children: s })
+            children: /* @__PURE__ */ e(v, { className: z.tagline, children: a })
           }
         ),
         n && /* @__PURE__ */ e(
-          B.div,
+          S.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.8, delay: 0.9 },
-            children: /* @__PURE__ */ m(F, { gap: "md", justify: "center", wrap: "wrap", children: [
+            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,
-                  className: $.primaryButton,
+                  className: z.primaryButton,
                   children: g.label
                 }
               ),
-              _ && /* @__PURE__ */ e(
-                re,
+              p && /* @__PURE__ */ e(
+                ae,
                 {
                   component: "a",
-                  href: _.href,
+                  href: p.href,
                   size: "lg",
                   radius: 4,
                   variant: "outline",
-                  className: $.secondaryButton,
-                  children: _.label
+                  className: z.secondaryButton,
+                  children: p.label
                 }
               )
             ] })
           }
         )
       ] }),
-      i && w && /* @__PURE__ */ m(
-        B.div,
+      i && k && /* @__PURE__ */ l(
+        S.div,
         {
-          className: $.scrollIndicator,
+          className: z.scrollIndicator,
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           transition: { duration: 1, delay: 1.4 },
           children: [
-            /* @__PURE__ */ e("span", { className: $.scrollLabel, children: "Scroll" }),
+            /* @__PURE__ */ e("span", { className: z.scrollLabel, children: "Scroll" }),
             /* @__PURE__ */ e(
-              B.div,
+              S.div,
               {
-                className: $.scrollLine,
+                className: z.scrollLine,
                 animate: { scaleY: [1, 1.5, 1] },
                 transition: { duration: 1.5, repeat: 1 / 0 }
               }
@@ -881,350 +1320,165 @@ function Fn({
     ] })
   ] });
 }
-function we({ variant: t, children: o }) {
-  const a = t === "do";
-  return /* @__PURE__ */ m(
-    $e,
-    {
-      variant: "light",
-      color: a ? "green" : "red",
-      size: "lg",
-      radius: "sm",
-      styles: {
-        root: { textTransform: "none", fontWeight: 400 },
-        label: { whiteSpace: "normal", lineHeight: 1.4 }
-      },
-      children: [
-        /* @__PURE__ */ m("strong", { children: [
-          a ? "Do" : "Don't",
-          ":"
-        ] }),
-        " ",
-        o
-      ]
-    }
-  );
-}
-const Kt = "_root_13w21_1", Jt = "_playButton_13w21_11", Ne = {
-  root: Kt,
-  playButton: Jt
-}, Qt = {
-  mini: { height: 24, buttonSize: 20, iconSize: 14, waveHeight: 16, barWidth: 1, barGap: 0 },
-  small: { height: 32, buttonSize: 28, iconSize: 16, waveHeight: 20, barWidth: 1, barGap: 0 },
-  compact: { height: 40, buttonSize: 32, iconSize: 18, waveHeight: 24, barWidth: 2, barGap: 1 }
-}, Zt = xe(
-  ({
-    audioUrl: t,
-    size: o = "mini",
-    waveColor: a = "#CCCCCC",
-    progressColor: s = "#169bde",
-    onPlay: r,
-    onPause: f,
-    className: y,
-    style: g
-  }, _) => {
-    const l = D(null), [d, w] = z(!1), [i, v] = z(0), u = Qt[o];
-    P(() => {
-      const n = l.current;
-      if (!n) return;
-      const p = () => v(n.currentTime), I = () => {
-        w(!1), v(0);
-      }, T = () => w(!1), R = () => w(!0);
-      return n.addEventListener("timeupdate", p), n.addEventListener("ended", I), n.addEventListener("pause", T), n.addEventListener("play", R), () => {
-        n.removeEventListener("timeupdate", p), n.removeEventListener("ended", I), n.removeEventListener("pause", T), n.removeEventListener("play", R);
-      };
-    }, [t]);
-    const c = S(() => {
-      const n = l.current;
-      n && (d ? (n.pause(), f == null || f()) : (n.play().catch(() => {
-      }), r == null || r()));
-    }, [d, r, f]), b = S((n) => {
-      const p = l.current;
-      p && !isNaN(n) && isFinite(n) && (p.currentTime = n, v(n));
-    }, []);
-    return /* @__PURE__ */ m(
-      F,
-      {
-        ref: _,
-        gap: o === "mini" ? 6 : o === "small" ? 8 : 10,
-        wrap: "nowrap",
-        className: `${Ne.root} ${y ?? ""}`,
-        style: { height: u.height, ...g },
-        children: [
-          /* @__PURE__ */ e("audio", { ref: l, src: t, preload: "metadata" }),
-          /* @__PURE__ */ e(
-            Y,
-            {
-              variant: "filled",
-              color: "blue",
-              radius: "xl",
-              size: u.buttonSize,
-              onClick: c,
-              "aria-label": d ? "Pause" : "Play",
-              className: Ne.playButton,
-              children: d ? /* @__PURE__ */ e(Ce, { size: u.iconSize }) : /* @__PURE__ */ e(ke, { size: u.iconSize })
-            }
-          ),
-          /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
-            le,
-            {
-              audioRef: l,
-              currentTime: i,
-              onSeek: b,
-              waveColor: a,
-              progressColor: s,
-              height: u.waveHeight,
-              barWidth: u.barWidth,
-              barGap: u.barGap
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Zt.displayName = "MiniAudioPlayer";
-const en = "_root_1bah1_1", tn = {
-  root: en
-};
-function jn({
-  accentColor: t,
-  title: o,
-  description: a,
-  doHint: s,
-  dontHint: r
-}) {
-  return /* @__PURE__ */ m(
-    U,
-    {
-      className: tn.root,
-      p: "lg",
-      radius: "md",
-      style: { borderLeftColor: t },
-      children: [
-        /* @__PURE__ */ e(oe, { order: 3, size: "h4", mb: "xs", children: o }),
-        /* @__PURE__ */ e(N, { c: "dimmed", children: a }),
-        (s || r) && /* @__PURE__ */ m(F, { gap: "sm", mt: "md", wrap: "wrap", children: [
-          s && /* @__PURE__ */ e(we, { variant: "do", children: s }),
-          r && /* @__PURE__ */ e(we, { variant: "dont", children: r })
-        ] })
-      ]
-    }
-  );
-}
-const nn = "_root_ydu7j_1", on = "_actions_ydu7j_22", sn = "_fab_ydu7j_43", an = "_actionButton_ydu7j_61", ne = {
-  root: nn,
-  actions: on,
-  fab: sn,
-  actionButton: an
-};
-function Gn({
-  actions: t,
-  icon: o,
-  openIcon: a,
-  direction: s = "up",
-  color: r = "blue",
-  size: f = 56,
-  defaultOpen: y = !1,
-  open: g,
-  onOpenChange: _,
-  style: l,
-  className: d
-}) {
-  const [w, i] = z(y), v = g ?? w, u = S(() => {
-    const n = !v;
-    i(n), _ == null || _(n);
-  }, [v, _]), c = S(() => {
-    i(!1), _ == null || _(!1);
-  }, [_]), b = s === "up" || s === "down";
-  return /* @__PURE__ */ m(
-    k,
-    {
-      className: `${ne.root} ${d ?? ""}`,
-      style: l,
-      "data-direction": s,
-      children: [
-        /* @__PURE__ */ e("div", { className: ne.actions, "data-direction": s, children: t.map((n, p) => {
-          const I = s === "up" || s === "left" ? t.length - 1 - p : p;
-          return /* @__PURE__ */ e(
-            De,
-            {
-              mounted: v,
-              transition: b ? "slide-up" : "slide-right",
-              duration: 200,
-              timingFunction: "ease",
-              enterDelay: I * 40,
-              children: (T) => /* @__PURE__ */ e(Fe, { label: n.label, position: b ? "left" : "top", children: /* @__PURE__ */ e(
-                Y,
-                {
-                  variant: "filled",
-                  color: "gray",
-                  radius: "xl",
-                  size: f * 0.7,
-                  style: T,
-                  className: ne.actionButton,
-                  onClick: () => {
-                    n.onClick(), c();
-                  },
-                  "aria-label": n.label,
-                  children: n.icon
-                }
-              ) })
-            },
-            n.label
-          );
-        }) }),
-        /* @__PURE__ */ e(
-          Y,
-          {
-            variant: "filled",
-            color: r,
-            radius: "xl",
-            size: f,
-            onClick: u,
-            className: ne.fab,
-            "data-open": v || void 0,
-            "aria-label": v ? "Close actions" : "Open actions",
-            children: v ? a ?? o ?? /* @__PURE__ */ e(ue, { size: f * 0.45 }) : o ?? /* @__PURE__ */ e(ue, { size: f * 0.45 })
-          }
-        )
-      ]
-    }
-  );
-}
-const rn = "_container_9xj91_1", cn = "_layout_9xj91_16", ln = "_reversed_9xj91_29", dn = "_headingSide_9xj91_39", un = "_sticky_9xj91_49", mn = "_stickyInner_9xj91_54", hn = "_contentSide_9xj91_65", pn = "_title_9xj91_76", fn = "_preTitle_9xj91_82", _n = "_titleHighlight_9xj91_88", vn = "_description_9xj91_95", W = {
-  container: rn,
-  layout: cn,
-  reversed: ln,
-  headingSide: dn,
-  sticky: un,
-  stickyInner: mn,
-  contentSide: hn,
-  title: pn,
-  preTitle: fn,
-  titleHighlight: _n,
-  description: vn
+const 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 Rn({
+function Oo({
   badge: t,
   badgeColor: o = "violet",
-  subtitle: a,
-  title: s,
-  titleColor: r = "blue",
-  preTitle: f,
+  subtitle: r,
+  title: a,
+  titleColor: s = "blue",
+  preTitle: u,
   description: y,
   actions: g,
-  heading: _,
-  children: l,
-  stickyHeading: d = !1,
-  py: w,
+  heading: p,
+  children: m,
+  stickyHeading: h = !1,
+  py: k,
   reversed: i = !1,
-  id: v,
-  className: u
+  id: _,
+  className: c
 }) {
-  const c = _ ?? /* @__PURE__ */ m(ce, { gap: "sm", children: [
-    t && /* @__PURE__ */ m(k, { children: [
-      /* @__PURE__ */ e(
-        $e,
-        {
-          color: o,
-          variant: "filled",
-          size: "sm",
-          radius: 4,
-          tt: "uppercase",
-          fw: 700,
-          children: t
-        }
-      ),
-      a && /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a })
+  const d = p ?? /* @__PURE__ */ l(X, { gap: "sm", children: [
+    t && /* @__PURE__ */ l(x, { children: [
+      /* @__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(N, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a }),
-    (f || s) && /* @__PURE__ */ m(oe, { order: 2, className: W.title, children: [
-      f && /* @__PURE__ */ e("span", { className: W.preTitle, children: f }),
-      f && /* @__PURE__ */ e("br", {}),
-      s && /* @__PURE__ */ e(
-        N,
-        {
-          component: "span",
-          inherit: !0,
-          className: W.titleHighlight,
-          c: r,
-          children: s
-        }
-      )
+    !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(N, { size: "lg", c: "dimmed", lh: 1.7, className: W.description, children: y }),
-    g && /* @__PURE__ */ e(k, { mt: "md", children: g })
+    y && /* @__PURE__ */ e(v, { size: "lg", c: "dimmed", lh: 1.7, className: W.description, children: y }),
+    g && /* @__PURE__ */ e(x, { mt: "md", children: g })
   ] });
   return /* @__PURE__ */ e(
-    k,
+    x,
     {
       component: "section",
-      py: w ?? "calc(var(--mantine-spacing-xl) * 3)",
+      py: k ?? "calc(var(--mantine-spacing-xl) * 3)",
       pos: "relative",
-      id: v,
-      className: u,
-      children: /* @__PURE__ */ e(k, { className: W.container, children: /* @__PURE__ */ m(k, { className: `${W.layout} ${i ? W.reversed : ""}`, children: [
-        /* @__PURE__ */ e(
-          k,
-          {
-            className: `${W.headingSide} ${d ? W.sticky : ""}`,
-            children: /* @__PURE__ */ e(k, { className: d ? W.stickyInner : void 0, children: c })
-          }
-        ),
-        /* @__PURE__ */ e(k, { className: W.contentSide, children: l })
+      id: _,
+      className: c,
+      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 gn = "_root_ioshc_1", yn = "_quoteIcon_ioshc_6", Ie = {
-  root: gn,
-  quoteIcon: yn
-};
-function bn(t) {
-  return t.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2);
-}
-function An({
-  quote: t,
-  name: o,
-  role: a,
-  company: s,
-  avatarSrc: r,
-  accentColor: f = "blue"
+function Vo({
+  value: t,
+  suffix: o = "",
+  prefix: r = "",
+  duration: a = 2e3,
+  threshold: s = 0.5,
+  abbreviate: u = !0,
+  decimals: y,
+  ...g
 }) {
-  const y = `var(--mantine-color-${f}-filled)`;
-  return /* @__PURE__ */ m(U, { className: Ie.root, p: "lg", radius: "md", style: { borderLeftColor: y }, children: [
-    /* @__PURE__ */ e(Ve, { size: 32, className: Ie.quoteIcon, color: y }),
-    /* @__PURE__ */ e(N, { fs: "italic", mt: "xs", mb: "md", children: t }),
-    /* @__PURE__ */ m(F, { gap: "sm", children: [
-      /* @__PURE__ */ e(je, { src: r, alt: o, color: f, radius: "xl", size: "md", children: bn(o) }),
-      /* @__PURE__ */ m(ce, { gap: 0, children: [
-        /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: o }),
-        (a || s) && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: [a, s].filter(Boolean).join(", ") })
-      ] })
-    ] })
+  const [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`;
+      }
+      return y !== void 0 ? p.toFixed(y) : t !== Math.floor(t) ? p.toFixed(1) : Math.round(p).toString();
+    })(),
+    o
+  ] });
+}
+const go = "_root_ujac8_1", po = "_textarea_ujac8_5", Le = {
+  root: go,
+  textarea: po
+};
+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 {
-  Cn as AnimatedCounter,
-  fe as AnimatedWaveform,
-  kn as AudioPlayer,
-  le as AudioWaveform,
-  Ln as CodeBlock,
-  Bn as ColorPalette,
-  Sn as ColorSwatch,
-  de as Copyable,
-  Tn as DosDonts,
-  Pn as ExpandableCard,
-  Wn as FadeInSection,
-  En as FrequencyWave,
-  Dn as GradientSwatch,
-  Fn as Hero,
-  we as HintBadge,
-  Zt as MiniAudioPlayer,
-  jn as PrincipleCard,
-  Gn as SpeedDial,
-  Rn as SplitSection,
-  An as TestimonialCard,
-  Tt as VideoBackground
+  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,
+  tr as Divider,
+  Po as DonutChart,
+  Bo as DosDonts,
+  So as ExpandableCard,
+  de as FadeInSection,
+  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
 };