@frequencyads/components 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -1,1005 +1,685 @@
 'use client';
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/AnimatedCounter/AnimatedCounter.tsx
-import { useEffect, useRef, useState } from "react";
-import { Text } from "@mantine/core";
-import { jsxs } from "react/jsx-runtime";
-function AnimatedCounter(_a) {
-  var _b = _a, {
-    value,
-    suffix = "",
-    prefix = "",
-    duration = 2e3,
-    threshold = 0.5,
-    abbreviate = true,
-    decimals
-  } = _b, textProps = __objRest(_b, [
-    "value",
-    "suffix",
-    "prefix",
-    "duration",
-    "threshold",
-    "abbreviate",
-    "decimals"
-  ]);
-  const [count, setCount] = useState(0);
-  const [hasTriggered, setHasTriggered] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting && !hasTriggered) {
-          setHasTriggered(true);
-        }
+import { jsxs as m, jsx as e, Fragment as ze } from "react/jsx-runtime";
+import { useState as z, useRef as D, useEffect as P, forwardRef as xe, useImperativeHandle as Se, useCallback as B } from "react";
+import { Text as N, Box as k, Group as F, ActionIcon as Y, Slider as Be, Button as ie, Portal as Te, Notification as Pe, Title as oe, SimpleGrid as Me, Paper as U, Stack as ce, ThemeIcon as We, useMantineColorScheme as Ee, Badge as $e, Transition as De, Tooltip as Fe, Avatar as je } from "@mantine/core";
+import { motion as S } from "framer-motion";
+import { IconPlayerPauseFilled as Ce, IconPlayerPlayFilled as ke, IconVolumeOff as Ge, IconVolume as Re, IconDownload as Ae, IconX as Oe, IconCheck as He, IconPlus as ue, IconQuote as Ve } from "@tabler/icons-react";
+import qe from "@frequencyads/brand/assets/frequency-mark-white.svg";
+import { gradients as Ue } from "@frequencyads/brand/colors";
+function Cn({
+  value: t,
+  suffix: o = "",
+  prefix: a = "",
+  duration: s = 2e3,
+  threshold: i = 0.5,
+  abbreviate: p = !0,
+  decimals: y,
+  ...g
+}) {
+  const [_, c] = z(0), [u, b] = z(!1), r = D(null);
+  return P(() => {
+    const d = r.current;
+    if (!d) return;
+    const l = new IntersectionObserver(
+      ([w]) => {
+        w.isIntersecting && !u && b(!0);
       },
-      { threshold }
+      { threshold: i }
     );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [hasTriggered, threshold]);
-  useEffect(() => {
-    if (!hasTriggered) return;
-    let startTime;
-    let raf;
-    const animate = (timestamp) => {
-      if (!startTime) startTime = timestamp;
-      const progress = Math.min((timestamp - startTime) / duration, 1);
-      const eased = 1 - Math.pow(1 - progress, 3);
-      setCount(eased * value);
-      if (progress < 1) {
-        raf = requestAnimationFrame(animate);
-      }
+    return l.observe(d), () => l.disconnect();
+  }, [u, i]), P(() => {
+    if (!u) return;
+    let d, l;
+    const w = (n) => {
+      d || (d = n);
+      const f = Math.min((n - d) / s, 1), I = 1 - Math.pow(1 - f, 3);
+      c(I * t), f < 1 && (l = requestAnimationFrame(w));
     };
-    raf = requestAnimationFrame(animate);
-    return () => cancelAnimationFrame(raf);
-  }, [hasTriggered, value, duration]);
-  const formatValue = () => {
-    if (abbreviate && value >= 1e3) {
-      const kValue = count / 1e3;
-      return kValue % 1 === 0 ? `${Math.round(kValue)}K` : `${kValue.toFixed(1)}K`;
-    }
-    if (decimals !== void 0) {
-      return count.toFixed(decimals);
-    }
-    if (value !== Math.floor(value)) {
-      return count.toFixed(1);
-    }
-    return Math.round(count).toString();
-  };
-  return /* @__PURE__ */ jsxs(
-    Text,
-    __spreadProps(__spreadValues({
+    return l = requestAnimationFrame(w), () => cancelAnimationFrame(l);
+  }, [u, t, s]), /* @__PURE__ */ m(
+    N,
+    {
       component: "span",
-      ref,
-      style: { fontVariantNumeric: "tabular-nums" }
-    }, textProps), {
+      ref: r,
+      style: { fontVariantNumeric: "tabular-nums" },
+      ...g,
       children: [
-        prefix,
-        formatValue(),
-        suffix
+        a,
+        (() => {
+          if (p && t >= 1e3) {
+            const d = _ / 1e3;
+            return d % 1 === 0 ? `${Math.round(d)}K` : `${d.toFixed(1)}K`;
+          }
+          return y !== void 0 ? _.toFixed(y) : t !== Math.floor(t) ? _.toFixed(1) : Math.round(_).toString();
+        })(),
+        o
       ]
-    })
+    }
   );
 }
-
-// src/AnimatedWaveform/AnimatedWaveform.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { motion } from "framer-motion";
-
-// src/AnimatedWaveform/AnimatedWaveform.module.css
-var AnimatedWaveform_default = {};
-
-// src/AnimatedWaveform/AnimatedWaveform.tsx
-import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
-var BAR_COUNT = 140;
-var BAR_WIDTH = 3;
-var BAR_GAP = 10;
-var VIEW_HEIGHT = 150;
-var MIDLINE = VIEW_HEIGHT / 2;
-function AnimatedWaveform({
-  barCount = BAR_COUNT,
-  duration = 3,
-  repeatDelay = 3
+const Xe = "_root_1bq7s_1", Ye = "_svg_1bq7s_12", me = {
+  root: Xe,
+  svg: Ye
+}, Ke = 140, he = 3, pe = 10, Le = 150, V = Le / 2;
+function fe({
+  barCount: t = Ke,
+  duration: o = 3,
+  repeatDelay: a = 3
 }) {
-  const [mounted, setMounted] = useState2(false);
-  useEffect2(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) return null;
-  const viewWidth = barCount * BAR_GAP;
-  return /* @__PURE__ */ jsx("div", { className: AnimatedWaveform_default.root, children: /* @__PURE__ */ jsxs2(
+  const [s, i] = z(!1);
+  if (P(() => {
+    i(!0);
+  }, []), !s) return null;
+  const p = t * pe;
+  return /* @__PURE__ */ e("div", { className: me.root, children: /* @__PURE__ */ m(
     "svg",
     {
-      className: AnimatedWaveform_default.svg,
-      viewBox: `0 0 ${viewWidth} ${VIEW_HEIGHT}`,
+      className: me.svg,
+      viewBox: `0 0 ${p} ${Le}`,
       preserveAspectRatio: "none",
       children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
-          /* @__PURE__ */ jsx("stop", { offset: "15%", stopColor: "white", stopOpacity: "0.15" }),
-          /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.25" }),
-          /* @__PURE__ */ jsx("stop", { offset: "85%", stopColor: "white", stopOpacity: "0.15" }),
-          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ m("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(barCount)].map((_, i) => {
-          const x = i * BAR_GAP;
-          const baseHeight = 18 + Math.sin(i * 0.4) * 6 + Math.cos(i * 0.7) * 4;
-          const staggerDelay = Math.min(i, barCount - 1 - i) * 0.04;
-          return /* @__PURE__ */ jsxs2("g", { children: [
-            /* @__PURE__ */ jsx(
-              motion.rect,
+        [...Array(t)].map((y, g) => {
+          const _ = g * pe, c = 18 + Math.sin(g * 0.4) * 6 + Math.cos(g * 0.7) * 4, u = Math.min(g, t - 1 - g) * 0.04;
+          return /* @__PURE__ */ m("g", { children: [
+            /* @__PURE__ */ e(
+              S.rect,
               {
-                x,
-                width: BAR_WIDTH,
+                x: _,
+                width: he,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: baseHeight / 2, y: MIDLINE - baseHeight / 4 },
+                initial: { height: c / 2, y: V - c / 4 },
                 animate: {
-                  height: [baseHeight / 2, baseHeight * 2, baseHeight / 2, baseHeight * 1.2, baseHeight / 2],
+                  height: [c / 2, c * 2, c / 2, c * 1.2, c / 2],
                   y: [
-                    MIDLINE - baseHeight / 4,
-                    MIDLINE - baseHeight,
-                    MIDLINE - baseHeight / 4,
-                    MIDLINE - baseHeight * 0.6,
-                    MIDLINE - baseHeight / 4
+                    V - c / 4,
+                    V - c,
+                    V - c / 4,
+                    V - c * 0.6,
+                    V - c / 4
                   ]
                 },
                 transition: {
-                  duration,
-                  repeat: Infinity,
+                  duration: o,
+                  repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: staggerDelay,
-                  repeatDelay
+                  delay: u,
+                  repeatDelay: a
                 }
               }
             ),
-            /* @__PURE__ */ jsx(
-              motion.rect,
+            /* @__PURE__ */ e(
+              S.rect,
               {
-                x,
-                y: MIDLINE,
-                width: BAR_WIDTH,
+                x: _,
+                y: V,
+                width: he,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: baseHeight / 2 },
+                initial: { height: c / 2 },
                 animate: {
-                  height: [baseHeight / 2, baseHeight * 2, baseHeight / 2, baseHeight * 1.2, baseHeight / 2]
+                  height: [c / 2, c * 2, c / 2, c * 1.2, c / 2]
                 },
                 transition: {
-                  duration,
-                  repeat: Infinity,
+                  duration: o,
+                  repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: staggerDelay,
-                  repeatDelay
+                  delay: u,
+                  repeatDelay: a
                 }
               }
             )
-          ] }, i);
+          ] }, g);
         })
       ]
     }
   ) });
 }
-
-// src/AudioPlayer/AudioPlayer.tsx
-import { useRef as useRef3, useState as useState4, useEffect as useEffect4, useCallback as useCallback2 } from "react";
-import { ActionIcon, Group, Text as Text2, Slider, Box as Box2 } from "@mantine/core";
-import {
-  IconPlayerPlayFilled,
-  IconPlayerPauseFilled,
-  IconVolume,
-  IconVolumeOff,
-  IconDownload
-} from "@tabler/icons-react";
-
-// src/AudioWaveform/AudioWaveform.tsx
-import { useRef as useRef2, useImperativeHandle, forwardRef, useEffect as useEffect3, useState as useState3, useCallback } from "react";
-import { Box } from "@mantine/core";
-
-// src/AudioWaveform/AudioWaveform.module.css
-var AudioWaveform_default = {};
-
-// src/AudioWaveform/AudioWaveform.tsx
-import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
-function generateWaveformData(barCount = 100) {
-  const data = [];
-  for (let i = 0; i < barCount; i++) {
-    const progress = i / (barCount - 1);
-    const baseHeight = 20 + Math.sin(i * 0.1) * 15;
-    const noise = (Math.random() - 0.5) * 20;
-    const envelope = Math.sin(progress * Math.PI) * 30;
-    const midBoost = progress > 0.2 && progress < 0.8 ? Math.random() * 10 : 0;
-    const endTaper = progress < 0.05 || progress > 0.95 ? Math.min(progress / 0.05, (1 - progress) / 0.05) : 1;
-    data.push(Math.max(5, Math.min(90, (baseHeight + noise + envelope + midBoost) * endTaper)));
+const Je = "_root_1pkxe_1", Qe = "_progressOverlay_1pkxe_9", Ze = "_bars_1pkxe_19", et = "_bar_1pkxe_19", tt = "_loading_1pkxe_34", J = {
+  root: Je,
+  progressOverlay: Qe,
+  bars: Ze,
+  bar: et,
+  loading: tt
+};
+function nt(t = 100) {
+  const o = [];
+  for (let a = 0; a < t; a++) {
+    const s = a / (t - 1), i = 20 + Math.sin(a * 0.1) * 15, p = (Math.random() - 0.5) * 20, y = Math.sin(s * Math.PI) * 30, g = s > 0.2 && s < 0.8 ? Math.random() * 10 : 0, _ = s < 0.05 || s > 0.95 ? Math.min(s / 0.05, (1 - s) / 0.05) : 1;
+    o.push(Math.max(5, Math.min(90, (i + p + y + g) * _)));
   }
-  return data;
+  return o;
 }
-var AudioWaveform = forwardRef(
+const le = xe(
   ({
-    audioRef,
-    currentTime = 0,
-    onSeek,
-    loading = false,
-    waveColor = "#CCCCCC",
-    progressColor = "#169bde",
-    height = 60,
-    barWidth = 2,
-    barGap = 1
-  }, ref) => {
-    const containerRef = useRef2(null);
-    const [waveformData] = useState3(() => generateWaveformData());
-    const [duration, setDuration] = useState3(0);
-    const [progress, setProgress] = useState3(0);
-    useImperativeHandle(ref, () => ({
-      seekTo: (time) => {
-        if (duration > 0) {
-          setProgress(Math.max(0, Math.min(100, time / duration * 100)));
-        }
+    audioRef: t,
+    currentTime: o = 0,
+    onSeek: a,
+    loading: s = !1,
+    waveColor: i = "#CCCCCC",
+    progressColor: p = "#169bde",
+    height: y = 60,
+    barWidth: g = 2,
+    barGap: _ = 1
+  }, c) => {
+    const u = D(null), [b] = z(() => nt()), [r, v] = z(0), [d, l] = z(0);
+    Se(c, () => ({
+      seekTo: (n) => {
+        r > 0 && l(Math.max(0, Math.min(100, n / r * 100)));
       },
-      getCurrentTime: () => progress / 100 * duration,
-      getDuration: () => duration
-    }));
-    useEffect3(() => {
-      const audio = audioRef.current;
-      if (!audio) return;
-      const handleMeta = () => {
-        if (audio.duration && !isNaN(audio.duration)) setDuration(audio.duration);
+      getCurrentTime: () => d / 100 * r,
+      getDuration: () => r
+    })), P(() => {
+      const n = t.current;
+      if (!n) return;
+      const f = () => {
+        n.duration && !isNaN(n.duration) && v(n.duration);
+      }, I = () => {
+        n.duration > 0 && l(n.currentTime / n.duration * 100);
       };
-      const handleTime = () => {
-        if (audio.duration > 0) setProgress(audio.currentTime / audio.duration * 100);
+      return n.duration && !isNaN(n.duration) && v(n.duration), n.addEventListener("loadedmetadata", f), n.addEventListener("timeupdate", I), () => {
+        n.removeEventListener("loadedmetadata", f), n.removeEventListener("timeupdate", I);
       };
-      if (audio.duration && !isNaN(audio.duration)) setDuration(audio.duration);
-      audio.addEventListener("loadedmetadata", handleMeta);
-      audio.addEventListener("timeupdate", handleTime);
-      return () => {
-        audio.removeEventListener("loadedmetadata", handleMeta);
-        audio.removeEventListener("timeupdate", handleTime);
-      };
-    }, [audioRef]);
-    useEffect3(() => {
-      if (duration > 0 && typeof currentTime === "number") {
-        setProgress(currentTime / duration * 100);
-      }
-    }, [currentTime, duration]);
-    const handleClick = useCallback(
-      (e) => {
-        if (!containerRef.current || !onSeek || duration === 0) return;
-        const rect = containerRef.current.getBoundingClientRect();
-        const seekTime = (e.clientX - rect.left) / rect.width * duration;
-        onSeek(seekTime);
+    }, [t]), P(() => {
+      r > 0 && typeof o == "number" && l(o / r * 100);
+    }, [o, r]);
+    const w = B(
+      (n) => {
+        if (!u.current || !a || r === 0) return;
+        const f = u.current.getBoundingClientRect(), I = (n.clientX - f.left) / f.width * r;
+        a(I);
       },
-      [onSeek, duration]
+      [a, r]
     );
-    return /* @__PURE__ */ jsxs3(
-      Box,
+    return /* @__PURE__ */ m(
+      k,
       {
-        ref: containerRef,
-        className: AudioWaveform_default.root,
-        style: { height },
-        onClick: handleClick,
+        ref: u,
+        className: J.root,
+        style: { height: y },
+        onClick: w,
         children: [
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ e(
             "div",
             {
-              className: AudioWaveform_default.progressOverlay,
-              style: { width: `${progress}%`, backgroundColor: `${progressColor}15` }
+              className: J.progressOverlay,
+              style: { width: `${d}%`, backgroundColor: `${p}15` }
             }
           ),
-          /* @__PURE__ */ jsx2("div", { className: AudioWaveform_default.bars, style: { gap: barGap }, children: waveformData.map((barHeight, i) => {
-            const isActive = i / waveformData.length * 100 <= progress;
-            return /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ e("div", { className: J.bars, style: { gap: _ }, children: b.map((n, f) => {
+            const I = f / b.length * 100 <= d;
+            return /* @__PURE__ */ e(
               "div",
               {
-                className: AudioWaveform_default.bar,
+                className: J.bar,
                 style: {
-                  width: barWidth,
-                  height: `${barHeight}%`,
-                  backgroundColor: isActive ? progressColor : waveColor
+                  width: g,
+                  height: `${n}%`,
+                  backgroundColor: I ? p : i
                 }
               },
-              i
+              f
             );
           }) }),
-          loading && /* @__PURE__ */ jsx2("div", { className: AudioWaveform_default.loading, children: "Loading waveform..." })
+          s && /* @__PURE__ */ e("div", { className: J.loading, children: "Loading waveform..." })
         ]
       }
     );
   }
 );
-AudioWaveform.displayName = "AudioWaveform";
-
-// src/AudioPlayer/AudioPlayer.module.css
-var AudioPlayer_default = {};
-
-// src/AudioPlayer/AudioPlayer.tsx
-import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
-function formatTime(seconds) {
-  const m = Math.floor(seconds / 60);
-  const s = Math.floor(seconds % 60);
-  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+le.displayName = "AudioWaveform";
+const ot = "_root_n9zxy_1", st = "_playButton_n9zxy_8", at = "_time_n9zxy_22", rt = "_volumeGroup_n9zxy_28", Q = {
+  root: ot,
+  playButton: st,
+  time: at,
+  volumeGroup: rt
+};
+function se(t) {
+  const o = Math.floor(t / 60), a = Math.floor(t % 60);
+  return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
 }
-function AudioPlayer({
-  src,
-  filename = "audio",
-  playButtonColor,
-  playButtonSize = 32,
-  waveColor = "#D0D0D0",
-  progressColor = "#a8a8a8",
-  waveHeight = 64,
-  barWidth = 3,
-  barGap = 2,
-  showVolume = true,
-  showDownload = true
+function kn({
+  src: t,
+  filename: o = "audio",
+  playButtonColor: a,
+  playButtonSize: s = 32,
+  waveColor: i = "#D0D0D0",
+  progressColor: p = "#a8a8a8",
+  waveHeight: y = 64,
+  barWidth: g = 3,
+  barGap: _ = 2,
+  showVolume: c = !0,
+  showDownload: u = !0
 }) {
-  const audioRef = useRef3(null);
-  const [isPlaying, setIsPlaying] = useState4(false);
-  const [currentTime, setCurrentTime] = useState4(0);
-  const [currentTimeFormatted, setCurrentTimeFormatted] = useState4("00:00");
-  const [totalDuration, setTotalDuration] = useState4("00:00");
-  const [volume, setVolume] = useState4(50);
-  const [prevVolume, setPrevVolume] = useState4(50);
-  const [isMuted, setIsMuted] = useState4(false);
-  useEffect4(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    audio.volume = volume / 100;
-    const handleTimeUpdate = () => {
-      setCurrentTime(audio.currentTime);
-      setCurrentTimeFormatted(formatTime(audio.currentTime));
-    };
-    const handleMeta = () => setTotalDuration(formatTime(audio.duration));
-    const handleEnded = () => {
+  const b = D(null), [r, v] = z(!1), [d, l] = z(0), [w, n] = z("00:00"), [f, I] = z("00:00"), [T, R] = z(50), [A, j] = z(50), [C, M] = z(!1);
+  P(() => {
+    const h = b.current;
+    if (!h) return;
+    h.volume = T / 100;
+    const x = () => {
+      l(h.currentTime), n(se(h.currentTime));
+    }, L = () => I(se(h.duration)), X = () => {
       setTimeout(() => {
-        setCurrentTime(0);
-        setCurrentTimeFormatted("00:00");
-        setIsPlaying(false);
+        l(0), n("00:00"), v(!1);
       }, 500);
+    }, Z = () => v(!0), ee = () => v(!1);
+    return h.addEventListener("timeupdate", x), h.addEventListener("loadedmetadata", L), h.addEventListener("ended", X), h.addEventListener("play", Z), h.addEventListener("pause", ee), () => {
+      h.removeEventListener("timeupdate", x), h.removeEventListener("loadedmetadata", L), h.removeEventListener("ended", X), h.removeEventListener("play", Z), h.removeEventListener("pause", ee);
     };
-    const handlePlay = () => setIsPlaying(true);
-    const handlePause = () => setIsPlaying(false);
-    audio.addEventListener("timeupdate", handleTimeUpdate);
-    audio.addEventListener("loadedmetadata", handleMeta);
-    audio.addEventListener("ended", handleEnded);
-    audio.addEventListener("play", handlePlay);
-    audio.addEventListener("pause", handlePause);
-    return () => {
-      audio.removeEventListener("timeupdate", handleTimeUpdate);
-      audio.removeEventListener("loadedmetadata", handleMeta);
-      audio.removeEventListener("ended", handleEnded);
-      audio.removeEventListener("play", handlePlay);
-      audio.removeEventListener("pause", handlePause);
-    };
-  }, [src]);
-  const togglePlay = useCallback2(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    if (isPlaying) {
-      audio.pause();
-    } else {
-      audio.play().catch(() => {
-      });
-    }
-  }, [isPlaying]);
-  const handleSeek = useCallback2((time) => {
-    const audio = audioRef.current;
-    if (audio && !isNaN(time) && isFinite(time)) {
-      audio.currentTime = time;
-      setCurrentTime(time);
-      setCurrentTimeFormatted(formatTime(time));
-    }
-  }, []);
-  const handleVolumeChange = useCallback2(
-    (value) => {
-      const audio = audioRef.current;
-      if (!audio) return;
-      audio.volume = value / 100;
-      setVolume(value);
-      if (value > 0) {
-        setPrevVolume(value);
-        setIsMuted(false);
-      } else {
-        setIsMuted(true);
-      }
+  }, [t]);
+  const E = B(() => {
+    const h = b.current;
+    h && (r ? h.pause() : h.play().catch(() => {
+    }));
+  }, [r]), G = B((h) => {
+    const x = b.current;
+    x && !isNaN(h) && isFinite(h) && (x.currentTime = h, l(h), n(se(h)));
+  }, []), O = B(
+    (h) => {
+      const x = b.current;
+      x && (x.volume = h / 100, R(h), h > 0 ? (j(h), M(!1)) : M(!0));
     },
     []
-  );
-  const toggleMute = useCallback2(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-    if (isMuted) {
-      const restore = prevVolume || 50;
-      audio.volume = restore / 100;
-      setVolume(restore);
-      setIsMuted(false);
-    } else {
-      setPrevVolume(volume);
-      audio.volume = 0;
-      setVolume(0);
-      setIsMuted(true);
-    }
-  }, [isMuted, volume, prevVolume]);
-  const handleDownload = useCallback2(() => {
-    fetch(src).then((r) => r.blob()).then((blob) => {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    }).catch(() => window.open(src, "_blank"));
-  }, [src, filename]);
-  return /* @__PURE__ */ jsxs4(Group, { gap: "sm", wrap: "nowrap", className: AudioPlayer_default.root, children: [
-    /* @__PURE__ */ jsx3("audio", { ref: audioRef, src, preload: "metadata" }),
-    /* @__PURE__ */ jsx3(
-      ActionIcon,
+  ), H = B(() => {
+    const h = b.current;
+    if (h)
+      if (C) {
+        const x = A || 50;
+        h.volume = x / 100, R(x), M(!1);
+      } else
+        j(T), h.volume = 0, R(0), M(!0);
+  }, [C, T, A]), K = B(() => {
+    fetch(t).then((h) => h.blob()).then((h) => {
+      const x = URL.createObjectURL(h), L = document.createElement("a");
+      L.href = x, L.download = o, document.body.appendChild(L), L.click(), document.body.removeChild(L), URL.revokeObjectURL(x);
+    }).catch(() => window.open(t, "_blank"));
+  }, [t, o]);
+  return /* @__PURE__ */ m(F, { gap: "sm", wrap: "nowrap", className: Q.root, children: [
+    /* @__PURE__ */ e("audio", { ref: b, src: t, preload: "metadata" }),
+    /* @__PURE__ */ e(
+      Y,
       {
         variant: "filled",
         radius: "xl",
-        size: playButtonSize,
-        color: playButtonColor,
-        onClick: togglePlay,
-        "aria-label": isPlaying ? "Pause" : "Play",
-        className: AudioPlayer_default.playButton,
-        children: isPlaying ? /* @__PURE__ */ jsx3(IconPlayerPauseFilled, { size: playButtonSize * 0.5 }) : /* @__PURE__ */ jsx3(IconPlayerPlayFilled, { size: playButtonSize * 0.5 })
+        size: s,
+        color: a,
+        onClick: E,
+        "aria-label": r ? "Pause" : "Play",
+        className: Q.playButton,
+        children: r ? /* @__PURE__ */ e(Ce, { size: s * 0.5 }) : /* @__PURE__ */ e(ke, { size: s * 0.5 })
       }
     ),
-    /* @__PURE__ */ jsx3(Text2, { size: "xs", ff: "monospace", c: "dimmed", className: AudioPlayer_default.time, children: currentTimeFormatted }),
-    /* @__PURE__ */ jsx3(Box2, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx3(
-      AudioWaveform,
+    /* @__PURE__ */ e(N, { size: "xs", ff: "monospace", c: "dimmed", className: Q.time, children: w }),
+    /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
+      le,
       {
-        audioRef,
-        currentTime,
-        onSeek: handleSeek,
-        waveColor,
-        progressColor,
-        height: waveHeight,
-        barWidth,
-        barGap
+        audioRef: b,
+        currentTime: d,
+        onSeek: G,
+        waveColor: i,
+        progressColor: p,
+        height: y,
+        barWidth: g,
+        barGap: _
       }
     ) }),
-    /* @__PURE__ */ jsx3(Text2, { size: "xs", ff: "monospace", c: "dimmed", className: AudioPlayer_default.time, children: totalDuration }),
-    showVolume && /* @__PURE__ */ jsxs4(Group, { gap: 4, wrap: "nowrap", className: AudioPlayer_default.volumeGroup, children: [
-      /* @__PURE__ */ jsx3(
-        ActionIcon,
+    /* @__PURE__ */ e(N, { size: "xs", ff: "monospace", c: "dimmed", className: Q.time, children: f }),
+    c && /* @__PURE__ */ m(F, { gap: 4, wrap: "nowrap", className: Q.volumeGroup, children: [
+      /* @__PURE__ */ e(
+        Y,
         {
           variant: "subtle",
           size: "sm",
-          onClick: toggleMute,
-          "aria-label": isMuted ? "Unmute" : "Mute",
-          children: isMuted ? /* @__PURE__ */ jsx3(IconVolumeOff, { size: 16 }) : /* @__PURE__ */ jsx3(IconVolume, { size: 16 })
+          onClick: H,
+          "aria-label": C ? "Unmute" : "Mute",
+          children: C ? /* @__PURE__ */ e(Ge, { size: 16 }) : /* @__PURE__ */ e(Re, { size: 16 })
         }
       ),
-      /* @__PURE__ */ jsx3(
-        Slider,
+      /* @__PURE__ */ e(
+        Be,
         {
-          value: volume,
-          onChange: handleVolumeChange,
+          value: T,
+          onChange: O,
           size: "xs",
           w: 80,
           "aria-label": "Volume"
         }
       )
     ] }),
-    showDownload && /* @__PURE__ */ jsx3(ActionIcon, { variant: "subtle", size: "sm", onClick: handleDownload, "aria-label": "Download", children: /* @__PURE__ */ jsx3(IconDownload, { size: 16 }) })
+    u && /* @__PURE__ */ e(Y, { variant: "subtle", size: "sm", onClick: K, "aria-label": "Download", children: /* @__PURE__ */ e(Ae, { size: 16 }) })
   ] });
 }
-
-// src/CodeBlock/CodeBlock.tsx
-import { useState as useState5, useCallback as useCallback3 } from "react";
-import { Box as Box3, Button, Group as Group2, Text as Text3 } from "@mantine/core";
-
-// src/CodeBlock/CodeBlock.module.css
-var CodeBlock_default = {};
-
-// src/CodeBlock/CodeBlock.tsx
-import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
-function CodeBlock({ code, filename, height = 384 }) {
-  const [copied, setCopied] = useState5(false);
-  const handleCopy = useCallback3(async () => {
+const it = "_root_ujac8_1", ct = "_textarea_ujac8_5", _e = {
+  root: it,
+  textarea: ct
+};
+function Ln({ code: t, filename: o, height: a = 384 }) {
+  const [s, i] = z(!1), p = B(async () => {
     try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch (e) {
+      await navigator.clipboard.writeText(t), i(!0), setTimeout(() => i(!1), 2e3);
+    } catch {
     }
-  }, [code]);
-  return /* @__PURE__ */ jsxs5(Box3, { className: CodeBlock_default.root, children: [
-    /* @__PURE__ */ jsxs5(Group2, { justify: "space-between", mb: "xs", children: [
-      filename && /* @__PURE__ */ jsx4(Text3, { size: "sm", fw: 500, c: "dimmed", children: filename }),
-      /* @__PURE__ */ jsx4(
-        Button,
+  }, [t]);
+  return /* @__PURE__ */ m(k, { className: _e.root, children: [
+    /* @__PURE__ */ m(F, { justify: "space-between", mb: "xs", children: [
+      o && /* @__PURE__ */ e(N, { size: "sm", fw: 500, c: "dimmed", children: o }),
+      /* @__PURE__ */ e(
+        ie,
         {
           size: "xs",
           radius: "md",
-          color: copied ? "green" : "blue",
-          onClick: handleCopy,
-          children: copied ? "Copied!" : "Copy"
+          color: s ? "green" : "blue",
+          onClick: p,
+          children: s ? "Copied!" : "Copy"
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ e(
       "textarea",
       {
-        readOnly: true,
-        value: code,
-        className: CodeBlock_default.textarea,
-        style: { height }
+        readOnly: !0,
+        value: t,
+        className: _e.textarea,
+        style: { height: a }
       }
     )
   ] });
 }
-
-// src/ColorPalette/ColorPalette.tsx
-import { SimpleGrid, Text as Text4, Title } from "@mantine/core";
-
-// src/Copyable/Copyable.tsx
-import { useState as useState6, useCallback as useCallback4 } from "react";
-import { Notification, Portal } from "@mantine/core";
-
-// src/Copyable/Copyable.module.css
-var Copyable_default = {};
-
-// src/Copyable/Copyable.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
-function Copyable({ value, children }) {
-  const [toast, setToast] = useState6(null);
-  const handleCopy = useCallback4(() => {
-    navigator.clipboard.writeText(value).then(() => {
-      setToast(`Copied ${value}`);
-      setTimeout(() => setToast(null), 1800);
+const lt = "_root_ix1b2_1", dt = "_toast_ix1b2_5", ve = {
+  root: lt,
+  toast: dt
+};
+function de({ value: t, children: o }) {
+  const [a, s] = z(null), i = B(() => {
+    navigator.clipboard.writeText(t).then(() => {
+      s(`Copied ${t}`), setTimeout(() => s(null), 1800);
     });
-  }, [value]);
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx5(
+  }, [t]);
+  return /* @__PURE__ */ m(ze, { children: [
+    /* @__PURE__ */ e(
       "span",
       {
-        onClick: handleCopy,
-        className: Copyable_default.root,
-        title: `Click to copy ${value}`,
-        children
+        onClick: i,
+        className: ve.root,
+        title: `Click to copy ${t}`,
+        children: o
       }
     ),
-    toast && /* @__PURE__ */ jsx5(Portal, { children: /* @__PURE__ */ jsx5(
-      Notification,
+    a && /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
+      Pe,
       {
-        withCloseButton: false,
-        className: Copyable_default.toast,
+        withCloseButton: !1,
+        className: ve.toast,
         color: "blue",
-        children: toast
+        children: a
       }
     ) })
   ] });
 }
-
-// src/ColorPalette/ColorPalette.module.css
-var ColorPalette_default = {};
-
-// src/ColorPalette/ColorPalette.tsx
-import { jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
-function ColorPalette({ name, shades, mainIndex = 5 }) {
-  return /* @__PURE__ */ jsxs7("div", { className: ColorPalette_default.root, children: [
-    /* @__PURE__ */ jsx6(Title, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: name }),
-    /* @__PURE__ */ jsx6(SimpleGrid, { cols: 10, spacing: 4, children: shades.map((hex, i) => /* @__PURE__ */ jsx6(Copyable, { value: hex, children: /* @__PURE__ */ jsxs7("div", { className: ColorPalette_default.shade, children: [
-      /* @__PURE__ */ jsx6(
+const ut = "_root_3ht5s_1", mt = "_shade_3ht5s_5", ht = "_color_3ht5s_10", pt = "_main_3ht5s_20", te = {
+  root: ut,
+  shade: mt,
+  color: ht,
+  main: pt
+};
+function Sn({ name: t, shades: o, mainIndex: a = 5 }) {
+  return /* @__PURE__ */ m("div", { className: te.root, children: [
+    /* @__PURE__ */ e(oe, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
+    /* @__PURE__ */ e(Me, { cols: 10, spacing: 4, children: o.map((s, i) => /* @__PURE__ */ e(de, { value: s, children: /* @__PURE__ */ m("div", { className: te.shade, children: [
+      /* @__PURE__ */ e(
         "div",
         {
-          className: `${ColorPalette_default.color} ${i === mainIndex ? ColorPalette_default.main : ""}`,
-          style: { backgroundColor: hex }
+          className: `${te.color} ${i === a ? te.main : ""}`,
+          style: { backgroundColor: s }
         }
       ),
-      /* @__PURE__ */ jsx6(Text4, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: i }),
-      /* @__PURE__ */ jsx6(Text4, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: hex })
+      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: i }),
+      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: s })
     ] }) }, i)) })
   ] });
 }
-
-// src/ColorSwatch/ColorSwatch.tsx
-import { Paper, Text as Text5 } from "@mantine/core";
-
-// src/ColorSwatch/ColorSwatch.module.css
-var ColorSwatch_default = {};
-
-// src/ColorSwatch/ColorSwatch.tsx
-import { jsx as jsx7, jsxs as jsxs8 } from "react/jsx-runtime";
-function ColorSwatch({ name, hex, label }) {
-  return /* @__PURE__ */ jsx7(Copyable, { value: hex, children: /* @__PURE__ */ jsxs8(Paper, { className: ColorSwatch_default.root, shadow: "lg", radius: "md", withBorder: false, children: [
-    /* @__PURE__ */ jsx7("div", { className: ColorSwatch_default.preview, style: { backgroundColor: hex } }),
-    /* @__PURE__ */ jsxs8("div", { className: ColorSwatch_default.info, children: [
-      /* @__PURE__ */ jsx7(Text5, { fw: 600, size: "sm", children: name }),
-      /* @__PURE__ */ jsx7(Text5, { size: "xs", c: "dimmed", ff: "monospace", children: hex }),
-      label && /* @__PURE__ */ jsx7(Text5, { size: "xs", c: "dimmed", children: label })
+const ft = "_root_1vxkx_1", _t = "_preview_1vxkx_11", vt = "_info_1vxkx_15", ae = {
+  root: ft,
+  preview: _t,
+  info: vt
+};
+function Bn({ name: t, hex: o, label: a }) {
+  return /* @__PURE__ */ e(de, { value: o, children: /* @__PURE__ */ m(U, { className: ae.root, shadow: "lg", radius: "md", withBorder: !1, children: [
+    /* @__PURE__ */ e("div", { className: ae.preview, style: { backgroundColor: o } }),
+    /* @__PURE__ */ m("div", { className: ae.info, children: [
+      /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: t }),
+      /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", ff: "monospace", children: o }),
+      a && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: a })
     ] })
   ] }) });
 }
-
-// src/DosDonts/DosDonts.tsx
-import { SimpleGrid as SimpleGrid2, Paper as Paper2, Text as Text6, Group as Group3 } from "@mantine/core";
-import { IconCheck, IconX } from "@tabler/icons-react";
-
-// src/DosDonts/DosDonts.module.css
-var DosDonts_default = {};
-
-// src/DosDonts/DosDonts.tsx
-import { jsx as jsx8, jsxs as jsxs9 } from "react/jsx-runtime";
-function DosDonts({ items }) {
-  return /* @__PURE__ */ jsx8("div", { className: DosDonts_default.root, children: items.map((item, i) => /* @__PURE__ */ jsxs9(SimpleGrid2, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
-    /* @__PURE__ */ jsxs9(Paper2, { className: DosDonts_default.dont, p: "md", radius: "md", children: [
-      /* @__PURE__ */ jsxs9(Group3, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ jsx8(IconX, { size: 16, className: DosDonts_default.dontIcon }),
-        /* @__PURE__ */ jsx8(Text6, { size: "sm", fw: 600, className: DosDonts_default.dontLabel, children: "Don't" })
+const gt = "_root_dzed6_1", yt = "_dont_dzed6_7", bt = "_dontIcon_dzed6_12", wt = "_dontLabel_dzed6_13", Nt = "_doIcon_dzed6_22", It = "_doLabel_dzed6_23", q = {
+  root: gt,
+  dont: yt,
+  dontIcon: bt,
+  dontLabel: wt,
+  do: "_do_dzed6_7",
+  doIcon: Nt,
+  doLabel: It
+};
+function Tn({ items: t }) {
+  return /* @__PURE__ */ e("div", { className: q.root, children: t.map((o, a) => /* @__PURE__ */ m(Me, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
+    /* @__PURE__ */ m(U, { className: q.dont, p: "md", radius: "md", children: [
+      /* @__PURE__ */ m(F, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(Oe, { size: 16, className: q.dontIcon }),
+        /* @__PURE__ */ e(N, { size: "sm", fw: 600, className: q.dontLabel, children: "Don't" })
       ] }),
-      /* @__PURE__ */ jsx8(Text6, { size: "sm", children: item.dont })
+      /* @__PURE__ */ e(N, { size: "sm", children: o.dont })
     ] }),
-    /* @__PURE__ */ jsxs9(Paper2, { className: DosDonts_default.do, p: "md", radius: "md", children: [
-      /* @__PURE__ */ jsxs9(Group3, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ jsx8(IconCheck, { size: 16, className: DosDonts_default.doIcon }),
-        /* @__PURE__ */ jsx8(Text6, { size: "sm", fw: 600, className: DosDonts_default.doLabel, children: "Do" })
+    /* @__PURE__ */ m(U, { className: q.do, p: "md", radius: "md", children: [
+      /* @__PURE__ */ m(F, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(He, { size: 16, className: q.doIcon }),
+        /* @__PURE__ */ e(N, { size: "sm", fw: 600, className: q.doLabel, children: "Do" })
       ] }),
-      /* @__PURE__ */ jsx8(Text6, { size: "sm", children: item.do })
+      /* @__PURE__ */ e(N, { size: "sm", children: o.do })
     ] })
-  ] }, i)) });
+  ] }, a)) });
 }
-
-// src/ExpandableCard/ExpandableCard.tsx
-import { useEffect as useEffect5, useRef as useRef4, useState as useState7 } from "react";
-import { Paper as Paper3, Group as Group4, Stack, Text as Text7, ThemeIcon } from "@mantine/core";
-import { motion as motion2 } from "framer-motion";
-
-// src/ExpandableCard/ExpandableCard.module.css
-var ExpandableCard_default = {};
-
-// src/ExpandableCard/ExpandableCard.tsx
-import { jsx as jsx9, jsxs as jsxs10 } from "react/jsx-runtime";
-function ExpandableCard({
-  title,
-  description,
-  expandedContent,
-  icon: Icon,
-  color = "blue",
-  iconSize = "lg",
-  collapsedHeight = 120,
-  threshold = 0.5,
-  delay = 300,
-  expanded: controlledExpanded,
-  onExpandedChange
+const zt = "_root_xi08i_1", xt = "_inner_xi08i_6", ge = {
+  root: zt,
+  inner: xt
+};
+function Pn({
+  title: t,
+  description: o,
+  expandedContent: a,
+  icon: s,
+  color: i = "blue",
+  iconSize: p = "lg",
+  collapsedHeight: y = 120,
+  threshold: g = 0.5,
+  delay: _ = 300,
+  expanded: c,
+  onExpandedChange: u
 }) {
-  const ref = useRef4(null);
-  const [internalExpanded, setInternalExpanded] = useState7(false);
-  const isControlled = controlledExpanded !== void 0;
-  const isExpanded = isControlled ? controlledExpanded : internalExpanded;
-  useEffect5(() => {
-    if (isControlled) return;
-    const el = ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setTimeout(() => {
-            setInternalExpanded(true);
-            onExpandedChange == null ? void 0 : onExpandedChange(true);
-          }, delay);
-        }
+  const b = D(null), [r, v] = z(!1), d = c !== void 0, l = d ? c : r;
+  return P(() => {
+    if (d) return;
+    const w = b.current;
+    if (!w) return;
+    const n = new IntersectionObserver(
+      ([f]) => {
+        f.isIntersecting && setTimeout(() => {
+          v(!0), u == null || u(!0);
+        }, _);
       },
-      { threshold }
+      { threshold: g }
     );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [isControlled, threshold, delay, onExpandedChange]);
-  return /* @__PURE__ */ jsx9(
-    Paper3,
-    __spreadProps(__spreadValues({
-      ref,
+    return n.observe(w), () => n.disconnect();
+  }, [d, g, _, u]), /* @__PURE__ */ e(
+    U,
+    {
+      ref: b,
       radius: 4,
-      className: ExpandableCard_default.root,
-      component: motion2.div
-    }, {
-      animate: { height: isExpanded ? "auto" : collapsedHeight },
-      transition: { duration: 0.5, ease: "easeOut" }
-    }), {
-      children: /* @__PURE__ */ jsx9("div", { className: ExpandableCard_default.inner, children: /* @__PURE__ */ jsxs10(Group4, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsxs10(Stack, { gap: "xs", style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx9(Text7, { fw: 700, size: "xl", lh: 1.3, children: title }),
-          /* @__PURE__ */ jsx9(Text7, { size: "md", c: "dimmed", children: description }),
-          /* @__PURE__ */ jsx9(
-            motion2.div,
+      className: ge.root,
+      component: S.div,
+      animate: { height: l ? "auto" : y },
+      transition: { duration: 0.5, ease: "easeOut" },
+      children: /* @__PURE__ */ e("div", { className: ge.inner, children: /* @__PURE__ */ m(F, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
+        /* @__PURE__ */ m(ce, { gap: "xs", style: { flex: 1 }, children: [
+          /* @__PURE__ */ e(N, { fw: 700, size: "xl", lh: 1.3, children: t }),
+          /* @__PURE__ */ e(N, { size: "md", c: "dimmed", children: o }),
+          /* @__PURE__ */ e(
+            S.div,
             {
               initial: { opacity: 0, height: 0 },
               animate: {
-                opacity: isExpanded ? 1 : 0,
-                height: isExpanded ? "auto" : 0
+                opacity: l ? 1 : 0,
+                height: l ? "auto" : 0
               },
               transition: { duration: 0.4, delay: 0.2 },
               style: { overflow: "hidden" },
-              children: typeof expandedContent === "string" ? /* @__PURE__ */ jsx9(Text7, { size: "sm", c: "dimmed", mt: "sm", children: expandedContent }) : expandedContent
+              children: typeof a == "string" ? /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", mt: "sm", children: a }) : a
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9(
-          motion2.div,
+        /* @__PURE__ */ e(
+          S.div,
           {
-            animate: { scale: isExpanded ? 1.1 : 1 },
+            animate: { scale: l ? 1.1 : 1 },
             transition: { duration: 0.3 },
-            children: /* @__PURE__ */ jsx9(ThemeIcon, { size: iconSize, radius: 4, color, variant: "filled", children: /* @__PURE__ */ jsx9(Icon, { size: 20, stroke: 1.5 }) })
+            children: /* @__PURE__ */ e(We, { size: p, radius: 4, color: i, variant: "filled", children: /* @__PURE__ */ e(s, { size: 20, stroke: 1.5 }) })
           }
         )
       ] }) })
-    })
+    }
   );
 }
-
-// src/FadeInSection/FadeInSection.tsx
-import { useEffect as useEffect6, useRef as useRef5, useState as useState8 } from "react";
-import { Box as Box4 } from "@mantine/core";
-
-// src/FadeInSection/FadeInSection.module.css
-var FadeInSection_default = {};
-
-// src/FadeInSection/FadeInSection.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-function FadeInSection(_a) {
-  var _b = _a, {
-    children,
-    delay = 0,
-    threshold = 0.1,
-    className
-  } = _b, props = __objRest(_b, [
-    "children",
-    "delay",
-    "threshold",
-    "className"
-  ]);
-  const ref = useRef5(null);
-  const [isVisible, setIsVisible] = useState8(false);
-  useEffect6(() => {
-    const el = ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          if (delay > 0) {
-            setTimeout(() => setIsVisible(true), delay);
-          } else {
-            setIsVisible(true);
-          }
-        }
+const Mt = "_root_ho0ln_1", $t = "_visible_ho0ln_7", ye = {
+  root: Mt,
+  visible: $t
+};
+function Wn({
+  children: t,
+  delay: o = 0,
+  threshold: a = 0.1,
+  className: s,
+  ...i
+}) {
+  const p = D(null), [y, g] = z(!1);
+  return P(() => {
+    const _ = p.current;
+    if (!_) return;
+    const c = new IntersectionObserver(
+      ([u]) => {
+        u.isIntersecting && (o > 0 ? setTimeout(() => g(!0), o) : g(!0));
       },
-      { threshold }
+      { threshold: a }
     );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [delay, threshold]);
-  return /* @__PURE__ */ jsx10(
-    Box4,
-    __spreadProps(__spreadValues({
-      ref,
-      className: `${FadeInSection_default.root} ${isVisible ? FadeInSection_default.visible : ""} ${className != null ? className : ""}`
-    }, props), {
-      children
-    })
+    return c.observe(_), () => c.disconnect();
+  }, [o, a]), /* @__PURE__ */ e(
+    k,
+    {
+      ref: p,
+      className: `${ye.root} ${y ? ye.visible : ""} ${s ?? ""}`,
+      ...i,
+      children: t
+    }
   );
 }
-
-// src/FrequencyWave/FrequencyWave.tsx
-import { useEffect as useEffect7, useRef as useRef6, useState as useState9, useCallback as useCallback5 } from "react";
-import { Box as Box5, useMantineColorScheme } from "@mantine/core";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function FrequencyWave({ isActive = false, height = 60 }) {
-  const canvasRef = useRef6(null);
-  const animationRef = useRef6(void 0);
-  const [isPulsing, setIsPulsing] = useState9(false);
-  const lastPulseRef = useRef6(null);
-  const randomSpikeRef = useRef6(null);
-  const { colorScheme } = useMantineColorScheme();
-  const isDark = colorScheme === "dark";
-  const colors = {
-    start: isDark ? "#7950F2" : "#9775FA",
-    mid: isDark ? "#BE4BDB" : "#DA77F2",
-    end: isDark ? "#15AABF" : "#22B8CF"
-  };
-  const drawWave = useCallback5(
-    (ctx, width, canvasHeight, time) => {
-      var _a;
-      ctx.clearRect(0, 0, width, canvasHeight);
-      const isAnimating = isActive || isPulsing;
-      const waveY = canvasHeight * 0.65;
-      const baseAmplitude = isActive ? 5 : isPulsing ? 7 : 1.5;
-      if (isAnimating) {
-        if (randomSpikeRef.current === null) {
-          randomSpikeRef.current = Math.random();
-        }
-        if (Math.floor(time / 500) !== Math.floor((time - 16) / 500)) {
-          randomSpikeRef.current = Math.random();
-        }
+function En({ isActive: t = !1, height: o = 60 }) {
+  const a = D(null), s = D(void 0), [i, p] = z(!1), y = D(null), g = D(null), { colorScheme: _ } = Ee(), c = _ === "dark", u = {
+    start: c ? "#7950F2" : "#9775FA",
+    mid: c ? "#BE4BDB" : "#DA77F2",
+    end: c ? "#15AABF" : "#22B8CF"
+  }, b = B(
+    (r, v, d, l) => {
+      r.clearRect(0, 0, v, d);
+      const w = t || i, n = d * 0.65, f = t ? 5 : i ? 7 : 1.5;
+      w && (g.current === null && (g.current = Math.random()), Math.floor(l / 500) !== Math.floor((l - 16) / 500) && (g.current = Math.random()));
+      const I = r.createLinearGradient(0, 0, v, 0);
+      I.addColorStop(0, u.start), I.addColorStop(0.5, u.mid), I.addColorStop(1, u.end), r.strokeStyle = I, r.lineWidth = w ? 2.5 : 1.5, r.lineCap = "round", r.lineJoin = "round", w ? (r.shadowColor = u.mid, r.shadowBlur = i ? 12 : 8) : r.shadowBlur = 0, r.beginPath();
+      const T = 300, R = v / T, A = t ? 0.02 : i ? 0.025 : 3e-3;
+      for (let j = 0; j <= T; j++) {
+        const C = j * R, M = C / v;
+        let E = n;
+        if (w) {
+          const G = Math.sin(M * Math.PI * 6 + l * A) * f, O = Math.sin(M * Math.PI * 12 + l * A * 1.3) * (f * 0.4), H = Math.sin(M * Math.PI * 18 + l * A * 0.8) * (f * 0.2), K = g.current ?? 0.5, h = Math.abs(M - K), x = h < 0.15 ? (1 - h / 0.15) * f * 1 : 0, L = Math.sin(M * Math.PI * 20 + l * A * 2) * x;
+          let X = 0;
+          i && (X = Math.sin(M * Math.PI * 30 + l * 0.03) * f * 0.4, X += Math.sin(M * Math.PI * 8 + l * 0.015) * f * 0.5);
+          const Z = G + O + H + L + X, ee = Math.sin(M * Math.PI);
+          E = n + Z * ee;
+        } else
+          E += Math.sin(M * Math.PI * 2 + l * A) * f;
+        j === 0 ? r.moveTo(C, E) : r.lineTo(C, E);
       }
-      const gradient = ctx.createLinearGradient(0, 0, width, 0);
-      gradient.addColorStop(0, colors.start);
-      gradient.addColorStop(0.5, colors.mid);
-      gradient.addColorStop(1, colors.end);
-      ctx.strokeStyle = gradient;
-      ctx.lineWidth = isAnimating ? 2.5 : 1.5;
-      ctx.lineCap = "round";
-      ctx.lineJoin = "round";
-      if (isAnimating) {
-        ctx.shadowColor = colors.mid;
-        ctx.shadowBlur = isPulsing ? 12 : 8;
-      } else {
-        ctx.shadowBlur = 0;
-      }
-      ctx.beginPath();
-      const segments = 300;
-      const segmentWidth = width / segments;
-      const speed = isActive ? 0.02 : isPulsing ? 0.025 : 3e-3;
-      for (let i = 0; i <= segments; i++) {
-        const x = i * segmentWidth;
-        const normalizedX = x / width;
-        let y = waveY;
-        if (isAnimating) {
-          const wave1 = Math.sin(normalizedX * Math.PI * 6 + time * speed) * baseAmplitude;
-          const wave2 = Math.sin(normalizedX * Math.PI * 12 + time * speed * 1.3) * (baseAmplitude * 0.4);
-          const wave3 = Math.sin(normalizedX * Math.PI * 18 + time * speed * 0.8) * (baseAmplitude * 0.2);
-          const spikePosition = (_a = randomSpikeRef.current) != null ? _a : 0.5;
-          const distToSpike = Math.abs(normalizedX - spikePosition);
-          const spikeAmplitude = distToSpike < 0.15 ? (1 - distToSpike / 0.15) * baseAmplitude * 1 : 0;
-          const spikeWave = Math.sin(normalizedX * Math.PI * 20 + time * speed * 2) * spikeAmplitude;
-          let aggressiveWave = 0;
-          if (isPulsing) {
-            aggressiveWave = Math.sin(normalizedX * Math.PI * 30 + time * 0.03) * baseAmplitude * 0.4;
-            aggressiveWave += Math.sin(normalizedX * Math.PI * 8 + time * 0.015) * baseAmplitude * 0.5;
-          }
-          const combinedWave = wave1 + wave2 + wave3 + spikeWave + aggressiveWave;
-          const envelope = Math.sin(normalizedX * Math.PI);
-          y = waveY + combinedWave * envelope;
-        } else {
-          y += Math.sin(normalizedX * Math.PI * 2 + time * speed) * baseAmplitude;
-        }
-        if (i === 0) {
-          ctx.moveTo(x, y);
-        } else {
-          ctx.lineTo(x, y);
-        }
-      }
-      ctx.stroke();
-      if (isActive) {
-        const barCount = 80;
-        const barWidth = 2;
-        const barGap = width / barCount;
-        const maxBarHeight = 16;
-        ctx.shadowBlur = 3;
-        for (let i = 0; i < barCount; i++) {
-          const x = i * barGap + barGap / 2;
-          const normalizedX = x / width;
-          const baseBarHeight = Math.sin(normalizedX * Math.PI * 8 + time * 0.025) * 0.5 + Math.sin(normalizedX * Math.PI * 14 + time * 0.018) * 0.3 + Math.sin(normalizedX * Math.PI * 4 + time * 0.03) * 0.2;
-          const envelope = Math.sin(normalizedX * Math.PI);
-          const barHeight = Math.abs(baseBarHeight) * maxBarHeight * envelope;
-          const barGradient = ctx.createLinearGradient(
-            x,
-            waveY - barHeight / 2,
-            x,
-            waveY + barHeight / 2
+      if (r.stroke(), t) {
+        const M = v / 80, E = 16;
+        r.shadowBlur = 3;
+        for (let G = 0; G < 80; G++) {
+          const O = G * M + M / 2, H = O / v, K = Math.sin(H * Math.PI * 8 + l * 0.025) * 0.5 + Math.sin(H * Math.PI * 14 + l * 0.018) * 0.3 + Math.sin(H * Math.PI * 4 + l * 0.03) * 0.2, h = Math.sin(H * Math.PI), x = Math.abs(K) * E * h, L = r.createLinearGradient(
+            O,
+            n - x / 2,
+            O,
+            n + x / 2
           );
-          barGradient.addColorStop(0, colors.start + "90");
-          barGradient.addColorStop(0.5, colors.mid + "70");
-          barGradient.addColorStop(1, colors.end + "50");
-          ctx.fillStyle = barGradient;
-          ctx.fillRect(x - barWidth / 2, waveY - barHeight / 2, barWidth, barHeight);
+          L.addColorStop(0, u.start + "90"), L.addColorStop(0.5, u.mid + "70"), L.addColorStop(1, u.end + "50"), r.fillStyle = L, r.fillRect(O - 2 / 2, n - x / 2, 2, x);
         }
       }
-      if (isPulsing) {
-        const particleCount = 15;
-        for (let i = 0; i < particleCount; i++) {
-          const px = (Math.sin(time * 1e-3 + i * 1.5) * 0.5 + 0.5) * width;
-          const py = waveY + Math.sin(time * 2e-3 + i) * 8;
-          const radius = 1.5 + Math.sin(time * 3e-3 + i * 2) * 0.5;
-          ctx.beginPath();
-          ctx.arc(px, py, radius, 0, Math.PI * 2);
-          ctx.fillStyle = i % 2 === 0 ? colors.start + "80" : colors.end + "80";
-          ctx.fill();
+      if (i)
+        for (let C = 0; C < 15; C++) {
+          const M = (Math.sin(l * 1e-3 + C * 1.5) * 0.5 + 0.5) * v, E = n + Math.sin(l * 2e-3 + C) * 8, G = 1.5 + Math.sin(l * 3e-3 + C * 2) * 0.5;
+          r.beginPath(), r.arc(M, E, G, 0, Math.PI * 2), r.fillStyle = C % 2 === 0 ? u.start + "80" : u.end + "80", r.fill();
         }
-      }
     },
-    [isActive, isPulsing, colors.start, colors.mid, colors.end]
+    [t, i, u.start, u.mid, u.end]
   );
-  useEffect7(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const updateSize = () => {
-      const dpr = window.devicePixelRatio || 1;
-      const rect = canvas.getBoundingClientRect();
-      canvas.width = rect.width * dpr;
-      canvas.height = rect.height * dpr;
-      ctx.scale(dpr, dpr);
+  return P(() => {
+    const r = a.current;
+    if (!r) return;
+    const v = r.getContext("2d");
+    if (!v) return;
+    const d = () => {
+      const n = window.devicePixelRatio || 1, f = r.getBoundingClientRect();
+      r.width = f.width * n, r.height = f.height * n, v.scale(n, n);
     };
-    updateSize();
-    window.addEventListener("resize", updateSize);
-    const startTime = performance.now();
-    const animate = (currentTime) => {
-      const elapsed = currentTime - startTime;
-      const rect = canvas.getBoundingClientRect();
-      drawWave(ctx, rect.width, rect.height, elapsed);
-      animationRef.current = requestAnimationFrame(animate);
+    d(), window.addEventListener("resize", d);
+    const l = performance.now(), w = (n) => {
+      const f = n - l, I = r.getBoundingClientRect();
+      b(v, I.width, I.height, f), s.current = requestAnimationFrame(w);
     };
-    animationRef.current = requestAnimationFrame(animate);
-    return () => {
-      window.removeEventListener("resize", updateSize);
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
+    return s.current = requestAnimationFrame(w), () => {
+      window.removeEventListener("resize", d), s.current && cancelAnimationFrame(s.current);
     };
-  }, [drawWave]);
-  useEffect7(() => {
-    if (isActive) {
-      queueMicrotask(() => setIsPulsing(false));
-      lastPulseRef.current = Date.now();
+  }, [b]), P(() => {
+    if (t) {
+      queueMicrotask(() => p(!1)), y.current = Date.now();
       return;
     }
-    const checkForPulse = () => {
-      const now = Date.now();
-      if (lastPulseRef.current === null) {
-        lastPulseRef.current = now;
-      }
-      const timeSinceLastPulse = now - lastPulseRef.current;
-      const pulseInterval = 12e4 + Math.random() * 6e4;
-      if (timeSinceLastPulse >= pulseInterval && !isPulsing) {
-        setIsPulsing(true);
-        lastPulseRef.current = now;
-        setTimeout(() => setIsPulsing(false), 4e3);
-      }
-    };
-    const intervalId = setInterval(checkForPulse, 5e3);
-    return () => clearInterval(intervalId);
-  }, [isActive, isPulsing]);
-  return /* @__PURE__ */ jsx11(
-    Box5,
+    const v = setInterval(() => {
+      const d = Date.now();
+      y.current === null && (y.current = d);
+      const l = d - y.current, w = 12e4 + Math.random() * 6e4;
+      l >= w && !i && (p(!0), y.current = d, setTimeout(() => p(!1), 4e3));
+    }, 5e3);
+    return () => clearInterval(v);
+  }, [t, i]), /* @__PURE__ */ e(
+    k,
     {
       style: {
         position: "relative",
         width: "100%",
-        height,
+        height: o,
         overflow: "hidden",
         pointerEvents: "none",
-        opacity: isDark ? 1 : 0.8
+        opacity: c ? 1 : 0.8
       },
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ e(
         "canvas",
         {
-          ref: canvasRef,
+          ref: a,
           style: {
             width: "100%",
             height: "100%",
@@ -1010,158 +690,204 @@ function FrequencyWave({ isActive = false, height = 60 }) {
     }
   );
 }
-
-// src/GradientSwatch/GradientSwatch.tsx
-import { Paper as Paper4, Text as Text8 } from "@mantine/core";
-
-// src/GradientSwatch/GradientSwatch.module.css
-var GradientSwatch_default = {};
-
-// src/GradientSwatch/GradientSwatch.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function GradientSwatch({ name, colors, description }) {
-  const css = `linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 100%)`;
-  return /* @__PURE__ */ jsx12(Copyable, { value: css, children: /* @__PURE__ */ jsxs11(Paper4, { className: GradientSwatch_default.root, shadow: "lg", radius: "md", children: [
-    /* @__PURE__ */ jsx12("div", { className: GradientSwatch_default.preview, style: { background: css } }),
-    /* @__PURE__ */ jsxs11("div", { className: GradientSwatch_default.info, children: [
-      /* @__PURE__ */ jsx12(Text8, { fw: 600, size: "sm", children: name }),
-      description && /* @__PURE__ */ jsx12(Text8, { size: "xs", c: "dimmed", children: description }),
-      /* @__PURE__ */ jsxs11(Text8, { size: "xs", c: "dimmed", ff: "monospace", children: [
-        colors[0],
-        " \u2192 ",
-        colors[1]
+const Ct = "_root_9li00_1", kt = "_preview_9li00_11", Lt = "_info_9li00_15", re = {
+  root: Ct,
+  preview: kt,
+  info: Lt
+};
+function Dn({ name: t, colors: o, description: a }) {
+  const s = `linear-gradient(135deg, ${o[0]} 0%, ${o[1]} 100%)`;
+  return /* @__PURE__ */ e(de, { value: s, children: /* @__PURE__ */ m(U, { className: re.root, shadow: "lg", radius: "md", children: [
+    /* @__PURE__ */ e("div", { className: re.preview, style: { background: s } }),
+    /* @__PURE__ */ m("div", { className: re.info, children: [
+      /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: t }),
+      a && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: a }),
+      /* @__PURE__ */ m(N, { size: "xs", c: "dimmed", ff: "monospace", children: [
+        o[0],
+        " → ",
+        o[1]
       ] })
     ] })
   ] }) });
 }
-
-// src/Hero/Hero.tsx
-import {
-  Box as Box6,
-  Button as Button2,
-  Group as Group5,
-  Image,
-  Stack as Stack2,
-  Text as Text9,
-  Title as Title2
-} from "@mantine/core";
-import defaultLogoSrc from "@frequencyads/brand/assets/frequency-mark-white.svg";
-import { gradients } from "@frequencyads/brand/colors";
-
-// src/VideoBackground/VideoBackground.module.css
-var VideoBackground_default = {};
-
-// src/VideoBackground/VideoBackground.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-function VideoBackground({ src, opacity = 0.3 }) {
-  return /* @__PURE__ */ jsx13(
-    "video",
-    {
-      autoPlay: true,
-      muted: true,
-      loop: true,
-      playsInline: true,
-      className: VideoBackground_default.root,
-      style: { opacity },
-      children: /* @__PURE__ */ jsx13("source", { src, type: "video/mp4" })
-    }
-  );
+const St = "_root_1vlvy_1", Bt = "_video_1vlvy_9", be = {
+  root: St,
+  video: Bt
+};
+function Tt({ src: t, opacity: o = 0.3 }) {
+  return /* @__PURE__ */ e("div", { className: be.root, style: { opacity: o }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: be.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
 }
-
-// src/Hero/Hero.module.css
-var Hero_default = {};
-
-// src/Hero/Hero.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-function Hero({
-  variant = "logo",
-  heading,
-  tagline,
-  logoSrc = defaultLogoSrc,
-  gradient: gradientName = "frequencyAlive",
-  shimmer = true,
-  primaryAction,
-  secondaryAction,
-  backgroundVideoSrc,
-  showWaveform
+const Pt = "_root_1suaa_1", Wt = "_content_1suaa_8", Et = "_label_1suaa_21", Dt = "_vignette_1suaa_37", Ft = "_logoWrapper_1suaa_50", jt = "_logo_1suaa_50", Gt = "_glow_1suaa_73", Rt = "_textWrapper_1suaa_85", At = "_heading_1suaa_91", Ot = "_shimmer_1suaa_125", Ht = "_tagline_1suaa_129", Vt = "_primaryButton_1suaa_143", qt = "_secondaryButton_1suaa_148", Ut = "_scrollIndicator_1suaa_160", Xt = "_scrollLabel_1suaa_171", Yt = "_scrollLine_1suaa_179", $ = {
+  root: Pt,
+  content: Wt,
+  label: Et,
+  vignette: Dt,
+  logoWrapper: Ft,
+  logo: jt,
+  glow: Gt,
+  textWrapper: Rt,
+  heading: At,
+  shimmer: Ot,
+  tagline: Ht,
+  primaryButton: Vt,
+  secondaryButton: qt,
+  scrollIndicator: Ut,
+  scrollLabel: Xt,
+  scrollLine: Yt
+};
+function Fn({
+  variant: t = "logo",
+  heading: o,
+  label: a,
+  tagline: s,
+  logoSrc: i = qe,
+  gradient: p = "frequencyAlive",
+  shimmer: y = !0,
+  primaryAction: g,
+  secondaryAction: _,
+  backgroundVideoSrc: c,
+  showWaveform: u,
+  showScrollIndicator: b = !1
 }) {
-  const resolvedHeading = heading != null ? heading : variant === "text" ? "Frequency" : void 0;
-  const hasActions = primaryAction || secondaryAction;
-  const waveformVisible = showWaveform != null ? showWaveform : true;
-  const grad = gradients[gradientName];
-  return /* @__PURE__ */ jsxs12(Box6, { className: Hero_default.root, children: [
-    backgroundVideoSrc && /* @__PURE__ */ jsx14(VideoBackground, { src: backgroundVideoSrc }),
-    /* @__PURE__ */ jsxs12(Stack2, { className: Hero_default.content, align: "center", gap: "lg", children: [
-      variant === "logo" && /* @__PURE__ */ jsxs12("div", { className: Hero_default.logoWrapper, children: [
-        waveformVisible && /* @__PURE__ */ jsx14(AnimatedWaveform, {}),
-        waveformVisible && /* @__PURE__ */ jsx14("div", { className: Hero_default.vignette }),
-        /* @__PURE__ */ jsx14(
-          Image,
+  const [r, v] = z(!1), d = o ?? (t === "text" ? "Your Message" : void 0), l = a || (t === "logo" ? "Welcome" : void 0), w = g || _, n = u ?? !0, f = Ue[p];
+  return P(() => {
+    v(!0);
+  }, []), /* @__PURE__ */ m(k, { component: "section", className: $.root, children: [
+    c && /* @__PURE__ */ e(Tt, { src: c }),
+    /* @__PURE__ */ m("div", { className: $.content, children: [
+      r && /* @__PURE__ */ m(ze, { children: [
+        l && /* @__PURE__ */ e(
+          S.p,
           {
-            src: logoSrc,
-            alt: resolvedHeading != null ? resolvedHeading : "Frequency",
-            className: Hero_default.logo,
-            fit: "contain"
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.8, delay: 0.2 },
+            className: $.label,
+            children: l
           }
         ),
-        /* @__PURE__ */ jsx14("div", { className: Hero_default.glow })
-      ] }),
-      variant === "text" && resolvedHeading && /* @__PURE__ */ jsxs12("div", { className: Hero_default.textWrapper, children: [
-        waveformVisible && /* @__PURE__ */ jsx14(AnimatedWaveform, {}),
-        waveformVisible && /* @__PURE__ */ jsx14("div", { className: Hero_default.vignette }),
-        /* @__PURE__ */ jsx14(
-          Title2,
+        t === "logo" && /* @__PURE__ */ m(
+          S.div,
           {
-            order: 1,
-            className: `${Hero_default.heading} ${shimmer ? Hero_default.shimmer : ""}`,
-            style: {
-              backgroundImage: `linear-gradient(135deg, ${grad.from}, ${grad.to}, ${grad.from})`,
-              backgroundSize: shimmer ? "200% 100%" : void 0
-            },
-            children: resolvedHeading
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: $.logoWrapper,
+            children: [
+              n && /* @__PURE__ */ e(fe, {}),
+              n && /* @__PURE__ */ e("div", { className: $.vignette }),
+              /* @__PURE__ */ e(
+                S.img,
+                {
+                  src: i,
+                  alt: d ?? "Frequency",
+                  className: $.logo,
+                  animate: { rotate: [0, 0.5, -0.5, 0] },
+                  transition: { duration: 8, repeat: 1 / 0, ease: "easeInOut" }
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: $.glow })
+            ]
           }
-        )
-      ] }),
-      tagline && /* @__PURE__ */ jsx14(Text9, { className: Hero_default.tagline, children: tagline }),
-      hasActions && /* @__PURE__ */ jsxs12(Group5, { gap: "md", justify: "center", wrap: "wrap", children: [
-        primaryAction && /* @__PURE__ */ jsx14(
-          Button2,
+        ),
+        t === "text" && d && /* @__PURE__ */ m(
+          S.div,
           {
-            component: "a",
-            href: primaryAction.href,
-            size: "lg",
-            radius: 4,
-            className: Hero_default.primaryButton,
-            children: primaryAction.label
+            initial: { opacity: 0, scale: 0.8 },
+            animate: { opacity: 1, scale: 1 },
+            transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
+            className: $.textWrapper,
+            children: [
+              n && /* @__PURE__ */ e(fe, {}),
+              n && /* @__PURE__ */ e("div", { className: $.vignette }),
+              /* @__PURE__ */ e(
+                oe,
+                {
+                  order: 1,
+                  className: `${$.heading} ${y ? $.shimmer : ""}`,
+                  style: {
+                    backgroundImage: `linear-gradient(135deg, ${f.from}, ${f.to}, ${f.from})`,
+                    backgroundSize: y ? "200% 100%" : void 0
+                  },
+                  children: d
+                }
+              )
+            ]
           }
         ),
-        secondaryAction && /* @__PURE__ */ jsx14(
-          Button2,
+        s && /* @__PURE__ */ e(
+          S.div,
           {
-            component: "a",
-            href: secondaryAction.href,
-            size: "lg",
-            radius: 4,
-            variant: "outline",
-            className: Hero_default.secondaryButton,
-            children: secondaryAction.label
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.7 },
+            children: /* @__PURE__ */ e(N, { className: $.tagline, children: s })
+          }
+        ),
+        w && /* @__PURE__ */ e(
+          S.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.8, delay: 0.9 },
+            children: /* @__PURE__ */ m(F, { gap: "md", justify: "center", wrap: "wrap", children: [
+              g && /* @__PURE__ */ e(
+                ie,
+                {
+                  component: "a",
+                  href: g.href,
+                  size: "lg",
+                  radius: 4,
+                  className: $.primaryButton,
+                  children: g.label
+                }
+              ),
+              _ && /* @__PURE__ */ e(
+                ie,
+                {
+                  component: "a",
+                  href: _.href,
+                  size: "lg",
+                  radius: 4,
+                  variant: "outline",
+                  className: $.secondaryButton,
+                  children: _.label
+                }
+              )
+            ] })
           }
         )
-      ] })
+      ] }),
+      r && b && /* @__PURE__ */ m(
+        S.div,
+        {
+          className: $.scrollIndicator,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { duration: 1, delay: 1.4 },
+          children: [
+            /* @__PURE__ */ e("span", { className: $.scrollLabel, children: "Scroll" }),
+            /* @__PURE__ */ e(
+              S.div,
+              {
+                className: $.scrollLine,
+                animate: { scaleY: [1, 1.5, 1] },
+                transition: { duration: 1.5, repeat: 1 / 0 }
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] });
 }
-
-// src/HintBadge/HintBadge.tsx
-import { Badge } from "@mantine/core";
-import { jsxs as jsxs13 } from "react/jsx-runtime";
-function HintBadge({ variant, children }) {
-  const isDo = variant === "do";
-  return /* @__PURE__ */ jsxs13(
-    Badge,
+function we({ variant: t, children: o }) {
+  const a = t === "do";
+  return /* @__PURE__ */ m(
+    $e,
     {
       variant: "light",
-      color: isDo ? "green" : "red",
+      color: a ? "green" : "red",
       size: "lg",
       radius: "sm",
       styles: {
@@ -1169,121 +895,87 @@ function HintBadge({ variant, children }) {
         label: { whiteSpace: "normal", lineHeight: 1.4 }
       },
       children: [
-        /* @__PURE__ */ jsxs13("strong", { children: [
-          isDo ? "Do" : "Don't",
+        /* @__PURE__ */ m("strong", { children: [
+          a ? "Do" : "Don't",
           ":"
         ] }),
         " ",
-        children
+        o
       ]
     }
   );
 }
-
-// src/MiniAudioPlayer/MiniAudioPlayer.tsx
-import { useRef as useRef7, useState as useState10, useEffect as useEffect8, forwardRef as forwardRef2, useCallback as useCallback6 } from "react";
-import { ActionIcon as ActionIcon2, Group as Group6, Box as Box7 } from "@mantine/core";
-import { IconPlayerPlayFilled as IconPlayerPlayFilled2, IconPlayerPauseFilled as IconPlayerPauseFilled2 } from "@tabler/icons-react";
-
-// src/MiniAudioPlayer/MiniAudioPlayer.module.css
-var MiniAudioPlayer_default = {};
-
-// src/MiniAudioPlayer/MiniAudioPlayer.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-var SIZE_CONFIG = {
+const Kt = "_root_13w21_1", Jt = "_playButton_13w21_11", Ne = {
+  root: Kt,
+  playButton: Jt
+}, Qt = {
   mini: { height: 24, buttonSize: 20, iconSize: 14, waveHeight: 16, barWidth: 1, barGap: 0 },
   small: { height: 32, buttonSize: 28, iconSize: 16, waveHeight: 20, barWidth: 1, barGap: 0 },
   compact: { height: 40, buttonSize: 32, iconSize: 18, waveHeight: 24, barWidth: 2, barGap: 1 }
-};
-var MiniAudioPlayer = forwardRef2(
+}, Zt = xe(
   ({
-    audioUrl,
-    size = "mini",
-    waveColor = "#CCCCCC",
-    progressColor = "#169bde",
-    onPlay,
-    onPause,
-    className,
-    style
-  }, ref) => {
-    const audioRef = useRef7(null);
-    const [isPlaying, setIsPlaying] = useState10(false);
-    const [currentTime, setCurrentTime] = useState10(0);
-    const config = SIZE_CONFIG[size];
-    useEffect8(() => {
-      const audio = audioRef.current;
-      if (!audio) return;
-      const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
-      const handleEnded = () => {
-        setIsPlaying(false);
-        setCurrentTime(0);
-      };
-      const handlePause = () => setIsPlaying(false);
-      const handlePlay = () => setIsPlaying(true);
-      audio.addEventListener("timeupdate", handleTimeUpdate);
-      audio.addEventListener("ended", handleEnded);
-      audio.addEventListener("pause", handlePause);
-      audio.addEventListener("play", handlePlay);
-      return () => {
-        audio.removeEventListener("timeupdate", handleTimeUpdate);
-        audio.removeEventListener("ended", handleEnded);
-        audio.removeEventListener("pause", handlePause);
-        audio.removeEventListener("play", handlePlay);
+    audioUrl: t,
+    size: o = "mini",
+    waveColor: a = "#CCCCCC",
+    progressColor: s = "#169bde",
+    onPlay: i,
+    onPause: p,
+    className: y,
+    style: g
+  }, _) => {
+    const c = D(null), [u, b] = z(!1), [r, v] = z(0), d = Qt[o];
+    P(() => {
+      const n = c.current;
+      if (!n) return;
+      const f = () => v(n.currentTime), I = () => {
+        b(!1), v(0);
+      }, T = () => b(!1), R = () => b(!0);
+      return n.addEventListener("timeupdate", f), n.addEventListener("ended", I), n.addEventListener("pause", T), n.addEventListener("play", R), () => {
+        n.removeEventListener("timeupdate", f), n.removeEventListener("ended", I), n.removeEventListener("pause", T), n.removeEventListener("play", R);
       };
-    }, [audioUrl]);
-    const handlePlayPause = useCallback6(() => {
-      const audio = audioRef.current;
-      if (!audio) return;
-      if (isPlaying) {
-        audio.pause();
-        onPause == null ? void 0 : onPause();
-      } else {
-        audio.play().catch(() => {
-        });
-        onPlay == null ? void 0 : onPlay();
-      }
-    }, [isPlaying, onPlay, onPause]);
-    const handleSeek = useCallback6((time) => {
-      const audio = audioRef.current;
-      if (audio && !isNaN(time) && isFinite(time)) {
-        audio.currentTime = time;
-        setCurrentTime(time);
-      }
+    }, [t]);
+    const l = B(() => {
+      const n = c.current;
+      n && (u ? (n.pause(), p == null || p()) : (n.play().catch(() => {
+      }), i == null || i()));
+    }, [u, i, p]), w = B((n) => {
+      const f = c.current;
+      f && !isNaN(n) && isFinite(n) && (f.currentTime = n, v(n));
     }, []);
-    return /* @__PURE__ */ jsxs14(
-      Group6,
+    return /* @__PURE__ */ m(
+      F,
       {
-        ref,
-        gap: size === "mini" ? 6 : size === "small" ? 8 : 10,
+        ref: _,
+        gap: o === "mini" ? 6 : o === "small" ? 8 : 10,
         wrap: "nowrap",
-        className: `${MiniAudioPlayer_default.root} ${className != null ? className : ""}`,
-        style: __spreadValues({ height: config.height }, style),
+        className: `${Ne.root} ${y ?? ""}`,
+        style: { height: d.height, ...g },
         children: [
-          /* @__PURE__ */ jsx15("audio", { ref: audioRef, src: audioUrl, preload: "metadata" }),
-          /* @__PURE__ */ jsx15(
-            ActionIcon2,
+          /* @__PURE__ */ e("audio", { ref: c, src: t, preload: "metadata" }),
+          /* @__PURE__ */ e(
+            Y,
             {
               variant: "filled",
               color: "blue",
               radius: "xl",
-              size: config.buttonSize,
-              onClick: handlePlayPause,
-              "aria-label": isPlaying ? "Pause" : "Play",
-              className: MiniAudioPlayer_default.playButton,
-              children: isPlaying ? /* @__PURE__ */ jsx15(IconPlayerPauseFilled2, { size: config.iconSize }) : /* @__PURE__ */ jsx15(IconPlayerPlayFilled2, { size: config.iconSize })
+              size: d.buttonSize,
+              onClick: l,
+              "aria-label": u ? "Pause" : "Play",
+              className: Ne.playButton,
+              children: u ? /* @__PURE__ */ e(Ce, { size: d.iconSize }) : /* @__PURE__ */ e(ke, { size: d.iconSize })
             }
           ),
-          /* @__PURE__ */ jsx15(Box7, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ jsx15(
-            AudioWaveform,
+          /* @__PURE__ */ e(k, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
+            le,
             {
-              audioRef,
-              currentTime,
-              onSeek: handleSeek,
-              waveColor,
-              progressColor,
-              height: config.waveHeight,
-              barWidth: config.barWidth,
-              barGap: config.barGap
+              audioRef: c,
+              currentTime: r,
+              onSeek: w,
+              waveColor: a,
+              progressColor: s,
+              height: d.waveHeight,
+              barWidth: d.barWidth,
+              barGap: d.barGap
             }
           ) })
         ]
@@ -1291,240 +983,248 @@ var MiniAudioPlayer = forwardRef2(
     );
   }
 );
-MiniAudioPlayer.displayName = "MiniAudioPlayer";
-
-// src/PrincipleCard/PrincipleCard.tsx
-import { Paper as Paper5, Title as Title3, Text as Text10, Group as Group7 } from "@mantine/core";
-
-// src/PrincipleCard/PrincipleCard.module.css
-var PrincipleCard_default = {};
-
-// src/PrincipleCard/PrincipleCard.tsx
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-function PrincipleCard({
-  accentColor,
-  title,
-  description,
-  doHint,
-  dontHint
+Zt.displayName = "MiniAudioPlayer";
+const en = "_root_1bah1_1", tn = {
+  root: en
+};
+function jn({
+  accentColor: t,
+  title: o,
+  description: a,
+  doHint: s,
+  dontHint: i
 }) {
-  return /* @__PURE__ */ jsxs15(
-    Paper5,
+  return /* @__PURE__ */ m(
+    U,
     {
-      className: PrincipleCard_default.root,
+      className: tn.root,
       p: "lg",
       radius: "md",
-      style: { borderLeftColor: accentColor },
+      style: { borderLeftColor: t },
       children: [
-        /* @__PURE__ */ jsx16(Title3, { order: 3, size: "h4", mb: "xs", children: title }),
-        /* @__PURE__ */ jsx16(Text10, { c: "dimmed", children: description }),
-        (doHint || dontHint) && /* @__PURE__ */ jsxs15(Group7, { gap: "sm", mt: "md", wrap: "wrap", children: [
-          doHint && /* @__PURE__ */ jsx16(HintBadge, { variant: "do", children: doHint }),
-          dontHint && /* @__PURE__ */ jsx16(HintBadge, { variant: "dont", children: dontHint })
+        /* @__PURE__ */ e(oe, { order: 3, size: "h4", mb: "xs", children: o }),
+        /* @__PURE__ */ e(N, { c: "dimmed", children: a }),
+        (s || i) && /* @__PURE__ */ m(F, { gap: "sm", mt: "md", wrap: "wrap", children: [
+          s && /* @__PURE__ */ e(we, { variant: "do", children: s }),
+          i && /* @__PURE__ */ e(we, { variant: "dont", children: i })
         ] })
       ]
     }
   );
 }
-
-// src/SpeedDial/SpeedDial.tsx
-import { useState as useState11, useCallback as useCallback7 } from "react";
-import { ActionIcon as ActionIcon3, Transition, Tooltip, Box as Box8 } from "@mantine/core";
-import { IconPlus } from "@tabler/icons-react";
-
-// src/SpeedDial/SpeedDial.module.css
-var SpeedDial_default = {};
-
-// src/SpeedDial/SpeedDial.tsx
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-function SpeedDial({
-  actions,
-  icon,
-  openIcon,
-  direction = "up",
-  color = "blue",
-  size = 56,
-  defaultOpen = false,
-  open: controlledOpen,
-  onOpenChange,
-  style,
-  className
+const nn = "_root_ydu7j_1", on = "_actions_ydu7j_22", sn = "_fab_ydu7j_43", an = "_actionButton_ydu7j_61", ne = {
+  root: nn,
+  actions: on,
+  fab: sn,
+  actionButton: an
+};
+function Gn({
+  actions: t,
+  icon: o,
+  openIcon: a,
+  direction: s = "up",
+  color: i = "blue",
+  size: p = 56,
+  defaultOpen: y = !1,
+  open: g,
+  onOpenChange: _,
+  style: c,
+  className: u
 }) {
-  var _a;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState11(defaultOpen);
-  const isOpen = controlledOpen != null ? controlledOpen : uncontrolledOpen;
-  const toggle = useCallback7(() => {
-    const next = !isOpen;
-    setUncontrolledOpen(next);
-    onOpenChange == null ? void 0 : onOpenChange(next);
-  }, [isOpen, onOpenChange]);
-  const close = useCallback7(() => {
-    setUncontrolledOpen(false);
-    onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange]);
-  const isVertical = direction === "up" || direction === "down";
-  return /* @__PURE__ */ jsxs16(
-    Box8,
+  const [b, r] = z(y), v = g ?? b, d = B(() => {
+    const n = !v;
+    r(n), _ == null || _(n);
+  }, [v, _]), l = B(() => {
+    r(!1), _ == null || _(!1);
+  }, [_]), w = s === "up" || s === "down";
+  return /* @__PURE__ */ m(
+    k,
     {
-      className: `${SpeedDial_default.root} ${className != null ? className : ""}`,
-      style,
-      "data-direction": direction,
+      className: `${ne.root} ${u ?? ""}`,
+      style: c,
+      "data-direction": s,
       children: [
-        /* @__PURE__ */ jsx17("div", { className: SpeedDial_default.actions, "data-direction": direction, children: actions.map((action, i) => {
-          const index = direction === "up" || direction === "left" ? actions.length - 1 - i : i;
-          return /* @__PURE__ */ jsx17(
-            Transition,
+        /* @__PURE__ */ e("div", { className: ne.actions, "data-direction": s, children: t.map((n, f) => {
+          const I = s === "up" || s === "left" ? t.length - 1 - f : f;
+          return /* @__PURE__ */ e(
+            De,
             {
-              mounted: isOpen,
-              transition: isVertical ? "slide-up" : "slide-right",
+              mounted: v,
+              transition: w ? "slide-up" : "slide-right",
               duration: 200,
               timingFunction: "ease",
-              enterDelay: index * 40,
-              children: (transitionStyles) => /* @__PURE__ */ jsx17(Tooltip, { label: action.label, position: isVertical ? "left" : "top", children: /* @__PURE__ */ jsx17(
-                ActionIcon3,
+              enterDelay: I * 40,
+              children: (T) => /* @__PURE__ */ e(Fe, { label: n.label, position: w ? "left" : "top", children: /* @__PURE__ */ e(
+                Y,
                 {
                   variant: "filled",
                   color: "gray",
                   radius: "xl",
-                  size: size * 0.7,
-                  style: transitionStyles,
-                  className: SpeedDial_default.actionButton,
+                  size: p * 0.7,
+                  style: T,
+                  className: ne.actionButton,
                   onClick: () => {
-                    action.onClick();
-                    close();
+                    n.onClick(), l();
                   },
-                  "aria-label": action.label,
-                  children: action.icon
+                  "aria-label": n.label,
+                  children: n.icon
                 }
               ) })
             },
-            action.label
+            n.label
           );
         }) }),
-        /* @__PURE__ */ jsx17(
-          ActionIcon3,
+        /* @__PURE__ */ e(
+          Y,
           {
             variant: "filled",
-            color,
+            color: i,
             radius: "xl",
-            size,
-            onClick: toggle,
-            className: SpeedDial_default.fab,
-            "data-open": isOpen || void 0,
-            "aria-label": isOpen ? "Close actions" : "Open actions",
-            children: isOpen ? (_a = openIcon != null ? openIcon : icon) != null ? _a : /* @__PURE__ */ jsx17(IconPlus, { size: size * 0.45 }) : icon != null ? icon : /* @__PURE__ */ jsx17(IconPlus, { size: size * 0.45 })
+            size: p,
+            onClick: d,
+            className: ne.fab,
+            "data-open": v || void 0,
+            "aria-label": v ? "Close actions" : "Open actions",
+            children: v ? a ?? o ?? /* @__PURE__ */ e(ue, { size: p * 0.45 }) : o ?? /* @__PURE__ */ e(ue, { size: p * 0.45 })
           }
         )
       ]
     }
   );
 }
-
-// src/SplitSection/SplitSection.tsx
-import {
-  Box as Box9,
-  Badge as Badge2,
-  Text as Text11,
-  Title as Title4,
-  Stack as Stack3
-} from "@mantine/core";
-
-// src/SplitSection/SplitSection.module.css
-var SplitSection_default = {};
-
-// src/SplitSection/SplitSection.tsx
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
-function SplitSection({
-  badge,
-  badgeColor = "violet",
-  subtitle,
-  title,
-  titleColor = "blue",
-  preTitle,
-  description,
-  actions,
-  heading,
-  children,
-  stickyHeading = false,
-  py,
-  reversed = false,
-  id,
-  className
+const rn = "_container_9xj91_1", cn = "_layout_9xj91_16", ln = "_reversed_9xj91_29", dn = "_headingSide_9xj91_39", un = "_sticky_9xj91_49", mn = "_stickyInner_9xj91_54", hn = "_contentSide_9xj91_65", pn = "_title_9xj91_76", fn = "_preTitle_9xj91_82", _n = "_titleHighlight_9xj91_88", vn = "_description_9xj91_95", W = {
+  container: rn,
+  layout: cn,
+  reversed: ln,
+  headingSide: dn,
+  sticky: un,
+  stickyInner: mn,
+  contentSide: hn,
+  title: pn,
+  preTitle: fn,
+  titleHighlight: _n,
+  description: vn
+};
+function Rn({
+  badge: t,
+  badgeColor: o = "violet",
+  subtitle: a,
+  title: s,
+  titleColor: i = "blue",
+  preTitle: p,
+  description: y,
+  actions: g,
+  heading: _,
+  children: c,
+  stickyHeading: u = !1,
+  py: b,
+  reversed: r = !1,
+  id: v,
+  className: d
 }) {
-  const headingContent = heading != null ? heading : /* @__PURE__ */ jsxs17(Stack3, { gap: "sm", children: [
-    badge && /* @__PURE__ */ jsxs17(Box9, { children: [
-      /* @__PURE__ */ jsx18(
-        Badge2,
+  const l = _ ?? /* @__PURE__ */ m(ce, { gap: "sm", children: [
+    t && /* @__PURE__ */ m(k, { children: [
+      /* @__PURE__ */ e(
+        $e,
         {
-          color: badgeColor,
+          color: o,
           variant: "filled",
           size: "sm",
           radius: 4,
           tt: "uppercase",
           fw: 700,
-          children: badge
+          children: t
         }
       ),
-      subtitle && /* @__PURE__ */ jsx18(Text11, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: subtitle })
+      a && /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a })
     ] }),
-    !badge && subtitle && /* @__PURE__ */ jsx18(Text11, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: subtitle }),
-    (preTitle || title) && /* @__PURE__ */ jsxs17(Title4, { order: 2, className: SplitSection_default.title, children: [
-      preTitle && /* @__PURE__ */ jsx18("span", { className: SplitSection_default.preTitle, children: preTitle }),
-      preTitle && /* @__PURE__ */ jsx18("br", {}),
-      title && /* @__PURE__ */ jsx18(
-        Text11,
+    !t && a && /* @__PURE__ */ e(N, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a }),
+    (p || s) && /* @__PURE__ */ m(oe, { order: 2, className: W.title, children: [
+      p && /* @__PURE__ */ e("span", { className: W.preTitle, children: p }),
+      p && /* @__PURE__ */ e("br", {}),
+      s && /* @__PURE__ */ e(
+        N,
         {
           component: "span",
-          inherit: true,
-          className: SplitSection_default.titleHighlight,
-          c: titleColor,
-          children: title
+          inherit: !0,
+          className: W.titleHighlight,
+          c: i,
+          children: s
         }
       )
     ] }),
-    description && /* @__PURE__ */ jsx18(Text11, { size: "lg", c: "dimmed", lh: 1.7, className: SplitSection_default.description, children: description }),
-    actions && /* @__PURE__ */ jsx18(Box9, { mt: "md", children: actions })
+    y && /* @__PURE__ */ e(N, { size: "lg", c: "dimmed", lh: 1.7, className: W.description, children: y }),
+    g && /* @__PURE__ */ e(k, { mt: "md", children: g })
   ] });
-  return /* @__PURE__ */ jsx18(
-    Box9,
+  return /* @__PURE__ */ e(
+    k,
     {
       component: "section",
-      py: py != null ? py : "calc(var(--mantine-spacing-xl) * 3)",
+      py: b ?? "calc(var(--mantine-spacing-xl) * 3)",
       pos: "relative",
-      id,
-      className,
-      children: /* @__PURE__ */ jsx18(Box9, { className: SplitSection_default.container, children: /* @__PURE__ */ jsxs17(Box9, { className: `${SplitSection_default.layout} ${reversed ? SplitSection_default.reversed : ""}`, children: [
-        /* @__PURE__ */ jsx18(
-          Box9,
+      id: v,
+      className: d,
+      children: /* @__PURE__ */ e(k, { className: W.container, children: /* @__PURE__ */ m(k, { className: `${W.layout} ${r ? W.reversed : ""}`, children: [
+        /* @__PURE__ */ e(
+          k,
           {
-            className: `${SplitSection_default.headingSide} ${stickyHeading ? SplitSection_default.sticky : ""}`,
-            children: /* @__PURE__ */ jsx18(Box9, { className: stickyHeading ? SplitSection_default.stickyInner : void 0, children: headingContent })
+            className: `${W.headingSide} ${u ? W.sticky : ""}`,
+            children: /* @__PURE__ */ e(k, { className: u ? W.stickyInner : void 0, children: l })
           }
         ),
-        /* @__PURE__ */ jsx18(Box9, { className: SplitSection_default.contentSide, children })
+        /* @__PURE__ */ e(k, { className: W.contentSide, children: c })
       ] }) })
     }
   );
 }
+const gn = "_root_ioshc_1", yn = "_quoteIcon_ioshc_6", Ie = {
+  root: gn,
+  quoteIcon: yn
+};
+function bn(t) {
+  return t.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2);
+}
+function An({
+  quote: t,
+  name: o,
+  role: a,
+  company: s,
+  avatarSrc: i,
+  accentColor: p = "blue"
+}) {
+  const y = `var(--mantine-color-${p}-filled)`;
+  return /* @__PURE__ */ m(U, { className: Ie.root, p: "lg", radius: "md", style: { borderLeftColor: y }, children: [
+    /* @__PURE__ */ e(Ve, { size: 32, className: Ie.quoteIcon, color: y }),
+    /* @__PURE__ */ e(N, { fs: "italic", mt: "xs", mb: "md", children: t }),
+    /* @__PURE__ */ m(F, { gap: "sm", children: [
+      /* @__PURE__ */ e(je, { src: i, alt: o, color: p, radius: "xl", size: "md", children: bn(o) }),
+      /* @__PURE__ */ m(ce, { gap: 0, children: [
+        /* @__PURE__ */ e(N, { fw: 600, size: "sm", children: o }),
+        (a || s) && /* @__PURE__ */ e(N, { size: "xs", c: "dimmed", children: [a, s].filter(Boolean).join(", ") })
+      ] })
+    ] })
+  ] });
+}
 export {
-  AnimatedCounter,
-  AnimatedWaveform,
-  AudioPlayer,
-  AudioWaveform,
-  CodeBlock,
-  ColorPalette,
-  ColorSwatch,
-  Copyable,
-  DosDonts,
-  ExpandableCard,
-  FadeInSection,
-  FrequencyWave,
-  GradientSwatch,
-  Hero,
-  HintBadge,
-  MiniAudioPlayer,
-  PrincipleCard,
-  SpeedDial,
-  SplitSection,
-  VideoBackground
+  Cn as AnimatedCounter,
+  fe as AnimatedWaveform,
+  kn as AudioPlayer,
+  le as AudioWaveform,
+  Ln as CodeBlock,
+  Sn as ColorPalette,
+  Bn as ColorSwatch,
+  de as Copyable,
+  Tn as DosDonts,
+  Pn as ExpandableCard,
+  Wn as FadeInSection,
+  En as FrequencyWave,
+  Dn as GradientSwatch,
+  Fn as Hero,
+  we as HintBadge,
+  Zt as MiniAudioPlayer,
+  jn as PrincipleCard,
+  Gn as SpeedDial,
+  Rn as SplitSection,
+  An as TestimonialCard,
+  Tt as VideoBackground
 };