@eduardoalvarez/arrecife 0.9.0 → 0.10.0

package/dist/index.cjs

@@ -2,13 +2,14 @@
 'use strict';
 
 var classVarianceAuthority = require('class-variance-authority');
+var react = require('@phosphor-icons/react');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
-var react = require('react');
+var react$1 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var locale = require('date-fns/locale');
 var reactDayPicker = require('react-day-picker');
@@ -62,12 +63,6 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var ToastPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
 // src/tokens/tokens.ts
 var dark = {
   background: "#091319",
@@ -671,118 +666,27 @@ var twMerge = tailwindMerge.extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
-function Glyph({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
-var Minus = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8h9" }) });
-var ChevronDown = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4" }) });
-var ChevronUp = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10l4-4 4 4" }) });
-var ChevronLeft = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4L6 8l4 4" }) });
-var ChevronRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4" }) });
-var Close = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-var Copy = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
-] });
-var ArrowUpRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
-var Ellipsis = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
-var Spinner = (props) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
-    ]
-  }
-);
-var Camera = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 5.5h2.6l1-1.5h4.8l1 1.5H14v7.5H2z" }),
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "9", r: "2.4" })
-] });
-var Sun = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "3" }),
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.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 }) {
+var ICON_WEIGHT = "regular";
+var TONE_WEIGHT = {
+  action: ICON_WEIGHT,
+  current: "fill",
+  quiet: "light"
+};
+function Icon({ as: Glyph, tone = "action", label, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+    Glyph,
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-hidden": "true",
+      size: "1em",
+      weight: TONE_WEIGHT[tone],
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      role: label ? "img" : void 0,
       focusable: "false",
-      ...props,
-      children
+      className: cn("shrink-0", className),
+      ...props
     }
   );
 }
-var Play = (props) => /* @__PURE__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) });
-var Pause = (props) => /* @__PURE__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
-var Retry = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-  MediaGlyph,
-  {
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MediaGlyph, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MediaGlyph, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Root,
@@ -821,7 +725,7 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "text-text-muted shrink-0" })
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretDown, className: "text-text-muted shrink-0" })
       ]
     }
   ) }) });
@@ -850,10 +754,10 @@ var colorGlyph = {
   error: "text-error"
 };
 var GLYPH = {
-  accent: "\u2726",
-  success: "\u2713",
-  warning: "!",
-  error: "\u2715"
+  accent: react.Info,
+  success: react.CheckCircle,
+  warning: react.Warning,
+  error: react.XCircle
 };
 function Alert({
   className,
@@ -875,9 +779,8 @@ function Alert({
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { as: GLYPH[tone] })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1020,9 +923,9 @@ function AvatarUpload({
   className,
   ...props
 }) {
-  const id = react.useId();
-  const [preview, setPreview] = react.useState(null);
-  react.useEffect(() => {
+  const id = react$1.useId();
+  const [preview, setPreview] = react$1.useState(null);
+  react$1.useEffect(() => {
     if (!preview) return;
     return () => URL.revokeObjectURL(preview);
   }, [preview]);
@@ -1053,7 +956,7 @@ function AvatarUpload({
           disabled && "pointer-events-none opacity-50"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Camera, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Camera, "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -1115,7 +1018,7 @@ function Button({
       "aria-busy": loading || void 0,
       ...props,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : icon,
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CircleNotch, className: "motion-safe:animate-spin" }) : icon,
         children
       ]
     }
@@ -1192,7 +1095,7 @@ function Calendar({
         ...classNames
       },
       components: {
-        Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { ...rest }) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { ...rest })
+        Chevron: ({ orientation, ...rest }) => orientation === "left" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretLeft, ...rest }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretRight, ...rest })
       },
       ...props
     }
@@ -1271,7 +1174,7 @@ function Checkbox({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center text-[13px]", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(Minus, {}) : /* @__PURE__ */ jsxRuntime.jsx(Check, {}) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center text-[13px]", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Minus }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Check }) })
     }
   );
 }
@@ -1363,7 +1266,7 @@ function DialogContent({
                 "hover:bg-surface-raised hover:text-text-primary",
                 "focus-ring"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.X })
             }
           )
         ]
