@frequencyads/components 0.1.0

package/dist/index.js

@@ -0,0 +1,1562 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AnimatedCounter: () => AnimatedCounter,
+  AnimatedWaveform: () => AnimatedWaveform,
+  AudioPlayer: () => AudioPlayer,
+  AudioWaveform: () => AudioWaveform,
+  CodeBlock: () => CodeBlock,
+  ColorPalette: () => ColorPalette,
+  ColorSwatch: () => ColorSwatch,
+  Copyable: () => Copyable,
+  DosDonts: () => DosDonts,
+  ExpandableCard: () => ExpandableCard,
+  FadeInSection: () => FadeInSection,
+  FrequencyWave: () => FrequencyWave,
+  GradientSwatch: () => GradientSwatch,
+  Hero: () => Hero,
+  HintBadge: () => HintBadge,
+  MiniAudioPlayer: () => MiniAudioPlayer,
+  PrincipleCard: () => PrincipleCard,
+  SpeedDial: () => SpeedDial,
+  SplitSection: () => SplitSection,
+  VideoBackground: () => VideoBackground
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AnimatedCounter/AnimatedCounter.tsx
+var import_react = require("react");
+var import_core = require("@mantine/core");
+var import_jsx_runtime = require("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] = (0, import_react.useState)(0);
+  const [hasTriggered, setHasTriggered] = (0, import_react.useState)(false);
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.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]);
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.Text,
+    __spreadProps(__spreadValues({
+      component: "span",
+      ref,
+      style: { fontVariantNumeric: "tabular-nums" }
+    }, textProps), {
+      children: [
+        prefix,
+        formatValue(),
+        suffix
+      ]
+    })
+  );
+}
+
+// src/AnimatedWaveform/AnimatedWaveform.tsx
+var import_react2 = require("react");
+var import_framer_motion = require("framer-motion");
+
+// src/AnimatedWaveform/AnimatedWaveform.module.css
+var AnimatedWaveform_default = {};
+
+// src/AnimatedWaveform/AnimatedWaveform.tsx
+var import_jsx_runtime2 = require("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] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  const viewWidth = barCount * BAR_GAP;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: AnimatedWaveform_default.root, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      className: AnimatedWaveform_default.svg,
+      viewBox: `0 0 ${viewWidth} ${VIEW_HEIGHT}`,
+      preserveAspectRatio: "none",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "0%", stopColor: "white", stopOpacity: "0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "15%", stopColor: "white", stopOpacity: "0.15" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.25" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "85%", stopColor: "white", stopOpacity: "0.15" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_framer_motion.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__ */ (0, import_jsx_runtime2.jsx)(
+              import_framer_motion.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
+var import_react4 = require("react");
+var import_core3 = require("@mantine/core");
+var import_icons_react = require("@tabler/icons-react");
+
+// src/AudioWaveform/AudioWaveform.tsx
+var import_react3 = require("react");
+var import_core2 = require("@mantine/core");
+
+// src/AudioWaveform/AudioWaveform.module.css
+var AudioWaveform_default = {};
+
+// src/AudioWaveform/AudioWaveform.tsx
+var import_jsx_runtime3 = require("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 = (0, import_react3.forwardRef)(
+  ({
+    audioRef,
+    currentTime = 0,
+    onSeek,
+    loading = false,
+    waveColor = "#CCCCCC",
+    progressColor = "#169bde",
+    height = 60,
+    barWidth = 2,
+    barGap = 1
+  }, ref) => {
+    const containerRef = (0, import_react3.useRef)(null);
+    const [waveformData] = (0, import_react3.useState)(() => generateWaveformData());
+    const [duration, setDuration] = (0, import_react3.useState)(0);
+    const [progress, setProgress] = (0, import_react3.useState)(0);
+    (0, import_react3.useImperativeHandle)(ref, () => ({
+      seekTo: (time) => {
+        if (duration > 0) {
+          setProgress(Math.max(0, Math.min(100, time / duration * 100)));
+        }
+      },
+      getCurrentTime: () => progress / 100 * duration,
+      getDuration: () => duration
+    }));
+    (0, import_react3.useEffect)(() => {
+      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]);
+    (0, import_react3.useEffect)(() => {
+      if (duration > 0 && typeof currentTime === "number") {
+        setProgress(currentTime / duration * 100);
+      }
+    }, [currentTime, duration]);
+    const handleClick = (0, import_react3.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__ */ (0, import_jsx_runtime3.jsxs)(
+      import_core2.Box,
+      {
+        ref: containerRef,
+        className: AudioWaveform_default.root,
+        style: { height },
+        onClick: handleClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: AudioWaveform_default.progressOverlay,
+              style: { width: `${progress}%`, backgroundColor: `${progressColor}15` }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AudioWaveform_default.bars, style: { gap: barGap }, children: waveformData.map((barHeight, i) => {
+            const isActive = i / waveformData.length * 100 <= progress;
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: AudioWaveform_default.bar,
+                style: {
+                  width: barWidth,
+                  height: `${barHeight}%`,
+                  backgroundColor: isActive ? progressColor : waveColor
+                }
+              },
+              i
+            );
+          }) }),
+          loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AudioWaveform_default.loading, children: "Loading waveform..." })
+        ]
+      }
+    );
+  }
+);
+AudioWaveform.displayName = "AudioWaveform";
+
+// src/AudioPlayer/AudioPlayer.module.css
+var AudioPlayer_default = {};
+
+// src/AudioPlayer/AudioPlayer.tsx
+var import_jsx_runtime4 = require("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 = (0, import_react4.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react4.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react4.useState)(0);
+  const [currentTimeFormatted, setCurrentTimeFormatted] = (0, import_react4.useState)("00:00");
+  const [totalDuration, setTotalDuration] = (0, import_react4.useState)("00:00");
+  const [volume, setVolume] = (0, import_react4.useState)(50);
+  const [prevVolume, setPrevVolume] = (0, import_react4.useState)(50);
+  const [isMuted, setIsMuted] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    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 = (0, import_react4.useCallback)(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play().catch(() => {
+      });
+    }
+  }, [isPlaying]);
+  const handleSeek = (0, import_react4.useCallback)((time) => {
+    const audio = audioRef.current;
+    if (audio && !isNaN(time) && isFinite(time)) {
+      audio.currentTime = time;
+      setCurrentTime(time);
+      setCurrentTimeFormatted(formatTime(time));
+    }
+  }, []);
+  const handleVolumeChange = (0, import_react4.useCallback)(
+    (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 = (0, import_react4.useCallback)(() => {
+    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 = (0, import_react4.useCallback)(() => {
+    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__ */ (0, import_jsx_runtime4.jsxs)(import_core3.Group, { gap: "sm", wrap: "nowrap", className: AudioPlayer_default.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("audio", { ref: audioRef, src, preload: "metadata" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_core3.ActionIcon,
+      {
+        variant: "filled",
+        radius: "xl",
+        size: playButtonSize,
+        color: playButtonColor,
+        onClick: togglePlay,
+        "aria-label": isPlaying ? "Pause" : "Play",
+        className: AudioPlayer_default.playButton,
+        children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconPlayerPauseFilled, { size: playButtonSize * 0.5 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconPlayerPlayFilled, { size: playButtonSize * 0.5 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Text, { size: "xs", ff: "monospace", c: "dimmed", className: AudioPlayer_default.time, children: currentTimeFormatted }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Box, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      AudioWaveform,
+      {
+        audioRef,
+        currentTime,
+        onSeek: handleSeek,
+        waveColor,
+        progressColor,
+        height: waveHeight,
+        barWidth,
+        barGap
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Text, { size: "xs", ff: "monospace", c: "dimmed", className: AudioPlayer_default.time, children: totalDuration }),
+    showVolume && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core3.Group, { gap: 4, wrap: "nowrap", className: AudioPlayer_default.volumeGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_core3.ActionIcon,
+        {
+          variant: "subtle",
+          size: "sm",
+          onClick: toggleMute,
+          "aria-label": isMuted ? "Unmute" : "Mute",
+          children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconVolumeOff, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconVolume, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_core3.Slider,
+        {
+          value: volume,
+          onChange: handleVolumeChange,
+          size: "xs",
+          w: 80,
+          "aria-label": "Volume"
+        }
+      )
+    ] }),
+    showDownload && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.ActionIcon, { variant: "subtle", size: "sm", onClick: handleDownload, "aria-label": "Download", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_react.IconDownload, { size: 16 }) })
+  ] });
+}
+
+// src/CodeBlock/CodeBlock.tsx
+var import_react5 = require("react");
+var import_core4 = require("@mantine/core");
+
+// src/CodeBlock/CodeBlock.module.css
+var CodeBlock_default = {};
+
+// src/CodeBlock/CodeBlock.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function CodeBlock({ code, filename, height = 384 }) {
+  const [copied, setCopied] = (0, import_react5.useState)(false);
+  const handleCopy = (0, import_react5.useCallback)(async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+    }
+  }, [code]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core4.Box, { className: CodeBlock_default.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core4.Group, { justify: "space-between", mb: "xs", children: [
+      filename && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core4.Text, { size: "sm", fw: 500, c: "dimmed", children: filename }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_core4.Button,
+        {
+          size: "xs",
+          radius: "md",
+          color: copied ? "green" : "blue",
+          onClick: handleCopy,
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "textarea",
+      {
+        readOnly: true,
+        value: code,
+        className: CodeBlock_default.textarea,
+        style: { height }
+      }
+    )
+  ] });
+}
+
+// src/ColorPalette/ColorPalette.tsx
+var import_core6 = require("@mantine/core");
+
+// src/Copyable/Copyable.tsx
+var import_react6 = require("react");
+var import_core5 = require("@mantine/core");
+
+// src/Copyable/Copyable.module.css
+var Copyable_default = {};
+
+// src/Copyable/Copyable.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Copyable({ value, children }) {
+  const [toast, setToast] = (0, import_react6.useState)(null);
+  const handleCopy = (0, import_react6.useCallback)(() => {
+    navigator.clipboard.writeText(value).then(() => {
+      setToast(`Copied ${value}`);
+      setTimeout(() => setToast(null), 1800);
+    });
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        onClick: handleCopy,
+        className: Copyable_default.root,
+        title: `Click to copy ${value}`,
+        children
+      }
+    ),
+    toast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_core5.Notification,
+      {
+        withCloseButton: false,
+        className: Copyable_default.toast,
+        color: "blue",
+        children: toast
+      }
+    ) })
+  ] });
+}
+
+// src/ColorPalette/ColorPalette.module.css
+var ColorPalette_default = {};
+
+// src/ColorPalette/ColorPalette.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ColorPalette({ name, shades, mainIndex = 5 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ColorPalette_default.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Title, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.SimpleGrid, { cols: 10, spacing: 4, children: shades.map((hex, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copyable, { value: hex, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ColorPalette_default.shade, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          className: `${ColorPalette_default.color} ${i === mainIndex ? ColorPalette_default.main : ""}`,
+          style: { backgroundColor: hex }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Text, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: i }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Text, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: hex })
+    ] }) }, i)) })
+  ] });
+}
+
+// src/ColorSwatch/ColorSwatch.tsx
+var import_core7 = require("@mantine/core");
+
+// src/ColorSwatch/ColorSwatch.module.css
+var ColorSwatch_default = {};
+
+// src/ColorSwatch/ColorSwatch.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ColorSwatch({ name, hex, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Copyable, { value: hex, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Paper, { className: ColorSwatch_default.root, shadow: "lg", radius: "md", withBorder: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: ColorSwatch_default.preview, style: { backgroundColor: hex } }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: ColorSwatch_default.info, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { fw: 600, size: "sm", children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "xs", c: "dimmed", ff: "monospace", children: hex }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "xs", c: "dimmed", children: label })
+    ] })
+  ] }) });
+}
+
+// src/DosDonts/DosDonts.tsx
+var import_core8 = require("@mantine/core");
+var import_icons_react2 = require("@tabler/icons-react");
+
+// src/DosDonts/DosDonts.module.css
+var DosDonts_default = {};
+
+// src/DosDonts/DosDonts.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function DosDonts({ items }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: DosDonts_default.root, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Paper, { className: DosDonts_default.dont, p: "md", radius: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_react2.IconX, { size: 16, className: DosDonts_default.dontIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", fw: 600, className: DosDonts_default.dontLabel, children: "Don't" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", children: item.dont })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Paper, { className: DosDonts_default.do, p: "md", radius: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_react2.IconCheck, { size: 16, className: DosDonts_default.doIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", fw: 600, className: DosDonts_default.doLabel, children: "Do" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", children: item.do })
+    ] })
+  ] }, i)) });
+}
+
+// src/ExpandableCard/ExpandableCard.tsx
+var import_react7 = require("react");
+var import_core9 = require("@mantine/core");
+var import_framer_motion2 = require("framer-motion");
+
+// src/ExpandableCard/ExpandableCard.module.css
+var ExpandableCard_default = {};
+
+// src/ExpandableCard/ExpandableCard.tsx
+var import_jsx_runtime10 = require("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 = (0, import_react7.useRef)(null);
+  const [internalExpanded, setInternalExpanded] = (0, import_react7.useState)(false);
+  const isControlled = controlledExpanded !== void 0;
+  const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+  (0, import_react7.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime10.jsx)(
+    import_core9.Paper,
+    __spreadProps(__spreadValues({
+      ref,
+      radius: 4,
+      className: ExpandableCard_default.root,
+      component: import_framer_motion2.motion.div
+    }, {
+      animate: { height: isExpanded ? "auto" : collapsedHeight },
+      transition: { duration: 0.5, ease: "easeOut" }
+    }), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: ExpandableCard_default.inner, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Group, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Stack, { gap: "xs", style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { fw: 700, size: "xl", lh: 1.3, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "md", c: "dimmed", children: description }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_framer_motion2.motion.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__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "sm", c: "dimmed", mt: "sm", children: expandedContent }) : expandedContent
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_framer_motion2.motion.div,
+          {
+            animate: { scale: isExpanded ? 1.1 : 1 },
+            transition: { duration: 0.3 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.ThemeIcon, { size: iconSize, radius: 4, color, variant: "filled", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: 20, stroke: 1.5 }) })
+          }
+        )
+      ] }) })
+    })
+  );
+}
+
+// src/FadeInSection/FadeInSection.tsx
+var import_react8 = require("react");
+var import_core10 = require("@mantine/core");
+
+// src/FadeInSection/FadeInSection.module.css
+var FadeInSection_default = {};
+
+// src/FadeInSection/FadeInSection.tsx
+var import_jsx_runtime11 = require("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 = (0, import_react8.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime11.jsx)(
+    import_core10.Box,
+    __spreadProps(__spreadValues({
+      ref,
+      className: `${FadeInSection_default.root} ${isVisible ? FadeInSection_default.visible : ""} ${className != null ? className : ""}`
+    }, props), {
+      children
+    })
+  );
+}
+
+// src/FrequencyWave/FrequencyWave.tsx
+var import_react9 = require("react");
+var import_core11 = require("@mantine/core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function FrequencyWave({ isActive = false, height = 60 }) {
+  const canvasRef = (0, import_react9.useRef)(null);
+  const animationRef = (0, import_react9.useRef)(void 0);
+  const [isPulsing, setIsPulsing] = (0, import_react9.useState)(false);
+  const lastPulseRef = (0, import_react9.useRef)(null);
+  const randomSpikeRef = (0, import_react9.useRef)(null);
+  const { colorScheme } = (0, import_core11.useMantineColorScheme)();
+  const isDark = colorScheme === "dark";
+  const colors = {
+    start: isDark ? "#7950F2" : "#9775FA",
+    mid: isDark ? "#BE4BDB" : "#DA77F2",
+    end: isDark ? "#15AABF" : "#22B8CF"
+  };
+  const drawWave = (0, import_react9.useCallback)(
+    (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]
+  );
+  (0, import_react9.useEffect)(() => {
+    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]);
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime12.jsx)(
+    import_core11.Box,
+    {
+      style: {
+        position: "relative",
+        width: "100%",
+        height,
+        overflow: "hidden",
+        pointerEvents: "none",
+        opacity: isDark ? 1 : 0.8
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "canvas",
+        {
+          ref: canvasRef,
+          style: {
+            width: "100%",
+            height: "100%",
+            display: "block"
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/GradientSwatch/GradientSwatch.tsx
+var import_core12 = require("@mantine/core");
+
+// src/GradientSwatch/GradientSwatch.module.css
+var GradientSwatch_default = {};
+
+// src/GradientSwatch/GradientSwatch.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function GradientSwatch({ name, colors, description }) {
+  const css = `linear-gradient(135deg, ${colors[0]} 0%, ${colors[1]} 100%)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Copyable, { value: css, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Paper, { className: GradientSwatch_default.root, shadow: "lg", radius: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: GradientSwatch_default.preview, style: { background: css } }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: GradientSwatch_default.info, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { fw: 600, size: "sm", children: name }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", c: "dimmed", children: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Text, { size: "xs", c: "dimmed", ff: "monospace", children: [
+        colors[0],
+        " \u2192 ",
+        colors[1]
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/Hero/Hero.tsx
+var import_core13 = require("@mantine/core");
+var import_frequency_mark_white = __toESM(require("@frequencyads/brand/assets/frequency-mark-white.svg"));
+var import_colors = require("@frequencyads/brand/colors");
+
+// src/VideoBackground/VideoBackground.module.css
+var VideoBackground_default = {};
+
+// src/VideoBackground/VideoBackground.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function VideoBackground({ src, opacity = 0.3 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "video",
+    {
+      autoPlay: true,
+      muted: true,
+      loop: true,
+      playsInline: true,
+      className: VideoBackground_default.root,
+      style: { opacity },
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("source", { src, type: "video/mp4" })
+    }
+  );
+}
+
+// src/Hero/Hero.module.css
+var Hero_default = {};
+
+// src/Hero/Hero.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Hero({
+  variant = "logo",
+  heading,
+  tagline,
+  logoSrc = import_frequency_mark_white.default,
+  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 = import_colors.gradients[gradientName];
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Box, { className: Hero_default.root, children: [
+    backgroundVideoSrc && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(VideoBackground, { src: backgroundVideoSrc }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Stack, { className: Hero_default.content, align: "center", gap: "lg", children: [
+      variant === "logo" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: Hero_default.logoWrapper, children: [
+        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
+        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_core13.Image,
+          {
+            src: logoSrc,
+            alt: resolvedHeading != null ? resolvedHeading : "Frequency",
+            className: Hero_default.logo,
+            fit: "contain"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.glow })
+      ] }),
+      variant === "text" && resolvedHeading && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: Hero_default.textWrapper, children: [
+        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AnimatedWaveform, {}),
+        waveformVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: Hero_default.vignette }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_core13.Title,
+          {
+            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__ */ (0, import_jsx_runtime15.jsx)(import_core13.Text, { className: Hero_default.tagline, children: tagline }),
+      hasActions && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core13.Group, { gap: "md", justify: "center", wrap: "wrap", children: [
+        primaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_core13.Button,
+          {
+            component: "a",
+            href: primaryAction.href,
+            size: "lg",
+            radius: 4,
+            className: Hero_default.primaryButton,
+            children: primaryAction.label
+          }
+        ),
+        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_core13.Button,
+          {
+            component: "a",
+            href: secondaryAction.href,
+            size: "lg",
+            radius: 4,
+            variant: "outline",
+            className: Hero_default.secondaryButton,
+            children: secondaryAction.label
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/HintBadge/HintBadge.tsx
+var import_core14 = require("@mantine/core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function HintBadge({ variant, children }) {
+  const isDo = variant === "do";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_core14.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__ */ (0, import_jsx_runtime16.jsxs)("strong", { children: [
+          isDo ? "Do" : "Don't",
+          ":"
+        ] }),
+        " ",
+        children
+      ]
+    }
+  );
+}
+
+// src/MiniAudioPlayer/MiniAudioPlayer.tsx
+var import_react10 = require("react");
+var import_core15 = require("@mantine/core");
+var import_icons_react3 = require("@tabler/icons-react");
+
+// src/MiniAudioPlayer/MiniAudioPlayer.module.css
+var MiniAudioPlayer_default = {};
+
+// src/MiniAudioPlayer/MiniAudioPlayer.tsx
+var import_jsx_runtime17 = require("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 = (0, import_react10.forwardRef)(
+  ({
+    audioUrl,
+    size = "mini",
+    waveColor = "#CCCCCC",
+    progressColor = "#169bde",
+    onPlay,
+    onPause,
+    className,
+    style
+  }, ref) => {
+    const audioRef = (0, import_react10.useRef)(null);
+    const [isPlaying, setIsPlaying] = (0, import_react10.useState)(false);
+    const [currentTime, setCurrentTime] = (0, import_react10.useState)(0);
+    const config = SIZE_CONFIG[size];
+    (0, import_react10.useEffect)(() => {
+      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 = (0, import_react10.useCallback)(() => {
+      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 = (0, import_react10.useCallback)((time) => {
+      const audio = audioRef.current;
+      if (audio && !isNaN(time) && isFinite(time)) {
+        audio.currentTime = time;
+        setCurrentTime(time);
+      }
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      import_core15.Group,
+      {
+        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__ */ (0, import_jsx_runtime17.jsx)("audio", { ref: audioRef, src: audioUrl, preload: "metadata" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_core15.ActionIcon,
+            {
+              variant: "filled",
+              color: "blue",
+              radius: "xl",
+              size: config.buttonSize,
+              onClick: handlePlayPause,
+              "aria-label": isPlaying ? "Pause" : "Play",
+              className: MiniAudioPlayer_default.playButton,
+              children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react3.IconPlayerPauseFilled, { size: config.iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_react3.IconPlayerPlayFilled, { size: config.iconSize })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core15.Box, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            AudioWaveform,
+            {
+              audioRef,
+              currentTime,
+              onSeek: handleSeek,
+              waveColor,
+              progressColor,
+              height: config.waveHeight,
+              barWidth: config.barWidth,
+              barGap: config.barGap
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+MiniAudioPlayer.displayName = "MiniAudioPlayer";
+
+// src/PrincipleCard/PrincipleCard.tsx
+var import_core16 = require("@mantine/core");
+
+// src/PrincipleCard/PrincipleCard.module.css
+var PrincipleCard_default = {};
+
+// src/PrincipleCard/PrincipleCard.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function PrincipleCard({
+  accentColor,
+  title,
+  description,
+  doHint,
+  dontHint
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_core16.Paper,
+    {
+      className: PrincipleCard_default.root,
+      p: "lg",
+      radius: "md",
+      style: { borderLeftColor: accentColor },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core16.Title, { order: 3, size: "h4", mb: "xs", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core16.Text, { c: "dimmed", children: description }),
+        (doHint || dontHint) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core16.Group, { gap: "sm", mt: "md", wrap: "wrap", children: [
+          doHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HintBadge, { variant: "do", children: doHint }),
+          dontHint && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HintBadge, { variant: "dont", children: dontHint })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/SpeedDial/SpeedDial.tsx
+var import_react11 = require("react");
+var import_core17 = require("@mantine/core");
+var import_icons_react4 = require("@tabler/icons-react");
+
+// src/SpeedDial/SpeedDial.module.css
+var SpeedDial_default = {};
+
+// src/SpeedDial/SpeedDial.tsx
+var import_jsx_runtime19 = require("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] = (0, import_react11.useState)(defaultOpen);
+  const isOpen = controlledOpen != null ? controlledOpen : uncontrolledOpen;
+  const toggle = (0, import_react11.useCallback)(() => {
+    const next = !isOpen;
+    setUncontrolledOpen(next);
+    onOpenChange == null ? void 0 : onOpenChange(next);
+  }, [isOpen, onOpenChange]);
+  const close = (0, import_react11.useCallback)(() => {
+    setUncontrolledOpen(false);
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  }, [onOpenChange]);
+  const isVertical = direction === "up" || direction === "down";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_core17.Box,
+    {
+      className: `${SpeedDial_default.root} ${className != null ? className : ""}`,
+      style,
+      "data-direction": direction,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)(
+            import_core17.Transition,
+            {
+              mounted: isOpen,
+              transition: isVertical ? "slide-up" : "slide-right",
+              duration: 200,
+              timingFunction: "ease",
+              enterDelay: index * 40,
+              children: (transitionStyles) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core17.Tooltip, { label: action.label, position: isVertical ? "left" : "top", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_core17.ActionIcon,
+                {
+                  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__ */ (0, import_jsx_runtime19.jsx)(
+          import_core17.ActionIcon,
+          {
+            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__ */ (0, import_jsx_runtime19.jsx)(import_icons_react4.IconPlus, { size: size * 0.45 }) : icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons_react4.IconPlus, { size: size * 0.45 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/SplitSection/SplitSection.tsx
+var import_core18 = require("@mantine/core");
+
+// src/SplitSection/SplitSection.module.css
+var SplitSection_default = {};
+
+// src/SplitSection/SplitSection.tsx
+var import_jsx_runtime20 = require("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__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Stack, { gap: "sm", children: [
+    badge && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_core18.Badge,
+        {
+          color: badgeColor,
+          variant: "filled",
+          size: "sm",
+          radius: 4,
+          tt: "uppercase",
+          fw: 700,
+          children: badge
+        }
+      ),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Text, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: subtitle })
+    ] }),
+    !badge && subtitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Text, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: subtitle }),
+    (preTitle || title) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Title, { order: 2, className: SplitSection_default.title, children: [
+      preTitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: SplitSection_default.preTitle, children: preTitle }),
+      preTitle && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("br", {}),
+      title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_core18.Text,
+        {
+          component: "span",
+          inherit: true,
+          className: SplitSection_default.titleHighlight,
+          c: titleColor,
+          children: title
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Text, { size: "lg", c: "dimmed", lh: 1.7, className: SplitSection_default.description, children: description }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { mt: "md", children: actions })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_core18.Box,
+    {
+      component: "section",
+      py: py != null ? py : "calc(var(--mantine-spacing-xl) * 3)",
+      pos: "relative",
+      id,
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { className: SplitSection_default.container, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_core18.Box, { className: `${SplitSection_default.layout} ${reversed ? SplitSection_default.reversed : ""}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_core18.Box,
+          {
+            className: `${SplitSection_default.headingSide} ${stickyHeading ? SplitSection_default.sticky : ""}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { className: stickyHeading ? SplitSection_default.stickyInner : void 0, children: headingContent })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.Box, { className: SplitSection_default.contentSide, children })
+      ] }) })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedCounter,
+  AnimatedWaveform,
+  AudioPlayer,
+  AudioWaveform,
+  CodeBlock,
+  ColorPalette,
+  ColorSwatch,
+  Copyable,
+  DosDonts,
+  ExpandableCard,
+  FadeInSection,
+  FrequencyWave,
+  GradientSwatch,
+  Hero,
+  HintBadge,
+  MiniAudioPlayer,
+  PrincipleCard,
+  SpeedDial,
+  SplitSection,
+  VideoBackground
+});