@sorayasm/vietri-ds 0.0.0-stage → 0.2.1

package/dist/index.js

@@ -0,0 +1,2012 @@
+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 h from "@mui/material/Typography";
+import { default as xr } 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 Be from "@mui/material/TableSortLabel";
+import ke 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 Te from "@mui/material/TextField";
+import { default as Or } 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 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";
+function Ge() {
+  return /* @__PURE__ */ e($e, { children: /* @__PURE__ */ e("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
+}
+function V({
+  link: t,
+  onClick: r
+}) {
+  return /* @__PURE__ */ e(
+    C,
+    {
+      href: t.href,
+      underline: "none",
+      "aria-current": t.current ? "page" : void 0,
+      onClick: r,
+      sx: {
+        color: t.current ? "text.primary" : "text.secondary",
+        fontWeight: t.current ? 600 : 500,
+        "&:hover": { color: "text.primary" }
+      },
+      children: t.label
+    }
+  );
+}
+function Gt({
+  brand: t,
+  brandHref: r = "/",
+  links: o,
+  actions: c,
+  ariaLabel: n = "Main",
+  menuLabel: a = "Menu",
+  closeLabel: p = "Close menu",
+  maxWidth: m = "lg"
+}) {
+  const l = ee(), i = Le(l.breakpoints.up("md"), { noSsr: !0 }), [u, f] = I(!1), x = () => f(!1);
+  return /* @__PURE__ */ d(
+    ze,
+    {
+      component: "header",
+      position: "sticky",
+      color: "inherit",
+      elevation: 0,
+      sx: {
+        bgcolor: "background.default",
+        color: "text.primary",
+        borderBottom: 1,
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ e(P, { maxWidth: m, children: /* @__PURE__ */ d(
+          He,
+          {
+            disableGutters: !0,
+            sx: {
+              justifyContent: "space-between",
+              gap: 3,
+              minHeight: { xs: 64, md: 72 }
+            },
+            children: [
+              /* @__PURE__ */ e(
+                C,
+                {
+                  href: r,
+                  underline: "none",
+                  color: "text.primary",
+                  sx: { fontWeight: 600, letterSpacing: "-0.03em", fontSize: "1.125rem" },
+                  children: t
+                }
+              ),
+              i ? /* @__PURE__ */ d(g, { direction: "row", alignItems: "center", spacing: 4, children: [
+                /* @__PURE__ */ e(s, { component: "nav", "aria-label": n, children: /* @__PURE__ */ e(
+                  g,
+                  {
+                    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))
+                  }
+                ) }),
+                c
+              ] }) : /* @__PURE__ */ d(g, { direction: "row", alignItems: "center", spacing: 1, children: [
+                c,
+                /* @__PURE__ */ e(
+                  w,
+                  {
+                    edge: "end",
+                    color: "inherit",
+                    "aria-label": a,
+                    "aria-expanded": u,
+                    onClick: () => f(!0),
+                    children: /* @__PURE__ */ e(Ge, {})
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        !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,
+            {
+              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))
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
+const Ve = [
+  { value: "en", label: "EN" },
+  { value: "es", label: "ES" }
+];
+function Vt({
+  value: t,
+  onChange: r,
+  options: o = Ve,
+  ariaLabel: c = "Language"
+}) {
+  return /* @__PURE__ */ e(
+    Re,
+    {
+      exclusive: !0,
+      size: "small",
+      value: t,
+      "aria-label": c,
+      onChange: (n, a) => {
+        a !== null && r(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 }),
+    o && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: o })
+  ] }) });
+}
+function te(t, r) {
+  return t[r.key];
+}
+function N(t, r) {
+  if (r.sortValue) return r.sortValue(t);
+  const o = te(t, r);
+  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 _t({
+  columns: t,
+  rows: r,
+  getRowKey: o,
+  caption: c,
+  emptyMessage: n = "No data"
+}) {
+  const [a, p] = I(
+    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))
+    );
+  }, [r, t, a]), l = (i) => {
+    p(
+      (u) => u?.key === i && u.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(
+      h,
+      {
+        component: "caption",
+        variant: "body2",
+        color: "text.secondary",
+        sx: { captionSide: "top", textAlign: "left", pb: 2 },
+        children: c
+      }
+    ),
+    /* @__PURE__ */ e(we, { children: /* @__PURE__ */ e(T, { children: t.map((i) => {
+      const u = a?.key === i.key ? a.direction : void 0;
+      return /* @__PURE__ */ e(
+        M,
+        {
+          align: i.align,
+          sortDirection: u ?? !1,
+          children: i.sortable ? /* @__PURE__ */ e(
+            Be,
+            {
+              active: u !== void 0,
+              direction: u ?? "asc",
+              onClick: () => l(i.key),
+              children: i.header
+            }
+          ) : i.header
+        },
+        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,
+      {
+        align: u.align,
+        component: f === 0 ? "th" : "td",
+        scope: f === 0 ? "row" : void 0,
+        children: u.render ? u.render(i) : String(te(i, u) ?? "")
+      },
+      u.key
+    )) }, o(i))) })
+  ] }) });
+}
+function Ut({
+  data: t,
+  title: r,
+  max: o,
+  formatValue: c = 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(
+      h,
+      {
+        component: "figcaption",
+        variant: "overline",
+        color: "text.secondary",
+        sx: { display: "block", mb: 2 },
+        children: r
+      }
+    ),
+    /* @__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);
+      return /* @__PURE__ */ d(
+        s,
+        {
+          component: "li",
+          sx: {
+            display: "grid",
+            gridTemplateColumns: "minmax(80px, 160px) 1fr auto",
+            alignItems: "center",
+            columnGap: 2
+          },
+          children: [
+            /* @__PURE__ */ e(h, { variant: "body2", "aria-hidden": "true", children: a.label }),
+            /* @__PURE__ */ e(
+              s,
+              {
+                role: "meter",
+                "aria-label": a.label,
+                "aria-valuemin": 0,
+                "aria-valuemax": n,
+                "aria-valuenow": a.value,
+                "aria-valuetext": m,
+                sx: {
+                  height: 12,
+                  borderRadius: 1,
+                  bgcolor: "divider",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ e(
+                  s,
+                  {
+                    style: { width: `${p}%` },
+                    sx: { height: "100%", bgcolor: "primary.main" }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(
+              h,
+              {
+                variant: "body2",
+                "aria-hidden": "true",
+                sx: { minWidth: 40, textAlign: "right", fontWeight: 600 },
+                children: m
+              }
+            )
+          ]
+        },
+        a.label
+      );
+    }) })
+  ] });
+}
+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 });
+}
+const Xt = /* @__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,
+  X: L
+}, Symbol.toStringTag, { value: "Module" }));
+function _e({ color: t, dot: r = !1, ...o }) {
+  return /* @__PURE__ */ e(
+    U,
+    {
+      size: "small",
+      ...o,
+      icon: r ? /* @__PURE__ */ e(
+        s,
+        {
+          component: "span",
+          "aria-hidden": "true",
+          sx: { width: 8, height: 8, borderRadius: "50%", bgcolor: t.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 }
+      }
+    }
+  );
+}
+function j(t) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      component: "span",
+      sx: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        whiteSpace: "nowrap",
+        width: "1px"
+      },
+      ...t
+    }
+  );
+}
+function Yt({
+  title: t,
+  description: r,
+  lines: o = [],
+  links: c = [],
+  linksLabel: n = "Footer links",
+  action: a,
+  legal: p,
+  externalLabel: m = "(opens in a new tab)"
+}) {
+  const { glow: l } = ee().vietri.color;
+  return /* @__PURE__ */ d(
+    s,
+    {
+      component: "footer",
+      sx: (i) => ({
+        position: "relative",
+        overflow: "hidden",
+        py: 6,
+        color: i.vietri.color.onSurface,
+        background: i.vietri.gradient.surface,
+        // The default focus ring is not visible on dark backgrounds.
+        "& a:focus-visible, & button:focus-visible": {
+          outline: "2px solid",
+          outlineColor: i.vietri.color.onSurface,
+          outlineOffset: 3
+        }
+      }),
+      children: [
+        l && /* @__PURE__ */ d(W, { children: [
+          /* @__PURE__ */ e(
+            s,
+            {
+              "aria-hidden": "true",
+              sx: {
+                position: "absolute",
+                top: -96,
+                right: -96,
+                width: 384,
+                height: 384,
+                borderRadius: "50%",
+                bgcolor: O(l[0], 0.22),
+                filter: "blur(64px)",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ e(
+            s,
+            {
+              "aria-hidden": "true",
+              sx: {
+                position: "absolute",
+                bottom: -96,
+                left: -96,
+                width: 384,
+                height: 384,
+                borderRadius: "50%",
+                bgcolor: O(l[1], 0.22),
+                filter: "blur(64px)",
+                pointerEvents: "none"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ d(P, { maxWidth: "lg", sx: { position: "relative", zIndex: 1 }, children: [
+          /* @__PURE__ */ d(
+            g,
+            {
+              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(
+                    h,
+                    {
+                      variant: "body2",
+                      sx: (i) => ({
+                        maxWidth: 560,
+                        color: i.vietri.color.onSurfaceSoft
+                      }),
+                      children: r
+                    }
+                  ),
+                  o.map((i) => /* @__PURE__ */ e(
+                    h,
+                    {
+                      variant: "body2",
+                      sx: (u) => ({ color: u.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,
+                    {
+                      component: "ul",
+                      direction: "row",
+                      spacing: 3,
+                      useFlexGap: !0,
+                      flexWrap: "wrap",
+                      sx: { listStyle: "none", m: 0, p: 0 },
+                      children: c.map((i) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
+                        C,
+                        {
+                          href: i.href,
+                          color: "inherit",
+                          underline: "always",
+                          target: i.external ? "_blank" : void 0,
+                          rel: i.external ? "noopener noreferrer" : void 0,
+                          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.href))
+                    }
+                  ) }),
+                  a
+                ] })
+              ]
+            }
+          ),
+          p && /* @__PURE__ */ d(W, { children: [
+            /* @__PURE__ */ e(
+              We,
+              {
+                sx: (i) => ({
+                  my: 3,
+                  borderColor: O(i.vietri.color.onSurface, 0.25)
+                })
+              }
+            ),
+            /* @__PURE__ */ e(
+              h,
+              {
+                variant: "body2",
+                sx: (i) => ({ color: i.vietri.color.onSurfaceSoft }),
+                children: p
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function qt({
+  title: t,
+  eyebrow: r,
+  description: o,
+  level: c = 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(
+      h,
+      {
+        component: "p",
+        variant: "overline",
+        color: "primary.main",
+        sx: { display: "inline-flex", alignItems: "center", gap: 0.75, lineHeight: 1.5 },
+        children: r
+      }
+    ),
+    /* @__PURE__ */ e(h, { component: a, variant: "h3", children: t }),
+    o && /* @__PURE__ */ e(h, { variant: "body1", color: "text.secondary", sx: { maxWidth: 680 }, children: o })
+  ] });
+}
+function Qt({
+  label: t,
+  value: r,
+  onChange: o,
+  options: c,
+  helperText: n,
+  disabled: a,
+  fullWidth: p,
+  size: m,
+  id: l
+}) {
+  const i = new Map(c.map((u) => [u.value, u]));
+  return /* @__PURE__ */ e(
+    Te,
+    {
+      select: !0,
+      id: l,
+      label: t,
+      value: r,
+      onChange: (u) => o(u.target.value),
+      helperText: n,
+      disabled: a,
+      fullWidth: p,
+      size: m,
+      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
+            ] }) : "";
+          }
+        }
+      },
+      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))
+    }
+  );
+}
+function Jt({
+  open: t,
+  onClose: r,
+  title: o,
+  description: c,
+  children: n,
+  actions: a,
+  closeLabel: p = "Close",
+  maxWidth: m = "sm"
+}) {
+  const l = D(), i = D();
+  return /* @__PURE__ */ d(
+    Ie,
+    {
+      open: t,
+      onClose: r,
+      fullWidth: !0,
+      maxWidth: m,
+      "aria-labelledby": l,
+      "aria-describedby": c ? i : void 0,
+      children: [
+        /* @__PURE__ */ e(Ae, { id: l, sx: { pr: 7 }, children: o }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            "aria-label": p,
+            onClick: r,
+            sx: { position: "absolute", top: 8, right: 8 },
+            children: /* @__PURE__ */ e(y, { icon: L })
+          }
+        ),
+        /* @__PURE__ */ d(De, { children: [
+          c && /* @__PURE__ */ e(Ee, { id: i, sx: { mb: n ? 2 : 0 }, children: c }),
+          n
+        ] }),
+        a && /* @__PURE__ */ e(ke, { sx: { px: 3, pb: 2 }, children: a })
+      ]
+    }
+  );
+}
+function Kt({
+  open: t,
+  onClose: r,
+  title: o,
+  eyebrow: c,
+  children: n,
+  footer: a,
+  anchor: p = "right",
+  width: m = 420,
+  closeLabel: l = "Close"
+}) {
+  const i = D();
+  return /* @__PURE__ */ e(Z, { anchor: p, open: t, onClose: r, children: /* @__PURE__ */ d(
+    s,
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": i,
+      sx: {
+        width: { xs: "100vw", sm: m },
+        maxWidth: "100vw",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ d(
+          g,
+          {
+            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__ */ d(s, { 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 })
+      ]
+    }
+  ) });
+}
+function Zt({
+  label: t,
+  value: r,
+  copyLabel: o = "Copy",
+  copiedLabel: c = "Copied!",
+  errorLabel: n = "Could not copy",
+  copiedDuration: a = 2e3
+}) {
+  const [p, m] = I("idle"), l = E(void 0);
+  X(() => () => clearTimeout(l.current), []);
+  async function i() {
+    try {
+      await navigator.clipboard.writeText(r), m("copied");
+    } catch {
+      m("error");
+    }
+    clearTimeout(l.current), l.current = setTimeout(() => m("idle"), a);
+  }
+  return /* @__PURE__ */ d(g, { spacing: 1.5, children: [
+    /* @__PURE__ */ e(h, { component: "p", variant: "overline", color: "text.secondary", children: t }),
+    /* @__PURE__ */ e(
+      s,
+      {
+        role: "region",
+        "aria-label": t,
+        tabIndex: 0,
+        sx: {
+          overflowX: "auto",
+          p: 1.5,
+          borderRadius: 1,
+          border: 1,
+          borderColor: "divider",
+          bgcolor: "background.default",
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+          fontSize: "0.8125rem",
+          whiteSpace: "pre"
+        },
+        children: /* @__PURE__ */ e("code", { children: r })
+      }
+    ),
+    /* @__PURE__ */ e(
+      z,
+      {
+        onClick: i,
+        startIcon: /* @__PURE__ */ e(y, { icon: p === "copied" ? Y : J }),
+        fullWidth: !0,
+        children: p === "copied" ? c : o
+      }
+    ),
+    /* @__PURE__ */ e(j, { role: "status", "aria-live": "polite", children: p === "copied" ? c : p === "error" ? n : "" })
+  ] });
+}
+function er({ href: t, children: r = "Skip to content" }) {
+  return /* @__PURE__ */ e(
+    C,
+    {
+      href: t,
+      sx: (o) => ({
+        position: "fixed",
+        top: o.spacing(1),
+        left: o.spacing(1),
+        zIndex: o.zIndex.tooltip + 1,
+        px: 2,
+        py: 1,
+        borderRadius: 1,
+        bgcolor: "background.paper",
+        color: "text.primary",
+        fontWeight: 600,
+        textDecoration: "none",
+        border: `2px solid ${o.palette.primary.main}`,
+        transform: "translateY(-300%)",
+        "&:focus": { transform: "translateY(0)" }
+      }),
+      children: r
+    }
+  );
+}
+function tr({
+  title: t,
+  eyebrow: r,
+  description: o,
+  actions: c,
+  level: n = 1,
+  align: a = "left"
+}) {
+  const p = `h${n}`, m = a === "center";
+  return /* @__PURE__ */ e(
+    s,
+    {
+      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,
+        {
+          spacing: 2,
+          sx: { alignItems: m ? "center" : "flex-start", textAlign: a },
+          children: [
+            r && /* @__PURE__ */ e(
+              h,
+              {
+                component: "p",
+                variant: "overline",
+                sx: (l) => ({ color: l.vietri.color.onSurfaceSoft }),
+                children: r
+              }
+            ),
+            /* @__PURE__ */ e(h, { component: p, variant: "h2", sx: { maxWidth: 900 }, children: t }),
+            o && /* @__PURE__ */ e(
+              h,
+              {
+                variant: "body1",
+                sx: (l) => ({
+                  maxWidth: 680,
+                  color: l.vietri.color.onSurfaceSoft
+                }),
+                children: o
+              }
+            ),
+            c && /* @__PURE__ */ e(
+              g,
+              {
+                direction: "row",
+                spacing: 2,
+                useFlexGap: !0,
+                flexWrap: "wrap",
+                sx: { pt: 2, justifyContent: m ? "center" : "flex-start" },
+                children: c
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}
+function rr({
+  icon: t,
+  title: r,
+  description: o,
+  level: c = 3,
+  children: n
+}) {
+  const a = `h${c}`;
+  return /* @__PURE__ */ e(B, { sx: { height: "100%" }, children: /* @__PURE__ */ d(k, { children: [
+    /* @__PURE__ */ e(
+      s,
+      {
+        sx: (p) => ({
+          display: "grid",
+          placeItems: "center",
+          width: 44,
+          height: 44,
+          mb: 2,
+          borderRadius: 2,
+          bgcolor: p.vietri.color.chip,
+          color: p.palette.primary.main
+        }),
+        children: /* @__PURE__ */ e(y, { icon: t, size: 22 })
+      }
+    ),
+    /* @__PURE__ */ e(h, { component: a, variant: "h6", gutterBottom: !0, children: r }),
+    o && /* @__PURE__ */ e(h, { variant: "body2", color: "text.secondary", children: o }),
+    n && /* @__PURE__ */ e(s, { sx: { mt: 2 }, children: n })
+  ] }) });
+}
+function or({ steps: t, level: r = 3, ariaLabel: o }) {
+  const c = `h${r}`;
+  return /* @__PURE__ */ e(
+    s,
+    {
+      component: "ol",
+      role: "list",
+      "aria-label": o,
+      sx: {
+        listStyle: "none",
+        m: 0,
+        p: 0,
+        display: "grid",
+        gap: 3,
+        gridTemplateColumns: {
+          xs: "1fr",
+          md: `repeat(${Math.max(t.length, 1)}, minmax(0, 1fr))`
+        }
+      },
+      children: t.map((n, a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(g, { spacing: 1, children: [
+        /* @__PURE__ */ e(
+          s,
+          {
+            "aria-hidden": "true",
+            sx: (p) => ({
+              display: "grid",
+              placeItems: "center",
+              width: 36,
+              height: 36,
+              borderRadius: "50%",
+              fontWeight: 600,
+              bgcolor: p.palette.primary.main,
+              color: p.palette.primary.contrastText
+            }),
+            children: a + 1
+          }
+        ),
+        /* @__PURE__ */ e(h, { component: c, 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}`;
+  return /* @__PURE__ */ e(
+    s,
+    {
+      component: "ol",
+      role: "list",
+      "aria-label": o,
+      sx: { listStyle: "none", m: 0, p: 0 },
+      children: t.map((n) => /* @__PURE__ */ d(
+        s,
+        {
+          component: "li",
+          id: n.id,
+          sx: (a) => ({
+            position: "relative",
+            pl: 4,
+            pb: 5,
+            scrollMarginTop: a.spacing(10),
+            // Vertical line between dots.
+            "&::before": {
+              content: '""',
+              position: "absolute",
+              left: 7,
+              top: 14,
+              bottom: 0,
+              width: 2,
+              bgcolor: a.palette.divider
+            },
+            "&:last-of-type": { pb: 0 },
+            "&:last-of-type::before": { display: "none" }
+          }),
+          children: [
+            /* @__PURE__ */ e(
+              s,
+              {
+                "aria-hidden": "true",
+                sx: (a) => ({
+                  position: "absolute",
+                  left: 0,
+                  top: 6,
+                  width: 16,
+                  height: 16,
+                  borderRadius: "50%",
+                  bgcolor: a.palette.primary.main,
+                  border: `3px solid ${a.palette.background.default}`,
+                  boxSizing: "border-box"
+                })
+              }
+            ),
+            /* @__PURE__ */ e(h, { component: c, 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.id
+      ))
+    }
+  );
+}
+const _ = {
+  position: "static",
+  color: "inherit",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    inset: 0
+  }
+};
+function nr({
+  name: t,
+  subtitle: r,
+  bio: o,
+  tags: c = [],
+  href: n,
+  onClick: a,
+  level: p = 3,
+  bioLines: m = 3
+}) {
+  const l = `h${p}`, i = !!(n || a);
+  return /* @__PURE__ */ e(
+    B,
+    {
+      sx: (f) => ({
+        position: "relative",
+        height: "100%",
+        ...i && { "&: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 ${f.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 }),
+        o && /* @__PURE__ */ e(
+          h,
+          {
+            variant: "body2",
+            sx: {
+              mt: 1,
+              display: "-webkit-box",
+              WebkitLineClamp: m,
+              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)
+        ) })
+      ] })
+    }
+  );
+}
+const A = {
+  position: "static",
+  color: "inherit",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    inset: 0
+  }
+}, Ue = (t) => ({
+  "&:has(:focus-visible)": {
+    outline: `2px solid ${t.palette.primary.main}`,
+    outlineOffset: 2
+  },
+  "& a:focus-visible, & button:focus-visible": { outline: "none" }
+});
+function ar({
+  title: t,
+  subtitle: r,
+  meta: o,
+  imageUrl: c,
+  duration: n,
+  badge: a,
+  href: p,
+  onClick: m,
+  level: l = 3,
+  playIcon: i = !0
+}) {
+  const u = `h${l}`, f = !!(p || m);
+  return /* @__PURE__ */ d(
+    B,
+    {
+      sx: (b) => ({
+        position: "relative",
+        height: "100%",
+        overflow: "hidden",
+        ...f && { "&:hover": { borderColor: b.palette.primary.main } },
+        ...Ue(b)
+      }),
+      children: [
+        /* @__PURE__ */ d(
+          s,
+          {
+            sx: (b) => ({
+              position: "relative",
+              aspectRatio: "16 / 9",
+              bgcolor: b.vietri.color.chip
+            }),
+            children: [
+              c && /* @__PURE__ */ e(
+                s,
+                {
+                  component: "img",
+                  src: c,
+                  alt: "",
+                  loading: "lazy",
+                  sx: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
+                }
+              ),
+              i && /* @__PURE__ */ e(
+                s,
+                {
+                  "aria-hidden": "true",
+                  sx: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    display: "grid",
+                    placeItems: "center",
+                    width: 48,
+                    height: 48,
+                    borderRadius: "50%",
+                    bgcolor: "rgba(0, 0, 0, 0.8)",
+                    color: "#FFFFFF"
+                  },
+                  children: /* @__PURE__ */ e(y, { icon: H, size: 22 })
+                }
+              ),
+              a && /* @__PURE__ */ e(
+                s,
+                {
+                  sx: (b) => ({
+                    position: "absolute",
+                    top: 8,
+                    left: 8,
+                    px: 1,
+                    py: 0.25,
+                    borderRadius: 1,
+                    fontSize: "0.75rem",
+                    fontWeight: 600,
+                    bgcolor: b.vietri.color.action[0],
+                    color: b.vietri.color.onAction
+                  }),
+                  children: a
+                }
+              ),
+              n && /* @__PURE__ */ e(
+                s,
+                {
+                  sx: {
+                    position: "absolute",
+                    right: 8,
+                    bottom: 8,
+                    px: 1,
+                    py: 0.25,
+                    borderRadius: 1,
+                    fontSize: "0.75rem",
+                    fontWeight: 600,
+                    bgcolor: "rgba(0, 0, 0, 0.9)",
+                    color: "#FFFFFF"
+                  },
+                  children: n
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ d(k, { 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 })
+        ] })
+      ]
+    }
+  );
+}
+function lr({
+  title: t,
+  children: r,
+  level: o = 2,
+  itemWidth: c = 280,
+  previousLabel: n = "Scroll left",
+  nextLabel: a = "Scroll right",
+  action: p
+}) {
+  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"
+    });
+  }
+  return /* @__PURE__ */ d(s, { component: "section", "aria-labelledby": l, sx: { mb: 4 }, children: [
+    /* @__PURE__ */ d(
+      g,
+      {
+        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(
+      s,
+      {
+        ref: i,
+        tabIndex: 0,
+        sx: (x) => ({
+          overflowX: "auto",
+          pb: 1,
+          scrollSnapType: "x proximity",
+          "&:focus-visible": {
+            outline: `2px solid ${x.palette.primary.main}`,
+            outlineOffset: 2
+          }
+        }),
+        children: /* @__PURE__ */ e(
+          s,
+          {
+            component: "ul",
+            role: "list",
+            sx: { listStyle: "none", m: 0, p: 0, display: "flex", gap: 2 },
+            children: u.map((x, b) => /* @__PURE__ */ e(
+              s,
+              {
+                component: "li",
+                sx: { flex: `0 0 ${c}px`, scrollSnapAlign: "start" },
+                children: x
+              },
+              b
+            ))
+          }
+        )
+      }
+    )
+  ] });
+}
+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 cr({
+  videoId: t,
+  title: r,
+  poster: o,
+  start: c,
+  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,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: "16 / 9",
+        overflow: "hidden",
+        borderRadius: 2,
+        bgcolor: "#000000"
+      },
+      children: p ? /* @__PURE__ */ e(
+        "iframe",
+        {
+          ref: i,
+          src: Xe(t, c, l.current),
+          title: r,
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+          allowFullScreen: !0,
+          referrerPolicy: "strict-origin-when-cross-origin",
+          loading: "lazy",
+          style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }
+        }
+      ) : /* @__PURE__ */ d(
+        je,
+        {
+          "aria-label": a ?? `Play video: ${r}`,
+          onClick: () => {
+            l.current = !0, m(!0);
+          },
+          sx: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            "&:focus-visible": {
+              outline: "3px solid #FFFFFF",
+              outlineOffset: -6
+            }
+          },
+          children: [
+            o && /* @__PURE__ */ e(
+              s,
+              {
+                component: "img",
+                src: o,
+                alt: "",
+                loading: "lazy",
+                sx: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }
+              }
+            ),
+            /* @__PURE__ */ e(
+              s,
+              {
+                "aria-hidden": "true",
+                sx: {
+                  position: "relative",
+                  display: "grid",
+                  placeItems: "center",
+                  width: 72,
+                  height: 72,
+                  borderRadius: "50%",
+                  bgcolor: "rgba(0, 0, 0, 0.8)",
+                  color: "#FFFFFF"
+                },
+                children: /* @__PURE__ */ e(y, { icon: H, size: 32 })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const Ye = (t) => ({
+  "&:has(:focus-visible)": {
+    outline: `2px solid ${t.palette.primary.main}`,
+    outlineOffset: -2
+  },
+  "& a:focus-visible, & button:focus-visible": { outline: "none" }
+});
+function dr({
+  episodes: t,
+  currentId: r,
+  onSelect: o,
+  level: c = 3,
+  ariaLabel: n,
+  episodeLabel: a = (m) => `Episode ${m}`,
+  currentLabel: p = "Now playing"
+}) {
+  const m = `h${c}`;
+  return /* @__PURE__ */ e(
+    s,
+    {
+      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,
+          {
+            component: "button",
+            type: "button",
+            onClick: () => o(l.id),
+            "aria-current": i ? "true" : void 0,
+            underline: "none",
+            sx: A,
+            children: l.title
+          }
+        ) : l.href ? /* @__PURE__ */ e(
+          C,
+          {
+            href: l.href,
+            "aria-current": i ? "true" : void 0,
+            underline: "none",
+            sx: A,
+            children: l.title
+          }
+        ) : l.title;
+        return /* @__PURE__ */ d(
+          s,
+          {
+            component: "li",
+            sx: (x) => ({
+              position: "relative",
+              display: "flex",
+              gap: 2,
+              p: 2,
+              borderBottom: 1,
+              borderColor: "divider",
+              borderLeft: 4,
+              borderLeftColor: i ? x.palette.primary.main : "transparent",
+              ...u && { "&:hover": { bgcolor: x.palette.action.hover } },
+              ...Ye(x)
+            }),
+            children: [
+              l.imageUrl && /* @__PURE__ */ e(
+                s,
+                {
+                  component: "img",
+                  src: l.imageUrl,
+                  alt: "",
+                  loading: "lazy",
+                  sx: {
+                    flex: "0 0 auto",
+                    width: { xs: 112, sm: 160 },
+                    aspectRatio: "16 / 9",
+                    objectFit: "cover",
+                    borderRadius: 1
+                  }
+                }
+              ),
+              /* @__PURE__ */ d(s, { sx: { minWidth: 0 }, children: [
+                /* @__PURE__ */ d(h, { component: "p", variant: "overline", color: "text.secondary", children: [
+                  a(l.number),
+                  i && ` · ${p}`
+                ] }),
+                /* @__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(
+                  h,
+                  {
+                    variant: "body2",
+                    sx: {
+                      mt: 0.5,
+                      display: "-webkit-box",
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: "vertical",
+                      overflow: "hidden"
+                    },
+                    children: l.description
+                  }
+                )
+              ] })
+            ]
+          },
+          l.id
+        );
+      })
+    }
+  );
+}
+function sr({
+  title: t,
+  description: r,
+  imageUrl: o,
+  platforms: c,
+  level: n = 3,
+  platformsLabel: a = "Listen on",
+  externalLabel: p = "(opens in a new tab)"
+}) {
+  const m = `h${n}`;
+  return /* @__PURE__ */ d(B, { sx: { height: "100%" }, children: [
+    /* @__PURE__ */ e(
+      s,
+      {
+        sx: (l) => ({
+          aspectRatio: "1 / 1",
+          display: "grid",
+          placeItems: "center",
+          bgcolor: l.vietri.color.chip,
+          color: l.palette.text.secondary
+        }),
+        children: o ? /* @__PURE__ */ e(
+          s,
+          {
+            component: "img",
+            src: o,
+            alt: "",
+            loading: "lazy",
+            sx: { display: "block", width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) : /* @__PURE__ */ e(y, { icon: K, 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,
+        {
+          component: "ul",
+          role: "list",
+          "aria-label": a,
+          direction: "row",
+          spacing: 1,
+          useFlexGap: !0,
+          flexWrap: "wrap",
+          sx: { listStyle: "none", m: 0, mt: 2, p: 0 },
+          children: c.map((l) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
+            z,
+            {
+              variant: "outlined",
+              size: "small",
+              href: l.href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              endIcon: /* @__PURE__ */ e(y, { icon: $, size: 14 }),
+              children: [
+                l.name,
+                /* @__PURE__ */ d(j, { children: [
+                  " ",
+                  "– ",
+                  t,
+                  " ",
+                  p
+                ] })
+              ]
+            }
+          ) }, l.name))
+        }
+      )
+    ] })
+  ] });
+}
+function R(t, r, o = 135) {
+  return `linear-gradient(${o}deg, ${t} 0%, ${r} 100%)`;
+}
+function qe(t) {
+  return {
+    surface: R(...t.surface),
+    action: R(...t.action),
+    actionHover: R(...t.actionHover)
+  };
+}
+const F = {
+  spacing: 8,
+  radius: {
+    sm: 4,
+    md: 8,
+    lg: 16
+  },
+  typography: {
+    fontFamily: '"Inter", "Helvetica Neue", Arial, sans-serif',
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600
+    }
+  },
+  shadow: {
+    sm: "0 1px 2px rgba(0, 0, 0, 0.08)",
+    md: "0 4px 12px rgba(0, 0, 0, 0.12)",
+    lg: "0 12px 32px rgba(0, 0, 0, 0.16)"
+  },
+  breakpoints: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+  }
+}, Qe = {
+  // Respects the system "reduce motion" preference (WCAG 2.3.3).
+  MuiCssBaseline: {
+    styleOverrides: `
+      @media (prefers-reduced-motion: reduce) {
+        *, *::before, *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+          scroll-behavior: auto !important;
+        }
+      }
+    `
+  },
+  MuiButton: {
+    defaultProps: { disableElevation: !0 },
+    styleOverrides: {
+      root: ({ theme: t }) => ({
+        borderRadius: F.radius.md,
+        "&:focus-visible": {
+          outline: `2px solid ${t.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 },
+        "&.Mui-disabled": {
+          backgroundImage: "none",
+          color: t.palette.action.disabled
+        }
+      })
+    }
+  },
+  MuiLink: {
+    styleOverrides: {
+      root: ({ theme: t }) => ({
+        "&:focus-visible": {
+          outline: `2px solid ${t.palette.primary.main}`,
+          outlineOffset: 3,
+          borderRadius: F.radius.sm
+        }
+      })
+    }
+  },
+  MuiChip: {
+    styleOverrides: {
+      root: ({ ownerState: t, theme: r }) => {
+        const o = t.variant === "filled" && t.color === "default";
+        return {
+          fontWeight: F.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,
+            "&.MuiChip-clickable:hover": {
+              backgroundColor: r.vietri.color.chipHover
+            }
+          }
+        };
+      }
+    }
+  },
+  MuiCard: {
+    defaultProps: { variant: "outlined" },
+    styleOverrides: {
+      root: {
+        borderRadius: F.radius.lg,
+        backgroundImage: "none"
+      }
+    }
+  },
+  MuiCardActionArea: {
+    styleOverrides: {
+      root: ({ theme: t }) => ({
+        "&:focus-visible": {
+          outline: `2px solid ${t.palette.primary.main}`,
+          outlineOffset: -2
+        }
+      })
+    }
+  },
+  MuiDialog: {
+    styleOverrides: {
+      paper: { borderRadius: F.radius.lg, backgroundImage: "none" }
+    }
+  },
+  MuiDrawer: {
+    styleOverrides: {
+      paper: { backgroundImage: "none" }
+    }
+  },
+  // Field borders use the secondary text color to meet the 3:1 minimum
+  // contrast for interface components (WCAG 1.4.11).
+  MuiOutlinedInput: {
+    styleOverrides: {
+      root: ({ theme: t }) => ({
+        borderRadius: F.radius.md,
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: t.palette.text.secondary
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: t.palette.text.primary
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: t.palette.primary.main
+        },
+        "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+          borderColor: t.palette.error.main
+        },
+        "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+          borderColor: t.palette.divider
+        }
+      })
+    }
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      root: ({ theme: t }) => ({
+        borderBottomColor: t.palette.divider
+      }),
+      head: ({ theme: t }) => ({
+        fontWeight: F.typography.fontWeight.semibold,
+        color: t.palette.text.primary,
+        borderBottom: `2px solid ${t.palette.text.primary}`
+      })
+    }
+  }
+}, { typography: v, breakpoints: Je } = F;
+function Ke(t) {
+  return {
+    color: t,
+    shadow: F.shadow,
+    gradient: qe(t)
+  };
+}
+const Ze = {
+  spacing: F.spacing,
+  shape: { borderRadius: F.radius.md },
+  breakpoints: { values: { ...Je } },
+  typography: {
+    fontFamily: v.fontFamily,
+    fontWeightRegular: v.fontWeight.regular,
+    fontWeightMedium: v.fontWeight.medium,
+    fontWeightBold: v.fontWeight.semibold,
+    h1: {
+      fontSize: "clamp(3rem, 8vw, 7rem)",
+      fontWeight: v.fontWeight.semibold,
+      letterSpacing: "-0.055em",
+      lineHeight: 0.95
+    },
+    h2: {
+      fontSize: "clamp(2rem, 5vw, 4rem)",
+      fontWeight: v.fontWeight.semibold,
+      letterSpacing: "-0.04em",
+      lineHeight: 1.05
+    },
+    h3: {
+      fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
+      fontWeight: v.fontWeight.semibold,
+      letterSpacing: "-0.03em",
+      lineHeight: 1.15
+    },
+    h4: {
+      fontSize: "1.5rem",
+      fontWeight: v.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 },
+    body1: { fontSize: "1rem", lineHeight: 1.6 },
+    body2: { fontSize: "0.875rem", lineHeight: 1.55 },
+    button: {
+      fontWeight: v.fontWeight.medium,
+      textTransform: "none",
+      letterSpacing: "-0.01em"
+    },
+    overline: {
+      fontWeight: v.fontWeight.medium,
+      letterSpacing: "0.12em"
+    }
+  },
+  components: Qe
+};
+function G(t) {
+  return Me({
+    ...Ze,
+    vietri: Ke(t),
+    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
+    }
+  });
+}
+const S = (t) => [t, t], et = {
+  error: "#B91C1C",
+  warning: "#92400E",
+  info: "#0369A1",
+  success: "#166534"
+}, tt = {
+  mode: "light",
+  bg: "#FFFFFF",
+  paper: "#FFFFFF",
+  ink: "#111111",
+  inkSoft: "#555555",
+  line: "#E4E4E4",
+  primary: "#000000",
+  onPrimary: "#FFFFFF",
+  secondary: "#7A5718",
+  onSecondary: "#FFFFFF",
+  action: S("#DBAC5B"),
+  actionHover: S("#FDD07A"),
+  onAction: "#000000",
+  surface: S("#000000"),
+  onSurface: "#FFFFFF",
+  onSurfaceSoft: "#D4D4D4",
+  chip: "#F3EBDA",
+  chipHover: "#E8DDC4",
+  onChip: "#111111",
+  glow: null,
+  status: et,
+  onStatus: "#FFFFFF",
+  brand: {
+    black: "#000000",
+    gold: "#DBAC5B",
+    white: "#FFFFFF",
+    goldLight: "#FDD07A"
+  },
+  derived: {
+    /** Gold that reads as text on white (6.6:1). */
+    bronze: "#7A5718",
+    ink: "#111111",
+    inkSoft: "#555555"
+  }
+}, rt = {
+  mode: "dark",
+  bg: "#20123A",
+  paper: "#2D1B50",
+  ink: "#FFFFFF",
+  inkSoft: "#D5CAEB",
+  line: "rgba(255, 255, 255, 0.14)",
+  primary: "#F35F1C",
+  onPrimary: "#20123A",
+  secondary: "#B99BFF",
+  onSecondary: "#20123A",
+  action: S("#F35F1C"),
+  actionHover: S("#FF7B3F"),
+  onAction: "#20123A",
+  surface: S("#693BCC"),
+  onSurface: "#FFFFFF",
+  onSurfaceSoft: "#EDE6FB",
+  chip: "#3C2866",
+  chipHover: "#4A3478",
+  onChip: "#FFFFFF",
+  glow: null,
+  status: {
+    error: "#F87171",
+    warning: "#FBBF24",
+    info: "#7DD3FC",
+    success: "#4ADE80"
+  },
+  onStatus: "#20123A",
+  brand: {
+    night: "#20123A",
+    violet: "#693BCC",
+    magenta: "#CB1F9C",
+    orange: "#F35F1C"
+  },
+  derived: {
+    /** Violet that reads as text on the night background (7.6:1). */
+    lilac: "#B99BFF",
+    /** Raised surface over night. */
+    nightRaised: "#2D1B50",
+    orangeHover: "#FF7B3F"
+  }
+}, ot = {
+  mode: "light",
+  bg: "#F7F4FA",
+  paper: "#FFFFFF",
+  ink: "#2B1B3D",
+  inkSoft: "#5D4F70",
+  line: "#E3DCEB",
+  // Teal carries actions and links: it reads as text on white and carries
+  // white text. Deep purple is the second voice.
+  primary: "#027381",
+  onPrimary: "#FFFFFF",
+  secondary: "#4A0875",
+  onSecondary: "#FFFFFF",
+  action: S("#027381"),
+  actionHover: S("#015C68"),
+  onAction: "#FFFFFF",
+  surface: S("#4A0875"),
+  onSurface: "#FFFFFF",
+  onSurfaceSoft: "#E8DCF4",
+  chip: "#EFE8F6",
+  chipHover: "#E3D8EF",
+  onChip: "#2B1B3D",
+  glow: null,
+  status: {
+    error: "#C41E32",
+    warning: "#92400E",
+    info: "#0369A1",
+    success: "#166534"
+  },
+  onStatus: "#FFFFFF",
+  // The seven colors of the palette. Cyan, amber, coral and vermilion are too
+  // light to carry text on white: use them as fills, with dark text on top
+  // (charts, categories, highlights).
+  brand: {
+    teal: "#027381",
+    cyan: "#0EB9CB",
+    amber: "#FFC23D",
+    coral: "#FF7751",
+    vermilion: "#F33829",
+    crimson: "#C41E32",
+    purple: "#4A0875"
+  },
+  derived: {
+    /** Page background: a barely-there purple tint. */
+    page: "#F7F4FA",
+    ink: "#2B1B3D",
+    inkSoft: "#5D4F70",
+    /** Teal for the hovered primary action (7.7:1 with white). */
+    tealDark: "#015C68"
+  }
+}, pr = G(tt), ur = G(rt), hr = G(ot), it = [
+  { bg: "#E0F2FE", fg: "#0C4A6E", dot: "#0284C7" },
+  // sky
+  { bg: "#EDE9FE", fg: "#4C1D95", dot: "#7C3AED" },
+  // violet
+  { bg: "#FFE4E6", fg: "#881337", dot: "#E11D48" },
+  // rose
+  { bg: "#FEF3C7", fg: "#78350F", dot: "#D97706" },
+  // amber
+  { bg: "#D1FAE5", fg: "#064E3B", dot: "#059669" },
+  // emerald
+  { bg: "#FAE8FF", fg: "#701A75", dot: "#C026D3" },
+  // fuchsia
+  { bg: "#CCFBF1", fg: "#134E4A", dot: "#0D9488" },
+  // teal
+  { bg: "#FFEDD5", fg: "#7C2D12", dot: "#EA580C" },
+  // orange
+  { bg: "#E0E7FF", fg: "#312E81", dot: "#4F46E5" },
+  // indigo
+  { bg: "#ECFCCB", fg: "#365314", dot: "#65A30D" }
+  // lime
+];
+function mr(t, r = it) {
+  const o = Array.from(new Set(t));
+  return Object.fromEntries(
+    o.map((c, n) => [c, r[n % r.length]])
+  );
+}
+const fr = [
+  { bg: "#027381", fg: "#FFFFFF", dot: "#027381" },
+  // teal
+  { bg: "#FF7751", fg: "#2B1B3D", dot: "#C2410C" },
+  // coral
+  { bg: "#FFC23D", fg: "#2B1B3D", dot: "#A16207" },
+  // amber
+  { bg: "#4A0875", fg: "#FFFFFF", dot: "#4A0875" },
+  // purple
+  { bg: "#0EB9CB", fg: "#2B1B3D", dot: "#0E7490" },
+  // cyan
+  { bg: "#C41E32", fg: "#FFFFFF", dot: "#C41E32" },
+  // crimson
+  { bg: "#F33829", fg: "#000000", dot: "#F33829" }
+  // 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,
+  G as createVietriTheme,
+  tt as editorialColors,
+  pr as editorialTheme,
+  Xt as icons,
+  R as linearGradient,
+  fr as observatoryCategoryPalette,
+  ot as observatoryColors,
+  hr as observatoryTheme,
+  rt as streamingColors,
+  ur as streamingTheme,
+  F as tokens
+};
+//# sourceMappingURL=index.js.map