@@ -1443,7 +1346,7 @@ function DropdownMenuCheckboxItem({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.CheckboxItem, { className: cn(item, "pl-8", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { className: "text-accent absolute left-2 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Check, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { className: "text-accent absolute left-2 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Check }) }),
     children
   ] });
 }
@@ -1487,7 +1390,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { className: "text-text-muted ml-auto" })
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretRight, className: "text-text-muted ml-auto" })
       ]
     }
   );
@@ -1545,7 +1448,13 @@ function Pagination({ className, ...props }) {
   );
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("gap-step-xs flex flex-row items-center", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: cn("gap-step-xs flex flex-row flex-wrap items-center justify-center", className),
+      ...props
+    }
+  );
 }
 function PaginationItem(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("li", { ...props });
@@ -1570,14 +1479,14 @@ function PaginationLink({ className, isActive = false, ...props }) {
 }
 function PaginationPrevious({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-step-xs", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretLeft }),
     "Anterior"
   ] });
 }
 function PaginationNext({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-step-xs", className), ...props, children: [
     "Siguiente",
-    /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretRight })
   ] });
 }
 function PaginationEllipsis({ className, ...props }) {
@@ -1587,7 +1496,7 @@ function PaginationEllipsis({ className, ...props }) {
       "aria-hidden": "true",
       className: cn("text-text-muted flex size-9 items-center justify-center", className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.DotsThree })
     }
   );
 }
@@ -1680,7 +1589,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { className: "text-text-muted" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretDown, className: "text-text-muted" }) })
       ]
     }
   );
@@ -1704,9 +1613,9 @@ function SelectContent({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUp, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretUp }) }),
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "p-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: "text-text-secondary flex h-6 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CaretDown }) })
       ]
     }
   ) });
@@ -1742,7 +1651,7 @@ function SelectItem({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "text-accent absolute right-2 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Check, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "text-accent absolute right-2 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Check }) })
       ]
     }
   );
@@ -1824,7 +1733,7 @@ function SheetContent({ className, side, children, ...props }) {
             "hover:bg-surface-raised hover:text-text-primary",
             "focus-ring"
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.X })
         }
       )
     ] })
@@ -1987,7 +1896,18 @@ function TabsList({
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.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
     }
   );
@@ -2000,7 +1920,10 @@ function TabsTrigger({
     TabsPrimitive__namespace.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",
@@ -2077,15 +2000,28 @@ var toast = classVarianceAuthority.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: react.CheckCircle,
+  error: react.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__ */ jsxRuntime.jsxs(ToastPrimitive__namespace.Root, { className: cn(toast({ variant }), className), ...props, children: [
+    Mark ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-ui flex h-[1lh] shrink-0 items-center leading-normal", GLYPH_COLOR[tone]), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: Mark }) }) : null,
     children,
     /* @__PURE__ */ jsxRuntime.jsx(
       ToastPrimitive__namespace.Close,
@@ -2097,7 +2033,7 @@ function Toast({ className, variant, children, ...props }) {
           "hover:bg-surface-raised hover:text-text-primary",
           "focus-ring"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.X })
       }
     )
   ] });
