@sorayasm/vietri-ds 0.2.2 → 0.3.1

package/dist/index.js

@@ -1,85 +1,85 @@
-import { jsxs as d, jsx as e, Fragment as W } from "react/jsx-runtime";
-import s from "@mui/material/Box";
-import g from "@mui/material/Stack";
+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 xr } from "@mui/material/Typography";
+import { default as vt } from "@mui/material/Typography";
 import z from "@mui/material/Button";
-import { default as Fr } from "@mui/material/Button";
-import B from "@mui/material/Card";
-import { default as Cr } from "@mui/material/Card";
-import { default as wr } from "@mui/material/CardActionArea";
-import { default as kr } from "@mui/material/CardActions";
-import k from "@mui/material/CardContent";
-import { default as Er } from "@mui/material/CardContent";
-import { default as Ir } from "@mui/material/CardMedia";
-import U from "@mui/material/Chip";
-import { default as Mr } from "@mui/material/Chip";
-import { useState as I, useMemo as oe, useId as D, useRef as E, useEffect as X, Children as ie } from "react";
-import w from "@mui/material/IconButton";
-import { ArrowRight as ne, Check as Y, ChevronDown as ae, ChevronLeft as q, ChevronRight as Q, Clock as le, Copy as J, Database as ce, ExternalLink as $, Globe as de, Info as se, LayoutGrid as pe, MapPin as ue, Menu as he, Music as K, Network as me, Play as H, Search as fe, Share2 as ge, ShieldCheck as be, Sparkles as xe, TrendingUp as ve, Users as Fe, X as L } from "lucide-react";
-import ye from "@mui/material/Table";
-import Ce from "@mui/material/TableBody";
-import M from "@mui/material/TableCell";
-import Se from "@mui/material/TableContainer";
-import we from "@mui/material/TableHead";
-import T from "@mui/material/TableRow";
+import { default as yt } from "@mui/material/Button";
+import A from "@mui/material/Card";
+import { default as St } 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 ke from "@mui/material/TableHead";
+import O from "@mui/material/TableRow";
 import Be from "@mui/material/TableSortLabel";
-import ke from "@mui/material/DialogActions";
+import Ae from "@mui/material/DialogActions";
 import De from "@mui/material/DialogContent";
 import Ee from "@mui/material/DialogContentText";
-import Ae from "@mui/material/DialogTitle";
-import Ie from "@mui/material/Dialog";
-import Z from "@mui/material/Drawer";
-import C from "@mui/material/Link";
-import P from "@mui/material/Container";
-import We from "@mui/material/Divider";
-import { useTheme as ee, alpha as O, createTheme as Me } from "@mui/material/styles";
+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 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 Or } 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 $e from "@mui/material/SvgIcon";
-import He from "@mui/material/Toolbar";
+import He from "@mui/material/SvgIcon";
+import Pe from "@mui/material/Toolbar";
 import Le from "@mui/material/useMediaQuery";
