@sorayasm/vietri-ds 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,87 +1,95 @@
-import { jsxs as d, jsx as e, Fragment as $ } from "react/jsx-runtime";
-import p from "@mui/material/Box";
-import b from "@mui/material/Stack";
-import h from "@mui/material/Typography";
-import { default as vt } from "@mui/material/Typography";
-import z from "@mui/material/Button";
-import { default as yt } from "@mui/material/Button";
+import { jsxs as d, jsx as r, Fragment as T } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+import x from "@mui/material/Stack";
+import m from "@mui/material/Typography";
+import { default as Ft } from "@mui/material/Typography";
+import O from "@mui/material/Button";
+import { default as Ct } from "@mui/material/Button";
 import A from "@mui/material/Card";
-import { default as St } from "@mui/material/Card";
+import { default as wt } from "@mui/material/Card";
 import { default as kt } from "@mui/material/CardActionArea";
 import { default as At } from "@mui/material/CardActions";
-import D from "@mui/material/CardContent";
-import { default as Et } from "@mui/material/CardContent";
-import { default as Wt } from "@mui/material/CardMedia";
-import Y from "@mui/material/Chip";
-import { default as $t } from "@mui/material/Chip";
-import { useState as M, useMemo as ie, useId as E, useRef as I, useEffect as q, Children as ne } from "react";
-import B from "@mui/material/IconButton";
-import { ArrowRight as ae, Check as J, ChevronDown as le, ChevronLeft as Q, ChevronRight as K, Clock as ce, Copy as Z, Database as de, ExternalLink as H, Globe as se, Info as pe, LayoutGrid as ue, MapPin as he, Menu as me, Music as ee, Network as fe, Play as P, Search as ge, Share2 as be, ShieldCheck as xe, Sparkles as ve, TrendingUp as Fe, Users as ye, X as L } from "lucide-react";
-import Ce from "@mui/material/Table";
-import Se from "@mui/material/TableBody";
-import T from "@mui/material/TableCell";
-import we from "@mui/material/TableContainer";
+import E from "@mui/material/CardContent";
+import { default as It } from "@mui/material/CardContent";
+import { default as Mt } from "@mui/material/CardMedia";
+import q from "@mui/material/Chip";
+import { default as Tt } from "@mui/material/Chip";
+import { useState as $, useMemo as ne, useId as I, useRef as W, useEffect as J, Children as ae } from "react";
+import D from "@mui/material/IconButton";
+import { ArrowRight as le, Check as Q, ChevronDown as ce, ChevronLeft as K, ChevronRight as Z, Clock as de, Copy as ee, Database as se, ExternalLink as H, Globe as pe, Info as ue, LayoutGrid as me, MapPin as he, Menu as fe, Music as re, Network as ge, Play as L, Search as be, Share2 as xe, ShieldCheck as ve, Sparkles as Fe, TrendingUp as ye, Users as Ce, X as P } from "lucide-react";
+import Se from "@mui/material/Table";
+import we from "@mui/material/TableBody";
+import R from "@mui/material/TableCell";
+import Be from "@mui/material/TableContainer";
 import ke from "@mui/material/TableHead";
-import O from "@mui/material/TableRow";
-import Be from "@mui/material/TableSortLabel";
+import z from "@mui/material/TableRow";
+import De from "@mui/material/TableSortLabel";
 import Ae from "@mui/material/DialogActions";
-import De from "@mui/material/DialogContent";
-import Ee from "@mui/material/DialogContentText";
-import Ie from "@mui/material/DialogTitle";
-import We from "@mui/material/Dialog";
-import re from "@mui/material/Drawer";
-import S from "@mui/material/Link";
+import Ee from "@mui/material/DialogContent";
+import Ie from "@mui/material/DialogContentText";
+import We from "@mui/material/DialogTitle";
+import Me from "@mui/material/Dialog";
+import te from "@mui/material/Drawer";
+import w from "@mui/material/Link";
 import j from "@mui/material/Container";
-import Me from "@mui/material/Divider";
-import { useTheme as te, alpha as w, createTheme as $e } from "@mui/material/styles";
-import Te from "@mui/material/TextField";
-import { default as Ot } from "@mui/material/TextField";
-import Oe from "@mui/material/ToggleButton";
-import Re from "@mui/material/ToggleButtonGroup";
-import ze from "@mui/material/AppBar";
-import He from "@mui/material/SvgIcon";
+import $e from "@mui/material/Divider";
+import { useTheme as oe, alpha as y, createTheme as Te } from "@mui/material/styles";
+import Re from "@mui/material/TextField";
+import { default as zt } from "@mui/material/TextField";
+import ze from "@mui/material/ToggleButton";
+import Oe from "@mui/material/ToggleButtonGroup";
+import He from "@mui/material/AppBar";
+import Le from "@mui/material/SvgIcon";
 import Pe from "@mui/material/Toolbar";