@@ -2166,7 +2102,7 @@ var toast2 = Object.assign(create, {
   dismiss: discard
 });
 function Toaster({ duration = 5e3, label = "Avisos" }) {
-  const list = react.useSyncExternalStore(subscribe, read, onServer);
+  const list = react$1.useSyncExternalStore(subscribe, read, onServer);
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastProvider, { duration, label, children: [
     list.map(({ id, title, description, variant, duration: own, action, open }) => /* @__PURE__ */ jsxRuntime.jsxs(
       Toast,
@@ -2295,17 +2231,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__ */ jsxRuntime.jsx("div", { className: cn("flex items-end gap-[2px]", height), "aria-hidden": "true", children: WAVEFORM_HEIGHTS.map((h, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+function Wave({ size: size2, playing }) {
+  return /* @__PURE__ */ jsxRuntime.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: react.Waveform,
+      className: cn("text-accent", size2, playing ? "opacity-100" : "opacity-60")
+    }
+  );
 }
 function ProgressBar({
   height,
@@ -2367,7 +2301,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__ */ jsxRuntime.jsx(GoBackSeconds, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(AdvanceSeconds, { className: size2 })
+      children: seconds < 0 ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.ArrowCounterClockwise, className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.ArrowClockwise, className: size2 })
     }
   );
 }
@@ -2412,7 +2346,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__ */ jsxRuntime.jsx(VolumeMuted, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(VolumeOn, { className: size2 })
+        children: muted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.SpeakerSlash, className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.SpeakerHigh, className: size2 })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2435,10 +2369,11 @@ function Volume({
   ] });
 }
 function PlayIcon({ className, loading, error, playing }) {
-  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
-  if (error) return /* @__PURE__ */ jsxRuntime.jsx(Retry, { className });
-  if (playing) return /* @__PURE__ */ jsxRuntime.jsx(Pause, { className });
-  return /* @__PURE__ */ jsxRuntime.jsx(Play, { className });
+  if (loading)
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CircleNotch, className: cn("motion-safe:animate-spin", className) });
+  if (error) return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.ArrowsClockwise, className });
+  if (playing) return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Pause, className });
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Play, className });
 }
 function PlayButton({
   className,
@@ -2468,21 +2403,21 @@ function PlayButton({
   );
 }
 function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
-  const audioRef = react.useRef(null);
-  const staticRef = react.useRef(null);
-  const isDragging = react.useRef(false);
-  const hasTrackedPlay = react.useRef(false);
-  const [isPlaying, setIsPlaying] = react.useState(false);
-  const [currentTime, setCurrentTime] = react.useState(0);
-  const [duration, setDuration] = react.useState(0);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [hasError, setHasError] = react.useState(false);
-  const [volume, setVolume] = react.useState(1);
-  const [isMuted, setIsMuted] = react.useState(false);
-  const [playbackRate, setPlaybackRate] = react.useState(1);
-  const [isStaticVisible, setIsStaticVisible] = react.useState(true);
+  const audioRef = react$1.useRef(null);
+  const staticRef = react$1.useRef(null);
+  const isDragging = react$1.useRef(false);
+  const hasTrackedPlay = react$1.useRef(false);
+  const [isPlaying, setIsPlaying] = react$1.useState(false);
+  const [currentTime, setCurrentTime] = react$1.useState(0);
+  const [duration, setDuration] = react$1.useState(0);
+  const [isLoading, setIsLoading] = react$1.useState(false);
+  const [hasError, setHasError] = react$1.useState(false);
+  const [volume, setVolume] = react$1.useState(1);
+  const [isMuted, setIsMuted] = react$1.useState(false);
+  const [playbackRate, setPlaybackRate] = react$1.useState(1);
+  const [isStaticVisible, setIsStaticVisible] = react$1.useState(true);
   const floating = mode === "banner" || mode === "compact";
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
@@ -2523,7 +2458,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       audio.removeEventListener("playing", handlePlaying);
     };
   }, []);
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     if (!floating || !staticRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -2535,7 +2470,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     observer.observe(staticRef.current);
     return () => observer.disconnect();
   }, [floating]);
