@eduardoalvarez/arrecife 0.9.0 → 0.11.0

package/dist/index.js

@@ -9,16 +9,15 @@ export { THEME_ATTRIBUTE, THEME_EVENT, THEME_KEY, applyTheme, currentTheme, pref
 import { alert, button, avatar, badge, category, metric, CARD_SURFACE, CARD } from './chunk-XXDATT3A.js';
 export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants } from './chunk-XXDATT3A.js';
 export { text as textVariants } from './chunk-ODBFN44D.js';
-import { MascotFace, Mascot } from './chunk-MPZBF2TZ.js';
-export { Isotype, Logo, Mascot, MascotFace } from './chunk-MPZBF2TZ.js';
-export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from './chunk-CKRSQPTX.js';
-export { social_exports as social } from './chunk-HOADZ6GS.js';
-import './chunk-LXRGQKMG.js';
+import { MascotFace, Mascot } from './chunk-RKGKO2TW.js';
+export { Isotype, Logo, Mascot, MascotFace } from './chunk-RKGKO2TW.js';
+import { Icon } from './chunk-ZSCSKCTY.js';
 import { cn } from './chunk-FAAGZG7A.js';
 export { cn } from './chunk-FAAGZG7A.js';
+export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from './chunk-CKRSQPTX.js';
 import { naming } from './chunk-FGFNK72B.js';
 export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from './chunk-FGFNK72B.js';
-import './chunk-MLKGABMK.js';
+import { CaretDown, XCircle, Warning, CheckCircle, Info, Camera, CircleNotch, CaretLeft, CaretRight, Minus, Check, X, DotsThree, CaretUp, Copy, ArrowUpRight, TrendDown, TrendUp, Sun, Moon, WarningCircle, Waveform, ArrowCounterClockwise, ArrowClockwise, SpeakerSlash, SpeakerHigh, ArrowsClockwise, Pause, Play } from '@phosphor-icons/react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
@@ -42,118 +41,6 @@ import * as ToastPrimitive from '@radix-ui/react-toast';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { format } from 'date-fns';
 
-function Glyph({ children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 16 16",
-      width: "1em",
-      height: "1em",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.75,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
-    }
-  );
-}
-var Check = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
-var Minus = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9" }) });
-var ChevronDown = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" }) });
-var ChevronUp = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 10l4-4 4 4" }) });
-var ChevronLeft = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
-var ChevronRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
-var Close = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-var Copy = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
-] });
-var ArrowUpRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
-var Ellipsis = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
-var Spinner = (props) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    viewBox: "0 0 16 16",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    "aria-hidden": "true",
-    focusable: "false",
-    className: "motion-safe:animate-spin",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
-      /* @__PURE__ */ jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
-    ]
-  }
-);
-var Camera = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M2 5.5h2.6l1-1.5h4.8l1 1.5H14v7.5H2z" }),
-  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "9", r: "2.4" })
-] });
-var Sun = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3" }),
-  /* @__PURE__ */ jsx("path", { d: "M8 1.5v1.2M8 13.3v1.2M14.5 8h-1.2M2.7 8H1.5M12.6 3.4l-.85.85M4.25 11.75l-.85.85M12.6 12.6l-.85-.85M4.25 4.25l-.85-.85" })
-] });
-var Moon = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M13.5 9.4A5.8 5.8 0 0 1 6.6 2.5a5.8 5.8 0 1 0 6.9 6.9Z" }) });
-function MediaGlyph({ children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
-    }
-  );
-}
-var Play = (props) => /* @__PURE__ */ jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
-var Pause = (props) => /* @__PURE__ */ jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
-var Retry = (props) => /* @__PURE__ */ jsx(
-  MediaGlyph,
-  {
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    ...props,
-    children: /* @__PURE__ */ jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })
-  }
-);
-var GoBackSeconds = (props) => /* @__PURE__ */ jsxs(MediaGlyph, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M14 4.5L12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.7288 22 5.82446 20.4293 4 18.001M8 2.83209C6.87754 3.32251 5.86251 4.01303 5 4.85857C3.14864 6.67349 2 9.20261 2 12C2 12.6849 2.06886 13.3538 2.20004 14",
-      strokeLinejoin: "round"
-    }
-  )
-] });
-var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(MediaGlyph, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M10 4.5L12 2C6.47715 2 2 6.47715 2 12C2 12.6849 2.06886 13.3538 2.20004 14M16 2.83209C19.5318 4.3752 22 7.89936 22 12C22 17.5228 17.5228 22 12 22C8.72852 22 5.82443 20.4287 4 18",
-      strokeLinejoin: "round"
-    }
-  )
-] });
-var VolumeOn = (props) => /* @__PURE__ */ jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) });
-var VolumeMuted = (props) => /* @__PURE__ */ jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
 function Accordion({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,
@@ -192,7 +79,7 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronDown, { className: "text-text-muted shrink-0" })
+        /* @__PURE__ */ jsx(Icon, { as: CaretDown, className: "text-text-muted shrink-0" })
       ]
     }
   ) }) });