-import Pe from "@mui/material/MenuItem";
-import { default as zr } from "@mui/material/Tab";
-import { default as Hr } from "@mui/material/Tabs";
-import je from "@mui/material/ButtonBase";
+import je from "@mui/material/MenuItem";
+import { default as zt } from "@mui/material/Tab";
+import { default as Pt } from "@mui/material/Tabs";
+import Ne from "@mui/material/ButtonBase";
 function Ge() {
-  return /* @__PURE__ */ e($e, { children: /* @__PURE__ */ e("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
+  return /* @__PURE__ */ e(He, { children: /* @__PURE__ */ e("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
 }
-function V({
-  link: t,
-  onClick: r
+function _({
+  link: r,
+  onClick: t
 }) {
   return /* @__PURE__ */ e(
-    C,
+    S,
     {
-      href: t.href,
+      href: r.href,
       underline: "none",
-      "aria-current": t.current ? "page" : void 0,
-      onClick: r,
+      "aria-current": r.current ? "page" : void 0,
+      onClick: t,
       sx: {
-        color: t.current ? "text.primary" : "text.secondary",
-        fontWeight: t.current ? 600 : 500,
+        color: r.current ? "text.primary" : "text.secondary",
+        fontWeight: r.current ? 600 : 500,
         "&:hover": { color: "text.primary" }
       },
-      children: t.label
+      children: r.label
     }
   );
 }
-function Gt({
-  brand: t,
-  brandHref: r = "/",
+function Gr({
+  brand: r,
+  brandHref: t = "/",
   links: o,
-  actions: c,
+  actions: l,
   ariaLabel: n = "Main",
   menuLabel: a = "Menu",
-  closeLabel: p = "Close menu",
-  maxWidth: m = "lg"
+  closeLabel: u = "Close menu",
+  maxWidth: f = "lg"
 }) {
-  const l = ee(), i = Le(l.breakpoints.up("md"), { noSsr: !0 }), [u, f] = I(!1), x = () => f(!1);
+  const c = te(), i = Le(c.breakpoints.up("md"), { noSsr: !0 }), [s, m] = M(!1), g = () => m(!1);
   return /* @__PURE__ */ d(
     ze,
     {
@@ -94,8 +94,8 @@ function Gt({
         borderColor: "divider"
       },
       children: [
-        /* @__PURE__ */ e(P, { maxWidth: m, children: /* @__PURE__ */ d(
-          He,
+        /* @__PURE__ */ e(j, { maxWidth: f, children: /* @__PURE__ */ d(
+          Pe,
           {
             disableGutters: !0,
             sx: {
@@ -105,37 +105,37 @@ function Gt({
             },
             children: [
               /* @__PURE__ */ e(
-                C,
+                S,
                 {
-                  href: r,
+                  href: t,
                   underline: "none",
                   color: "text.primary",
                   sx: { fontWeight: 600, letterSpacing: "-0.03em", fontSize: "1.125rem" },
-                  children: t
+                  children: r
                 }
               ),
-              i ? /* @__PURE__ */ d(g, { direction: "row", alignItems: "center", spacing: 4, children: [
-                /* @__PURE__ */ e(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
-                  g,
+              i ? /* @__PURE__ */ d(b, { direction: "row", alignItems: "center", spacing: 4, children: [
+                /* @__PURE__ */ e(p, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
+                  b,
                   {
                     component: "ul",
                     direction: "row",
                     spacing: 4,
                     sx: { listStyle: "none", m: 0, p: 0 },
-                    children: o.map((b) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(V, { link: b }) }, b.href))
+                    children: o.map((x) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(_, { link: x }) }, x.href))
                   }
                 ) }),
-                c
-              ] }) : /* @__PURE__ */ d(g, { direction: "row", alignItems: "center", spacing: 1, children: [
-                c,
+                l
+              ] }) : /* @__PURE__ */ d(b, { direction: "row", alignItems: "center", spacing: 1, children: [
+                l,
                 /* @__PURE__ */ e(
-                  w,
+                  B,
                   {
                     edge: "end",
                     color: "inherit",
                     "aria-label": a,
-                    "aria-expanded": u,
-                    onClick: () => f(!0),
+                    "aria-expanded": s,
+                    onClick: () => m(!0),
                     children: /* @__PURE__ */ e(Ge, {})
                   }
                 )
@@ -143,15 +143,15 @@ function Gt({
             ]
           }
         ) }),
-        !i && /* @__PURE__ */ e(Z, { anchor: "right", open: u, onClose: x, children: /* @__PURE__ */ d(s, { sx: { width: 280, p: 3 }, children: [
-          /* @__PURE__ */ e(g, { alignItems: "flex-end", sx: { mb: 3 }, children: /* @__PURE__ */ e(z, { variant: "text", color: "secondary", onClick: x, children: p }) }),
-          /* @__PURE__ */ e(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
-            g,
+        !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,
             {
               component: "ul",
               spacing: 3,
               sx: { listStyle: "none", m: 0, p: 0, fontSize: "1.25rem" },
-              children: o.map((b) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(V, { link: b, onClick: x }) }, b.href))
+              children: o.map((x) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(_, { link: x, onClick: g }) }, x.href))
             }
           ) })
         ] }) })
@@ -163,90 +163,90 @@ const Ve = [
   { value: "en", label: "EN" },
   { value: "es", label: "ES" }
 ];
-function Vt({
-  value: t,
-  onChange: r,
+function Vr({
+  value: r,
+  onChange: t,
   options: o = Ve,
-  ariaLabel: c = "Language"
+  ariaLabel: l = "Language"
 }) {
   return /* @__PURE__ */ e(
     Re,
     {
       exclusive: !0,
       size: "small",
-      value: t,
-      "aria-label": c,
+      value: r,
+      "aria-label": l,
       onChange: (n, a) => {
-        a !== null && r(a);
+        a !== null && t(a);
       },
       children: o.map((n) => /* @__PURE__ */ e(Oe, { value: n.value, children: n.label }, n.value))
     }
   );
 }
-function Nt({ value: t, label: r, description: o }) {
-  return /* @__PURE__ */ e(B, { children: /* @__PURE__ */ d(k, { children: [
-    /* @__PURE__ */ e(h, { variant: "h3", component: "p", children: t }),
-    /* @__PURE__ */ e(h, { variant: "body1", sx: { mt: 1 }, children: r }),
+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 te(t, r) {
-  return t[r.key];
+function oe(r, t) {
+  return r[t.key];
 }
-function N(t, r) {
-  if (r.sortValue) return r.sortValue(t);
-  const o = te(t, r);
+function U(r, t) {
+  if (t.sortValue) return t.sortValue(r);
+  const o = oe(r, t);
   return typeof o == "number" ? o : String(o ?? "");
 }
-function Ne(t, r) {
-  return typeof t == "number" && typeof r == "number" ? t - r : String(t).localeCompare(String(r), void 0, { numeric: !0 });
+function _e(r, t) {
+  return typeof r == "number" && typeof t == "number" ? r - t : String(r).localeCompare(String(t), void 0, { numeric: !0 });
 }
-function _t({
-  columns: t,
-  rows: r,
+function Ur({
+  columns: r,
+  rows: t,
   getRowKey: o,
-  caption: c,
+  caption: l,
   emptyMessage: n = "No data"
 }) {
-  const [a, p] = I(
+  const [a, u] = M(
     null
-  ), m = oe(() => {
-    if (!a) return r;
-    const i = t.find((f) => f.key === a.key);
-    if (!i) return r;
-    const u = a.direction === "asc" ? 1 : -1;
-    return [...r].sort(
-      (f, x) => u * Ne(N(f, i), N(x, i))
+  ), f = ie(() => {
+    if (!a) return t;
+    const i = r.find((m) => m.key === a.key);
+    if (!i) return t;
+    const s = a.direction === "asc" ? 1 : -1;
+    return [...t].sort(
+      (m, g) => s * _e(U(m, i), U(g, i))
     );
-  }, [r, t, a]), l = (i) => {
-    p(
-      (u) => u?.key === i && u.direction === "asc" ? { key: i, direction: "desc" } : { key: i, direction: "asc" }
+  }, [t, r, a]), c = (i) => {
+    u(
+      (s) => s?.key === i && s.direction === "asc" ? { key: i, direction: "desc" } : { key: i, direction: "asc" }
     );
   };
-  return /* @__PURE__ */ e(Se, { tabIndex: 0, sx: { overflowX: "auto" }, children: /* @__PURE__ */ d(ye, { children: [
-    c && /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(we, { tabIndex: 0, sx: { overflowX: "auto" }, children: /* @__PURE__ */ d(Ce, { children: [
+    l && /* @__PURE__ */ e(
       h,
       {
         component: "caption",
         variant: "body2",
         color: "text.secondary",
         sx: { captionSide: "top", textAlign: "left", pb: 2 },
-        children: c
+        children: l
       }
     ),
-    /* @__PURE__ */ e(we, { children: /* @__PURE__ */ e(T, { children: t.map((i) => {
-      const u = a?.key === i.key ? a.direction : void 0;
+    /* @__PURE__ */ e(ke, { children: /* @__PURE__ */ e(O, { children: r.map((i) => {
+      const s = a?.key === i.key ? a.direction : void 0;
       return /* @__PURE__ */ e(
-        M,
+        T,
         {
           align: i.align,
-          sortDirection: u ?? !1,
+          sortDirection: s ?? !1,
           children: i.sortable ? /* @__PURE__ */ e(
             Be,
             {
-              active: u !== void 0,
-              direction: u ?? "asc",
-              onClick: () => l(i.key),
+              active: s !== void 0,
+              direction: s ?? "asc",
+              onClick: () => c(i.key),
               children: i.header
             }
           ) : i.header
@@ -254,40 +254,40 @@ function _t({
         i.key
       );
     }) }) }),
-    /* @__PURE__ */ e(Ce, { children: m.length === 0 ? /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(M, { colSpan: t.length, align: "center", children: n }) }) : m.map((i) => /* @__PURE__ */ e(T, { children: t.map((u, f) => /* @__PURE__ */ e(
-      M,
+    /* @__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,
       {
-        align: u.align,
-        component: f === 0 ? "th" : "td",
-        scope: f === 0 ? "row" : void 0,
-        children: u.render ? u.render(i) : String(te(i, u) ?? "")
+        align: s.align,
+        component: m === 0 ? "th" : "td",
+        scope: m === 0 ? "row" : void 0,
+        children: s.render ? s.render(i) : String(oe(i, s) ?? "")
       },
-      u.key
+      s.key
     )) }, o(i))) })
   ] }) });
 }
-function Ut({
-  data: t,
-  title: r,
+function Xr({
+  data: r,
+  title: t,
   max: o,
-  formatValue: c = String
+  formatValue: l = String
 }) {
-  const n = o ?? Math.max(0, ...t.map((a) => a.value));
-  return /* @__PURE__ */ d(s, { component: "figure", sx: { m: 0 }, children: [
-    r && /* @__PURE__ */ e(
+  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,
       {
         component: "figcaption",
         variant: "overline",
         color: "text.secondary",
         sx: { display: "block", mb: 2 },
-        children: r
+        children: t
       }
     ),
-    /* @__PURE__ */ e(g, { component: "ul", spacing: 1.5, sx: { listStyle: "none", m: 0, p: 0 }, children: t.map((a) => {
-      const p = n > 0 ? Math.min(100, Math.max(0, a.value / n * 100)) : 0, m = c(a.value);
+    /* @__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);
       return /* @__PURE__ */ d(
-        s,
+        p,
         {
           component: "li",
           sx: {
@@ -299,14 +299,14 @@ function Ut({
           children: [
             /* @__PURE__ */ e(h, { variant: "body2", "aria-hidden": "true", children: a.label }),
             /* @__PURE__ */ e(
-              s,
+              p,
               {
                 role: "meter",
                 "aria-label": a.label,
                 "aria-valuemin": 0,
                 "aria-valuemax": n,
                 "aria-valuenow": a.value,
-                "aria-valuetext": m,
+                "aria-valuetext": f,
                 sx: {
                   height: 12,
                   borderRadius: 1,
@@ -314,9 +314,9 @@ function Ut({
                   overflow: "hidden"
                 },
                 children: /* @__PURE__ */ e(
-                  s,
+                  p,
                   {
-                    style: { width: `${p}%` },
+                    style: { width: `${u}%` },
                     sx: { height: "100%", bgcolor: "primary.main" }
                   }
                 )
@@ -328,7 +328,7 @@ function Ut({
                 variant: "body2",
                 "aria-hidden": "true",
                 sx: { minWidth: 40, textAlign: "right", fontWeight: 600 },
-                children: m
+                children: f
               }
             )
           ]
@@ -338,62 +338,62 @@ function Ut({
     }) })
   ] });
 }
-function y({ icon: t, label: r, size: o = 18, ...c }) {
-  return r ? /* @__PURE__ */ e(t, { size: o, role: "img", "aria-label": r, ...c }) : /* @__PURE__ */ e(t, { size: o, "aria-hidden": "true", focusable: "false", ...c });
+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 });
 }
-const Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Yr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ArrowRight: ne,
-  Check: Y,
-  ChevronDown: ae,
-  ChevronLeft: q,
-  ChevronRight: Q,
-  Clock: le,
-  Copy: J,
-  Database: ce,
-  ExternalLink: $,
-  Globe: de,
-  Info: se,
-  LayoutGrid: pe,
-  MapPin: ue,
-  Menu: he,
-  Music: K,
-  Network: me,
-  Play: H,
-  Search: fe,
-  Share2: ge,
-  ShieldCheck: be,
-  Sparkles: xe,
-  TrendingUp: ve,
-  Users: Fe,
+  ArrowRight: ae,
+  Check: J,
+  ChevronDown: le,
+  ChevronLeft: Q,
+  ChevronRight: K,
+  Clock: ce,
+  Copy: Z,
+  Database: de,
+  ExternalLink: H,
+  Globe: se,
+  Info: pe,
+  LayoutGrid: ue,
+  MapPin: he,
+  Menu: me,
+  Music: ee,
+  Network: fe,
+  Play: P,
+  Search: ge,
+  Share2: be,
+  ShieldCheck: xe,
+  Sparkles: ve,
+  TrendingUp: Fe,
+  Users: ye,
   X: L
 }, Symbol.toStringTag, { value: "Module" }));
-function _e({ color: t, dot: r = !1, ...o }) {
+function Ue({ color: r, dot: t = !1, ...o }) {
   return /* @__PURE__ */ e(
-    U,
+    Y,
     {
       size: "small",
       ...o,
-      icon: r ? /* @__PURE__ */ e(
-        s,
+      icon: t ? /* @__PURE__ */ e(
+        p,
         {
           component: "span",
           "aria-hidden": "true",
-          sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: t.fg }
+          sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: r.fg }
         }
       ) : void 0,
       sx: {
-        bgcolor: t.bg,
-        color: t.fg,
-        "&.MuiChip-clickable:hover": { bgcolor: t.bg, filter: "brightness(0.95)" },
-        "& .MuiChip-icon": { color: t.fg, ml: 1, mr: -0.25 }
+        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 }
       }
     }
   );
 }
-function j(t) {
+function N(r) {
   return /* @__PURE__ */ e(
-    s,
+    p,
     {
       component: "span",
       sx: {
@@ -407,23 +407,23 @@ function j(t) {
         whiteSpace: "nowrap",
         width: "1px"
       },
-      ...t
+      ...r
     }
   );
 }
-function Yt({
-  title: t,
-  description: r,
+function qr({
+  title: r,
+  description: t,
   lines: o = [],
-  links: c = [],
+  links: l = [],
   linksLabel: n = "Footer links",
   action: a,
-  legal: p,
-  externalLabel: m = "(opens in a new tab)"
+  legal: u,
+  externalLabel: f = "(opens in a new tab)"
 }) {
-  const { glow: l } = ee().vietri.color;
+  const { glow: c } = te().vietri.color;
   return /* @__PURE__ */ d(
-    s,
+    p,
     {
       component: "footer",
       sx: (i) => ({
@@ -440,9 +440,9 @@ function Yt({
         }
       }),
       children: [
-        l && /* @__PURE__ */ d(W, { children: [
+        c && /* @__PURE__ */ d($, { children: [
           /* @__PURE__ */ e(
-            s,
+            p,
             {
               "aria-hidden": "true",
               sx: {
@@ -452,14 +452,14 @@ function Yt({
                 width: 384,
                 height: 384,
                 borderRadius: "50%",
-                bgcolor: O(l[0], 0.22),
+                bgcolor: w(c[0], 0.22),
                 filter: "blur(64px)",
                 pointerEvents: "none"
               }
             }
           ),
           /* @__PURE__ */ e(
-            s,
+            p,
             {
               "aria-hidden": "true",
               sx: {
@@ -469,25 +469,25 @@ function Yt({
                 width: 384,
                 height: 384,
                 borderRadius: "50%",
-                bgcolor: O(l[1], 0.22),
+                bgcolor: w(c[1], 0.22),
                 filter: "blur(64px)",
                 pointerEvents: "none"
               }
             }
           )
         ] }),
-        /* @__PURE__ */ d(P, { maxWidth: "lg", sx: { position: "relative", zIndex: 1 }, children: [
+        /* @__PURE__ */ d(j, { maxWidth: "lg", sx: { position: "relative", zIndex: 1 }, children: [
           /* @__PURE__ */ d(
-            g,
+            b,
             {
               direction: { xs: "column", sm: "row" },
               justifyContent: "space-between",
               alignItems: { xs: "flex-start", sm: "center" },
               spacing: 4,
               children: [
-                /* @__PURE__ */ d(g, { spacing: 1, children: [
-                  /* @__PURE__ */ e(h, { component: "p", variant: "h6", children: t }),
-                  r && /* @__PURE__ */ e(
+                /* @__PURE__ */ d(b, { spacing: 1, children: [
+                  /* @__PURE__ */ e(h, { component: "p", variant: "h6", children: r }),
+                  t && /* @__PURE__ */ e(
                     h,
                     {
                       variant: "body2",
@@ -495,22 +495,22 @@ function Yt({
                         maxWidth: 560,
                         color: i.vietri.color.onSurfaceSoft
                       }),
-                      children: r
+                      children: t
                     }
                   ),
                   o.map((i) => /* @__PURE__ */ e(
                     h,
                     {
                       variant: "body2",
-                      sx: (u) => ({ color: u.vietri.color.onSurfaceSoft }),
+                      sx: (s) => ({ color: s.vietri.color.onSurfaceSoft }),
                       children: i
                     },
                     i
                   ))
                 ] }),
-                /* @__PURE__ */ d(g, { spacing: 2, alignItems: { xs: "flex-start", sm: "flex-end" }, children: [
-                  c.length > 0 && /* @__PURE__ */ e(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
-                    g,
+                /* @__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,
                     {
                       component: "ul",
                       direction: "row",
@@ -518,8 +518,8 @@ function Yt({
                       useFlexGap: !0,
                       flexWrap: "wrap",
                       sx: { listStyle: "none", m: 0, p: 0 },
-                      children: c.map((i) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
-                        C,
+                      children: l.map((i) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
+                        S,
                         {
                           href: i.href,
                           color: "inherit",
@@ -529,9 +529,9 @@ function Yt({
                           sx: { display: "inline-flex", alignItems: "center", gap: 0.5 },
                           children: [
                             i.label,
-                            i.external && /* @__PURE__ */ d(W, { children: [
-                              /* @__PURE__ */ e(y, { icon: $, size: 14 }),
-                              /* @__PURE__ */ e(j, { children: m })
+                            i.external && /* @__PURE__ */ d($, { children: [
+                              /* @__PURE__ */ e(C, { icon: H, size: 14 }),
+                              /* @__PURE__ */ e(N, { children: f })
                             ] })
                           ]
                         }
@@ -543,13 +543,13 @@ function Yt({
               ]
             }
           ),
-          p && /* @__PURE__ */ d(W, { children: [
+          u && /* @__PURE__ */ d($, { children: [
             /* @__PURE__ */ e(
-              We,
+              Me,
               {
                 sx: (i) => ({
                   my: 3,
-                  borderColor: O(i.vietri.color.onSurface, 0.25)
+                  borderColor: w(i.vietri.color.onSurface, 0.25)
                 })
               }
             ),
@@ -558,7 +558,7 @@ function Yt({
               {
                 variant: "body2",
                 sx: (i) => ({ color: i.vietri.color.onSurfaceSoft }),
-                children: p
+                children: u
               }
             )
           ] })
@@ -567,132 +567,132 @@ function Yt({
     }
   );
 }
-function qt({
-  title: t,
-  eyebrow: r,
+function Jr({
+  title: r,
+  eyebrow: t,
   description: o,
-  level: c = 2,
+  level: l = 2,
   align: n = "left"
 }) {
-  const a = `h${c}`;
-  return /* @__PURE__ */ d(g, { spacing: 1, sx: { textAlign: n, alignItems: n === "center" ? "center" : "flex-start" }, children: [
-    r && /* @__PURE__ */ e(
+  const a = `h${l}`;
+  return /* @__PURE__ */ d(b, { spacing: 1, sx: { textAlign: n, alignItems: n === "center" ? "center" : "flex-start" }, children: [
+    t && /* @__PURE__ */ e(
       h,
       {
         component: "p",
         variant: "overline",
         color: "primary.main",
         sx: { display: "inline-flex", alignItems: "center", gap: 0.75, lineHeight: 1.5 },
-        children: r
+        children: t
       }
     ),
-    /* @__PURE__ */ e(h, { component: a, variant: "h3", 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 })
   ] });
 }
-function Qt({
-  label: t,
-  value: r,
+function Qr({
+  label: r,
+  value: t,
   onChange: o,
-  options: c,
+  options: l,
   helperText: n,
   disabled: a,
-  fullWidth: p,
-  size: m,
-  id: l
+  fullWidth: u,
+  size: f,
+  id: c
 }) {
-  const i = new Map(c.map((u) => [u.value, u]));
+  const i = new Map(l.map((s) => [s.value, s]));
   return /* @__PURE__ */ e(
     Te,
     {
       select: !0,
-      id: l,
-      label: t,
-      value: r,
-      onChange: (u) => o(u.target.value),
+      id: c,
+      label: r,
+      value: t,
+      onChange: (s) => o(s.target.value),
       helperText: n,
       disabled: a,
-      fullWidth: p,
-      size: m,
+      fullWidth: u,
+      size: f,
       slotProps: {
         select: {
-          renderValue: (u) => {
-            const f = i.get(String(u));
-            return f ? /* @__PURE__ */ d(s, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 1 }, children: [
-              f.adornment,
-              f.label
+          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
             ] }) : "";
           }
         }
       },
-      children: c.map((u) => /* @__PURE__ */ d(Pe, { value: u.value, sx: { gap: 1 }, children: [
-        u.adornment,
-        u.label,
-        u.count !== void 0 && /* @__PURE__ */ e(h, { component: "span", variant: "caption", color: "text.secondary", sx: { ml: "auto", pl: 2 }, children: u.count })
-      ] }, u.value))
+      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))
     }
   );
 }
-function Jt({
-  open: t,
-  onClose: r,
+function Kr({
+  open: r,
+  onClose: t,
   title: o,
-  description: c,
+  description: l,
   children: n,
   actions: a,
-  closeLabel: p = "Close",
-  maxWidth: m = "sm"
+  closeLabel: u = "Close",
+  maxWidth: f = "sm"
 }) {
-  const l = D(), i = D();
+  const c = E(), i = E();
   return /* @__PURE__ */ d(
-    Ie,
+    We,
     {
-      open: t,
-      onClose: r,
+      open: r,
+      onClose: t,
       fullWidth: !0,
-      maxWidth: m,
-      "aria-labelledby": l,
-      "aria-describedby": c ? i : void 0,
+      maxWidth: f,
+      "aria-labelledby": c,
+      "aria-describedby": l ? i : void 0,
       children: [
-        /* @__PURE__ */ e(Ae, { id: l, sx: { pr: 7 }, children: o }),
+        /* @__PURE__ */ e(Ie, { id: c, sx: { pr: 7 }, children: o }),
         /* @__PURE__ */ e(
-          w,
+          B,
           {
-            "aria-label": p,
-            onClick: r,
+            "aria-label": u,
+            onClick: t,
             sx: { position: "absolute", top: 8, right: 8 },
-            children: /* @__PURE__ */ e(y, { icon: L })
+            children: /* @__PURE__ */ e(C, { icon: L })
           }
         ),
         /* @__PURE__ */ d(De, { children: [
-          c && /* @__PURE__ */ e(Ee, { id: i, sx: { mb: n ? 2 : 0 }, children: c }),
+          l && /* @__PURE__ */ e(Ee, { id: i, sx: { mb: n ? 2 : 0 }, children: l }),
           n
         ] }),
-        a && /* @__PURE__ */ e(ke, { sx: { px: 3, pb: 2 }, children: a })
+        a && /* @__PURE__ */ e(Ae, { sx: { px: 3, pb: 2 }, children: a })
       ]
     }
   );
 }
-function Kt({
-  open: t,
-  onClose: r,
+function Zr({
+  open: r,
+  onClose: t,
   title: o,
-  eyebrow: c,
+  eyebrow: l,
   children: n,
   footer: a,
-  anchor: p = "right",
-  width: m = 420,
-  closeLabel: l = "Close"
+  anchor: u = "right",
+  width: f = 420,
+  closeLabel: c = "Close"
 }) {
-  const i = D();
-  return /* @__PURE__ */ e(Z, { anchor: p, open: t, onClose: r, children: /* @__PURE__ */ d(
-    s,
+  const i = E();
+  return /* @__PURE__ */ e(re, { anchor: u, open: r, onClose: t, children: /* @__PURE__ */ d(
+    p,
     {
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": i,
       sx: {
-        width: { xs: "100vw", sm: m },
+        width: { xs: "100vw", sm: f },
         maxWidth: "100vw",
         height: "100%",
         display: "flex",
@@ -700,52 +700,52 @@ function Kt({
       },
       children: [
         /* @__PURE__ */ d(
-          g,
+          b,
           {
             direction: "row",
             justifyContent: "space-between",
             alignItems: "center",
             sx: { p: 3, pb: 1 },
             children: [
-              /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "primary.main", children: c }),
-              /* @__PURE__ */ e(w, { "aria-label": l, onClick: r, edge: "end", children: /* @__PURE__ */ e(y, { icon: L }) })
+              /* @__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__ */ d(s, { sx: { px: 3, pb: 2, flex: 1, overflowY: "auto" }, tabIndex: 0, children: [
+        /* @__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 }),
           n
         ] }),
-        a && /* @__PURE__ */ e(s, { sx: { p: 3, borderTop: 1, borderColor: "divider" }, children: a })
+        a && /* @__PURE__ */ e(p, { sx: { p: 3, borderTop: 1, borderColor: "divider" }, children: a })
       ]
     }
   ) });
 }
-function Zt({
-  label: t,
-  value: r,
+function et({
+  label: r,
+  value: t,
   copyLabel: o = "Copy",
-  copiedLabel: c = "Copied!",
+  copiedLabel: l = "Copied!",
   errorLabel: n = "Could not copy",
   copiedDuration: a = 2e3
 }) {
-  const [p, m] = I("idle"), l = E(void 0);
-  X(() => () => clearTimeout(l.current), []);
+  const [u, f] = M("idle"), c = I(void 0);
+  q(() => () => clearTimeout(c.current), []);
   async function i() {
     try {
-      await navigator.clipboard.writeText(r), m("copied");
+      await navigator.clipboard.writeText(t), f("copied");
     } catch {
-      m("error");
+      f("error");
     }
-    clearTimeout(l.current), l.current = setTimeout(() => m("idle"), a);
+    clearTimeout(c.current), c.current = setTimeout(() => f("idle"), a);
   }
-  return /* @__PURE__ */ d(g, { spacing: 1.5, children: [
-    /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "text.secondary", children: t }),
+  return /* @__PURE__ */ d(b, { spacing: 1.5, children: [
+    /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "text.secondary", children: r }),
     /* @__PURE__ */ e(
-      s,
+      p,
       {
         role: "region",
-        "aria-label": t,
+        "aria-label": r,
         tabIndex: 0,
         sx: {
           overflowX: "auto",
@@ -758,26 +758,26 @@ function Zt({
           fontSize: "0.8125rem",
           whiteSpace: "pre"
         },
-        children: /* @__PURE__ */ e("code", { children: r })
+        children: /* @__PURE__ */ e("code", { children: t })
       }
     ),
     /* @__PURE__ */ e(
       z,
       {
         onClick: i,
-        startIcon: /* @__PURE__ */ e(y, { icon: p === "copied" ? Y : J }),
+        startIcon: /* @__PURE__ */ e(C, { icon: u === "copied" ? J : Z }),
         fullWidth: !0,
-        children: p === "copied" ? c : o
+        children: u === "copied" ? l : o
       }
     ),
-    /* @__PURE__ */ e(j, { role: "status", "aria-live": "polite", children: p === "copied" ? c : p === "error" ? n : "" })
+    /* @__PURE__ */ e(N, { role: "status", "aria-live": "polite", children: u === "copied" ? l : u === "error" ? n : "" })
   ] });
 }
-function er({ href: t, children: r = "Skip to content" }) {
+function rt({ href: r, children: t = "Skip to content" }) {
   return /* @__PURE__ */ e(
-    C,
+    S,
     {
-      href: t,
+      href: r,
       sx: (o) => ({
         position: "fixed",
         top: o.spacing(1),
@@ -794,74 +794,96 @@ function er({ href: t, children: r = "Skip to content" }) {
         transform: "translateY(-300%)",
         "&:focus": { transform: "translateY(0)" }
       }),
-      children: r
+      children: t
     }
   );
 }
-function tr({
-  title: t,
-  eyebrow: r,
+function tt({
+  title: r,
+  eyebrow: t,
   description: o,
-  actions: c,
+  actions: l,
   level: n = 1,
-  align: a = "left"
+  align: a = "left",
+  image: u,
+  imagePosition: f = "center"
 }) {
-  const p = `h${n}`, m = a === "center";
+  const c = `h${n}`, i = a === "center", s = !!u;
   return /* @__PURE__ */ e(
-    s,
+    p,
     {
       component: "section",
-      sx: (l) => ({
-        py: { xs: 6, md: 10 },
-        color: l.vietri.color.onSurface,
-        background: l.vietri.gradient.surface,
-        // Focus ring and secondary buttons that stay visible on a dark surface.
-        "& a:focus-visible, & button:focus-visible": {
-          outline: "2px solid",
-          outlineColor: l.vietri.color.onSurface,
-          outlineOffset: 3
-        },
-        "& .MuiButton-outlined, & .MuiButton-text": {
-          color: "inherit",
-          borderColor: "currentColor"
-        }
-      }),
-      children: /* @__PURE__ */ e(P, { maxWidth: "lg", children: /* @__PURE__ */ d(
-        g,
+      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 ?? "")})`;
+        return {
+          display: "flex",
+          alignItems: "center",
+          py: { xs: 6, md: 10 },
+          ...s && { minHeight: { xs: 440, md: 600 } },
+          color: m.vietri.color.onSurface,
+          ...s ? {
+            // 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}`
+            },
+            backgroundSize: "cover",
+            backgroundPosition: f,
+            backgroundRepeat: "no-repeat"
+          } : { background: x },
+          // 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,
+            outlineOffset: 3
+          },
+          "& .MuiButton-outlined, & .MuiButton-text": {
+            color: "inherit",
+            borderColor: "currentColor"
+          }
+        };
+      },
+      children: /* @__PURE__ */ e(j, { maxWidth: "lg", sx: { width: "100%" }, children: /* @__PURE__ */ d(
+        b,
         {
           spacing: 2,
-          sx: { alignItems: m ? "center" : "flex-start", textAlign: a },
+          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" } }
+          },
           children: [
-            r && /* @__PURE__ */ e(
+            t && /* @__PURE__ */ e(
               h,
               {
                 component: "p",
                 variant: "overline",
-                sx: (l) => ({ color: l.vietri.color.onSurfaceSoft }),
-                children: r
+                sx: (m) => ({ color: m.vietri.color.onSurfaceSoft }),
+                children: t
               }
             ),
-            /* @__PURE__ */ e(h, { component: p, variant: "h2", sx: { maxWidth: 900 }, children: t }),
+            /* @__PURE__ */ e(h, { component: c, variant: "h2", sx: { maxWidth: 900 }, children: r }),
             o && /* @__PURE__ */ e(
               h,
               {
                 variant: "body1",
-                sx: (l) => ({
+                sx: (m) => ({
                   maxWidth: 680,
-                  color: l.vietri.color.onSurfaceSoft
+                  color: m.vietri.color.onSurfaceSoft
                 }),
                 children: o
               }
             ),
-            c && /* @__PURE__ */ e(
-              g,
+            l && /* @__PURE__ */ e(
+              b,
               {
                 direction: "row",
                 spacing: 2,
                 useFlexGap: !0,
                 flexWrap: "wrap",
-                sx: { pt: 2, justifyContent: m ? "center" : "flex-start" },
-                children: c
+                sx: { pt: 2, justifyContent: i ? "center" : "flex-start" },
+                children: l
               }
             )
           ]
@@ -870,40 +892,40 @@ function tr({
     }
   );
 }
-function rr({
-  icon: t,
-  title: r,
+function ot({
+  icon: r,
+  title: t,
   description: o,
-  level: c = 3,
+  level: l = 3,
   children: n
 }) {
-  const a = `h${c}`;
-  return /* @__PURE__ */ e(B, { sx: { height: "100%" }, children: /* @__PURE__ */ d(k, { children: [
+  const a = `h${l}`;
+  return /* @__PURE__ */ e(A, { sx: { height: "100%" }, children: /* @__PURE__ */ d(D, { children: [
     /* @__PURE__ */ e(
-      s,
+      p,
       {
-        sx: (p) => ({
+        sx: (u) => ({
           display: "grid",
           placeItems: "center",
           width: 44,
           height: 44,
           mb: 2,
           borderRadius: 2,
-          bgcolor: p.vietri.color.chip,
-          color: p.palette.primary.main
+          bgcolor: u.vietri.color.chip,
+          color: u.palette.primary.main
         }),
-        children: /* @__PURE__ */ e(y, { icon: t, size: 22 })
+        children: /* @__PURE__ */ e(C, { icon: r, size: 22 })
       }
     ),
-    /* @__PURE__ */ e(h, { component: a, variant: "h6", gutterBottom: !0, children: r }),
+    /* @__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(s, { sx: { mt: 2 }, children: n })
+    n && /* @__PURE__ */ e(p, { sx: { mt: 2 }, children: n })
   ] }) });
 }
-function or({ steps: t, level: r = 3, ariaLabel: o }) {
-  const c = `h${r}`;
+function it({ steps: r, level: t = 3, ariaLabel: o }) {
+  const l = `h${t}`;
   return /* @__PURE__ */ e(
-    s,
+    p,
     {
       component: "ol",
       role: "list",
@@ -916,44 +938,44 @@ function or({ steps: t, level: r = 3, ariaLabel: o }) {
         gap: 3,
         gridTemplateColumns: {
           xs: "1fr",
-          md: `repeat(${Math.max(t.length, 1)}, minmax(0, 1fr))`
+          md: `repeat(${Math.max(r.length, 1)}, minmax(0, 1fr))`
         }
       },
-      children: t.map((n, a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(g, { spacing: 1, children: [
+      children: r.map((n, a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(b, { spacing: 1, children: [
         /* @__PURE__ */ e(
-          s,
+          p,
           {
             "aria-hidden": "true",
-            sx: (p) => ({
+            sx: (u) => ({
               display: "grid",
               placeItems: "center",
               width: 36,
               height: 36,
               borderRadius: "50%",
               fontWeight: 600,
-              bgcolor: p.palette.primary.main,
-              color: p.palette.primary.contrastText
+              bgcolor: u.palette.primary.main,
+              color: u.palette.primary.contrastText
             }),
             children: a + 1
           }
         ),
-        /* @__PURE__ */ e(h, { component: c, variant: "h6", children: n.title }),
+        /* @__PURE__ */ e(h, { component: l, variant: "h6", children: n.title }),
         n.description && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: n.description })
       ] }) }, n.title))
     }
   );
 }
-function ir({ entries: t, level: r = 3, ariaLabel: o }) {
-  const c = `h${r}`;
+function nt({ entries: r, level: t = 3, ariaLabel: o }) {
+  const l = `h${t}`;
   return /* @__PURE__ */ e(
-    s,
+    p,
     {
       component: "ol",
       role: "list",
       "aria-label": o,
       sx: { listStyle: "none", m: 0, p: 0 },
-      children: t.map((n) => /* @__PURE__ */ d(
-        s,
+      children: r.map((n) => /* @__PURE__ */ d(
+        p,
         {
           component: "li",
           id: n.id,
@@ -977,7 +999,7 @@ function ir({ entries: t, level: r = 3, ariaLabel: o }) {
           }),
           children: [
             /* @__PURE__ */ e(
-              s,
+              p,
               {
                 "aria-hidden": "true",
                 sx: (a) => ({
@@ -993,9 +1015,9 @@ function ir({ entries: t, level: r = 3, ariaLabel: o }) {
                 })
               }
             ),
-            /* @__PURE__ */ e(h, { component: c, variant: "h5", children: n.label }),
+            /* @__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(s, { sx: { mt: 2 }, children: n.content })
+            n.content && /* @__PURE__ */ e(p, { sx: { mt: 2 }, children: n.content })
           ]
         },
         n.id
@@ -1003,7 +1025,7 @@ function ir({ entries: t, level: r = 3, ariaLabel: o }) {
     }
   );
 }
-const _ = {
+const X = {
   position: "static",
   color: "inherit",
   font: "inherit",
@@ -1015,34 +1037,34 @@ const _ = {
     inset: 0
   }
 };
-function nr({
-  name: t,
-  subtitle: r,
+function at({
+  name: r,
+  subtitle: t,
   bio: o,
-  tags: c = [],
+  tags: l = [],
   href: n,
   onClick: a,
-  level: p = 3,
-  bioLines: m = 3
+  level: u = 3,
+  bioLines: f = 3
 }) {
-  const l = `h${p}`, i = !!(n || a);
+  const c = `h${u}`, i = !!(n || a);
   return /* @__PURE__ */ e(
-    B,
+    A,
     {
-      sx: (f) => ({
+      sx: (m) => ({
         position: "relative",
         height: "100%",
-        ...i && { "&:hover": { borderColor: f.palette.primary.main } },
+        ...i && { "&:hover": { borderColor: m.palette.primary.main } },
         // One focus ring for the whole card, instead of one around the name.
         "&:has(:focus-visible)": {
-          outline: `2px solid ${f.palette.primary.main}`,
+          outline: `2px solid ${m.palette.primary.main}`,
           outlineOffset: 2
         },
         "& a:focus-visible, & button:focus-visible": { outline: "none" }
       }),
-      children: /* @__PURE__ */ d(k, { children: [
-        /* @__PURE__ */ e(h, { component: l, variant: "h6", children: n ? /* @__PURE__ */ e(C, { href: n, underline: "none", sx: _, children: t }) : a ? /* @__PURE__ */ e(C, { component: "button", type: "button", onClick: a, underline: "none", sx: _, children: t }) : t }),
-        r && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: r }),
+      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,
           {
@@ -1050,21 +1072,21 @@ function nr({
             sx: {
               mt: 1,
               display: "-webkit-box",
-              WebkitLineClamp: m,
+              WebkitLineClamp: f,
               WebkitBoxOrient: "vertical",
               overflow: "hidden"
             },
             children: o
           }
         ),
-        c.length > 0 && /* @__PURE__ */ e(g, { direction: "row", spacing: 1, useFlexGap: !0, flexWrap: "wrap", sx: { mt: 2 }, children: c.map(
-          (f) => f.color ? /* @__PURE__ */ e(_e, { label: f.label, color: f.color }, f.label) : /* @__PURE__ */ e(U, { label: f.label, size: "small" }, f.label)
+        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)
         ) })
       ] })
     }
   );
 }
-const A = {
+const W = {
   position: "static",
   color: "inherit",
   font: "inherit",
@@ -1075,58 +1097,75 @@ const A = {
     position: "absolute",
     inset: 0
   }
-}, Ue = (t) => ({
+}, Xe = (r) => ({
   "&:has(:focus-visible)": {
-    outline: `2px solid ${t.palette.primary.main}`,
+    outline: `2px solid ${r.palette.primary.main}`,
     outlineOffset: 2
   },
   "& a:focus-visible, & button:focus-visible": { outline: "none" }
 });
-function ar({
-  title: t,
-  subtitle: r,
+function lt({
+  title: r,
+  subtitle: t,
   meta: o,
-  imageUrl: c,
+  imageUrl: l,
   duration: n,
   badge: a,
-  href: p,
-  onClick: m,
-  level: l = 3,
-  playIcon: i = !0
+  href: u,
+  onClick: f,
+  level: c = 3,
+  playIcon: i = !0,
+  aspectRatio: s = "16 / 9"
 }) {
-  const u = `h${l}`, f = !!(p || m);
+  const m = `h${c}`, g = !!(u || f);
   return /* @__PURE__ */ d(
-    B,
+    A,
     {
-      sx: (b) => ({
+      sx: (v) => ({
         position: "relative",
         height: "100%",
         overflow: "hidden",
-        ...f && { "&:hover": { borderColor: b.palette.primary.main } },
-        ...Ue(b)
+        transition: "transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease",
+        ...g && {
+          "&:hover": {
+            transform: "scale(1.03)",
+            boxShadow: v.vietri.shadow.lg,
+            borderColor: v.palette.primary.main
+          },
+          "&:hover .media-card-image": { transform: "scale(1.06)" }
+        },
+        ...Xe(v)
       }),
       children: [
         /* @__PURE__ */ d(
-          s,
+          p,
           {
-            sx: (b) => ({
+            sx: (v) => ({
               position: "relative",
-              aspectRatio: "16 / 9",
-              bgcolor: b.vietri.color.chip
+              aspectRatio: s,
+              overflow: "hidden",
+              bgcolor: v.vietri.color.chip
             }),
             children: [
-              c && /* @__PURE__ */ e(
-                s,
+              l && /* @__PURE__ */ e(
+                p,
                 {
                   component: "img",
-                  src: c,
+                  className: "media-card-image",
+                  src: l,
                   alt: "",
                   loading: "lazy",
-                  sx: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
+                  sx: {
+                    display: "block",
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    transition: "transform 400ms ease"
+                  }
                 }
               ),
               i && /* @__PURE__ */ e(
-                s,
+                p,
                 {
                   "aria-hidden": "true",
                   sx: {
@@ -1142,13 +1181,13 @@ function ar({
                     bgcolor: "rgba(0, 0, 0, 0.8)",
                     color: "#FFFFFF"
                   },
-                  children: /* @__PURE__ */ e(y, { icon: H, size: 22 })
+                  children: /* @__PURE__ */ e(C, { icon: P, size: 22 })
                 }
               ),
               a && /* @__PURE__ */ e(
-                s,
+                p,
                 {
-                  sx: (b) => ({
+                  sx: (v) => ({
                     position: "absolute",
                     top: 8,
                     left: 8,
@@ -1157,14 +1196,14 @@ function ar({
                     borderRadius: 1,
                     fontSize: "0.75rem",
                     fontWeight: 600,
-                    bgcolor: b.vietri.color.action[0],
-                    color: b.vietri.color.onAction
+                    bgcolor: v.vietri.color.action[0],
+                    color: v.vietri.color.onAction
                   }),
                   children: a
                 }
               ),
               n && /* @__PURE__ */ e(
-                s,
+                p,
                 {
                   sx: {
                     position: "absolute",
@@ -1184,80 +1223,93 @@ function ar({
             ]
           }
         ),
-        /* @__PURE__ */ d(k, { children: [
+        /* @__PURE__ */ d(D, { children: [
           o && /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "text.secondary", children: o }),
-          /* @__PURE__ */ e(h, { component: u, variant: "h6", children: p ? /* @__PURE__ */ e(C, { href: p, underline: "none", sx: A, children: t }) : m ? /* @__PURE__ */ e(C, { component: "button", type: "button", onClick: m, underline: "none", sx: A, children: t }) : t }),
-          r && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: r })
+          /* @__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 })
         ] })
       ]
     }
   );
 }
-function lr({
-  title: t,
-  children: r,
+function ct({
+  title: r,
+  children: t,
   level: o = 2,
-  itemWidth: c = 280,
+  itemWidth: l = 280,
   previousLabel: n = "Scroll left",
   nextLabel: a = "Scroll right",
-  action: p
+  action: u
 }) {
-  const m = `h${o}`, l = D(), i = E(null), u = ie.toArray(r);
-  function f(x) {
-    const b = i.current;
-    if (!b) return;
-    const re = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    b.scrollBy?.({
-      left: x * b.clientWidth * 0.8,
-      behavior: re ? "auto" : "smooth"
+  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"
     });
   }
-  return /* @__PURE__ */ d(s, { component: "section", "aria-labelledby": l, sx: { mb: 4 }, children: [
+  return /* @__PURE__ */ d(p, { component: "section", "aria-labelledby": c, sx: { mb: 4 }, children: [
     /* @__PURE__ */ d(
-      g,
+      b,
       {
         direction: "row",
         justifyContent: "space-between",
         alignItems: "center",
         sx: { mb: 2 },
         children: [
-          /* @__PURE__ */ e(h, { id: l, component: m, variant: "h5", children: t }),
-          /* @__PURE__ */ d(g, { direction: "row", spacing: 1, alignItems: "center", children: [
-            p,
-            /* @__PURE__ */ e(w, { "aria-label": n, onClick: () => f(-1), children: /* @__PURE__ */ e(y, { icon: q }) }),
-            /* @__PURE__ */ e(w, { "aria-label": a, onClick: () => f(1), children: /* @__PURE__ */ e(y, { icon: Q }) })
+          /* @__PURE__ */ e(h, { id: c, component: f, variant: "h5", children: r }),
+          /* @__PURE__ */ d(b, { 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__ */ e(
-      s,
+      p,
       {
         ref: i,
         tabIndex: 0,
-        sx: (x) => ({
+        sx: (g) => ({
           overflowX: "auto",
-          pb: 1,
+          // Room for the cards that grow on hover, which the scroll area would clip.
+          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
+          // who scroll with a mouse can see there is more to the right.
+          scrollbarWidth: "thin",
+          scrollbarColor: `${g.palette.text.secondary} transparent`,
+          "&::-webkit-scrollbar": { height: 8 },
+          "&::-webkit-scrollbar-track": { backgroundColor: "transparent" },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: g.palette.text.secondary,
+            borderRadius: 4
+          },
           "&:focus-visible": {
-            outline: `2px solid ${x.palette.primary.main}`,
+            outline: `2px solid ${g.palette.primary.main}`,
             outlineOffset: 2
           }
         }),
         children: /* @__PURE__ */ e(
-          s,
+          p,
           {
             component: "ul",
             role: "list",
             sx: { listStyle: "none", m: 0, p: 0, display: "flex", gap: 2 },
-            children: u.map((x, b) => /* @__PURE__ */ e(
-              s,
+            children: s.map((g, x) => /* @__PURE__ */ e(
+              p,
               {
                 component: "li",
-                sx: { flex: `0 0 ${c}px`, scrollSnapAlign: "start" },
-                children: x
+                sx: { flex: `0 0 ${l}px`, scrollSnapAlign: "start" },
+                children: g
               },
-              b
+              x
             ))
           }
         )
@@ -1265,23 +1317,23 @@ function lr({
     )
   ] });
 }
-function Xe(t, r, o) {
-  const c = new URLSearchParams({ rel: "0", modestbranding: "1" });
-  return r && c.set("start", String(Math.floor(r))), o && c.set("autoplay", "1"), `https://www.youtube-nocookie.com/embed/${encodeURIComponent(t)}?${c.toString()}`;
+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 cr({
-  videoId: t,
-  title: r,
+function dt({
+  videoId: r,
+  title: t,
   poster: o,
-  start: c,
+  start: l,
   lazy: n = !0,
   playLabel: a
 }) {
-  const [p, m] = I(!n), l = E(!1), i = E(null);
-  return X(() => {
-    p && l.current && i.current?.focus();
-  }, [p]), /* @__PURE__ */ e(
-    s,
+  const [u, f] = M(!n), c = I(!1), i = I(null);
+  return q(() => {
+    u && c.current && i.current?.focus();
+  }, [u]), /* @__PURE__ */ e(
+    p,
     {
       sx: {
         position: "relative",
@@ -1291,12 +1343,12 @@ function cr({
         borderRadius: 2,
         bgcolor: "#000000"
       },
-      children: p ? /* @__PURE__ */ e(
+      children: u ? /* @__PURE__ */ e(
         "iframe",
         {
           ref: i,
-          src: Xe(t, c, l.current),
-          title: r,
+          src: Ye(r, l, c.current),
+          title: t,
           allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
           allowFullScreen: !0,
           referrerPolicy: "strict-origin-when-cross-origin",
@@ -1304,11 +1356,11 @@ function cr({
           style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }
         }
       ) : /* @__PURE__ */ d(
-        je,
+        Ne,
         {
-          "aria-label": a ?? `Play video: ${r}`,
+          "aria-label": a ?? `Play video: ${t}`,
           onClick: () => {
-            l.current = !0, m(!0);
+            c.current = !0, f(!0);
           },
           sx: {
             position: "absolute",
@@ -1322,7 +1374,7 @@ function cr({
           },
           children: [
             o && /* @__PURE__ */ e(
-              s,
+              p,
               {
                 component: "img",
                 src: o,
@@ -1332,7 +1384,7 @@ function cr({
               }
             ),
             /* @__PURE__ */ e(
-              s,
+              p,
               {
                 "aria-hidden": "true",
                 sx: {
@@ -1345,7 +1397,7 @@ function cr({
                   bgcolor: "rgba(0, 0, 0, 0.8)",
                   color: "#FFFFFF"
                 },
-                children: /* @__PURE__ */ e(y, { icon: H, size: 32 })
+                children: /* @__PURE__ */ e(C, { icon: P, size: 32 })
               }
             )
           ]
@@ -1354,57 +1406,57 @@ function cr({
     }
   );
 }
-const Ye = (t) => ({
+const qe = (r) => ({
   "&:has(:focus-visible)": {
-    outline: `2px solid ${t.palette.primary.main}`,
+    outline: `2px solid ${r.palette.primary.main}`,
     outlineOffset: -2
   },
   "& a:focus-visible, & button:focus-visible": { outline: "none" }
 });
-function dr({
-  episodes: t,
-  currentId: r,
+function st({
+  episodes: r,
+  currentId: t,
   onSelect: o,
-  level: c = 3,
+  level: l = 3,
   ariaLabel: n,
-  episodeLabel: a = (m) => `Episode ${m}`,
-  currentLabel: p = "Now playing"
+  episodeLabel: a = (f) => `Episode ${f}`,
+  currentLabel: u = "Now playing"
 }) {
-  const m = `h${c}`;
+  const f = `h${l}`;
   return /* @__PURE__ */ e(
-    s,
+    p,
     {
       component: "ol",
       role: "list",
       "aria-label": n,
       sx: { listStyle: "none", m: 0, p: 0 },
-      children: t.map((l) => {
-        const i = l.id === r, u = !!(o || l.href), f = o ? /* @__PURE__ */ e(
-          C,
+      children: r.map((c) => {
+        const i = c.id === t, s = !!(o || c.href), m = o ? /* @__PURE__ */ e(
+          S,
           {
             component: "button",
             type: "button",
-            onClick: () => o(l.id),
+            onClick: () => o(c.id),
             "aria-current": i ? "true" : void 0,
             underline: "none",
-            sx: A,
-            children: l.title
+            sx: W,
+            children: c.title
           }
-        ) : l.href ? /* @__PURE__ */ e(
-          C,
+        ) : c.href ? /* @__PURE__ */ e(
+          S,
           {
-            href: l.href,
+            href: c.href,
             "aria-current": i ? "true" : void 0,
             underline: "none",
-            sx: A,
-            children: l.title
+            sx: W,
+            children: c.title
           }
-        ) : l.title;
+        ) : c.title;
         return /* @__PURE__ */ d(
-          s,
+          p,
           {
             component: "li",
-            sx: (x) => ({
+            sx: (g) => ({
               position: "relative",
               display: "flex",
               gap: 2,
@@ -1412,35 +1464,35 @@ function dr({
               borderBottom: 1,
               borderColor: "divider",
               borderLeft: 4,
-              borderLeftColor: i ? x.palette.primary.main : "transparent",
-              ...u && { "&:hover": { bgcolor: x.palette.action.hover } },
-              ...Ye(x)
+              borderLeftColor: i ? g.palette.primary.main : "transparent",
+              ...s && { "&:hover": { bgcolor: g.palette.action.hover } },
+              ...qe(g)
             }),
             children: [
-              l.imageUrl && /* @__PURE__ */ e(
-                s,
+              c.imageUrl && /* @__PURE__ */ e(
+                p,
                 {
                   component: "img",
-                  src: l.imageUrl,
+                  src: c.imageUrl,
                   alt: "",
                   loading: "lazy",
                   sx: {
                     flex: "0 0 auto",
                     width: { xs: 112, sm: 160 },
-                    aspectRatio: "16 / 9",
+                    aspectRatio: c.imageAspectRatio ?? "16 / 9",
                     objectFit: "cover",
                     borderRadius: 1
                   }
                 }
               ),
-              /* @__PURE__ */ d(s, { sx: { minWidth: 0 }, children: [
+              /* @__PURE__ */ d(p, { sx: { minWidth: 0 }, children: [
                 /* @__PURE__ */ d(h, { component: "p", variant: "overline", color: "text.secondary", children: [
-                  a(l.number),
-                  i && ` · ${p}`
+                  a(c.number),
+                  i && ` · ${u}`
                 ] }),
-                /* @__PURE__ */ e(h, { component: m, variant: "h6", children: f }),
-                l.meta && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: l.meta }),
-                l.description && /* @__PURE__ */ e(
+                /* @__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,
                   {
                     variant: "body2",
@@ -1451,41 +1503,41 @@ function dr({
                       WebkitBoxOrient: "vertical",
                       overflow: "hidden"
                     },
-                    children: l.description
+                    children: c.description
                   }
                 )
               ] })
             ]
           },
-          l.id
+          c.id
         );
       })
     }
   );
 }
-function sr({
-  title: t,
-  description: r,
+function pt({
+  title: r,
+  description: t,
   imageUrl: o,
-  platforms: c,
+  platforms: l,
   level: n = 3,
   platformsLabel: a = "Listen on",
-  externalLabel: p = "(opens in a new tab)"
+  externalLabel: u = "(opens in a new tab)"
 }) {
-  const m = `h${n}`;
-  return /* @__PURE__ */ d(B, { sx: { height: "100%" }, children: [
+  const f = `h${n}`;
+  return /* @__PURE__ */ d(A, { sx: { height: "100%" }, children: [
     /* @__PURE__ */ e(
-      s,
+      p,
       {
-        sx: (l) => ({
+        sx: (c) => ({
           aspectRatio: "1 / 1",
           display: "grid",
           placeItems: "center",
-          bgcolor: l.vietri.color.chip,
-          color: l.palette.text.secondary
+          bgcolor: c.vietri.color.chip,
+          color: c.palette.text.secondary
         }),
         children: o ? /* @__PURE__ */ e(
-          s,
+          p,
           {
             component: "img",
             src: o,
@@ -1493,14 +1545,14 @@ function sr({
             loading: "lazy",
             sx: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
           }
-        ) : /* @__PURE__ */ e(y, { icon: K, size: 48 })
+        ) : /* @__PURE__ */ e(C, { icon: ee, size: 48 })
       }
     ),
-    /* @__PURE__ */ d(k, { children: [
-      /* @__PURE__ */ e(h, { component: m, variant: "h6", gutterBottom: !0, children: t }),
-      r && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: r }),
-      c.length > 0 && /* @__PURE__ */ e(
-        g,
+    /* @__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,
         {
           component: "ul",
           role: "list",
@@ -1510,43 +1562,43 @@ function sr({
           useFlexGap: !0,
           flexWrap: "wrap",
           sx: { listStyle: "none", m: 0, mt: 2, p: 0 },
-          children: c.map((l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
+          children: l.map((c) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
             z,
             {
               variant: "outlined",
               size: "small",
-              href: l.href,
+              href: c.href,
               target: "_blank",
               rel: "noopener noreferrer",
-              endIcon: /* @__PURE__ */ e(y, { icon: $, size: 14 }),
+              endIcon: /* @__PURE__ */ e(C, { icon: H, size: 14 }),
               children: [
-                l.name,
-                /* @__PURE__ */ d(j, { children: [
+                c.name,
+                /* @__PURE__ */ d(N, { children: [
                   " ",
                   "– ",
-                  t,
+                  r,
                   " ",
-                  p
+                  u
                 ] })
               ]
             }
-          ) }, l.name))
+          ) }, c.name))
         }
       )
     ] })
   ] });
 }
-function R(t, r, o = 135) {
-  return `linear-gradient(${o}deg, ${t} 0%, ${r} 100%)`;
+function R(r, t, o = 135) {
+  return `linear-gradient(${o}deg, ${r} 0%, ${t} 100%)`;
 }
-function qe(t) {
+function Je(r) {
   return {
-    surface: R(...t.surface),
-    action: R(...t.action),
-    actionHover: R(...t.actionHover)
+    surface: R(...r.surface),
+    action: R(...r.action),
+    actionHover: R(...r.actionHover)
   };
 }
-const F = {
+const y = {
   spacing: 8,
   radius: {
     sm: 4,
@@ -1590,52 +1642,52 @@ const F = {
   MuiButton: {
     defaultProps: { disableElevation: !0 },
     styleOverrides: {
-      root: ({ theme: t }) => ({
-        borderRadius: F.radius.md,
+      root: ({ theme: r }) => ({
+        borderRadius: y.radius.md,
         "&:focus-visible": {
-          outline: `2px solid ${t.palette.primary.main}`,
+          outline: `2px solid ${r.palette.primary.main}`,
           outlineOffset: 2
         }
       }),
       // 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: t }) => ({
-        color: t.vietri.color.onAction,
-        backgroundImage: t.vietri.gradient.action,
-        "&:hover": { backgroundImage: t.vietri.gradient.actionHover },
+      containedPrimary: ({ theme: r }) => ({
+        color: r.vietri.color.onAction,
+        backgroundImage: r.vietri.gradient.action,
+        "&:hover": { backgroundImage: r.vietri.gradient.actionHover },
         "&.Mui-disabled": {
           backgroundImage: "none",
-          color: t.palette.action.disabled
+          color: r.palette.action.disabled
         }
       })
     }
   },
   MuiLink: {
     styleOverrides: {
-      root: ({ theme: t }) => ({
+      root: ({ theme: r }) => ({
         "&:focus-visible": {
-          outline: `2px solid ${t.palette.primary.main}`,
+          outline: `2px solid ${r.palette.primary.main}`,
           outlineOffset: 3,
-          borderRadius: F.radius.sm
+          borderRadius: y.radius.sm
         }
       })
     }
   },
   MuiChip: {
     styleOverrides: {
-      root: ({ ownerState: t, theme: r }) => {
-        const o = t.variant === "filled" && t.color === "default";
+      root: ({ ownerState: r, theme: t }) => {
+        const o = r.variant === "filled" && r.color === "default";
         return {
-          fontWeight: F.typography.fontWeight.semibold,
+          fontWeight: y.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
           // any surface (a dark chip on white, a light chip on purple…).
           ...o && {
-            color: r.vietri.color.onChip,
-            backgroundColor: r.vietri.color.chip,
+            color: t.vietri.color.onChip,
+            backgroundColor: t.vietri.color.chip,
             "&.MuiChip-clickable:hover": {
-              backgroundColor: r.vietri.color.chipHover
+              backgroundColor: t.vietri.color.chipHover
             }
           }
         };
@@ -1646,16 +1698,16 @@ const F = {
     defaultProps: { variant: "outlined" },
     styleOverrides: {
       root: {
-        borderRadius: F.radius.lg,
+        borderRadius: y.radius.lg,
         backgroundImage: "none"
       }
     }
   },
   MuiCardActionArea: {
     styleOverrides: {
-      root: ({ theme: t }) => ({
+      root: ({ theme: r }) => ({
         "&:focus-visible": {
-          outline: `2px solid ${t.palette.primary.main}`,
+          outline: `2px solid ${r.palette.primary.main}`,
           outlineOffset: -2
         }
       })
@@ -1663,7 +1715,7 @@ const F = {
   },
   MuiDialog: {
     styleOverrides: {
-      paper: { borderRadius: F.radius.lg, backgroundImage: "none" }
+      paper: { borderRadius: y.radius.lg, backgroundImage: "none" }
     }
   },
   MuiDrawer: {
@@ -1675,119 +1727,119 @@ const F = {
   // contrast for interface components (WCAG 1.4.11).
   MuiOutlinedInput: {
     styleOverrides: {
-      root: ({ theme: t }) => ({
-        borderRadius: F.radius.md,
+      root: ({ theme: r }) => ({
+        borderRadius: y.radius.md,
         "& .MuiOutlinedInput-notchedOutline": {
-          borderColor: t.palette.text.secondary
+          borderColor: r.palette.text.secondary
         },
         "&:hover .MuiOutlinedInput-notchedOutline": {
-          borderColor: t.palette.text.primary
+          borderColor: r.palette.text.primary
         },
         "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          borderColor: t.palette.primary.main
+          borderColor: r.palette.primary.main
         },
         "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-          borderColor: t.palette.error.main
+          borderColor: r.palette.error.main
         },
         "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
-          borderColor: t.palette.divider
+          borderColor: r.palette.divider
         }
       })
     }
   },
   MuiTableCell: {
     styleOverrides: {
-      root: ({ theme: t }) => ({
-        borderBottomColor: t.palette.divider
+      root: ({ theme: r }) => ({
+        borderBottomColor: r.palette.divider
       }),
-      head: ({ theme: t }) => ({
-        fontWeight: F.typography.fontWeight.semibold,
-        color: t.palette.text.primary,
-        borderBottom: `2px solid ${t.palette.text.primary}`
+      head: ({ theme: r }) => ({
+        fontWeight: y.typography.fontWeight.semibold,
+        color: r.palette.text.primary,
+        borderBottom: `2px solid ${r.palette.text.primary}`
       })
     }
   }
-}, { typography: v, breakpoints: Je } = F;
-function Ke(t) {
+}, { typography: F, breakpoints: Ke } = y;
+function Ze(r) {
   return {
-    color: t,
-    shadow: F.shadow,
-    gradient: qe(t)
+    color: r,
+    shadow: y.shadow,
+    gradient: Je(r)
   };
 }
-const Ze = {
-  spacing: F.spacing,
-  shape: { borderRadius: F.radius.md },
-  breakpoints: { values: { ...Je } },
+const er = {
+  spacing: y.spacing,
+  shape: { borderRadius: y.radius.md },
+  breakpoints: { values: { ...Ke } },
   typography: {
-    fontFamily: v.fontFamily,
-    fontWeightRegular: v.fontWeight.regular,
-    fontWeightMedium: v.fontWeight.medium,
-    fontWeightBold: v.fontWeight.semibold,
+    fontFamily: F.fontFamily,
+    fontWeightRegular: F.fontWeight.regular,
+    fontWeightMedium: F.fontWeight.medium,
+    fontWeightBold: F.fontWeight.semibold,
     h1: {
       fontSize: "clamp(3rem, 8vw, 7rem)",
-      fontWeight: v.fontWeight.semibold,
+      fontWeight: F.fontWeight.semibold,
       letterSpacing: "-0.055em",
       lineHeight: 0.95
     },
     h2: {
       fontSize: "clamp(2rem, 5vw, 4rem)",
-      fontWeight: v.fontWeight.semibold,
+      fontWeight: F.fontWeight.semibold,
       letterSpacing: "-0.04em",
       lineHeight: 1.05
     },
     h3: {
       fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
-      fontWeight: v.fontWeight.semibold,
+      fontWeight: F.fontWeight.semibold,
       letterSpacing: "-0.03em",
       lineHeight: 1.15
     },
     h4: {
       fontSize: "1.5rem",
-      fontWeight: v.fontWeight.semibold,
+      fontWeight: F.fontWeight.semibold,
       letterSpacing: "-0.02em",
       lineHeight: 1.25
     },
-    h5: { fontSize: "1.25rem", fontWeight: v.fontWeight.medium, lineHeight: 1.3 },
-    h6: { fontSize: "1.0625rem", fontWeight: v.fontWeight.medium, lineHeight: 1.4 },
+    h5: { fontSize: "1.25rem", fontWeight: F.fontWeight.medium, lineHeight: 1.3 },
+    h6: { fontSize: "1.0625rem", fontWeight: F.fontWeight.medium, lineHeight: 1.4 },
     body1: { fontSize: "1rem", lineHeight: 1.6 },
     body2: { fontSize: "0.875rem", lineHeight: 1.55 },
     button: {
-      fontWeight: v.fontWeight.medium,
+      fontWeight: F.fontWeight.medium,
       textTransform: "none",
       letterSpacing: "-0.01em"
     },
     overline: {
-      fontWeight: v.fontWeight.medium,
+      fontWeight: F.fontWeight.medium,
       letterSpacing: "0.12em"
     }
   },
   components: Qe
 };
-function G(t) {
-  return Me({
-    ...Ze,
-    vietri: Ke(t),
+function G(r) {
+  return $e({
+    ...er,
+    vietri: Ze(r),
     palette: {
-      mode: t.mode,
-      primary: { main: t.primary, contrastText: t.onPrimary },
-      secondary: { main: t.secondary, contrastText: t.onSecondary },
-      error: { main: t.status.error, contrastText: t.onStatus },
-      warning: { main: t.status.warning, contrastText: t.onStatus },
-      info: { main: t.status.info, contrastText: t.onStatus },
-      success: { main: t.status.success, contrastText: t.onStatus },
-      background: { default: t.bg, paper: t.paper },
-      text: { primary: t.ink, secondary: t.inkSoft },
-      divider: t.line
+      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
     }
   });
 }
-const S = (t) => [t, t], et = {
+const k = (r) => [r, r], rr = {
   error: "#B91C1C",
   warning: "#92400E",
   info: "#0369A1",
   success: "#166534"
-}, tt = {
+}, tr = {
   mode: "light",
   bg: "#FFFFFF",
   paper: "#FFFFFF",
@@ -1798,17 +1850,18 @@ const S = (t) => [t, t], et = {
   onPrimary: "#FFFFFF",
   secondary: "#7A5718",
   onSecondary: "#FFFFFF",
-  action: S("#DBAC5B"),
-  actionHover: S("#FDD07A"),
+  action: k("#DBAC5B"),
+  actionHover: k("#FDD07A"),
   onAction: "#000000",
-  surface: S("#000000"),
+  surface: k("#000000"),
+  scrim: "#000000",
   onSurface: "#FFFFFF",
   onSurfaceSoft: "#D4D4D4",
   chip: "#F3EBDA",
   chipHover: "#E8DDC4",
   onChip: "#111111",
   glow: null,
-  status: et,
+  status: rr,
   onStatus: "#FFFFFF",
   brand: {
     black: "#000000",
@@ -1822,23 +1875,26 @@ const S = (t) => [t, t], et = {
     ink: "#111111",
     inkSoft: "#555555"
   }
-}, rt = {
+}, or = {
   mode: "dark",
   bg: "#20123A",
   paper: "#2D1B50",
   ink: "#FFFFFF",
   inkSoft: "#D5CAEB",
   line: "rgba(255, 255, 255, 0.14)",
-  primary: "#F35F1C",
+  primary: "#1CDAF3",
   onPrimary: "#20123A",
   secondary: "#B99BFF",
   onSecondary: "#20123A",
-  action: S("#F35F1C"),
-  actionHover: S("#FF7B3F"),
+  action: k("#1CDAF3"),
+  actionHover: k("#6AE9FA"),
   onAction: "#20123A",
-  surface: S("#693BCC"),
+  // 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",
   onSurface: "#FFFFFF",
-  onSurfaceSoft: "#EDE6FB",
+  onSurfaceSoft: "#F7F3FF",
   chip: "#3C2866",
   chipHover: "#4A3478",
   onChip: "#FFFFFF",
@@ -1853,17 +1909,21 @@ const S = (t) => [t, t], et = {
   brand: {
     night: "#20123A",
     violet: "#693BCC",
+    lavender: "#816CB2",
     magenta: "#CB1F9C",
-    orange: "#F35F1C"
+    cyan: "#1CDAF3"
   },
   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",
-    orangeHover: "#FF7B3F"
+    /** Hovered primary action (12:1 with the dark text). */
+    cyanHover: "#6AE9FA"
   }
-}, ot = {
+}, ir = {
   mode: "light",
   bg: "#F7F4FA",
   paper: "#FFFFFF",
@@ -1876,10 +1936,11 @@ const S = (t) => [t, t], et = {
   onPrimary: "#FFFFFF",
   secondary: "#4A0875",
   onSecondary: "#FFFFFF",
-  action: S("#027381"),
-  actionHover: S("#015C68"),
+  action: k("#027381"),
+  actionHover: k("#015C68"),
   onAction: "#FFFFFF",
-  surface: S("#4A0875"),
+  surface: k("#4A0875"),
+  scrim: "#2B1B3D",
   onSurface: "#FFFFFF",
   onSurfaceSoft: "#E8DCF4",
   chip: "#EFE8F6",
@@ -1913,7 +1974,7 @@ const S = (t) => [t, t], et = {
     /** Teal for the hovered primary action (7.7:1 with white). */
     tealDark: "#015C68"
   }
-}, pr = G(tt), ur = G(rt), hr = G(ot), it = [
+}, ut = G(tr), ht = G(or), mt = G(ir), nr = [
   { bg: "#E0F2FE", fg: "#0C4A6E", dot: "#0284C7" },
   // sky
   { bg: "#EDE9FE", fg: "#4C1D95", dot: "#7C3AED" },
@@ -1935,13 +1996,13 @@ const S = (t) => [t, t], et = {
   { bg: "#ECFCCB", fg: "#365314", dot: "#65A30D" }
   // lime
 ];
-function mr(t, r = it) {
-  const o = Array.from(new Set(t));
+function ft(r, t = nr) {
+  const o = Array.from(new Set(r));
   return Object.fromEntries(
-    o.map((c, n) => [c, r[n % r.length]])
+    o.map((l, n) => [l, t[n % t.length]])
   );
 }
-const fr = [
+const gt = [
   { bg: "#027381", fg: "#FFFFFF", dot: "#027381" },
   // teal
   { bg: "#FF7751", fg: "#2B1B3D", dot: "#C2410C" },
@@ -1958,55 +2019,55 @@ const fr = [
   // vermilion
 ];
 export {
-  Ut as BarChart,
-  Fr as Button,
-  Cr as Card,
-  wr as CardActionArea,
-  kr as CardActions,
-  Er as CardContent,
-  Ir as CardMedia,
-  _e as CategoryChip,
-  Mr as Chip,
-  lr as ContentRail,
-  Zt as CopyField,
-  _t as DataTable,
-  Jt as Dialog,
-  Kt as Drawer,
-  dr as EpisodeList,
-  rr as FeatureCard,
-  Yt as Footer,
-  tr as Hero,
-  y as Icon,
-  Or as Input,
-  Vt as LanguageSwitch,
-  ar as MediaCard,
-  Gt as NavBar,
-  sr as PlaylistCard,
-  nr as ProfileCard,
-  qt as SectionHeader,
-  Qt as Select,
-  er as SkipLink,
-  Nt as StatCard,
-  or as Steps,
-  zr as Tab,
-  Hr as Tabs,
-  ir as Timeline,
-  xr as Typography,
-  cr as VideoEmbed,
-  j as VisuallyHidden,
-  it as categoryPalette,
-  mr as createCategoryColors,
-  qe as createGradients,
+  Xr as BarChart,
+  yt as Button,
+  St 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,
+  Gr as NavBar,
+  pt as PlaylistCard,
+  at as ProfileCard,
+  Jr as SectionHeader,
+  Qr as Select,
+  rt as SkipLink,
+  _r as StatCard,
+  it as Steps,
+  zt 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,
-  tt as editorialColors,
-  pr as editorialTheme,
-  Xt as icons,
+  tr as editorialColors,
+  ut as editorialTheme,
+  Yr as icons,
   R as linearGradient,
-  fr as observatoryCategoryPalette,
-  ot as observatoryColors,
-  hr as observatoryTheme,
-  rt as streamingColors,
-  ur as streamingTheme,
-  F as tokens
+  gt as observatoryCategoryPalette,
+  ir as observatoryColors,
+  mt as observatoryTheme,
+  or as streamingColors,
+  ht as streamingTheme,
+  y as tokens
 };
 //# sourceMappingURL=index.js.map