-  const togglePlay = react.useCallback(async () => {
+  const togglePlay = react$1.useCallback(async () => {
     const audio = audioRef.current;
     if (!audio) return;
     if (isPlaying) {
@@ -2559,7 +2494,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       }
     }
   }, [isPlaying, onFirstPlay, title]);
-  const seekTo = react.useCallback(
+  const seekTo = react$1.useCallback(
     (e) => {
       const audio = audioRef.current;
       if (!audio) return;
@@ -2569,7 +2504,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     },
     [duration]
   );
-  const handlePointerDown = react.useCallback(
+  const handlePointerDown = react$1.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       isDragging.current = true;
@@ -2577,18 +2512,18 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     },
     [seekTo]
   );
-  const handlePointerMove = react.useCallback(
+  const handlePointerMove = react$1.useCallback(
     (e) => {
       if (!isDragging.current) return;
       seekTo(e);
     },
     [seekTo]
   );
-  const handlePointerUp = react.useCallback((e) => {
+  const handlePointerUp = react$1.useCallback((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
     isDragging.current = false;
   }, []);
-  const handleVolumeChange = react.useCallback((e) => {
+  const handleVolumeChange = react$1.useCallback((e) => {
     const audio = audioRef.current;
     if (!audio) return;
     const newVolume = parseFloat(e.target.value);
@@ -2596,7 +2531,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     audio.volume = newVolume;
     setIsMuted(newVolume === 0);
   }, []);
-  const toggleMute = react.useCallback(() => {
+  const toggleMute = react$1.useCallback(() => {
     const audio = audioRef.current;
     if (!audio) return;
     if (isMuted) {
@@ -2607,14 +2542,14 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       setIsMuted(true);
     }
   }, [isMuted, volume]);
-  const handlePlaybackRateChange = react.useCallback(() => {
+  const handlePlaybackRateChange = react$1.useCallback(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const nextRate = RATES[(RATES.indexOf(playbackRate) + 1) % RATES.length] ?? 1;
     audio.playbackRate = nextRate;
     setPlaybackRate(nextRate);
   }, [playbackRate]);
-  const skip = react.useCallback(
+  const skip = react$1.useCallback(
     (seconds) => {
       const audio = audioRef.current;
       if (!audio) return;
@@ -2653,7 +2588,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Wave, { strokeWidth: "w-[2px]", height: "h-4", playing: isPlaying }),
+            /* @__PURE__ */ jsxRuntime.jsx(Wave, { size: "size-4", playing: isPlaying }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -2695,7 +2630,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: staticRef, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Wave, { strokeWidth: "w-[3px]", height: "h-5", playing: isPlaying }),
+          /* @__PURE__ */ jsxRuntime.jsx(Wave, { size: "size-5", playing: isPlaying }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
             formatTime(currentTime),
@@ -2867,9 +2802,9 @@ function Breadcrumb({
   ] }) });
 }
 function CodeBlock({ children, language, copyText, className, ...props }) {
-  const [copiado, setCopiado] = react.useState(false);
-  const timer = react.useRef(null);
-  const copy = react.useCallback(async () => {
+  const [copiado, setCopiado] = react$1.useState(false);
+  const timer = react$1.useRef(null);
+  const copy = react$1.useCallback(async () => {
     if (!copyText) return;
     try {
       await navigator.clipboard.writeText(copyText);
@@ -2909,13 +2844,26 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
                 "focus-ring"
               ),
               children: [
-                copiado ? /* @__PURE__ */ jsxRuntime.jsx(Check, { className: "text-accent" }) : /* @__PURE__ */ jsxRuntime.jsx(Copy, {}),
+                copiado ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Check, className: "text-accent" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Copy }),
                 copiado ? "Copiado" : "Copiar"
               ]
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-step-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
+        /* @__PURE__ */ jsxRuntime.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
+          }
+        )
       ]
     }
   );
@@ -3071,13 +3019,13 @@ function EventCalendar({
   className,
   ...props
 }) {
-  const id = react.useId();
-  const [diaInterno, setDiaInterno] = react.useState(() => selected ?? /* @__PURE__ */ new Date());
+  const id = react$1.useId();
+  const [diaInterno, setDiaInterno] = react$1.useState(() => selected ?? /* @__PURE__ */ new Date());
   const day = selected ?? diaInterno;
-  const [month, setMonth] = react.useState(() => day);
-  const [editing, setEditing] = react.useState(null);
-  const [title, setTitle] = react.useState("");
-  const [when, setWhen] = react.useState("");
+  const [month, setMonth] = react$1.useState(() => day);
+  const [editing, setEditing] = react$1.useState(null);
+  const [title, setTitle] = react$1.useState("");
+  const [when, setWhen] = react$1.useState("");
   const editable = Boolean(onCreateEvent ?? onUpdateEvent);
   const ofTheDay = events.filter((e) => sameDay(e.start, day)).sort((a, b) => a.start.getTime() - b.start.getTime());
   function pickDay(nuevo) {
@@ -3239,7 +3187,7 @@ function EventCalendar({
   ] });
 }
 function SocialRow({ social }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap items-center gap-[18px]", children: social.map((socialLink) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap items-center justify-center gap-[18px] sm:justify-start", children: social.map((socialLink) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
     "a",
     {
       href: socialLink.href,
@@ -3337,16 +3285,23 @@ function Footer({
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(Shell, { className, ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xl flex flex-col md:flex-row md:justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-md flex max-w-xs flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
           social && social.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(SocialRow, { social }) : null,
           action
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-lg grid grid-cols-2 sm:grid-cols-3", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "h3", children: column.title }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-step-xs flex flex-col", children: column.links.map((columnLink) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: link(columnLink.href, columnLink.external, columnLink.label) }, columnLink.href)) })
-        ] }, column.title)) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-lg grid grid-cols-1 min-[420px]:grid-cols-2 sm:grid-cols-3", children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "gap-step-sm flex flex-col items-center text-center md:items-start md:text-left",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "h3", children: column.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-step-xs flex flex-col", children: column.links.map((columnLink) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: link(columnLink.href, columnLink.external, columnLink.label) }, columnLink.href)) })
+            ]
+          },
+          column.title
+        )) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, domain, className: "text-center sm:text-right" }) })
     ] });