@@ -221,10 +108,10 @@ var colorGlyph = {
   error: "text-error"
 };
 var GLYPH = {
-  accent: "\u2726",
-  success: "\u2713",
-  warning: "!",
-  error: "\u2715"
+  accent: Info,
+  success: CheckCircle,
+  warning: Warning,
+  error: XCircle
 };
 function Alert({
   className,
@@ -246,9 +133,8 @@ function Alert({
         /* @__PURE__ */ jsx(
           "span",
           {
-            "aria-hidden": "true",
-            className: cn("font-mono text-ui leading-normal select-none", colorGlyph[tone]),
-            children: icon ?? GLYPH[tone]
+            className: cn("text-ui flex h-[1lh] shrink-0 items-center leading-normal", colorGlyph[tone]),
+            children: icon ?? /* @__PURE__ */ jsx(Icon, { as: GLYPH[tone] })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -424,7 +310,7 @@ function AvatarUpload({
           disabled && "pointer-events-none opacity-50"
         ),
         children: [
-          /* @__PURE__ */ jsx(Camera, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(Icon, { as: Camera, "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
           /* @__PURE__ */ jsx(
             "input",
@@ -486,7 +372,7 @@ function Button({
       "aria-busy": loading || void 0,
       ...props,
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, {}) : icon,
+        loading ? /* @__PURE__ */ jsx(Icon, { as: CircleNotch, className: "motion-safe:animate-spin" }) : icon,
         children
       ]
     }
@@ -563,7 +449,7 @@ function Calendar({
         ...classNames
       },
       components: {
-        Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { ...rest }) : /* @__PURE__ */ jsx(ChevronRight, { ...rest })
+        Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsx(Icon, { as: CaretLeft, ...rest }) : /* @__PURE__ */ jsx(Icon, { as: CaretRight, ...rest })
       },
       ...props
     }
@@ -608,7 +494,7 @@ function Checkbox({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-[13px]", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, {}) : /* @__PURE__ */ jsx(Check, {}) })
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-[13px]", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Icon, { as: Minus }) : /* @__PURE__ */ jsx(Icon, { as: Check }) })
     }
   );
 }
@@ -700,7 +586,7 @@ function DialogContent({
                 "hover:bg-surface-raised hover:text-text-primary",
                 "focus-ring"
               ),
-              children: /* @__PURE__ */ jsx(Close, {})
+              children: /* @__PURE__ */ jsx(Icon, { as: X })
             }
           )
         ]
@@ -780,7 +666,7 @@ function DropdownMenuCheckboxItem({
   ...props
 }) {
   return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, { className: cn(item, "pl-8", className), ...props, children: [
-    /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { className: "text-accent absolute left-2 flex items-center", children: /* @__PURE__ */ jsx(Check, {}) }),
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { className: "text-accent absolute left-2 flex items-center", children: /* @__PURE__ */ jsx(Icon, { as: Check }) }),
     children
   ] });
 }
@@ -824,7 +710,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(ChevronRight, { className: "text-text-muted ml-auto" })
+        /* @__PURE__ */ jsx(Icon, { as: CaretRight, className: "text-text-muted ml-auto" })
       ]
     }
   );
@@ -869,7 +755,13 @@ function Pagination({ className, ...props }) {
   );
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("ul", { className: cn("gap-step-xs flex flex-row items-center", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn("gap-step-xs flex flex-row flex-wrap items-center justify-center", className),
+      ...props
+    }
+  );
 }
 function PaginationItem(props) {
   return /* @__PURE__ */ jsx("li", { ...props });
@@ -894,14 +786,14 @@ function PaginationLink({ className, isActive = false, ...props }) {
 }
 function PaginationPrevious({ className, ...props }) {
   return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-step-xs", className), ...props, children: [
-    /* @__PURE__ */ jsx(ChevronLeft, {}),
+    /* @__PURE__ */ jsx(Icon, { as: CaretLeft }),
     "Anterior"
   ] });
 }
 function PaginationNext({ className, ...props }) {
   return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-step-xs", className), ...props, children: [
     "Siguiente",
-    /* @__PURE__ */ jsx(ChevronRight, {})
+    /* @__PURE__ */ jsx(Icon, { as: CaretRight })
   ] });
 }
 function PaginationEllipsis({ className, ...props }) {
@@ -911,7 +803,7 @@ function PaginationEllipsis({ className, ...props }) {
       "aria-hidden": "true",
       className: cn("text-text-muted flex size-9 items-center justify-center", className),
       ...props,
-      children: /* @__PURE__ */ jsx(Ellipsis, {})
+      children: /* @__PURE__ */ jsx(Icon, { as: DotsThree })
     }
   );
 }
