@frequencyads/components 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -1,10 +1,10 @@
 'use client';
-import { useMantineColorScheme as Le, Anchor as Se, Text as v, Box as x, Container as Ge, Title as se, SimpleGrid as re, Card as _e, Stack as Y, Group as z, Image as te, Paper as K, ThemeIcon as Re, Badge as Pe, Avatar as qe, Button as ae, Portal as Oe, Notification as Ve, useComputedColorScheme as He, ActionIcon as Z, Slider as Ue, Transition as Xe, Tooltip as Ye } from "@mantine/core";
-import { Anchor as Lo, Badge as So, Box as Po, Button as Eo, Card as Fo, Container as Wo, Divider as Ao, Flex as jo, Grid as Go, Group as Ro, Image as qo, SimpleGrid as Oo, Stack as Vo, Text as Ho, Title as Uo } from "@mantine/core";
-import { jsx as e, jsxs as l, Fragment as Ee } from "react/jsx-runtime";
+import { useMantineColorScheme as Le, Anchor as Se, Text as v, Box as x, Container as Ge, Title as te, SimpleGrid as se, Card as _e, Stack as A, Group as I, Image as oe, Paper as X, ThemeIcon as Pe, Button as J, Badge as Ee, Avatar as Re, Portal as Oe, Notification as Ve, useComputedColorScheme as He, ActionIcon as ee, Slider as Ue, Transition as Xe, Tooltip as Ye } from "@mantine/core";
+import { Anchor as So, AspectRatio as Po, Badge as Eo, Box as Fo, Button as Wo, Card as qo, Center as Ao, Container as jo, Divider as Go, Flex as Ro, Grid as Oo, Group as Vo, Image as Ho, Paper as Uo, SimpleGrid as Xo, Stack as Yo, Text as Ko, ThemeIcon as Jo, Title as Qo } from "@mantine/core";
+import { jsx as e, jsxs as l, Fragment as Fe } from "react/jsx-runtime";
 import { fonts as be } from "@frequencyads/brand/typography";
-import { useRef as A, useState as T, useEffect as S, forwardRef as Fe, useImperativeHandle as Ke, useCallback as L } from "react";
-import { IconX as Je, IconCheck as Qe, IconQuote as Ze, IconPlayerPauseFilled as We, IconPlayerPlayFilled as Ae, IconVolumeOff as et, IconVolume as tt, IconDownload as nt, IconPlus as ve } from "@tabler/icons-react";
+import { useRef as q, useState as T, useEffect as S, forwardRef as We, useImperativeHandle as Ke, useCallback as L } from "react";
+import { IconX as Je, IconCheck as Qe, IconQuote as Ze, IconPlayerPauseFilled as qe, IconPlayerPlayFilled as Ae, IconVolumeOff as et, IconVolume as tt, IconDownload as nt, IconPlus as ve } from "@tabler/icons-react";
 import { motion as D } from "framer-motion";
 import ot from "@frequencyads/brand/assets/frequency-mark-white.svg";
 import { gradients as rt } from "@frequencyads/brand/colors";