@@ -3357,9 +3312,9 @@ function Footer({
   ].filter(Boolean);
   const [first, ...others] = rows;
   return /* @__PURE__ */ jsxRuntime.jsxs(Shell, { className, contentClassName: "gap-step-lg", ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-md flex flex-wrap items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-md flex flex-col items-center sm:flex-row sm:flex-wrap", children: [
       first ?? null,
-      /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, domain, className: "ml-auto" })
+      /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, domain, className: "sm:ml-auto" })
     ] }),
     others
   ] });
@@ -3460,8 +3415,9 @@ function LinkRow({
           description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "label", tone: "muted", className: "block truncate", children: description }) : null
         ] }),
         external ? /* @__PURE__ */ jsxRuntime.jsx(
-          ArrowUpRight,
+          Icon,
           {
+            as: react.ArrowUpRight,
             className: "text-text-muted group-hover:text-accent transition-standard shrink-0",
             "aria-hidden": "true"
           }
@@ -3487,15 +3443,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__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: brand2 }) : null,
-            children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "gap-step-md flex items-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
-              children
-            ] }) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "gap-step-md flex w-max items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
+                children
+              ] }) })
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
             actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
           ]
         }
@@ -3549,13 +3525,13 @@ function NewsletterForm({
   className,
   ...props
 }) {
-  const id = react.useId();
-  const form = react.useRef(null);
+  const id = react$1.useId();
+  const form = react$1.useRef(null);
   const sending = state === "sending";
   const error = state === "error";
   const nameError = fieldErrors?.name;
   const emailError = fieldErrors?.email;
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     if (state === "success" && resetOnSuccess) form.current?.reset();
   }, [state, resetOnSuccess]);
   function submit(event) {
@@ -3684,9 +3660,9 @@ function ScrollingProgressBar({
   className,
   ...props
 }) {
-  const [seek, setAvance] = react.useState(0);
-  const pendingOne = react.useRef(0);
-  react.useEffect(() => {
+  const [seek, setAvance] = react$1.useState(0);
+  const pendingOne = react$1.useRef(0);
+  react$1.useEffect(() => {
     const measure = () => {
       pendingOne.current = 0;
       const element = target?.current;
@@ -3734,9 +3710,9 @@ function ScrollingProgressBar({
   );
 }
 var DELTA = {
-  up: { glyph: ChevronUp, label: "sube" },
-  down: { glyph: ChevronDown, label: "baja" },
-  flat: { glyph: Minus, label: "sin cambio" }
+  up: { glyph: react.TrendUp, label: "sube" },
+  down: { glyph: react.TrendDown, label: "baja" },
+  flat: { glyph: react.Minus, label: "sin cambio" }
 };
 function Stat({
   value,
@@ -3777,7 +3753,7 @@ function Stat({
         DELTA[delta.direction].label,
         " "
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(DeltaGlyph, { className: "shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: DeltaGlyph }),
       delta.value
     ] }) : null,
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
@@ -3867,17 +3843,20 @@ 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__ */ jsxRuntime.jsx(Sun, { className: "light:hidden" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Moon, { className: "hidden light:block" })
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Sun, className: "light:hidden" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Moon, className: "hidden light:block" })
       ]
     }
   );
 }
 function useTheme() {
-  return react.useSyncExternalStore(subscribe2, currentTheme, server);
+  return react$1.useSyncExternalStore(subscribe2, currentTheme, server);
 }
 var subscribe2 = (warn) => watchTheme(() => warn());
 var server = () => "dark";
@@ -3966,160 +3945,6 @@ function Logo({
   ] });
 }
 
-// src/social/index.tsx
-var social_exports = {};
-__export(social_exports, {
-  Discord: () => Discord,
-  Email: () => Email,
-  GitHub: () => GitHub,
-  Instagram: () => Instagram,
-  LinkedIn: () => LinkedIn,
-  Newsletter: () => Newsletter,
-  Rss: () => Rss,
-  Website: () => Website,
-  X: () => X,
-  YouTube: () => YouTube
-});
-
-// src/social/data.ts
-var SOCIAL_STROKE_WIDTH = 1.6;
-var SOCIAL_VIEW_BOX = "0 0 24 24";
-var gitHubGlyph = {
-  kind: "brand",
-  shapes: [
-    {
-      tag: "path",
-      d: "M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.91c.58.1.79-.25.79-.55 0-.27-.01-1.18-.02-2.14-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.8 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14 0 1.55-.01 2.79-.01 3.17 0 .3.2.66.79.55A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z"
-    }
-  ]
-};
-var linkedInGlyph = {
-  kind: "brand",
-  shapes: [
-    {
-      tag: "path",
-      d: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.71h.05a4.17 4.17 0 0 1 3.75-2.06c4.01 0 4.75 2.64 4.75 6.07V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21h-3.97V9Z"
-    }
-  ]
-};
-var xGlyph = {
-  kind: "brand",
-  shapes: [
-    {
-      tag: "path",
-      d: "M17.53 3h3.06l-6.69 7.64L21.75 21h-6.16l-4.83-6.3L5.25 21H2.19l7.15-8.17L2.5 3h6.32l4.36 5.77L17.53 3Zm-1.07 16.17h1.7L7.62 4.74H5.8l10.66 14.43Z"
-    }
-  ]
-};
-var instagramGlyph = {
-  kind: "brand",
-  shapes: [
-    {
-      tag: "path",
-      d: "M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32Zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z"
-    }
-  ]
-};
-var discordGlyph = {
-  kind: "brand",
-  shapes: [
-    {
-      tag: "path",
-      d: "M20.32 5.56A18.5 18.5 0 0 0 15.7 4.1a.07.07 0 0 0-.07.04c-.2.36-.42.82-.58 1.19a17 17 0 0 0-5.1 0c-.16-.38-.39-.83-.59-1.19a.07.07 0 0 0-.07-.04c-1.6.28-3.15.77-4.62 1.46a.06.06 0 0 0-.03.03C1.66 10 .9 14.28 1.28 18.5a.08.08 0 0 0 .03.05 18.6 18.6 0 0 0 5.6 2.84.07.07 0 0 0 .08-.03c.43-.59.81-1.21 1.14-1.86a.07.07 0 0 0-.04-.1c-.6-.23-1.18-.51-1.74-.83a.07.07 0 0 1-.01-.12l.35-.27a.07.07 0 0 1 .07-.01 13.3 13.3 0 0 0 11.3 0 .07.07 0 0 1 .08.01l.34.27c.04.04.04.1-.01.12-.55.33-1.13.6-1.74.83a.07.07 0 0 0-.04.1c.34.65.72 1.27 1.14 1.86a.07.07 0 0 0 .08.03 18.5 18.5 0 0 0 5.6-2.84.07.07 0 0 0 .04-.05c.45-4.88-.75-9.12-3.18-12.88a.06.06 0 0 0-.03-.03ZM8.4 15.93c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.9 2.25-2.02 2.25Zm7.22 0c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.89 2.25-2.02 2.25Z"
-    }
-  ]
-};
-var youTubeGlyph = {
-  kind: "brand",
-  shapes: [
-    {
-      tag: "path",
-      d: "M23.5 6.9a3 3 0 0 0-2.12-2.12C19.5 4.27 12 4.27 12 4.27s-7.5 0-9.38.51A3 3 0 0 0 .5 6.9 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.1 3 3 0 0 0 2.12 2.12c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3 3 0 0 0 2.12-2.12A31.3 31.3 0 0 0 24 12a31.3 31.3 0 0 0-.5-5.1ZM9.6 15.6V8.4l6.24 3.6-6.24 3.6Z"
-    }
-  ]
-};
-var rssGlyph = {
-  kind: "functional",
-  shapes: [
-    { tag: "path", d: "M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" },
-    { tag: "circle", cx: 5, cy: 19, r: 1.6, solid: true }
-  ]
-};
-var emailGlyph = {
-  kind: "functional",
-  shapes: [
-    { tag: "rect", x: 2.75, y: 4.75, width: 18.5, height: 14.5, rx: 2 },
-    { tag: "path", d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" }
-  ]
-};
-var newsletterGlyph = {
-  kind: "functional",
-  shapes: [
-    { tag: "path", d: "M18 8.5a6 6 0 1 0-12 0c0 5-2 6.5-2 6.5h16s-2-1.5-2-6.5" },
-    { tag: "path", d: "M13.7 19a2 2 0 0 1-3.4 0" }
-  ]
-};
-var websiteGlyph = {
-  kind: "functional",
-  shapes: [
-    { tag: "circle", cx: 12, cy: 12, r: 9.25 },
-    { tag: "path", d: "M2.75 12h18.5" },
-    { tag: "path", d: "M12 2.75a14 14 0 0 1 0 18.5a14 14 0 0 1 0-18.5" }
-  ]
-};
-var SOLID = { fill: "currentColor", stroke: "none" };
-function drawShape(shape, index) {
-  if (shape.tag === "path") {
-    return /* @__PURE__ */ jsxRuntime.jsx("path", { d: shape.d, ...shape.solid ? SOLID : {} }, index);
-  }
-  if (shape.tag === "circle") {
-    return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: shape.cx, cy: shape.cy, r: shape.r, ...shape.solid ? SOLID : {} }, index);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "rect",
-    {
-      x: shape.x,
-      y: shape.y,
-      width: shape.width,
-      height: shape.height,
-      rx: shape.rx
-    },
-    index
-  );
-}
-function Glyph2({ glyph, ...props }) {
-  const brand2 = glyph.kind === "brand";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      viewBox: SOCIAL_VIEW_BOX,
-      width: "1em",
-      height: "1em",
-      fill: brand2 ? "currentColor" : "none",
-      ...brand2 ? {} : {
-        stroke: "currentColor",
-        strokeWidth: SOCIAL_STROKE_WIDTH,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      },
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children: glyph.shapes.map(drawShape)
-    }
-  );
-}
-var GitHub = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: gitHubGlyph, ...props });
-var LinkedIn = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: linkedInGlyph, ...props });
-var X = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: xGlyph, ...props });
-var Instagram = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: instagramGlyph, ...props });
-var Discord = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: discordGlyph, ...props });
-var YouTube = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: youTubeGlyph, ...props });
-var Rss = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: rssGlyph, ...props });
-var Email = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: emailGlyph, ...props });
-var Newsletter = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: newsletterGlyph, ...props });
-var Website = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph2, { glyph: websiteGlyph, ...props });
-
 exports.ASSETS_PATH = ASSETS_PATH;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -4293,7 +4118,6 @@ exports.radius = radius;
 exports.series = series;
 exports.shadow = shadow;
 exports.size = size;
-exports.social = social_exports;
 exports.spacing = spacing;
 exports.storedTheme = storedTheme;
 exports.syntax = syntax;