@@ -1004,7 +896,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "text-text-muted" }) })
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { as: CaretDown, className: "text-text-muted" }) })
       ]
     }
   );
@@ -1028,9 +920,9 @@ function SelectContent({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { as: CaretUp }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children }),
-        /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+        /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { as: CaretDown }) })
       ]
     }
   ) });
@@ -1066,7 +958,7 @@ function SelectItem({
       ...props,
       children: [
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
-        /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "text-accent absolute right-2 flex items-center", children: /* @__PURE__ */ jsx(Check, {}) })
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "text-accent absolute right-2 flex items-center", children: /* @__PURE__ */ jsx(Icon, { as: Check }) })
       ]
     }
   );
@@ -1148,7 +1040,7 @@ function SheetContent({ className, side, children, ...props }) {
             "hover:bg-surface-raised hover:text-text-primary",
             "focus-ring"
           ),
-          children: /* @__PURE__ */ jsx(Close, {})
+          children: /* @__PURE__ */ jsx(Icon, { as: X })
         }
       )
     ] })
@@ -1311,7 +1203,18 @@ function TabsList({
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
-      className: cn("rounded-control bg-surface gap-step-xs inline-flex items-center p-1", className),
+      className: cn(
+        "rounded-control bg-surface gap-step-xs inline-flex max-w-full items-center p-1",
+        // The triggers are `whitespace-nowrap` — a tab whose label wraps stops
+        // reading as a tab — so on a narrow screen the list is wider than the
+        // page and takes the whole document with it. It SCROLLS instead: the
+        // list keeps hugging its content up to the width available and gives up
+        // the overflow to itself rather than to the page. Every tab stays
+        // reachable, and reaching one by keyboard scrolls it into view on its
+        // own because focus does that.
+        "overflow-x-auto",
+        className
+      ),
       ...props
     }
   );