@@ -14,15 +14,15 @@ const at = "_container_4mojd_1", st = "_appName_4mojd_7", ye = {
 };
 function uo({
   appName: t,
-  textColor: o,
-  href: a = "/",
-  ...r
+  textColor: n,
+  href: r = "/",
+  ...a
 }) {
-  const { colorScheme: s } = Le(), y = s === "dark" ? "dark.0" : "gray.9";
+  const { colorScheme: s } = Le(), _ = s === "dark" ? "dark.0" : "gray.9";
   return /* @__PURE__ */ e(
     Se,
     {
-      href: a,
+      href: r,
       className: ye.container,
       underline: "never",
       style: {
@@ -30,8 +30,8 @@ function uo({
         "--heading-font-family": be.heading.family,
         "--heading-font-weight-semibold": be.heading.weights.semibold
       },
-      ...r,
-      children: /* @__PURE__ */ e(v, { className: ye.appName, c: o ?? y, children: t })
+      ...a,
+      children: /* @__PURE__ */ e(v, { className: ye.appName, c: n ?? _, children: t })
     }
   );
 }
@@ -41,33 +41,33 @@ const it = "_root_6irix_1", lt = "_visible_6irix_9", ke = {
 };
 function ce({
   children: t,
-  delay: o = 0,
-  threshold: a = 0.1,
-  className: r,
+  delay: n = 0,
+  threshold: r = 0.1,
+  className: a,
   ...s
 }) {
-  const u = A(null), [y, _] = T(!1);
+  const h = q(null), [_, g] = T(!1);
   return S(() => {
-    const g = u.current;
-    if (!g) return;
+    const p = h.current;
+    if (!p) return;
     const m = new IntersectionObserver(
-      ([h]) => {
-        h.isIntersecting && (o > 0 ? setTimeout(() => _(!0), o) : _(!0));
+      ([u]) => {
+        u.isIntersecting && (n > 0 ? setTimeout(() => g(!0), n) : g(!0));
       },
-      { threshold: a }
+      { threshold: r }
     );
-    return m.observe(g), () => m.disconnect();
-  }, [o, a]), /* @__PURE__ */ e(
+    return m.observe(p), () => m.disconnect();
+  }, [n, r]), /* @__PURE__ */ e(
     x,
     {
-      ref: u,
-      className: `${ke.root} ${y ? ke.visible : ""} ${r ?? ""}`,
+      ref: h,
+      className: `${ke.root} ${_ ? ke.visible : ""} ${a ?? ""}`,
       ...s,
       children: t
     }
   );
 }
-const ct = "_root_1bo86_1", dt = "_label_1bo86_6", mt = "_title_1bo86_11", ht = "_description_1bo86_17", ut = "_logoCard_1bo86_22", Q = {
+const ct = "_root_1bo86_1", dt = "_label_1bo86_6", mt = "_title_1bo86_11", ht = "_description_1bo86_17", ut = "_logoCard_1bo86_22", Z = {
   root: ct,
   label: dt,
   title: mt,
@@ -76,19 +76,19 @@ const ct = "_root_1bo86_1", dt = "_label_1bo86_6", mt = "_title_1bo86_11", ht =
 };
 function go({
   title: t = "Our Logos",
-  label: o = "Identity",
-  description: a = "The Frequency identity comes in two forms — the horizontal textmark for standard use and the circular brand mark for compact spaces and hero moments."
+  label: n = "Identity",
+  description: r = "The Frequency identity comes in two forms — the horizontal textmark for standard use and the circular brand mark for compact spaces and hero moments."
 }) {
-  return /* @__PURE__ */ e("section", { className: Q.root, children: /* @__PURE__ */ l(Ge, { size: "xl", children: [
+  return /* @__PURE__ */ e("section", { className: Z.root, children: /* @__PURE__ */ l(Ge, { size: "xl", children: [
     /* @__PURE__ */ l(ce, { children: [
-      /* @__PURE__ */ e(v, { className: Q.label, size: "xs", tt: "uppercase", c: "blue.5", mb: "xs", children: o }),
-      /* @__PURE__ */ e(se, { order: 2, className: Q.title, mb: "lg", children: t }),
-      /* @__PURE__ */ e(v, { className: Q.description, size: "lg", c: "gray.6", mb: 60, maw: 600, children: a })
+      /* @__PURE__ */ e(v, { className: Z.label, size: "xs", tt: "uppercase", c: "blue.5", mb: "xs", children: n }),
+      /* @__PURE__ */ e(te, { order: 2, className: Z.title, mb: "lg", children: t }),
+      /* @__PURE__ */ e(v, { className: Z.description, size: "lg", c: "gray.6", mb: 60, maw: 600, children: r })
     ] }),
-    /* @__PURE__ */ l(re, { cols: { base: 1, lg: 2 }, spacing: 32, mb: 48, children: [
-      /* @__PURE__ */ e(ce, { delay: 100, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Q.logoCard, children: /* @__PURE__ */ l(Y, { gap: 0, children: [
-        /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "white", h: 240, children: /* @__PURE__ */ e(
-          te,
+    /* @__PURE__ */ l(se, { cols: { base: 1, lg: 2 }, spacing: 32, mb: 48, children: [
+      /* @__PURE__ */ e(ce, { delay: 100, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Z.logoCard, children: /* @__PURE__ */ l(A, { gap: 0, children: [
+        /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "white", h: 240, children: /* @__PURE__ */ e(
+          oe,
           {
             src: "/images/Frequency_logo-light.png",
             alt: "Frequency textmark on light",
@@ -96,8 +96,8 @@ function go({
             fit: "contain"
           }
         ) }),
-        /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "gray.9", h: 240, children: /* @__PURE__ */ e(
-          te,
+        /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "gray.9", h: 240, children: /* @__PURE__ */ e(
+          oe,
           {
             src: "/images/Frequency_logo-dark.png",
             alt: "Frequency textmark on dark",
@@ -107,10 +107,10 @@ function go({
         ) }),
         /* @__PURE__ */ e(x, { p: "md", bg: "gray.1", children: /* @__PURE__ */ e(v, { size: "sm", c: "gray.6", fw: 600, ff: "Montserrat, sans-serif", children: "Primary Textmark" }) })
       ] }) }) }),
-      /* @__PURE__ */ e(ce, { delay: 200, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Q.logoCard, children: /* @__PURE__ */ l(Y, { gap: 0, children: [
-        /* @__PURE__ */ l(re, { cols: 3, children: [
-          /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "white", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
-            te,
+      /* @__PURE__ */ e(ce, { delay: 200, children: /* @__PURE__ */ e(_e, { padding: 0, radius: "lg", className: Z.logoCard, children: /* @__PURE__ */ l(A, { gap: 0, children: [
+        /* @__PURE__ */ l(se, { cols: 3, children: [
+          /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "white", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
+            oe,
             {
               src: "/images/new-frequency-logo.png",
               alt: "Brand mark on light",
@@ -119,8 +119,8 @@ function go({
               fit: "contain"
             }
           ) }),
-          /* @__PURE__ */ e(z, { justify: "center", align: "center", bg: "gray.9", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
-            te,
+          /* @__PURE__ */ e(I, { justify: "center", align: "center", bg: "gray.9", style: { aspectRatio: "1/1" }, children: /* @__PURE__ */ e(
+            oe,
             {
               src: "/images/frequency-mark-white.svg",
               alt: "Brand mark on dark",
@@ -130,7 +130,7 @@ function go({
             }
           ) }),
           /* @__PURE__ */ e(
-            z,
+            I,
             {
               justify: "center",
               align: "center",
@@ -139,7 +139,7 @@ function go({
                 background: "linear-gradient(135deg, #169BDE 0%, #7E57C2 100%)"
               },
               children: /* @__PURE__ */ e(
-                te,
+                oe,
                 {
                   src: "/images/frequency-mark-white.svg",
                   alt: "Brand mark on gradient",
@@ -180,7 +180,40 @@ function go({
     ) })
   ] }) });
 }
-const gt = "_root_dzed6_1", pt = "_dont_dzed6_7", ft = "_dontIcon_dzed6_12", _t = "_dontLabel_dzed6_13", bt = "_doIcon_dzed6_22", vt = "_doLabel_dzed6_23", U = {
+function po({
+  title: t,
+  description: n,
+  items: r,
+  buttonText: a,
+  href: s,
+  buttons: h
+}) {
+  return /* @__PURE__ */ e(X, { p: "xl", radius: "md", withBorder: !0, shadow: "sm", h: "100%", children: /* @__PURE__ */ l(A, { gap: "md", justify: "space-between", h: "100%", children: [
+    /* @__PURE__ */ l(A, { gap: "md", children: [
+      /* @__PURE__ */ e(te, { order: 3, size: "h4", children: t }),
+      n && /* @__PURE__ */ e(v, { c: "dimmed", size: "sm", children: n }),
+      r && r.length > 0 && /* @__PURE__ */ e(A, { gap: "xs", children: r.map((_, g) => /* @__PURE__ */ l(I, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
+        /* @__PURE__ */ e(Pe, { color: "gray", size: 6, radius: "xl", mt: 8, style: { flexShrink: 0 }, children: /* @__PURE__ */ e("div", {}) }),
+        /* @__PURE__ */ e(v, { size: "sm", children: _ })
+      ] }, g)) })
+    ] }),
+    /* @__PURE__ */ e(I, { gap: "sm", mt: "md", children: h ? h.map((_, g) => /* @__PURE__ */ e(
+      J,
+      {
+        component: "a",
+        href: _.href,
+        download: !0,
+        size: "md",
+        radius: "md",
+        flex: 1,
+        style: { whiteSpace: "nowrap" },
+        children: _.label
+      },
+      g
+    )) : /* @__PURE__ */ e(J, { component: "a", href: s, download: !0, fullWidth: !0, size: "md", radius: "md", children: a }) })
+  ] }) });
+}
+const gt = "_root_dzed6_1", pt = "_dont_dzed6_7", ft = "_dontIcon_dzed6_12", _t = "_dontLabel_dzed6_13", bt = "_doIcon_dzed6_22", vt = "_doLabel_dzed6_23", Y = {
   root: gt,
   dont: pt,
   dontIcon: ft,
@@ -189,68 +222,68 @@ const gt = "_root_dzed6_1", pt = "_dont_dzed6_7", ft = "_dontIcon_dzed6_12", _t
   doIcon: bt,
   doLabel: vt
 };
-function po({ items: t }) {
-  return /* @__PURE__ */ e("div", { className: U.root, children: t.map((o, a) => /* @__PURE__ */ l(re, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
-    /* @__PURE__ */ l(K, { className: U.dont, p: "md", radius: "md", children: [
-      /* @__PURE__ */ l(z, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(Je, { size: 16, className: U.dontIcon }),
-        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: U.dontLabel, children: "Don't" })
+function fo({ items: t }) {
+  return /* @__PURE__ */ e("div", { className: Y.root, children: t.map((n, r) => /* @__PURE__ */ l(se, { cols: { base: 1, sm: 2 }, spacing: "md", children: [
+    /* @__PURE__ */ l(X, { className: Y.dont, p: "md", radius: "md", children: [
+      /* @__PURE__ */ l(I, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(Je, { size: 16, className: Y.dontIcon }),
+        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: Y.dontLabel, children: "Don't" })
       ] }),
-      /* @__PURE__ */ e(v, { size: "sm", children: o.dont })
+      /* @__PURE__ */ e(v, { size: "sm", children: n.dont })
     ] }),
-    /* @__PURE__ */ l(K, { className: U.do, p: "md", radius: "md", children: [
-      /* @__PURE__ */ l(z, { gap: 6, mb: 6, children: [
-        /* @__PURE__ */ e(Qe, { size: 16, className: U.doIcon }),
-        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: U.doLabel, children: "Do" })
+    /* @__PURE__ */ l(X, { className: Y.do, p: "md", radius: "md", children: [
+      /* @__PURE__ */ l(I, { gap: 6, mb: 6, children: [
+        /* @__PURE__ */ e(Qe, { size: 16, className: Y.doIcon }),
+        /* @__PURE__ */ e(v, { size: "sm", fw: 600, className: Y.doLabel, children: "Do" })
       ] }),
-      /* @__PURE__ */ e(v, { size: "sm", children: o.do })
+      /* @__PURE__ */ e(v, { size: "sm", children: n.do })
     ] })
-  ] }, a)) });
+  ] }, r)) });
 }
 const yt = "_root_xi08i_1", kt = "_inner_xi08i_6", we = {
   root: yt,
   inner: kt
 };
-function fo({
+function _o({
   title: t,
-  description: o,
-  expandedContent: a,
-  icon: r,
+  description: n,
+  expandedContent: r,
+  icon: a,
   color: s = "blue",
-  iconSize: u = "lg",
-  collapsedHeight: y = 120,
-  threshold: _ = 0.5,
-  delay: g = 300,
+  iconSize: h = "lg",
+  collapsedHeight: _ = 120,
+  threshold: g = 0.5,
+  delay: p = 300,
   expanded: m,
-  onExpandedChange: h
+  onExpandedChange: u
 }) {
-  const k = A(null), [i, b] = T(!1), c = m !== void 0, d = c ? m : i;
+  const k = q(null), [i, y] = T(!1), c = m !== void 0, d = c ? m : i;
   return S(() => {
     if (c) return;
     const w = k.current;
     if (!w) return;
-    const n = new IntersectionObserver(
-      ([f]) => {
-        f.isIntersecting && setTimeout(() => {
-          b(!0), h == null || h(!0);
-        }, g);
+    const o = new IntersectionObserver(
+      ([b]) => {
+        b.isIntersecting && setTimeout(() => {
+          y(!0), u == null || u(!0);
+        }, p);
       },
-      { threshold: _ }
+      { threshold: g }
     );
-    return n.observe(w), () => n.disconnect();
-  }, [c, _, g, h]), /* @__PURE__ */ e(
-    K,
+    return o.observe(w), () => o.disconnect();
+  }, [c, g, p, u]), /* @__PURE__ */ e(
+    X,
     {
       ref: k,
       radius: 4,
       className: we.root,
       component: D.div,
-      animate: { height: d ? "auto" : y },
+      animate: { height: d ? "auto" : _ },
       transition: { duration: 0.5, ease: "easeOut" },
-      children: /* @__PURE__ */ e("div", { className: we.inner, children: /* @__PURE__ */ l(z, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
-        /* @__PURE__ */ l(Y, { gap: "xs", style: { flex: 1 }, children: [
+      children: /* @__PURE__ */ e("div", { className: we.inner, children: /* @__PURE__ */ l(I, { align: "flex-start", justify: "space-between", gap: "lg", wrap: "nowrap", children: [
+        /* @__PURE__ */ l(A, { gap: "xs", style: { flex: 1 }, children: [
           /* @__PURE__ */ e(v, { fw: 700, size: "xl", lh: 1.3, children: t }),
-          /* @__PURE__ */ e(v, { size: "md", c: "dimmed", children: o }),
+          /* @__PURE__ */ e(v, { size: "md", c: "dimmed", children: n }),
           /* @__PURE__ */ e(
             D.div,
             {
@@ -261,22 +294,22 @@ function fo({
               },
               transition: { duration: 0.4, delay: 0.2 },
               style: { overflow: "hidden" },
-              children: typeof a == "string" ? /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "sm", children: a }) : a
+              children: typeof r == "string" ? /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "sm", children: r }) : r
             }
           )
         ] }),
-        /* @__PURE__ */ e(D.div, { animate: { scale: d ? 1.1 : 1 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ e(Re, { size: u, radius: 4, color: s, variant: "filled", children: /* @__PURE__ */ e(r, { size: 20, stroke: 1.5 }) }) })
+        /* @__PURE__ */ e(D.div, { animate: { scale: d ? 1.1 : 1 }, transition: { duration: 0.3 }, children: /* @__PURE__ */ e(Pe, { size: h, radius: 4, color: s, variant: "filled", children: /* @__PURE__ */ e(a, { size: 20, stroke: 1.5 }) }) })
       ] }) })
     }
   );
 }
-function xe({ variant: t, children: o }) {
-  const a = t === "do";
+function xe({ variant: t, children: n }) {
+  const r = t === "do";
   return /* @__PURE__ */ l(
-    Pe,
+    Ee,
     {
       variant: "light",
-      color: a ? "green" : "red",
+      color: r ? "green" : "red",
       size: "lg",
       radius: "sm",
       styles: {
@@ -285,11 +318,11 @@ function xe({ variant: t, children: o }) {
       },
       children: [
         /* @__PURE__ */ l("strong", { children: [
-          a ? "Do" : "Don't",
+          r ? "Do" : "Don't",
           ":"
         ] }),
         " ",
-        o
+        n
       ]
     }
   );
@@ -297,18 +330,18 @@ function xe({ variant: t, children: o }) {
 const wt = "_root_1bah1_1", xt = {
   root: wt
 };
-function _o({
+function bo({
   accentColor: t,
-  title: o,
-  description: a,
-  doHint: r,
+  title: n,
+  description: r,
+  doHint: a,
   dontHint: s
 }) {
-  return /* @__PURE__ */ l(K, { className: xt.root, p: "lg", radius: "md", style: { borderLeftColor: t }, children: [
-    /* @__PURE__ */ e(se, { order: 3, size: "h4", mb: "xs", children: o }),
-    /* @__PURE__ */ e(v, { c: "dimmed", children: a }),
-    (r || s) && /* @__PURE__ */ l(z, { gap: "sm", mt: "md", wrap: "wrap", children: [
-      r && /* @__PURE__ */ e(xe, { variant: "do", children: r }),
+  return /* @__PURE__ */ l(X, { className: xt.root, p: "lg", radius: "md", style: { borderLeftColor: t }, children: [
+    /* @__PURE__ */ e(te, { order: 3, size: "h4", mb: "xs", children: n }),
+    /* @__PURE__ */ e(v, { c: "dimmed", children: r }),
+    (a || s) && /* @__PURE__ */ l(I, { gap: "sm", mt: "md", wrap: "wrap", children: [
+      a && /* @__PURE__ */ e(xe, { variant: "do", children: a }),
       s && /* @__PURE__ */ e(xe, { variant: "dont", children: s })
     ] })
   ] });
@@ -318,25 +351,25 @@ const Nt = "_root_ioshc_1", Tt = "_quoteIcon_ioshc_6", Ne = {
   quoteIcon: Tt
 };
 function $t(t) {
-  return t.split(" ").map((o) => o[0]).join("").toUpperCase().slice(0, 2);
+  return t.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
 }
-function bo({
+function vo({
   quote: t,
-  name: o,
-  role: a,
-  company: r,
+  name: n,
+  role: r,
+  company: a,
   avatarSrc: s,
-  accentColor: u = "blue"
+  accentColor: h = "blue"
 }) {
-  const y = `var(--mantine-color-${u}-filled)`;
-  return /* @__PURE__ */ l(K, { className: Ne.root, p: "lg", radius: "md", style: { borderLeftColor: y }, children: [
-    /* @__PURE__ */ e(Ze, { size: 32, className: Ne.quoteIcon, color: y }),
+  const _ = `var(--mantine-color-${h}-filled)`;
+  return /* @__PURE__ */ l(X, { className: Ne.root, p: "lg", radius: "md", style: { borderLeftColor: _ }, children: [
+    /* @__PURE__ */ e(Ze, { size: 32, className: Ne.quoteIcon, color: _ }),
     /* @__PURE__ */ e(v, { fs: "italic", mt: "xs", mb: "md", children: t }),
-    /* @__PURE__ */ l(z, { gap: "sm", children: [
-      /* @__PURE__ */ e(qe, { src: s, alt: o, color: u, radius: "xl", size: "md", children: $t(o) }),
-      /* @__PURE__ */ l(Y, { gap: 0, children: [
-        /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: o }),
-        (a || r) && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: [a, r].filter(Boolean).join(", ") })
+    /* @__PURE__ */ l(I, { gap: "sm", children: [
+      /* @__PURE__ */ e(Re, { src: s, alt: n, color: h, radius: "xl", size: "md", children: $t(n) }),
+      /* @__PURE__ */ l(A, { gap: 0, children: [
+        /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: n }),
+        (r || a) && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: [r, a].filter(Boolean).join(", ") })
       ] })
     ] })
   ] });
@@ -353,56 +386,56 @@ const Ct = "_root_1r7u3_1", It = "_chartWrapper_1r7u3_5", zt = "_circle_1r7u3_9"
   toggleThumbDark: Pt,
   swatch: Et
 };
-function vo() {
-  const [t, o] = T(!1), [a, r] = T(0), s = [
+function yo() {
+  const [t, n] = T(!1), [r, a] = T(0), s = [
     { color: "#5AB267", label: "Success" },
     { color: "#E63459", label: "Error" },
     { color: "#E79E26", label: "Warning" }
   ];
   S(() => {
-    const c = setInterval(() => r((d) => (d + 1) % 3), 2e3);
+    const c = setInterval(() => a((d) => (d + 1) % 3), 2e3);
     return () => clearInterval(c);
   }, []);
-  const u = s[a], y = [
+  const h = s[r], _ = [
     t ? { label: "Dark Backgrounds", pct: 50, color: "#1A1A1A", border: "1px solid #424242" } : { label: "White Backgrounds", pct: 50, color: "#ffffff", border: "1px solid #e3e3e3" },
     { label: "Primary Blue", pct: 20, color: "#169BDE" },
     t ? { label: "Light Text & UI", pct: 15, color: "#f0f0f0", border: "1px solid #bdbdbd" } : { label: "Dark Text & UI", pct: 15, color: "#212121" },
     { label: "Secondary Violet", pct: 10, color: "#7E57C2" },
-    { label: `Semantic (${u.label})`, pct: 5, color: u.color }
-  ], _ = 80, g = 120, m = 120, h = 36, k = 2 * Math.PI * _;
+    { label: `Semantic (${h.label})`, pct: 5, color: h.color }
+  ], g = 80, p = 120, m = 120, u = 36, k = 2 * Math.PI * g;
   let i = 0;
-  const b = y.map((c) => {
+  const y = _.map((c) => {
     const d = c.pct / 100 * k, w = { ...c, dasharray: `${d} ${k - d}`, dashoffset: -i };
     return i += d, w;
   });
-  return /* @__PURE__ */ l(z, { gap: 40, align: "center", my: "xl", className: W.root, children: [
+  return /* @__PURE__ */ l(I, { gap: 40, align: "center", my: "xl", className: W.root, children: [
     /* @__PURE__ */ e(x, { className: W.chartWrapper, children: /* @__PURE__ */ l("svg", { width: 240, height: 240, viewBox: "0 0 240 240", children: [
-      b.map((c, d) => /* @__PURE__ */ e(
+      y.map((c, d) => /* @__PURE__ */ e(
         "circle",
         {
-          cx: g,
+          cx: p,
           cy: m,
-          r: _,
+          r: g,
           fill: "none",
           stroke: c.color,
-          strokeWidth: h,
+          strokeWidth: u,
           strokeDasharray: c.dasharray,
           strokeDashoffset: c.dashoffset,
-          transform: `rotate(-90 ${g} ${m})`,
+          transform: `rotate(-90 ${p} ${m})`,
           className: W.circle
         },
         d
       )),
-      /* @__PURE__ */ l("text", { x: g, y: m + 6, textAnchor: "middle", className: W.centerText, children: [
+      /* @__PURE__ */ l("text", { x: p, y: m + 6, textAnchor: "middle", className: W.centerText, children: [
         t ? "Dark" : "Light",
         " Mode"
       ] })
     ] }) }),
-    /* @__PURE__ */ l(Y, { gap: "lg", children: [
+    /* @__PURE__ */ l(A, { gap: "lg", children: [
       /* @__PURE__ */ e(
-        ae,
+        J,
         {
-          onClick: () => o(!t),
+          onClick: () => n(!t),
           variant: "default",
           radius: "xl",
           size: "sm",
@@ -411,7 +444,7 @@ function vo() {
           children: t ? "Dark Mode" : "Light Mode"
         }
       ),
-      /* @__PURE__ */ e(Y, { gap: 8, children: y.map((c, d) => /* @__PURE__ */ l(z, { gap: 8, wrap: "nowrap", children: [
+      /* @__PURE__ */ e(A, { gap: 8, children: _.map((c, d) => /* @__PURE__ */ l(I, { gap: 8, wrap: "nowrap", children: [
         /* @__PURE__ */ e(
           x,
           {
@@ -431,22 +464,22 @@ function vo() {
 const Ft = "_root_1bq7s_1", Wt = "_svg_1bq7s_12", Te = {
   root: Ft,
   svg: Wt
-}, At = 140, $e = 3, Ce = 10, je = 150, X = je / 2;
+}, qt = 140, $e = 3, Ce = 10, je = 150, K = je / 2;
 function Ie({
-  barCount: t = At,
-  duration: o = 3,
-  repeatDelay: a = 3
+  barCount: t = qt,
+  duration: n = 3,
+  repeatDelay: r = 3
 }) {
-  const [r, s] = T(!1);
+  const [a, s] = T(!1);
   if (S(() => {
     s(!0);
-  }, []), !r) return null;
-  const u = t * Ce;
+  }, []), !a) return null;
+  const h = t * Ce;
   return /* @__PURE__ */ e("div", { className: Te.root, children: /* @__PURE__ */ l(
     "svg",
     {
       className: Te.svg,
-      viewBox: `0 0 ${u} ${je}`,
+      viewBox: `0 0 ${h} ${je}`,
       preserveAspectRatio: "none",
       children: [
         /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l("linearGradient", { id: "waveformBarGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
@@ -456,17 +489,17 @@ function Ie({
           /* @__PURE__ */ e("stop", { offset: "85%", stopColor: "white", stopOpacity: "0.15" }),
           /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "white", stopOpacity: "0" })
         ] }) }),
-        [...Array(t)].map((y, _) => {
-          const g = _ * Ce, m = 18 + Math.sin(_ * 0.4) * 6 + Math.cos(_ * 0.7) * 4, h = Math.min(_, t - 1 - _) * 0.04;
+        [...Array(t)].map((_, g) => {
+          const p = g * Ce, m = 18 + Math.sin(g * 0.4) * 6 + Math.cos(g * 0.7) * 4, u = Math.min(g, t - 1 - g) * 0.04;
           return /* @__PURE__ */ l("g", { children: [
             /* @__PURE__ */ e(
               D.rect,
               {
-                x: g,
+                x: p,
                 width: $e,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
-                initial: { height: m / 2, y: X - m / 4 },
+                initial: { height: m / 2, y: K - m / 4 },
                 animate: {
                   height: [
                     m / 2,
@@ -476,27 +509,27 @@ function Ie({
                     m / 2
                   ],
                   y: [
-                    X - m / 4,
-                    X - m,
-                    X - m / 4,
-                    X - m * 0.6,
-                    X - m / 4
+                    K - m / 4,
+                    K - m,
+                    K - m / 4,
+                    K - m * 0.6,
+                    K - m / 4
                   ]
                 },
                 transition: {
-                  duration: o,
+                  duration: n,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: h,
-                  repeatDelay: a
+                  delay: u,
+                  repeatDelay: r
                 }
               }
             ),
             /* @__PURE__ */ e(
               D.rect,
               {
-                x: g,
-                y: X,
+                x: p,
+                y: K,
                 width: $e,
                 rx: "1.5",
                 fill: "url(#waveformBarGradient)",
@@ -511,187 +544,187 @@ function Ie({
                   ]
                 },
                 transition: {
-                  duration: o,
+                  duration: n,
                   repeat: 1 / 0,
                   ease: "easeInOut",
-                  delay: h,
-                  repeatDelay: a
+                  delay: u,
+                  repeatDelay: r
                 }
               }
             )
-          ] }, _);
+          ] }, g);
         })
       ]
     }
   ) });
 }
-const jt = "_root_1pkxe_1", Gt = "_progressOverlay_1pkxe_9", Rt = "_bars_1pkxe_19", qt = "_bar_1pkxe_19", Ot = "_loading_1pkxe_34", ne = {
-  root: jt,
-  progressOverlay: Gt,
-  bars: Rt,
-  bar: qt,
+const At = "_root_1pkxe_1", jt = "_progressOverlay_1pkxe_9", Gt = "_bars_1pkxe_19", Rt = "_bar_1pkxe_19", Ot = "_loading_1pkxe_34", re = {
+  root: At,
+  progressOverlay: jt,
+  bars: Gt,
+  bar: Rt,
   loading: Ot
 };
 function Vt(t = 100) {
-  const o = [];
-  for (let a = 0; a < t; a++) {
-    const r = a / (t - 1), s = 20 + Math.sin(a * 0.1) * 15, u = (Math.random() - 0.5) * 20, y = Math.sin(r * Math.PI) * 30, _ = r > 0.2 && r < 0.8 ? Math.random() * 10 : 0, g = r < 0.05 || r > 0.95 ? Math.min(r / 0.05, (1 - r) / 0.05) : 1;
-    o.push(Math.max(5, Math.min(90, (s + u + y + _) * g)));
+  const n = [];
+  for (let r = 0; r < t; r++) {
+    const a = r / (t - 1), s = 20 + Math.sin(r * 0.1) * 15, h = (Math.random() - 0.5) * 20, _ = Math.sin(a * Math.PI) * 30, g = a > 0.2 && a < 0.8 ? Math.random() * 10 : 0, p = a < 0.05 || a > 0.95 ? Math.min(a / 0.05, (1 - a) / 0.05) : 1;
+    n.push(Math.max(5, Math.min(90, (s + h + _ + g) * p)));
   }
-  return o;
+  return n;
 }
-const fe = Fe(
+const fe = We(
   ({
     audioRef: t,
-    currentTime: o = 0,
-    onSeek: a,
-    loading: r = !1,
+    currentTime: n = 0,
+    onSeek: r,
+    loading: a = !1,
     waveColor: s = "#CCCCCC",
-    progressColor: u = "#169bde",
-    height: y = 60,
-    barWidth: _ = 2,
-    barGap: g = 1
+    progressColor: h = "#169bde",
+    height: _ = 60,
+    barWidth: g = 2,
+    barGap: p = 1
   }, m) => {
-    const h = A(null), [k] = T(() => Vt()), [i, b] = T(0), [c, d] = T(0);
+    const u = q(null), [k] = T(() => Vt()), [i, y] = T(0), [c, d] = T(0);
     Ke(m, () => ({
-      seekTo: (n) => {
-        i > 0 && d(Math.max(0, Math.min(100, n / i * 100)));
+      seekTo: (o) => {
+        i > 0 && d(Math.max(0, Math.min(100, o / i * 100)));
       },
       getCurrentTime: () => c / 100 * i,
       getDuration: () => i
     })), S(() => {
-      const n = t.current;
-      if (!n) return;
-      const f = () => {
-        n.duration && !isNaN(n.duration) && b(n.duration);
+      const o = t.current;
+      if (!o) return;
+      const b = () => {
+        o.duration && !isNaN(o.duration) && y(o.duration);
       }, N = () => {
-        n.duration > 0 && d(n.currentTime / n.duration * 100);
+        o.duration > 0 && d(o.currentTime / o.duration * 100);
       };
-      return n.duration && !isNaN(n.duration) && b(n.duration), n.addEventListener("loadedmetadata", f), n.addEventListener("timeupdate", N), () => {
-        n.removeEventListener("loadedmetadata", f), n.removeEventListener("timeupdate", N);
+      return o.duration && !isNaN(o.duration) && y(o.duration), o.addEventListener("loadedmetadata", b), o.addEventListener("timeupdate", N), () => {
+        o.removeEventListener("loadedmetadata", b), o.removeEventListener("timeupdate", N);
       };
     }, [t]), S(() => {
-      i > 0 && typeof o == "number" && d(o / i * 100);
-    }, [o, i]);
+      i > 0 && typeof n == "number" && d(n / i * 100);
+    }, [n, i]);
     const w = L(
-      (n) => {
-        if (!h.current || !a || i === 0) return;
-        const f = h.current.getBoundingClientRect(), N = (n.clientX - f.left) / f.width * i;
-        a(N);
+      (o) => {
+        if (!u.current || !r || i === 0) return;
+        const b = u.current.getBoundingClientRect(), N = (o.clientX - b.left) / b.width * i;
+        r(N);
       },
-      [a, i]
+      [r, i]
     );
-    return /* @__PURE__ */ l(x, { ref: h, className: ne.root, style: { height: y }, onClick: w, children: [
+    return /* @__PURE__ */ l(x, { ref: u, className: re.root, style: { height: _ }, onClick: w, children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: ne.progressOverlay,
-          style: { width: `${c}%`, backgroundColor: `${u}15` }
+          className: re.progressOverlay,
+          style: { width: `${c}%`, backgroundColor: `${h}15` }
         }
       ),
-      /* @__PURE__ */ e("div", { className: ne.bars, style: { gap: g }, children: k.map((n, f) => {
-        const N = f / k.length * 100 <= c;
+      /* @__PURE__ */ e("div", { className: re.bars, style: { gap: p }, children: k.map((o, b) => {
+        const N = b / k.length * 100 <= c;
         return /* @__PURE__ */ e(
           "div",
           {
-            className: ne.bar,
+            className: re.bar,
             style: {
-              width: _,
-              height: `${n}%`,
-              backgroundColor: N ? u : s
+              width: g,
+              height: `${o}%`,
+              backgroundColor: N ? h : s
             }
           },
-          f
+          b
         );
       }) }),
-      r && /* @__PURE__ */ e("div", { className: ne.loading, children: "Loading waveform..." })
+      a && /* @__PURE__ */ e("div", { className: re.loading, children: "Loading waveform..." })
     ] });
   }
 );
 fe.displayName = "AudioWaveform";
-function yo({ isActive: t = !1, height: o = 60 }) {
-  const a = A(null), r = A(void 0), [s, u] = T(!1), y = A(null), _ = A(null), { colorScheme: g } = Le(), m = g === "dark", h = {
+function ko({ isActive: t = !1, height: n = 60 }) {
+  const r = q(null), a = q(void 0), [s, h] = T(!1), _ = q(null), g = q(null), { colorScheme: p } = Le(), m = p === "dark", u = {
     start: m ? "#7950F2" : "#9775FA",
     mid: m ? "#BE4BDB" : "#DA77F2",
     end: m ? "#15AABF" : "#22B8CF"
   }, k = L(
-    (i, b, c, d) => {
-      i.clearRect(0, 0, b, c);
-      const w = t || s, n = c * 0.65, f = t ? 5 : s ? 7 : 1.5;
-      w && (_.current === null && (_.current = Math.random()), Math.floor(d / 500) !== Math.floor((d - 16) / 500) && (_.current = Math.random()));
-      const N = i.createLinearGradient(0, 0, b, 0);
-      N.addColorStop(0, h.start), N.addColorStop(0.5, h.mid), N.addColorStop(1, h.end), i.strokeStyle = N, i.lineWidth = w ? 2.5 : 1.5, i.lineCap = "round", i.lineJoin = "round", w ? (i.shadowColor = h.mid, i.shadowBlur = s ? 12 : 8) : i.shadowBlur = 0, i.beginPath();
-      const P = 300, q = b / P, O = t ? 0.02 : s ? 0.025 : 3e-3;
+    (i, y, c, d) => {
+      i.clearRect(0, 0, y, c);
+      const w = t || s, o = c * 0.65, b = t ? 5 : s ? 7 : 1.5;
+      w && (g.current === null && (g.current = Math.random()), Math.floor(d / 500) !== Math.floor((d - 16) / 500) && (g.current = Math.random()));
+      const N = i.createLinearGradient(0, 0, y, 0);
+      N.addColorStop(0, u.start), N.addColorStop(0.5, u.mid), N.addColorStop(1, u.end), i.strokeStyle = N, i.lineWidth = w ? 2.5 : 1.5, i.lineCap = "round", i.lineJoin = "round", w ? (i.shadowColor = u.mid, i.shadowBlur = s ? 12 : 8) : i.shadowBlur = 0, i.beginPath();
+      const P = 300, O = y / P, V = t ? 0.02 : s ? 0.025 : 3e-3;
       for (let j = 0; j <= P; j++) {
-        const M = j * q, C = M / b;
-        let F = n;
+        const M = j * O, C = M / y;
+        let F = o;
         if (w) {
-          const G = Math.sin(C * Math.PI * 6 + d * O) * f, V = Math.sin(C * Math.PI * 12 + d * O * 1.3) * (f * 0.4), H = Math.sin(C * Math.PI * 18 + d * O * 0.8) * (f * 0.2), ee = _.current ?? 0.5, p = Math.abs(C - ee), $ = p < 0.15 ? (1 - p / 0.15) * f * 1 : 0, B = Math.sin(C * Math.PI * 20 + d * O * 2) * $;
-          let J = 0;
-          s && (J = Math.sin(C * Math.PI * 30 + d * 0.03) * f * 0.4, J += Math.sin(C * Math.PI * 8 + d * 0.015) * f * 0.5);
-          const ie = G + V + H + B + J, le = Math.sin(C * Math.PI);
-          F = n + ie * le;
+          const G = Math.sin(C * Math.PI * 6 + d * V) * b, H = Math.sin(C * Math.PI * 12 + d * V * 1.3) * (b * 0.4), U = Math.sin(C * Math.PI * 18 + d * V * 0.8) * (b * 0.2), ne = g.current ?? 0.5, f = Math.abs(C - ne), $ = f < 0.15 ? (1 - f / 0.15) * b * 1 : 0, B = Math.sin(C * Math.PI * 20 + d * V * 2) * $;
+          let Q = 0;
+          s && (Q = Math.sin(C * Math.PI * 30 + d * 0.03) * b * 0.4, Q += Math.sin(C * Math.PI * 8 + d * 0.015) * b * 0.5);
+          const ie = G + H + U + B + Q, le = Math.sin(C * Math.PI);
+          F = o + ie * le;
         } else
-          F += Math.sin(C * Math.PI * 2 + d * O) * f;
+          F += Math.sin(C * Math.PI * 2 + d * V) * b;
         j === 0 ? i.moveTo(M, F) : i.lineTo(M, F);
       }
       if (i.stroke(), t) {
-        const C = b / 80, F = 16;
+        const C = y / 80, F = 16;
         i.shadowBlur = 3;
         for (let G = 0; G < 80; G++) {
-          const V = G * C + C / 2, H = V / b, ee = Math.sin(H * Math.PI * 8 + d * 0.025) * 0.5 + Math.sin(H * Math.PI * 14 + d * 0.018) * 0.3 + Math.sin(H * Math.PI * 4 + d * 0.03) * 0.2, p = Math.sin(H * Math.PI), $ = Math.abs(ee) * F * p, B = i.createLinearGradient(
-            V,
-            n - $ / 2,
-            V,
-            n + $ / 2
+          const H = G * C + C / 2, U = H / y, ne = Math.sin(U * Math.PI * 8 + d * 0.025) * 0.5 + Math.sin(U * Math.PI * 14 + d * 0.018) * 0.3 + Math.sin(U * Math.PI * 4 + d * 0.03) * 0.2, f = Math.sin(U * Math.PI), $ = Math.abs(ne) * F * f, B = i.createLinearGradient(
+            H,
+            o - $ / 2,
+            H,
+            o + $ / 2
           );
-          B.addColorStop(0, h.start + "90"), B.addColorStop(0.5, h.mid + "70"), B.addColorStop(1, h.end + "50"), i.fillStyle = B, i.fillRect(V - 2 / 2, n - $ / 2, 2, $);
+          B.addColorStop(0, u.start + "90"), B.addColorStop(0.5, u.mid + "70"), B.addColorStop(1, u.end + "50"), i.fillStyle = B, i.fillRect(H - 2 / 2, o - $ / 2, 2, $);
         }
       }
       if (s)
         for (let M = 0; M < 15; M++) {
-          const C = (Math.sin(d * 1e-3 + M * 1.5) * 0.5 + 0.5) * b, F = n + Math.sin(d * 2e-3 + M) * 8, G = 1.5 + Math.sin(d * 3e-3 + M * 2) * 0.5;
-          i.beginPath(), i.arc(C, F, G, 0, Math.PI * 2), i.fillStyle = M % 2 === 0 ? h.start + "80" : h.end + "80", i.fill();
+          const C = (Math.sin(d * 1e-3 + M * 1.5) * 0.5 + 0.5) * y, F = o + Math.sin(d * 2e-3 + M) * 8, G = 1.5 + Math.sin(d * 3e-3 + M * 2) * 0.5;
+          i.beginPath(), i.arc(C, F, G, 0, Math.PI * 2), i.fillStyle = M % 2 === 0 ? u.start + "80" : u.end + "80", i.fill();
         }
     },
-    [t, s, h.start, h.mid, h.end]
+    [t, s, u.start, u.mid, u.end]
   );
   return S(() => {
-    const i = a.current;
+    const i = r.current;
     if (!i) return;
-    const b = i.getContext("2d");
-    if (!b) return;
+    const y = i.getContext("2d");
+    if (!y) return;
     const c = () => {
-      const n = window.devicePixelRatio || 1, f = i.getBoundingClientRect();
-      i.width = f.width * n, i.height = f.height * n, b.scale(n, n);
+      const o = window.devicePixelRatio || 1, b = i.getBoundingClientRect();
+      i.width = b.width * o, i.height = b.height * o, y.scale(o, o);
     };
     c(), window.addEventListener("resize", c);
-    const d = performance.now(), w = (n) => {
-      const f = n - d, N = i.getBoundingClientRect();
-      k(b, N.width, N.height, f), r.current = requestAnimationFrame(w);
+    const d = performance.now(), w = (o) => {
+      const b = o - d, N = i.getBoundingClientRect();
+      k(y, N.width, N.height, b), a.current = requestAnimationFrame(w);
     };
-    return r.current = requestAnimationFrame(w), () => {
-      window.removeEventListener("resize", c), r.current && cancelAnimationFrame(r.current);
+    return a.current = requestAnimationFrame(w), () => {
+      window.removeEventListener("resize", c), a.current && cancelAnimationFrame(a.current);
     };
   }, [k]), S(() => {
     if (t) {
-      queueMicrotask(() => u(!1)), y.current = Date.now();
+      queueMicrotask(() => h(!1)), _.current = Date.now();
       return;
     }
-    const b = setInterval(() => {
+    const y = setInterval(() => {
       const c = Date.now();
-      y.current === null && (y.current = c);
-      const d = c - y.current, w = 12e4 + Math.random() * 6e4;
-      d >= w && !s && (u(!0), y.current = c, setTimeout(() => u(!1), 4e3));
+      _.current === null && (_.current = c);
+      const d = c - _.current, w = 12e4 + Math.random() * 6e4;
+      d >= w && !s && (h(!0), _.current = c, setTimeout(() => h(!1), 4e3));
     }, 5e3);
-    return () => clearInterval(b);
+    return () => clearInterval(y);
   }, [t, s]), /* @__PURE__ */ e(
     x,
     {
       style: {
         position: "relative",
         width: "100%",
-        height: o,
+        height: n,
         overflow: "hidden",
         pointerEvents: "none",
         opacity: m ? 1 : 0.8
@@ -699,7 +732,7 @@ function yo({ isActive: t = !1, height: o = 60 }) {
       children: /* @__PURE__ */ e(
         "canvas",
         {
-          ref: a,
+          ref: r,
           style: {
             width: "100%",
             height: "100%",
@@ -714,22 +747,22 @@ const Ht = "_root_1vlvy_1", Ut = "_video_1vlvy_9", ze = {
   root: Ht,
   video: Ut
 };
-function Xt({ src: t, opacity: o = 0.3 }) {
-  return /* @__PURE__ */ e("div", { className: ze.root, style: { opacity: o }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: ze.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
+function Xt({ src: t, opacity: n = 0.3 }) {
+  return /* @__PURE__ */ e("div", { className: ze.root, style: { opacity: n }, children: /* @__PURE__ */ e("video", { autoPlay: !0, muted: !0, loop: !0, playsInline: !0, className: ze.video, children: /* @__PURE__ */ e("source", { src: t, type: "video/mp4" }) }) });
 }
 const Yt = "_root_ix1b2_1", Kt = "_toast_ix1b2_5", Me = {
   root: Yt,
   toast: Kt
 };
-function he({ value: t, children: o }) {
-  const [a, r] = T(null), s = L(() => {
+function he({ value: t, children: n }) {
+  const [r, a] = T(null), s = L(() => {
     navigator.clipboard.writeText(t).then(() => {
-      r(`Copied ${t}`), setTimeout(() => r(null), 1800);
+      a(`Copied ${t}`), setTimeout(() => a(null), 1800);
     });
   }, [t]);
-  return /* @__PURE__ */ l(Ee, { children: [
-    /* @__PURE__ */ e("span", { onClick: s, className: Me.root, title: `Click to copy ${t}`, children: o }),
-    a && /* @__PURE__ */ e(Oe, { children: /* @__PURE__ */ e(Ve, { withCloseButton: !1, className: Me.toast, color: "blue", children: a }) })
+  return /* @__PURE__ */ l(Fe, { children: [
+    /* @__PURE__ */ e("span", { onClick: s, className: Me.root, title: `Click to copy ${t}`, children: n }),
+    r && /* @__PURE__ */ e(Oe, { children: /* @__PURE__ */ e(Ve, { withCloseButton: !1, className: Me.toast, color: "blue", children: r }) })
   ] });
 }
 const Jt = "_root_3ht5s_1", Qt = "_shade_3ht5s_5", Zt = "_color_3ht5s_10", en = "_main_3ht5s_20", de = {
@@ -738,19 +771,19 @@ const Jt = "_root_3ht5s_1", Qt = "_shade_3ht5s_5", Zt = "_color_3ht5s_10", en =
   color: Zt,
   main: en
 };
-function ko({ name: t, shades: o, mainIndex: a = 5 }) {
+function wo({ name: t, shades: n, mainIndex: r = 5 }) {
   return /* @__PURE__ */ l("div", { className: de.root, children: [
-    /* @__PURE__ */ e(se, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
-    /* @__PURE__ */ e(re, { cols: 10, spacing: 4, children: o.map((r, s) => /* @__PURE__ */ e(he, { value: r, children: /* @__PURE__ */ l("div", { className: de.shade, children: [
+    /* @__PURE__ */ e(te, { order: 4, size: "lg", tt: "capitalize", mb: "xs", children: t }),
+    /* @__PURE__ */ e(se, { cols: 10, spacing: 4, children: n.map((a, s) => /* @__PURE__ */ e(he, { value: a, children: /* @__PURE__ */ l("div", { className: de.shade, children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: `${de.color} ${s === a ? de.main : ""}`,
-          style: { backgroundColor: r }
+          className: `${de.color} ${s === r ? de.main : ""}`,
+          style: { backgroundColor: a }
         }
       ),
       /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ta: "center", mt: 4, children: s }),
-      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: r })
+      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ta: "center", ff: "monospace", children: a })
     ] }) }, s)) })
   ] });
 }
@@ -759,13 +792,13 @@ const tn = "_root_1vxkx_1", nn = "_preview_1vxkx_11", on = "_info_1vxkx_15", ue
   preview: nn,
   info: on
 };
-function wo({ name: t, hex: o, label: a }) {
-  return /* @__PURE__ */ e(he, { value: o, children: /* @__PURE__ */ l(K, { className: ue.root, shadow: "lg", radius: "md", withBorder: !1, children: [
-    /* @__PURE__ */ e("div", { className: ue.preview, style: { backgroundColor: o } }),
+function xo({ name: t, hex: n, label: r }) {
+  return /* @__PURE__ */ e(he, { value: n, children: /* @__PURE__ */ l(X, { className: ue.root, shadow: "lg", radius: "md", withBorder: !1, children: [
+    /* @__PURE__ */ e("div", { className: ue.preview, style: { backgroundColor: n } }),
     /* @__PURE__ */ l("div", { className: ue.info, children: [
       /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: t }),
-      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ff: "monospace", children: o }),
-      a && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: a })
+      /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", ff: "monospace", children: n }),
+      r && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: r })
     ] })
   ] }) });
 }
@@ -774,17 +807,17 @@ const rn = "_root_9li00_1", an = "_preview_9li00_11", sn = "_info_9li00_15", ge
   preview: an,
   info: sn
 };
-function xo({ name: t, colors: o, description: a }) {
-  const r = `linear-gradient(135deg, ${o[0]} 0%, ${o[1]} 100%)`;
-  return /* @__PURE__ */ e(he, { value: r, children: /* @__PURE__ */ l(K, { className: ge.root, shadow: "lg", radius: "md", children: [
-    /* @__PURE__ */ e("div", { className: ge.preview, style: { background: r } }),
+function No({ name: t, colors: n, description: r }) {
+  const a = `linear-gradient(135deg, ${n[0]} 0%, ${n[1]} 100%)`;
+  return /* @__PURE__ */ e(he, { value: a, children: /* @__PURE__ */ l(X, { className: ge.root, shadow: "lg", radius: "md", children: [
+    /* @__PURE__ */ e("div", { className: ge.preview, style: { background: a } }),
     /* @__PURE__ */ l("div", { className: ge.info, children: [
       /* @__PURE__ */ e(v, { fw: 600, size: "sm", children: t }),
-      a && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: a }),
+      r && /* @__PURE__ */ e(v, { size: "xs", c: "dimmed", children: r }),
       /* @__PURE__ */ l(v, { size: "xs", c: "dimmed", ff: "monospace", children: [
-        o[0],
+        n[0],
         " → ",
-        o[1]
+        n[1]
       ] })
     ] })
   ] }) });
@@ -800,10 +833,10 @@ const ln = "_toggle_1nlbe_1", cn = "_toggleTrack_1nlbe_7", dn = "_toggleTrackDar
   sampleText: pn,
   details: fn
 };
-function No() {
-  const [t, o] = T(!1);
+function To() {
+  const [t, n] = T(!1);
   He("light");
-  const a = {
+  const r = {
     light: {
       bg: "#FFFFFF",
       border: "1px solid #e3e3e3",
@@ -822,12 +855,12 @@ function No() {
         { name: "Disabled Text", hex: "#424242", label: "gray[8]" }
       ]
     }
-  }, r = t ? a.dark : a.light;
+  }, a = t ? r.dark : r.light;
   return /* @__PURE__ */ l(x, { my: "xl", children: [
     /* @__PURE__ */ e(x, { mb: "lg", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
-      ae,
+      J,
       {
-        onClick: () => o(!t),
+        onClick: () => n(!t),
         variant: "default",
         radius: "xl",
         size: "sm",
@@ -836,12 +869,12 @@ function No() {
         children: t ? "Dark Mode" : "Light Mode"
       }
     ) }),
-    /* @__PURE__ */ e(re, { cols: { base: 1, md: 3 }, spacing: "lg", children: r.colors.map((s) => /* @__PURE__ */ e(he, { value: s.hex, children: /* @__PURE__ */ l(x, { className: R.card, children: [
+    /* @__PURE__ */ e(se, { cols: { base: 1, md: 3 }, spacing: "lg", children: a.colors.map((s) => /* @__PURE__ */ e(he, { value: s.hex, children: /* @__PURE__ */ l(x, { className: R.card, children: [
       /* @__PURE__ */ e(
         x,
         {
           className: R.preview,
-          style: { backgroundColor: r.bg, border: r.border },
+          style: { backgroundColor: a.bg, border: a.border },
           children: /* @__PURE__ */ e(v, { style: { color: s.hex }, className: R.sampleText, children: "Aa" })
         }
       ),
@@ -853,85 +886,85 @@ function No() {
     ] }) }, s.name + s.hex)) })
   ] });
 }
-const _n = "_root_n9zxy_1", bn = "_playButton_n9zxy_8", vn = "_time_n9zxy_22", yn = "_volumeGroup_n9zxy_28", oe = {
+const _n = "_root_n9zxy_1", bn = "_playButton_n9zxy_8", vn = "_time_n9zxy_22", yn = "_volumeGroup_n9zxy_28", ae = {
   root: _n,
   playButton: bn,
   time: vn,
   volumeGroup: yn
 };
 function pe(t) {
-  const o = Math.floor(t / 60), a = Math.floor(t % 60);
-  return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
+  const n = Math.floor(t / 60), r = Math.floor(t % 60);
+  return `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
 }
-function To({
+function $o({
   src: t,
-  filename: o = "audio",
-  playButtonColor: a,
-  playButtonSize: r = 32,
+  filename: n = "audio",
+  playButtonColor: r,
+  playButtonSize: a = 32,
   waveColor: s = "#D0D0D0",
-  progressColor: u = "#a8a8a8",
-  waveHeight: y = 64,
-  barWidth: _ = 3,
-  barGap: g = 2,
+  progressColor: h = "#a8a8a8",
+  waveHeight: _ = 64,
+  barWidth: g = 3,
+  barGap: p = 2,
   showVolume: m = !0,
-  showDownload: h = !0
+  showDownload: u = !0
 }) {
-  const k = A(null), [i, b] = T(!1), [c, d] = T(0), [w, n] = T("00:00"), [f, N] = T("00:00"), [P, q] = T(50), [O, j] = T(50), [M, C] = T(!1);
+  const k = q(null), [i, y] = T(!1), [c, d] = T(0), [w, o] = T("00:00"), [b, N] = T("00:00"), [P, O] = T(50), [V, j] = T(50), [M, C] = T(!1);
   S(() => {
-    const p = k.current;
-    if (!p) return;
-    p.volume = P / 100;
+    const f = k.current;
+    if (!f) return;
+    f.volume = P / 100;
     const $ = () => {
-      d(p.currentTime), n(pe(p.currentTime));
-    }, B = () => N(pe(p.duration)), J = () => {
+      d(f.currentTime), o(pe(f.currentTime));
+    }, B = () => N(pe(f.duration)), Q = () => {
       setTimeout(() => {
-        d(0), n("00:00"), b(!1);
+        d(0), o("00:00"), y(!1);
       }, 500);
-    }, ie = () => b(!0), le = () => b(!1);
-    return p.addEventListener("timeupdate", $), p.addEventListener("loadedmetadata", B), p.addEventListener("ended", J), p.addEventListener("play", ie), p.addEventListener("pause", le), () => {
-      p.removeEventListener("timeupdate", $), p.removeEventListener("loadedmetadata", B), p.removeEventListener("ended", J), p.removeEventListener("play", ie), p.removeEventListener("pause", le);
+    }, ie = () => y(!0), le = () => y(!1);
+    return f.addEventListener("timeupdate", $), f.addEventListener("loadedmetadata", B), f.addEventListener("ended", Q), f.addEventListener("play", ie), f.addEventListener("pause", le), () => {
+      f.removeEventListener("timeupdate", $), f.removeEventListener("loadedmetadata", B), f.removeEventListener("ended", Q), f.removeEventListener("play", ie), f.removeEventListener("pause", le);
     };
   }, [t]);
   const F = L(() => {
-    const p = k.current;
-    p && (i ? p.pause() : p.play().catch(() => {
+    const f = k.current;
+    f && (i ? f.pause() : f.play().catch(() => {
     }));
-  }, [i]), G = L((p) => {
+  }, [i]), G = L((f) => {
     const $ = k.current;
-    $ && !isNaN(p) && isFinite(p) && ($.currentTime = p, d(p), n(pe(p)));
-  }, []), V = L((p) => {
+    $ && !isNaN(f) && isFinite(f) && ($.currentTime = f, d(f), o(pe(f)));
+  }, []), H = L((f) => {
     const $ = k.current;
-    $ && ($.volume = p / 100, q(p), p > 0 ? (j(p), C(!1)) : C(!0));
-  }, []), H = L(() => {
-    const p = k.current;
-    if (p)
+    $ && ($.volume = f / 100, O(f), f > 0 ? (j(f), C(!1)) : C(!0));
+  }, []), U = L(() => {
+    const f = k.current;
+    if (f)
       if (M) {
-        const $ = O || 50;
-        p.volume = $ / 100, q($), C(!1);
+        const $ = V || 50;
+        f.volume = $ / 100, O($), C(!1);
       } else
-        j(P), p.volume = 0, q(0), C(!0);
-  }, [M, P, O]), ee = L(() => {
-    fetch(t).then((p) => p.blob()).then((p) => {
-      const $ = URL.createObjectURL(p), B = document.createElement("a");
-      B.href = $, B.download = o, document.body.appendChild(B), B.click(), document.body.removeChild(B), URL.revokeObjectURL($);
+        j(P), f.volume = 0, O(0), C(!0);
+  }, [M, P, V]), ne = L(() => {
+    fetch(t).then((f) => f.blob()).then((f) => {
+      const $ = URL.createObjectURL(f), B = document.createElement("a");
+      B.href = $, B.download = n, document.body.appendChild(B), B.click(), document.body.removeChild(B), URL.revokeObjectURL($);
     }).catch(() => window.open(t, "_blank"));
-  }, [t, o]);
-  return /* @__PURE__ */ l(z, { gap: "sm", wrap: "nowrap", className: oe.root, children: [
+  }, [t, n]);
+  return /* @__PURE__ */ l(I, { gap: "sm", wrap: "nowrap", className: ae.root, children: [
     /* @__PURE__ */ e("audio", { ref: k, src: t, preload: "metadata" }),
     /* @__PURE__ */ e(
-      Z,
+      ee,
       {
         variant: "filled",
         radius: "xl",
-        size: r,
-        color: a,
+        size: a,
+        color: r,
         onClick: F,
         "aria-label": i ? "Pause" : "Play",
-        className: oe.playButton,
-        children: i ? /* @__PURE__ */ e(We, { size: r * 0.5 }) : /* @__PURE__ */ e(Ae, { size: r * 0.5 })
+        className: ae.playButton,
+        children: i ? /* @__PURE__ */ e(qe, { size: a * 0.5 }) : /* @__PURE__ */ e(Ae, { size: a * 0.5 })
       }
     ),
-    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: oe.time, children: w }),
+    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: ae.time, children: w }),
     /* @__PURE__ */ e(x, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(
       fe,
       {
@@ -939,20 +972,20 @@ function To({
         currentTime: c,
         onSeek: G,
         waveColor: s,
-        progressColor: u,
-        height: y,
-        barWidth: _,
-        barGap: g
+        progressColor: h,
+        height: _,
+        barWidth: g,
+        barGap: p
       }
     ) }),
-    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: oe.time, children: f }),
-    m && /* @__PURE__ */ l(z, { gap: 4, wrap: "nowrap", className: oe.volumeGroup, children: [
+    /* @__PURE__ */ e(v, { size: "xs", ff: "monospace", c: "dimmed", className: ae.time, children: b }),
+    m && /* @__PURE__ */ l(I, { gap: 4, wrap: "nowrap", className: ae.volumeGroup, children: [
       /* @__PURE__ */ e(
-        Z,
+        ee,
         {
           variant: "subtle",
           size: "sm",
-          onClick: H,
+          onClick: U,
           "aria-label": M ? "Unmute" : "Mute",
           children: M ? /* @__PURE__ */ e(et, { size: 16 }) : /* @__PURE__ */ e(tt, { size: 16 })
         }
@@ -961,14 +994,14 @@ function To({
         Ue,
         {
           value: P,
-          onChange: V,
+          onChange: H,
           size: "xs",
           w: 80,
           "aria-label": "Volume"
         }
       )
     ] }),
-    h && /* @__PURE__ */ e(Z, { variant: "subtle", size: "sm", onClick: ee, "aria-label": "Download", children: /* @__PURE__ */ e(nt, { size: 16 }) })
+    u && /* @__PURE__ */ e(ee, { variant: "subtle", size: "sm", onClick: ne, "aria-label": "Download", children: /* @__PURE__ */ e(nt, { size: 16 }) })
   ] });
 }
 const kn = "_root_13w21_1", wn = "_playButton_13w21_11", Be = {
@@ -978,57 +1011,57 @@ const kn = "_root_13w21_1", wn = "_playButton_13w21_11", Be = {
   mini: { height: 24, buttonSize: 20, iconSize: 14, waveHeight: 16, barWidth: 1, barGap: 0 },
   small: { height: 32, buttonSize: 28, iconSize: 16, waveHeight: 20, barWidth: 1, barGap: 0 },
   compact: { height: 40, buttonSize: 32, iconSize: 18, waveHeight: 24, barWidth: 2, barGap: 1 }
-}, Nn = Fe(
+}, Nn = We(
   ({
     audioUrl: t,
-    size: o = "mini",
-    waveColor: a = "#CCCCCC",
-    progressColor: r = "#169bde",
+    size: n = "mini",
+    waveColor: r = "#CCCCCC",
+    progressColor: a = "#169bde",
     onPlay: s,
-    onPause: u,
-    className: y,
-    style: _
-  }, g) => {
-    const m = A(null), [h, k] = T(!1), [i, b] = T(0), c = xn[o];
+    onPause: h,
+    className: _,
+    style: g
+  }, p) => {
+    const m = q(null), [u, k] = T(!1), [i, y] = T(0), c = xn[n];
     S(() => {
-      const n = m.current;
-      if (!n) return;
-      const f = () => b(n.currentTime), N = () => {
-        k(!1), b(0);
-      }, P = () => k(!1), q = () => k(!0);
-      return n.addEventListener("timeupdate", f), n.addEventListener("ended", N), n.addEventListener("pause", P), n.addEventListener("play", q), () => {
-        n.removeEventListener("timeupdate", f), n.removeEventListener("ended", N), n.removeEventListener("pause", P), n.removeEventListener("play", q);
+      const o = m.current;
+      if (!o) return;
+      const b = () => y(o.currentTime), N = () => {
+        k(!1), y(0);
+      }, P = () => k(!1), O = () => k(!0);
+      return o.addEventListener("timeupdate", b), o.addEventListener("ended", N), o.addEventListener("pause", P), o.addEventListener("play", O), () => {
+        o.removeEventListener("timeupdate", b), o.removeEventListener("ended", N), o.removeEventListener("pause", P), o.removeEventListener("play", O);
       };
     }, [t]);
     const d = L(() => {
-      const n = m.current;
-      n && (h ? (n.pause(), u == null || u()) : (n.play().catch(() => {
+      const o = m.current;
+      o && (u ? (o.pause(), h == null || h()) : (o.play().catch(() => {
       }), s == null || s()));
-    }, [h, s, u]), w = L((n) => {
-      const f = m.current;
-      f && !isNaN(n) && isFinite(n) && (f.currentTime = n, b(n));
+    }, [u, s, h]), w = L((o) => {
+      const b = m.current;
+      b && !isNaN(o) && isFinite(o) && (b.currentTime = o, y(o));
     }, []);
     return /* @__PURE__ */ l(
-      z,
+      I,
       {
-        ref: g,
-        gap: o === "mini" ? 6 : o === "small" ? 8 : 10,
+        ref: p,
+        gap: n === "mini" ? 6 : n === "small" ? 8 : 10,
         wrap: "nowrap",
-        className: `${Be.root} ${y ?? ""}`,
-        style: { height: c.height, ..._ },
+        className: `${Be.root} ${_ ?? ""}`,
+        style: { height: c.height, ...g },
         children: [
           /* @__PURE__ */ e("audio", { ref: m, src: t, preload: "metadata" }),
           /* @__PURE__ */ e(
-            Z,
+            ee,
             {
               variant: "filled",
               color: "blue",
               radius: "xl",
               size: c.buttonSize,
               onClick: d,
-              "aria-label": h ? "Pause" : "Play",
+              "aria-label": u ? "Pause" : "Play",
               className: Be.playButton,
-              children: h ? /* @__PURE__ */ e(We, { size: c.iconSize }) : /* @__PURE__ */ e(Ae, { size: c.iconSize })
+              children: u ? /* @__PURE__ */ e(qe, { size: c.iconSize }) : /* @__PURE__ */ e(Ae, { size: c.iconSize })
             }
           ),
           /* @__PURE__ */ e(x, { style: { flex: 1, minWidth: 80 }, children: /* @__PURE__ */ e(
@@ -1037,8 +1070,8 @@ const kn = "_root_13w21_1", wn = "_playButton_13w21_11", Be = {
               audioRef: m,
               currentTime: i,
               onSeek: w,
-              waveColor: a,
-              progressColor: r,
+              waveColor: r,
+              progressColor: a,
               height: c.waveHeight,
               barWidth: c.barWidth,
               barGap: c.barGap
@@ -1056,73 +1089,73 @@ const Tn = "_root_4fblk_1", $n = "_actions_4fblk_22", Cn = "_fab_4fblk_43", In =
   fab: Cn,
   actionButton: In
 };
-function $o({
+function Co({
   actions: t,
-  icon: o,
-  openIcon: a,
-  direction: r = "up",
+  icon: n,
+  openIcon: r,
+  direction: a = "up",
   color: s = "blue",
-  size: u = 56,
-  defaultOpen: y = !1,
-  open: _,
-  onOpenChange: g,
+  size: h = 56,
+  defaultOpen: _ = !1,
+  open: g,
+  onOpenChange: p,
   style: m,
-  className: h
+  className: u
 }) {
-  const [k, i] = T(y), b = _ ?? k, c = L(() => {
-    const n = !b;
-    i(n), g == null || g(n);
-  }, [b, g]), d = L(() => {
-    i(!1), g == null || g(!1);
-  }, [g]), w = r === "up" || r === "down";
-  return /* @__PURE__ */ l(x, { className: `${me.root} ${h ?? ""}`, style: m, "data-direction": r, children: [
-    /* @__PURE__ */ e("div", { className: me.actions, "data-direction": r, children: t.map((n, f) => {
-      const N = r === "up" || r === "left" ? t.length - 1 - f : f;
+  const [k, i] = T(_), y = g ?? k, c = L(() => {
+    const o = !y;
+    i(o), p == null || p(o);
+  }, [y, p]), d = L(() => {
+    i(!1), p == null || p(!1);
+  }, [p]), w = a === "up" || a === "down";
+  return /* @__PURE__ */ l(x, { className: `${me.root} ${u ?? ""}`, style: m, "data-direction": a, children: [
+    /* @__PURE__ */ e("div", { className: me.actions, "data-direction": a, children: t.map((o, b) => {
+      const N = a === "up" || a === "left" ? t.length - 1 - b : b;
       return /* @__PURE__ */ e(
         Xe,
         {
-          mounted: b,
+          mounted: y,
           transition: w ? "slide-up" : "slide-right",
           duration: 200,
           timingFunction: "ease",
           enterDelay: N * 40,
-          children: (P) => /* @__PURE__ */ e(Ye, { label: n.label, position: w ? "left" : "top", children: /* @__PURE__ */ e(
-            Z,
+          children: (P) => /* @__PURE__ */ e(Ye, { label: o.label, position: w ? "left" : "top", children: /* @__PURE__ */ e(
+            ee,
             {
               variant: "filled",
               color: "gray",
               radius: "xl",
-              size: u * 0.7,
+              size: h * 0.7,
               style: P,
               className: me.actionButton,
               onClick: () => {
-                n.onClick(), d();
+                o.onClick(), d();
               },
-              "aria-label": n.label,
-              children: n.icon
+              "aria-label": o.label,
+              children: o.icon
             }
           ) })
         },
-        n.label
+        o.label
       );
     }) }),
     /* @__PURE__ */ e(
-      Z,
+      ee,
       {
         variant: "filled",
         color: s,
         radius: "xl",
-        size: u,
+        size: h,
         onClick: c,
         className: me.fab,
-        "data-open": b || void 0,
-        "aria-label": b ? "Close actions" : "Open actions",
-        children: b ? a ?? o ?? /* @__PURE__ */ e(ve, { size: u * 0.45 }) : o ?? /* @__PURE__ */ e(ve, { size: u * 0.45 })
+        "data-open": y || void 0,
+        "aria-label": y ? "Close actions" : "Open actions",
+        children: y ? r ?? n ?? /* @__PURE__ */ e(ve, { size: h * 0.45 }) : n ?? /* @__PURE__ */ e(ve, { size: h * 0.45 })
       }
     )
   ] });
 }
-const zn = "_root_h15rs_1", Mn = "_content_h15rs_8", Bn = "_label_h15rs_21", Dn = "_vignette_h15rs_38", Ln = "_logoWrapper_h15rs_51", Sn = "_logo_h15rs_51", Pn = "_glow_h15rs_74", En = "_textWrapper_h15rs_86", Fn = "_heading_h15rs_92", Wn = "_shimmer_h15rs_126", An = "_tagline_h15rs_130", jn = "_primaryButton_h15rs_146", Gn = "_secondaryButton_h15rs_157", Rn = "_scrollIndicator_h15rs_173", qn = "_scrollLabel_h15rs_184", On = "_scrollLine_h15rs_192", I = {
+const zn = "_root_18iq7_1", Mn = "_content_18iq7_8", Bn = "_label_18iq7_21", Dn = "_vignette_18iq7_38", Ln = "_logoWrapper_18iq7_51", Sn = "_logo_18iq7_51", Pn = "_glow_18iq7_74", En = "_textWrapper_18iq7_86", Fn = "_heading_18iq7_92", Wn = "_shimmer_18iq7_126", qn = "_tagline_18iq7_130", An = "_primaryButton_18iq7_146", jn = "_secondaryButton_18iq7_158", Gn = "_scrollIndicator_18iq7_175", Rn = "_scrollLabel_18iq7_186", On = "_scrollLine_18iq7_194", z = {
   root: zn,
   content: Mn,
   label: Bn,
@@ -1133,41 +1166,41 @@ const zn = "_root_h15rs_1", Mn = "_content_h15rs_8", Bn = "_label_h15rs_21", Dn
   textWrapper: En,
   heading: Fn,
   shimmer: Wn,
-  tagline: An,
-  primaryButton: jn,
-  secondaryButton: Gn,
-  scrollIndicator: Rn,
-  scrollLabel: qn,
+  tagline: qn,
+  primaryButton: An,
+  secondaryButton: jn,
+  scrollIndicator: Gn,
+  scrollLabel: Rn,
   scrollLine: On
 };
-function Co({
+function Io({
   variant: t = "logo",
-  heading: o,
-  label: a,
-  tagline: r,
+  heading: n,
+  label: r,
+  tagline: a,
   logoSrc: s = ot,
-  gradient: u = "frequencyAlive",
-  shimmer: y = !0,
-  primaryAction: _,
-  secondaryAction: g,
+  gradient: h = "frequencyAlive",
+  shimmer: _ = !0,
+  primaryAction: g,
+  secondaryAction: p,
   backgroundVideoSrc: m,
-  showWaveform: h,
+  showWaveform: u,
   showScrollIndicator: k = !1
 }) {
-  const [i, b] = T(!1), c = typeof s == "string" ? s : s == null ? void 0 : s.src, d = o ?? (t === "text" ? "Your Message" : void 0), w = a || (t === "logo" ? "Welcome" : void 0), n = _ || g, f = h ?? !0, N = rt[u];
+  const [i, y] = T(!1), c = typeof s == "string" ? s : s == null ? void 0 : s.src, d = n ?? (t === "text" ? "Your Message" : void 0), w = r || (t === "logo" ? "Welcome" : void 0), o = g || p, b = u ?? !0, N = rt[h];
   return S(() => {
-    b(!0);
-  }, []), /* @__PURE__ */ l(x, { component: "section", className: I.root, children: [
+    y(!0);
+  }, []), /* @__PURE__ */ l(x, { component: "section", className: z.root, children: [
     m && /* @__PURE__ */ e(Xt, { src: m }),
-    /* @__PURE__ */ l("div", { className: I.content, children: [
-      i && /* @__PURE__ */ l(Ee, { children: [
+    /* @__PURE__ */ l("div", { className: z.content, children: [
+      i && /* @__PURE__ */ l(Fe, { children: [
         w && /* @__PURE__ */ e(
           D.p,
           {
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             transition: { duration: 0.8, delay: 0.2 },
-            className: I.label,
+            className: z.label,
             children: w
           }
         ),
@@ -1177,21 +1210,21 @@ function Co({
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
-            className: I.logoWrapper,
+            className: z.logoWrapper,
             children: [
-              f && /* @__PURE__ */ e(Ie, {}),
-              f && /* @__PURE__ */ e("div", { className: I.vignette }),
+              b && /* @__PURE__ */ e(Ie, {}),
+              b && /* @__PURE__ */ e("div", { className: z.vignette }),
               /* @__PURE__ */ e(
                 D.img,
                 {
                   src: c,
                   alt: d ?? "Frequency",
-                  className: I.logo,
+                  className: z.logo,
                   animate: { rotate: [0, 0.5, -0.5, 0] },
                   transition: { duration: 8, repeat: 1 / 0, ease: "easeInOut" }
                 }
               ),
-              /* @__PURE__ */ e("div", { className: I.glow })
+              /* @__PURE__ */ e("div", { className: z.glow })
             ]
           }
         ),
@@ -1201,18 +1234,18 @@ function Co({
             initial: { opacity: 0, scale: 0.8 },
             animate: { opacity: 1, scale: 1 },
             transition: { duration: 1.2, delay: 0.3, ease: "easeOut" },
-            className: I.textWrapper,
+            className: z.textWrapper,
             children: [
-              f && /* @__PURE__ */ e(Ie, {}),
-              f && /* @__PURE__ */ e("div", { className: I.vignette }),
+              b && /* @__PURE__ */ e(Ie, {}),
+              b && /* @__PURE__ */ e("div", { className: z.vignette }),
               /* @__PURE__ */ e(
-                se,
+                te,
                 {
                   order: 1,
-                  className: `${I.heading} ${y ? I.shimmer : ""}`,
+                  className: `${z.heading} ${_ ? z.shimmer : ""}`,
                   style: {
                     backgroundImage: `linear-gradient(135deg, ${N.from}, ${N.to}, ${N.from})`,
-                    backgroundSize: y ? "200% 100%" : void 0
+                    backgroundSize: _ ? "200% 100%" : void 0
                   },
                   children: d
                 }
@@ -1220,43 +1253,43 @@ function Co({
             ]
           }
         ),
-        r && /* @__PURE__ */ e(
+        a && /* @__PURE__ */ e(
           D.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.8, delay: 0.7 },
-            children: /* @__PURE__ */ e(v, { className: I.tagline, children: r })
+            children: /* @__PURE__ */ e(v, { className: z.tagline, children: a })
           }
         ),
-        n && /* @__PURE__ */ e(
+        o && /* @__PURE__ */ e(
           D.div,
           {
             initial: { opacity: 0, y: 20 },
             animate: { opacity: 1, y: 0 },
             transition: { duration: 0.8, delay: 0.9 },
-            children: /* @__PURE__ */ l(z, { gap: "xl", justify: "center", wrap: "wrap", children: [
-              _ && /* @__PURE__ */ e(
-                ae,
+            children: /* @__PURE__ */ l(I, { gap: "xl", justify: "center", wrap: "wrap", children: [
+              g && /* @__PURE__ */ e(
+                J,
                 {
                   component: "a",
-                  href: _.href,
+                  href: g.href,
                   size: "lg",
                   radius: 4,
-                  className: I.primaryButton,
-                  children: _.label
+                  className: z.primaryButton,
+                  children: g.label
                 }
               ),
-              g && /* @__PURE__ */ e(
-                ae,
+              p && /* @__PURE__ */ e(
+                J,
                 {
                   component: "a",
-                  href: g.href,
+                  href: p.href,
                   size: "lg",
                   radius: 4,
                   variant: "outline",
-                  className: I.secondaryButton,
-                  children: g.label
+                  className: z.secondaryButton,
+                  children: p.label
                 }
               )
             ] })
@@ -1266,16 +1299,16 @@ function Co({
       i && k && /* @__PURE__ */ l(
         D.div,
         {
-          className: I.scrollIndicator,
+          className: z.scrollIndicator,
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           transition: { duration: 1, delay: 1.4 },
           children: [
-            /* @__PURE__ */ e("span", { className: I.scrollLabel, children: "Scroll" }),
+            /* @__PURE__ */ e("span", { className: z.scrollLabel, children: "Scroll" }),
             /* @__PURE__ */ e(
               D.div,
               {
-                className: I.scrollLine,
+                className: z.scrollLine,
                 animate: { scaleY: [1, 1.5, 1] },
                 transition: { duration: 1.5, repeat: 1 / 0 }
               }
@@ -1299,36 +1332,36 @@ const Vn = "_container_9xj91_1", Hn = "_layout_9xj91_16", Un = "_reversed_9xj91_
   titleHighlight: eo,
   description: to
 };
-function Io({
+function zo({
   badge: t,
-  badgeColor: o = "violet",
-  subtitle: a,
-  title: r,
+  badgeColor: n = "violet",
+  subtitle: r,
+  title: a,
   titleColor: s = "blue",
-  preTitle: u,
-  description: y,
-  actions: _,
-  heading: g,
+  preTitle: h,
+  description: _,
+  actions: g,
+  heading: p,
   children: m,
-  stickyHeading: h = !1,
+  stickyHeading: u = !1,
   py: k,
   reversed: i = !1,
-  id: b,
+  id: y,
   className: c
 }) {
-  const d = g ?? /* @__PURE__ */ l(Y, { gap: "sm", children: [
+  const d = p ?? /* @__PURE__ */ l(A, { gap: "sm", children: [
     t && /* @__PURE__ */ l(x, { children: [
-      /* @__PURE__ */ e(Pe, { color: o, variant: "filled", size: "sm", radius: 4, tt: "uppercase", fw: 700, children: t }),
-      a && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a })
+      /* @__PURE__ */ e(Ee, { color: n, variant: "filled", size: "sm", radius: 4, tt: "uppercase", fw: 700, children: t }),
+      r && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", mt: "xs", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: r })
     ] }),
-    !t && a && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: a }),
-    (u || r) && /* @__PURE__ */ l(se, { order: 2, className: E.title, children: [
-      u && /* @__PURE__ */ e("span", { className: E.preTitle, children: u }),
-      u && /* @__PURE__ */ e("br", {}),
-      r && /* @__PURE__ */ e(v, { component: "span", inherit: !0, className: E.titleHighlight, c: s, children: r })
+    !t && r && /* @__PURE__ */ e(v, { size: "sm", c: "dimmed", tt: "uppercase", style: { letterSpacing: "0.05em" }, children: r }),
+    (h || a) && /* @__PURE__ */ l(te, { order: 2, className: E.title, children: [
+      h && /* @__PURE__ */ e("span", { className: E.preTitle, children: h }),
+      h && /* @__PURE__ */ e("br", {}),
+      a && /* @__PURE__ */ e(v, { component: "span", inherit: !0, className: E.titleHighlight, c: s, children: a })
     ] }),
-    y && /* @__PURE__ */ e(v, { size: "lg", c: "dimmed", lh: 1.7, className: E.description, children: y }),
-    _ && /* @__PURE__ */ e(x, { mt: "md", children: _ })
+    _ && /* @__PURE__ */ e(v, { size: "lg", c: "dimmed", lh: 1.7, className: E.description, children: _ }),
+    g && /* @__PURE__ */ e(x, { mt: "md", children: g })
   ] });
   return /* @__PURE__ */ e(
     x,
@@ -1336,115 +1369,120 @@ function Io({
       component: "section",
       py: k ?? "calc(var(--mantine-spacing-xl) * 3)",
       pos: "relative",
-      id: b,
+      id: y,
       className: c,
       children: /* @__PURE__ */ e(x, { className: E.container, children: /* @__PURE__ */ l(x, { className: `${E.layout} ${i ? E.reversed : ""}`, children: [
-        /* @__PURE__ */ e(x, { className: `${E.headingSide} ${h ? E.sticky : ""}`, children: /* @__PURE__ */ e(x, { className: h ? E.stickyInner : void 0, children: d }) }),
+        /* @__PURE__ */ e(x, { className: `${E.headingSide} ${u ? E.sticky : ""}`, children: /* @__PURE__ */ e(x, { className: u ? E.stickyInner : void 0, children: d }) }),
         /* @__PURE__ */ e(x, { className: E.contentSide, children: m })
       ] }) })
     }
   );
 }
-function zo({
+function Mo({
   value: t,
-  suffix: o = "",
-  prefix: a = "",
-  duration: r = 2e3,
+  suffix: n = "",
+  prefix: r = "",
+  duration: a = 2e3,
   threshold: s = 0.5,
-  abbreviate: u = !0,
-  decimals: y,
-  ..._
+  abbreviate: h = !0,
+  decimals: _,
+  ...g
 }) {
-  const [g, m] = T(0), [h, k] = T(!1), i = A(null);
+  const [p, m] = T(0), [u, k] = T(!1), i = q(null);
   return S(() => {
     const c = i.current;
     if (!c) return;
     const d = new IntersectionObserver(
       ([w]) => {
-        w.isIntersecting && !h && k(!0);
+        w.isIntersecting && !u && k(!0);
       },
       { threshold: s }
     );
     return d.observe(c), () => d.disconnect();
-  }, [h, s]), S(() => {
-    if (!h) return;
+  }, [u, s]), S(() => {
+    if (!u) return;
     let c, d;
-    const w = (n) => {
-      c || (c = n);
-      const f = Math.min((n - c) / r, 1), N = 1 - Math.pow(1 - f, 3);
-      m(N * t), f < 1 && (d = requestAnimationFrame(w));
+    const w = (o) => {
+      c || (c = o);
+      const b = Math.min((o - c) / a, 1), N = 1 - Math.pow(1 - b, 3);
+      m(N * t), b < 1 && (d = requestAnimationFrame(w));
     };
     return d = requestAnimationFrame(w), () => cancelAnimationFrame(d);
-  }, [h, t, r]), /* @__PURE__ */ l(v, { component: "span", ref: i, style: { fontVariantNumeric: "tabular-nums" }, ..._, children: [
-    a,
+  }, [u, t, a]), /* @__PURE__ */ l(v, { component: "span", ref: i, style: { fontVariantNumeric: "tabular-nums" }, ...g, children: [
+    r,
     (() => {
-      if (u && t >= 1e3) {
-        const c = g / 1e3;
+      if (h && t >= 1e3) {
+        const c = p / 1e3;
         return c % 1 === 0 ? `${Math.round(c)}K` : `${c.toFixed(1)}K`;
       }
-      return y !== void 0 ? g.toFixed(y) : t !== Math.floor(t) ? g.toFixed(1) : Math.round(g).toString();
+      return _ !== void 0 ? p.toFixed(_) : t !== Math.floor(t) ? p.toFixed(1) : Math.round(p).toString();
     })(),
-    o
+    n
   ] });
 }
 const no = "_root_ujac8_1", oo = "_textarea_ujac8_5", De = {
   root: no,
   textarea: oo
 };
-function Mo({ code: t, filename: o, height: a = 384 }) {
-  const [r, s] = T(!1), u = L(async () => {
+function Bo({ code: t, filename: n, height: r = 384 }) {
+  const [a, s] = T(!1), h = L(async () => {
     try {
       await navigator.clipboard.writeText(t), s(!0), setTimeout(() => s(!1), 2e3);
     } catch {
     }
   }, [t]);
   return /* @__PURE__ */ l(x, { className: De.root, children: [
-    /* @__PURE__ */ l(z, { justify: "space-between", mb: "xs", children: [
-      o && /* @__PURE__ */ e(v, { size: "sm", fw: 500, c: "dimmed", children: o }),
-      /* @__PURE__ */ e(ae, { size: "xs", radius: "md", color: r ? "green" : "blue", onClick: u, children: r ? "Copied!" : "Copy" })
+    /* @__PURE__ */ l(I, { justify: "space-between", mb: "xs", children: [
+      n && /* @__PURE__ */ e(v, { size: "sm", fw: 500, c: "dimmed", children: n }),
+      /* @__PURE__ */ e(J, { size: "xs", radius: "md", color: a ? "green" : "blue", onClick: h, children: a ? "Copied!" : "Copy" })
     ] }),
-    /* @__PURE__ */ e("textarea", { readOnly: !0, value: t, className: De.textarea, style: { height: a } })
+    /* @__PURE__ */ e("textarea", { readOnly: !0, value: t, className: De.textarea, style: { height: r } })
   ] });
 }
 export {
-  Lo as Anchor,
-  zo as AnimatedCounter,
+  So as Anchor,
+  Mo as AnimatedCounter,
   Ie as AnimatedWaveform,
-  To as AudioPlayer,
+  Po as AspectRatio,
+  $o as AudioPlayer,
   fe as AudioWaveform,
-  So as Badge,
-  Po as Box,
+  Eo as Badge,
+  Fo as Box,
   go as BrandLogos,
   uo as BrandedAppName,
-  Eo as Button,
-  Fo as Card,
-  Mo as CodeBlock,
-  ko as ColorPalette,
-  wo as ColorSwatch,
-  Wo as Container,
+  Wo as Button,
+  qo as Card,
+  Ao as Center,
+  Bo as CodeBlock,
+  wo as ColorPalette,
+  xo as ColorSwatch,
+  jo as Container,
   he as Copyable,
-  Ao as Divider,
-  vo as DonutChart,
-  po as DosDonts,
-  fo as ExpandableCard,
+  Go as Divider,
+  yo as DonutChart,
+  fo as DosDonts,
+  po as DownloadCard,
+  _o as ExpandableCard,
   ce as FadeInSection,
-  jo as Flex,
-  yo as FrequencyWave,
-  xo as GradientSwatch,
-  Go as Grid,
-  Ro as Group,
-  Co as Hero,
+  Ro as Flex,
+  ko as FrequencyWave,
+  No as GradientSwatch,
+  Oo as Grid,
+  Vo as Group,
+  Io as Hero,
   xe as HintBadge,
-  qo as Image,
+  Ho as Image,
   Nn as MiniAudioPlayer,
-  _o as PrincipleCard,
-  Oo as SimpleGrid,
-  $o as SpeedDial,
-  Io as SplitSection,
-  Vo as Stack,
-  bo as TestimonialCard,
-  Ho as Text,
-  Uo as Title,
-  No as TypographyColors,
+  Uo as Paper,
+  bo as PrincipleCard,
+  Xo as SimpleGrid,
+  Co as SpeedDial,
+  zo as SplitSection,
+  Yo as Stack,
+  vo as TestimonialCard,
+  Ko as Text,
+  Jo as ThemeIcon,
+  Qo as Title,
+  To as TypographyColors,
   Xt as VideoBackground
 };