@frequencyads/components 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1529 @@
+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);
+        }
+      },
+      { threshold }
+    );
+    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);
+      }
+    };
+    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({
+      component: "span",
+      ref,
+      style: { fontVariantNumeric: "tabular-nums" }
+    }, textProps), {
+      children: [
+        prefix,
+        formatValue(),
+        suffix
+      ]
+    })
+  );
+}
+
+// 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 [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(
+    "svg",
+    {
+      className: AnimatedWaveform_default.svg,
+      viewBox: `0 0 ${viewWidth} ${VIEW_HEIGHT}`,
+      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" })
+        ] }) }),
+        [...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,
+              {
+                x,
+                width: BAR_WIDTH,
+                rx: "1.5",
+                fill: "url(#waveformBarGradient)",
+                initial: { height: baseHeight / 2, y: MIDLINE - baseHeight / 4 },
+                animate: {
+                  height: [baseHeight / 2, baseHeight * 2, baseHeight / 2, baseHeight * 1.2, baseHeight / 2],
+                  y: [
+                    MIDLINE - baseHeight / 4,
+                    MIDLINE - baseHeight,
+                    MIDLINE - baseHeight / 4,
+                    MIDLINE - baseHeight * 0.6,
+                    MIDLINE - baseHeight / 4
+                  ]
+                },
+                transition: {
+                  duration,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                  delay: staggerDelay,
+                  repeatDelay
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.rect,
+              {
+                x,
+                y: MIDLINE,
+                width: BAR_WIDTH,
+                rx: "1.5",
+                fill: "url(#waveformBarGradient)",
+                initial: { height: baseHeight / 2 },
+                animate: {
+                  height: [baseHeight / 2, baseHeight * 2, baseHeight / 2, baseHeight * 1.2, baseHeight / 2]
+                },
+                transition: {
+                  duration,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                  delay: staggerDelay,
+                  repeatDelay
+                }
+              }
+            )
+          ] }, i);
+        })
+      ]
+    }
+  ) });
+}
+
+// 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)));
+  }
+  return data;
+}
+var AudioWaveform = forwardRef(
+  ({
+    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)));
+        }
+      },
+      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);
+      };
+      const handleTime = () => {
+        if (audio.duration > 0) setProgress(audio.currentTime / audio.duration * 100);
+      };
+      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);
+      },
+      [onSeek, duration]
+    );
+    return /* @__PURE__ */ jsxs3(
+      Box,
+      {
+        ref: containerRef,
+        className: AudioWaveform_default.root,
+        style: { height },
+        onClick: handleClick,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: AudioWaveform_default.progressOverlay,
+              style: { width: `${progress}%`, backgroundColor: `${progressColor}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(
+              "div",
+              {
+                className: AudioWaveform_default.bar,
+                style: {
+                  width: barWidth,
+                  height: `${barHeight}%`,
+                  backgroundColor: isActive ? progressColor : waveColor
+                }
+              },
+              i
+            );
+          }) }),
+          loading && /* @__PURE__ */ jsx2("div", { className: AudioWaveform_default.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")}`;
+}
+function AudioPlayer({
+  src,
+  filename = "audio",
+  playButtonColor,
+  playButtonSize = 32,
+  waveColor = "#D0D0D0",
+  progressColor = "#a8a8a8",
+  waveHeight = 64,
+  barWidth = 3,
+  barGap = 2,
+  showVolume = true,
+  showDownload = true
+}) {
+  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 = () => {
+      setTimeout(() => {
+        setCurrentTime(0);
+        setCurrentTimeFormatted("00:00");
+        setIsPlaying(false);
+      }, 500);
+    };
+    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);
+      }
+    },
+    []
+  );
+  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,
+      {
+        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 })
+      }
+    ),
+    /* @__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,
+      {
+        audioRef,
+        currentTime,
+        onSeek: handleSeek,
+        waveColor,
+        progressColor,
+        height: waveHeight,
+        barWidth,
+        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,
+        {
+          variant: "subtle",
+          size: "sm",
+          onClick: toggleMute,
+          "aria-label": isMuted ? "Unmute" : "Mute",
+          children: isMuted ? /* @__PURE__ */ jsx3(IconVolumeOff, { size: 16 }) : /* @__PURE__ */ jsx3(IconVolume, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Slider,
+        {
+          value: volume,
+          onChange: handleVolumeChange,
+          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 }) })
+  ] });
+}
+
+// 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 () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+    }
+  }, [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,
+        {
+          size: "xs",
+          radius: "md",
+          color: copied ? "green" : "blue",
+          onClick: handleCopy,
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "textarea",
+      {
+        readOnly: true,
+        value: code,
+        className: CodeBlock_default.textarea,
+        style: { height }
+      }
+    )
+  ] });
+}
+
+// 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);
+    });
+  }, [value]);
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx5(
+      "span",
+      {
+        onClick: handleCopy,
+        className: Copyable_default.root,
+        title: `Click to copy ${value}`,
+        children
+      }
+    ),
+    toast && /* @__PURE__ */ jsx5(Portal, { children: /* @__PURE__ */ jsx5(
+      Notification,
+      {
+        withCloseButton: false,
+        className: Copyable_default.toast,
+        color: "blue",
+        children: toast
+      }
+    ) })
+  ] });
+}
+
+// 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(
+        "div",
+        {
+          className: `${ColorPalette_default.color} ${i === mainIndex ? ColorPalette_default.main : ""}`,
+          style: { backgroundColor: hex }
+        }
+      ),
+      /* @__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 })
+    ] }) }, 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 })
+    ] })
+  ] }) });
+}
+
+// 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" })
+      ] }),
+      /* @__PURE__ */ jsx8(Text6, { size: "sm", children: item.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__ */ jsx8(Text6, { size: "sm", children: item.do })
+    ] })
+  ] }, i)) });
+}
+
+// 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 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);
+        }
+      },
+      { threshold }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isControlled, threshold, delay, onExpandedChange]);
+  return /* @__PURE__ */ jsx9(
+    Paper3,
+    __spreadProps(__spreadValues({
+      ref,
+      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,
+            {
+              initial: { opacity: 0, height: 0 },
+              animate: {
+                opacity: isExpanded ? 1 : 0,
+                height: isExpanded ? "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
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx9(
+          motion2.div,
+          {
+            animate: { scale: isExpanded ? 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 }) })
+          }
+        )
+      ] }) })
+    })
+  );
+}
+
+// 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);
+          }
+        }
+      },
+      { threshold }
+    );
+    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
+    })
+  );
+}
+
+// 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();
+        }
+      }
+      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
+          );
+          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);
+        }
+      }
+      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();
+        }
+      }
+    },
+    [isActive, isPulsing, colors.start, colors.mid, colors.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);
+    };
+    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);
+    };
+    animationRef.current = requestAnimationFrame(animate);
+    return () => {
+      window.removeEventListener("resize", updateSize);
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [drawWave]);
+  useEffect7(() => {
+    if (isActive) {
+      queueMicrotask(() => setIsPulsing(false));
+      lastPulseRef.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,
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        height,
+        overflow: "hidden",
+        pointerEvents: "none",
+        opacity: isDark ? 1 : 0.8
+      },
+      children: /* @__PURE__ */ jsx11(
+        "canvas",
+        {
+          ref: canvasRef,
+          style: {
+            width: "100%",
+            height: "100%",
+            display: "block"
+          }
+        }
+      )
+    }
+  );
+}
+
+// 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]
+      ] })
+    ] })
+  ] }) });
+}
+
+// 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" })
+    }
+  );
+}
+
+// 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 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,
+          {
+            src: logoSrc,
+            alt: resolvedHeading != null ? resolvedHeading : "Frequency",
+            className: Hero_default.logo,
+            fit: "contain"
+          }
+        ),
+        /* @__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,
+          {
+            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
+          }
+        )
+      ] }),
+      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,
+          {
+            component: "a",
+            href: primaryAction.href,
+            size: "lg",
+            radius: 4,
+            className: Hero_default.primaryButton,
+            children: primaryAction.label
+          }
+        ),
+        secondaryAction && /* @__PURE__ */ jsx14(
+          Button2,
+          {
+            component: "a",
+            href: secondaryAction.href,
+            size: "lg",
+            radius: 4,
+            variant: "outline",
+            className: Hero_default.secondaryButton,
+            children: secondaryAction.label
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// 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,
+    {
+      variant: "light",
+      color: isDo ? "green" : "red",
+      size: "lg",
+      radius: "sm",
+      styles: {
+        root: { textTransform: "none", fontWeight: 400 },
+        label: { whiteSpace: "normal", lineHeight: 1.4 }
+      },
+      children: [
+        /* @__PURE__ */ jsxs13("strong", { children: [
+          isDo ? "Do" : "Don't",
+          ":"
+        ] }),
+        " ",
+        children
+      ]
+    }
+  );
+}
+
+// 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 = {
+  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(
+  ({
+    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]);
+    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);
+      }
+    }, []);
+    return /* @__PURE__ */ jsxs14(
+      Group6,
+      {
+        ref,
+        gap: size === "mini" ? 6 : size === "small" ? 8 : 10,
+        wrap: "nowrap",
+        className: `${MiniAudioPlayer_default.root} ${className != null ? className : ""}`,
+        style: __spreadValues({ height: config.height }, style),
+        children: [
+          /* @__PURE__ */ jsx15("audio", { ref: audioRef, src: audioUrl, preload: "metadata" }),
+          /* @__PURE__ */ jsx15(
+            ActionIcon2,
+            {
+              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 })
+            }
+          ),
+          /* @__PURE__ */ jsx15(Box7, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ jsx15(
+            AudioWaveform,
+            {
+              audioRef,
+              currentTime,
+              onSeek: handleSeek,
+              waveColor,
+              progressColor,
+              height: config.waveHeight,
+              barWidth: config.barWidth,
+              barGap: config.barGap
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+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
+}) {
+  return /* @__PURE__ */ jsxs15(
+    Paper5,
+    {
+      className: PrincipleCard_default.root,
+      p: "lg",
+      radius: "md",
+      style: { borderLeftColor: accentColor },
+      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 })
+        ] })
+      ]
+    }
+  );
+}
+
+// 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
+}) {
+  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,
+    {
+      className: `${SpeedDial_default.root} ${className != null ? className : ""}`,
+      style,
+      "data-direction": direction,
+      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,
+            {
+              mounted: isOpen,
+              transition: isVertical ? "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,
+                {
+                  variant: "filled",
+                  color: "gray",
+                  radius: "xl",
+                  size: size * 0.7,
+                  style: transitionStyles,
+                  className: SpeedDial_default.actionButton,
+                  onClick: () => {
+                    action.onClick();
+                    close();
+                  },
+                  "aria-label": action.label,
+                  children: action.icon
+                }
+              ) })
+            },
+            action.label
+          );
+        }) }),
+        /* @__PURE__ */ jsx17(
+          ActionIcon3,
+          {
+            variant: "filled",
+            color,
+            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 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// 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 headingContent = heading != null ? heading : /* @__PURE__ */ jsxs17(Stack3, { gap: "sm", children: [
+    badge && /* @__PURE__ */ jsxs17(Box9, { children: [
+      /* @__PURE__ */ jsx18(
+        Badge2,
+        {
+          color: badgeColor,
+          variant: "filled",
+          size: "sm",
+          radius: 4,
+          tt: "uppercase",
+          fw: 700,
+          children: badge
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx18(Text11, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: subtitle })
+    ] }),
+    !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,
+        {
+          component: "span",
+          inherit: true,
+          className: SplitSection_default.titleHighlight,
+          c: titleColor,
+          children: title
+        }
+      )
+    ] }),
+    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 })
+  ] });
+  return /* @__PURE__ */ jsx18(
+    Box9,
+    {
+      component: "section",
+      py: py != null ? py : "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,
+          {
+            className: `${SplitSection_default.headingSide} ${stickyHeading ? SplitSection_default.sticky : ""}`,
+            children: /* @__PURE__ */ jsx18(Box9, { className: stickyHeading ? SplitSection_default.stickyInner : void 0, children: headingContent })
+          }
+        ),
+        /* @__PURE__ */ jsx18(Box9, { className: SplitSection_default.contentSide, children })
+      ] }) })
+    }
+  );
+}
+export {
+  AnimatedCounter,
+  AnimatedWaveform,
+  AudioPlayer,
+  AudioWaveform,
+  CodeBlock,
+  ColorPalette,
+  ColorSwatch,
+  Copyable,
+  DosDonts,
+  ExpandableCard,
+  FadeInSection,
+  FrequencyWave,
+  GradientSwatch,
+  Hero,
+  HintBadge,
+  MiniAudioPlayer,
+  PrincipleCard,
+  SpeedDial,
+  SplitSection,
+  VideoBackground
+};