-import Le from "@mui/material/useMediaQuery";
-import je from "@mui/material/MenuItem";
-import { default as zt } from "@mui/material/Tab";
+import je from "@mui/material/useMediaQuery";
+import Ve from "@mui/material/MenuItem";
+import { default as Ht } from "@mui/material/Tab";
 import { default as Pt } from "@mui/material/Tabs";
 import Ne from "@mui/material/ButtonBase";
 function Ge() {
-  return /* @__PURE__ */ e(He, { children: /* @__PURE__ */ e("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
+  return /* @__PURE__ */ r(Le, { children: /* @__PURE__ */ r("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
 }
 function _({
-  link: r,
-  onClick: t
+  link: e,
+  onClick: t,
+  accent: o = !1
 }) {
-  return /* @__PURE__ */ e(
-    S,
+  const i = !!e.current;
+  return /* @__PURE__ */ r(
+    w,
     {
-      href: r.href,
-      underline: "none",
-      "aria-current": r.current ? "page" : void 0,
+      href: e.href,
+      underline: o ? i ? "always" : "hover" : "none",
+      "aria-current": i ? "page" : void 0,
       onClick: t,
-      sx: {
-        color: r.current ? "text.primary" : "text.secondary",
-        fontWeight: r.current ? 600 : 500,
-        "&:hover": { color: "text.primary" }
-      },
-      children: r.label
+      sx: (n) => ({
+        color: o ? i ? n.palette.text.primary : n.palette.primary.main : i ? n.palette.text.primary : n.palette.text.secondary,
+        fontWeight: i ? 600 : 500,
+        ...o && i && {
+          textDecorationColor: n.palette.primary.main,
+          textDecorationThickness: 2,
+          textUnderlineOffset: 8
+        },
+        ...!o && { "&:hover": { color: n.palette.text.primary } }
+      }),
+      children: e.label
     }
   );
 }
 function Gr({
-  brand: r,
+  brand: e,
   brandHref: t = "/",
   links: o,
-  actions: l,
+  actions: i,
   ariaLabel: n = "Main",
-  menuLabel: a = "Menu",
+  menuLabel: l = "Menu",
   closeLabel: u = "Close menu",
-  maxWidth: f = "lg"
+  maxWidth: h = "lg",
+  accentLinks: c = !1
 }) {
-  const c = te(), i = Le(c.breakpoints.up("md"), { noSsr: !0 }), [s, m] = M(!1), g = () => m(!1);
+  const a = oe(), p = je(a.breakpoints.up("md"), { noSsr: !0 }), [f, g] = $(!1), v = () => g(!1);
   return /* @__PURE__ */ d(
-    ze,
+    He,
     {
       component: "header",
       position: "sticky",
@@ -94,7 +102,7 @@ function Gr({
         borderColor: "divider"
       },
       children: [
-        /* @__PURE__ */ e(j, { maxWidth: f, children: /* @__PURE__ */ d(
+        /* @__PURE__ */ r(j, { maxWidth: h, children: /* @__PURE__ */ d(
           Pe,
           {
             disableGutters: !0,
@@ -104,54 +112,54 @@ function Gr({
               minHeight: { xs: 64, md: 72 }
             },
             children: [
-              /* @__PURE__ */ e(
-                S,
+              /* @__PURE__ */ r(
+                w,
                 {
                   href: t,
                   underline: "none",
                   color: "text.primary",
                   sx: { fontWeight: 600, letterSpacing: "-0.03em", fontSize: "1.125rem" },
-                  children: r
+                  children: e
                 }
               ),
-              i ? /* @__PURE__ */ d(b, { direction: "row", alignItems: "center", spacing: 4, children: [
-                /* @__PURE__ */ e(p, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
-                  b,
+              p ? /* @__PURE__ */ d(x, { direction: "row", alignItems: "center", spacing: 4, children: [
+                /* @__PURE__ */ r(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ r(
+                  x,
                   {
                     component: "ul",
                     direction: "row",
                     spacing: 4,
                     sx: { listStyle: "none", m: 0, p: 0 },
-                    children: o.map((x) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(_, { link: x }) }, x.href))
+                    children: o.map((b) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(_, { link: b, accent: c }) }, b.href))
                   }
                 ) }),
-                l
-              ] }) : /* @__PURE__ */ d(b, { direction: "row", alignItems: "center", spacing: 1, children: [
-                l,
-                /* @__PURE__ */ e(
-                  B,
+                i
+              ] }) : /* @__PURE__ */ d(x, { direction: "row", alignItems: "center", spacing: 1, children: [
+                i,
+                /* @__PURE__ */ r(
+                  D,
                   {
                     edge: "end",
-                    color: "inherit",
-                    "aria-label": a,
-                    "aria-expanded": s,
-                    onClick: () => m(!0),
-                    children: /* @__PURE__ */ e(Ge, {})
+                    color: c ? "primary" : "inherit",
+                    "aria-label": l,
+                    "aria-expanded": f,
+                    onClick: () => g(!0),
+                    children: /* @__PURE__ */ r(Ge, {})
                   }
                 )
               ] })
             ]
           }
         ) }),
-        !i && /* @__PURE__ */ e(re, { anchor: "right", open: s, onClose: g, children: /* @__PURE__ */ d(p, { sx: { width: 280, p: 3 }, children: [
-          /* @__PURE__ */ e(b, { alignItems: "flex-end", sx: { mb: 3 }, children: /* @__PURE__ */ e(z, { variant: "text", color: "secondary", onClick: g, children: u }) }),
-          /* @__PURE__ */ e(p, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
-            b,
+        !p && /* @__PURE__ */ r(te, { anchor: "right", open: f, onClose: v, children: /* @__PURE__ */ d(s, { sx: { width: 280, p: 3 }, children: [
+          /* @__PURE__ */ r(x, { alignItems: "flex-end", sx: { mb: 3 }, children: /* @__PURE__ */ r(O, { variant: "text", color: c ? "primary" : "secondary", onClick: v, children: u }) }),
+          /* @__PURE__ */ r(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ r(
+            x,
             {
               component: "ul",
               spacing: 3,
               sx: { listStyle: "none", m: 0, p: 0, fontSize: "1.25rem" },
-              children: o.map((x) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(_, { link: x, onClick: g }) }, x.href))
+              children: o.map((b) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(_, { link: b, onClick: v, accent: c }) }, b.href))
             }
           ) })
         ] }) })
@@ -159,123 +167,123 @@ function Gr({
     }
   );
 }
-const Ve = [
+const Ue = [
   { value: "en", label: "EN" },
   { value: "es", label: "ES" }
 ];
-function Vr({
-  value: r,
+function Ur({
+  value: e,
   onChange: t,
-  options: o = Ve,
-  ariaLabel: l = "Language"
+  options: o = Ue,
+  ariaLabel: i = "Language"
 }) {
-  return /* @__PURE__ */ e(
-    Re,
+  return /* @__PURE__ */ r(
+    Oe,
     {
       exclusive: !0,
       size: "small",
-      value: r,
-      "aria-label": l,
-      onChange: (n, a) => {
-        a !== null && t(a);
+      value: e,
+      "aria-label": i,
+      onChange: (n, l) => {
+        l !== null && t(l);
       },
-      children: o.map((n) => /* @__PURE__ */ e(Oe, { value: n.value, children: n.label }, n.value))
+      children: o.map((n) => /* @__PURE__ */ r(ze, { value: n.value, children: n.label }, n.value))
     }
   );
 }
-function _r({ value: r, label: t, description: o }) {
-  return /* @__PURE__ */ e(A, { children: /* @__PURE__ */ d(D, { children: [
-    /* @__PURE__ */ e(h, { variant: "h3", component: "p", children: r }),
-    /* @__PURE__ */ e(h, { variant: "body1", sx: { mt: 1 }, children: t }),
-    o && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: o })
+function _r({ value: e, label: t, description: o }) {
+  return /* @__PURE__ */ r(A, { children: /* @__PURE__ */ d(E, { children: [
+    /* @__PURE__ */ r(m, { variant: "h3", component: "p", children: e }),
+    /* @__PURE__ */ r(m, { variant: "body1", sx: { mt: 1 }, children: t }),
+    o && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: o })
   ] }) });
 }
-function oe(r, t) {
-  return r[t.key];
+function ie(e, t) {
+  return e[t.key];
 }
-function U(r, t) {
-  if (t.sortValue) return t.sortValue(r);
-  const o = oe(r, t);
+function X(e, t) {
+  if (t.sortValue) return t.sortValue(e);
+  const o = ie(e, t);
   return typeof o == "number" ? o : String(o ?? "");
 }
-function _e(r, t) {
-  return typeof r == "number" && typeof t == "number" ? r - t : String(r).localeCompare(String(t), void 0, { numeric: !0 });
+function _e(e, t) {
+  return typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, { numeric: !0 });
 }
-function Ur({
-  columns: r,
+function Xr({
+  columns: e,
   rows: t,
   getRowKey: o,
-  caption: l,
+  caption: i,
   emptyMessage: n = "No data"
 }) {
-  const [a, u] = M(
+  const [l, u] = $(
     null
-  ), f = ie(() => {
+  ), h = ne(() => {
+    if (!l) return t;
+    const a = e.find((f) => f.key === l.key);
     if (!a) return t;
-    const i = r.find((m) => m.key === a.key);
-    if (!i) return t;
-    const s = a.direction === "asc" ? 1 : -1;
+    const p = l.direction === "asc" ? 1 : -1;
     return [...t].sort(
-      (m, g) => s * _e(U(m, i), U(g, i))
+      (f, g) => p * _e(X(f, a), X(g, a))
     );
-  }, [t, r, a]), c = (i) => {
+  }, [t, e, l]), c = (a) => {
     u(
-      (s) => s?.key === i && s.direction === "asc" ? { key: i, direction: "desc" } : { key: i, direction: "asc" }
+      (p) => p?.key === a && p.direction === "asc" ? { key: a, direction: "desc" } : { key: a, direction: "asc" }
     );
   };
-  return /* @__PURE__ */ e(we, { tabIndex: 0, sx: { overflowX: "auto" }, children: /* @__PURE__ */ d(Ce, { children: [
-    l && /* @__PURE__ */ e(
-      h,
+  return /* @__PURE__ */ r(Be, { tabIndex: 0, sx: { overflowX: "auto" }, children: /* @__PURE__ */ d(Se, { children: [
+    i && /* @__PURE__ */ r(
+      m,
       {
         component: "caption",
         variant: "body2",
         color: "text.secondary",
         sx: { captionSide: "top", textAlign: "left", pb: 2 },
-        children: l
+        children: i
       }
     ),
-    /* @__PURE__ */ e(ke, { children: /* @__PURE__ */ e(O, { children: r.map((i) => {
-      const s = a?.key === i.key ? a.direction : void 0;
-      return /* @__PURE__ */ e(
-        T,
+    /* @__PURE__ */ r(ke, { children: /* @__PURE__ */ r(z, { children: e.map((a) => {
+      const p = l?.key === a.key ? l.direction : void 0;
+      return /* @__PURE__ */ r(
+        R,
         {
-          align: i.align,
-          sortDirection: s ?? !1,
-          children: i.sortable ? /* @__PURE__ */ e(
-            Be,
+          align: a.align,
+          sortDirection: p ?? !1,
+          children: a.sortable ? /* @__PURE__ */ r(
+            De,
             {
-              active: s !== void 0,
-              direction: s ?? "asc",
-              onClick: () => c(i.key),
-              children: i.header
+              active: p !== void 0,
+              direction: p ?? "asc",
+              onClick: () => c(a.key),
+              children: a.header
             }
-          ) : i.header
+          ) : a.header
         },
-        i.key
+        a.key
       );
     }) }) }),
-    /* @__PURE__ */ e(Se, { children: f.length === 0 ? /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(T, { colSpan: r.length, align: "center", children: n }) }) : f.map((i) => /* @__PURE__ */ e(O, { children: r.map((s, m) => /* @__PURE__ */ e(
-      T,
+    /* @__PURE__ */ r(we, { children: h.length === 0 ? /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(R, { colSpan: e.length, align: "center", children: n }) }) : h.map((a) => /* @__PURE__ */ r(z, { children: e.map((p, f) => /* @__PURE__ */ r(
+      R,
       {
-        align: s.align,
-        component: m === 0 ? "th" : "td",
-        scope: m === 0 ? "row" : void 0,
-        children: s.render ? s.render(i) : String(oe(i, s) ?? "")
+        align: p.align,
+        component: f === 0 ? "th" : "td",
+        scope: f === 0 ? "row" : void 0,
+        children: p.render ? p.render(a) : String(ie(a, p) ?? "")
       },
-      s.key
-    )) }, o(i))) })
+      p.key
+    )) }, o(a))) })
   ] }) });
 }
-function Xr({
-  data: r,
+function Yr({
+  data: e,
   title: t,
   max: o,
-  formatValue: l = String
+  formatValue: i = String
 }) {
-  const n = o ?? Math.max(0, ...r.map((a) => a.value));
-  return /* @__PURE__ */ d(p, { component: "figure", sx: { m: 0 }, children: [
-    t && /* @__PURE__ */ e(
-      h,
+  const n = o ?? Math.max(0, ...e.map((l) => l.value));
+  return /* @__PURE__ */ d(s, { component: "figure", sx: { m: 0 }, children: [
+    t && /* @__PURE__ */ r(
+      m,
       {
         component: "figcaption",
         variant: "overline",
@@ -284,10 +292,10 @@ function Xr({
         children: t
       }
     ),
-    /* @__PURE__ */ e(b, { component: "ul", spacing: 1.5, sx: { listStyle: "none", m: 0, p: 0 }, children: r.map((a) => {
-      const u = n > 0 ? Math.min(100, Math.max(0, a.value / n * 100)) : 0, f = l(a.value);
+    /* @__PURE__ */ r(x, { component: "ul", spacing: 1.5, sx: { listStyle: "none", m: 0, p: 0 }, children: e.map((l) => {
+      const u = n > 0 ? Math.min(100, Math.max(0, l.value / n * 100)) : 0, h = i(l.value);
       return /* @__PURE__ */ d(
-        p,
+        s,
         {
           component: "li",
           sx: {
@@ -297,24 +305,24 @@ function Xr({
             columnGap: 2
           },
           children: [
-            /* @__PURE__ */ e(h, { variant: "body2", "aria-hidden": "true", children: a.label }),
-            /* @__PURE__ */ e(
-              p,
+            /* @__PURE__ */ r(m, { variant: "body2", "aria-hidden": "true", children: l.label }),
+            /* @__PURE__ */ r(
+              s,
               {
                 role: "meter",
-                "aria-label": a.label,
+                "aria-label": l.label,
                 "aria-valuemin": 0,
                 "aria-valuemax": n,
-                "aria-valuenow": a.value,
-                "aria-valuetext": f,
+                "aria-valuenow": l.value,
+                "aria-valuetext": h,
                 sx: {
                   height: 12,
                   borderRadius: 1,
                   bgcolor: "divider",
                   overflow: "hidden"
                 },
-                children: /* @__PURE__ */ e(
-                  p,
+                children: /* @__PURE__ */ r(
+                  s,
                   {
                     style: { width: `${u}%` },
                     sx: { height: "100%", bgcolor: "primary.main" }
@@ -322,78 +330,78 @@ function Xr({
                 )
               }
             ),
-            /* @__PURE__ */ e(
-              h,
+            /* @__PURE__ */ r(
+              m,
               {
                 variant: "body2",
                 "aria-hidden": "true",
                 sx: { minWidth: 40, textAlign: "right", fontWeight: 600 },
-                children: f
+                children: h
               }
             )
           ]
         },
-        a.label
+        l.label
       );
     }) })
   ] });
 }
-function C({ icon: r, label: t, size: o = 18, ...l }) {
-  return t ? /* @__PURE__ */ e(r, { size: o, role: "img", "aria-label": t, ...l }) : /* @__PURE__ */ e(r, { size: o, "aria-hidden": "true", focusable: "false", ...l });
+function S({ icon: e, label: t, size: o = 18, ...i }) {
+  return t ? /* @__PURE__ */ r(e, { size: o, role: "img", "aria-label": t, ...i }) : /* @__PURE__ */ r(e, { size: o, "aria-hidden": "true", focusable: "false", ...i });
 }
-const Yr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const qr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ArrowRight: ae,
-  Check: J,
-  ChevronDown: le,
-  ChevronLeft: Q,
-  ChevronRight: K,
-  Clock: ce,
-  Copy: Z,
-  Database: de,
+  ArrowRight: le,
+  Check: Q,
+  ChevronDown: ce,
+  ChevronLeft: K,
+  ChevronRight: Z,
+  Clock: de,
+  Copy: ee,
+  Database: se,
   ExternalLink: H,
-  Globe: se,
-  Info: pe,
-  LayoutGrid: ue,
+  Globe: pe,
+  Info: ue,
+  LayoutGrid: me,
   MapPin: he,
-  Menu: me,
-  Music: ee,
-  Network: fe,
-  Play: P,
-  Search: ge,
-  Share2: be,
-  ShieldCheck: xe,
-  Sparkles: ve,
-  TrendingUp: Fe,
-  Users: ye,
-  X: L
+  Menu: fe,
+  Music: re,
+  Network: ge,
+  Play: L,
+  Search: be,
+  Share2: xe,
+  ShieldCheck: ve,
+  Sparkles: Fe,
+  TrendingUp: ye,
+  Users: Ce,
+  X: P
 }, Symbol.toStringTag, { value: "Module" }));
-function Ue({ color: r, dot: t = !1, ...o }) {
-  return /* @__PURE__ */ e(
-    Y,
+function Xe({ color: e, dot: t = !1, ...o }) {
+  return /* @__PURE__ */ r(
+    q,
     {
       size: "small",
       ...o,
-      icon: t ? /* @__PURE__ */ e(
-        p,
+      icon: t ? /* @__PURE__ */ r(
+        s,
         {
           component: "span",
           "aria-hidden": "true",
-          sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: r.fg }
+          sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: e.fg }
         }
       ) : void 0,
       sx: {
-        bgcolor: r.bg,
-        color: r.fg,
-        "&.MuiChip-clickable:hover": { bgcolor: r.bg, filter: "brightness(0.95)" },
-        "& .MuiChip-icon": { color: r.fg, ml: 1, mr: -0.25 }
+        bgcolor: e.bg,
+        color: e.fg,
+        "&.MuiChip-clickable:hover": { bgcolor: e.bg, filter: "brightness(0.95)" },
+        "& .MuiChip-icon": { color: e.fg, ml: 1, mr: -0.25 }
       }
     }
   );
 }
-function N(r) {
-  return /* @__PURE__ */ e(
-    p,
+function V(e) {
+  return /* @__PURE__ */ r(
+    s,
     {
       component: "span",
       sx: {
@@ -407,42 +415,46 @@ function N(r) {
         whiteSpace: "nowrap",
         width: "1px"
       },
-      ...r
+      ...e
     }
   );
 }
-function qr({
-  title: r,
+function Jr({
+  title: e,
   description: t,
   lines: o = [],
-  links: l = [],
+  links: i = [],
   linksLabel: n = "Footer links",
-  action: a,
+  action: l,
   legal: u,
-  externalLabel: f = "(opens in a new tab)"
+  externalLabel: h = "(opens in a new tab)"
 }) {
-  const { glow: c } = te().vietri.color;
+  const { glow: c } = oe().vietri.color;
   return /* @__PURE__ */ d(
-    p,
+    s,
     {
       component: "footer",
-      sx: (i) => ({
+      sx: (a) => ({
         position: "relative",
         overflow: "hidden",
         py: 6,
-        color: i.vietri.color.onSurface,
-        background: i.vietri.gradient.surface,
+        color: a.vietri.color.onSurface,
+        background: a.vietri.gradient.surface,
+        // A thin rule along the top, when the theme defines one.
+        ...a.vietri.color.surfaceRule && {
+          borderTop: `4px solid ${a.vietri.color.surfaceRule}`
+        },
         // The default focus ring is not visible on dark backgrounds.
         "& a:focus-visible, & button:focus-visible": {
           outline: "2px solid",
-          outlineColor: i.vietri.color.onSurface,
+          outlineColor: a.vietri.color.onSurface,
           outlineOffset: 3
         }
       }),
       children: [
-        c && /* @__PURE__ */ d($, { children: [
-          /* @__PURE__ */ e(
-            p,
+        c && /* @__PURE__ */ d(T, { children: [
+          /* @__PURE__ */ r(
+            s,
             {
               "aria-hidden": "true",
               sx: {
@@ -452,14 +464,14 @@ function qr({
                 width: 384,
                 height: 384,
                 borderRadius: "50%",
-                bgcolor: w(c[0], 0.22),
+                bgcolor: y(c[0], 0.22),
                 filter: "blur(64px)",
                 pointerEvents: "none"
               }
             }
           ),
-          /* @__PURE__ */ e(
-            p,
+          /* @__PURE__ */ r(
+            s,
             {
               "aria-hidden": "true",
               sx: {
@@ -469,7 +481,7 @@ function qr({
                 width: 384,
                 height: 384,
                 borderRadius: "50%",
-                bgcolor: w(c[1], 0.22),
+                bgcolor: y(c[1], 0.22),
                 filter: "blur(64px)",
                 pointerEvents: "none"
               }
@@ -478,39 +490,39 @@ function qr({
         ] }),
         /* @__PURE__ */ d(j, { maxWidth: "lg", sx: { position: "relative", zIndex: 1 }, children: [
           /* @__PURE__ */ d(
-            b,
+            x,
             {
               direction: { xs: "column", sm: "row" },
               justifyContent: "space-between",
               alignItems: { xs: "flex-start", sm: "center" },
               spacing: 4,
               children: [
-                /* @__PURE__ */ d(b, { spacing: 1, children: [
-                  /* @__PURE__ */ e(h, { component: "p", variant: "h6", children: r }),
-                  t && /* @__PURE__ */ e(
-                    h,
+                /* @__PURE__ */ d(x, { spacing: 1, children: [
+                  /* @__PURE__ */ r(m, { component: "p", variant: "h6", children: e }),
+                  t && /* @__PURE__ */ r(
+                    m,
                     {
                       variant: "body2",
-                      sx: (i) => ({
+                      sx: (a) => ({
                         maxWidth: 560,
-                        color: i.vietri.color.onSurfaceSoft
+                        color: a.vietri.color.onSurfaceSoft
                       }),
                       children: t
                     }
                   ),
-                  o.map((i) => /* @__PURE__ */ e(
-                    h,
+                  o.map((a) => /* @__PURE__ */ r(
+                    m,
                     {
                       variant: "body2",
-                      sx: (s) => ({ color: s.vietri.color.onSurfaceSoft }),
-                      children: i
+                      sx: (p) => ({ color: p.vietri.color.onSurfaceSoft }),
+                      children: a
                     },
-                    i
+                    a
                   ))
                 ] }),
-                /* @__PURE__ */ d(b, { spacing: 2, alignItems: { xs: "flex-start", sm: "flex-end" }, children: [
-                  l.length > 0 && /* @__PURE__ */ e(p, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
-                    b,
+                /* @__PURE__ */ d(x, { spacing: 2, alignItems: { xs: "flex-start", sm: "flex-end" }, children: [
+                  i.length > 0 && /* @__PURE__ */ r(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ r(
+                    x,
                     {
                       component: "ul",
                       direction: "row",
@@ -518,46 +530,46 @@ function qr({
                       useFlexGap: !0,
                       flexWrap: "wrap",
                       sx: { listStyle: "none", m: 0, p: 0 },
-                      children: l.map((i) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
-                        S,
+                      children: i.map((a) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ d(
+                        w,
                         {
-                          href: i.href,
+                          href: a.href,
                           color: "inherit",
                           underline: "always",
-                          target: i.external ? "_blank" : void 0,
-                          rel: i.external ? "noopener noreferrer" : void 0,
+                          target: a.external ? "_blank" : void 0,
+                          rel: a.external ? "noopener noreferrer" : void 0,
                           sx: { display: "inline-flex", alignItems: "center", gap: 0.5 },
                           children: [
-                            i.label,
-                            i.external && /* @__PURE__ */ d($, { children: [
-                              /* @__PURE__ */ e(C, { icon: H, size: 14 }),
-                              /* @__PURE__ */ e(N, { children: f })
+                            a.label,
+                            a.external && /* @__PURE__ */ d(T, { children: [
+                              /* @__PURE__ */ r(S, { icon: H, size: 14 }),
+                              /* @__PURE__ */ r(V, { children: h })
                             ] })
                           ]
                         }
-                      ) }, i.href))
+                      ) }, a.href))
                     }
                   ) }),
-                  a
+                  l
                 ] })
               ]
             }
           ),
-          u && /* @__PURE__ */ d($, { children: [
-            /* @__PURE__ */ e(
-              Me,
+          u && /* @__PURE__ */ d(T, { children: [
+            /* @__PURE__ */ r(
+              $e,
               {
-                sx: (i) => ({
+                sx: (a) => ({
                   my: 3,
-                  borderColor: w(i.vietri.color.onSurface, 0.25)
+                  borderColor: y(a.vietri.color.onSurface, 0.25)
                 })
               }
             ),
-            /* @__PURE__ */ e(
-              h,
+            /* @__PURE__ */ r(
+              m,
               {
                 variant: "body2",
-                sx: (i) => ({ color: i.vietri.color.onSurfaceSoft }),
+                sx: (a) => ({ color: a.vietri.color.onSurfaceSoft }),
                 children: u
               }
             )
@@ -567,17 +579,17 @@ function qr({
     }
   );
 }
-function Jr({
-  title: r,
+function Qr({
+  title: e,
   eyebrow: t,
   description: o,
-  level: l = 2,
+  level: i = 2,
   align: n = "left"
 }) {
-  const a = `h${l}`;
-  return /* @__PURE__ */ d(b, { spacing: 1, sx: { textAlign: n, alignItems: n === "center" ? "center" : "flex-start" }, children: [
-    t && /* @__PURE__ */ e(
-      h,
+  const l = `h${i}`;
+  return /* @__PURE__ */ d(x, { spacing: 1, sx: { textAlign: n, alignItems: n === "center" ? "center" : "flex-start" }, children: [
+    t && /* @__PURE__ */ r(
+      m,
       {
         component: "p",
         variant: "overline",
@@ -586,113 +598,113 @@ function Jr({
         children: t
       }
     ),
-    /* @__PURE__ */ e(h, { component: a, variant: "h3", children: r }),
-    o && /* @__PURE__ */ e(h, { variant: "body1", color: "text.secondary", sx: { maxWidth: 680 }, children: o })
+    /* @__PURE__ */ r(m, { component: l, variant: "h3", children: e }),
+    o && /* @__PURE__ */ r(m, { variant: "body1", color: "text.secondary", sx: { maxWidth: 680 }, children: o })
   ] });
 }
-function Qr({
-  label: r,
+function Kr({
+  label: e,
   value: t,
   onChange: o,
-  options: l,
+  options: i,
   helperText: n,
-  disabled: a,
+  disabled: l,
   fullWidth: u,
-  size: f,
+  size: h,
   id: c
 }) {
-  const i = new Map(l.map((s) => [s.value, s]));
-  return /* @__PURE__ */ e(
-    Te,
+  const a = new Map(i.map((p) => [p.value, p]));
+  return /* @__PURE__ */ r(
+    Re,
     {
       select: !0,
       id: c,
-      label: r,
+      label: e,
       value: t,
-      onChange: (s) => o(s.target.value),
+      onChange: (p) => o(p.target.value),
       helperText: n,
-      disabled: a,
+      disabled: l,
       fullWidth: u,
-      size: f,
+      size: h,
       slotProps: {
         select: {
-          renderValue: (s) => {
-            const m = i.get(String(s));
-            return m ? /* @__PURE__ */ d(p, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
-              m.adornment,
-              m.label
+          renderValue: (p) => {
+            const f = a.get(String(p));
+            return f ? /* @__PURE__ */ d(s, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
+              f.adornment,
+              f.label
             ] }) : "";
           }
         }
       },
-      children: l.map((s) => /* @__PURE__ */ d(je, { value: s.value, sx: { gap: 1 }, children: [
-        s.adornment,
-        s.label,
-        s.count !== void 0 && /* @__PURE__ */ e(h, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: "auto", pl: 2 }, children: s.count })
-      ] }, s.value))
+      children: i.map((p) => /* @__PURE__ */ d(Ve, { value: p.value, sx: { gap: 1 }, children: [
+        p.adornment,
+        p.label,
+        p.count !== void 0 && /* @__PURE__ */ r(m, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: "auto", pl: 2 }, children: p.count })
+      ] }, p.value))
     }
   );
 }
-function Kr({
-  open: r,
+function Zr({
+  open: e,
   onClose: t,
   title: o,
-  description: l,
+  description: i,
   children: n,
-  actions: a,
+  actions: l,
   closeLabel: u = "Close",
-  maxWidth: f = "sm"
+  maxWidth: h = "sm"
 }) {
-  const c = E(), i = E();
+  const c = I(), a = I();
   return /* @__PURE__ */ d(
-    We,
+    Me,
     {
-      open: r,
+      open: e,
       onClose: t,
       fullWidth: !0,
-      maxWidth: f,
+      maxWidth: h,
       "aria-labelledby": c,
-      "aria-describedby": l ? i : void 0,
+      "aria-describedby": i ? a : void 0,
       children: [
-        /* @__PURE__ */ e(Ie, { id: c, sx: { pr: 7 }, children: o }),
-        /* @__PURE__ */ e(
-          B,
+        /* @__PURE__ */ r(We, { id: c, sx: { pr: 7 }, children: o }),
+        /* @__PURE__ */ r(
+          D,
           {
             "aria-label": u,
             onClick: t,
             sx: { position: "absolute", top: 8, right: 8 },
-            children: /* @__PURE__ */ e(C, { icon: L })
+            children: /* @__PURE__ */ r(S, { icon: P })
           }
         ),
-        /* @__PURE__ */ d(De, { children: [
-          l && /* @__PURE__ */ e(Ee, { id: i, sx: { mb: n ? 2 : 0 }, children: l }),
+        /* @__PURE__ */ d(Ee, { children: [
+          i && /* @__PURE__ */ r(Ie, { id: a, sx: { mb: n ? 2 : 0 }, children: i }),
           n
         ] }),
-        a && /* @__PURE__ */ e(Ae, { sx: { px: 3, pb: 2 }, children: a })
+        l && /* @__PURE__ */ r(Ae, { sx: { px: 3, pb: 2 }, children: l })
       ]
     }
   );
 }
-function Zr({
-  open: r,
+function et({
+  open: e,
   onClose: t,
   title: o,
-  eyebrow: l,
+  eyebrow: i,
   children: n,
-  footer: a,
+  footer: l,
   anchor: u = "right",
-  width: f = 420,
+  width: h = 420,
   closeLabel: c = "Close"
 }) {
-  const i = E();
-  return /* @__PURE__ */ e(re, { anchor: u, open: r, onClose: t, children: /* @__PURE__ */ d(
-    p,
+  const a = I();
+  return /* @__PURE__ */ r(te, { anchor: u, open: e, onClose: t, children: /* @__PURE__ */ d(
+    s,
     {
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": i,
+      "aria-labelledby": a,
       sx: {
-        width: { xs: "100vw", sm: f },
+        width: { xs: "100vw", sm: h },
         maxWidth: "100vw",
         height: "100%",
         display: "flex",
@@ -700,52 +712,52 @@ function Zr({
       },
       children: [
         /* @__PURE__ */ d(
-          b,
+          x,
           {
             direction: "row",
             justifyContent: "space-between",
             alignItems: "center",
             sx: { p: 3, pb: 1 },
             children: [
-              /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "primary.main", children: l }),
-              /* @__PURE__ */ e(B, { "aria-label": c, onClick: t, edge: "end", children: /* @__PURE__ */ e(C, { icon: L }) })
+              /* @__PURE__ */ r(m, { component: "p", variant: "overline", color: "primary.main", children: i }),
+              /* @__PURE__ */ r(D, { "aria-label": c, onClick: t, edge: "end", children: /* @__PURE__ */ r(S, { icon: P }) })
             ]
           }
         ),
-        /* @__PURE__ */ d(p, { sx: { px: 3, pb: 2, flex: 1, overflowY: "auto" }, tabIndex: 0, children: [
-          /* @__PURE__ */ e(h, { id: i, component: "h2", variant: "h4", sx: { mb: 2 }, children: o }),
+        /* @__PURE__ */ d(s, { sx: { px: 3, pb: 2, flex: 1, overflowY: "auto" }, tabIndex: 0, children: [
+          /* @__PURE__ */ r(m, { id: a, component: "h2", variant: "h4", sx: { mb: 2 }, children: o }),
           n
         ] }),
-        a && /* @__PURE__ */ e(p, { sx: { p: 3, borderTop: 1, borderColor: "divider" }, children: a })
+        l && /* @__PURE__ */ r(s, { sx: { p: 3, borderTop: 1, borderColor: "divider" }, children: l })
       ]
     }
   ) });
 }
-function et({
-  label: r,
+function rt({
+  label: e,
   value: t,
   copyLabel: o = "Copy",
-  copiedLabel: l = "Copied!",
+  copiedLabel: i = "Copied!",
   errorLabel: n = "Could not copy",
-  copiedDuration: a = 2e3
+  copiedDuration: l = 2e3
 }) {
-  const [u, f] = M("idle"), c = I(void 0);
-  q(() => () => clearTimeout(c.current), []);
-  async function i() {
+  const [u, h] = $("idle"), c = W(void 0);
+  J(() => () => clearTimeout(c.current), []);
+  async function a() {
     try {
-      await navigator.clipboard.writeText(t), f("copied");
+      await navigator.clipboard.writeText(t), h("copied");
     } catch {
-      f("error");
+      h("error");
     }
-    clearTimeout(c.current), c.current = setTimeout(() => f("idle"), a);
+    clearTimeout(c.current), c.current = setTimeout(() => h("idle"), l);
   }
-  return /* @__PURE__ */ d(b, { spacing: 1.5, children: [
-    /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "text.secondary", children: r }),
-    /* @__PURE__ */ e(
-      p,
+  return /* @__PURE__ */ d(x, { spacing: 1.5, children: [
+    /* @__PURE__ */ r(m, { component: "p", variant: "overline", color: "text.secondary", children: e }),
+    /* @__PURE__ */ r(
+      s,
       {
         role: "region",
-        "aria-label": r,
+        "aria-label": e,
         tabIndex: 0,
         sx: {
           overflowX: "auto",
@@ -758,26 +770,26 @@ function et({
           fontSize: "0.8125rem",
           whiteSpace: "pre"
         },
-        children: /* @__PURE__ */ e("code", { children: t })
+        children: /* @__PURE__ */ r("code", { children: t })
       }
     ),
-    /* @__PURE__ */ e(
-      z,
+    /* @__PURE__ */ r(
+      O,
       {
-        onClick: i,
-        startIcon: /* @__PURE__ */ e(C, { icon: u === "copied" ? J : Z }),
+        onClick: a,
+        startIcon: /* @__PURE__ */ r(S, { icon: u === "copied" ? Q : ee }),
         fullWidth: !0,
-        children: u === "copied" ? l : o
+        children: u === "copied" ? i : o
       }
     ),
-    /* @__PURE__ */ e(N, { role: "status", "aria-live": "polite", children: u === "copied" ? l : u === "error" ? n : "" })
+    /* @__PURE__ */ r(V, { role: "status", "aria-live": "polite", children: u === "copied" ? i : u === "error" ? n : "" })
   ] });
 }
-function rt({ href: r, children: t = "Skip to content" }) {
-  return /* @__PURE__ */ e(
-    S,
+function tt({ href: e, children: t = "Skip to content" }) {
+  return /* @__PURE__ */ r(
+    w,
     {
-      href: r,
+      href: e,
       sx: (o) => ({
         position: "fixed",
         top: o.spacing(1),
@@ -798,92 +810,118 @@ function rt({ href: r, children: t = "Skip to content" }) {
     }
   );
 }
-function tt({
-  title: r,
+function ot({
+  title: e,
   eyebrow: t,
   description: o,
-  actions: l,
+  actions: i,
   level: n = 1,
-  align: a = "left",
-  image: u,
-  imagePosition: f = "center"
+  align: l = "left",
+  accentRule: u = !1,
+  image: h,
+  imagePosition: c = "center"
 }) {
-  const c = `h${n}`, i = a === "center", s = !!u;
-  return /* @__PURE__ */ e(
-    p,
+  const a = `h${n}`, p = l === "center", f = !!h;
+  return /* @__PURE__ */ r(
+    s,
     {
       component: "section",
-      sx: (m) => {
-        const g = m.vietri.color.scrim, x = m.vietri.gradient.surface, v = `linear-gradient(0deg, ${g} 0%, ${w(g, 0)} 28%)`, V = `url(${JSON.stringify(u ?? "")})`;
+      sx: (g) => {
+        const v = g.vietri.color.scrim, b = g.vietri.gradient.surface, G = `linear-gradient(0deg, ${v} 0%, ${y(v, 0)} 18%)`, U = `url(${JSON.stringify(h ?? "")})`;
         return {
           display: "flex",
           alignItems: "center",
           py: { xs: 6, md: 10 },
-          ...s && { minHeight: { xs: 440, md: 600 } },
-          color: m.vietri.color.onSurface,
-          ...s ? {
+          ...f && { minHeight: { xs: 440, md: 600 } },
+          color: g.vietri.color.onSurface,
+          ...f ? {
             // Layers, from top to bottom: dark layer, bottom fade, photo, surface.
             backgroundImage: {
-              xs: `linear-gradient(${w(g, 0.88)}, ${w(g, 0.88)}), ${v}, ${V}, ${x}`,
-              md: `linear-gradient(90deg, ${w(g, 0.92)} 0%, ${w(g, 0.86)} 62%, ${w(g, 0.25)} 100%), ${v}, ${V}, ${x}`
+              xs: `linear-gradient(${y(v, 0.8)}, ${y(v, 0.8)}), ${G}, ${U}, ${b}`,
+              md: `linear-gradient(90deg, ${y(v, 0.84)} 0%, ${y(v, 0.74)} 62%, ${y(v, 0.1)} 100%), ${G}, ${U}, ${b}`
             },
             backgroundSize: "cover",
-            backgroundPosition: f,
+            backgroundPosition: c,
             backgroundRepeat: "no-repeat"
-          } : { background: x },
+          } : { background: b },
           // Focus ring and secondary buttons that stay visible on a dark surface.
           "& a:focus-visible, & button:focus-visible": {
             outline: "2px solid",
-            outlineColor: m.vietri.color.onSurface,
+            outlineColor: g.vietri.color.onSurface,
             outlineOffset: 3
           },
           "& .MuiButton-outlined, & .MuiButton-text": {
             color: "inherit",
             borderColor: "currentColor"
+          },
+          // Over the photo the hover is a white veil, not the orange of the page.
+          "& .MuiButton-outlined:hover, & .MuiButton-text:hover": {
+            borderColor: "currentColor",
+            backgroundColor: y(g.vietri.color.onSurface, 0.14)
           }
         };
       },
-      children: /* @__PURE__ */ e(j, { maxWidth: "lg", sx: { width: "100%" }, children: /* @__PURE__ */ d(
-        b,
+      children: /* @__PURE__ */ r(j, { maxWidth: "lg", sx: { width: "100%" }, children: /* @__PURE__ */ d(
+        x,
         {
           spacing: 2,
           sx: {
-            alignItems: i ? "center" : "flex-start",
-            textAlign: a,
-            // With an image the text stays in the left 60%, where the dark layer is strongest.
-            ...s && { maxWidth: { md: "60%" }, ...i && { mx: "auto" } }
+            alignItems: p ? "center" : "flex-start",
+            textAlign: l,
+            // With an image the text stays in the left 60%, where the dark layer is at its strongest.
+            ...f && { maxWidth: { md: "60%" }, ...p && { mx: "auto" } }
           },
           children: [
-            t && /* @__PURE__ */ e(
-              h,
+            t && /* @__PURE__ */ r(
+              m,
               {
                 component: "p",
                 variant: "overline",
-                sx: (m) => ({ color: m.vietri.color.onSurfaceSoft }),
+                sx: (g) => ({ color: g.vietri.color.onSurfaceSoft }),
                 children: t
               }
             ),
-            /* @__PURE__ */ e(h, { component: c, variant: "h2", sx: { maxWidth: 900 }, children: r }),
-            o && /* @__PURE__ */ e(
-              h,
+            /* @__PURE__ */ r(
+              m,
+              {
+                component: a,
+                variant: "h2",
+                sx: { maxWidth: 900 },
+                children: e
+              }
+            ),
+            u && /* @__PURE__ */ r(
+              s,
+              {
+                "aria-hidden": "true",
+                sx: (g) => ({
+                  width: 72,
+                  height: 6,
+                  borderRadius: 3,
+                  bgcolor: g.vietri.color.accentLarge ?? g.palette.primary.main
+                })
+              }
+            ),
+            o && /* @__PURE__ */ r(
+              m,
               {
                 variant: "body1",
-                sx: (m) => ({
+                sx: (g) => ({
                   maxWidth: 680,
-                  color: m.vietri.color.onSurfaceSoft
+                  color: g.vietri.color.onSurfaceSoft
                 }),
                 children: o
               }
             ),
-            l && /* @__PURE__ */ e(
-              b,
+            i && /* @__PURE__ */ r(
+              x,
               {
                 direction: "row",
                 spacing: 2,
                 useFlexGap: !0,
                 flexWrap: "wrap",
-                sx: { pt: 2, justifyContent: i ? "center" : "flex-start" },
-                children: l
+                sx: { pt: 2, justifyContent: p ? "center" : "flex-start" },
+                children: i
               }
             )
           ]
@@ -892,17 +930,17 @@ function tt({
     }
   );
 }
-function ot({
-  icon: r,
+function it({
+  icon: e,
   title: t,
   description: o,
-  level: l = 3,
+  level: i = 3,
   children: n
 }) {
-  const a = `h${l}`;
-  return /* @__PURE__ */ e(A, { sx: { height: "100%" }, children: /* @__PURE__ */ d(D, { children: [
-    /* @__PURE__ */ e(
-      p,
+  const l = `h${i}`;
+  return /* @__PURE__ */ r(A, { sx: { height: "100%" }, children: /* @__PURE__ */ d(E, { children: [
+    /* @__PURE__ */ r(
+      s,
       {
         sx: (u) => ({
           display: "grid",
@@ -914,18 +952,18 @@ function ot({
           bgcolor: u.vietri.color.chip,
           color: u.palette.primary.main
         }),
-        children: /* @__PURE__ */ e(C, { icon: r, size: 22 })
+        children: /* @__PURE__ */ r(S, { icon: e, size: 22 })
       }
     ),
-    /* @__PURE__ */ e(h, { component: a, variant: "h6", gutterBottom: !0, children: t }),
-    o && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: o }),
-    n && /* @__PURE__ */ e(p, { sx: { mt: 2 }, children: n })
+    /* @__PURE__ */ r(m, { component: l, variant: "h6", gutterBottom: !0, children: t }),
+    o && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", children: o }),
+    n && /* @__PURE__ */ r(s, { sx: { mt: 2 }, children: n })
   ] }) });
 }
-function it({ steps: r, level: t = 3, ariaLabel: o }) {
-  const l = `h${t}`;
-  return /* @__PURE__ */ e(
-    p,
+function nt({ steps: e, level: t = 3, ariaLabel: o }) {
+  const i = `h${t}`;
+  return /* @__PURE__ */ r(
+    s,
     {
       component: "ol",
       role: "list",
@@ -938,12 +976,12 @@ function it({ steps: r, level: t = 3, ariaLabel: o }) {
         gap: 3,
         gridTemplateColumns: {
           xs: "1fr",
-          md: `repeat(${Math.max(r.length, 1)}, minmax(0, 1fr))`
+          md: `repeat(${Math.max(e.length, 1)}, minmax(0, 1fr))`
         }
       },
-      children: r.map((n, a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(b, { spacing: 1, children: [
-        /* @__PURE__ */ e(
-          p,
+      children: e.map((n, l) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ d(x, { spacing: 1, children: [
+        /* @__PURE__ */ r(
+          s,
           {
             "aria-hidden": "true",
             sx: (u) => ({
@@ -956,34 +994,34 @@ function it({ steps: r, level: t = 3, ariaLabel: o }) {
               bgcolor: u.palette.primary.main,
               color: u.palette.primary.contrastText
             }),
-            children: a + 1
+            children: l + 1
           }
         ),
-        /* @__PURE__ */ e(h, { component: l, variant: "h6", children: n.title }),
-        n.description && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: n.description })
+        /* @__PURE__ */ r(m, { component: i, variant: "h6", children: n.title }),
+        n.description && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", children: n.description })
       ] }) }, n.title))
     }
   );
 }
-function nt({ entries: r, level: t = 3, ariaLabel: o }) {
-  const l = `h${t}`;
-  return /* @__PURE__ */ e(
-    p,
+function at({ entries: e, level: t = 3, ariaLabel: o }) {
+  const i = `h${t}`;
+  return /* @__PURE__ */ r(
+    s,
     {
       component: "ol",
       role: "list",
       "aria-label": o,
       sx: { listStyle: "none", m: 0, p: 0 },
-      children: r.map((n) => /* @__PURE__ */ d(
-        p,
+      children: e.map((n) => /* @__PURE__ */ d(
+        s,
         {
           component: "li",
           id: n.id,
-          sx: (a) => ({
+          sx: (l) => ({
             position: "relative",
             pl: 4,
             pb: 5,
-            scrollMarginTop: a.spacing(10),
+            scrollMarginTop: l.spacing(10),
             // Vertical line between dots.
             "&::before": {
               content: '""',
@@ -992,32 +1030,32 @@ function nt({ entries: r, level: t = 3, ariaLabel: o }) {
               top: 14,
               bottom: 0,
               width: 2,
-              bgcolor: a.palette.divider
+              bgcolor: l.palette.divider
             },
             "&:last-of-type": { pb: 0 },
             "&:last-of-type::before": { display: "none" }
           }),
           children: [
-            /* @__PURE__ */ e(
-              p,
+            /* @__PURE__ */ r(
+              s,
               {
                 "aria-hidden": "true",
-                sx: (a) => ({
+                sx: (l) => ({
                   position: "absolute",
                   left: 0,
                   top: 6,
                   width: 16,
                   height: 16,
                   borderRadius: "50%",
-                  bgcolor: a.palette.primary.main,
-                  border: `3px solid ${a.palette.background.default}`,
+                  bgcolor: l.palette.primary.main,
+                  border: `3px solid ${l.palette.background.default}`,
                   boxSizing: "border-box"
                 })
               }
             ),
-            /* @__PURE__ */ e(h, { component: l, variant: "h5", children: n.label }),
-            n.description && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: n.description }),
-            n.content && /* @__PURE__ */ e(p, { sx: { mt: 2 }, children: n.content })
+            /* @__PURE__ */ r(m, { component: i, variant: "h5", children: n.label }),
+            n.description && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: n.description }),
+            n.content && /* @__PURE__ */ r(s, { sx: { mt: 2 }, children: n.content })
           ]
         },
         n.id
@@ -1025,7 +1063,7 @@ function nt({ entries: r, level: t = 3, ariaLabel: o }) {
     }
   );
 }
-const X = {
+const Y = {
   position: "static",
   color: "inherit",
   font: "inherit",
@@ -1037,56 +1075,56 @@ const X = {
     inset: 0
   }
 };
-function at({
-  name: r,
+function lt({
+  name: e,
   subtitle: t,
   bio: o,
-  tags: l = [],
+  tags: i = [],
   href: n,
-  onClick: a,
+  onClick: l,
   level: u = 3,
-  bioLines: f = 3
+  bioLines: h = 3
 }) {
-  const c = `h${u}`, i = !!(n || a);
-  return /* @__PURE__ */ e(
+  const c = `h${u}`, a = !!(n || l);
+  return /* @__PURE__ */ r(
     A,
     {
-      sx: (m) => ({
+      sx: (f) => ({
         position: "relative",
         height: "100%",
-        ...i && { "&:hover": { borderColor: m.palette.primary.main } },
+        ...a && { "&:hover": { borderColor: f.palette.primary.main } },
         // One focus ring for the whole card, instead of one around the name.
         "&:has(:focus-visible)": {
-          outline: `2px solid ${m.palette.primary.main}`,
+          outline: `2px solid ${f.palette.primary.main}`,
           outlineOffset: 2
         },
         "& a:focus-visible, & button:focus-visible": { outline: "none" }
       }),
-      children: /* @__PURE__ */ d(D, { children: [
-        /* @__PURE__ */ e(h, { component: c, variant: "h6", children: n ? /* @__PURE__ */ e(S, { href: n, underline: "none", sx: X, children: r }) : a ? /* @__PURE__ */ e(S, { component: "button", type: "button", onClick: a, underline: "none", sx: X, children: r }) : r }),
-        t && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: t }),
-        o && /* @__PURE__ */ e(
-          h,
+      children: /* @__PURE__ */ d(E, { children: [
+        /* @__PURE__ */ r(m, { component: c, variant: "h6", children: n ? /* @__PURE__ */ r(w, { href: n, underline: "none", sx: Y, children: e }) : l ? /* @__PURE__ */ r(w, { component: "button", type: "button", onClick: l, underline: "none", sx: Y, children: e }) : e }),
+        t && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", children: t }),
+        o && /* @__PURE__ */ r(
+          m,
           {
             variant: "body2",
             sx: {
               mt: 1,
               display: "-webkit-box",
-              WebkitLineClamp: f,
+              WebkitLineClamp: h,
               WebkitBoxOrient: "vertical",
               overflow: "hidden"
             },
             children: o
           }
         ),
-        l.length > 0 && /* @__PURE__ */ e(b, { direction: "row", spacing: 1, useFlexGap: !0, flexWrap: "wrap", sx: { mt: 2 }, children: l.map(
-          (m) => m.color ? /* @__PURE__ */ e(Ue, { label: m.label, color: m.color }, m.label) : /* @__PURE__ */ e(Y, { label: m.label, size: "small" }, m.label)
+        i.length > 0 && /* @__PURE__ */ r(x, { direction: "row", spacing: 1, useFlexGap: !0, flexWrap: "wrap", sx: { mt: 2 }, children: i.map(
+          (f) => f.color ? /* @__PURE__ */ r(Xe, { label: f.label, color: f.color }, f.label) : /* @__PURE__ */ r(q, { label: f.label, size: "small" }, f.label)
         ) })
       ] })
     }
   );
 }
-const W = {
+const M = {
   position: "static",
   color: "inherit",
   font: "inherit",
@@ -1097,31 +1135,31 @@ const W = {
     position: "absolute",
     inset: 0
   }
-}, Xe = (r) => ({
+}, Ye = (e) => ({
   "&:has(:focus-visible)": {
-    outline: `2px solid ${r.palette.primary.main}`,
+    outline: `2px solid ${e.palette.primary.main}`,
     outlineOffset: 2
   },
   "& a:focus-visible, & button:focus-visible": { outline: "none" }
 });
-function lt({
-  title: r,
+function ct({
+  title: e,
   subtitle: t,
   meta: o,
-  imageUrl: l,
+  imageUrl: i,
   duration: n,
-  badge: a,
+  badge: l,
   href: u,
-  onClick: f,
+  onClick: h,
   level: c = 3,
-  playIcon: i = !0,
-  aspectRatio: s = "16 / 9"
+  playIcon: a = !0,
+  aspectRatio: p = "16 / 9"
 }) {
-  const m = `h${c}`, g = !!(u || f);
+  const f = `h${c}`, g = !!(u || h);
   return /* @__PURE__ */ d(
     A,
     {
-      sx: (v) => ({
+      sx: (b) => ({
         position: "relative",
         height: "100%",
         overflow: "hidden",
@@ -1129,30 +1167,30 @@ function lt({
         ...g && {
           "&:hover": {
             transform: "scale(1.03)",
-            boxShadow: v.vietri.shadow.lg,
-            borderColor: v.palette.primary.main
+            boxShadow: b.vietri.shadow.lg,
+            borderColor: b.palette.primary.main
           },
           "&:hover .media-card-image": { transform: "scale(1.06)" }
         },
-        ...Xe(v)
+        ...Ye(b)
       }),
       children: [
         /* @__PURE__ */ d(
-          p,
+          s,
           {
-            sx: (v) => ({
+            sx: (b) => ({
               position: "relative",
-              aspectRatio: s,
+              aspectRatio: p,
               overflow: "hidden",
-              bgcolor: v.vietri.color.chip
+              bgcolor: b.vietri.color.chip
             }),
             children: [
-              l && /* @__PURE__ */ e(
-                p,
+              i && /* @__PURE__ */ r(
+                s,
                 {
                   component: "img",
                   className: "media-card-image",
-                  src: l,
+                  src: i,
                   alt: "",
                   loading: "lazy",
                   sx: {
@@ -1164,8 +1202,8 @@ function lt({
                   }
                 }
               ),
-              i && /* @__PURE__ */ e(
-                p,
+              a && /* @__PURE__ */ r(
+                s,
                 {
                   "aria-hidden": "true",
                   sx: {
@@ -1181,13 +1219,13 @@ function lt({
                     bgcolor: "rgba(0, 0, 0, 0.8)",
                     color: "#FFFFFF"
                   },
-                  children: /* @__PURE__ */ e(C, { icon: P, size: 22 })
+                  children: /* @__PURE__ */ r(S, { icon: L, size: 22 })
                 }
               ),
-              a && /* @__PURE__ */ e(
-                p,
+              l && /* @__PURE__ */ r(
+                s,
                 {
-                  sx: (v) => ({
+                  sx: (b) => ({
                     position: "absolute",
                     top: 8,
                     left: 8,
@@ -1196,14 +1234,14 @@ function lt({
                     borderRadius: 1,
                     fontSize: "0.75rem",
                     fontWeight: 600,
-                    bgcolor: v.vietri.color.action[0],
-                    color: v.vietri.color.onAction
+                    bgcolor: b.vietri.color.action[0],
+                    color: b.vietri.color.onAction
                   }),
-                  children: a
+                  children: l
                 }
               ),
-              n && /* @__PURE__ */ e(
-                p,
+              n && /* @__PURE__ */ r(
+                s,
                 {
                   sx: {
                     position: "absolute",
@@ -1223,56 +1261,56 @@ function lt({
             ]
           }
         ),
-        /* @__PURE__ */ d(D, { children: [
-          o && /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "text.secondary", children: o }),
-          /* @__PURE__ */ e(h, { component: m, variant: "h6", children: u ? /* @__PURE__ */ e(S, { href: u, underline: "none", sx: W, children: r }) : f ? /* @__PURE__ */ e(S, { component: "button", type: "button", onClick: f, underline: "none", sx: W, children: r }) : r }),
-          t && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: t })
+        /* @__PURE__ */ d(E, { children: [
+          o && /* @__PURE__ */ r(m, { component: "p", variant: "overline", color: "text.secondary", children: o }),
+          /* @__PURE__ */ r(m, { component: f, variant: "h6", children: u ? /* @__PURE__ */ r(w, { href: u, underline: "none", sx: M, children: e }) : h ? /* @__PURE__ */ r(w, { component: "button", type: "button", onClick: h, underline: "none", sx: M, children: e }) : e }),
+          t && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", children: t })
         ] })
       ]
     }
   );
 }
-function ct({
-  title: r,
+function dt({
+  title: e,
   children: t,
   level: o = 2,
-  itemWidth: l = 280,
+  itemWidth: i = 280,
   previousLabel: n = "Scroll left",
-  nextLabel: a = "Scroll right",
+  nextLabel: l = "Scroll right",
   action: u
 }) {
-  const f = `h${o}`, c = E(), i = I(null), s = ne.toArray(t);
-  function m(g) {
-    const x = i.current;
-    if (!x) return;
-    const v = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    x.scrollBy?.({
-      left: g * x.clientWidth * 0.8,
-      behavior: v ? "auto" : "smooth"
+  const h = `h${o}`, c = I(), a = W(null), p = ae.toArray(t);
+  function f(g) {
+    const v = a.current;
+    if (!v) return;
+    const b = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    v.scrollBy?.({
+      left: g * v.clientWidth * 0.8,
+      behavior: b ? "auto" : "smooth"
     });
   }
-  return /* @__PURE__ */ d(p, { component: "section", "aria-labelledby": c, sx: { mb: 4 }, children: [
+  return /* @__PURE__ */ d(s, { component: "section", "aria-labelledby": c, sx: { mb: 4 }, children: [
     /* @__PURE__ */ d(
-      b,
+      x,
       {
         direction: "row",
         justifyContent: "space-between",
         alignItems: "center",
         sx: { mb: 2 },
         children: [
-          /* @__PURE__ */ e(h, { id: c, component: f, variant: "h5", children: r }),
-          /* @__PURE__ */ d(b, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ r(m, { id: c, component: h, variant: "h5", children: e }),
+          /* @__PURE__ */ d(x, { direction: "row", spacing: 1, alignItems: "center", children: [
             u,
-            /* @__PURE__ */ e(B, { "aria-label": n, onClick: () => m(-1), children: /* @__PURE__ */ e(C, { icon: Q }) }),
-            /* @__PURE__ */ e(B, { "aria-label": a, onClick: () => m(1), children: /* @__PURE__ */ e(C, { icon: K }) })
+            /* @__PURE__ */ r(D, { color: "primary", "aria-label": n, onClick: () => f(-1), children: /* @__PURE__ */ r(S, { icon: K }) }),
+            /* @__PURE__ */ r(D, { color: "primary", "aria-label": l, onClick: () => f(1), children: /* @__PURE__ */ r(S, { icon: Z }) })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ e(
-      p,
+    /* @__PURE__ */ r(
+      s,
       {
-        ref: i,
+        ref: a,
         tabIndex: 0,
         sx: (g) => ({
           overflowX: "auto",
@@ -1280,15 +1318,15 @@ function ct({
           pt: 1.5,
           pb: 2,
           scrollSnapType: "x proximity",
-          // A thin scrollbar in the theme's text color, instead of the heavy one of
-          // the system. Still visible (it uses the secondary text color), so people
+          // A thin scrollbar in the theme's primary color, instead of the heavy one of
+          // the system. Still visible (it reads against the page), so people
           // who scroll with a mouse can see there is more to the right.
           scrollbarWidth: "thin",
-          scrollbarColor: `${g.palette.text.secondary} transparent`,
+          scrollbarColor: `${g.palette.primary.main} transparent`,
           "&::-webkit-scrollbar": { height: 8 },
           "&::-webkit-scrollbar-track": { backgroundColor: "transparent" },
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: g.palette.text.secondary,
+            backgroundColor: g.palette.primary.main,
             borderRadius: 4
           },
           "&:focus-visible": {
@@ -1296,20 +1334,20 @@ function ct({
             outlineOffset: 2
           }
         }),
-        children: /* @__PURE__ */ e(
-          p,
+        children: /* @__PURE__ */ r(
+          s,
           {
             component: "ul",
             role: "list",
             sx: { listStyle: "none", m: 0, p: 0, display: "flex", gap: 2 },
-            children: s.map((g, x) => /* @__PURE__ */ e(
-              p,
+            children: p.map((g, v) => /* @__PURE__ */ r(
+              s,
               {
                 component: "li",
-                sx: { flex: `0 0 ${l}px`, scrollSnapAlign: "start" },
+                sx: { flex: `0 0 ${i}px`, scrollSnapAlign: "start" },
                 children: g
               },
-              x
+              v
             ))
           }
         )
@@ -1317,23 +1355,23 @@ function ct({
     )
   ] });
 }
-function Ye(r, t, o) {
-  const l = new URLSearchParams({ rel: "0", modestbranding: "1" });
-  return t && l.set("start", String(Math.floor(t))), o && l.set("autoplay", "1"), `https://www.youtube-nocookie.com/embed/${encodeURIComponent(r)}?${l.toString()}`;
+function qe(e, t, o) {
+  const i = new URLSearchParams({ rel: "0", modestbranding: "1" });
+  return t && i.set("start", String(Math.floor(t))), o && i.set("autoplay", "1"), `https://www.youtube-nocookie.com/embed/${encodeURIComponent(e)}?${i.toString()}`;
 }
-function dt({
-  videoId: r,
+function st({
+  videoId: e,
   title: t,
   poster: o,
-  start: l,
+  start: i,
   lazy: n = !0,
-  playLabel: a
+  playLabel: l
 }) {
-  const [u, f] = M(!n), c = I(!1), i = I(null);
-  return q(() => {
-    u && c.current && i.current?.focus();
-  }, [u]), /* @__PURE__ */ e(
-    p,
+  const [u, h] = $(!n), c = W(!1), a = W(null);
+  return J(() => {
+    u && c.current && a.current?.focus();
+  }, [u]), /* @__PURE__ */ r(
+    s,
     {
       sx: {
         position: "relative",
@@ -1343,11 +1381,11 @@ function dt({
         borderRadius: 2,
         bgcolor: "#000000"
       },
-      children: u ? /* @__PURE__ */ e(
+      children: u ? /* @__PURE__ */ r(
         "iframe",
         {
-          ref: i,
-          src: Ye(r, l, c.current),
+          ref: a,
+          src: qe(e, i, c.current),
           title: t,
           allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
           allowFullScreen: !0,
@@ -1358,9 +1396,9 @@ function dt({
       ) : /* @__PURE__ */ d(
         Ne,
         {
-          "aria-label": a ?? `Play video: ${t}`,
+          "aria-label": l ?? `Play video: ${t}`,
           onClick: () => {
-            c.current = !0, f(!0);
+            c.current = !0, h(!0);
           },
           sx: {
             position: "absolute",
@@ -1373,8 +1411,8 @@ function dt({
             }
           },
           children: [
-            o && /* @__PURE__ */ e(
-              p,
+            o && /* @__PURE__ */ r(
+              s,
               {
                 component: "img",
                 src: o,
@@ -1383,8 +1421,8 @@ function dt({
                 sx: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }
               }
             ),
-            /* @__PURE__ */ e(
-              p,
+            /* @__PURE__ */ r(
+              s,
               {
                 "aria-hidden": "true",
                 sx: {
@@ -1397,7 +1435,7 @@ function dt({
                   bgcolor: "rgba(0, 0, 0, 0.8)",
                   color: "#FFFFFF"
                 },
-                children: /* @__PURE__ */ e(C, { icon: P, size: 32 })
+                children: /* @__PURE__ */ r(S, { icon: L, size: 32 })
               }
             )
           ]
@@ -1406,54 +1444,54 @@ function dt({
     }
   );
 }
-const qe = (r) => ({
+const Je = (e) => ({
   "&:has(:focus-visible)": {
-    outline: `2px solid ${r.palette.primary.main}`,
+    outline: `2px solid ${e.palette.primary.main}`,
     outlineOffset: -2
   },
   "& a:focus-visible, & button:focus-visible": { outline: "none" }
 });
-function st({
-  episodes: r,
+function pt({
+  episodes: e,
   currentId: t,
   onSelect: o,
-  level: l = 3,
+  level: i = 3,
   ariaLabel: n,
-  episodeLabel: a = (f) => `Episode ${f}`,
+  episodeLabel: l = (h) => `Episode ${h}`,
   currentLabel: u = "Now playing"
 }) {
-  const f = `h${l}`;
-  return /* @__PURE__ */ e(
-    p,
+  const h = `h${i}`;
+  return /* @__PURE__ */ r(
+    s,
     {
       component: "ol",
       role: "list",
       "aria-label": n,
       sx: { listStyle: "none", m: 0, p: 0 },
-      children: r.map((c) => {
-        const i = c.id === t, s = !!(o || c.href), m = o ? /* @__PURE__ */ e(
-          S,
+      children: e.map((c) => {
+        const a = c.id === t, p = !!(o || c.href), f = o ? /* @__PURE__ */ r(
+          w,
           {
             component: "button",
             type: "button",
             onClick: () => o(c.id),
-            "aria-current": i ? "true" : void 0,
+            "aria-current": a ? "true" : void 0,
             underline: "none",
-            sx: W,
+            sx: M,
             children: c.title
           }
-        ) : c.href ? /* @__PURE__ */ e(
-          S,
+        ) : c.href ? /* @__PURE__ */ r(
+          w,
           {
             href: c.href,
-            "aria-current": i ? "true" : void 0,
+            "aria-current": a ? "true" : void 0,
             underline: "none",
-            sx: W,
+            sx: M,
             children: c.title
           }
         ) : c.title;
         return /* @__PURE__ */ d(
-          p,
+          s,
           {
             component: "li",
             sx: (g) => ({
@@ -1464,13 +1502,13 @@ function st({
               borderBottom: 1,
               borderColor: "divider",
               borderLeft: 4,
-              borderLeftColor: i ? g.palette.primary.main : "transparent",
-              ...s && { "&:hover": { bgcolor: g.palette.action.hover } },
-              ...qe(g)
+              borderLeftColor: a ? g.palette.primary.main : "transparent",
+              ...p && { "&:hover": { bgcolor: g.palette.action.hover } },
+              ...Je(g)
             }),
             children: [
-              c.imageUrl && /* @__PURE__ */ e(
-                p,
+              c.imageUrl && /* @__PURE__ */ r(
+                s,
                 {
                   component: "img",
                   src: c.imageUrl,
@@ -1485,15 +1523,15 @@ function st({
                   }
                 }
               ),
-              /* @__PURE__ */ d(p, { sx: { minWidth: 0 }, children: [
-                /* @__PURE__ */ d(h, { component: "p", variant: "overline", color: "text.secondary", children: [
-                  a(c.number),
-                  i && ` · ${u}`
+              /* @__PURE__ */ d(s, { sx: { minWidth: 0 }, children: [
+                /* @__PURE__ */ d(m, { component: "p", variant: "overline", color: "text.secondary", children: [
+                  l(c.number),
+                  a && ` · ${u}`
                 ] }),
-                /* @__PURE__ */ e(h, { component: f, variant: "h6", children: m }),
-                c.meta && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: c.meta }),
-                c.description && /* @__PURE__ */ e(
-                  h,
+                /* @__PURE__ */ r(m, { component: h, variant: "h6", children: f }),
+                c.meta && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", children: c.meta }),
+                c.description && /* @__PURE__ */ r(
+                  m,
                   {
                     variant: "body2",
                     sx: {
@@ -1515,19 +1553,19 @@ function st({
     }
   );
 }
-function pt({
-  title: r,
+function ut({
+  title: e,
   description: t,
   imageUrl: o,
-  platforms: l,
+  platforms: i,
   level: n = 3,
-  platformsLabel: a = "Listen on",
+  platformsLabel: l = "Listen on",
   externalLabel: u = "(opens in a new tab)"
 }) {
-  const f = `h${n}`;
+  const h = `h${n}`;
   return /* @__PURE__ */ d(A, { sx: { height: "100%" }, children: [
-    /* @__PURE__ */ e(
-      p,
+    /* @__PURE__ */ r(
+      s,
       {
         sx: (c) => ({
           aspectRatio: "1 / 1",
@@ -1536,8 +1574,8 @@ function pt({
           bgcolor: c.vietri.color.chip,
           color: c.palette.text.secondary
         }),
-        children: o ? /* @__PURE__ */ e(
-          p,
+        children: o ? /* @__PURE__ */ r(
+          s,
           {
             component: "img",
             src: o,
@@ -1545,38 +1583,38 @@ function pt({
             loading: "lazy",
             sx: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
           }
-        ) : /* @__PURE__ */ e(C, { icon: ee, size: 48 })
+        ) : /* @__PURE__ */ r(S, { icon: re, size: 48 })
       }
     ),
-    /* @__PURE__ */ d(D, { children: [
-      /* @__PURE__ */ e(h, { component: f, variant: "h6", gutterBottom: !0, children: r }),
-      t && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: t }),
-      l.length > 0 && /* @__PURE__ */ e(
-        b,
+    /* @__PURE__ */ d(E, { children: [
+      /* @__PURE__ */ r(m, { component: h, variant: "h6", gutterBottom: !0, children: e }),
+      t && /* @__PURE__ */ r(m, { variant: "body2", color: "text.secondary", children: t }),
+      i.length > 0 && /* @__PURE__ */ r(
+        x,
         {
           component: "ul",
           role: "list",
-          "aria-label": a,
+          "aria-label": l,
           direction: "row",
           spacing: 1,
           useFlexGap: !0,
           flexWrap: "wrap",
           sx: { listStyle: "none", m: 0, mt: 2, p: 0 },
-          children: l.map((c) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
-            z,
+          children: i.map((c) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ d(
+            O,
             {
               variant: "outlined",
               size: "small",
               href: c.href,
               target: "_blank",
               rel: "noopener noreferrer",
-              endIcon: /* @__PURE__ */ e(C, { icon: H, size: 14 }),
+              endIcon: /* @__PURE__ */ r(S, { icon: H, size: 14 }),
               children: [
                 c.name,
-                /* @__PURE__ */ d(N, { children: [
+                /* @__PURE__ */ d(V, { children: [
                   " ",
                   "– ",
-                  r,
+                  e,
                   " ",
                   u
                 ] })
@@ -1588,17 +1626,23 @@ function pt({
     ] })
   ] });
 }
-function R(r, t, o = 135) {
-  return `linear-gradient(${o}deg, ${r} 0%, ${t} 100%)`;
+function k(e, t, o = 135, i) {
+  const n = i ? `, ${i} 60%` : "";
+  return `linear-gradient(${o}deg, ${e} 0%${n}, ${t} 100%)`;
 }
-function Je(r) {
+function Qe(e) {
   return {
-    surface: R(...r.surface),
-    action: R(...r.action),
-    actionHover: R(...r.actionHover)
+    surface: k(
+      e.surface[0],
+      e.surface[1],
+      e.surfaceAngle ?? 135,
+      e.surfaceMid
+    ),
+    action: k(...e.action),
+    actionHover: k(...e.actionHover)
   };
 }
-const y = {
+const C = {
   spacing: 8,
   radius: {
     sm: 4,
@@ -1625,7 +1669,7 @@ const y = {
     lg: 1200,
     xl: 1536
   }
-}, Qe = {
+}, Ke = {
   // Respects the system "reduce motion" preference (WCAG 2.3.3).
   MuiCssBaseline: {
     styleOverrides: `
@@ -1642,43 +1686,71 @@ const y = {
   MuiButton: {
     defaultProps: { disableElevation: !0 },
     styleOverrides: {
-      root: ({ theme: r }) => ({
-        borderRadius: y.radius.md,
-        "&:focus-visible": {
-          outline: `2px solid ${r.palette.primary.main}`,
-          outlineOffset: 2
-        }
-      }),
+      root: ({ theme: e, ownerState: t }) => {
+        const o = t.variant === "outlined" ? 1 : 0, i = !!e.vietri.color.accentLarge;
+        return {
+          borderRadius: C.radius.md,
+          // A generous "large" button, for the main action of a banner.
+          ...t.size === "large" && {
+            minHeight: 52,
+            padding: `${12 - o}px ${32 - o}px`,
+            fontSize: i ? "1.2rem" : "1rem",
+            ...i && { fontWeight: 700 }
+          },
+          "&:focus-visible": {
+            outline: `2px solid ${e.palette.primary.main}`,
+            outlineOffset: 2
+          }
+        };
+      },
+      // Outlined buttons: a neutral line (lilac in the Streaming theme) with the text color,
+      // so they do not compete with the orange action. Hover and focus bring the primary color.
+      outlinedPrimary: ({ theme: e }) => {
+        const t = e.vietri.color.outline;
+        return t ? {
+          borderColor: t,
+          color: e.palette.text.primary,
+          "&:hover": {
+            borderColor: e.palette.primary.main,
+            backgroundColor: y(e.palette.primary.main, 0.14)
+          }
+        } : {};
+      },
       // Primary action fill. Flat in most themes, a soft gradient in the
       // Observatory. The text color meets AA at both ends of the fill.
-      containedPrimary: ({ theme: r }) => ({
-        color: r.vietri.color.onAction,
-        backgroundImage: r.vietri.gradient.action,
-        "&:hover": { backgroundImage: r.vietri.gradient.actionHover },
-        "&.Mui-disabled": {
-          backgroundImage: "none",
-          color: r.palette.action.disabled
-        }
-      })
+      containedPrimary: ({ theme: e, ownerState: t }) => {
+        const { accentLarge: o, accentLargeHover: i } = e.vietri.color, n = t.size === "large" && o;
+        return {
+          color: e.vietri.color.onAction,
+          backgroundImage: n ? k(o, o) : e.vietri.gradient.action,
+          "&:hover": {
+            backgroundImage: n ? k(i ?? o, i ?? o) : e.vietri.gradient.actionHover
+          },
+          "&.Mui-disabled": {
+            backgroundImage: "none",
+            color: e.palette.action.disabled
+          }
+        };
+      }
     }
   },
   MuiLink: {
     styleOverrides: {
-      root: ({ theme: r }) => ({
+      root: ({ theme: e }) => ({
         "&:focus-visible": {
-          outline: `2px solid ${r.palette.primary.main}`,
+          outline: `2px solid ${e.palette.primary.main}`,
           outlineOffset: 3,
-          borderRadius: y.radius.sm
+          borderRadius: C.radius.sm
         }
       })
     }
   },
   MuiChip: {
     styleOverrides: {
-      root: ({ ownerState: r, theme: t }) => {
-        const o = r.variant === "filled" && r.color === "default";
+      root: ({ ownerState: e, theme: t }) => {
+        const o = e.variant === "filled" && e.color === "default";
         return {
-          fontWeight: y.typography.fontWeight.semibold,
+          fontWeight: C.typography.fontWeight.semibold,
           fontSize: "0.75rem",
           // MUI's default chip is translucent, so its text is only readable on
           // the surface it was designed for. Opaque colors keep it legible on
@@ -1698,16 +1770,16 @@ const y = {
     defaultProps: { variant: "outlined" },
     styleOverrides: {
       root: {
-        borderRadius: y.radius.lg,
+        borderRadius: C.radius.lg,
         backgroundImage: "none"
       }
     }
   },
   MuiCardActionArea: {
     styleOverrides: {
-      root: ({ theme: r }) => ({
+      root: ({ theme: e }) => ({
         "&:focus-visible": {
-          outline: `2px solid ${r.palette.primary.main}`,
+          outline: `2px solid ${e.palette.primary.main}`,
           outlineOffset: -2
         }
       })
@@ -1715,7 +1787,7 @@ const y = {
   },
   MuiDialog: {
     styleOverrides: {
-      paper: { borderRadius: y.radius.lg, backgroundImage: "none" }
+      paper: { borderRadius: C.radius.lg, backgroundImage: "none" }
     }
   },
   MuiDrawer: {
@@ -1727,50 +1799,50 @@ const y = {
   // contrast for interface components (WCAG 1.4.11).
   MuiOutlinedInput: {
     styleOverrides: {
-      root: ({ theme: r }) => ({
-        borderRadius: y.radius.md,
+      root: ({ theme: e }) => ({
+        borderRadius: C.radius.md,
         "& .MuiOutlinedInput-notchedOutline": {
-          borderColor: r.palette.text.secondary
+          borderColor: e.palette.text.secondary
         },
         "&:hover .MuiOutlinedInput-notchedOutline": {
-          borderColor: r.palette.text.primary
+          borderColor: e.palette.text.primary
         },
         "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          borderColor: r.palette.primary.main
+          borderColor: e.palette.primary.main
         },
         "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-          borderColor: r.palette.error.main
+          borderColor: e.palette.error.main
         },
         "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
-          borderColor: r.palette.divider
+          borderColor: e.palette.divider
         }
       })
     }
   },
   MuiTableCell: {
     styleOverrides: {
-      root: ({ theme: r }) => ({
-        borderBottomColor: r.palette.divider
+      root: ({ theme: e }) => ({
+        borderBottomColor: e.palette.divider
       }),
-      head: ({ theme: r }) => ({
-        fontWeight: y.typography.fontWeight.semibold,
-        color: r.palette.text.primary,
-        borderBottom: `2px solid ${r.palette.text.primary}`
+      head: ({ theme: e }) => ({
+        fontWeight: C.typography.fontWeight.semibold,
+        color: e.palette.text.primary,
+        borderBottom: `2px solid ${e.palette.text.primary}`
       })
     }
   }
-}, { typography: F, breakpoints: Ke } = y;
-function Ze(r) {
+}, { typography: F, breakpoints: Ze } = C;
+function er(e) {
   return {
-    color: r,
-    shadow: y.shadow,
-    gradient: Je(r)
+    color: e,
+    shadow: C.shadow,
+    gradient: Qe(e)
   };
 }
-const er = {
-  spacing: y.spacing,
-  shape: { borderRadius: y.radius.md },
-  breakpoints: { values: { ...Ke } },
+const rr = {
+  spacing: C.spacing,
+  shape: { borderRadius: C.radius.md },
+  breakpoints: { values: { ...Ze } },
   typography: {
     fontFamily: F.fontFamily,
     fontWeightRegular: F.fontWeight.regular,
@@ -1814,32 +1886,32 @@ const er = {
       letterSpacing: "0.12em"
     }
   },
-  components: Qe
+  components: Ke
 };
-function G(r) {
-  return $e({
-    ...er,
-    vietri: Ze(r),
+function N(e) {
+  return Te({
+    ...rr,
+    vietri: er(e),
     palette: {
-      mode: r.mode,
-      primary: { main: r.primary, contrastText: r.onPrimary },
-      secondary: { main: r.secondary, contrastText: r.onSecondary },
-      error: { main: r.status.error, contrastText: r.onStatus },
-      warning: { main: r.status.warning, contrastText: r.onStatus },
-      info: { main: r.status.info, contrastText: r.onStatus },
-      success: { main: r.status.success, contrastText: r.onStatus },
-      background: { default: r.bg, paper: r.paper },
-      text: { primary: r.ink, secondary: r.inkSoft },
-      divider: r.line
+      mode: e.mode,
+      primary: { main: e.primary, contrastText: e.onPrimary },
+      secondary: { main: e.secondary, contrastText: e.onSecondary },
+      error: { main: e.status.error, contrastText: e.onStatus },
+      warning: { main: e.status.warning, contrastText: e.onStatus },
+      info: { main: e.status.info, contrastText: e.onStatus },
+      success: { main: e.status.success, contrastText: e.onStatus },
+      background: { default: e.bg, paper: e.paper },
+      text: { primary: e.ink, secondary: e.inkSoft },
+      divider: e.line
     }
   });
 }
-const k = (r) => [r, r], rr = {
+const B = (e) => [e, e], tr = {
   error: "#B91C1C",
   warning: "#92400E",
   info: "#0369A1",
   success: "#166534"
-}, tr = {
+}, or = {
   mode: "light",
   bg: "#FFFFFF",
   paper: "#FFFFFF",
@@ -1850,10 +1922,10 @@ const k = (r) => [r, r], rr = {
   onPrimary: "#FFFFFF",
   secondary: "#7A5718",
   onSecondary: "#FFFFFF",
-  action: k("#DBAC5B"),
-  actionHover: k("#FDD07A"),
+  action: B("#DBAC5B"),
+  actionHover: B("#FDD07A"),
   onAction: "#000000",
-  surface: k("#000000"),
+  surface: B("#000000"),
   scrim: "#000000",
   onSurface: "#FFFFFF",
   onSurfaceSoft: "#D4D4D4",
@@ -1861,7 +1933,7 @@ const k = (r) => [r, r], rr = {
   chipHover: "#E8DDC4",
   onChip: "#111111",
   glow: null,
-  status: rr,
+  status: tr,
   onStatus: "#FFFFFF",
   brand: {
     black: "#000000",
@@ -1875,24 +1947,34 @@ const k = (r) => [r, r], rr = {
     ink: "#111111",
     inkSoft: "#555555"
   }
-}, or = {
+}, ir = {
   mode: "dark",
   bg: "#20123A",
   paper: "#2D1B50",
   ink: "#FFFFFF",
   inkSoft: "#D5CAEB",
   line: "rgba(255, 255, 255, 0.14)",
-  primary: "#1CDAF3",
+  // Orange as text, outline and focus ring on dark backgrounds (6.3:1 on night, 5.5:1 on cards).
+  primary: "#F4793F",
   onPrimary: "#20123A",
   secondary: "#B99BFF",
   onSecondary: "#20123A",
-  action: k("#1CDAF3"),
-  actionHover: k("#6AE9FA"),
-  onAction: "#20123A",
-  // Violet to lavender. The lavender end is #816CB2 darkened a hair (#7A64AE):
-  // the exact #816CB2 gives white text 4.45:1, just under the 4.5:1 minimum.
-  surface: ["#693BCC", "#7A64AE"],
-  scrim: "#20123A",
+  // Button fill: a burnt orange that holds white text at 4.8:1 (the brand orange gives 3.2:1).
+  action: B("#C8460B"),
+  actionHover: B("#B63F0A"),
+  onAction: "#FFFFFF",
+  // The line of outlined buttons: lilac (7.6:1 on the page, 6.6:1 on the cards).
+  outline: "#B99BFF",
+  // The brand orange, for large buttons (their bold label is large text) and for the
+  // short rule under a hero title.
+  accentLarge: "#F35F1C",
+  accentLargeHover: "#DE520F",
+  // A flat violet: white text at 12.9:1. A thin orange rule marks the top of the footer.
+  surface: ["#3B2562", "#3B2562"],
+  surfaceRule: "#F35F1C",
+  // The layer over a hero photo: the brightest violet that keeps white text at 4.5:1
+  // over a pure white photo with the layer at 74%.
+  scrim: "#4E2B8B",
   onSurface: "#FFFFFF",
   onSurfaceSoft: "#F7F3FF",
   chip: "#3C2866",
@@ -1911,19 +1993,26 @@ const k = (r) => [r, r], rr = {
     violet: "#693BCC",
     lavender: "#816CB2",
     magenta: "#CB1F9C",
-    cyan: "#1CDAF3"
+    /** The brand orange. */
+    orange: "#F35F1C"
   },
   derived: {
-    /** Lavender darkened to carry white text at 4.5:1 (the end of the surface gradient). */
-    lavenderDeep: "#7A64AE",
     /** Violet that reads as text on the night background (7.6:1). */
     lilac: "#B99BFF",
     /** Raised surface over night. */
     nightRaised: "#2D1B50",
-    /** Hovered primary action (12:1 with the dark text). */
-    cyanHover: "#6AE9FA"
+    /** Orange for text and outlines on dark backgrounds. */
+    orangeText: "#F4793F",
+    /** Burnt orange of the button fill (white text at 4.8:1). */
+    orangeDeep: "#C8460B",
+    /** Hovered button fill, darker (white text at 5.7:1). */
+    orangeHover: "#B63F0A",
+    /** Violet of the hero layer. */
+    layerViolet: "#4E2B8B",
+    /** The flat violet of the footer. */
+    footerViolet: "#3B2562"
   }
-}, ir = {
+}, nr = {
   mode: "light",
   bg: "#F7F4FA",
   paper: "#FFFFFF",
@@ -1936,10 +2025,10 @@ const k = (r) => [r, r], rr = {
   onPrimary: "#FFFFFF",
   secondary: "#4A0875",
   onSecondary: "#FFFFFF",
-  action: k("#027381"),
-  actionHover: k("#015C68"),
+  action: B("#027381"),
+  actionHover: B("#015C68"),
   onAction: "#FFFFFF",
-  surface: k("#4A0875"),
+  surface: B("#4A0875"),
   scrim: "#2B1B3D",
   onSurface: "#FFFFFF",
   onSurfaceSoft: "#E8DCF4",
@@ -1974,7 +2063,7 @@ const k = (r) => [r, r], rr = {
     /** Teal for the hovered primary action (7.7:1 with white). */
     tealDark: "#015C68"
   }
-}, ut = G(tr), ht = G(or), mt = G(ir), nr = [
+}, mt = N(or), ht = N(ir), ft = N(nr), ar = [
   { bg: "#E0F2FE", fg: "#0C4A6E", dot: "#0284C7" },
   // sky
   { bg: "#EDE9FE", fg: "#4C1D95", dot: "#7C3AED" },
@@ -1996,13 +2085,13 @@ const k = (r) => [r, r], rr = {
   { bg: "#ECFCCB", fg: "#365314", dot: "#65A30D" }
   // lime
 ];
-function ft(r, t = nr) {
-  const o = Array.from(new Set(r));
+function gt(e, t = ar) {
+  const o = Array.from(new Set(e));
   return Object.fromEntries(
-    o.map((l, n) => [l, t[n % t.length]])
+    o.map((i, n) => [i, t[n % t.length]])
   );
 }
-const gt = [
+const bt = [
   { bg: "#027381", fg: "#FFFFFF", dot: "#027381" },
   // teal
   { bg: "#FF7751", fg: "#2B1B3D", dot: "#C2410C" },
@@ -2019,55 +2108,55 @@ const gt = [
   // vermilion
 ];
 export {
-  Xr as BarChart,
-  yt as Button,
-  St as Card,
+  Yr as BarChart,
+  Ct as Button,
+  wt as Card,
   kt as CardActionArea,
   At as CardActions,
-  Et as CardContent,
-  Wt as CardMedia,
-  Ue as CategoryChip,
-  $t as Chip,
-  ct as ContentRail,
-  et as CopyField,
-  Ur as DataTable,
-  Kr as Dialog,
-  Zr as Drawer,
-  st as EpisodeList,
-  ot as FeatureCard,
-  qr as Footer,
-  tt as Hero,
-  C as Icon,
-  Ot as Input,
-  Vr as LanguageSwitch,
-  lt as MediaCard,
+  It as CardContent,
+  Mt as CardMedia,
+  Xe as CategoryChip,
+  Tt as Chip,
+  dt as ContentRail,
+  rt as CopyField,
+  Xr as DataTable,
+  Zr as Dialog,
+  et as Drawer,
+  pt as EpisodeList,
+  it as FeatureCard,
+  Jr as Footer,
+  ot as Hero,
+  S as Icon,
+  zt as Input,
+  Ur as LanguageSwitch,
+  ct as MediaCard,
   Gr as NavBar,
-  pt as PlaylistCard,
-  at as ProfileCard,
-  Jr as SectionHeader,
-  Qr as Select,
-  rt as SkipLink,
+  ut as PlaylistCard,
+  lt as ProfileCard,
+  Qr as SectionHeader,
+  Kr as Select,
+  tt as SkipLink,
   _r as StatCard,
-  it as Steps,
-  zt as Tab,
+  nt as Steps,
+  Ht as Tab,
   Pt as Tabs,
-  nt as Timeline,
-  vt as Typography,
-  dt as VideoEmbed,
-  N as VisuallyHidden,
-  nr as categoryPalette,
-  ft as createCategoryColors,
-  Je as createGradients,
-  G as createVietriTheme,
-  tr as editorialColors,
-  ut as editorialTheme,
-  Yr as icons,
-  R as linearGradient,
-  gt as observatoryCategoryPalette,
-  ir as observatoryColors,
-  mt as observatoryTheme,
-  or as streamingColors,
+  at as Timeline,
+  Ft as Typography,
+  st as VideoEmbed,
+  V as VisuallyHidden,
+  ar as categoryPalette,
+  gt as createCategoryColors,
+  Qe as createGradients,
+  N as createVietriTheme,
+  or as editorialColors,
+  mt as editorialTheme,
+  qr as icons,
+  k as linearGradient,
+  bt as observatoryCategoryPalette,
+  nr as observatoryColors,
+  ft as observatoryTheme,
+  ir as streamingColors,
   ht as streamingTheme,
-  y as tokens
+  C as tokens
 };
 //# sourceMappingURL=index.js.map