@@ -1324,7 +1227,10 @@ function TabsTrigger({
     TabsPrimitive.Trigger,
     {
       className: cn(
-        "rounded-chip px-step-sm inline-flex h-8 cursor-pointer items-center justify-center whitespace-nowrap",
+        // `shrink-0` is what makes the list's `overflow-x-auto` work: without it
+        // the triggers give up their width first and the labels run out of their
+        // own pills instead of the row scrolling.
+        "rounded-chip px-step-sm inline-flex h-8 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap",
         "font-sans text-label text-text-secondary",
         "transition-standard",
         "hover:text-text-primary",
@@ -1401,15 +1307,28 @@ var toast = cva(
     variants: {
       variant: {
         neutral: "border-border",
-        success: "border-success/40",
-        error: "border-error/40"
+        success: "border-success bg-linear-to-b from-success/10 to-success/10",
+        error: "border-error bg-linear-to-b from-error/10 to-error/10"
       }
     },
     defaultVariants: { variant: "neutral" }
   }
 );
+var GLYPH2 = {
+  neutral: null,
+  success: CheckCircle,
+  error: WarningCircle
+};
+var GLYPH_COLOR = {
+  neutral: "",
+  success: "text-success",
+  error: "text-error"
+};
 function Toast({ className, variant, children, ...props }) {
+  const tone = variant ?? "neutral";
+  const Mark = GLYPH2[tone];
   return /* @__PURE__ */ jsxs(ToastPrimitive.Root, { className: cn(toast({ variant }), className), ...props, children: [
+    Mark ? /* @__PURE__ */ jsx("span", { className: cn("text-ui flex h-[1lh] shrink-0 items-center leading-normal", GLYPH_COLOR[tone]), children: /* @__PURE__ */ jsx(Icon, { as: Mark }) }) : null,
     children,
     /* @__PURE__ */ jsx(
       ToastPrimitive.Close,
@@ -1421,7 +1340,7 @@ function Toast({ className, variant, children, ...props }) {
           "hover:bg-surface-raised hover:text-text-primary",
           "focus-ring"
         ),
-        children: /* @__PURE__ */ jsx(Close, {})
+        children: /* @__PURE__ */ jsx(Icon, { as: X })
       }
     )
   ] });
@@ -1619,17 +1538,15 @@ function formatTime(seconds) {
   const secs = Math.floor(seconds % 60);
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 }
-var WAVEFORM_HEIGHTS = [35, 65, 100, 65, 35];
 var RATES = [1, 1.25, 1.5, 1.75, 2];
-function Wave({ strokeWidth, height, playing }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-end gap-[2px]", height), "aria-hidden": "true", children: WAVEFORM_HEIGHTS.map((h, i) => /* @__PURE__ */ jsx(
-    "span",
+function Wave({ size: size2, playing }) {
+  return /* @__PURE__ */ jsx(
+    Icon,
     {
-      className: cn("rounded-pill bg-accent transition-standard", strokeWidth),
-      style: { height: `${h}%`, opacity: playing ? 1 : 0.3 + h / 100 * 0.4 }
-    },
-    i
-  )) });
+      as: Waveform,
+      className: cn("text-accent", size2, playing ? "opacity-100" : "opacity-60")
+    }
+  );
 }
 function ProgressBar({
   height,
@@ -1691,7 +1608,7 @@ function SkipButton({
       onClick: () => onSkip(seconds),
       className: cn("text-text-muted hover:text-text-primary", CONTROL, className),
       "aria-label": seconds < 0 ? "Retroceder 15 segundos" : "Adelantar 15 segundos",
-      children: seconds < 0 ? /* @__PURE__ */ jsx(GoBackSeconds, { className: size2 }) : /* @__PURE__ */ jsx(AdvanceSeconds, { className: size2 })
+      children: seconds < 0 ? /* @__PURE__ */ jsx(Icon, { as: ArrowCounterClockwise, className: size2 }) : /* @__PURE__ */ jsx(Icon, { as: ArrowClockwise, className: size2 })
     }
   );
 }
@@ -1736,7 +1653,7 @@ function Volume({
         onClick: onMute,
         className: cn("text-text-muted hover:text-text-primary p-1", CONTROL),
         "aria-label": muted ? "Activar sonido" : "Silenciar",
-        children: muted || volume === 0 ? /* @__PURE__ */ jsx(VolumeMuted, { className: size2 }) : /* @__PURE__ */ jsx(VolumeOn, { className: size2 })
+        children: muted || volume === 0 ? /* @__PURE__ */ jsx(Icon, { as: SpeakerSlash, className: size2 }) : /* @__PURE__ */ jsx(Icon, { as: SpeakerHigh, className: size2 })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1759,10 +1676,11 @@ function Volume({
   ] });
 }
 function PlayIcon({ className, loading, error, playing }) {
-  if (loading) return /* @__PURE__ */ jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
-  if (error) return /* @__PURE__ */ jsx(Retry, { className });
-  if (playing) return /* @__PURE__ */ jsx(Pause, { className });
-  return /* @__PURE__ */ jsx(Play, { className });
+  if (loading)
+    return /* @__PURE__ */ jsx(Icon, { as: CircleNotch, className: cn("motion-safe:animate-spin", className) });
+  if (error) return /* @__PURE__ */ jsx(Icon, { as: ArrowsClockwise, className });
+  if (playing) return /* @__PURE__ */ jsx(Icon, { as: Pause, className });
+  return /* @__PURE__ */ jsx(Icon, { as: Play, className });
 }
 function PlayButton({
   className,
@@ -1977,7 +1895,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ),
         /* @__PURE__ */ jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
-            /* @__PURE__ */ jsx(Wave, { strokeWidth: "w-[2px]", height: "h-4", playing: isPlaying }),
+            /* @__PURE__ */ jsx(Wave, { size: "size-4", playing: isPlaying }),
             /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -2019,7 +1937,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxs("div", { ref: staticRef, children: [
         /* @__PURE__ */ jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
-          /* @__PURE__ */ jsx(Wave, { strokeWidth: "w-[3px]", height: "h-5", playing: isPlaying }),
+          /* @__PURE__ */ jsx(Wave, { size: "size-5", playing: isPlaying }),
           /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
             formatTime(currentTime),
@@ -2233,13 +2151,26 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
                 "focus-ring"
               ),
               children: [
-                copiado ? /* @__PURE__ */ jsx(Check, { className: "text-accent" }) : /* @__PURE__ */ jsx(Copy, {}),
+                copiado ? /* @__PURE__ */ jsx(Icon, { as: Check, className: "text-accent" }) : /* @__PURE__ */ jsx(Icon, { as: Copy }),
                 copiado ? "Copiado" : "Copiar"
               ]
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx("pre", { className: "p-step-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            tabIndex: 0,
+            className: cn(
+              "p-step-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed",
+              // `focus-ring-inset` and not the plain ring: the root carries
+              // `overflow-hidden` so its corners hold, and it clips an outward ring
+              // on three sides. See the note beside the utility in build-tokens.mjs.
+              "focus-ring focus-ring-inset"
+            ),
+            children
+          }
+        )
       ]
     }
   );
@@ -2250,25 +2181,62 @@ function CourseCard({
   meta,
   status,
   progress,
+  media,
+  footer,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
-    status ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "warm", children: status }) }) : null,
-    /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
-    summary ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
-    meta && meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
-      i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
-      m
-    ] }, i)) }) : null,
-    typeof progress === "number" ? /* @__PURE__ */ jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
-      /* @__PURE__ */ jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
-      /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
-        progress,
-        "% cursado"
-      ] })
-    ] }) : null
-  ] }) });
+  const hasProgress = typeof progress === "number";
+  return (
+    // `overflow-hidden` only with a cover: it is what rounds the cover's top
+    // corners to the card's. It clips the content and not the `<a>` itself, so
+    // the focus ring — an outline three pixels outside — still shows.
+    /* @__PURE__ */ jsx(
+      CardShell,
+      {
+        className: cn("p-step-lg", media ? "overflow-hidden" : null, className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+          media ? (
+            // The bleed is the card's own padding, negated. A call site that
+            // changes the padding through `className` has to change this too, and
+            // that is the trade for keeping the padding on the shell like every
+            // other card instead of in a second place only when there is a cover.
+            /* @__PURE__ */ jsx("div", { className: "-mx-step-lg -mt-step-lg mb-step-xs", children: media })
+          ) : null,
+          status ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "warm", children: status }) }) : null,
+          /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+          summary ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
+          meta && meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
+            i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
+            m
+          ] }, i)) }) : null,
+          hasProgress ? /* @__PURE__ */ jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
+            /* @__PURE__ */ jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
+            /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
+              progress,
+              "% cursado"
+            ] })
+          ] }) : null,
+          footer ? (
+            // Only one of the two takes `mt-auto`. Two auto margins in one column
+            // split the free space between them, and the progress bar would float
+            // halfway down the card.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "gap-step-sm pt-step-sm flex flex-wrap items-center justify-between",
+                  hasProgress ? null : "mt-auto"
+                ),
+                children: footer
+              }
+            )
+          ) : null
+        ] })
+      }
+    )
+  );
 }
 var FACE = "w-[66px] max-w-none";
 function EmptyState(props) {
@@ -2494,7 +2462,7 @@ function EventCalendar({
   ] });
 }
 function SocialRow({ social }) {
-  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-[18px]", children: social.map((socialLink) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center justify-center gap-[18px] sm:justify-start", children: social.map((socialLink) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
     "a",
     {
       href: socialLink.href,
@@ -2592,16 +2560,23 @@ function Footer({
     };
     return /* @__PURE__ */ jsxs(Shell, { className, ...rest, children: [
       /* @__PURE__ */ jsxs("div", { className: "gap-step-xl flex flex-col md:flex-row md:justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex max-w-xs flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex max-w-xs flex-col items-center text-center md:items-start md:text-left", children: [
           brand2,
           description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
           social && social.length > 0 ? /* @__PURE__ */ jsx(SocialRow, { social }) : null,
           action
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "gap-step-lg grid grid-cols-2 sm:grid-cols-3", children: columns.map((column) => /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex flex-col", children: [
-          /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "h3", children: column.title }),
-          /* @__PURE__ */ jsx("ul", { className: "gap-step-xs flex flex-col", children: column.links.map((columnLink) => /* @__PURE__ */ jsx("li", { children: link(columnLink.href, columnLink.external, columnLink.label) }, columnLink.href)) })
-        ] }, column.title)) })
+        /* @__PURE__ */ jsx("div", { className: "gap-step-lg grid grid-cols-1 min-[420px]:grid-cols-2 sm:grid-cols-3", children: columns.map((column) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "gap-step-sm flex flex-col items-center text-center md:items-start md:text-left",
+            children: [
+              /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "h3", children: column.title }),
+              /* @__PURE__ */ jsx("ul", { className: "gap-step-xs flex flex-col", children: column.links.map((columnLink) => /* @__PURE__ */ jsx("li", { children: link(columnLink.href, columnLink.external, columnLink.label) }, columnLink.href)) })
+            ]
+          },
+          column.title
+        )) })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsx(Signature, { year, href: signatureHref, domain, className: "text-center sm:text-right" }) })
     ] });
