@frequencyads/components 0.1.10 → 0.1.11

package/dist/index.mjs

@@ -1,94 +1,94 @@
 'use client';
-import { useMantineColorScheme as Le, Anchor as Se, Text as v, Box as x, Container as Ge, Title as te, SimpleGrid as se, Card as _e, Stack as A, Group as I, Image as oe, Paper as X, ThemeIcon as Pe, Button as J, Badge as Ee, Avatar as Re, Portal as Oe, Notification as Ve, useComputedColorScheme as He, ActionIcon as ee, Slider as Ue, Transition as Xe, Tooltip as Ye } from "@mantine/core";
-import { Anchor as So, AspectRatio as Po, Badge as Eo, Box as Fo, Button as Wo, Card as qo, Center as Ao, Container as jo, Divider as Go, Flex as Ro, Grid as Oo, Group as Vo, Image as Ho, Paper as Uo, SimpleGrid as Xo, Stack as Yo, Text as Ko, ThemeIcon as Jo, Title as Qo } from "@mantine/core";
-import { jsx as e, jsxs as l, Fragment as Fe } from "react/jsx-runtime";
-import { fonts as be } from "@frequencyads/brand/typography";
-import { useRef as q, useState as T, useEffect as S, forwardRef as We, useImperativeHandle as Ke, useCallback as L } from "react";
-import { IconX as Je, IconCheck as Qe, IconQuote as Ze, IconPlayerPauseFilled as qe, IconPlayerPlayFilled as Ae, IconVolumeOff as et, IconVolume as tt, IconDownload as nt, IconPlus as ve } from "@tabler/icons-react";
-import { motion as D } from "framer-motion";
-import ot from "@frequencyads/brand/assets/frequency-mark-white.svg";
-import { gradients as rt } from "@frequencyads/brand/colors";
-const at = "_container_4mojd_1", st = "_appName_4mojd_7", ye = {
-  container: at,
-  appName: st
+import { useMantineColorScheme as Ee, Anchor as Fe, Text as y, Box as k, Container as Ue, Title as oe, SimpleGrid as ce, Card as xe, Stack as A, Group as I, Image as re, Paper as Y, ThemeIcon as qe, Button as J, Badge as Ae, Avatar as Ye, Portal as Xe, Notification as Ke, useComputedColorScheme as Je, ActionIcon as te, Slider as Qe, Transition as Ze, Tooltip as et } from "@mantine/core";
+import { Anchor as or, AspectRatio as nr, Badge as rr, Box as ar, Button as sr, Card as ir, Center as lr, Container as cr, Divider as dr, Flex as mr, Grid as ur, Group as hr, Image as gr, Paper as pr, SimpleGrid as fr, Stack as _r, Text as br, ThemeIcon as vr, Title as yr } from "@mantine/core";
+import { jsx as e, jsxs as i, Fragment as je } from "react/jsx-runtime";
+import { fonts as ke } from "@frequencyads/brand/typography";
+import { useRef as W, useState as $, useEffect as D, forwardRef as Re, useImperativeHandle as tt, useCallback as S } from "react";
+import { IconX as ot, IconCheck as nt, IconQuote as rt, IconPlayerPauseFilled as Ge, IconPlayerPlayFilled as Oe, IconVolumeOff as at, IconVolume as st, IconDownload as it, IconPlus as we } from "@tabler/icons-react";
+import { motion as M, useScroll as Ve, useTransform as le } from "framer-motion";
+import lt from "@frequencyads/brand/assets/frequency-mark-white.svg";
+import { gradients as ct } from "@frequencyads/brand/colors";
+const dt = "_container_4mojd_1", mt = "_appName_4mojd_7", Ne = {
+  container: dt,
+  appName: mt
 };
-function uo({
+function Ln({
   appName: t,
-  textColor: n,
-  href: r = "/",
-  ...a
+  textColor: o,
+  href: n = "/",
+  ...r
 }) {
-  const { colorScheme: s } = Le(), _ = s === "dark" ? "dark.0" : "gray.9";
+  const { colorScheme: a } = Ee(), f = a === "dark" ? "dark.0" : "gray.9";
   return /* @__PURE__ */ e(
-    Se,
+    Fe,
     {
-      href: r,
-      className: ye.container,
+      href: n,
+      className: Ne.container,
       underline: "never",
       style: {
         // @ts-ignore - CSS custom properties
-        "--heading-font-family": be.heading.family,
-        "--heading-font-weight-semibold": be.heading.weights.semibold
+        "--heading-font-family": ke.heading.family,
+        "--heading-font-weight-semibold": ke.heading.weights.semibold
       },
-      ...a,
-      children: /* @__PURE__ */ e(v, { className: ye.appName, c: n ?? _, children: t })
+      ...r,
+      children: /* @__PURE__ */ e(y, { className: Ne.appName, c: o ?? f, children: t })
     }
   );
 }
-const it = "_root_6irix_1", lt = "_visible_6irix_9", ke = {
-  root: it,
-  visible: lt
+const ut = "_root_6irix_1", ht = "_visible_6irix_9", $e = {
+  root: ut,
+  visible: ht
 };
-function ce({
+function ue({
   children: t,
-  delay: n = 0,
-  threshold: r = 0.1,
-  className: a,
-  ...s
+  delay: o = 0,
+  threshold: n = 0.1,
+  className: r,
+  ...a
 }) {
-  const h = q(null), [_, g] = T(!1);
-  return S(() => {
-    const p = h.current;
-    if (!p) return;
-    const m = new IntersectionObserver(
-      ([u]) => {
-        u.isIntersecting && (n > 0 ? setTimeout(() => g(!0), n) : g(!0));
+  const u = W(null), [f, p] = $(!1);
+  return D(() => {
+    const h = u.current;
+    if (!h) return;
+    const c = new IntersectionObserver(
+      ([g]) => {
+        g.isIntersecting && (o > 0 ? setTimeout(() => p(!0), o) : p(!0));
       },
-      { threshold: r }
+      { threshold: n }
     );
-    return m.observe(p), () => m.disconnect();
-  }, [n, r]), /* @__PURE__ */ e(
-    x,
+    return c.observe(h), () => c.disconnect();
+  }, [o, n]), /* @__PURE__ */ e(
+    k,
     {
-      ref: h,
-      className: `${ke.root} ${_ ? ke.visible : ""} ${a ?? ""}`,
-      ...s,
+      ref: u,
+      className: `${$e.root} ${f ? $e.visible : ""} ${r ?? ""}`,
+      ...a,
       children: t
     }
   );
 }
-const ct = "_root_1bo86_1", dt = "_label_1bo86_6", mt = "_title_1bo86_11", ht = "_description_1bo86_17", ut = "_logoCard_1bo86_22", Z = {
-  root: ct,
-  label: dt,
-  title: mt,
-  description: ht,
-  logoCard: ut
+const gt = "_root_1bo86_1", pt = "_label_1bo86_6", ft = "_title_1bo86_11", _t = "_description_1bo86_17", bt = "_logoCard_1bo86_22", Z = {
+  root: gt,
+  label: pt,
+  title: ft,
+  description: _t,
+  logoCard: bt
 };
-function go({
+function Sn({
   title: t = "Our Logos",
-  label: n = "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."
+  label: o = "Identity",
+  description: n = "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: Z.root, children: /* @__PURE__ */ l(Ge, { size: "xl", children: [
-    /* @__PURE__ */ l(ce, { children: [
-      /* @__PURE__ */ e(v, { className: Z.label, size: "xs", tt: "uppercase", c: "blue.5", mb: "xs", children: n }),
-      /* @__PURE__ */ e(te, { order: 2, className: Z.title, mb: "lg", children: t }),
-      /* @__PURE__ */ e(v, { className: Z.description, size: "lg", c: "gray.6", mb: 60, maw: 600, children: r })
+  return /* @__PURE__ */ e("section", { className: Z.root, children: /* @__PURE__ */ i(Ue, { size: "xl", children: [
+    /* @__PURE__ */ i(ue, { children: [
+      /* @__PURE__ */ e(y, { className: Z.label, size: "xs", tt: "uppercase", c: "blue.5", mb: "xs", children: o }),
+      /* @__PURE__ */ e(oe, { order: 2, className: Z.title, mb: "lg", children: t }),
+      /* @__PURE__ */ e(y, { className: Z.description, size: "lg", c: "gray.6", mb: 60, maw: 600, children: n })
     ] }),
-    /* @__PURE__ */ l(se, { cols: { base: 1, lg: 2 }, spacing: 32, mb: 48, children: [
-      /* @__PURE__ */ e(ce, { delay: 100, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Z.logoCard, children: /* @__PURE__ */ l(A, { gap: 0, children: [
+    /* @__PURE__ */ i(ce, { cols: { base: 1, lg: 2 }, spacing: 32, mb: 48, children: [
+      /* @__PURE__ */ e(ue, { delay: 100, children: /* @__PURE__ */ e(xe, { padding: 0, radius: "lg", className: Z.logoCard, children: /* @__PURE__ */ i(A, { gap: 0, children: [
         /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "white", h: 240, children: /* @__PURE__ */ e(
-          oe,
+          re,
           {
             src: "/images/Frequency_logo-light.png",
             alt: "Frequency textmark on light",
@@ -97,7 +97,7 @@ function go({
           }
         ) }),
         /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "gray.9", h: 240, children: /* @__PURE__ */ e(
-          oe,
+          re,
           {
             src: "/images/Frequency_logo-dark.png",
             alt: "Frequency textmark on dark",
@@ -105,12 +105,12 @@ function go({
             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(k, { p: "md", bg: "gray.1", children: /* @__PURE__ */ e(y, { size: "sm", c: "gray.6", fw: 600, ff: "Montserrat, sans-serif", children: "Primary Textmark" }) })
       ] }) }) }),
-      /* @__PURE__ */ e(ce, { delay: 200, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Z.logoCard, children: /* @__PURE__ */ l(A, { gap: 0, children: [
-        /* @__PURE__ */ l(se, { cols: 3, children: [
+      /* @__PURE__ */ e(ue, { delay: 200, children: /* @__PURE__ */ e(xe, { padding: 0, radius: "lg", className: Z.logoCard, children: /* @__PURE__ */ i(A, { gap: 0, children: [
+        /* @__PURE__ */ i(ce, { cols: 3, children: [
           /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "white", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
-            oe,
+            re,
             {
               src: "/images/new-frequency-logo.png",
               alt: "Brand mark on light",
@@ -120,7 +120,7 @@ function go({
             }
           ) }),
           /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "gray.9", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
-            oe,
+            re,
             {
               src: "/images/frequency-mark-white.svg",
               alt: "Brand mark on dark",
@@ -139,7 +139,7 @@ function go({
                 background: "linear-gradient(135deg, #169BDE 0%, #7E57C2 100%)"
               },
               children: /* @__PURE__ */ e(
-                oe,
+                re,
                 {
                   src: "/images/frequency-mark-white.svg",
                   alt: "Brand mark on gradient",
@@ -151,11 +151,11 @@ function go({
             }
           )
         ] }),
-        /* @__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(k, { p: "md", bg: "gray.1", children: /* @__PURE__ */ e(y, { size: "sm", c: "gray.6", fw: 600, ff: "Montserrat, sans-serif", children: "Circular Brand Mark" }) })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ e(ce, { delay: 300, children: /* @__PURE__ */ l(
-      Se,
+    /* @__PURE__ */ e(ue, { delay: 300, children: /* @__PURE__ */ i(
+      Fe,
       {
         href: "/logos",
         fw: 600,
@@ -180,136 +180,136 @@ function go({
     ) })
   ] }) });
 }
-function po({
+function Dn({
   title: t,
-  description: n,
-  items: r,
-  buttonText: a,
-  href: s,
-  buttons: h
+  description: o,
+  items: n,
+  buttonText: r,
+  href: a,
+  buttons: u
 }) {
-  return /* @__PURE__ */ e(X, { p: "xl", radius: "md", withBorder: !0, shadow: "sm", h: "100%", children: /* @__PURE__ */ l(A, { gap: "md", justify: "space-between", h: "100%", children: [
-    /* @__PURE__ */ l(A, { gap: "md", children: [
-      /* @__PURE__ */ e(te, { order: 3, size: "h4", children: t }),
-      n && /* @__PURE__ */ e(v, { c: "dimmed", size: "sm", children: n }),
-      r && r.length > 0 && /* @__PURE__ */ e(A, { gap: "xs", children: r.map((_, g) => /* @__PURE__ */ l(I, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
-        /* @__PURE__ */ e(Pe, { color: "gray", size: 6, radius: "xl", mt: 8, style: { flexShrink: 0 }, children: /* @__PURE__ */ e("div", {}) }),
-        /* @__PURE__ */ e(v, { size: "sm", children: _ })
-      ] }, g)) })
+  return /* @__PURE__ */ e(Y, { p: "xl", radius: "md", withBorder: !0, shadow: "sm", h: "100%", children: /* @__PURE__ */ i(A, { gap: "md", justify: "space-between", h: "100%", children: [
+    /* @__PURE__ */ i(A, { gap: "md", children: [
+      /* @__PURE__ */ e(oe, { order: 3, size: "h4", children: t }),
+      o && /* @__PURE__ */ e(y, { c: "dimmed", size: "sm", children: o }),
+      n && n.length > 0 && /* @__PURE__ */ e(A, { gap: "xs", children: n.map((f, p) => /* @__PURE__ */ i(I, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
+        /* @__PURE__ */ e(qe, { color: "gray", size: 6, radius: "xl", mt: 8, style: { flexShrink: 0 }, children: /* @__PURE__ */ e("div", {}) }),
+        /* @__PURE__ */ e(y, { size: "sm", children: f })
+      ] }, p)) })
     ] }),
-    /* @__PURE__ */ e(I, { gap: "sm", mt: "md", children: h ? h.map((_, g) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e(I, { gap: "sm", mt: "md", children: u ? u.map((f, p) => /* @__PURE__ */ e(
       J,
       {
         component: "a",
-        href: _.href,
+        href: f.href,
         download: !0,
         size: "md",
         radius: "md",
         flex: 1,
         style: { whiteSpace: "nowrap" },
-        children: _.label
+        children: f.label
       },
-      g
-    )) : /* @__PURE__ */ e(J, { component: "a", href: s, download: !0, fullWidth: !0, size: "md", radius: "md", children: a }) })
+      p
+    )) : /* @__PURE__ */ e(J, { component: "a", href: a, download: !0, fullWidth: !0, size: "md", radius: "md", children: r }) })
   ] }) });
 }
-const gt = "_root_dzed6_1", pt = "_dont_dzed6_7", ft = "_dontIcon_dzed6_12", _t = "_dontLabel_dzed6_13", bt = "_doIcon_dzed6_22", vt = "_doLabel_dzed6_23", Y = {
-  root: gt,
-  dont: pt,
-  dontIcon: ft,
-  dontLabel: _t,
+const vt = "_root_dzed6_1", yt = "_dont_dzed6_7", xt = "_dontIcon_dzed6_12", kt = "_dontLabel_dzed6_13", wt = "_doIcon_dzed6_22", Nt = "_doLabel_dzed6_23", X = {
+  root: vt,
+  dont: yt,
+  dontIcon: xt,
+  dontLabel: kt,
   do: "_do_dzed6_7",
-  doIcon: bt,
-  doLabel: vt
+  doIcon: wt,
+  doLabel: Nt
 };
-function fo({ items: t }) {
-  return /* @__PURE__ */ e("div", { className: Y.root, children: t.map((n, r) => /* @__PURE__ */ l(se, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
-    /* @__PURE__ */ l(X, { className: Y.dont, p: "md", radius: "md", children: [
-      /* @__PURE__ */ l(I, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(Je, { size: 16, className: Y.dontIcon }),
-        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: Y.dontLabel, children: "Don't" })
+function Pn({ items: t }) {
+  return /* @__PURE__ */ e("div", { className: X.root, children: t.map((o, n) => /* @__PURE__ */ i(ce, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
+    /* @__PURE__ */ i(Y, { className: X.dont, p: "md", radius: "md", children: [
+      /* @__PURE__ */ i(I, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(ot, { size: 16, className: X.dontIcon }),
+        /* @__PURE__ */ e(y, { size: "sm", fw: 600, className: X.dontLabel, children: "Don't" })
       ] }),
-      /* @__PURE__ */ e(v, { size: "sm", children: n.dont })
+      /* @__PURE__ */ e(y, { size: "sm", children: o.dont })
     ] }),
-    /* @__PURE__ */ l(X, { className: Y.do, p: "md", radius: "md", children: [
-      /* @__PURE__ */ l(I, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(Qe, { size: 16, className: Y.doIcon }),
-        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: Y.doLabel, children: "Do" })
+    /* @__PURE__ */ i(Y, { className: X.do, p: "md", radius: "md", children: [
+      /* @__PURE__ */ i(I, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(nt, { size: 16, className: X.doIcon }),
+        /* @__PURE__ */ e(y, { size: "sm", fw: 600, className: X.doLabel, children: "Do" })
       ] }),
-      /* @__PURE__ */ e(v, { size: "sm", children: n.do })
+      /* @__PURE__ */ e(y, { size: "sm", children: o.do })
     ] })
-  ] }, r)) });
+  ] }, n)) });
 }
-const yt = "_root_xi08i_1", kt = "_inner_xi08i_6", we = {
-  root: yt,
-  inner: kt
+const $t = "_root_xi08i_1", Tt = "_inner_xi08i_6", Te = {
+  root: $t,
+  inner: Tt
 };
-function _o({
+function Wn({
   title: t,
-  description: n,
-  expandedContent: r,
-  icon: a,
-  color: s = "blue",
-  iconSize: h = "lg",
-  collapsedHeight: _ = 120,
-  threshold: g = 0.5,
-  delay: p = 300,
-  expanded: m,
-  onExpandedChange: u
+  description: o,
+  expandedContent: n,
+  icon: r,
+  color: a = "blue",
+  iconSize: u = "lg",
+  collapsedHeight: f = 120,
+  threshold: p = 0.5,
+  delay: h = 300,
+  expanded: c,
+  onExpandedChange: g
 }) {
-  const k = q(null), [i, y] = T(!1), c = m !== void 0, d = c ? m : i;
-  return S(() => {
-    if (c) return;
-    const w = k.current;
+  const x = W(null), [l, b] = $(!1), d = c !== void 0, m = d ? c : l;
+  return D(() => {
+    if (d) return;
+    const w = x.current;
     if (!w) return;
-    const o = new IntersectionObserver(
-      ([b]) => {
-        b.isIntersecting && setTimeout(() => {
-          y(!0), u == null || u(!0);
-        }, p);
+    const s = new IntersectionObserver(
+      ([v]) => {
+        v.isIntersecting && setTimeout(() => {
+          b(!0), g == null || g(!0);
+        }, h);
       },
-      { threshold: g }
+      { threshold: p }
     );
-    return o.observe(w), () => o.disconnect();
-  }, [c, g, p, u]), /* @__PURE__ */ e(
-    X,
+    return s.observe(w), () => s.disconnect();
+  }, [d, p, h, g]), /* @__PURE__ */ e(
+    Y,
     {
-      ref: k,
+      ref: x,
       radius: 4,
-      className: we.root,
-      component: D.div,
-      animate: { height: d ? "auto" : _ },
+      className: Te.root,
+      component: M.div,
+      animate: { height: m ? "auto" : f },
       transition: { duration: 0.5, ease: "easeOut" },
-      children: /* @__PURE__ */ e("div", { className: we.inner, children: /* @__PURE__ */ l(I, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
-        /* @__PURE__ */ l(A, { 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: n }),
+      children: /* @__PURE__ */ e("div", { className: Te.inner, children: /* @__PURE__ */ i(I, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
+        /* @__PURE__ */ i(A, { gap: "xs", style: { flex: 1 }, children: [
+          /* @__PURE__ */ e(y, { fw: 700, size: "xl", lh: 1.3, children: t }),
+          /* @__PURE__ */ e(y, { size: "md", c: "dimmed", children: o }),
           /* @__PURE__ */ e(
-            D.div,
+            M.div,
             {
               initial: { opacity: 0, height: 0 },
               animate: {
-                opacity: d ? 1 : 0,
-                height: d ? "auto" : 0
+                opacity: m ? 1 : 0,
+                height: m ? "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
+              children: typeof n == "string" ? /* @__PURE__ */ e(y, { size: "sm", c: "dimmed", mt: "sm", children: n }) : n
             }
           )
         ] }),
-        /* @__PURE__ */ e(D.div, { animate: { scale: d ? 1.1 : 1 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ e(Pe, { size: h, radius: 4, color: s, variant: "filled", children: /* @__PURE__ */ e(a, { size: 20, stroke: 1.5 }) }) })
+        /* @__PURE__ */ e(M.div, { animate: { scale: m ? 1.1 : 1 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ e(qe, { size: u, radius: 4, color: a, variant: "filled", children: /* @__PURE__ */ e(r, { size: 20, stroke: 1.5 }) }) })
       ] }) })
     }
   );
 }
-function xe({ variant: t, children: n }) {
-  const r = t === "do";
-  return /* @__PURE__ */ l(
-    Ee,
+function Ce({ variant: t, children: o }) {
+  const n = t === "do";
+  return /* @__PURE__ */ i(
+    Ae,
     {
       variant: "light",
-      color: r ? "green" : "red",
+      color: n ? "green" : "red",
       size: "lg",
       radius: "sm",
       styles: {
@@ -317,422 +317,422 @@ function xe({ variant: t, children: n }) {
         label: { whiteSpace: "normal", lineHeight: 1.4 }
       },
       children: [
-        /* @__PURE__ */ l("strong", { children: [
-          r ? "Do" : "Don't",
+        /* @__PURE__ */ i("strong", { children: [
+          n ? "Do" : "Don't",
           ":"
         ] }),
         " ",
-        n
+        o
       ]
     }
   );
 }
-const wt = "_root_1bah1_1", xt = {
-  root: wt
+const Ct = "_root_1bah1_1", It = {
+  root: Ct
 };
-function bo({
+function En({
   accentColor: t,
-  title: n,
-  description: r,
-  doHint: a,
-  dontHint: s
+  title: o,
+  description: n,
+  doHint: r,
+  dontHint: a
 }) {
-  return /* @__PURE__ */ l(X, { className: xt.root, p: "lg", radius: "md", style: { borderLeftColor: t }, children: [
-    /* @__PURE__ */ e(te, { order: 3, size: "h4", mb: "xs", children: n }),
-    /* @__PURE__ */ e(v, { c: "dimmed", children: r }),
-    (a || s) && /* @__PURE__ */ l(I, { gap: "sm", mt: "md", wrap: "wrap", children: [
-      a && /* @__PURE__ */ e(xe, { variant: "do", children: a }),
-      s && /* @__PURE__ */ e(xe, { variant: "dont", children: s })
+  return /* @__PURE__ */ i(Y, { className: It.root, p: "lg", radius: "md", style: { borderLeftColor: t }, children: [
+    /* @__PURE__ */ e(oe, { order: 3, size: "h4", mb: "xs", children: o }),
+    /* @__PURE__ */ e(y, { c: "dimmed", children: n }),
+    (r || a) && /* @__PURE__ */ i(I, { gap: "sm", mt: "md", wrap: "wrap", children: [
+      r && /* @__PURE__ */ e(Ce, { variant: "do", children: r }),
+      a && /* @__PURE__ */ e(Ce, { variant: "dont", children: a })
     ] })
   ] });
 }
-const Nt = "_root_ioshc_1", Tt = "_quoteIcon_ioshc_6", Ne = {
-  root: Nt,
-  quoteIcon: Tt
+const zt = "_root_ioshc_1", Bt = "_quoteIcon_ioshc_6", Ie = {
+  root: zt,
+  quoteIcon: Bt
 };
-function $t(t) {
-  return t.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+function Mt(t) {
+  return t.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2);
 }
-function vo({
+function Fn({
   quote: t,
-  name: n,
-  role: r,
-  company: a,
-  avatarSrc: s,
-  accentColor: h = "blue"
+  name: o,
+  role: n,
+  company: r,
+  avatarSrc: a,
+  accentColor: u = "blue"
 }) {
-  const _ = `var(--mantine-color-${h}-filled)`;
-  return /* @__PURE__ */ l(X, { className: Ne.root, p: "lg", radius: "md", style: { borderLeftColor: _ }, children: [
-    /* @__PURE__ */ e(Ze, { size: 32, className: Ne.quoteIcon, color: _ }),
-    /* @__PURE__ */ e(v, { fs: "italic", mt: "xs", mb: "md", children: t }),
-    /* @__PURE__ */ l(I, { gap: "sm", children: [
-      /* @__PURE__ */ e(Re, { src: s, alt: n, color: h, radius: "xl", size: "md", children: $t(n) }),
-      /* @__PURE__ */ l(A, { gap: 0, children: [
-        /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: n }),
-        (r || a) && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: [r, a].filter(Boolean).join(", ") })
+  const f = `var(--mantine-color-${u}-filled)`;
+  return /* @__PURE__ */ i(Y, { className: Ie.root, p: "lg", radius: "md", style: { borderLeftColor: f }, children: [
+    /* @__PURE__ */ e(rt, { size: 32, className: Ie.quoteIcon, color: f }),
+    /* @__PURE__ */ e(y, { fs: "italic", mt: "xs", mb: "md", children: t }),
+    /* @__PURE__ */ i(I, { gap: "sm", children: [
+      /* @__PURE__ */ e(Ye, { src: a, alt: o, color: u, radius: "xl", size: "md", children: Mt(o) }),
+      /* @__PURE__ */ i(A, { gap: 0, children: [
+        /* @__PURE__ */ e(y, { fw: 600, size: "sm", children: o }),
+        (n || r) && /* @__PURE__ */ e(y, { size: "xs", c: "dimmed", children: [n, r].filter(Boolean).join(", ") })
       ] })
     ] })
   ] });
 }
-const Ct = "_root_1r7u3_1", It = "_chartWrapper_1r7u3_5", zt = "_circle_1r7u3_9", Mt = "_centerText_1r7u3_13", Bt = "_toggle_1r7u3_20", Dt = "_toggleTrack_1r7u3_26", Lt = "_toggleTrackDark_1r7u3_35", St = "_toggleThumb_1r7u3_39", Pt = "_toggleThumbDark_1r7u3_51", Et = "_swatch_1r7u3_55", W = {
-  root: Ct,
-  chartWrapper: It,
-  circle: zt,
-  centerText: Mt,
-  toggle: Bt,
-  toggleTrack: Dt,
-  toggleTrackDark: Lt,
-  toggleThumb: St,
-  toggleThumbDark: Pt,
-  swatch: Et
+const Lt = "_root_1r7u3_1", St = "_chartWrapper_1r7u3_5", Dt = "_circle_1r7u3_9", Pt = "_centerText_1r7u3_13", Wt = "_toggle_1r7u3_20", Et = "_toggleTrack_1r7u3_26", Ft = "_toggleTrackDark_1r7u3_35", qt = "_toggleThumb_1r7u3_39", At = "_toggleThumbDark_1r7u3_51", jt = "_swatch_1r7u3_55", q = {
+  root: Lt,
+  chartWrapper: St,
+  circle: Dt,
+  centerText: Pt,
+  toggle: Wt,
+  toggleTrack: Et,
+  toggleTrackDark: Ft,
+  toggleThumb: qt,
+  toggleThumbDark: At,
+  swatch: jt
 };
-function yo() {
-  const [t, n] = T(!1), [r, a] = T(0), s = [
+function qn() {
+  const [t, o] = $(!1), [n, r] = $(0), a = [
     { color: "#5AB267", label: "Success" },
     { color: "#E63459", label: "Error" },
     { color: "#E79E26", label: "Warning" }
   ];
-  S(() => {
-    const c = setInterval(() => a((d) => (d + 1) % 3), 2e3);
-    return () => clearInterval(c);
+  D(() => {
+    const d = setInterval(() => r((m) => (m + 1) % 3), 2e3);
+    return () => clearInterval(d);
   }, []);
-  const h = s[r], _ = [
+  const u = a[n], f = [
     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 }
-  ], g = 80, p = 120, m = 120, u = 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;
+    { label: `Semantic (${u.label})`, pct: 5, color: u.color }
+  ], p = 80, h = 120, c = 120, g = 36, x = 2 * Math.PI * p;
+  let l = 0;
+  const b = f.map((d) => {
+    const m = d.pct / 100 * x, w = { ...d, dasharray: `${m} ${x - m}`, dashoffset: -l };
+    return l += m, w;
   });
-  return /* @__PURE__ */ l(I, { 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: [
-      y.map((c, d) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ i(I, { gap: 40, align: "center", my: "xl", className: q.root, children: [
+    /* @__PURE__ */ e(k, { className: q.chartWrapper, children: /* @__PURE__ */ i("svg", { width: 240, height: 240, viewBox: "0 0 240 240", children: [
+      b.map((d, m) => /* @__PURE__ */ e(
         "circle",
         {
-          cx: p,
-          cy: m,
-          r: g,
+          cx: h,
+          cy: c,
+          r: p,
           fill: "none",
-          stroke: c.color,
-          strokeWidth: u,
-          strokeDasharray: c.dasharray,
-          strokeDashoffset: c.dashoffset,
-          transform: `rotate(-90 ${p} ${m})`,
-          className: W.circle
+          stroke: d.color,
+          strokeWidth: g,
+          strokeDasharray: d.dasharray,
+          strokeDashoffset: d.dashoffset,
+          transform: `rotate(-90 ${h} ${c})`,
+          className: q.circle
         },
-        d
+        m
       )),
-      /* @__PURE__ */ l("text", { x: p, y: m + 6, textAnchor: "middle", className: W.centerText, children: [
+      /* @__PURE__ */ i("text", { x: h, y: c + 6, textAnchor: "middle", className: q.centerText, children: [
         t ? "Dark" : "Light",
         " Mode"
       ] })
     ] }) }),
-    /* @__PURE__ */ l(A, { gap: "lg", children: [
+    /* @__PURE__ */ i(A, { gap: "lg", children: [
       /* @__PURE__ */ e(
         J,
         {
-          onClick: () => n(!t),
+          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 : ""}` }) }),
+          className: q.toggle,
+          leftSection: /* @__PURE__ */ e(k, { className: `${q.toggleTrack} ${t ? q.toggleTrackDark : ""}`, children: /* @__PURE__ */ e(k, { className: `${q.toggleThumb} ${t ? q.toggleThumbDark : ""}` }) }),
           children: t ? "Dark Mode" : "Light Mode"
         }
       ),
-      /* @__PURE__ */ e(A, { gap: 8, children: _.map((c, d) => /* @__PURE__ */ l(I, { gap: 8, wrap: "nowrap", children: [
+      /* @__PURE__ */ e(A, { gap: 8, children: f.map((d, m) => /* @__PURE__ */ i(I, { gap: 8, wrap: "nowrap", children: [
         /* @__PURE__ */ e(
-          x,
+          k,
           {
-            className: W.swatch,
-            style: { backgroundColor: c.color, border: c.border || "none" }
+            className: q.swatch,
+            style: { backgroundColor: d.color, border: d.border || "none" }
           }
         ),
-        /* @__PURE__ */ l(v, { size: "sm", fw: 600, w: 36, children: [
-          c.pct,
+        /* @__PURE__ */ i(y, { size: "sm", fw: 600, w: 36, children: [
+          d.pct,
           "%"
         ] }),
-        /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", children: c.label })
-      ] }, d)) })
+        /* @__PURE__ */ e(y, { size: "sm", c: "dimmed", children: d.label })
+      ] }, m)) })
     ] })
   ] });
 }
-const Ft = "_root_1bq7s_1", Wt = "_svg_1bq7s_12", Te = {
-  root: Ft,
-  svg: Wt
-}, qt = 140, $e = 3, Ce = 10, je = 150, K = je / 2;
-function Ie({
-  barCount: t = qt,
-  duration: n = 3,
-  repeatDelay: r = 3
+const Rt = "_root_1bq7s_1", Gt = "_svg_1bq7s_12", ze = {
+  root: Rt,
+  svg: Gt
+}, Ot = 140, Be = 3, Me = 10, He = 150, K = He / 2;
+function Le({
+  barCount: t = Ot,
+  duration: o = 3,
+  repeatDelay: n = 3
 }) {
-  const [a, s] = T(!1);
-  if (S(() => {
-    s(!0);
-  }, []), !a) return null;
-  const h = t * Ce;
-  return /* @__PURE__ */ e("div", { className: Te.root, children: /* @__PURE__ */ l(
+  const [r, a] = $(!1);
+  if (D(() => {
+    a(!0);
+  }, []), !r) return null;
+  const u = t * Me;
+  return /* @__PURE__ */ e("div", { className: ze.root, children: /* @__PURE__ */ i(
     "svg",
     {
-      className: Te.svg,
-      viewBox: `0 0 ${h} ${je}`,
+      className: ze.svg,
+      viewBox: `0 0 ${u} ${He}`,
       preserveAspectRatio: "none",
       children: [
-        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ i("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
           /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
           /* @__PURE__ */ e("stop", { offset: "15%", stopColor: "white", stopOpacity: "0.15" }),
           /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.25" }),
           /* @__PURE__ */ e("stop", { offset: "85%", stopColor: "white", stopOpacity: "0.15" }),
           /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
         ] }) }),
-        [...Array(t)].map((_, g) => {
-          const p = g * Ce, m = 18 + Math.sin(g * 0.4) * 6 + Math.cos(g * 0.7) * 4, u = Math.min(g, t - 1 - g) * 0.04;
-          return /* @__PURE__ */ l("g", { children: [
+        [...Array(t)].map((f, p) => {
+          const h = p * Me, c = 18 + Math.sin(p * 0.4) * 6 + Math.cos(p * 0.7) * 4, g = Math.min(p, t - 1 - p) * 0.04;
+          return /* @__PURE__ */ i("g", { children: [
             /* @__PURE__ */ e(
-              D.rect,
+              M.rect,
               {
-                x: p,
-                width: $e,
+                x: h,
+                width: Be,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: m / 2, y: K - m / 4 },
+                initial: { height: c / 2, y: K - c / 4 },
                 animate: {
                   height: [
-                    m / 2,
-                    m * 2,
-                    m / 2,
-                    m * 1.2,
-                    m / 2
+                    c / 2,
+                    c * 2,
+                    c / 2,
+                    c * 1.2,
+                    c / 2
                   ],
                   y: [
-                    K - m / 4,
-                    K - m,
-                    K - m / 4,
-                    K - m * 0.6,
-                    K - m / 4
+                    K - c / 4,
+                    K - c,
+                    K - c / 4,
+                    K - c * 0.6,
+                    K - c / 4
                   ]
                 },
                 transition: {
-                  duration: n,
+                  duration: o,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: u,
-                  repeatDelay: r
+                  delay: g,
+                  repeatDelay: n
                 }
               }
             ),
             /* @__PURE__ */ e(
-              D.rect,
+              M.rect,
               {
-                x: p,
+                x: h,
                 y: K,
-                width: $e,
+                width: Be,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: m / 2 },
+                initial: { height: c / 2 },
                 animate: {
                   height: [
-                    m / 2,
-                    m * 2,
-                    m / 2,
-                    m * 1.2,
-                    m / 2
+                    c / 2,
+                    c * 2,
+                    c / 2,
+                    c * 1.2,
+                    c / 2
                   ]
                 },
                 transition: {
-                  duration: n,
+                  duration: o,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: u,
-                  repeatDelay: r
+                  delay: g,
+                  repeatDelay: n
                 }
               }
             )
-          ] }, g);
+          ] }, p);
         })
       ]
     }
   ) });
 }
-const At = "_root_1pkxe_1", jt = "_progressOverlay_1pkxe_9", Gt = "_bars_1pkxe_19", Rt = "_bar_1pkxe_19", Ot = "_loading_1pkxe_34", re = {
-  root: At,
-  progressOverlay: jt,
-  bars: Gt,
-  bar: Rt,
-  loading: Ot
+const Vt = "_root_1pkxe_1", Ht = "_progressOverlay_1pkxe_9", Ut = "_bars_1pkxe_19", Yt = "_bar_1pkxe_19", Xt = "_loading_1pkxe_34", ae = {
+  root: Vt,
+  progressOverlay: Ht,
+  bars: Ut,
+  bar: Yt,
+  loading: Xt
 };
-function Vt(t = 100) {
-  const n = [];
-  for (let r = 0; r < t; r++) {
-    const a = r / (t - 1), s = 20 + Math.sin(r * 0.1) * 15, h = (Math.random() - 0.5) * 20, _ = 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;
-    n.push(Math.max(5, Math.min(90, (s + h + _ + g) * p)));
+function Kt(t = 100) {
+  const o = [];
+  for (let n = 0; n < t; n++) {
+    const r = n / (t - 1), a = 20 + Math.sin(n * 0.1) * 15, u = (Math.random() - 0.5) * 20, f = Math.sin(r * Math.PI) * 30, p = r > 0.2 && r < 0.8 ? Math.random() * 10 : 0, h = r < 0.05 || r > 0.95 ? Math.min(r / 0.05, (1 - r) / 0.05) : 1;
+    o.push(Math.max(5, Math.min(90, (a + u + f + p) * h)));
   }
-  return n;
+  return o;
 }
-const fe = We(
+const ye = Re(
   ({
     audioRef: t,
-    currentTime: n = 0,
-    onSeek: r,
-    loading: a = !1,
-    waveColor: s = "#CCCCCC",
-    progressColor: h = "#169bde",
-    height: _ = 60,
-    barWidth: g = 2,
-    barGap: p = 1
-  }, m) => {
-    const u = q(null), [k] = T(() => Vt()), [i, y] = T(0), [c, d] = T(0);
-    Ke(m, () => ({
-      seekTo: (o) => {
-        i > 0 && d(Math.max(0, Math.min(100, o / i * 100)));
+    currentTime: o = 0,
+    onSeek: n,
+    loading: r = !1,
+    waveColor: a = "#CCCCCC",
+    progressColor: u = "#169bde",
+    height: f = 60,
+    barWidth: p = 2,
+    barGap: h = 1
+  }, c) => {
+    const g = W(null), [x] = $(() => Kt()), [l, b] = $(0), [d, m] = $(0);
+    tt(c, () => ({
+      seekTo: (s) => {
+        l > 0 && m(Math.max(0, Math.min(100, s / l * 100)));
       },
-      getCurrentTime: () => c / 100 * i,
-      getDuration: () => i
-    })), S(() => {
-      const o = t.current;
-      if (!o) return;
-      const b = () => {
-        o.duration && !isNaN(o.duration) && y(o.duration);
+      getCurrentTime: () => d / 100 * l,
+      getDuration: () => l
+    })), D(() => {
+      const s = t.current;
+      if (!s) return;
+      const v = () => {
+        s.duration && !isNaN(s.duration) && b(s.duration);
       }, N = () => {
-        o.duration > 0 && d(o.currentTime / o.duration * 100);
+        s.duration > 0 && m(s.currentTime / s.duration * 100);
       };
-      return o.duration && !isNaN(o.duration) && y(o.duration), o.addEventListener("loadedmetadata", b), o.addEventListener("timeupdate", N), () => {
-        o.removeEventListener("loadedmetadata", b), o.removeEventListener("timeupdate", N);
+      return s.duration && !isNaN(s.duration) && b(s.duration), s.addEventListener("loadedmetadata", v), s.addEventListener("timeupdate", N), () => {
+        s.removeEventListener("loadedmetadata", v), s.removeEventListener("timeupdate", N);
       };
-    }, [t]), S(() => {
-      i > 0 && typeof n == "number" && d(n / i * 100);
-    }, [n, i]);
-    const w = L(
-      (o) => {
-        if (!u.current || !r || i === 0) return;
-        const b = u.current.getBoundingClientRect(), N = (o.clientX - b.left) / b.width * i;
-        r(N);
+    }, [t]), D(() => {
+      l > 0 && typeof o == "number" && m(o / l * 100);
+    }, [o, l]);
+    const w = S(
+      (s) => {
+        if (!g.current || !n || l === 0) return;
+        const v = g.current.getBoundingClientRect(), N = (s.clientX - v.left) / v.width * l;
+        n(N);
       },
-      [r, i]
+      [n, l]
     );
-    return /* @__PURE__ */ l(x, { ref: u, className: re.root, style: { height: _ }, onClick: w, children: [
+    return /* @__PURE__ */ i(k, { ref: g, className: ae.root, style: { height: f }, onClick: w, children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: re.progressOverlay,
-          style: { width: `${c}%`, backgroundColor: `${h}15` }
+          className: ae.progressOverlay,
+          style: { width: `${d}%`, backgroundColor: `${u}15` }
         }
       ),
-      /* @__PURE__ */ e("div", { className: re.bars, style: { gap: p }, children: k.map((o, b) => {
-        const N = b / k.length * 100 <= c;
+      /* @__PURE__ */ e("div", { className: ae.bars, style: { gap: h }, children: x.map((s, v) => {
+        const N = v / x.length * 100 <= d;
         return /* @__PURE__ */ e(
           "div",
           {
-            className: re.bar,
+            className: ae.bar,
             style: {
-              width: g,
-              height: `${o}%`,
-              backgroundColor: N ? h : s
+              width: p,
+              height: `${s}%`,
+              backgroundColor: N ? u : a
             }
           },
-          b
+          v
         );
       }) }),
-      a && /* @__PURE__ */ e("div", { className: re.loading, children: "Loading waveform..." })
+      r && /* @__PURE__ */ e("div", { className: ae.loading, children: "Loading waveform..." })
     ] });
   }
 );
-fe.displayName = "AudioWaveform";
-function ko({ isActive: t = !1, height: n = 60 }) {
-  const r = q(null), a = q(void 0), [s, h] = T(!1), _ = q(null), g = q(null), { colorScheme: p } = Le(), m = p === "dark", u = {
-    start: m ? "#7950F2" : "#9775FA",
-    mid: m ? "#BE4BDB" : "#DA77F2",
-    end: m ? "#15AABF" : "#22B8CF"
-  }, k = L(
-    (i, y, c, d) => {
-      i.clearRect(0, 0, y, c);
-      const w = t || s, o = 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, y, 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, O = y / P, V = t ? 0.02 : s ? 0.025 : 3e-3;
+ye.displayName = "AudioWaveform";
+function An({ isActive: t = !1, height: o = 60 }) {
+  const n = W(null), r = W(void 0), [a, u] = $(!1), f = W(null), p = W(null), { colorScheme: h } = Ee(), c = h === "dark", g = {
+    start: c ? "#7950F2" : "#9775FA",
+    mid: c ? "#BE4BDB" : "#DA77F2",
+    end: c ? "#15AABF" : "#22B8CF"
+  }, x = S(
+    (l, b, d, m) => {
+      l.clearRect(0, 0, b, d);
+      const w = t || a, s = d * 0.65, v = t ? 5 : a ? 7 : 1.5;
+      w && (p.current === null && (p.current = Math.random()), Math.floor(m / 500) !== Math.floor((m - 16) / 500) && (p.current = Math.random()));
+      const N = l.createLinearGradient(0, 0, b, 0);
+      N.addColorStop(0, g.start), N.addColorStop(0.5, g.mid), N.addColorStop(1, g.end), l.strokeStyle = N, l.lineWidth = w ? 2.5 : 1.5, l.lineCap = "round", l.lineJoin = "round", w ? (l.shadowColor = g.mid, l.shadowBlur = a ? 12 : 8) : l.shadowBlur = 0, l.beginPath();
+      const P = 300, O = b / P, V = t ? 0.02 : a ? 0.025 : 3e-3;
       for (let j = 0; j <= P; j++) {
-        const M = j * O, C = M / y;
-        let F = o;
+        const B = j * O, C = B / b;
+        let F = s;
         if (w) {
-          const G = Math.sin(C * Math.PI * 6 + d * V) * b, H = Math.sin(C * Math.PI * 12 + d * V * 1.3) * (b * 0.4), U = Math.sin(C * Math.PI * 18 + d * V * 0.8) * (b * 0.2), ne = g.current ?? 0.5, f = Math.abs(C - ne), $ = f < 0.15 ? (1 - f / 0.15) * b * 1 : 0, B = Math.sin(C * Math.PI * 20 + d * V * 2) * $;
+          const R = Math.sin(C * Math.PI * 6 + m * V) * v, H = Math.sin(C * Math.PI * 12 + m * V * 1.3) * (v * 0.4), U = Math.sin(C * Math.PI * 18 + m * V * 0.8) * (v * 0.2), ne = p.current ?? 0.5, _ = Math.abs(C - ne), T = _ < 0.15 ? (1 - _ / 0.15) * v * 1 : 0, L = Math.sin(C * Math.PI * 20 + m * V * 2) * T;
           let Q = 0;
-          s && (Q = Math.sin(C * Math.PI * 30 + d * 0.03) * b * 0.4, Q += Math.sin(C * Math.PI * 8 + d * 0.015) * b * 0.5);
-          const ie = G + H + U + B + Q, le = Math.sin(C * Math.PI);
-          F = o + ie * le;
+          a && (Q = Math.sin(C * Math.PI * 30 + m * 0.03) * v * 0.4, Q += Math.sin(C * Math.PI * 8 + m * 0.015) * v * 0.5);
+          const de = R + H + U + L + Q, me = Math.sin(C * Math.PI);
+          F = s + de * me;
         } else
-          F += Math.sin(C * Math.PI * 2 + d * V) * b;
-        j === 0 ? i.moveTo(M, F) : i.lineTo(M, F);
+          F += Math.sin(C * Math.PI * 2 + m * V) * v;
+        j === 0 ? l.moveTo(B, F) : l.lineTo(B, F);
       }
-      if (i.stroke(), t) {
-        const C = y / 80, F = 16;
-        i.shadowBlur = 3;
-        for (let G = 0; G < 80; G++) {
-          const H = G * C + C / 2, U = H / y, ne = Math.sin(U * Math.PI * 8 + d * 0.025) * 0.5 + Math.sin(U * Math.PI * 14 + d * 0.018) * 0.3 + Math.sin(U * Math.PI * 4 + d * 0.03) * 0.2, f = Math.sin(U * Math.PI), $ = Math.abs(ne) * F * f, B = i.createLinearGradient(
+      if (l.stroke(), t) {
+        const C = b / 80, F = 16;
+        l.shadowBlur = 3;
+        for (let R = 0; R < 80; R++) {
+          const H = R * C + C / 2, U = H / b, ne = Math.sin(U * Math.PI * 8 + m * 0.025) * 0.5 + Math.sin(U * Math.PI * 14 + m * 0.018) * 0.3 + Math.sin(U * Math.PI * 4 + m * 0.03) * 0.2, _ = Math.sin(U * Math.PI), T = Math.abs(ne) * F * _, L = l.createLinearGradient(
             H,
-            o - $ / 2,
+            s - T / 2,
             H,
-            o + $ / 2
+            s + T / 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(H - 2 / 2, o - $ / 2, 2, $);
+          L.addColorStop(0, g.start + "90"), L.addColorStop(0.5, g.mid + "70"), L.addColorStop(1, g.end + "50"), l.fillStyle = L, l.fillRect(H - 2 / 2, s - T / 2, 2, T);
         }
       }
-      if (s)
-        for (let M = 0; M < 15; M++) {
-          const C = (Math.sin(d * 1e-3 + M * 1.5) * 0.5 + 0.5) * y, F = o + Math.sin(d * 2e-3 + M) * 8, G = 1.5 + Math.sin(d * 3e-3 + M * 2) * 0.5;
-          i.beginPath(), i.arc(C, F, G, 0, Math.PI * 2), i.fillStyle = M % 2 === 0 ? u.start + "80" : u.end + "80", i.fill();
+      if (a)
+        for (let B = 0; B < 15; B++) {
+          const C = (Math.sin(m * 1e-3 + B * 1.5) * 0.5 + 0.5) * b, F = s + Math.sin(m * 2e-3 + B) * 8, R = 1.5 + Math.sin(m * 3e-3 + B * 2) * 0.5;
+          l.beginPath(), l.arc(C, F, R, 0, Math.PI * 2), l.fillStyle = B % 2 === 0 ? g.start + "80" : g.end + "80", l.fill();
         }
     },
-    [t, s, u.start, u.mid, u.end]
+    [t, a, g.start, g.mid, g.end]
   );
-  return S(() => {
-    const i = r.current;
-    if (!i) return;
-    const y = i.getContext("2d");
-    if (!y) return;
-    const c = () => {
-      const o = window.devicePixelRatio || 1, b = i.getBoundingClientRect();
-      i.width = b.width * o, i.height = b.height * o, y.scale(o, o);
+  return D(() => {
+    const l = n.current;
+    if (!l) return;
+    const b = l.getContext("2d");
+    if (!b) return;
+    const d = () => {
+      const s = window.devicePixelRatio || 1, v = l.getBoundingClientRect();
+      l.width = v.width * s, l.height = v.height * s, b.scale(s, s);
     };
-    c(), window.addEventListener("resize", c);
-    const d = performance.now(), w = (o) => {
-      const b = o - d, N = i.getBoundingClientRect();
-      k(y, N.width, N.height, b), a.current = requestAnimationFrame(w);
+    d(), window.addEventListener("resize", d);
+    const m = performance.now(), w = (s) => {
+      const v = s - m, N = l.getBoundingClientRect();
+      x(b, N.width, N.height, v), r.current = requestAnimationFrame(w);
     };
-    return a.current = requestAnimationFrame(w), () => {
-      window.removeEventListener("resize", c), a.current && cancelAnimationFrame(a.current);
+    return r.current = requestAnimationFrame(w), () => {
+      window.removeEventListener("resize", d), r.current && cancelAnimationFrame(r.current);
     };
-  }, [k]), S(() => {
+  }, [x]), D(() => {
     if (t) {
-      queueMicrotask(() => h(!1)), _.current = Date.now();
+      queueMicrotask(() => u(!1)), f.current = Date.now();
       return;
     }
-    const y = setInterval(() => {
-      const c = Date.now();
-      _.current === null && (_.current = c);
-      const d = c - _.current, w = 12e4 + Math.random() * 6e4;
-      d >= w && !s && (h(!0), _.current = c, setTimeout(() => h(!1), 4e3));
+    const b = setInterval(() => {
+      const d = Date.now();
+      f.current === null && (f.current = d);
+      const m = d - f.current, w = 12e4 + Math.random() * 6e4;
+      m >= w && !a && (u(!0), f.current = d, setTimeout(() => u(!1), 4e3));
     }, 5e3);
-    return () => clearInterval(y);
-  }, [t, s]), /* @__PURE__ */ e(
-    x,
+    return () => clearInterval(b);
+  }, [t, a]), /* @__PURE__ */ e(
+    k,
     {
       style: {
         position: "relative",
         width: "100%",
-        height: n,
+        height: o,
         overflow: "hidden",
         pointerEvents: "none",
-        opacity: m ? 1 : 0.8
+        opacity: c ? 1 : 0.8
       },
       children: /* @__PURE__ */ e(
         "canvas",
         {
-          ref: r,
+          ref: n,
           style: {
             width: "100%",
             height: "100%",
@@ -743,100 +743,100 @@ function ko({ isActive: t = !1, height: n = 60 }) {
     }
   );
 }
-const Ht = "_root_1vlvy_1", Ut = "_video_1vlvy_9", ze = {
-  root: Ht,
-  video: Ut
+const Jt = "_root_1vlvy_1", Qt = "_video_1vlvy_9", Se = {
+  root: Jt,
+  video: Qt
 };
-function Xt({ src: t, opacity: n = 0.3 }) {
-  return /* @__PURE__ */ e("div", { className: ze.root, style: { opacity: n }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: ze.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
+function Zt({ src: t, opacity: o = 0.3 }) {
+  return /* @__PURE__ */ e("div", { className: Se.root, style: { opacity: o }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: Se.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
 }
-const Yt = "_root_ix1b2_1", Kt = "_toast_ix1b2_5", Me = {
-  root: Yt,
-  toast: Kt
+const eo = "_root_ix1b2_1", to = "_toast_ix1b2_5", De = {
+  root: eo,
+  toast: to
 };
-function he({ value: t, children: n }) {
-  const [r, a] = T(null), s = L(() => {
+function pe({ value: t, children: o }) {
+  const [n, r] = $(null), a = S(() => {
     navigator.clipboard.writeText(t).then(() => {
-      a(`Copied ${t}`), setTimeout(() => a(null), 1800);
+      r(`Copied ${t}`), setTimeout(() => r(null), 1800);
     });
   }, [t]);
-  return /* @__PURE__ */ l(Fe, { children: [
-    /* @__PURE__ */ e("span", { onClick: s, className: Me.root, title: `Click to copy ${t}`, children: n }),
-    r && /* @__PURE__ */ e(Oe, { children: /* @__PURE__ */ e(Ve, { withCloseButton: !1, className: Me.toast, color: "blue", children: r }) })
+  return /* @__PURE__ */ i(je, { children: [
+    /* @__PURE__ */ e("span", { onClick: a, className: De.root, title: `Click to copy ${t}`, children: o }),
+    n && /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ e(Ke, { withCloseButton: !1, className: De.toast, color: "blue", children: n }) })
   ] });
 }
-const Jt = "_root_3ht5s_1", Qt = "_shade_3ht5s_5", Zt = "_color_3ht5s_10", en = "_main_3ht5s_20", de = {
-  root: Jt,
-  shade: Qt,
-  color: Zt,
-  main: en
+const oo = "_root_3ht5s_1", no = "_shade_3ht5s_5", ro = "_color_3ht5s_10", ao = "_main_3ht5s_20", he = {
+  root: oo,
+  shade: no,
+  color: ro,
+  main: ao
 };
-function wo({ name: t, shades: n, mainIndex: r = 5 }) {
-  return /* @__PURE__ */ l("div", { className: de.root, children: [
-    /* @__PURE__ */ e(te, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
-    /* @__PURE__ */ e(se, { cols: 10, spacing: 4, children: n.map((a, s) => /* @__PURE__ */ e(he, { value: a, children: /* @__PURE__ */ l("div", { className: de.shade, children: [
+function jn({ name: t, shades: o, mainIndex: n = 5 }) {
+  return /* @__PURE__ */ i("div", { className: he.root, children: [
+    /* @__PURE__ */ e(oe, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
+    /* @__PURE__ */ e(ce, { cols: 10, spacing: 4, children: o.map((r, a) => /* @__PURE__ */ e(pe, { value: r, children: /* @__PURE__ */ i("div", { className: he.shade, children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: `${de.color} ${s === r ? de.main : ""}`,
-          style: { backgroundColor: a }
+          className: `${he.color} ${a === n ? he.main : ""}`,
+          style: { backgroundColor: r }
         }
       ),
-      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: s }),
-      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: a })
-    ] }) }, s)) })
+      /* @__PURE__ */ e(y, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: a }),
+      /* @__PURE__ */ e(y, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: r })
+    ] }) }, a)) })
   ] });
 }
-const tn = "_root_1vxkx_1", nn = "_preview_1vxkx_11", on = "_info_1vxkx_15", ue = {
-  root: tn,
-  preview: nn,
-  info: on
+const so = "_root_1vxkx_1", io = "_preview_1vxkx_11", lo = "_info_1vxkx_15", fe = {
+  root: so,
+  preview: io,
+  info: lo
 };
-function xo({ name: t, hex: n, label: r }) {
-  return /* @__PURE__ */ e(he, { value: n, children: /* @__PURE__ */ l(X, { className: ue.root, shadow: "lg", radius: "md", withBorder: !1, children: [
-    /* @__PURE__ */ e("div", { className: ue.preview, style: { backgroundColor: n } }),
-    /* @__PURE__ */ l("div", { className: ue.info, children: [
-      /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: t }),
-      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ff: "monospace", children: n }),
-      r && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: r })
+function Rn({ name: t, hex: o, label: n }) {
+  return /* @__PURE__ */ e(pe, { value: o, children: /* @__PURE__ */ i(Y, { className: fe.root, shadow: "lg", radius: "md", withBorder: !1, children: [
+    /* @__PURE__ */ e("div", { className: fe.preview, style: { backgroundColor: o } }),
+    /* @__PURE__ */ i("div", { className: fe.info, children: [
+      /* @__PURE__ */ e(y, { fw: 600, size: "sm", children: t }),
+      /* @__PURE__ */ e(y, { size: "xs", c: "dimmed", ff: "monospace", children: o }),
+      n && /* @__PURE__ */ e(y, { size: "xs", c: "dimmed", children: n })
     ] })
   ] }) });
 }
-const rn = "_root_9li00_1", an = "_preview_9li00_11", sn = "_info_9li00_15", ge = {
-  root: rn,
-  preview: an,
-  info: sn
+const co = "_root_9li00_1", mo = "_preview_9li00_11", uo = "_info_9li00_15", _e = {
+  root: co,
+  preview: mo,
+  info: uo
 };
-function No({ name: t, colors: n, description: r }) {
-  const a = `linear-gradient(135deg, ${n[0]} 0%, ${n[1]} 100%)`;
-  return /* @__PURE__ */ e(he, { value: a, children: /* @__PURE__ */ l(X, { className: ge.root, shadow: "lg", radius: "md", children: [
-    /* @__PURE__ */ e("div", { className: ge.preview, style: { background: a } }),
-    /* @__PURE__ */ l("div", { className: ge.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: [
-        n[0],
+function Gn({ name: t, colors: o, description: n }) {
+  const r = `linear-gradient(135deg, ${o[0]} 0%, ${o[1]} 100%)`;
+  return /* @__PURE__ */ e(pe, { value: r, children: /* @__PURE__ */ i(Y, { className: _e.root, shadow: "lg", radius: "md", children: [
+    /* @__PURE__ */ e("div", { className: _e.preview, style: { background: r } }),
+    /* @__PURE__ */ i("div", { className: _e.info, children: [
+      /* @__PURE__ */ e(y, { fw: 600, size: "sm", children: t }),
+      n && /* @__PURE__ */ e(y, { size: "xs", c: "dimmed", children: n }),
+      /* @__PURE__ */ i(y, { size: "xs", c: "dimmed", ff: "monospace", children: [
+        o[0],
         " → ",
-        n[1]
+        o[1]
       ] })
     ] })
   ] }) });
 }
-const ln = "_toggle_1nlbe_1", cn = "_toggleTrack_1nlbe_7", dn = "_toggleTrackDark_1nlbe_16", mn = "_toggleThumb_1nlbe_20", hn = "_toggleThumbDark_1nlbe_32", un = "_card_1nlbe_36", gn = "_preview_1nlbe_49", pn = "_sampleText_1nlbe_58", fn = "_details_1nlbe_65", R = {
-  toggle: ln,
-  toggleTrack: cn,
-  toggleTrackDark: dn,
-  toggleThumb: mn,
-  toggleThumbDark: hn,
-  card: un,
-  preview: gn,
-  sampleText: pn,
-  details: fn
+const ho = "_toggle_1nlbe_1", go = "_toggleTrack_1nlbe_7", po = "_toggleTrackDark_1nlbe_16", fo = "_toggleThumb_1nlbe_20", _o = "_toggleThumbDark_1nlbe_32", bo = "_card_1nlbe_36", vo = "_preview_1nlbe_49", yo = "_sampleText_1nlbe_58", xo = "_details_1nlbe_65", G = {
+  toggle: ho,
+  toggleTrack: go,
+  toggleTrackDark: po,
+  toggleThumb: fo,
+  toggleThumbDark: _o,
+  card: bo,
+  preview: vo,
+  sampleText: yo,
+  details: xo
 };
-function To() {
-  const [t, n] = T(!1);
-  He("light");
-  const r = {
+function On() {
+  const [t, o] = $(!1);
+  Je("light");
+  const n = {
     light: {
       bg: "#FFFFFF",
       border: "1px solid #e3e3e3",
@@ -855,143 +855,143 @@ function To() {
         { 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(
+  }, r = t ? n.dark : n.light;
+  return /* @__PURE__ */ i(k, { my: "xl", children: [
+    /* @__PURE__ */ e(k, { mb: "lg", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
       J,
       {
-        onClick: () => n(!t),
+        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 : ""}` }) }),
+        className: G.toggle,
+        leftSection: /* @__PURE__ */ e(k, { className: `${G.toggleTrack} ${t ? G.toggleTrackDark : ""}`, children: /* @__PURE__ */ e(k, { className: `${G.toggleThumb} ${t ? G.toggleThumbDark : ""}` }) }),
         children: t ? "Dark Mode" : "Light Mode"
       }
     ) }),
-    /* @__PURE__ */ e(se, { cols: { base: 1, md: 3 }, spacing: "lg", children: a.colors.map((s) => /* @__PURE__ */ e(he, { value: s.hex, children: /* @__PURE__ */ l(x, { className: R.card, children: [
+    /* @__PURE__ */ e(ce, { cols: { base: 1, md: 3 }, spacing: "lg", children: r.colors.map((a) => /* @__PURE__ */ e(pe, { value: a.hex, children: /* @__PURE__ */ i(k, { className: G.card, children: [
       /* @__PURE__ */ e(
-        x,
+        k,
         {
-          className: R.preview,
-          style: { backgroundColor: a.bg, border: a.border },
-          children: /* @__PURE__ */ e(v, { style: { color: s.hex }, className: R.sampleText, children: "Aa" })
+          className: G.preview,
+          style: { backgroundColor: r.bg, border: r.border },
+          children: /* @__PURE__ */ e(y, { style: { color: a.hex }, className: G.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 })
+      /* @__PURE__ */ i(k, { p: "md", className: G.details, children: [
+        /* @__PURE__ */ e(y, { fw: 600, children: a.name }),
+        /* @__PURE__ */ e(y, { size: "sm", c: "dimmed", ff: "monospace", children: a.hex }),
+        a.label && /* @__PURE__ */ e(y, { size: "xs", c: "dimmed", children: a.label })
       ] })
-    ] }) }, s.name + s.hex)) })
+    ] }) }, a.name + a.hex)) })
   ] });
 }
-const _n = "_root_n9zxy_1", bn = "_playButton_n9zxy_8", vn = "_time_n9zxy_22", yn = "_volumeGroup_n9zxy_28", ae = {
-  root: _n,
-  playButton: bn,
-  time: vn,
-  volumeGroup: yn
+const ko = "_root_n9zxy_1", wo = "_playButton_n9zxy_8", No = "_time_n9zxy_22", $o = "_volumeGroup_n9zxy_28", se = {
+  root: ko,
+  playButton: wo,
+  time: No,
+  volumeGroup: $o
 };
-function pe(t) {
-  const n = Math.floor(t / 60), r = Math.floor(t % 60);
-  return `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+function be(t) {
+  const o = Math.floor(t / 60), n = Math.floor(t % 60);
+  return `${o.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}`;
 }
-function $o({
+function Vn({
   src: t,
-  filename: n = "audio",
-  playButtonColor: r,
-  playButtonSize: a = 32,
-  waveColor: s = "#D0D0D0",
-  progressColor: h = "#a8a8a8",
-  waveHeight: _ = 64,
-  barWidth: g = 3,
-  barGap: p = 2,
-  showVolume: m = !0,
-  showDownload: u = !0
+  filename: o = "audio",
+  playButtonColor: n,
+  playButtonSize: r = 32,
+  waveColor: a = "#D0D0D0",
+  progressColor: u = "#a8a8a8",
+  waveHeight: f = 64,
+  barWidth: p = 3,
+  barGap: h = 2,
+  showVolume: c = !0,
+  showDownload: g = !0
 }) {
-  const k = q(null), [i, y] = T(!1), [c, d] = T(0), [w, o] = T("00:00"), [b, N] = T("00:00"), [P, O] = T(50), [V, j] = T(50), [M, C] = T(!1);
-  S(() => {
-    const f = k.current;
-    if (!f) return;
-    f.volume = P / 100;
-    const $ = () => {
-      d(f.currentTime), o(pe(f.currentTime));
-    }, B = () => N(pe(f.duration)), Q = () => {
+  const x = W(null), [l, b] = $(!1), [d, m] = $(0), [w, s] = $("00:00"), [v, N] = $("00:00"), [P, O] = $(50), [V, j] = $(50), [B, C] = $(!1);
+  D(() => {
+    const _ = x.current;
+    if (!_) return;
+    _.volume = P / 100;
+    const T = () => {
+      m(_.currentTime), s(be(_.currentTime));
+    }, L = () => N(be(_.duration)), Q = () => {
       setTimeout(() => {
-        d(0), o("00:00"), y(!1);
+        m(0), s("00:00"), b(!1);
       }, 500);
-    }, ie = () => y(!0), le = () => y(!1);
-    return f.addEventListener("timeupdate", $), f.addEventListener("loadedmetadata", B), f.addEventListener("ended", Q), f.addEventListener("play", ie), f.addEventListener("pause", le), () => {
-      f.removeEventListener("timeupdate", $), f.removeEventListener("loadedmetadata", B), f.removeEventListener("ended", Q), f.removeEventListener("play", ie), f.removeEventListener("pause", le);
+    }, de = () => b(!0), me = () => b(!1);
+    return _.addEventListener("timeupdate", T), _.addEventListener("loadedmetadata", L), _.addEventListener("ended", Q), _.addEventListener("play", de), _.addEventListener("pause", me), () => {
+      _.removeEventListener("timeupdate", T), _.removeEventListener("loadedmetadata", L), _.removeEventListener("ended", Q), _.removeEventListener("play", de), _.removeEventListener("pause", me);
     };
   }, [t]);
-  const F = L(() => {
-    const f = k.current;
-    f && (i ? f.pause() : f.play().catch(() => {
+  const F = S(() => {
+    const _ = x.current;
+    _ && (l ? _.pause() : _.play().catch(() => {
     }));
-  }, [i]), G = L((f) => {
-    const $ = k.current;
-    $ && !isNaN(f) && isFinite(f) && ($.currentTime = f, d(f), o(pe(f)));
-  }, []), H = L((f) => {
-    const $ = k.current;
-    $ && ($.volume = f / 100, O(f), f > 0 ? (j(f), C(!1)) : C(!0));
-  }, []), U = L(() => {
-    const f = k.current;
-    if (f)
-      if (M) {
-        const $ = V || 50;
-        f.volume = $ / 100, O($), C(!1);
+  }, [l]), R = S((_) => {
+    const T = x.current;
+    T && !isNaN(_) && isFinite(_) && (T.currentTime = _, m(_), s(be(_)));
+  }, []), H = S((_) => {
+    const T = x.current;
+    T && (T.volume = _ / 100, O(_), _ > 0 ? (j(_), C(!1)) : C(!0));
+  }, []), U = S(() => {
+    const _ = x.current;
+    if (_)
+      if (B) {
+        const T = V || 50;
+        _.volume = T / 100, O(T), C(!1);
       } else
-        j(P), f.volume = 0, O(0), C(!0);
-  }, [M, P, V]), ne = L(() => {
-    fetch(t).then((f) => f.blob()).then((f) => {
-      const $ = URL.createObjectURL(f), B = document.createElement("a");
-      B.href = $, B.download = n, document.body.appendChild(B), B.click(), document.body.removeChild(B), URL.revokeObjectURL($);
+        j(P), _.volume = 0, O(0), C(!0);
+  }, [B, P, V]), ne = S(() => {
+    fetch(t).then((_) => _.blob()).then((_) => {
+      const T = URL.createObjectURL(_), L = document.createElement("a");
+      L.href = T, L.download = o, document.body.appendChild(L), L.click(), document.body.removeChild(L), URL.revokeObjectURL(T);
     }).catch(() => window.open(t, "_blank"));
-  }, [t, n]);
-  return /* @__PURE__ */ l(I, { gap: "sm", wrap: "nowrap", className: ae.root, children: [
-    /* @__PURE__ */ e("audio", { ref: k, src: t, preload: "metadata" }),
+  }, [t, o]);
+  return /* @__PURE__ */ i(I, { gap: "sm", wrap: "nowrap", className: se.root, children: [
+    /* @__PURE__ */ e("audio", { ref: x, src: t, preload: "metadata" }),
     /* @__PURE__ */ e(
-      ee,
+      te,
       {
         variant: "filled",
         radius: "xl",
-        size: a,
-        color: r,
+        size: r,
+        color: n,
         onClick: F,
-        "aria-label": i ? "Pause" : "Play",
-        className: ae.playButton,
-        children: i ? /* @__PURE__ */ e(qe, { size: a * 0.5 }) : /* @__PURE__ */ e(Ae, { size: a * 0.5 })
+        "aria-label": l ? "Pause" : "Play",
+        className: se.playButton,
+        children: l ? /* @__PURE__ */ e(Ge, { size: r * 0.5 }) : /* @__PURE__ */ e(Oe, { size: r * 0.5 })
       }
     ),
-    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: ae.time, children: w }),
-    /* @__PURE__ */ e(x, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
-      fe,
+    /* @__PURE__ */ e(y, { size: "xs", ff: "monospace", c: "dimmed", className: se.time, children: w }),
+    /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
+      ye,
       {
-        audioRef: k,
-        currentTime: c,
-        onSeek: G,
-        waveColor: s,
-        progressColor: h,
-        height: _,
-        barWidth: g,
-        barGap: p
+        audioRef: x,
+        currentTime: d,
+        onSeek: R,
+        waveColor: a,
+        progressColor: u,
+        height: f,
+        barWidth: p,
+        barGap: h
       }
     ) }),
-    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: ae.time, children: b }),
-    m && /* @__PURE__ */ l(I, { gap: 4, wrap: "nowrap", className: ae.volumeGroup, children: [
+    /* @__PURE__ */ e(y, { size: "xs", ff: "monospace", c: "dimmed", className: se.time, children: v }),
+    c && /* @__PURE__ */ i(I, { gap: 4, wrap: "nowrap", className: se.volumeGroup, children: [
       /* @__PURE__ */ e(
-        ee,
+        te,
         {
           variant: "subtle",
           size: "sm",
           onClick: U,
-          "aria-label": M ? "Unmute" : "Mute",
-          children: M ? /* @__PURE__ */ e(et, { size: 16 }) : /* @__PURE__ */ e(tt, { size: 16 })
+          "aria-label": B ? "Unmute" : "Mute",
+          children: B ? /* @__PURE__ */ e(at, { size: 16 }) : /* @__PURE__ */ e(st, { size: 16 })
         }
       ),
       /* @__PURE__ */ e(
-        Ue,
+        Qe,
         {
           value: P,
           onChange: H,
@@ -1001,80 +1001,80 @@ function $o({
         }
       )
     ] }),
-    u && /* @__PURE__ */ e(ee, { variant: "subtle", size: "sm", onClick: ne, "aria-label": "Download", children: /* @__PURE__ */ e(nt, { size: 16 }) })
+    g && /* @__PURE__ */ e(te, { variant: "subtle", size: "sm", onClick: ne, "aria-label": "Download", children: /* @__PURE__ */ e(it, { size: 16 }) })
   ] });
 }
-const kn = "_root_13w21_1", wn = "_playButton_13w21_11", Be = {
-  root: kn,
-  playButton: wn
-}, xn = {
+const To = "_root_13w21_1", Co = "_playButton_13w21_11", Pe = {
+  root: To,
+  playButton: Co
+}, Io = {
   mini: { height: 24, buttonSize: 20, iconSize: 14, waveHeight: 16, barWidth: 1, barGap: 0 },
   small: { height: 32, buttonSize: 28, iconSize: 16, waveHeight: 20, barWidth: 1, barGap: 0 },
   compact: { height: 40, buttonSize: 32, iconSize: 18, waveHeight: 24, barWidth: 2, barGap: 1 }
-}, Nn = We(
+}, zo = Re(
   ({
     audioUrl: t,
-    size: n = "mini",
-    waveColor: r = "#CCCCCC",
-    progressColor: a = "#169bde",
-    onPlay: s,
-    onPause: h,
-    className: _,
-    style: g
-  }, p) => {
-    const m = q(null), [u, k] = T(!1), [i, y] = T(0), c = xn[n];
-    S(() => {
-      const o = m.current;
-      if (!o) return;
-      const b = () => y(o.currentTime), N = () => {
-        k(!1), y(0);
-      }, P = () => k(!1), O = () => k(!0);
-      return o.addEventListener("timeupdate", b), o.addEventListener("ended", N), o.addEventListener("pause", P), o.addEventListener("play", O), () => {
-        o.removeEventListener("timeupdate", b), o.removeEventListener("ended", N), o.removeEventListener("pause", P), o.removeEventListener("play", O);
+    size: o = "mini",
+    waveColor: n = "#CCCCCC",
+    progressColor: r = "#169bde",
+    onPlay: a,
+    onPause: u,
+    className: f,
+    style: p
+  }, h) => {
+    const c = W(null), [g, x] = $(!1), [l, b] = $(0), d = Io[o];
+    D(() => {
+      const s = c.current;
+      if (!s) return;
+      const v = () => b(s.currentTime), N = () => {
+        x(!1), b(0);
+      }, P = () => x(!1), O = () => x(!0);
+      return s.addEventListener("timeupdate", v), s.addEventListener("ended", N), s.addEventListener("pause", P), s.addEventListener("play", O), () => {
+        s.removeEventListener("timeupdate", v), s.removeEventListener("ended", N), s.removeEventListener("pause", P), s.removeEventListener("play", O);
       };
     }, [t]);
-    const d = L(() => {
-      const o = m.current;
-      o && (u ? (o.pause(), h == null || h()) : (o.play().catch(() => {
-      }), s == null || s()));
-    }, [u, s, h]), w = L((o) => {
-      const b = m.current;
-      b && !isNaN(o) && isFinite(o) && (b.currentTime = o, y(o));
+    const m = S(() => {
+      const s = c.current;
+      s && (g ? (s.pause(), u == null || u()) : (s.play().catch(() => {
+      }), a == null || a()));
+    }, [g, a, u]), w = S((s) => {
+      const v = c.current;
+      v && !isNaN(s) && isFinite(s) && (v.currentTime = s, b(s));
     }, []);
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ i(
       I,
       {
-        ref: p,
-        gap: n === "mini" ? 6 : n === "small" ? 8 : 10,
+        ref: h,
+        gap: o === "mini" ? 6 : o === "small" ? 8 : 10,
         wrap: "nowrap",
-        className: `${Be.root} ${_ ?? ""}`,
-        style: { height: c.height, ...g },
+        className: `${Pe.root} ${f ?? ""}`,
+        style: { height: d.height, ...p },
         children: [
-          /* @__PURE__ */ e("audio", { ref: m, src: t, preload: "metadata" }),
+          /* @__PURE__ */ e("audio", { ref: c, src: t, preload: "metadata" }),
           /* @__PURE__ */ e(
-            ee,
+            te,
             {
               variant: "filled",
               color: "blue",
               radius: "xl",
-              size: c.buttonSize,
-              onClick: d,
-              "aria-label": u ? "Pause" : "Play",
-              className: Be.playButton,
-              children: u ? /* @__PURE__ */ e(qe, { size: c.iconSize }) : /* @__PURE__ */ e(Ae, { size: c.iconSize })
+              size: d.buttonSize,
+              onClick: m,
+              "aria-label": g ? "Pause" : "Play",
+              className: Pe.playButton,
+              children: g ? /* @__PURE__ */ e(Ge, { size: d.iconSize }) : /* @__PURE__ */ e(Oe, { size: d.iconSize })
             }
           ),
-          /* @__PURE__ */ e(x, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
-            fe,
+          /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
+            ye,
             {
-              audioRef: m,
-              currentTime: i,
+              audioRef: c,
+              currentTime: l,
               onSeek: w,
-              waveColor: r,
-              progressColor: a,
-              height: c.waveHeight,
-              barWidth: c.barWidth,
-              barGap: c.barGap
+              waveColor: n,
+              progressColor: r,
+              height: d.waveHeight,
+              barWidth: d.barWidth,
+              barGap: d.barGap
             }
           ) })
         ]
@@ -1082,120 +1082,151 @@ const kn = "_root_13w21_1", wn = "_playButton_13w21_11", Be = {
     );
   }
 );
-Nn.displayName = "MiniAudioPlayer";
-const Tn = "_root_4fblk_1", $n = "_actions_4fblk_22", Cn = "_fab_4fblk_43", In = "_actionButton_4fblk_63", me = {
-  root: Tn,
-  actions: $n,
-  fab: Cn,
-  actionButton: In
+zo.displayName = "MiniAudioPlayer";
+const Bo = "_root_4fblk_1", Mo = "_actions_4fblk_22", Lo = "_fab_4fblk_43", So = "_actionButton_4fblk_63", ge = {
+  root: Bo,
+  actions: Mo,
+  fab: Lo,
+  actionButton: So
 };
-function Co({
+function Hn({
   actions: t,
-  icon: n,
-  openIcon: r,
-  direction: a = "up",
-  color: s = "blue",
-  size: h = 56,
-  defaultOpen: _ = !1,
-  open: g,
-  onOpenChange: p,
-  style: m,
-  className: u
+  icon: o,
+  openIcon: n,
+  direction: r = "up",
+  color: a = "blue",
+  size: u = 56,
+  defaultOpen: f = !1,
+  open: p,
+  onOpenChange: h,
+  style: c,
+  className: g
 }) {
-  const [k, i] = T(_), y = g ?? k, c = L(() => {
-    const o = !y;
-    i(o), p == null || p(o);
-  }, [y, p]), d = L(() => {
-    i(!1), p == null || p(!1);
-  }, [p]), w = a === "up" || a === "down";
-  return /* @__PURE__ */ l(x, { className: `${me.root} ${u ?? ""}`, style: m, "data-direction": a, children: [
-    /* @__PURE__ */ e("div", { className: me.actions, "data-direction": a, children: t.map((o, b) => {
-      const N = a === "up" || a === "left" ? t.length - 1 - b : b;
+  const [x, l] = $(f), b = p ?? x, d = S(() => {
+    const s = !b;
+    l(s), h == null || h(s);
+  }, [b, h]), m = S(() => {
+    l(!1), h == null || h(!1);
+  }, [h]), w = r === "up" || r === "down";
+  return /* @__PURE__ */ i(k, { className: `${ge.root} ${g ?? ""}`, style: c, "data-direction": r, children: [
+    /* @__PURE__ */ e("div", { className: ge.actions, "data-direction": r, children: t.map((s, v) => {
+      const N = r === "up" || r === "left" ? t.length - 1 - v : v;
       return /* @__PURE__ */ e(
-        Xe,
+        Ze,
         {
-          mounted: y,
+          mounted: b,
           transition: w ? "slide-up" : "slide-right",
           duration: 200,
           timingFunction: "ease",
           enterDelay: N * 40,
-          children: (P) => /* @__PURE__ */ e(Ye, { label: o.label, position: w ? "left" : "top", children: /* @__PURE__ */ e(
-            ee,
+          children: (P) => /* @__PURE__ */ e(et, { label: s.label, position: w ? "left" : "top", children: /* @__PURE__ */ e(
+            te,
             {
               variant: "filled",
               color: "gray",
               radius: "xl",
-              size: h * 0.7,
+              size: u * 0.7,
               style: P,
-              className: me.actionButton,
+              className: ge.actionButton,
               onClick: () => {
-                o.onClick(), d();
+                s.onClick(), m();
               },
-              "aria-label": o.label,
-              children: o.icon
+              "aria-label": s.label,
+              children: s.icon
             }
           ) })
         },
-        o.label
+        s.label
       );
     }) }),
     /* @__PURE__ */ e(
-      ee,
+      te,
       {
         variant: "filled",
-        color: s,
+        color: a,
         radius: "xl",
-        size: h,
-        onClick: c,
-        className: me.fab,
-        "data-open": y || void 0,
-        "aria-label": y ? "Close actions" : "Open actions",
-        children: y ? r ?? n ?? /* @__PURE__ */ e(ve, { size: h * 0.45 }) : n ?? /* @__PURE__ */ e(ve, { size: h * 0.45 })
+        size: u,
+        onClick: d,
+        className: ge.fab,
+        "data-open": b || void 0,
+        "aria-label": b ? "Close actions" : "Open actions",
+        children: b ? n ?? o ?? /* @__PURE__ */ e(we, { size: u * 0.45 }) : o ?? /* @__PURE__ */ e(we, { size: u * 0.45 })
       }
     )
   ] });
 }
-const zn = "_root_18iq7_1", Mn = "_content_18iq7_8", Bn = "_label_18iq7_21", Dn = "_vignette_18iq7_38", Ln = "_logoWrapper_18iq7_51", Sn = "_logo_18iq7_51", Pn = "_glow_18iq7_74", En = "_textWrapper_18iq7_86", Fn = "_heading_18iq7_92", Wn = "_shimmer_18iq7_126", qn = "_tagline_18iq7_130", An = "_primaryButton_18iq7_146", jn = "_secondaryButton_18iq7_158", Gn = "_scrollIndicator_18iq7_175", Rn = "_scrollLabel_18iq7_186", On = "_scrollLine_18iq7_194", z = {
-  root: zn,
-  content: Mn,
-  label: Bn,
-  vignette: Dn,
-  logoWrapper: Ln,
-  logo: Sn,
-  glow: Pn,
-  textWrapper: En,
-  heading: Fn,
-  shimmer: Wn,
-  tagline: qn,
-  primaryButton: An,
-  secondaryButton: jn,
-  scrollIndicator: Gn,
-  scrollLabel: Rn,
-  scrollLine: On
+const Do = "_root_6htoh_1", Po = "_expandBg_6htoh_6", Wo = "_contentWrap_6htoh_21", ve = {
+  root: Do,
+  expandBg: Po,
+  contentWrap: Wo
+};
+function Un({
+  children: t,
+  expandFrom: o = "left",
+  py: n = "calc(var(--mantine-spacing-xl) * 3)",
+  bgFrom: r = "rgba(40,40,40,1)",
+  bgTo: a = "rgba(28,28,28,1)",
+  contentPy: u = "xl",
+  ...f
+}) {
+  const p = W(null), { scrollYProgress: h } = Ve({
+    target: p,
+    offset: ["start end", "start 0.3"]
+  }), c = le(
+    h,
+    [0, 1],
+    ["calc(45% + 5rem)", "calc(-50vw + 50%)"]
+  ), g = le(h, [0, 1], [r, a]), x = le(
+    h,
+    [0, 1],
+    ["rgba(55,55,55,0)", "rgba(55,55,55,1)"]
+  ), l = le(h, [0, 0.5, 1], [0, 0, 1]), b = o === "left" ? { left: c, right: "3rem", backgroundColor: g, borderColor: x } : { left: "3rem", right: c, backgroundColor: g, borderColor: x };
+  return /* @__PURE__ */ e(k, { component: "section", ref: p, py: n, className: ve.root, ...f, children: /* @__PURE__ */ i(k, { pos: "relative", maw: "80rem", mx: "auto", px: "xl", style: { overflow: "visible" }, children: [
+    /* @__PURE__ */ e(M.div, { className: ve.expandBg, style: b }),
+    /* @__PURE__ */ e(M.div, { className: ve.contentWrap, style: { opacity: l }, children: /* @__PURE__ */ e(k, { py: u, children: t }) })
+  ] }) });
+}
+const Eo = "_root_18iq7_1", Fo = "_content_18iq7_8", qo = "_label_18iq7_21", Ao = "_vignette_18iq7_38", jo = "_logoWrapper_18iq7_51", Ro = "_logo_18iq7_51", Go = "_glow_18iq7_74", Oo = "_textWrapper_18iq7_86", Vo = "_heading_18iq7_92", Ho = "_shimmer_18iq7_126", Uo = "_tagline_18iq7_130", Yo = "_primaryButton_18iq7_146", Xo = "_secondaryButton_18iq7_158", Ko = "_scrollIndicator_18iq7_175", Jo = "_scrollLabel_18iq7_186", Qo = "_scrollLine_18iq7_194", z = {
+  root: Eo,
+  content: Fo,
+  label: qo,
+  vignette: Ao,
+  logoWrapper: jo,
+  logo: Ro,
+  glow: Go,
+  textWrapper: Oo,
+  heading: Vo,
+  shimmer: Ho,
+  tagline: Uo,
+  primaryButton: Yo,
+  secondaryButton: Xo,
+  scrollIndicator: Ko,
+  scrollLabel: Jo,
+  scrollLine: Qo
 };
-function Io({
+function Yn({
   variant: t = "logo",
-  heading: n,
-  label: r,
-  tagline: a,
-  logoSrc: s = ot,
-  gradient: h = "frequencyAlive",
-  shimmer: _ = !0,
-  primaryAction: g,
-  secondaryAction: p,
-  backgroundVideoSrc: m,
-  showWaveform: u,
-  showScrollIndicator: k = !1
+  heading: o,
+  label: n,
+  tagline: r,
+  logoSrc: a = lt,
+  gradient: u = "frequencyAlive",
+  shimmer: f = !0,
+  primaryAction: p,
+  secondaryAction: h,
+  backgroundVideoSrc: c,
+  showWaveform: g,
+  showScrollIndicator: x = !1
 }) {
-  const [i, y] = T(!1), c = typeof s == "string" ? s : s == null ? void 0 : s.src, d = n ?? (t === "text" ? "Your Message" : void 0), w = r || (t === "logo" ? "Welcome" : void 0), o = g || p, b = u ?? !0, N = rt[h];
-  return S(() => {
-    y(!0);
-  }, []), /* @__PURE__ */ l(x, { component: "section", className: z.root, children: [
-    m && /* @__PURE__ */ e(Xt, { src: m }),
-    /* @__PURE__ */ l("div", { className: z.content, children: [
-      i && /* @__PURE__ */ l(Fe, { children: [
+  const [l, b] = $(!1), d = typeof a == "string" ? a : a == null ? void 0 : a.src, m = o ?? (t === "text" ? "Your Message" : void 0), w = n || (t === "logo" ? "Welcome" : void 0), s = p || h, v = g ?? !0, N = ct[u];
+  return D(() => {
+    b(!0);
+  }, []), /* @__PURE__ */ i(k, { component: "section", className: z.root, children: [
+    c && /* @__PURE__ */ e(Zt, { src: c }),
+    /* @__PURE__ */ i("div", { className: z.content, children: [
+      l && /* @__PURE__ */ i(je, { children: [
         w && /* @__PURE__ */ e(
-          D.p,
+          M.p,
           {
             initial: { opacity: 0 },
             animate: { opacity: 1 },
@@ -1204,21 +1235,21 @@ function Io({
             children: w
           }
         ),
-        t === "logo" && /* @__PURE__ */ l(
-          D.div,
+        t === "logo" && /* @__PURE__ */ i(
+          M.div,
           {
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
             className: z.logoWrapper,
             children: [
-              b && /* @__PURE__ */ e(Ie, {}),
-              b && /* @__PURE__ */ e("div", { className: z.vignette }),
+              v && /* @__PURE__ */ e(Le, {}),
+              v && /* @__PURE__ */ e("div", { className: z.vignette }),
               /* @__PURE__ */ e(
-                D.img,
+                M.img,
                 {
-                  src: c,
-                  alt: d ?? "Frequency",
+                  src: d,
+                  alt: m ?? "Frequency",
                   className: z.logo,
                   animate: { rotate: [0, 0.5, -0.5, 0] },
                   transition: { duration: 8, repeat: 1 / 0, ease: "easeInOut" }
@@ -1228,76 +1259,76 @@ function Io({
             ]
           }
         ),
-        t === "text" && d && /* @__PURE__ */ l(
-          D.div,
+        t === "text" && m && /* @__PURE__ */ i(
+          M.div,
           {
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
             className: z.textWrapper,
             children: [
-              b && /* @__PURE__ */ e(Ie, {}),
-              b && /* @__PURE__ */ e("div", { className: z.vignette }),
+              v && /* @__PURE__ */ e(Le, {}),
+              v && /* @__PURE__ */ e("div", { className: z.vignette }),
               /* @__PURE__ */ e(
-                te,
+                oe,
                 {
                   order: 1,
-                  className: `${z.heading} ${_ ? z.shimmer : ""}`,
+                  className: `${z.heading} ${f ? z.shimmer : ""}`,
                   style: {
                     backgroundImage: `linear-gradient(135deg, ${N.from}, ${N.to}, ${N.from})`,
-                    backgroundSize: _ ? "200% 100%" : void 0
+                    backgroundSize: f ? "200% 100%" : void 0
                   },
-                  children: d
+                  children: m
                 }
               )
             ]
           }
         ),
-        a && /* @__PURE__ */ e(
-          D.div,
+        r && /* @__PURE__ */ e(
+          M.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.8, delay: 0.7 },
-            children: /* @__PURE__ */ e(v, { className: z.tagline, children: a })
+            children: /* @__PURE__ */ e(y, { className: z.tagline, children: r })
           }
         ),
-        o && /* @__PURE__ */ e(
-          D.div,
+        s && /* @__PURE__ */ e(
+          M.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.8, delay: 0.9 },
-            children: /* @__PURE__ */ l(I, { gap: "xl", justify: "center", wrap: "wrap", children: [
-              g && /* @__PURE__ */ e(
+            children: /* @__PURE__ */ i(I, { gap: "xl", justify: "center", wrap: "wrap", children: [
+              p && /* @__PURE__ */ e(
                 J,
                 {
                   component: "a",
-                  href: g.href,
+                  href: p.href,
                   size: "lg",
                   radius: 4,
                   className: z.primaryButton,
-                  children: g.label
+                  children: p.label
                 }
               ),
-              p && /* @__PURE__ */ e(
+              h && /* @__PURE__ */ e(
                 J,
                 {
                   component: "a",
-                  href: p.href,
+                  href: h.href,
                   size: "lg",
                   radius: 4,
                   variant: "outline",
                   className: z.secondaryButton,
-                  children: p.label
+                  children: h.label
                 }
               )
             ] })
           }
         )
       ] }),
-      i && k && /* @__PURE__ */ l(
-        D.div,
+      l && x && /* @__PURE__ */ i(
+        M.div,
         {
           className: z.scrollIndicator,
           initial: { opacity: 0 },
@@ -1306,7 +1337,7 @@ function Io({
           children: [
             /* @__PURE__ */ e("span", { className: z.scrollLabel, children: "Scroll" }),
             /* @__PURE__ */ e(
-              D.div,
+              M.div,
               {
                 className: z.scrollLine,
                 animate: { scaleY: [1, 1.5, 1] },
@@ -1319,170 +1350,263 @@ function Io({
     ] })
   ] });
 }
-const Vn = "_container_9xj91_1", Hn = "_layout_9xj91_16", Un = "_reversed_9xj91_29", Xn = "_headingSide_9xj91_39", Yn = "_sticky_9xj91_49", Kn = "_stickyInner_9xj91_54", Jn = "_contentSide_9xj91_65", Qn = "_title_9xj91_76", Zn = "_preTitle_9xj91_82", eo = "_titleHighlight_9xj91_88", to = "_description_9xj91_95", E = {
-  container: Vn,
-  layout: Hn,
-  reversed: Un,
-  headingSide: Xn,
-  sticky: Yn,
-  stickyInner: Kn,
-  contentSide: Jn,
-  title: Qn,
-  preTitle: Zn,
-  titleHighlight: eo,
-  description: to
+const Zo = "_root_9m402_1", en = "_videoBg_9m402_6", tn = "_video_9m402_6", on = "_fadeTop_9m402_22", nn = "_fadeBottom_9m402_31", rn = "_content_9m402_40", ee = {
+  root: Zo,
+  videoBg: en,
+  video: tn,
+  fadeTop: on,
+  fadeBottom: nn,
+  content: rn
+};
+function Xn({
+  children: t,
+  videoSrc: o,
+  videoPoster: n,
+  videoOpacity: r = 0.5,
+  videoGrayscale: a = !1,
+  speed: u = 50,
+  fadeTop: f = !0,
+  fadeBottom: p = !1,
+  ...h
+}) {
+  const c = W(null), { scrollYProgress: g } = Ve({
+    target: c,
+    offset: ["start end", "end start"]
+  }), x = le(g, [0, 1], [0, -u]);
+  return /* @__PURE__ */ i(k, { ref: c, className: ee.root, ...h, children: [
+    o && /* @__PURE__ */ e(M.div, { className: ee.videoBg, style: { y: x }, children: /* @__PURE__ */ e(
+      "video",
+      {
+        autoPlay: !0,
+        muted: !0,
+        loop: !0,
+        playsInline: !0,
+        className: ee.video,
+        poster: n,
+        style: {
+          opacity: r,
+          filter: a ? "grayscale(1)" : void 0
+        },
+        children: /* @__PURE__ */ e("source", { src: o, type: "video/mp4" })
+      }
+    ) }),
+    f && /* @__PURE__ */ e("div", { className: ee.fadeTop }),
+    p && /* @__PURE__ */ e("div", { className: ee.fadeBottom }),
+    /* @__PURE__ */ e("div", { className: ee.content, children: t })
+  ] });
+}
+const an = "_root_1t2xz_1", sn = "_track_1t2xz_6", ln = "_logo_1t2xz_25", cn = "_fadeLeft_1t2xz_41", dn = "_fadeRight_1t2xz_52", ie = {
+  root: an,
+  track: sn,
+  logo: ln,
+  fadeLeft: cn,
+  fadeRight: dn
+};
+function Kn({
+  logos: t,
+  logoHeight: o = 32,
+  gap: n = "2.5rem",
+  duration: r = 30,
+  fadeMask: a = !0,
+  py: u = "xl",
+  ...f
+}) {
+  if (!t.length) return null;
+  const p = [...t, ...t];
+  return /* @__PURE__ */ i(
+    k,
+    {
+      className: ie.root,
+      py: u,
+      style: {
+        "--marquee-duration": `${r}s`,
+        "--marquee-logo-height": `${o}px`
+      },
+      ...f,
+      children: [
+        a && /* @__PURE__ */ e("div", { className: ie.fadeLeft }),
+        a && /* @__PURE__ */ e("div", { className: ie.fadeRight }),
+        /* @__PURE__ */ e("div", { className: ie.track, style: { gap: n }, children: p.map((h, c) => /* @__PURE__ */ e(
+          "img",
+          {
+            src: h.logo,
+            alt: h.name,
+            className: ie.logo,
+            loading: "lazy"
+          },
+          `${h.name}-${c}`
+        )) })
+      ]
+    }
+  );
+}
+const mn = "_container_9xj91_1", un = "_layout_9xj91_16", hn = "_reversed_9xj91_29", gn = "_headingSide_9xj91_39", pn = "_sticky_9xj91_49", fn = "_stickyInner_9xj91_54", _n = "_contentSide_9xj91_65", bn = "_title_9xj91_76", vn = "_preTitle_9xj91_82", yn = "_titleHighlight_9xj91_88", xn = "_description_9xj91_95", E = {
+  container: mn,
+  layout: un,
+  reversed: hn,
+  headingSide: gn,
+  sticky: pn,
+  stickyInner: fn,
+  contentSide: _n,
+  title: bn,
+  preTitle: vn,
+  titleHighlight: yn,
+  description: xn
 };
-function zo({
+function Jn({
   badge: t,
-  badgeColor: n = "violet",
-  subtitle: r,
-  title: a,
-  titleColor: s = "blue",
-  preTitle: h,
-  description: _,
-  actions: g,
-  heading: p,
-  children: m,
-  stickyHeading: u = !1,
-  py: k,
-  reversed: i = !1,
-  id: y,
-  className: c
+  badgeColor: o = "violet",
+  subtitle: n,
+  title: r,
+  titleColor: a = "blue",
+  preTitle: u,
+  description: f,
+  actions: p,
+  heading: h,
+  children: c,
+  stickyHeading: g = !1,
+  py: x,
+  reversed: l = !1,
+  id: b,
+  className: d
 }) {
-  const d = p ?? /* @__PURE__ */ l(A, { gap: "sm", children: [
-    t && /* @__PURE__ */ l(x, { children: [
-      /* @__PURE__ */ e(Ee, { color: n, 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 })
+  const m = h ?? /* @__PURE__ */ i(A, { gap: "sm", children: [
+    t && /* @__PURE__ */ i(k, { children: [
+      /* @__PURE__ */ e(Ae, { color: o, variant: "filled", size: "sm", radius: 4, tt: "uppercase", fw: 700, children: t }),
+      n && /* @__PURE__ */ e(y, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: n })
     ] }),
-    !t && r && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: r }),
-    (h || a) && /* @__PURE__ */ l(te, { order: 2, className: E.title, children: [
-      h && /* @__PURE__ */ e("span", { className: E.preTitle, children: h }),
-      h && /* @__PURE__ */ e("br", {}),
-      a && /* @__PURE__ */ e(v, { component: "span", inherit: !0, className: E.titleHighlight, c: s, children: a })
+    !t && n && /* @__PURE__ */ e(y, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: n }),
+    (u || r) && /* @__PURE__ */ i(oe, { order: 2, className: E.title, children: [
+      u && /* @__PURE__ */ e("span", { className: E.preTitle, children: u }),
+      u && /* @__PURE__ */ e("br", {}),
+      r && /* @__PURE__ */ e(y, { component: "span", inherit: !0, className: E.titleHighlight, c: a, children: r })
     ] }),
-    _ && /* @__PURE__ */ e(v, { size: "lg", c: "dimmed", lh: 1.7, className: E.description, children: _ }),
-    g && /* @__PURE__ */ e(x, { mt: "md", children: g })
+    f && /* @__PURE__ */ e(y, { size: "lg", c: "dimmed", lh: 1.7, className: E.description, children: f }),
+    p && /* @__PURE__ */ e(k, { mt: "md", children: p })
   ] });
   return /* @__PURE__ */ e(
-    x,
+    k,
     {
       component: "section",
-      py: k ?? "calc(var(--mantine-spacing-xl) * 3)",
+      py: x ?? "calc(var(--mantine-spacing-xl) * 3)",
       pos: "relative",
-      id: y,
-      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 })
+      id: b,
+      className: d,
+      children: /* @__PURE__ */ e(k, { className: E.container, children: /* @__PURE__ */ i(k, { className: `${E.layout} ${l ? E.reversed : ""}`, children: [
+        /* @__PURE__ */ e(k, { className: `${E.headingSide} ${g ? E.sticky : ""}`, children: /* @__PURE__ */ e(k, { className: g ? E.stickyInner : void 0, children: m }) }),
+        /* @__PURE__ */ e(k, { className: E.contentSide, children: c })
       ] }) })
     }
   );
 }
-function Mo({
+function Qn({
   value: t,
-  suffix: n = "",
-  prefix: r = "",
-  duration: a = 2e3,
-  threshold: s = 0.5,
-  abbreviate: h = !0,
-  decimals: _,
-  ...g
+  suffix: o = "",
+  prefix: n = "",
+  duration: r = 2e3,
+  threshold: a = 0.5,
+  abbreviate: u = !0,
+  decimals: f,
+  ...p
 }) {
-  const [p, m] = T(0), [u, k] = T(!1), i = q(null);
-  return S(() => {
-    const c = i.current;
-    if (!c) return;
-    const d = new IntersectionObserver(
+  const [h, c] = $(0), [g, x] = $(!1), l = W(null);
+  return D(() => {
+    const d = l.current;
+    if (!d) return;
+    const m = new IntersectionObserver(
       ([w]) => {
-        w.isIntersecting && !u && k(!0);
+        w.isIntersecting && !g && x(!0);
       },
-      { threshold: s }
+      { threshold: a }
     );
-    return d.observe(c), () => d.disconnect();
-  }, [u, s]), S(() => {
-    if (!u) return;
-    let c, d;
-    const w = (o) => {
-      c || (c = o);
-      const b = Math.min((o - c) / a, 1), N = 1 - Math.pow(1 - b, 3);
-      m(N * t), b < 1 && (d = requestAnimationFrame(w));
+    return m.observe(d), () => m.disconnect();
+  }, [g, a]), D(() => {
+    if (!g) return;
+    let d, m;
+    const w = (s) => {
+      d || (d = s);
+      const v = Math.min((s - d) / r, 1), N = 1 - Math.pow(1 - v, 3);
+      c(N * t), v < 1 && (m = requestAnimationFrame(w));
     };
-    return d = requestAnimationFrame(w), () => cancelAnimationFrame(d);
-  }, [u, t, a]), /* @__PURE__ */ l(v, { component: "span", ref: i, style: { fontVariantNumeric: "tabular-nums" }, ...g, children: [
-    r,
+    return m = requestAnimationFrame(w), () => cancelAnimationFrame(m);
+  }, [g, t, r]), /* @__PURE__ */ i(y, { component: "span", ref: l, style: { fontVariantNumeric: "tabular-nums" }, ...p, children: [
+    n,
     (() => {
-      if (h && t >= 1e3) {
-        const c = p / 1e3;
-        return c % 1 === 0 ? `${Math.round(c)}K` : `${c.toFixed(1)}K`;
+      if (u && t >= 1e3) {
+        const d = h / 1e3;
+        return d % 1 === 0 ? `${Math.round(d)}K` : `${d.toFixed(1)}K`;
       }
-      return _ !== void 0 ? p.toFixed(_) : t !== Math.floor(t) ? p.toFixed(1) : Math.round(p).toString();
+      return f !== void 0 ? h.toFixed(f) : t !== Math.floor(t) ? h.toFixed(1) : Math.round(h).toString();
     })(),
-    n
+    o
   ] });
 }
-const no = "_root_ujac8_1", oo = "_textarea_ujac8_5", De = {
-  root: no,
-  textarea: oo
+const kn = "_root_ujac8_1", wn = "_textarea_ujac8_5", We = {
+  root: kn,
+  textarea: wn
 };
-function Bo({ code: t, filename: n, height: r = 384 }) {
-  const [a, s] = T(!1), h = L(async () => {
+function Zn({ code: t, filename: o, height: n = 384 }) {
+  const [r, a] = $(!1), u = S(async () => {
     try {
-      await navigator.clipboard.writeText(t), s(!0), setTimeout(() => s(!1), 2e3);
+      await navigator.clipboard.writeText(t), a(!0), setTimeout(() => a(!1), 2e3);
     } catch {
     }
   }, [t]);
-  return /* @__PURE__ */ l(x, { className: De.root, children: [
-    /* @__PURE__ */ l(I, { justify: "space-between", mb: "xs", children: [
-      n && /* @__PURE__ */ e(v, { size: "sm", fw: 500, c: "dimmed", children: n }),
-      /* @__PURE__ */ e(J, { size: "xs", radius: "md", color: a ? "green" : "blue", onClick: h, children: a ? "Copied!" : "Copy" })
+  return /* @__PURE__ */ i(k, { className: We.root, children: [
+    /* @__PURE__ */ i(I, { justify: "space-between", mb: "xs", children: [
+      o && /* @__PURE__ */ e(y, { size: "sm", fw: 500, c: "dimmed", children: o }),
+      /* @__PURE__ */ e(J, { size: "xs", radius: "md", color: r ? "green" : "blue", onClick: u, children: r ? "Copied!" : "Copy" })
     ] }),
-    /* @__PURE__ */ e("textarea", { readOnly: !0, value: t, className: De.textarea, style: { height: r } })
+    /* @__PURE__ */ e("textarea", { readOnly: !0, value: t, className: We.textarea, style: { height: n } })
   ] });
 }
 export {
-  So as Anchor,
-  Mo as AnimatedCounter,
-  Ie as AnimatedWaveform,
-  Po as AspectRatio,
-  $o as AudioPlayer,
-  fe as AudioWaveform,
-  Eo as Badge,
-  Fo as Box,
-  go as BrandLogos,
-  uo as BrandedAppName,
-  Wo as Button,
-  qo as Card,
-  Ao as Center,
-  Bo as CodeBlock,
-  wo as ColorPalette,
-  xo as ColorSwatch,
-  jo as Container,
-  he as Copyable,
-  Go as Divider,
-  yo as DonutChart,
-  fo as DosDonts,
-  po as DownloadCard,
-  _o as ExpandableCard,
-  ce as FadeInSection,
-  Ro as Flex,
-  ko as FrequencyWave,
-  No as GradientSwatch,
-  Oo as Grid,
-  Vo as Group,
-  Io as Hero,
-  xe as HintBadge,
-  Ho as Image,
-  Nn as MiniAudioPlayer,
-  Uo as Paper,
-  bo as PrincipleCard,
-  Xo as SimpleGrid,
-  Co as SpeedDial,
-  zo as SplitSection,
-  Yo as Stack,
-  vo as TestimonialCard,
-  Ko as Text,
-  Jo as ThemeIcon,
-  Qo as Title,
-  To as TypographyColors,
-  Xt as VideoBackground
+  or as Anchor,
+  Qn as AnimatedCounter,
+  Le as AnimatedWaveform,
+  nr as AspectRatio,
+  Vn as AudioPlayer,
+  ye as AudioWaveform,
+  rr as Badge,
+  ar as Box,
+  Sn as BrandLogos,
+  Ln as BrandedAppName,
+  sr as Button,
+  ir as Card,
+  lr as Center,
+  Zn as CodeBlock,
+  jn as ColorPalette,
+  Rn as ColorSwatch,
+  cr as Container,
+  pe as Copyable,
+  dr as Divider,
+  qn as DonutChart,
+  Pn as DosDonts,
+  Dn as DownloadCard,
+  Wn as ExpandableCard,
+  Un as ExpandingSection,
+  ue as FadeInSection,
+  mr as Flex,
+  An as FrequencyWave,
+  Gn as GradientSwatch,
+  ur as Grid,
+  hr as Group,
+  Yn as Hero,
+  Ce as HintBadge,
+  gr as Image,
+  zo as MiniAudioPlayer,
+  pr as Paper,
+  Xn as ParallaxSection,
+  Kn as PartnerMarquee,
+  En as PrincipleCard,
+  fr as SimpleGrid,
+  Hn as SpeedDial,
+  Jn as SplitSection,
+  _r as Stack,
+  Fn as TestimonialCard,
+  br as Text,
+  vr as ThemeIcon,
+  yr as Title,
+  On as TypographyColors,
+  Zt as VideoBackground
 };