@@ -2612,9 +2587,9 @@ function Footer({
   ].filter(Boolean);
   const [first, ...others] = rows;
   return /* @__PURE__ */ jsxs(Shell, { className, contentClassName: "gap-step-lg", ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex flex-wrap items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex flex-col items-center sm:flex-row sm:flex-wrap", children: [
       first ?? null,
-      /* @__PURE__ */ jsx(Signature, { year, href: signatureHref, domain, className: "ml-auto" })
+      /* @__PURE__ */ jsx(Signature, { year, href: signatureHref, domain, className: "sm:ml-auto" })
     ] }),
     others
   ] });
@@ -2715,8 +2690,9 @@ function LinkRow({
           description ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "label", tone: "muted", className: "block truncate", children: description }) : null
         ] }),
         external ? /* @__PURE__ */ jsx(
-          ArrowUpRight,
+          Icon,
           {
+            as: ArrowUpRight,
             className: "text-text-muted group-hover:text-accent transition-standard shrink-0",
             "aria-hidden": "true"
           }
@@ -2742,15 +2718,35 @@ function Nav({ brand: brand2, children, actions, size: size2 = "default", classN
         "div",
         {
           className: cn(
-            "max-w-wide px-step-md gap-step-lg mx-auto flex items-center",
+            "max-w-wide px-step-md gap-step-sm sm:gap-step-lg mx-auto flex items-center",
             size2 === "compact" ? "h-nav-compact" : "h-nav"
           ),
           children: [
             brand2 ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: brand2 }) : null,
-            children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxs("ul", { className: "gap-step-md flex items-center", children: [
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
-              children
-            ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+            children ? (
+              /*
+                          THE ITEM ROW SCROLLS instead of pushing the page sideways.
+              
+                          `min-w-0` was already here and on its own it does nothing: it lets the
+                          nav shrink below its content, and the content then simply overflows
+                          the bar. Six mono items at 13px plus the `~/` is around 300px, which
+                          fits nowhere under a brand and a theme switch on a 360px screen, and
+                          what the reader got was a horizontal scrollbar on the whole document.
+              
+                          It does NOT hide them below a breakpoint, which is the other obvious
+                          answer and the wrong one for a library: hiding the navigation is only
+                          safe if something else exposes it, and that something is a drawer the
+                          project owns — `eduardoalvarez.dev` composes one out of `Sheet` and
+                          puts it in `actions`. A `Nav` that hid its own items would leave every
+                          consumer without a drawer with no navigation at all, silently.
+              
+                          See `docs/decisions/0.10.md` § 54.
+                        */
+              /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsxs("ul", { className: "gap-step-md flex w-max items-center", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
+                children
+              ] }) })
+            ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
             actions ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
           ]
         }
@@ -2922,12 +2918,21 @@ function PageHeader({
   action,
   size: size2,
   as = "h1",
+  titleVariant,
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxs("header", { className: cn(header({ size: size2 }), className), ...props, children: [
     eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
-    /* @__PURE__ */ jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as,
+        variant: titleVariant ?? (size2 === "display" ? "display" : "h1"),
+        className: "max-w-measure",
+        children: title
+      }
+    ),
     description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
     action ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm mt-step-sm flex flex-wrap items-center", children: action }) : null
   ] });
@@ -2989,8 +2994,8 @@ function ScrollingProgressBar({
   );
 }
 var DELTA = {
-  up: { glyph: ChevronUp, label: "sube" },
-  down: { glyph: ChevronDown, label: "baja" },
+  up: { glyph: TrendUp, label: "sube" },
+  down: { glyph: TrendDown, label: "baja" },
   flat: { glyph: Minus, label: "sin cambio" }
 };
 function Stat({
@@ -3032,7 +3037,7 @@ function Stat({
         DELTA[delta.direction].label,
         " "
       ] }),
-      /* @__PURE__ */ jsx(DeltaGlyph, { className: "shrink-0" }),
+      /* @__PURE__ */ jsx(Icon, { as: DeltaGlyph }),
       delta.value
     ] }) : null,
     description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
@@ -3122,11 +3127,14 @@ function ThemeToggle({
       size: size2,
       "aria-label": label,
       className: cn("[&_svg]:size-[19px]", className),
-      onClick: () => onThemeChange?.(toggleTheme()),
+      onClick: () => {
+        const theme = toggleTheme();
+        onThemeChange?.(theme);
+      },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(Sun, { className: "light:hidden" }),
-        /* @__PURE__ */ jsx(Moon, { className: "hidden light:block" })
+        /* @__PURE__ */ jsx(Icon, { as: Sun, className: "light:hidden" }),
+        /* @__PURE__ */ jsx(Icon, { as: Moon, className: "hidden light:block" })
       ]
     }
   );