@espressif/dashboard-ui-components 1.6.0 → 1.8.0

package/dist/{chunk-IYMCZTJ5.js → chunk-7GVOSWCQ.js}

@@ -1,11 +1,11 @@
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, Label, Badge, Popover, PopoverTrigger, PopoverContent, resolveVariantStyles, VariantGradientUnderlay, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, VARIANT_GRADIENT_BACKDROP_BASE, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, SilverShineOverlay, SilverMetallicBorderOverlay, buttonGroupVariants, useIsInView } from './chunk-ABBHGIFI.js';
-import { FieldLabelRow, fieldHintClassName, Button, inputLabelClassName, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, Sheet, SheetContent, SheetHeader, SheetTitle } from './chunk-ZEQNTNMW.js';
+import { FieldLabelRow, fieldHintClassName, Button, inputLabelClassName, Input, Tooltip2, TooltipProvider, buttonVariants as buttonVariants$1, CopyButton, Link, Tooltip, TooltipTrigger, TooltipContent, HighlightItem, Slot as Slot$1, Highlight, ScrollArea, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuCheckboxItem, Sheet, SheetContent, SheetHeader, SheetTitle } from './chunk-ZFYUONPY.js';
 import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, useIsMobile, useControlledState, Button as Button$1, Skeleton, Avatar, AvatarFallback } from './chunk-OKB2WTX7.js';
 import { cn, resolveColor, isPresetColor } from './chunk-VU4CZ76T.js';
 import { __commonJS, __toESM } from './chunk-TRTQSARU.js';
-import { ChevronDown, ChevronUp, Check, Upload, X, RefreshCw, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, Braces, FileCheck, CheckCheck, TriangleAlert, CircleX, Menu, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, XIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, MoveLeft, CircleIcon, Bolt, Plus, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
-import * as React10 from 'react';
-import React10__default, { forwardRef, useMemo, isValidElement, useRef, useState, useCallback, useLayoutEffect, useEffect, useId, Fragment as Fragment$1, Children, cloneElement, createElement } from 'react';
+import { ChevronDown, ChevronUp, Check, Upload, X, RefreshCw, LoaderCircle, Triangle, Info, MinusIcon, ArrowLeft, ArrowRight, Search, ClockIcon, Crown, ShieldCheck, Tag as Tag$1, ChevronRight, CircleAlert, Eye, EyeOff, Circle, Braces, FileCheck, CheckCheck, TriangleAlert, CircleX, ChevronLeft, Menu, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, XIcon, Columns2, ChevronsRight, ChevronsLeft, MoveLeft, CircleIcon, Bolt, Plus, Clock, XCircle, CheckCircle2, Trash2 } from 'lucide-react';
+import * as React11 from 'react';
+import React11__default, { forwardRef, useMemo, isValidElement, useRef, useState, useCallback, useLayoutEffect, useEffect, useId, Fragment as Fragment$1, Children, cloneElement, createElement } from 'react';
 import { Switch as Switch$1, ToggleGroup as ToggleGroup$1, Dialog as Dialog$1, Accordion as Accordion$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion, useAnimate, useReducedMotion } from 'framer-motion';
@@ -16302,10 +16302,10 @@ function Accordion(props) {
 }
 function AccordionItem(props) {
   const { value: value2 } = useAccordion();
-  const [isOpen, setIsOpen] = React10.useState(
+  const [isOpen, setIsOpen] = React11.useState(
     value2?.includes(props?.value) ?? false
   );
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     setIsOpen(value2?.includes(props?.value) ?? false);
   }, [value2, props?.value]);
   return /* @__PURE__ */ jsx(AccordionItemProvider, { value: { value: props.value, isOpen, setIsOpen }, children: /* @__PURE__ */ jsx(
@@ -16439,7 +16439,7 @@ function Accordion3({
     }
   );
 }
-var SimpleCard = React10.forwardRef(
+var SimpleCard = React11.forwardRef(
   ({ noShadow, noBorder, transparent, title, description, children, className }, ref) => {
     return /* @__PURE__ */ jsxs(
       Card,
@@ -16465,7 +16465,7 @@ var SimpleCard = React10.forwardRef(
 SimpleCard.displayName = "SimpleCard";
 var content2 = (icon, primaryText, secondaryText) => /* @__PURE__ */ jsxs(Fragment, { children: [
   icon != null && /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs flex items-center justify-center gap-1 border", children: icon }) }),
-  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
     primaryText != null && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: primaryText }),
     secondaryText != null && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: secondaryText })
   ] })
@@ -16524,6 +16524,9 @@ var create_new_group_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg id=
 // svg-raw:/builds/app-frameworks/esp-ui-component-library/src/assets/illustrations/new-ota.svg
 var new_ota_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg id="new-ota" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 72.9">\n  <defs>\n    <style>\n      .cls-1 {\n        fill: var(--color-muted-foreground);\n      }\n\n      .cls-2 {\n        fill: var(--color-foreground);\n      }\n    </style>\n  </defs>\n  <path id="cloud" class="cls-2" d="M80.36,27.71c-2.1-2.61-4.41-5-8.22-4.81-.89.04-1.54-.49-1.82-1.34-.85-2.64-2.9-4.15-5.06-5.63-2.71-1.85-5.48-2.1-8.49-.88-1.59.64-1.71.45-2.88-.77-1.33-1.39-2.67-2.88-4.29-3.84-3.63-2.13-7.5-2.38-11.29-.27-2.4,1.34-4.6,2.97-6.36,5.14-.54.67-1.23,1.22-1.86,1.83-.53-.19-.69-.23-.83-.31-3.16-1.91-6.43-1.62-9.82-.67-2.48.7-3.39,2.82-4.73,4.59-.1.13-.15.29-.22.43-.41.79-1.03,1.01-1.81.58-1.42-.77-2.99-.91-4.48-.64-2.37.42-4.77.95-6.17,3.29-2.28,3.83-2.29,8-1.72,12.21.2,1.46,1.07,2.47,2.69,2.68,1.03.13,2.04.55,3.07.65,3.93.38,7.86.79,11.81.99,5.16.27,10.32.31,15.48.52.89.04,1.78.09,2.66.13,0-.34.02-.68.08-1-1.16-.05-2.31-.11-3.47-.16-3.46-.15-6.93-.26-10.39-.4-5.72-.23-11.4-.84-17.03-1.96-2.26-.45-3.35-1.59-3.77-3.99-.44-2.53-.05-4.77.7-7.1.8-2.47,2.62-3.66,5.01-3.94,2-.24,4.04-.11,5.8,1.17.19.13.44.18,1,.4.72-1.2,1.37-2.29,2.05-3.38,2.72-4.38,8.4-5.45,12.53-2.36.31.24.66.43,1.17.75.58-.6,1.09-1.19,1.66-1.72,1.8-1.72,3.48-3.61,5.45-5.1,5.98-4.55,11.82-2.02,15.67,2.27.27.3.46.66.7.98,1.11,1.51,1.16,1.54,2.97.76,5.02-2.17,9.87.68,12.14,4.25.37.59.45,1.36.66,2.05.18.59.35,1.19.51,1.75,5.51-.32,6.23.05,9.84,4.31,2.83,3.34,3.77,7.21,3.52,11.47,0,.16-.04.32-.09.47-.05.15-.14.28-.35.68-.71.05-1.57.23-2.42.16-5.97-.54-11.93.05-17.89.09-.64,0-1.31.08-1.93-.06-2.56-.58-5.15-.73-7.74-.79.22.41.38.85.49,1.31,4.11.32,8.21.79,12.36.5,2.01-.14,4.03-.03,6.05.04,3.14.11,6.28.32,9.42.42,2.61.09,3.42-.76,3.61-3.38.35-4.67-1.1-8.78-3.98-12.36Z"/>\n  <g id="upload">\n    <g>\n      <path class="cls-2" d="M28.78,51.42c2.89.18,5.74.86,8.64.89,1.05.02,1.27.26,1.35,1.36.04.59,0,1.19,0,1.79.01,1.41-.02,2.83.04,4.25.1,2.3.25,4.6.39,6.91h-.17c0,.82.01,1.64,0,2.46-.01.9-.03,1.79-.04,2.69-.01.37-.03.85.43.89,1.48.13,2.96.23,4.44.24,1.11,0,2.22-.15,3.33-.26,1.18-.11,2.39-.14,3.54-.41,2.93-.71,3.34-.42,3-4.22-.26-2.97-.52-5.94-.78-8.9-.08-.89-.17-1.78-.22-2.67-.08-1.42-.19-2.83-.19-4.25,0-1.13.28-1.39,1.43-1.62,1.24-.24,2.5-.44,3.73-.7.58-.13,1.16-.31,1.7-.55.53-.24.64-.88.25-1.31-.35-.38-.77-.7-1.15-1.06-1.5-1.45-3.09-2.82-4.49-4.36-2.4-2.64-4.85-5.23-7.61-7.52-.67-.56-1.32-.7-2.03-.29-1.49.87-3.08,1.06-4.75.85-.92-.11-1.57.34-2.05,1.08-.24.38-.43.79-.68,1.16-1.96,2.9-3.89,5.81-5.91,8.67-.81,1.14-1.84,2.14-2.71,3.24-.24.32-.4.8-.37,1.18.01.18.56.44.88.46ZM41.93,63.44c-.05,1.85-.03,3.71-.07,5.57-.02,1.02-.3,1.58-.64,1.41-.56-.28-.55-.83-.61-1.34-.02-.15-.04-.3-.01-.45.55-3.19-.32-6.37-.16-9.56,0-1.71-.05-3.42.03-5.13.03-.63.32-1.27.59-1.86.08-.17.5-.26.76-.26.13.01.27.3.36.49.07.12.06.29.06.44-.11,3.56-.23,7.12-.31,10.69ZM44.89,37.83c.31-.59.76-.75,1.29-.41.75.47,1.52.96,2.14,1.59,2.73,2.75,5.41,5.55,8.1,8.33.16.16.39.34.39.52.01.25-.1.65-.27.72-.4.18-.86.21-1.3.27-.88.12-1.78.17-2.66.34-1.21.23-1.65.77-1.73,1.96-.02.37-.01.75.02,1.12.25,4.01.49,8.03.77,12.05.1,1.33.36,2.66.42,3.99.07,1.36-.21,1.86-1.52,2.04-1.99.25-4,.26-6.01.33-.61.02-.92-.44-.95-1.03-.06-1.34-.12-2.68-.15-4.02-.02-1.57,0-3.14,0-4.7h.13c0-2.24-.03-4.48.01-6.71.02-1.11-.03-2.23.53-3.28.16-.3.05-.89-.16-1.21-.34-.51-.93-.44-1.41-.15-1.33.83-2.79,1.01-4.3.96-.59-.02-.8-.4-.46-.89,1.23-1.78,2.5-3.52,3.72-5.31.49-.73.9-1.52,1.3-2.31.71-1.39,1.37-2.81,2.1-4.2ZM31.23,48.83c.15-.26.31-.51.48-.76,1.96-2.78,4.05-5.48,5.86-8.37,1.28-2.05,3.15-2.53,5.26-2.75.1,0,.25.27.35.42.03.04-.02.15-.05.21-1.09,2.35-1.97,4.81-3.54,6.91-1.15,1.55-2.33,3.07-3.51,4.6-.77.98-.98,1.07-1.99,1.01-.87-.12-1.68-.21-2.49-.34-.61-.11-.7-.37-.37-.93Z"/>\n      <path class="cls-2" d="M31.23,48.83c.15-.26.31-.51.48-.76,1.96-2.78,4.05-5.48,5.86-8.37,1.28-2.05,3.15-2.53,5.26-2.75.1,0,.25.27.35.42.03.04-.02.15-.05.21-1.09,2.35-1.97,4.81-3.54,6.91-1.15,1.55-2.33,3.07-3.51,4.6-.77.98-.98,1.07-1.99,1.01-.87-.12-1.68-.21-2.49-.34-.61-.11-.7-.37-.37-.93Z"/>\n      <path class="cls-2" d="M40.44,59.07c0-1.71-.05-3.42.03-5.13.03-.63.32-1.27.59-1.86.08-.17.5-.26.76-.26.13.01.27.3.36.49.07.12.06.29.06.44-.11,3.56-.23,7.12-.31,10.69-.05,1.85-.03,3.71-.07,5.57-.02,1.02-.3,1.58-.64,1.41-.56-.28-.55-.83-.61-1.34-.02-.15-.04-.3-.01-.45.55-3.19-.32-6.37-.16-9.56Z"/>\n      <path class="cls-2" d="M23.44,35.71c-.02,1.39.28,1.75,1.62,1.88,1.11.11,2.23.16,3.35.21,1.17.05,1.66-.45,1.55-1.61-.08-.89-.28-1.77-.36-2.66-.09-.96.1-1.2,1.09-1.26,3.5-.19,7-.36,10.51-.49,4.02-.14,8.04-.22,12.07-.31.89-.03,1.79-.06,2.68-.02,1.27.06,1.36.19,1.59,1.4.18.95.37,1.9.63,2.83.35,1.29.5,1.4,1.87,1.33.9-.04,1.79-.15,2.67-.3,1.12-.18,1.56-.67,1.54-1.82-.03-2.01-.05-4.03-.27-6.03-.35-3.29-.58-3.46-3.86-3.38-2.91.07-5.81.23-8.72.34-1.41.05-2.83.05-4.25.12-2.75.15-5.5.34-8.25.52,0-.04-.01-.08-.01-.11-1.86.15-3.71.32-5.56.45-1.79.13-3.58.19-5.36.35-1.03.1-2.08.23-3.06.53-1.18.37-1.42.8-1.25,2.02.22,1.65.19,3.27-.12,4.89-.07.37-.1.75-.1,1.12ZM25.29,30.06c.05-1.2.36-1.63,1.56-1.78,1.1-.13,2.22-.03,3.34-.03v-.04c.67,0,1.34.04,2.01-.01,5.11-.4,10.22-.81,15.33-1.22.6-.04,1.19-.03,1.79-.04,3.57-.05,7.14-.1,10.71-.15.3,0,.6,0,.9,0,.69.03,1.13.43,1.22,1.08.33,2.16.23,4.31-.21,6.44-.12.61-.59.82-1.16.82s-1.13-.11-1.25-.71c-.18-.86-.22-1.76-.29-2.65-.09-1.19-.27-1.46-1.47-1.47-3.5,0-7,.06-10.5.1-1.34.01-2.68.09-4.02.02-3.58-.2-7.14.07-10.7.37-.89.08-1.79.01-2.68.07-1.37.08-2.01.84-1.9,2.19.05.59.21,1.17.23,1.77.04.9-.3,1.24-1.15,1.27-1.46.04-1.9-.34-1.89-1.79,0-1.41.06-2.83.13-4.24Z"/>\n      <path class="cls-2" d="M25.16,34.3c0-1.41.06-2.83.13-4.24.05-1.2.36-1.63,1.56-1.78,1.1-.13,2.22-.03,3.34-.03v-.04c.67,0,1.34.04,2.01-.01,5.11-.4,10.22-.81,15.33-1.22.6-.04,1.19-.03,1.79-.04,3.57-.05,7.14-.1,10.71-.15.3,0,.6,0,.9,0,.69.03,1.13.43,1.22,1.08.33,2.16.23,4.31-.21,6.44-.12.61-.59.82-1.16.82s-1.13-.11-1.25-.71c-.18-.86-.22-1.76-.29-2.65-.09-1.19-.27-1.46-1.47-1.47-3.5,0-7,.06-10.5.1-1.34.01-2.68.09-4.02.02-3.58-.2-7.14.07-10.7.37-.89.08-1.79.01-2.68.07-1.37.08-2.01.84-1.9,2.19.05.59.21,1.17.23,1.77.04.9-.3,1.24-1.15,1.27-1.46.04-1.9-.34-1.89-1.79Z"/>\n    </g>\n  </g>\n  <g id="cog-filled">\n    <g>\n      <path class="cls-2" d="M64.67,5.7c-.82-.1-1.34-.44-1.39-1.36.07-.08.15-.19.25-.3.83-.91.77-1.88-.19-2.64-.33-.26-.72-.49-1.12-.61-.99-.29-1.31-.43-1.79.67-.04.1-.09.22-.17.27-.23.13-.5.34-.71.29-.2-.05-.37-.35-.49-.58-.07-.14-.01-.35-.03-.53-.09-.8-.33-1.01-1.12-.88-.67.11-1.35.23-1.98.43-.43.13-.88.37-1.15.7-.13.17.11.65.21.98.26.95-.23,1.66-1.23,1.72-.37.02-.61.15-.73.51-.14.44-.3.88-.41,1.33-.29,1.19,0,1.65,1.19,1.96.13.04.29.07.4.14.4.23.44.79.08,1.08-.11.09-.25.13-.38.2-.72.41-.82.69-.29,1.33.42.51.95.96,1.47,1.37.66.52.95.47,1.55-.11.13-.12.21-.31.35-.4.21-.14.49-.32.71-.29.34.03.55.31.53.69,0,.21,0,.43,0,.65-.01.58.3.88.85.88.68,0,1.37.03,2.02-.11,1.15-.23,1.33-.65.84-1.7-.13-.29-.35-.61-.03-.87.32-.25.77-.65,1.05-.57.65.19,1.11.02,1.58-.36.49-.4.83-.88.94-1.51.06-.39.12-.78.17-1.17.11-.99.05-1.1-.95-1.22ZM64.5,8.66c-.27.64-.66.71-1.27.37-.15-.09-.31-.25-.46-.26-.22,0-.55.05-.64.19-.34.57-.69,1.04-1.4,1.23-.38.1-.31.5-.1.8.26.37.51.75.79,1.15-.73.6-1.42.52-2.1.31-.18-.05-.43-.38-.4-.54.23-1.5-.94-1.58-1.89-2-.24.36-.44.69-.67,1-.28.36-.64.46-1.03.19-.43-.29-.98-.49-1.04-1.18.19-.09.41-.15.55-.29.17-.14.41-.36.41-.53-.03-.6-.12-1.2-.25-1.78-.03-.14-.31-.27-.49-.32-1.26-.29-1.37-.46-1.05-1.7.03-.1.1-.19.19-.34.79.17,1.3-.23,1.61-.95.09-.19.21-.38.37-.52.41-.35.47-.71.26-1.23-.29-.71-.19-.86.54-1.09.57-.18,1.16-.29,1.86-.45,0,.5.03.85,0,1.18-.04.46.09.76.58.86.38.08.75.21,1.23.35.26-.39.53-.81.81-1.2.12-.17.27-.37.44-.43.73-.26,2.1.75,1.99,1.5-.03.26-.32.53-.55.72-.7.59-.71.57-.19,1.35.06.09.15.17.17.27.11.81.59,1.13,1.39,1.11.47,0,.74.29.67.77-.07.49-.12,1.01-.31,1.45Z"/>\n      <path class="cls-2" d="M64.15,6.44c-.79.01-1.27-.3-1.39-1.11-.01-.09-.11-.18-.17-.27-.51-.78-.51-.77.19-1.35.23-.19.51-.46.55-.72.11-.75-1.26-1.76-1.99-1.5-.17.06-.32.27-.44.43-.29.39-.55.81-.81,1.2-.48-.14-.85-.27-1.23-.35-.49-.1-.62-.4-.58-.86.03-.33,0-.68,0-1.18-.71.16-1.3.27-1.86.45-.73.23-.83.38-.54,1.09.21.52.15.87-.26,1.23-.16.14-.29.33-.37.52-.31.72-.83,1.11-1.61.95-.09.15-.16.24-.19.34-.32,1.25-.21,1.41,1.05,1.7.19.05.47.18.49.32.13.59.23,1.19.25,1.78,0,.17-.23.39-.41.53-.15.13-.36.19-.55.29.06.69.61.89,1.04,1.18.39.27.75.17,1.03-.19.23-.31.43-.64.67-1,.95.41,2.12.5,1.89,2-.03.16.22.49.4.54.68.21,1.38.29,2.1-.31-.28-.41-.53-.78-.79-1.15-.21-.3-.28-.7.1-.8.71-.19,1.06-.66,1.4-1.23.09-.15.42-.19.64-.19.15,0,.31.17.46.26.61.35.99.27,1.27-.37.19-.45.25-.96.31-1.45.07-.48-.2-.77-.67-.77ZM59.59,8.49c-1.18,1.03-2.8.49-3.13-1.04-.05-.25-.07-.49-.1-.66,0-1.1.51-1.84,1.28-2.43.41-.31.87-.3,1.31-.11,1.58.69,1.94,3.1.64,4.23Z"/>\n      <path class="cls-2" d="M58.95,4.25c-.45-.19-.9-.21-1.31.11-.77.59-1.28,1.33-1.28,2.43.03.17.05.41.1.66.33,1.52,1.95,2.06,3.13,1.04,1.31-1.13.95-3.54-.64-4.23ZM58.41,8.31c-.74-.06-1.21-.55-1.29-1.33-.01-.11,0-.21,0-.56,0-.01,0-.27.08-.51.17-.56.56-.9,1.15-.99.54-.08.87.23,1.15.63.34.5.44,1.05.29,1.64-.19.74-.72,1.16-1.37,1.11Z"/>\n    </g>\n  </g>\n  <g id="cog-outlined">\n    <g>\n      <path class="cls-2" d="M6.45,48.97c.46.02.82.01,1.18.06,1.22.15,1.99-.61,1.8-1.8-.18-1.17-.15-1.24,1.07-1.39.57-.07,1.15-.07,1.77-.1.22.59.41,1.11.67,1.82.4-.33.75-.54,1-.83.4-.47.84-.51,1.32-.24.54.3,1.09.61,1.56.99.89.72.92,1.19.26,2.11-.65.89-.62,1.12.22,1.63,1,.61,1.16.87.91,1.98-.11.51-.39,1-.65,1.46-.22.38-.53.53-1.04.45-.96-.15-1.07.06-.66.99.07.15.11.31.16.44-.62.75-2.19,1.24-3.01.88-.24-.11-.4-.48-.53-.76-.45-.98-.85-1.08-1.64-.36-.72.66-.77.67-1.58.12-.54-.37-1.09-.75-1.58-1.2-.47-.42-.43-.72.11-1.08.35-.24.75-.39.6-.93-.15-.53-.52-.66-1.02-.72-1.14-.15-1.23-.29-1.14-1.44.05-.65.14-1.3.22-2.06ZM14.74,56.35c-.04-.24-.06-.41-.09-.57-.21-1.1.56-1.93,1.64-1.77.76.11,1-.04,1.13-.71.13-.69-.06-.99-.76-1.18-.27-.07-.55-.12-.78-.18-.17-.71-.33-1.35-.49-2.04.39-.35.81-.71,1.21-1.06-1.12-1.77-1.68-1.8-3.22-.19-.37-.13-.93-.15-1.18-.44-.32-.37-.39-.96-.59-1.52-.38-.04-.77-.08-1.35-.13.13.82.24,1.47.33,2.03-.62.38-1.16.61-1.57.98-.53.47-1.05.77-1.74.48-.39,1.35-.31,1.45.83,1.61.29.04.66.2.81.43.62.94.52,2.07-.17,2.93.95.84.95.85,1.88.07.56-.47,2.01-.12,2.33.56q.48,1,1.78.69Z"/>\n      <path class="cls-2" d="M12.66,50.18c.86,0,1.45.74,1.44,1.8-.01,1.08-.85,1.98-1.82,1.96-.97-.03-1.91-1.05-1.91-2.09,0-1.06.84-1.68,2.29-1.67ZM12.51,51.01c-.73,0-1.2.31-1.18.8.02.55.68,1.21,1.21,1.21.47,0,.79-.35.81-.89.03-.65-.32-1.11-.84-1.11Z"/>\n    </g>\n  </g>\n  <g id="chip">\n    <g id="chip-body">\n      <g>\n        <path class="cls-2" d="M88.23,55.12c.13-.58.22-1.17.31-1.77.03-.18.06-.4-.21-.52-.34-.15-.68-.35-1.04-.44-1.73-.41-3.46-.8-5.2-1.18-.36-.08-.72-.15-1.08-.2-1.03-.14-2.07-.26-3.1-.38-.44-.05-.46-.06-.6.29-.26.66-.47,1.33-.6,2.03-.22,1.22-.55,2.41-.84,3.61t0,0c-.28,1.16-.56,2.33-.83,3.49-.05.2-.09.4-.08.61.02.36.14.46.56.54.63.12,1.28.22,1.91.35,1.01.21,2.02.39,3.02.66.63.17,1.25.31,1.9.39.26.03.52.07.79.12.74.12,1.47.23,2.21.36.34.06.53-.06.66-.27.06-.09.11-.19.14-.3.37-1.12.77-2.24,1.09-3.38.37-1.32.68-2.66.98-4ZM86.83,59.79c-.03.12-.09.22-.13.34-.04,0-.07,0-.1,0-.01.12-.04.24-.08.35.01,0,.03,0,.05,0-.12.76-.36,1.42-.68,2.05-.12.24-.35.28-.64.23-.65-.11-1.31-.23-1.96-.35-.1-.02-.2-.05-.29-.06-1.12-.04-2.18-.42-3.27-.65-1.23-.27-2.47-.5-3.71-.73-.55-.1-.71-.19-.64-.63.08-.51.26-1,.4-1.49.01-.04.03-.06.05-.09,0-.1.02-.2.06-.31.03-.1.07-.18.11-.27,0-.16.05-.32.11-.47-.02,0-.04-.02-.06-.03.09-.47.16-.93.26-1.39.25-1.17.56-2.33.76-3.51.11-.66.36-1.25.68-1.83.02-.04.05-.06.11-.12.19.02.4.05.61.07.36.03.72.05,1.08.07.22.01.43.01.64.05,1.39.26,2.78.49,4.16.8,1.05.23,2.08.56,3.12.85.13.03.24.1.36.16.33.15.46.36.41.66-.15.77-.28,1.55-.45,2.32-.3,1.33-.63,2.64-.95,3.97Z"/>\n        <path class="cls-2" d="M83.98,60.73c-2.12-.13-4.08-.41-6.1-1.02.32-2.15.62-4.21.95-6.27.08-.54.49-.75.97-.66,1.68.31,3.35.67,5.01,1.03.53.11.91.49.81,1.05-.35,1.96-.58,3.95-1.63,5.86Z"/>\n      </g>\n    </g>\n    <g id="chip_leg-middle" data-name="chip=leg-middle">\n      <path class="cls-1" d="M81.09,69.95s-.07-.03-.09-.06l-1.98-3.22,1.01-4.25c.02-.07.09-.12.17-.1s.12.09.1.17l-.98,4.14,1.92,3.12c.04.06.02.15-.05.19-.03.02-.07.02-.1.02Z"/>\n      <path class="cls-1" d="M81.41,71.86c-.61-.14-.98-.75-.84-1.36s.75-.98,1.36-.84.98.75.84,1.36-.75.98-1.36.84ZM81.78,70.32c-.24-.06-.48.09-.54.33s.09.48.33.54.48-.09.54-.33-.09-.48-.33-.54Z"/>\n    </g>\n    <g id="chip-leg-left">\n      <path class="cls-1" d="M78.42,70.13s-.07-.03-.1-.07l-2.2-3.57,1.12-4.72c.02-.08.1-.13.18-.11s.13.1.11.18l-1.09,4.6,2.13,3.47c.04.07.02.17-.05.21-.04.02-.08.03-.12.02Z"/>\n      <path class="cls-1" d="M78.54,71.87c-.61-.14-.98-.75-.84-1.36s.75-.98,1.36-.84.98.75.84,1.36-.75.98-1.36.84ZM78.91,70.34c-.24-.06-.48.09-.54.33s.09.48.33.54.48-.09.54-.33-.09-.48-.33-.54Z"/>\n    </g>\n    <g id="chip-leg-right">\n      <path class="cls-1" d="M82.83,65.87c-.07-.02-.1-.14-.07-.27l.62-2.59c.03-.13.11-.23.18-.21s.1.14.07.27l-.62,2.59c-.03.13-.11.23-.18.21Z"/>\n      <path class="cls-1" d="M82.43,68.12c-.61-.14-.98-.75-.84-1.36s.75-.98,1.36-.84.98.75.84,1.36-.75.98-1.36.84ZM82.8,66.58c-.24-.06-.48.09-.54.33s.09.48.33.54.48-.09.54-.33-.09-.48-.33-.54Z"/>\n    </g>\n  </g>\n  <g id="arrow">\n    <path class="cls-2" d="M94.99,43.03v-.5s-.05-.5-.05-.5l-.08-.99-.15-.99-.08-.49c-.03-.16-.07-.32-.11-.49l-.22-.97c-.09-.32-.19-.64-.28-.96l-.14-.48c-.05-.16-.12-.31-.17-.47l-.35-.93c-.13-.31-.28-.61-.41-.91l-.21-.45c-.07-.15-.16-.29-.23-.44l-.48-.88c-.17-.29-.36-.56-.53-.84l-.27-.42c-.09-.14-.2-.27-.29-.4l-.6-.8-.89-1.03s-.03-.03-.07-.07c-.04-.05-.11-.11-.2-.18-.17-.15-.39-.34-.61-.53-.43-.39-.9-.71-.87-.68-.79-.54-1.35-.77-.32.33.14.17.32.34.47.53.15.19.31.37.44.53.14.16.26.3.34.4.09.1.13.16.13.16l.63.72c.22.24.41.5.61.76.19.26.4.51.58.79.35.55.72,1.08,1.02,1.66.65,1.13,1.14,2.34,1.56,3.57.19.62.39,1.24.52,1.88l.11.48c.04.16.07.32.09.48l.15.96c.15,1.29.23,2.6.13,3.89-.02.65-.12,1.29-.21,1.94-.02.16-.05.32-.09.48l-.1.48c-.07.32-.13.64-.21.95-.32,1.27-.73,2.51-1.28,3.68-.28.58-.59,1.15-.94,1.69-.35.53-.76,1.03-1.2,1.48-.16.15-.31.31-.48.44l-.25.21c-.09.06-.18.12-.27.19-.01.01-.03.05-.03.06-.15.54.21.66.44.64.03,0,.04,0,.06-.02.1-.07.2-.14.3-.21l.28-.23c.19-.15.36-.32.54-.49.48-.48.91-1.02,1.29-1.58.37-.56.7-1.15.99-1.76.57-1.21.99-2.48,1.32-3.76.09-.32.15-.64.22-.97.07-.33.14-.65.2-.98l.13-.99c.02-.17.05-.33.06-.5l.03-.5.06-1v-1Z"/>\n    <path class="cls-2" d="M86.9,26.88c.18-.05.44-.09.7-.1.53-.02,1.09.04,1.04.02.46.02.86.01.95-.06.09-.07-.12-.19-.85-.39-.43-.13-.98-.25-1.45-.26-.23-.01-.44,0-.6.03-.15.02-.24.05-.24.05-.05,0-.14.05-.2.08l-.21.09-.42.2.22.55.06.15.03.07.05.14c.03.1.06.19.08.29.11.41.19.85.17,1.22,0,.02.02.05.03.05.16.19.29.29.44.29.14,0,.27-.11.34-.22.02-.03.03-.04.03-.06.03-.55-.07-1.03-.19-1.5-.03-.11-.06-.22-.1-.32l-.05-.16-.03-.08h0s-.01,0,0,0c.05-.01.12-.05.21-.07Z"/>\n  </g>\n</svg>';
 
+// svg-raw:/builds/app-frameworks/esp-ui-component-library/src/assets/illustrations/rm-dashboard-update.svg
+var rm_dashboard_update_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg id="rm-dashboard-update" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 845.67 533.92">\n  <!--\n    RainMaker cloud (taken from the product logo) delivering an update to a\n    dashboard on a laptop. Companion to rm-data-download: same canvas, cloud\n    and connector, so the two read as one family.\n\n    One source, two variants (see illustration-variants.ts):\n    - static: every SMIL element is stripped and `data-variant="animated"`\n      groups are dropped, so the base attribute values below ARE the resting\n      frame (chart bars up, progress two thirds full, two packages in flight).\n    - animated: `data-variant="static"` groups are dropped. Packages arrive\n      1.5s apart (package k lands at 3s + 1.5s * k); each landing refreshes\n      one stat card, while the chart regrows and the sync badge spins.\n    Variant groups must not contain nested <g> elements: the selector is a\n    non-greedy regex up to the first closing tag.\n\n    Theme colours come from the design tokens; the cloud keeps the logo\'s own\n    reds on purpose. Ids are prefixed "rmdu-" because the markup is inlined.\n  -->\n  <defs>\n    <style>\n      .rmdu-card { fill: var(--color-card); }\n      .rmdu-muted { fill: var(--color-muted); }\n      .rmdu-muted-fg { fill: var(--color-muted-foreground); }\n      .rmdu-gray { fill: var(--color-gray); }\n      .rmdu-primary { fill: var(--color-primary); }\n      .rmdu-primary-light { fill: var(--color-primary-light); }\n      .rmdu-highlight { fill: var(--color-primary-light); }\n      .rmdu-flow { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 9; opacity: .55; }\n      .rmdu-pkg-frame { fill: var(--color-card); stroke: var(--color-primary); stroke-width: 2.5; }\n      .rmdu-glyph { fill: none; stroke: var(--color-primary-foreground); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }\n    </style>\n\n    <linearGradient id="rmdu-cloud" x1=".83" y1="92.99" x2="512.02" y2="92.99" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#fc4c3b"/>\n      <stop offset=".5" stop-color="#d43129"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdu-cloud-top" x1="340.71" y1="86.7" x2="166.21" y2="-87.76" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#d43129"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdu-cloud-band" x1="43.64" y1="194.71" x2="364.07" y2="194.71" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#d43129"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdu-cloud-sweep" x1="377.59" y1="200.5" x2="479.34" y2="200.5" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#f94939"/>\n      <stop offset="1" stop-color="#d43129"/>\n    </linearGradient>\n    <linearGradient id="rmdu-dot" x1="130.74" y1="157.26" x2="95.26" y2="121.82" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#d43129"/>\n      <stop offset=".17" stop-color="#dd372d"/>\n      <stop offset=".67" stop-color="#f14436"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdu-drop" x1="0" y1="0" x2="1" y2="0">\n      <stop offset="0" stop-color="#fc4c3b"/>\n      <stop offset=".57" stop-color="#eb3b30"/>\n      <stop offset="1" stop-color="#e5352c"/>\n    </linearGradient>\n\n    <!-- The three rain dashes of the logo, reused for the static logo and the falling copies. -->\n    <g id="rmdu-rain">\n      <path fill="url(#rmdu-drop)" d="M295.41,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.99-9.37,22.07-10.49,31.44-2.5s10.49,22.07,2.5,31.44h0l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>\n      <path fill="url(#rmdu-drop)" d="M195.75,420.01c-5.3,0-10.42-1.89-14.43-5.35-9.37-7.95-10.52-21.99-2.57-31.36.02-.02.03-.04.05-.06l46.42-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>\n      <path fill="url(#rmdu-drop)" d="M96.14,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.22,4.98-10.42,7.84-16.95,7.82h0Z"/>\n    </g>\n\n\n    <!-- One update package travelling from the cloud to the dashboard: an up-arrow chip and a version label. -->\n    <g id="rmdu-package">\n      <rect class="rmdu-pkg-frame" x="-31" y="-13" width="62" height="26" rx="7"/>\n      <circle class="rmdu-primary" cx="-17" cy="0" r="7"/>\n      <path class="rmdu-glyph" d="M-17 3.5 V-3.5 M-20 -0.8 L-17 -3.8 L-14 -0.8"/>\n      <rect class="rmdu-muted-fg" x="-5" y="-5" width="26" height="5" rx="2.5"/>\n      <rect class="rmdu-muted-fg" x="-5" y="3" width="16" height="4" rx="2" opacity=".6"/>\n    </g>\n\n    <path id="rmdu-flow-path" d="M338 178 C 440 178, 462 402, 560 402"/>\n  </defs>\n\n  <!-- Ground -->\n  <ellipse class="rmdu-muted" cx="440" cy="526" rx="380" ry="7.5"/>\n\n  <!-- RainMaker cloud, straight from the logo (viewBox 512 x 420), scaled down. -->\n  <g transform="translate(48 30) scale(0.58)">\n    <!-- Falling copies of the logo\'s rain, emitted continuously. -->\n    <g data-variant="animated" opacity=".55">\n      <use href="#rmdu-rain">\n        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="0s" repeatCount="indefinite"/>\n        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="0s" repeatCount="indefinite"/>\n      </use>\n      <use href="#rmdu-rain">\n        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>\n        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>\n      </use>\n    </g>\n\n    <use href="#rmdu-rain"/>\n    <circle fill="url(#rmdu-dot)" cx="113" cy="253.55" r="25.08">\n      <animate attributeName="r" values="25.08;27.5;25.08" dur="2.4s" repeatCount="indefinite"/>\n    </circle>\n    <path fill="url(#rmdu-cloud)" d="M400.41,142.72h0C397.94,61.46,330.05-2.41,248.79.07,171.43,2.43,109.11,64.29,106.18,141.63h0C44.34,144.92-3.13,197.72.16,259.56c3.2,60.25,53.51,107.16,113.84,106.16h201.58c10.54-.84,20.1,6.2,22.43,16.52h0l20.77-24.38h0c3.57-4.17,5.45-9.51,5.3-14.99-.47-12.19-10.53-21.81-22.73-21.73H113.74c-37.31,1.14-68.47-28.18-69.61-65.49s28.18-68.47,65.49-69.61c1.11-.03,2.23-.04,3.34-.02,4.07,0,8.12.37,12.13,1.09,5.86,1.08,11.91-.25,16.78-3.69,7.2-4.74,11.02-13.2,9.82-21.73-.69-4.79-1.04-9.63-1.04-14.47,0-56.67,45.94-102.61,102.61-102.61s102.61,45.94,102.61,102.61v4.35h0c-41.09,17.61-67.82,57.91-68.06,102.61-.1,12.4,9.81,22.56,22.21,22.77,12.31.05,22.33-9.9,22.38-22.21v-.09c-.15-37.32,29.99-67.7,67.32-67.85,37.32-.15,67.7,29.99,67.85,67.32.07,17.03-6.3,33.45-17.82,45.99l-.3.39-66.37,76.54c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l66.28-76.14c41.57-45.93,38.04-116.87-7.89-158.44-20.48-18.53-47.07-28.86-74.69-29.01h0v-.03Z"/>\n    <path fill="url(#rmdu-cloud-top)" d="M253.21,20.42c71.54-.01,133.13,50.5,147.12,120.65C396.84,59.85,328.17-3.17,246.95.31c-76.06,3.26-137.08,63.98-140.73,140.02,14.27-69.82,75.72-119.95,146.99-119.91Z"/>\n    <path fill="url(#rmdu-cloud-band)" d="M358.78,357.9h0c7.97-9.42,6.79-23.51-2.62-31.48-4.02-3.4-9.11-5.27-14.37-5.29H113c-37.3-.02-67.53-30.24-67.58-67.54,0-6.2.86-12.37,2.52-18.34,0,0-43.46,130.38,145.86,130.38h121.69c10.56-.84,20.12,6.22,22.43,16.56l20.86-24.3h0Z"/>\n    <path fill="url(#rmdu-cloud-sweep)" d="M454.44,215.04c18.93,25.91,17,61.56-4.61,85.27l-.3.39-66.45,76.32c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l17.38-19.99h0c88.14-101.83,20.34-171.28,20.34-171.28h0Z"/>\n  </g>\n\n  <!-- Connector: dashes flow from the cloud towards the laptop. -->\n  <use href="#rmdu-flow-path" class="rmdu-flow">\n    <animate attributeName="stroke-dashoffset" from="0" to="-18" dur="0.9s" repeatCount="indefinite"/>\n  </use>\n\n  <!-- Laptop -->\n  <g id="rmdu-laptop">\n    <rect class="rmdu-muted-fg" x="526.77" y="310.15" width="296.41" height="203.65" rx="29.36"/>\n    <path class="rmdu-gray" d="M504.29,513.81h341.38c0,11.1-9.01,20.11-20.11,20.11h-301.15c-11.1,0-20.11-9.01-20.11-20.11h0Z"/>\n    <path class="rmdu-muted" d="M649.88,513.81h50.2v.15c0,2.95-2.4,5.35-5.35,5.35h-39.51c-2.95,0-5.35-2.4-5.35-5.35v-.15h0Z"/>\n    <circle class="rmdu-card" cx="674.98" cy="318.61" r="3.7"/>\n\n    <rect class="rmdu-card" x="539.84" y="327.23" width="270.27" height="169.5"/>\n    <rect class="rmdu-primary" x="539.84" y="327.23" width="270.27" height="17.44"/>\n    <circle class="rmdu-card" cx="551" cy="335.95" r="2.6" opacity=".85"/>\n    <circle class="rmdu-card" cx="560" cy="335.95" r="2.6" opacity=".85"/>\n    <circle class="rmdu-card" cx="569" cy="335.95" r="2.6" opacity=".85"/>\n\n    <!-- Dashboard sidebar -->\n    <rect class="rmdu-muted" x="551" y="355" width="50" height="103" rx="4"/>\n    <rect class="rmdu-primary" x="558" y="364" width="34" height="5" rx="2.5"/>\n    <rect class="rmdu-muted-fg" x="558" y="377" width="28" height="4" rx="2" opacity=".7"/>\n    <rect class="rmdu-muted-fg" x="558" y="389" width="32" height="4" rx="2" opacity=".7"/>\n    <rect class="rmdu-muted-fg" x="558" y="401" width="24" height="4" rx="2" opacity=".7"/>\n\n    <!-- Stat cards: each flashes as a package lands. The highlight rests at opacity 0, so the static frame is unaffected. -->\n    <g>\n      <rect class="rmdu-muted" x="609" y="355" width="58" height="34" rx="4"/>\n      <rect class="rmdu-highlight" x="609" y="355" width="58" height="34" rx="4" opacity="0">\n        <animate attributeName="opacity" values="0;.45;0;0" keyTimes="0;.08;.35;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>\n      </rect>\n      <rect class="rmdu-primary" x="616" y="363" width="16" height="4" rx="2"/>\n      <rect class="rmdu-muted-fg" x="616" y="373" width="30" height="7" rx="3.5"/>\n    </g>\n    <g>\n      <rect class="rmdu-muted" x="675" y="355" width="58" height="34" rx="4"/>\n      <rect class="rmdu-highlight" x="675" y="355" width="58" height="34" rx="4" opacity="0">\n        <animate attributeName="opacity" values="0;.45;0;0" keyTimes="0;.08;.35;1" dur="4.5s" begin="4.5s" repeatCount="indefinite"/>\n      </rect>\n      <rect class="rmdu-primary" x="682" y="363" width="16" height="4" rx="2"/>\n      <rect class="rmdu-muted-fg" x="682" y="373" width="26" height="7" rx="3.5"/>\n    </g>\n    <g>\n      <rect class="rmdu-muted" x="741" y="355" width="58" height="34" rx="4"/>\n      <rect class="rmdu-highlight" x="741" y="355" width="58" height="34" rx="4" opacity="0">\n        <animate attributeName="opacity" values="0;.45;0;0" keyTimes="0;.08;.35;1" dur="4.5s" begin="6s" repeatCount="indefinite"/>\n      </rect>\n      <rect class="rmdu-primary" x="748" y="363" width="16" height="4" rx="2"/>\n      <rect class="rmdu-muted-fg" x="748" y="373" width="22" height="7" rx="3.5"/>\n    </g>\n\n    <!-- Chart: bars at full height at rest; when animated they shrink and regrow with each cycle. -->\n    <rect class="rmdu-muted" x="609" y="397" width="190" height="61" rx="4" opacity=".6"/>\n    <rect class="rmdu-primary-light" x="615" y="424" width="22" height="28" rx="3">\n      <animate attributeName="height" values="14;28;28;14" keyTimes="0;.3;.85;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>\n      <animate attributeName="y" values="438;424;424;438" keyTimes="0;.3;.85;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>\n    </rect>\n    <rect class="rmdu-primary-light" x="651" y="412" width="22" height="40" rx="3">\n      <animate attributeName="height" values="22;40;40;22" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.2s" repeatCount="indefinite"/>\n      <animate attributeName="y" values="430;412;412;430" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.2s" repeatCount="indefinite"/>\n    </rect>\n    <rect class="rmdu-primary-light" x="687" y="430" width="22" height="22" rx="3">\n      <animate attributeName="height" values="12;22;22;12" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.4s" repeatCount="indefinite"/>\n      <animate attributeName="y" values="440;430;430;440" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.4s" repeatCount="indefinite"/>\n    </rect>\n    <rect class="rmdu-primary" x="723" y="406" width="22" height="46" rx="3">\n      <animate attributeName="height" values="26;46;46;26" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.6s" repeatCount="indefinite"/>\n      <animate attributeName="y" values="426;406;406;426" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.6s" repeatCount="indefinite"/>\n    </rect>\n    <rect class="rmdu-primary-light" x="759" y="418" width="22" height="34" rx="3">\n      <animate attributeName="height" values="18;34;34;18" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.8s" repeatCount="indefinite"/>\n      <animate attributeName="y" values="434;418;418;434" keyTimes="0;.3;.85;1" dur="4.5s" begin="0.8s" repeatCount="indefinite"/>\n    </rect>\n\n    <!-- Update progress: two thirds full at rest, filling over the cycle when animated. -->\n    <rect class="rmdu-muted" x="551" y="470" width="216" height="8" rx="4"/>\n    <rect class="rmdu-primary" x="551" y="470" width="144" height="8" rx="4">\n      <animate attributeName="width" values="0;216;216" keyTimes="0;.92;1" dur="4.5s" repeatCount="indefinite"/>\n    </rect>\n\n    <!-- Sync badge -->\n    <g transform="translate(786 474)">\n      <circle class="rmdu-primary" r="11"/>\n      <g class="rmdu-glyph">\n        <path d="M-5.17 -1.88 A5.5 5.5 0 0 1 5.17 -1.88 M6.44 -4.6 L5.17 -1.88 L2.45 -3.15"/>\n        <path d="M5.17 1.88 A5.5 5.5 0 0 1 -5.17 1.88 M-6.44 4.6 L-5.17 1.88 L-2.45 3.15"/>\n        <animateTransform attributeName="transform" type="rotate" values="0;360" dur="2s" repeatCount="indefinite"/>\n      </g>\n    </g>\n  </g>\n\n  <!-- Static frame: two packages frozen part-way along the connector. -->\n  <g data-variant="static">\n    <use href="#rmdu-package" x="422" y="241"/>\n    <use href="#rmdu-package" x="492" y="359"/>\n  </g>\n\n  <!-- Animated: three packages in flight, arriving 1.5s apart. -->\n  <g data-variant="animated">\n    <use href="#rmdu-package" opacity="0">\n      <animateMotion dur="4.5s" begin="0s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">\n        <mpath href="#rmdu-flow-path"/>\n      </animateMotion>\n      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>\n    </use>\n    <use href="#rmdu-package" opacity="0">\n      <animateMotion dur="4.5s" begin="1.5s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">\n        <mpath href="#rmdu-flow-path"/>\n      </animateMotion>\n      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="1.5s" repeatCount="indefinite"/>\n    </use>\n    <use href="#rmdu-package" opacity="0">\n      <animateMotion dur="4.5s" begin="3s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">\n        <mpath href="#rmdu-flow-path"/>\n      </animateMotion>\n      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>\n    </use>\n  </g>\n</svg>\n';
+
 // svg-raw:/builds/app-frameworks/esp-ui-component-library/src/assets/illustrations/rm-data-download.svg
 var rm_data_download_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg id="rm-data-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 845.67 533.92">\n  <!--\n    RainMaker cloud (taken from the product logo) raining data into a laptop.\n\n    One source, two variants (see illustration-variants.ts):\n    - static: every SMIL element is stripped and `data-variant="animated"`\n      groups are dropped, so the base attribute values below ARE the resting\n      frame (rows visible, progress two thirds full, two records in flight).\n    - animated: `data-variant="static"` groups are dropped; `<set>` elements\n      hide what the animations then bring in, so nothing flashes before its\n      first `begin`.\n    Variant groups must not contain nested <g> elements: the selector is a\n    non-greedy regex up to the first closing tag.\n\n    Theme colours come from the design tokens; the cloud keeps the logo\'s own\n    reds on purpose. Ids are prefixed "rmdd-" because the markup is inlined.\n  -->\n  <defs>\n    <style>\n      .rmdd-card { fill: var(--color-card); }\n      .rmdd-muted { fill: var(--color-muted); }\n      .rmdd-muted-fg { fill: var(--color-muted-foreground); }\n      .rmdd-gray { fill: var(--color-gray); }\n      .rmdd-primary { fill: var(--color-primary); }\n      .rmdd-primary-light { fill: var(--color-primary-light); }\n      .rmdd-flow { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 9; opacity: .55; }\n      .rmdd-pkt-frame { fill: var(--color-card); stroke: var(--color-primary); stroke-width: 2.5; }\n    </style>\n\n    <linearGradient id="rmdd-cloud" x1=".83" y1="92.99" x2="512.02" y2="92.99" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#fc4c3b"/>\n      <stop offset=".5" stop-color="#d43129"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdd-cloud-top" x1="340.71" y1="86.7" x2="166.21" y2="-87.76" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#d43129"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdd-cloud-band" x1="43.64" y1="194.71" x2="364.07" y2="194.71" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#d43129"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdd-cloud-sweep" x1="377.59" y1="200.5" x2="479.34" y2="200.5" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#f94939"/>\n      <stop offset="1" stop-color="#d43129"/>\n    </linearGradient>\n    <linearGradient id="rmdd-dot" x1="130.74" y1="157.26" x2="95.26" y2="121.82" gradientTransform="translate(0 114.01)" gradientUnits="userSpaceOnUse">\n      <stop offset="0" stop-color="#d43129"/>\n      <stop offset=".17" stop-color="#dd372d"/>\n      <stop offset=".67" stop-color="#f14436"/>\n      <stop offset="1" stop-color="#f94939"/>\n    </linearGradient>\n    <linearGradient id="rmdd-drop" x1="0" y1="0" x2="1" y2="0">\n      <stop offset="0" stop-color="#fc4c3b"/>\n      <stop offset=".57" stop-color="#eb3b30"/>\n      <stop offset="1" stop-color="#e5352c"/>\n    </linearGradient>\n\n    <!-- The three rain dashes of the logo, reused for the static logo and the falling copies. -->\n    <g id="rmdd-rain">\n      <path fill="url(#rmdd-drop)" d="M295.41,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.99-9.37,22.07-10.49,31.44-2.5s10.49,22.07,2.5,31.44h0l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>\n      <path fill="url(#rmdd-drop)" d="M195.75,420.01c-5.3,0-10.42-1.89-14.43-5.35-9.37-7.95-10.52-21.99-2.57-31.36.02-.02.03-.04.05-.06l46.42-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.24,4.97-10.46,7.83-16.99,7.82h0Z"/>\n      <path fill="url(#rmdd-drop)" d="M96.14,420.01c-12.31,0-22.29-9.99-22.29-22.31,0-5.3,1.89-10.43,5.34-14.46l46.37-54.33c7.75-9.57,21.79-11.05,31.36-3.3s11.05,21.79,3.3,31.36c-.24.3-.5.6-.76.89l-46.37,54.33c-4.22,4.98-10.42,7.84-16.95,7.82h0Z"/>\n    </g>\n\n    <!-- One exported record travelling from the cloud to the laptop. -->\n    <g id="rmdd-packet">\n      <rect class="rmdd-pkt-frame" x="-31" y="-13" width="62" height="26" rx="7"/>\n      <rect class="rmdd-primary" x="-22" y="-5" width="12" height="5" rx="2.5"/>\n      <rect class="rmdd-muted-fg" x="-6" y="-5" width="27" height="5" rx="2.5"/>\n      <rect class="rmdd-muted-fg" x="-22" y="3" width="17" height="4" rx="2" opacity=".6"/>\n      <rect class="rmdd-muted-fg" x="0" y="3" width="15" height="4" rx="2" opacity=".6"/>\n    </g>\n\n    <path id="rmdd-flow-path" d="M338 178 C 440 178, 462 402, 560 402"/>\n  </defs>\n\n  <!-- Ground -->\n  <ellipse class="rmdd-muted" cx="440" cy="526" rx="380" ry="7.5"/>\n\n  <!-- RainMaker cloud, straight from the logo (viewBox 512 x 420), scaled down. -->\n  <g transform="translate(48 30) scale(0.58)">\n    <!-- Falling copies of the logo\'s rain, emitted continuously. -->\n    <g data-variant="animated" opacity=".55">\n      <use href="#rmdd-rain">\n        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="0s" repeatCount="indefinite"/>\n        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="0s" repeatCount="indefinite"/>\n      </use>\n      <use href="#rmdd-rain">\n        <animateTransform attributeName="transform" type="translate" values="0 0; 0 160" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>\n        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.12;.5;1" dur="2.4s" begin="1.2s" repeatCount="indefinite"/>\n      </use>\n    </g>\n\n    <use href="#rmdd-rain"/>\n    <circle fill="url(#rmdd-dot)" cx="113" cy="253.55" r="25.08">\n      <animate attributeName="r" values="25.08;27.5;25.08" dur="2.4s" repeatCount="indefinite"/>\n    </circle>\n    <path fill="url(#rmdd-cloud)" d="M400.41,142.72h0C397.94,61.46,330.05-2.41,248.79.07,171.43,2.43,109.11,64.29,106.18,141.63h0C44.34,144.92-3.13,197.72.16,259.56c3.2,60.25,53.51,107.16,113.84,106.16h201.58c10.54-.84,20.1,6.2,22.43,16.52h0l20.77-24.38h0c3.57-4.17,5.45-9.51,5.3-14.99-.47-12.19-10.53-21.81-22.73-21.73H113.74c-37.31,1.14-68.47-28.18-69.61-65.49s28.18-68.47,65.49-69.61c1.11-.03,2.23-.04,3.34-.02,4.07,0,8.12.37,12.13,1.09,5.86,1.08,11.91-.25,16.78-3.69,7.2-4.74,11.02-13.2,9.82-21.73-.69-4.79-1.04-9.63-1.04-14.47,0-56.67,45.94-102.61,102.61-102.61s102.61,45.94,102.61,102.61v4.35h0c-41.09,17.61-67.82,57.91-68.06,102.61-.1,12.4,9.81,22.56,22.21,22.77,12.31.05,22.33-9.9,22.38-22.21v-.09c-.15-37.32,29.99-67.7,67.32-67.85,37.32-.15,67.7,29.99,67.85,67.32.07,17.03-6.3,33.45-17.82,45.99l-.3.39-66.37,76.54c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l66.28-76.14c41.57-45.93,38.04-116.87-7.89-158.44-20.48-18.53-47.07-28.86-74.69-29.01h0v-.03Z"/>\n    <path fill="url(#rmdd-cloud-top)" d="M253.21,20.42c71.54-.01,133.13,50.5,147.12,120.65C396.84,59.85,328.17-3.17,246.95.31c-76.06,3.26-137.08,63.98-140.73,140.02,14.27-69.82,75.72-119.95,146.99-119.91Z"/>\n    <path fill="url(#rmdd-cloud-band)" d="M358.78,357.9h0c7.97-9.42,6.79-23.51-2.62-31.48-4.02-3.4-9.11-5.27-14.37-5.29H113c-37.3-.02-67.53-30.24-67.58-67.54,0-6.2.86-12.37,2.52-18.34,0,0-43.46,130.38,145.86,130.38h121.69c10.56-.84,20.12,6.22,22.43,16.56l20.86-24.3h0Z"/>\n    <path fill="url(#rmdd-cloud-sweep)" d="M454.44,215.04c18.93,25.91,17,61.56-4.61,85.27l-.3.39-66.45,76.32c-8.09,9.29-7.12,23.38,2.17,31.47s23.38,7.12,31.47-2.17h0l17.38-19.99h0c88.14-101.83,20.34-171.28,20.34-171.28h0Z"/>\n  </g>\n\n  <!-- Connector: dashes flow from the cloud towards the laptop. -->\n  <use href="#rmdd-flow-path" class="rmdd-flow">\n    <animate attributeName="stroke-dashoffset" from="0" to="-18" dur="0.9s" repeatCount="indefinite"/>\n  </use>\n\n  <!-- Laptop -->\n  <g id="rmdd-laptop">\n    <rect class="rmdd-muted-fg" x="526.77" y="310.15" width="296.41" height="203.65" rx="29.36"/>\n    <path class="rmdd-gray" d="M504.29,513.81h341.38c0,11.1-9.01,20.11-20.11,20.11h-301.15c-11.1,0-20.11-9.01-20.11-20.11h0Z"/>\n    <path class="rmdd-muted" d="M649.88,513.81h50.2v.15c0,2.95-2.4,5.35-5.35,5.35h-39.51c-2.95,0-5.35-2.4-5.35-5.35v-.15h0Z"/>\n    <circle class="rmdd-card" cx="674.98" cy="318.61" r="3.7"/>\n\n    <rect class="rmdd-card" x="539.84" y="327.23" width="270.27" height="169.5"/>\n    <rect class="rmdd-primary" x="539.84" y="327.23" width="270.27" height="17.44"/>\n    <circle class="rmdd-card" cx="551" cy="335.95" r="2.6" opacity=".85"/>\n    <circle class="rmdd-card" cx="560" cy="335.95" r="2.6" opacity=".85"/>\n    <circle class="rmdd-card" cx="569" cy="335.95" r="2.6" opacity=".85"/>\n\n    <!-- Table header -->\n    <rect class="rmdd-muted" x="551" y="355" width="248" height="16" rx="3"/>\n    <rect class="rmdd-muted-fg" x="558" y="361" width="34" height="4" rx="2"/>\n    <rect class="rmdd-muted-fg" x="606" y="361" width="58" height="4" rx="2"/>\n    <rect class="rmdd-muted-fg" x="682" y="361" width="42" height="4" rx="2"/>\n    <rect class="rmdd-muted-fg" x="746" y="361" width="30" height="4" rx="2"/>\n\n    <!--\n      Rows: visible in the static frame. When animated, `set` hides them from\n      t=0 and each lights up as a packet arrives (packet k lands at 3s + 1.5s * k).\n    -->\n    <g>\n      <rect class="rmdd-primary-light" x="551" y="378" width="248" height="16" rx="3" opacity=".45"/>\n      <rect class="rmdd-primary" x="558" y="384" width="34" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="606" y="384" width="50" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="682" y="384" width="36" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="746" y="384" width="24" height="4" rx="2"/>\n      <set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>\n      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>\n    </g>\n    <g>\n      <rect class="rmdd-primary-light" x="551" y="400" width="248" height="16" rx="3" opacity=".45"/>\n      <rect class="rmdd-primary" x="558" y="406" width="34" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="606" y="406" width="44" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="682" y="406" width="40" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="746" y="406" width="18" height="4" rx="2"/>\n      <set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>\n      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="4.5s" repeatCount="indefinite"/>\n    </g>\n    <g>\n      <rect class="rmdd-primary-light" x="551" y="422" width="248" height="16" rx="3" opacity=".45"/>\n      <rect class="rmdd-primary" x="558" y="428" width="34" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="606" y="428" width="56" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="682" y="428" width="30" height="4" rx="2"/>\n      <rect class="rmdd-muted-fg" x="746" y="428" width="28" height="4" rx="2"/>\n      <set attributeName="opacity" to="0" begin="0s" dur="indefinite"/>\n      <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.06;.82;1" dur="4.5s" begin="6s" repeatCount="indefinite"/>\n    </g>\n\n    <!-- Download progress: two thirds full at rest, filling over the cycle when animated. -->\n    <rect class="rmdd-muted" x="551" y="470" width="248" height="8" rx="4"/>\n    <rect class="rmdd-primary" x="551" y="470" width="168" height="8" rx="4">\n      <animate attributeName="width" values="0;248;248" keyTimes="0;.92;1" dur="4.5s" repeatCount="indefinite"/>\n    </rect>\n\n    <!-- Download badge -->\n    <g transform="translate(786 452)">\n      <circle class="rmdd-primary" r="11"/>\n      <g fill="none" stroke="var(--color-primary-foreground)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">\n        <path d="M0 -5.5 V3.5"/>\n        <path d="M-3.8 0 L0 3.8 L3.8 0"/>\n        <path d="M-5 6.5 H5"/>\n        <animateTransform attributeName="transform" type="translate" values="0 -1.2; 0 1.2; 0 -1.2" dur="1.2s" repeatCount="indefinite"/>\n      </g>\n    </g>\n  </g>\n\n  <!-- Static frame: two records frozen part-way along the connector. -->\n  <g data-variant="static">\n    <use href="#rmdd-packet" x="422" y="241"/>\n    <use href="#rmdd-packet" x="492" y="359"/>\n  </g>\n\n  <!-- Animated: three records in flight, arriving 1.5s apart. -->\n  <g data-variant="animated">\n    <use href="#rmdd-packet" opacity="0">\n      <animateMotion dur="4.5s" begin="0s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">\n        <mpath href="#rmdd-flow-path"/>\n      </animateMotion>\n      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="0s" repeatCount="indefinite"/>\n    </use>\n    <use href="#rmdd-packet" opacity="0">\n      <animateMotion dur="4.5s" begin="1.5s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">\n        <mpath href="#rmdd-flow-path"/>\n      </animateMotion>\n      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="1.5s" repeatCount="indefinite"/>\n    </use>\n    <use href="#rmdd-packet" opacity="0">\n      <animateMotion dur="4.5s" begin="3s" repeatCount="indefinite" keyPoints="0;1;1" keyTimes="0;.667;1" calcMode="linear">\n        <mpath href="#rmdd-flow-path"/>\n      </animateMotion>\n      <animate attributeName="opacity" values="0;1;1;0;0" keyTimes="0;.06;.6;.667;1" dur="4.5s" begin="3s" repeatCount="indefinite"/>\n    </use>\n  </g>\n</svg>\n';
 
@@ -16548,6 +16551,7 @@ var chipAspect = parseSvgViewBoxAspectRatio(chip_default) ?? 141.99 / 103.44;
 var newOtaAspect = parseSvgViewBoxAspectRatio(new_ota_default) ?? 95 / 72.9;
 var securedKeyAspect = parseSvgViewBoxAspectRatio(secured_key_default) ?? 459.75 / 456.99;
 var rmDataDownloadAspect = parseSvgViewBoxAspectRatio(rm_data_download_default) ?? 845.67 / 533.92;
+var rmDashboardUpdateAspect = parseSvgViewBoxAspectRatio(rm_dashboard_update_default) ?? 845.67 / 533.92;
 var illustrationRegistry = [
   {
     id: "no-search-results",
@@ -16583,6 +16587,11 @@ var illustrationRegistry = [
     id: "rm-data-download",
     svg: rm_data_download_default,
     aspectRatio: rmDataDownloadAspect
+  },
+  {
+    id: "rm-dashboard-update",
+    svg: rm_dashboard_update_default,
+    aspectRatio: rmDashboardUpdateAspect
   }
 ];
 var illustrationsById = Object.fromEntries(
@@ -16685,12 +16694,12 @@ function CollapsibleCard({
   className,
   defaultOpen = false
 }) {
-  const childArray = React10.Children.toArray(children);
+  const childArray = React11.Children.toArray(children);
   const contentChild = childArray.find(
-    (child) => React10.isValidElement(child) && child.type === CollapsibleContent
+    (child) => React11.isValidElement(child) && child.type === CollapsibleContent
   );
   const titleChild = childArray.find(
-    (child) => React10.isValidElement(child) && child.type !== CollapsibleContent
+    (child) => React11.isValidElement(child) && child.type !== CollapsibleContent
   );
   return /* @__PURE__ */ jsx(Card, { className: cn("bg-transparent shadow-none rounded-md", className), children: /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, className: "group", children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "p-3 border-b border-transparent group-data-[state=open]:border-border", children: /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -16707,7 +16716,7 @@ function CollapsibleCard({
         ]
       }
     ) }) }),
-    contentChild && React10.cloneElement(contentChild, {
+    contentChild && React11.cloneElement(contentChild, {
       className: cn(
         "px-4 pb-6 pt-4",
         contentChild.props.className
@@ -17299,7 +17308,7 @@ var useLottie = function useLottie2(props, style) {
       });
     };
   }, [onComplete, onLoopComplete, onEnterFrame, onSegmentStart, onConfigReady, onDataReady, onDataFailed, onLoadedImages, onDOMLoaded, onDestroy]);
-  var View = /* @__PURE__ */ React10__default.createElement("div", _objectSpread2({
+  var View = /* @__PURE__ */ React11__default.createElement("div", _objectSpread2({
     style,
     ref: animationContainer
   }, rest));
@@ -47627,32 +47636,208 @@ function AnimatedCard({
     }
   );
 }
+var NO_OVERFLOW = { start: false, end: false };
+function useScrollOverflow(ref, { enabled = true, getContent, onResize } = {}) {
+  const [overflow, setOverflow] = React11.useState(NO_OVERFLOW);
+  const getContentRef = React11.useRef(getContent);
+  const onResizeRef = React11.useRef(onResize);
+  React11.useEffect(() => {
+    getContentRef.current = getContent;
+    onResizeRef.current = onResize;
+  });
+  React11.useEffect(() => {
+    const scroller = ref.current;
+    if (!enabled || !scroller) {
+      setOverflow(NO_OVERFLOW);
+      return;
+    }
+    const update = () => {
+      const max = scroller.scrollWidth - scroller.clientWidth;
+      const pos = Math.abs(scroller.scrollLeft);
+      const start = pos > 1;
+      const end = pos < max - 1;
+      setOverflow(
+        (prev) => prev.start === start && prev.end === end ? prev : { start, end }
+      );
+    };
+    update();
+    scroller.addEventListener("scroll", update, { passive: true });
+    if (typeof ResizeObserver === "undefined") {
+      return () => scroller.removeEventListener("scroll", update);
+    }
+    const observer = new ResizeObserver(() => {
+      update();
+      onResizeRef.current?.();
+    });
+    observer.observe(scroller);
+    const content3 = getContentRef.current?.(scroller);
+    if (content3) observer.observe(content3);
+    return () => {
+      scroller.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, [ref, enabled]);
+  return overflow;
+}
+var EDGE_SIZE = 24;
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function fadeMask(start, end) {
+  if (!start && !end) return {};
+  const from = start ? `transparent, #000 ${EDGE_SIZE}px` : "#000";
+  const to = end ? `#000 calc(100% - ${EDGE_SIZE}px), transparent` : "#000";
+  const image = `linear-gradient(to right, ${from}, ${to})`;
+  return { maskImage: image, WebkitMaskImage: image };
+}
+var arrowButtonClass = "inline-flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-background text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+function ListDetailsItemStrip({
+  data: data2,
+  selectedId,
+  onSelect,
+  className
+}) {
+  const scrollerRef = useRef(null);
+  const overflow = useScrollOverflow(scrollerRef, {
+    getContent: (scroller) => scroller.firstElementChild
+  });
+  const hasOverflow = overflow.start || overflow.end;
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    const selected = scroller?.querySelector('[aria-pressed="true"]');
+    if (!scroller || !selected) return;
+    const scrollerRect = scroller.getBoundingClientRect();
+    if (scrollerRect.width === 0) return;
+    const itemRect = selected.getBoundingClientRect();
+    const overStart = itemRect.left - (scrollerRect.left + EDGE_SIZE);
+    const overEnd = itemRect.right - (scrollerRect.right - EDGE_SIZE);
+    let delta = 0;
+    if (overStart < 0) delta = overStart;
+    else if (overEnd > 0) delta = Math.min(overEnd, overStart);
+    const instant = !mountedRef.current || prefersReducedMotion();
+    mountedRef.current = true;
+    if (Math.abs(delta) >= 1) {
+      scroller.scrollBy({ left: delta, behavior: instant ? "auto" : "smooth" });
+    }
+  }, [selectedId, hasOverflow]);
+  const scrollByPage = (direction) => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    scroller.scrollBy({
+      left: direction * scroller.clientWidth * 0.8,
+      behavior: prefersReducedMotion() ? "auto" : "smooth"
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "list-details-item-strip",
+      className: cn("flex items-center gap-1", className),
+      children: [
+        hasOverflow && // Arrows duplicate scrolling, which keyboard users get by tabbing
+        // through the items, so they are hidden from assistive technology.
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            disabled: !overflow.start,
+            className: arrowButtonClass,
+            onClick: () => scrollByPage(-1),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollerRef,
+            className: "min-w-0 flex-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            style: fadeMask(overflow.start, overflow.end),
+            children: /* @__PURE__ */ jsx("div", { className: "flex w-max gap-2 p-1", children: data2.map((item) => {
+              const isSelected = selectedId === item.id;
+              if (typeof item.title !== "string") {
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onSelect(item.id),
+                    "aria-pressed": isSelected,
+                    className: cn(
+                      "flex shrink-0 items-center gap-2 rounded-md px-3 py-2 text-left",
+                      "border-0 bg-transparent shadow-none",
+                      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "flex items-center", children: item.title }),
+                      item.endIcon != null && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.endIcon })
+                    ]
+                  },
+                  item.id
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  fullWidth: false,
+                  variant: isSelected ? "outline" : "ghost",
+                  color: isSelected ? "primary" : "gray",
+                  onClick: () => onSelect(item.id),
+                  "aria-pressed": isSelected,
+                  className: cn("shrink-0", !isSelected && "border border-transparent"),
+                  endIcon: item.endIcon,
+                  hideRingOnHover: true,
+                  children: /* @__PURE__ */ jsx("span", { className: "max-w-48 truncate", title: item.title, children: item.title })
+                },
+                item.id
+              );
+            }) })
+          }
+        ),
+        hasOverflow && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            disabled: !overflow.end,
+            className: arrowButtonClass,
+            onClick: () => scrollByPage(1),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
 var panelColSpanClass = {
-  1: "col-span-1",
-  2: "col-span-2",
-  3: "col-span-3",
-  4: "col-span-4",
-  5: "col-span-5",
-  6: "col-span-6",
-  7: "col-span-7",
-  8: "col-span-8",
-  9: "col-span-9",
-  10: "col-span-10",
-  12: "col-span-12"
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+  5: "md:col-span-5",
+  6: "md:col-span-6",
+  7: "md:col-span-7",
+  8: "md:col-span-8",
+  9: "md:col-span-9",
+  10: "md:col-span-10",
+  12: "md:col-span-12"
 };
 var detailsColSpanClass = {
-  1: "col-span-1",
-  2: "col-span-2",
-  3: "col-span-3",
-  4: "col-span-4",
-  5: "col-span-5",
-  6: "col-span-6",
-  7: "col-span-7",
-  8: "col-span-8",
-  9: "col-span-9",
-  10: "col-span-10",
-  11: "col-span-11",
-  12: "col-span-12"
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+  5: "md:col-span-5",
+  6: "md:col-span-6",
+  7: "md:col-span-7",
+  8: "md:col-span-8",
+  9: "md:col-span-9",
+  10: "md:col-span-10",
+  11: "md:col-span-11",
+  12: "md:col-span-12"
 };
 function pickSelectedId({
   data: data2,
@@ -47738,8 +47923,9 @@ function ListDetails({
         "div",
         {
           className: cn(
-            "grid grid-cols-12 gap-4",
-            isFixedHeight ? "h-full min-h-0 grid-rows-[minmax(0,1fr)]" : "min-h-[16rem]"
+            // Below `md`: one column, the item strip above the details.
+            "grid grid-cols-1 gap-4 md:grid-cols-12",
+            isFixedHeight ? "h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] md:grid-rows-[minmax(0,1fr)]" : "md:min-h-[16rem]"
           ),
           children: [
             /* @__PURE__ */ jsxs(
@@ -47747,11 +47933,20 @@ function ListDetails({
               {
                 className: cn(
                   "items-list-wrapper flex min-h-0 flex-col gap-3",
-                  isFixedHeight && "h-full",
+                  isFixedHeight && "md:h-full",
                   panelColSpanClass[titleListPanelColumnWidth]
                 ),
                 children: [
-                  /* @__PURE__ */ jsx(ScrollArea, { className: "items-list-container min-h-0 flex-1 rounded-md border border-border", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: data2.map((item) => {
+                  /* @__PURE__ */ jsx(
+                    ListDetailsItemStrip,
+                    {
+                      data: data2,
+                      selectedId,
+                      onSelect: handleSelect,
+                      className: "md:hidden"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ScrollArea, { className: "items-list-container hidden min-h-0 flex-1 rounded-md border border-border md:block", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: data2.map((item) => {
                     const isSelected = selectedId === item.id;
                     const isStringTitle = typeof item.title === "string";
                     if (!isStringTitle) {
@@ -47790,7 +47985,10 @@ function ListDetails({
                       item.id
                     );
                   }) }) }),
-                  footer != null ? /* @__PURE__ */ jsx("div", { className: "items-list-footer shrink-0", children: footer }) : null
+                  footer != null ? (
+                    // Hidden on small screens, where the strip leaves no room for it.
+                    /* @__PURE__ */ jsx("div", { className: "items-list-footer hidden shrink-0 md:block", children: footer })
+                  ) : null
                 ]
               }
             ),
@@ -47983,8 +48181,8 @@ function NavBarMobileMenu({
   title,
   colorClasses
 }) {
-  const [expandedId, setExpandedId] = React10.useState(null);
-  React10.useEffect(() => {
+  const [expandedId, setExpandedId] = React11.useState(null);
+  React11.useEffect(() => {
     if (!open) setExpandedId(null);
   }, [open]);
   const handleItemClick = (item) => {
@@ -48166,7 +48364,7 @@ function NavBar({
 }) {
   const isMobile = useIsMobile();
   const resolvedColor = resolveNavColor(color);
-  const navRef = React10.useRef(null);
+  const navRef = React11.useRef(null);
   const [activeId, setActiveId] = useControlledState({
     value: activeIdProp,
     defaultValue: defaultActiveId,
@@ -48177,8 +48375,8 @@ function NavBar({
     defaultValue: null,
     onChange: onDetailsPanelChange
   });
-  const [mobileMenuOpen, setMobileMenuOpen] = React10.useState(false);
-  const [navRect, setNavRect] = React10.useState({ bottom: 0, width: 0, left: 0 });
+  const [mobileMenuOpen, setMobileMenuOpen] = React11.useState(false);
+  const [navRect, setNavRect] = React11.useState({ bottom: 0, width: 0, left: 0 });
   const {
     containerRef,
     measureRef,
@@ -48193,7 +48391,7 @@ function NavBar({
     threshold: morphScrollThreshold,
     scrollContainerRef: morphScrollContainer
   });
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!openDetailsId || !navRef.current) return;
     const updateRect = () => {
       if (navRef.current) {
@@ -48209,7 +48407,7 @@ function NavBar({
       window.removeEventListener("resize", updateRect);
     };
   }, [openDetailsId]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!openDetailsId) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -48219,7 +48417,7 @@ function NavBar({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [openDetailsId, setOpenDetailsId]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!openDetailsId) return;
     const handleMouseDown = (e) => {
       if (navRef.current && !navRef.current.contains(e.target)) {
@@ -48229,7 +48427,7 @@ function NavBar({
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [openDetailsId, setOpenDetailsId]);
-  const handleItemClick = React10.useCallback(
+  const handleItemClick = React11.useCallback(
     (item) => {
       item.onClick?.();
       setActiveId(item.id);
@@ -48241,16 +48439,16 @@ function NavBar({
     },
     [openDetailsId, setActiveId, setOpenDetailsId]
   );
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (isMobile) setOpenDetailsId(null);
   }, [isMobile, setOpenDetailsId]);
   const resolvedHeight = height2 ?? "var(--espd-navbar-height)";
   const activeDetailsItem = openDetailsId ? items.find((i) => i.id === openDetailsId) : void 0;
-  const [overflowDetailsItem, setOverflowDetailsItem] = React10.useState(null);
-  const overflowDetailsRef = React10.useRef(null);
-  const moreButtonRef = React10.useRef(null);
-  const [overflowPanelPos, setOverflowPanelPos] = React10.useState({ top: 0, right: 0 });
-  React10.useEffect(() => {
+  const [overflowDetailsItem, setOverflowDetailsItem] = React11.useState(null);
+  const overflowDetailsRef = React11.useRef(null);
+  const moreButtonRef = React11.useRef(null);
+  const [overflowPanelPos, setOverflowPanelPos] = React11.useState({ top: 0, right: 0 });
+  React11.useEffect(() => {
     if (!overflowDetailsItem || !moreButtonRef.current) return;
     const rect = moreButtonRef.current.getBoundingClientRect();
     setOverflowPanelPos({
@@ -48258,7 +48456,7 @@ function NavBar({
       right: window.innerWidth - rect.right
     });
   }, [overflowDetailsItem]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!overflowDetailsItem) return;
     const handleMouseDown = (e) => {
       if (overflowDetailsRef.current && !overflowDetailsRef.current.contains(e.target) && moreButtonRef.current && !moreButtonRef.current.contains(e.target)) {
@@ -48539,7 +48737,7 @@ function NavBar({
     }
   );
 }
-var MoreButton = React10.forwardRef(function MoreButton2({ label, hasActiveOverflowItem, resolvedColor, ...props }, ref) {
+var MoreButton = React11.forwardRef(function MoreButton2({ label, hasActiveOverflowItem, resolvedColor, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -48673,7 +48871,7 @@ var triggerSizeClasses = {
   lg: "h-12 px-5 text-lg"
 };
 var triggerIconClassName = "size-4 shrink-0 opacity-50";
-var SelectTrigger = React10.forwardRef(
+var SelectTrigger = React11.forwardRef(
   ({
     className,
     children,
@@ -48687,7 +48885,7 @@ var SelectTrigger = React10.forwardRef(
     "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
-    const autoId = React10.useId();
+    const autoId = React11.useId();
     const hasEnhancedProps = label !== void 0 || required !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0;
     const hasError = error || !!errorContent;
     const triggerId = id ?? (hasEnhancedProps ? autoId : void 0);
@@ -48740,7 +48938,7 @@ var SelectTrigger = React10.forwardRef(
   }
 );
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -48753,7 +48951,7 @@ var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -48766,7 +48964,7 @@ var SelectScrollDownButton = React10.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React10.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React11.forwardRef(({ className, children, position: position2 = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -48794,7 +48992,7 @@ var SelectContent = React10.forwardRef(({ className, children, position: positio
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -48803,7 +49001,7 @@ var SelectLabel = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -48819,7 +49017,7 @@ var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -48836,13 +49034,13 @@ function Tabs({
   children,
   ...props
 }) {
-  const [activeValue, setActiveValue] = React10.useState(
+  const [activeValue, setActiveValue] = React11.useState(
     defaultValue
   );
-  const triggersRef = React10.useRef(/* @__PURE__ */ new Map());
-  const initialSet = React10.useRef(false);
+  const triggersRef = React11.useRef(/* @__PURE__ */ new Map());
+  const initialSet = React11.useRef(false);
   const isControlled = value2 !== void 0;
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!isControlled && activeValue === void 0 && triggersRef.current.size > 0 && !initialSet.current) {
       const firstTab = triggersRef.current.keys().next().value;
       if (firstTab !== void 0) {
@@ -48851,7 +49049,7 @@ function Tabs({
       }
     }
   }, [activeValue, isControlled]);
-  const registerTrigger = React10.useCallback(
+  const registerTrigger = React11.useCallback(
     (val2, node) => {
       if (node) {
         triggersRef.current.set(val2, node);
@@ -48865,7 +49063,7 @@ function Tabs({
     },
     [activeValue, isControlled]
   );
-  const handleValueChange = React10.useCallback(
+  const handleValueChange = React11.useCallback(
     (val2) => {
       if (!isControlled) setActiveValue(val2);
       else onValueChange?.(val2);
@@ -48914,9 +49112,9 @@ function TabsTrigger({
   ...props
 }) {
   const { activeValue, handleValueChange, registerTrigger } = useTabs();
-  const localRef = React10.useRef(null);
-  React10.useImperativeHandle(ref, () => localRef.current);
-  React10.useEffect(() => {
+  const localRef = React11.useRef(null);
+  React11.useImperativeHandle(ref, () => localRef.current);
+  React11.useEffect(() => {
     registerTrigger(value2, localRef.current);
     return () => registerTrigger(value2, null);
   }, [value2, registerTrigger]);
@@ -48945,15 +49143,15 @@ function TabsContents({
   ...props
 }) {
   const { activeValue } = useTabs();
-  const childrenArray = React10.Children.toArray(children);
+  const childrenArray = React11.Children.toArray(children);
   const activeIndex = childrenArray.findIndex(
-    (child) => React10.isValidElement(child) && typeof child.props === "object" && child.props !== null && "value" in child.props && child.props.value === activeValue
+    (child) => React11.isValidElement(child) && typeof child.props === "object" && child.props !== null && "value" in child.props && child.props.value === activeValue
   );
-  const containerRef = React10.useRef(null);
-  const itemRefs = React10.useRef([]);
-  const [height2, setHeight] = React10.useState(0);
-  const roRef = React10.useRef(null);
-  const measure = React10.useCallback((index2) => {
+  const containerRef = React11.useRef(null);
+  const itemRefs = React11.useRef([]);
+  const [height2, setHeight] = React11.useState(0);
+  const roRef = React11.useRef(null);
+  const measure = React11.useCallback((index2) => {
     const pane = itemRefs.current[index2];
     const container = containerRef.current;
     if (!pane || !container) return 0;
@@ -48967,7 +49165,7 @@ function TabsContents({
     total = Math.ceil(total * dpr) / dpr;
     return total;
   }, []);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (roRef.current) {
       roRef.current.disconnect();
       roRef.current = null;
@@ -48988,7 +49186,7 @@ function TabsContents({
       roRef.current = null;
     };
   }, [activeIndex, childrenArray.length, measure]);
-  React10.useLayoutEffect(() => {
+  React11.useLayoutEffect(() => {
     if (height2 === 0 && activeIndex >= 0) {
       const next = measure(activeIndex);
       if (next !== 0) setHeight(next);
@@ -49049,40 +49247,117 @@ function TabsContent({
     }
   );
 }
-var TabsListVariantContext = React10.createContext(void 0);
-function LineTabsListContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    TabsHighlight,
-    {
+var TabsListVariantContext = React11.createContext(void 0);
+var TABS_LIST_VARIANTS = {
+  default: {
+    highlight: {
+      mode: "parent",
+      className: "absolute z-0 inset-0 rounded-md bg-primary/10"
+    },
+    list: "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-md p-1 border border-primary/30"
+  },
+  line: {
+    highlight: {
       mode: "parent",
       variant: "line",
       lineHeight: 2,
       boundsOffset: { top: 2 },
-      className: "absolute z-0 bg-primary rounded-none",
-      children: /* @__PURE__ */ jsx(
-        TabsList,
-        {
-          className: cn(
-            "text-muted-foreground inline-flex h-auto w-fit items-center justify-center gap-1 border-b border-border",
-            className
-          ),
-          ...props
-        }
-      )
-    }
+      className: "absolute z-0 bg-primary rounded-none"
+    },
+    list: "text-muted-foreground inline-flex h-auto w-fit items-center justify-center gap-1 border-b border-border"
+  },
+  rounded: {
+    highlight: {
+      mode: "parent",
+      className: "absolute z-0 inset-0 rounded-full bg-primary/10"
+    },
+    list: "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-full p-1 border border-primary/30"
+  }
+};
+var EDGE_SIZE2 = 40;
+function prefersReducedMotion2() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function useTabsOverflow(scrollerRef, enabled) {
+  const { activeValue } = useTabs();
+  const revealActive = React11.useCallback(
+    (behavior) => {
+      const scroller = scrollerRef.current;
+      if (!scroller) return;
+      const trigger = scroller.querySelector(
+        '[role="tab"][data-state="active"]'
+      );
+      if (!trigger) return;
+      const scrollerRect = scroller.getBoundingClientRect();
+      const triggerRect = trigger.getBoundingClientRect();
+      const overStart = triggerRect.left - (scrollerRect.left + EDGE_SIZE2);
+      const overEnd = triggerRect.right - (scrollerRect.right - EDGE_SIZE2);
+      let delta = 0;
+      if (overStart < 0) delta = overStart;
+      else if (overEnd > 0) delta = Math.min(overEnd, overStart);
+      if (Math.abs(delta) >= 1) scroller.scrollBy({ left: delta, behavior });
+    },
+    [scrollerRef]
+  );
+  const overflow = useScrollOverflow(scrollerRef, {
+    enabled,
+    // Not the highlight: it resizes while animating and would cancel smooth scrolls.
+    getContent: (scroller) => scroller.querySelector('[data-slot="tabs-list"]'),
+    onResize: () => revealActive("auto")
+  });
+  const mountedRef = React11.useRef(false);
+  React11.useEffect(() => {
+    if (!enabled || activeValue === void 0) return;
+    const instant = !mountedRef.current || prefersReducedMotion2();
+    mountedRef.current = true;
+    revealActive(instant ? "auto" : "smooth");
+  }, [enabled, activeValue, revealActive]);
+  const scrollByPage = React11.useCallback(
+    (direction) => {
+      const scroller = scrollerRef.current;
+      if (!scroller) return;
+      scroller.scrollBy({
+        left: direction * scroller.clientWidth * 0.8,
+        behavior: prefersReducedMotion2() ? "auto" : "smooth"
+      });
+    },
+    [scrollerRef]
   );
+  return { overflow, scrollByPage };
 }
-function DefaultTabsListContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
+function fadeMask2(start, end) {
+  if (!start && !end) return {};
+  const from = start ? `transparent, #000 ${EDGE_SIZE2}px` : "#000";
+  const to = end ? `#000 calc(100% - ${EDGE_SIZE2}px), transparent` : "#000";
+  const image = `linear-gradient(to right, ${from}, ${to})`;
+  return { maskImage: image, WebkitMaskImage: image };
+}
+var scrollButtonClass = "absolute top-1/2 z-10 -translate-y-1/2 inline-flex size-7 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:text-foreground [@media(pointer:coarse)]:hidden";
+function TabsListContent({
+  variant,
+  className,
+  ...props
+}) {
+  const config = TABS_LIST_VARIANTS[variant];
+  const scrollerRef = React11.useRef(null);
+  const scrollable = props["aria-orientation"] !== "vertical";
+  const { overflow, scrollByPage } = useTabsOverflow(scrollerRef, scrollable);
+  const list = /* @__PURE__ */ jsx(
     TabsHighlight,
     {
-      mode: "parent",
-      className: "absolute z-0 inset-0 rounded-md bg-primary/10",
+      ref: scrollerRef,
+      containerClassName: scrollable ? (
+        // Vertical padding (offset by negative margin) keeps focus rings and the
+        // line indicator from being clipped by the scroll container.
+        "flex -my-1 py-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      ) : void 0,
+      ...config.highlight,
       children: /* @__PURE__ */ jsx(
         TabsList,
         {
           className: cn(
-            "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-md p-1 border border-primary/30",
+            config.list,
+            scrollable && "shrink-0 min-w-fit",
             className
           ),
           ...props
@@ -49090,31 +49365,42 @@ function DefaultTabsListContent({ className, ...props }) {
       )
     }
   );
-}
-function RoundedTabsListContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    TabsHighlight,
+  if (!scrollable) return list;
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      mode: "parent",
-      className: "absolute z-0 inset-0 rounded-full bg-primary/10",
-      children: /* @__PURE__ */ jsx(
-        TabsList,
-        {
-          className: cn(
-            "bg-transparent text-muted-foreground inline-flex h-auto w-fit items-center justify-center rounded-full p-1 border border-primary/30",
-            className
-          ),
-          ...props
-        }
-      )
+      "data-slot": "tabs-list-scroller",
+      "data-overflow-start": overflow.start || void 0,
+      "data-overflow-end": overflow.end || void 0,
+      className: "relative min-w-0 max-w-full",
+      children: [
+        /* @__PURE__ */ jsx("div", { style: fadeMask2(overflow.start, overflow.end), children: list }),
+        overflow.start && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: cn(scrollButtonClass, "left-0"),
+            onClick: () => scrollByPage(-1),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        overflow.end && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: cn(scrollButtonClass, "right-0"),
+            onClick: () => scrollByPage(1),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        )
+      ]
     }
   );
 }
-var TABS_LIST_VARIANTS = {
-  default: DefaultTabsListContent,
-  line: LineTabsListContent,
-  rounded: RoundedTabsListContent
-};
 function Tabs2({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Tabs,
@@ -49124,13 +49410,12 @@ function Tabs2({ className, ...props }) {
     }
   );
 }
-function TabsList2({ className, variant, ...props }) {
-  const Content2 = TABS_LIST_VARIANTS[variant ?? "default"];
-  return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(Content2, { className, ...props }) });
+function TabsList2({ variant, ...props }) {
+  return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsListContent, { variant: variant ?? "default", ...props }) });
 }
 var tabsTriggerBaseClass = "data-[state=active]:text-primary tracking-wide focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
 function TabsTrigger2({ className, ...props }) {
-  const listVariant = React10.useContext(TabsListVariantContext);
+  const listVariant = React11.useContext(TabsListVariantContext);
   const isLine = listVariant === "line";
   return /* @__PURE__ */ jsx(TabsHighlightItem, { value: props.value, className: "flex-1", children: /* @__PURE__ */ jsx(
     TabsTrigger,
@@ -49163,7 +49448,7 @@ function extractTextLabel(children) {
   if (Array.isArray(children)) {
     return children.map(extractTextLabel).join("");
   }
-  if (React10.isValidElement(children) && children.props && typeof children.props === "object" && children.props !== null && "children" in children.props) {
+  if (React11.isValidElement(children) && children.props && typeof children.props === "object" && children.props !== null && "children" in children.props) {
     return extractTextLabel(
       children.props.children
     );
@@ -49171,13 +49456,13 @@ function extractTextLabel(children) {
   return "";
 }
 function isTabElement(node) {
-  return React10.isValidElement(node) && node.type === ScrollableSectionsTab;
+  return React11.isValidElement(node) && node.type === ScrollableSectionsTab;
 }
 function partitionChildren(children) {
   let tabsEl = null;
   const contentEls = [];
-  React10.Children.forEach(children, (child) => {
-    if (!React10.isValidElement(child)) return;
+  React11.Children.forEach(children, (child) => {
+    if (!React11.isValidElement(child)) return;
     if (child.type === ScrollableSectionsTabs) {
       tabsEl = child;
     } else if (child.type === ScrollableSectionsContent) {
@@ -49188,9 +49473,9 @@ function partitionChildren(children) {
   });
   return { tabsEl, contentEls };
 }
-var ScrollableSectionsContext = React10.createContext(null);
+var ScrollableSectionsContext = React11.createContext(null);
 function useScrollableSections() {
-  const ctx = React10.useContext(ScrollableSectionsContext);
+  const ctx = React11.useContext(ScrollableSectionsContext);
   if (!ctx) {
     throw new Error(
       "ScrollableSections subcomponents must be used within ScrollableSections."
@@ -49237,19 +49522,19 @@ function ScrollableSectionsRoot({
   ...rest
 }) {
   const { tabsEl, contentEls } = partitionChildren(children);
-  const [tabsItems, setTabsItems] = React10.useState([]);
-  const [sectionsVersion, bumpSections] = React10.useReducer(
+  const [tabsItems, setTabsItems] = React11.useState([]);
+  const [sectionsVersion, bumpSections] = React11.useReducer(
     (n) => n + 1,
     0
   );
-  const sectionsRef = React10.useRef(/* @__PURE__ */ new Map());
-  const containerRef = React10.useRef(null);
-  const mobileNavRef = React10.useRef(null);
-  const ignoreSpyUntil = React10.useRef(0);
-  const prefersReducedMotionRef = React10.useRef(false);
-  const didDefaultScrollRef = React10.useRef(false);
-  const [activeId, setActiveId] = React10.useState(() => defaultValue ?? "");
-  React10.useEffect(() => {
+  const sectionsRef = React11.useRef(/* @__PURE__ */ new Map());
+  const containerRef = React11.useRef(null);
+  const mobileNavRef = React11.useRef(null);
+  const ignoreSpyUntil = React11.useRef(0);
+  const prefersReducedMotionRef = React11.useRef(false);
+  const didDefaultScrollRef = React11.useRef(false);
+  const [activeId, setActiveId] = React11.useState(() => defaultValue ?? "");
+  React11.useEffect(() => {
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     prefersReducedMotionRef.current = mq.matches;
     const onChange = () => {
@@ -49259,7 +49544,7 @@ function ScrollableSectionsRoot({
     return () => mq.removeEventListener("change", onChange);
   }, []);
   const safeActiveId = activeId && tabsItems.some((t) => t.id === activeId) ? activeId : tabsItems[0]?.id ?? "";
-  const selectSection = React10.useCallback(
+  const selectSection = React11.useCallback(
     (id) => {
       const el = sectionsRef.current.get(id);
       if (!el) return;
@@ -49273,7 +49558,7 @@ function ScrollableSectionsRoot({
     },
     []
   );
-  const registerSection = React10.useCallback(
+  const registerSection = React11.useCallback(
     (id, el) => {
       if (el) sectionsRef.current.set(id, el);
       else sectionsRef.current.delete(id);
@@ -49281,7 +49566,7 @@ function ScrollableSectionsRoot({
     },
     []
   );
-  const setTabsItemsStable = React10.useCallback(
+  const setTabsItemsStable = React11.useCallback(
     (items) => {
       setTabsItems(items);
       setActiveId((prev) => {
@@ -49295,7 +49580,7 @@ function ScrollableSectionsRoot({
     },
     [defaultValue]
   );
-  React10.useLayoutEffect(() => {
+  React11.useLayoutEffect(() => {
     if (!defaultValue || didDefaultScrollRef.current) return;
     const el = sectionsRef.current.get(defaultValue);
     if (!el) return;
@@ -49305,7 +49590,7 @@ function ScrollableSectionsRoot({
       setActiveId(defaultValue);
     });
   }, [defaultValue, sectionsVersion]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const orderedIds = tabsItems.map((t) => t.id);
     if (orderedIds.length === 0) return;
     const updateActive = () => {
@@ -49338,7 +49623,7 @@ function ScrollableSectionsRoot({
       window.removeEventListener("resize", updateActive);
     };
   }, [tabsItems, scrollRootRef, sectionsVersion]);
-  const contextValue = React10.useMemo(
+  const contextValue = React11.useMemo(
     () => ({
       activeId: safeActiveId,
       selectSection,
@@ -49407,11 +49692,11 @@ function ScrollableSectionsTabs({
   ...rest
 }) {
   const { activeId, selectSection, setTabsItems } = useScrollableSections();
-  const tabNodes = React10.useMemo(
-    () => React10.Children.toArray(children).filter(isTabElement),
+  const tabNodes = React11.useMemo(
+    () => React11.Children.toArray(children).filter(isTabElement),
     [children]
   );
-  const items = React10.useMemo(
+  const items = React11.useMemo(
     () => tabNodes.map((node) => {
       const { id, label, children: tabChildren } = node.props;
       const text2 = label?.trim() || extractTextLabel(tabChildren).trim() || id;
@@ -49419,7 +49704,7 @@ function ScrollableSectionsTabs({
     }),
     [tabNodes]
   );
-  React10.useLayoutEffect(() => {
+  React11.useLayoutEffect(() => {
     setTabsItems(items);
   }, [items, setTabsItems]);
   if (tabNodes.length === 0) {
@@ -49486,7 +49771,7 @@ function ScrollableSectionsContent({
   ...rest
 }) {
   const { registerSection } = useScrollableSections();
-  const ref = React10.useCallback(
+  const ref = React11.useCallback(
     (node) => {
       registerSection(id, node);
     },
@@ -49517,15 +49802,15 @@ var ScrollableSections = Object.assign(ScrollableSectionsRoot, {
   Content: ScrollableSectionsContent
 });
 var Form = FormProvider;
-var FormFieldContext = React10.createContext(null);
+var FormFieldContext = React11.createContext(null);
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React10.useContext(FormFieldContext);
-  const itemContext = React10.useContext(FormItemContext);
+  const fieldContext = React11.useContext(FormFieldContext);
+  const itemContext = React11.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -49544,13 +49829,13 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React10.createContext(null);
-var FormItem = React10.forwardRef(({ className, ...props }, ref) => {
-  const id = React10.useId();
+var FormItemContext = React11.createContext(null);
+var FormItem = React11.forwardRef(({ className, ...props }, ref) => {
+  const id = React11.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React10.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React11.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx(
     Label,
@@ -49567,7 +49852,7 @@ var FormLabel = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React10.forwardRef(({ ...props }, ref) => {
+var FormControl = React11.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ jsx(
     Slot,
@@ -49581,7 +49866,7 @@ var FormControl = React10.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React10.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React11.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx(
     "p",
@@ -49594,7 +49879,7 @@ var FormDescription = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React10.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React11.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? "") : children;
   if (!body) {
@@ -49844,10 +50129,10 @@ var typographyDefaultElement = {
 };
 
 // src/components/typography/typography.tsx
-var Typography = React10.forwardRef(
+var Typography = React11.forwardRef(
   function Typography2({ variant = "body1", as, className, children, ...rest }, ref) {
     const Component = as ?? typographyDefaultElement[variant];
-    return React10.createElement(
+    return React11.createElement(
       Component,
       {
         ref,
@@ -49920,7 +50205,7 @@ function mergeFiles(existing, incoming, multiple) {
   }
   return next;
 }
-var FileUpload = React10.forwardRef(
+var FileUpload = React11.forwardRef(
   function FileUpload2({
     className,
     title = "Drag & drop files here",
@@ -49935,24 +50220,24 @@ var FileUpload = React10.forwardRef(
     id,
     ...inputPropsRest
   }, ref) {
-    const autoId = React10.useId();
+    const autoId = React11.useId();
     const inputId = id ?? autoId;
     const descriptionId = `${inputId}-description`;
     const { ref: refFromRegister, ...inputAttrs } = inputPropsRest;
     const isControlled = filesProp !== void 0;
-    const innerRef = React10.useRef(null);
-    const filesRef = React10.useRef([]);
-    const dragDepthRef = React10.useRef(0);
-    const [internalFiles, setInternalFiles] = React10.useState([]);
-    const [isDragging, setIsDragging] = React10.useState(false);
+    const innerRef = React11.useRef(null);
+    const filesRef = React11.useRef([]);
+    const dragDepthRef = React11.useRef(0);
+    const [internalFiles, setInternalFiles] = React11.useState([]);
+    const [isDragging, setIsDragging] = React11.useState(false);
     const listFiles = isControlled ? filesProp ?? [] : internalFiles;
     filesRef.current = listFiles;
-    React10.useLayoutEffect(() => {
+    React11.useLayoutEffect(() => {
       const input = innerRef.current;
       if (!input) return;
       syncInputFiles(input, listFiles);
     }, [listFiles]);
-    const setRefs = React10.useCallback(
+    const setRefs = React11.useCallback(
       (node) => {
         innerRef.current = node;
         assignRef(ref, node);
@@ -49960,7 +50245,7 @@ var FileUpload = React10.forwardRef(
       },
       [ref, refFromRegister]
     );
-    const applyFiles = React10.useCallback(
+    const applyFiles = React11.useCallback(
       (incoming) => {
         const input = innerRef.current;
         if (!input) return;
@@ -49979,7 +50264,7 @@ var FileUpload = React10.forwardRef(
       },
       [multiple, onChange, onFilesChange, isControlled]
     );
-    const handleInputChange = React10.useCallback(
+    const handleInputChange = React11.useCallback(
       (event) => {
         const input = event.target;
         const picked = filesFromList(input.files);
@@ -49999,7 +50284,7 @@ var FileUpload = React10.forwardRef(
       },
       [multiple, onChange, onFilesChange, isControlled]
     );
-    const removeAt = React10.useCallback(
+    const removeAt = React11.useCallback(
       (index2) => {
         const input = innerRef.current;
         if (!input) return;
@@ -50017,7 +50302,7 @@ var FileUpload = React10.forwardRef(
       },
       [onChange, onFilesChange, isControlled]
     );
-    const onDragEnter = React10.useCallback(
+    const onDragEnter = React11.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -50027,7 +50312,7 @@ var FileUpload = React10.forwardRef(
       },
       [disabled]
     );
-    const onDragLeave = React10.useCallback(
+    const onDragLeave = React11.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -50040,11 +50325,11 @@ var FileUpload = React10.forwardRef(
       },
       [disabled]
     );
-    const onDragOver = React10.useCallback((e) => {
+    const onDragOver = React11.useCallback((e) => {
       e.preventDefault();
       e.stopPropagation();
     }, []);
-    const onDrop = React10.useCallback(
+    const onDrop = React11.useCallback(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -50057,11 +50342,11 @@ var FileUpload = React10.forwardRef(
       },
       [applyFiles, disabled]
     );
-    const openFileDialog = React10.useCallback(() => {
+    const openFileDialog = React11.useCallback(() => {
       if (disabled) return;
       innerRef.current?.click();
     }, [disabled]);
-    const onDropZoneKeyDown = React10.useCallback(
+    const onDropZoneKeyDown = React11.useCallback(
       (e) => {
         if (disabled) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -50272,7 +50557,7 @@ function resolveBrowseTokens(color) {
     style: { "--fi-accent": color }
   };
 }
-var FileInput = React10.forwardRef(
+var FileInput = React11.forwardRef(
   function FileInput2({
     label,
     required,
@@ -50302,25 +50587,25 @@ var FileInput = React10.forwardRef(
     andMoreLabel = (n) => `and ${n} more`,
     ...restProps
   }, ref) {
-    const autoId = React10.useId();
+    const autoId = React11.useId();
     const inputId = id ?? autoId;
     const effectiveSize = size ?? "default";
     const hasError = error || !!errorContent;
     const browseTokens = resolveBrowseTokens(color);
     const { ref: refFromRegister, ...inputAttrs } = restProps;
     const isControlled = filesProp !== void 0;
-    const innerRef = React10.useRef(null);
-    const filesRef = React10.useRef([]);
-    const [internalFiles, setInternalFiles] = React10.useState([]);
+    const innerRef = React11.useRef(null);
+    const filesRef = React11.useRef([]);
+    const [internalFiles, setInternalFiles] = React11.useState([]);
     const listFiles = isControlled ? filesProp ?? [] : internalFiles;
     filesRef.current = listFiles;
     const hasFiles = listFiles.length > 0;
-    React10.useLayoutEffect(() => {
+    React11.useLayoutEffect(() => {
       const input = innerRef.current;
       if (!input) return;
       syncInputFiles2(input, listFiles);
     }, [listFiles]);
-    const setRefs = React10.useCallback(
+    const setRefs = React11.useCallback(
       (node) => {
         innerRef.current = node;
         assignRef2(ref, node);
@@ -50328,7 +50613,7 @@ var FileInput = React10.forwardRef(
       },
       [ref, refFromRegister]
     );
-    const fireSyntheticChange = React10.useCallback(
+    const fireSyntheticChange = React11.useCallback(
       (input) => {
         const synthetic = {
           target: input,
@@ -50338,7 +50623,7 @@ var FileInput = React10.forwardRef(
       },
       [onChange]
     );
-    const handleInputChange = React10.useCallback(
+    const handleInputChange = React11.useCallback(
       (event) => {
         const input = event.target;
         const picked = filesFromList2(input.files);
@@ -50358,7 +50643,7 @@ var FileInput = React10.forwardRef(
       },
       [multiple, onChange, onFilesChange, isControlled]
     );
-    const clearFiles = React10.useCallback(() => {
+    const clearFiles = React11.useCallback(() => {
       const input = innerRef.current;
       if (!input) return;
       syncInputFiles2(input, []);
@@ -50368,11 +50653,11 @@ var FileInput = React10.forwardRef(
       onFilesChange?.([]);
       fireSyntheticChange(input);
     }, [isControlled, onFilesChange, fireSyntheticChange]);
-    const openFileDialog = React10.useCallback(() => {
+    const openFileDialog = React11.useCallback(() => {
       if (disabled || readOnly) return;
       innerRef.current?.click();
     }, [disabled, readOnly]);
-    const onDisplayKeyDown = React10.useCallback(
+    const onDisplayKeyDown = React11.useCallback(
       (e) => {
         if (disabled || readOnly) return;
         if (e.key === "Enter" || e.key === " ") {
@@ -50563,25 +50848,25 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React10.useCallback(composeRefs(...refs), refs);
+  return React11.useCallback(composeRefs(...refs), refs);
 }
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React10.createContext(defaultContext);
+    const BaseContext = React11.createContext(defaultContext);
     BaseContext.displayName = rootComponentName + "Context";
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value2 = React10.useMemo(() => context, Object.values(context));
+      const value2 = React11.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx(Context.Provider, { value: value2, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React10.useContext(Context);
+      const context = React11.useContext(Context);
       if (context) return context;
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
@@ -50590,11 +50875,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React10.createContext(defaultContext);
+      return React11.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React10.useMemo(
+      return React11.useMemo(
         () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
         [scope, contexts]
       );
@@ -50617,7 +50902,7 @@ function composeContextScopes(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React10.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React11.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -50631,9 +50916,9 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
     }
   };
 }
-var useLayoutEffect22 = globalThis?.document ? React10.useLayoutEffect : () => {
+var useLayoutEffect22 = globalThis?.document ? React11.useLayoutEffect : () => {
 };
-var useInsertionEffect = React10[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
+var useInsertionEffect = React11[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
 function useControllableState({
   prop,
   defaultProp,
@@ -50648,8 +50933,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value2 = isControlled ? prop : uncontrolledProp;
   {
-    const isControlledRef = React10.useRef(prop !== void 0);
-    React10.useEffect(() => {
+    const isControlledRef = React11.useRef(prop !== void 0);
+    React11.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -50661,7 +50946,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React10.useCallback(
+  const setValue = React11.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value22 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -50680,13 +50965,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value2, setValue] = React10.useState(defaultProp);
-  const prevValueRef = React10.useRef(value2);
-  const onChangeRef = React10.useRef(onChange);
+  const [value2, setValue] = React11.useState(defaultProp);
+  const prevValueRef = React11.useRef(value2);
+  const onChangeRef = React11.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (prevValueRef.current !== value2) {
       onChangeRef.current?.(value2);
       prevValueRef.current = value2;
@@ -50698,8 +50983,8 @@ function isFunction(value2) {
   return typeof value2 === "function";
 }
 function usePrevious(value2) {
-  const ref = React10.useRef({ value: value2, previous: value2 });
-  return React10.useMemo(() => {
+  const ref = React11.useRef({ value: value2, previous: value2 });
+  return React11.useMemo(() => {
     if (ref.current.value !== value2) {
       ref.current.previous = ref.current.value;
       ref.current.value = value2;
@@ -50708,7 +50993,7 @@ function usePrevious(value2) {
   }, [value2]);
 }
 function useSize(element) {
-  const [size, setSize] = React10.useState(void 0);
+  const [size, setSize] = React11.useState(void 0);
   useLayoutEffect22(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -50742,7 +51027,7 @@ function useSize(element) {
   return size;
 }
 function useStateMachine(initialState, machine) {
-  return React10.useReducer((state, event) => {
+  return React11.useReducer((state, event) => {
     const nextState = machine[state][event];
     return nextState ?? state;
   }, initialState);
@@ -50750,17 +51035,17 @@ function useStateMachine(initialState, machine) {
 var Presence = (props) => {
   const { present, children } = props;
   const presence = usePresence(present);
-  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React10.Children.only(children);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React11.Children.only(children);
   const ref = useStableComposedRefs(presence.ref, getElementRef(child));
   const forceMount = typeof children === "function";
-  return forceMount || presence.isPresent ? React10.cloneElement(child, { ref }) : null;
+  return forceMount || presence.isPresent ? React11.cloneElement(child, { ref }) : null;
 };
 Presence.displayName = "Presence";
 function usePresence(present) {
-  const [node, setNode] = React10.useState();
-  const stylesRef = React10.useRef(null);
-  const prevPresentRef = React10.useRef(present);
-  const prevAnimationNameRef = React10.useRef("none");
+  const [node, setNode] = React11.useState();
+  const stylesRef = React11.useRef(null);
+  const prevPresentRef = React11.useRef(present);
+  const prevAnimationNameRef = React11.useRef("none");
   const initialState = present ? "mounted" : "unmounted";
   const [state, send] = useStateMachine(initialState, {
     mounted: {
@@ -50775,7 +51060,7 @@ function usePresence(present) {
       MOUNT: "mounted"
     }
   });
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const currentAnimationName = getAnimationName(stylesRef.current);
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
@@ -50841,7 +51126,7 @@ function usePresence(present) {
   }, [node, send]);
   return {
     isPresent: ["mounted", "unmountSuspended"].includes(state),
-    ref: React10.useCallback((node2) => {
+    ref: React11.useCallback((node2) => {
       stylesRef.current = node2 ? getComputedStyle(node2) : null;
       setNode(node2);
     }, [])
@@ -50855,9 +51140,9 @@ function setRef2(ref, value2) {
   }
 }
 function useStableComposedRefs(...refs) {
-  const refsRef = React10.useRef(refs);
+  const refsRef = React11.useRef(refs);
   refsRef.current = refs;
-  return React10.useCallback((node) => {
+  return React11.useCallback((node) => {
     const currentRefs = refsRef.current;
     let hasCleanup = false;
     const cleanups = currentRefs.map((ref) => {
@@ -50918,7 +51203,7 @@ var NODES = [
 ];
 var Primitive = NODES.reduce((primitive, node) => {
   const Slot3 = createSlot(`Primitive.${node}`);
-  const Node2 = React10.forwardRef((props, forwardedRef) => {
+  const Node2 = React11.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
@@ -50953,9 +51238,9 @@ function CheckboxProvider(props) {
     onChange: onCheckedChange,
     caller: CHECKBOX_NAME
   });
-  const [control, setControl] = React10.useState(null);
-  const [bubbleInput, setBubbleInput] = React10.useState(null);
-  const hasConsumerStoppedPropagationRef = React10.useRef(false);
+  const [control, setControl] = React11.useState(null);
+  const [bubbleInput, setBubbleInput] = React11.useState(null);
+  const hasConsumerStoppedPropagationRef = React11.useRef(false);
   const isFormControl = control ? !!form || !!control.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     true
@@ -50986,7 +51271,7 @@ function CheckboxProvider(props) {
   );
 }
 var TRIGGER_NAME = "CheckboxTrigger";
-var CheckboxTrigger = React10.forwardRef(
+var CheckboxTrigger = React11.forwardRef(
   ({ __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }, forwardedRef) => {
     const {
       control,
@@ -51001,8 +51286,8 @@ var CheckboxTrigger = React10.forwardRef(
       bubbleInput
     } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);
     const composedRefs = useComposedRefs(forwardedRef, setControl);
-    const initialCheckedStateRef = React10.useRef(checked);
-    React10.useEffect(() => {
+    const initialCheckedStateRef = React11.useRef(checked);
+    React11.useEffect(() => {
       const form = control?.form;
       if (form) {
         const reset = () => setChecked(initialCheckedStateRef.current);
@@ -51038,7 +51323,7 @@ var CheckboxTrigger = React10.forwardRef(
   }
 );
 CheckboxTrigger.displayName = TRIGGER_NAME;
-var Checkbox = React10.forwardRef(
+var Checkbox = React11.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeCheckbox,
@@ -51086,7 +51371,7 @@ var Checkbox = React10.forwardRef(
 );
 Checkbox.displayName = CHECKBOX_NAME;
 var INDICATOR_NAME = "CheckboxIndicator";
-var CheckboxIndicator = React10.forwardRef(
+var CheckboxIndicator = React11.forwardRef(
   (props, forwardedRef) => {
     const { __scopeCheckbox, forceMount, ...indicatorProps } = props;
     const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
@@ -51110,7 +51395,7 @@ var CheckboxIndicator = React10.forwardRef(
 );
 CheckboxIndicator.displayName = INDICATOR_NAME;
 var BUBBLE_INPUT_NAME = "CheckboxBubbleInput";
-var CheckboxBubbleInput = React10.forwardRef(
+var CheckboxBubbleInput = React11.forwardRef(
   ({ __scopeCheckbox, ...props }, forwardedRef) => {
     const {
       control,
@@ -51128,7 +51413,7 @@ var CheckboxBubbleInput = React10.forwardRef(
     const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);
     const prevChecked = usePrevious(checked);
     const controlSize = useSize(control);
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       const input = bubbleInput;
       if (!input) return;
       const inputProto = window.HTMLInputElement.prototype;
@@ -51145,7 +51430,7 @@ var CheckboxBubbleInput = React10.forwardRef(
         input.dispatchEvent(event);
       }
     }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);
-    const defaultCheckedRef = React10.useRef(isIndeterminate(checked) ? false : checked);
+    const defaultCheckedRef = React11.useRef(isIndeterminate(checked) ? false : checked);
     return /* @__PURE__ */ jsx(
       Primitive.input,
       {
@@ -51191,13 +51476,13 @@ function getAnimateState(checked) {
   return checked ? "checked" : "unchecked";
 }
 function Checkbox2({ className, onCheckedChange, ...props }) {
-  const [checkedState, setCheckedState] = React10.useState(
+  const [checkedState, setCheckedState] = React11.useState(
     props?.checked ?? props?.defaultChecked ?? false
   );
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (props?.checked !== void 0) setCheckedState(props.checked);
   }, [props?.checked]);
-  const handleCheckedChange = React10.useCallback(
+  const handleCheckedChange = React11.useCallback(
     (checked) => {
       setCheckedState(checked);
       onCheckedChange?.(checked);
@@ -51291,7 +51576,7 @@ function Checkbox2({ className, onCheckedChange, ...props }) {
 }
 var [SwitchProvider, useSwitch] = getStrictContext("SwitchContext");
 function Switch(props) {
-  const [isPressed, setIsPressed] = React10.useState(false);
+  const [isPressed, setIsPressed] = React11.useState(false);
   const {
     checked,
     defaultChecked,
@@ -51357,7 +51642,7 @@ function SwitchIcon({
   ...props
 }) {
   const { isChecked } = useSwitch();
-  const isAnimated = React10.useMemo(() => {
+  const isAnimated = React11.useMemo(() => {
     if (position2 === "right") return !isChecked;
     if (position2 === "left") return isChecked;
     if (position2 === "thumb") return true;
@@ -51488,10 +51773,10 @@ function ToggleGroupHighlightItem({
       }
     );
   }
-  if (type === "multiple" && React10.isValidElement(children)) {
+  if (type === "multiple" && React11.isValidElement(children)) {
     const isActive = props.value && value2 && value2.includes(props.value);
     const element = children;
-    return React10.cloneElement(
+    return React11.cloneElement(
       children,
       {
         style: {
@@ -51630,7 +51915,7 @@ function ToggleGroup2({
   style,
   ...props
 }) {
-  const colorTokens = React10.useMemo(
+  const colorTokens = React11.useMemo(
     () => resolveToggleGroupColorTokens(color),
     [color]
   );
@@ -51743,8 +52028,8 @@ function Radio({
   ...props
 }) {
   const { value: value2 } = useRadioGroup();
-  const [isChecked, setIsChecked] = React10.useState(value2 === valueProps);
-  React10.useEffect(() => {
+  const [isChecked, setIsChecked] = React11.useState(value2 === valueProps);
+  React11.useEffect(() => {
     setIsChecked(value2 === valueProps);
   }, [value2, valueProps]);
   return /* @__PURE__ */ jsx(RadioProvider, { value: { isChecked, setIsChecked }, children: /* @__PURE__ */ jsx(
@@ -52782,7 +53067,7 @@ function VerticalStepper({
     step.id
   )) }) });
 }
-var Spinner = React10.forwardRef(function Spinner2({
+var Spinner = React11.forwardRef(function Spinner2({
   color,
   size,
   className,
@@ -52891,9 +53176,9 @@ function resolveSurface(color) {
 }
 function renderSizedIcon(icon, iconClassName) {
   if (icon == null) return null;
-  if (React10.isValidElement(icon)) {
+  if (React11.isValidElement(icon)) {
     const el = icon;
-    return React10.cloneElement(el, {
+    return React11.cloneElement(el, {
       className: cn(el.props.className, "shrink-0", iconClassName)
     });
   }
@@ -52927,7 +53212,7 @@ function getTrend(value2, previousValue) {
   })}%`;
   return { direction, label };
 }
-var StatCard = React10.forwardRef(
+var StatCard = React11.forwardRef(
   ({
     color,
     size = "default",
@@ -53058,15 +53343,15 @@ StatCard.displayName = "StatCard";
 // src/components/chart/chart.types.ts
 var THEMES = { light: "", dark: ".dark" };
 var INITIAL_DIMENSION = { width: 320, height: 200 };
-var ChartContext = React10.createContext(null);
+var ChartContext = React11.createContext(null);
 function useChart() {
-  const context = React10.useContext(ChartContext);
+  const context = React11.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React10.forwardRef(function ChartContainer2({
+var ChartContainer = React11.forwardRef(function ChartContainer2({
   id,
   className,
   children,
@@ -53074,7 +53359,7 @@ var ChartContainer = React10.forwardRef(function ChartContainer2({
   initialDimension = INITIAL_DIMENSION,
   ...props
 }, ref) {
-  const uniqueId = React10.useId();
+  const uniqueId = React11.useId();
   const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -53143,7 +53428,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React10.useMemo(() => {
+  const tooltipLabel = React11.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -53446,7 +53731,7 @@ function getBarRadius(index2, total, stacked, rounded, layout) {
   if (isFirst) return [0, 0, 0, 0];
   return [0, 0, 0, 0];
 }
-var BarChart = React10.forwardRef(
+var BarChart = React11.forwardRef(
   function BarChart2({
     data: data2,
     config: explicitConfig,
@@ -53470,16 +53755,16 @@ var BarChart = React10.forwardRef(
     className,
     margin
   }, ref) {
-    const resolvedCategoryKey = React10.useMemo(
+    const resolvedCategoryKey = React11.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React10.useMemo(
+    const config = React11.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const barKeys = React10.useMemo(() => Object.keys(config), [config]);
-    const chartData = React10.useMemo(
+    const barKeys = React11.useMemo(() => Object.keys(config), [config]);
+    const chartData = React11.useMemo(
       () => coerceSeriesValuesToNumbers(data2, barKeys),
       [data2, barKeys]
     );
@@ -53550,7 +53835,7 @@ var BarChart = React10.forwardRef(
 );
 var DEFAULT_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
 var DEFAULT_X_AXIS_PADDING = { left: 0, right: 0 };
-var AreaChart = React10.forwardRef(
+var AreaChart = React11.forwardRef(
   function AreaChart2({
     data: data2,
     config: explicitConfig,
@@ -53570,20 +53855,20 @@ var AreaChart = React10.forwardRef(
   }, ref) {
     const resolvedMargin = { ...DEFAULT_MARGIN, ...margin };
     const resolvedXAxisPadding = { ...DEFAULT_X_AXIS_PADDING, ...xAxisPadding };
-    const resolvedCategoryKey = React10.useMemo(
+    const resolvedCategoryKey = React11.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React10.useMemo(
+    const config = React11.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const seriesKeys = React10.useMemo(() => Object.keys(config), [config]);
-    const chartData = React10.useMemo(
+    const seriesKeys = React11.useMemo(() => Object.keys(config), [config]);
+    const chartData = React11.useMemo(
       () => coerceSeriesValuesToNumbers(data2, seriesKeys),
       [data2, seriesKeys]
     );
-    const reactId = React10.useId();
+    const reactId = React11.useId();
     const gradientPrefix = `area-fill-${reactId.replace(/:/g, "")}`;
     const gradientStops = stacked ? { peak: 0.42, highlight: 0.32, mid: 0.18, soft: 0.06 } : { peak: 0.28, highlight: 0.22, mid: 0.1, soft: 0.03 };
     return /* @__PURE__ */ jsx(ChartContainer, { ref, config, className: cn("w-full", className), children: /* @__PURE__ */ jsxs(
@@ -53711,7 +53996,7 @@ function resolveStrokeWidth(width2) {
   if (typeof width2 === "number") return width2;
   return STROKE_WIDTH_MAP[width2];
 }
-var LineChart = React10.forwardRef(
+var LineChart = React11.forwardRef(
   function LineChart2({
     data: data2,
     config: explicitConfig,
@@ -53734,17 +54019,17 @@ var LineChart = React10.forwardRef(
     className,
     margin
   }, ref) {
-    const resolvedCategoryKey = React10.useMemo(
+    const resolvedCategoryKey = React11.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React10.useMemo(
+    const config = React11.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const seriesKeys = React10.useMemo(() => Object.keys(config), [config]);
+    const seriesKeys = React11.useMemo(() => Object.keys(config), [config]);
     const resolvedStrokeWidth = resolveStrokeWidth(strokeWidth);
-    const processedData = React10.useMemo(() => {
+    const processedData = React11.useMemo(() => {
       const base = coerceSeriesValuesToNumbers(data2, seriesKeys);
       if (!stacked) return base;
       return base.map((row) => {
@@ -53760,11 +54045,11 @@ var LineChart = React10.forwardRef(
         return out;
       });
     }, [data2, seriesKeys, stacked]);
-    const glowOrderKeys = React10.useMemo(
+    const glowOrderKeys = React11.useMemo(
       () => stacked ? [...seriesKeys].reverse() : seriesKeys,
       [seriesKeys, stacked]
     );
-    const reactId = React10.useId();
+    const reactId = React11.useId();
     const idPrefix2 = `line-${reactId.replace(/:/g, "")}`;
     const glowGradientId = (key2) => `${idPrefix2}-glow-${key2}`;
     return /* @__PURE__ */ jsx(
@@ -53919,7 +54204,7 @@ function getBarRadius2(index2, total, stacked, rounded) {
 function buildDefaultSeries(config) {
   return Object.keys(config).map((dataKey) => ({ dataKey, type: "bar" }));
 }
-var ComposedChart = React10.forwardRef(
+var ComposedChart = React11.forwardRef(
   function ComposedChart2({
     data: data2,
     config: explicitConfig,
@@ -53948,27 +54233,27 @@ var ComposedChart = React10.forwardRef(
     className,
     margin
   }, ref) {
-    const resolvedCategoryKey = React10.useMemo(
+    const resolvedCategoryKey = React11.useMemo(
       () => categoryKey ?? inferCategoryKey(data2[0]),
       [categoryKey, data2]
     );
-    const config = React10.useMemo(
+    const config = React11.useMemo(
       () => buildAutoSeriesConfig(data2, resolvedCategoryKey, explicitConfig),
       [data2, resolvedCategoryKey, explicitConfig]
     );
-    const series = React10.useMemo(
+    const series = React11.useMemo(
       () => explicitSeries ?? buildDefaultSeries(config),
       [explicitSeries, config]
     );
-    const seriesKeys = React10.useMemo(
+    const seriesKeys = React11.useMemo(
       () => series.map((item) => item.dataKey),
       [series]
     );
-    const chartData = React10.useMemo(
+    const chartData = React11.useMemo(
       () => coerceSeriesValuesToNumbers(data2, seriesKeys),
       [data2, seriesKeys]
     );
-    const barSeries = React10.useMemo(
+    const barSeries = React11.useMemo(
       () => series.filter((item) => item.type === "bar"),
       [series]
     );
@@ -54187,7 +54472,7 @@ function DonutLegend({
     ] }, key2);
   }) });
 }
-var DonutChart = React10.forwardRef(
+var DonutChart = React11.forwardRef(
   function DonutChart2({
     data: data2,
     config: explicitConfig,
@@ -54205,18 +54490,18 @@ var DonutChart = React10.forwardRef(
     className,
     margin
   }, ref) {
-    const rawId = React10.useId();
+    const rawId = React11.useId();
     const gradientScope = rawId.replace(/:/g, "");
-    const config = React10.useMemo(
+    const config = React11.useMemo(
       () => deriveConfig(data2, explicitConfig),
       [data2, explicitConfig]
     );
-    const twoRing = React10.useMemo(() => hasChildren(data2), [data2]);
-    const outerRing = React10.useMemo(
+    const twoRing = React11.useMemo(() => hasChildren(data2), [data2]);
+    const outerRing = React11.useMemo(
       () => twoRing ? buildOuterRing(data2) : null,
       [data2, twoRing]
     );
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       validateChildren(data2);
     }, [data2]);
     const inner = parseRadius(innerRadius);
@@ -54225,8 +54510,8 @@ var DonutChart = React10.forwardRef(
     const gapHalf = ringGap / 2;
     const innerRingOuterRadius = twoRing ? formatRadius(mid - gapHalf, inner.isPct) : outerRadius;
     const outerRingInnerRadius = formatRadius(mid + gapHalf, outer.isPct);
-    const legendOrder = React10.useMemo(() => flattenKeys(data2), [data2]);
-    const uniqueKeys = React10.useMemo(
+    const legendOrder = React11.useMemo(() => flattenKeys(data2), [data2]);
+    const uniqueKeys = React11.useMemo(
       () => Array.from(new Set(flattenKeys(data2))),
       [data2]
     );
@@ -54483,7 +54768,7 @@ function TreemapLegend({
     ] }, key2);
   }) });
 }
-var TreemapChart = React10.forwardRef(
+var TreemapChart = React11.forwardRef(
   function TreemapChart2({
     data: data2,
     config: explicitConfig,
@@ -54503,28 +54788,28 @@ var TreemapChart = React10.forwardRef(
     isUpdateAnimationActive
   }, ref) {
     const resolvedUpdateAnimationActive = isUpdateAnimationActive ?? isAnimationActive;
-    const rawId = React10.useId();
+    const rawId = React11.useId();
     const gradientScope = rawId.replace(/:/g, "");
-    const resolvedLabelStyle = React10.useMemo(
+    const resolvedLabelStyle = React11.useMemo(
       () => ({ ...DEFAULT_LABEL_STYLE, ...labelStyle }),
       [labelStyle]
     );
-    const sortedData = React10.useMemo(() => {
+    const sortedData = React11.useMemo(() => {
       const sorted = [...data2].sort((a, b) => b.value - a.value);
       if (typeof maxDataPoints === "number" && maxDataPoints > 0) {
         return sorted.slice(0, maxDataPoints);
       }
       return sorted;
     }, [data2, maxDataPoints]);
-    const config = React10.useMemo(
+    const config = React11.useMemo(
       () => deriveConfig2(sortedData, explicitConfig),
       [sortedData, explicitConfig]
     );
-    const uniqueKeys = React10.useMemo(
+    const uniqueKeys = React11.useMemo(
       () => Array.from(new Set(sortedData.map((d) => d.key))),
       [sortedData]
     );
-    const colorByKey = React10.useMemo(() => {
+    const colorByKey = React11.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       if (typeof color === "string" && color.length > 0) {
         const base = resolveBaseColor(color);
@@ -54540,7 +54825,7 @@ var TreemapChart = React10.forwardRef(
       }
       return map;
     }, [config, uniqueKeys, color, sortedData]);
-    const textColorByKey = React10.useMemo(() => {
+    const textColorByKey = React11.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
       if (typeof color === "string" && color.length > 0) {
         sortedData.forEach((d, i) => {
@@ -54552,7 +54837,7 @@ var TreemapChart = React10.forwardRef(
       return map;
     }, [color, sortedData]);
     const autoTextColor = labelStyle?.color === void 0;
-    const treemapData = React10.useMemo(
+    const treemapData = React11.useMemo(
       () => sortedData.map((d) => ({
         ...d,
         name: d.key,
@@ -54654,7 +54939,7 @@ var slotExpandedSizeClasses = {
   default: "h-10 text-base md:text-sm",
   lg: "h-12 text-lg"
 };
-var InputOTPSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var InputOTPSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -54674,7 +54959,7 @@ var SlotBox = ({
   hasError,
   cornerClass
 }) => {
-  const context = React10.useContext(OTPInputContext);
+  const context = React11.useContext(OTPInputContext);
   const slot = context.slots[index2];
   if (!slot) return null;
   const { char, hasFakeCaret, isActive } = slot;
@@ -54739,7 +55024,7 @@ function clampLength(raw) {
   }
   return rounded;
 }
-var InputOTP = React10.forwardRef(
+var InputOTP = React11.forwardRef(
   ({
     length: length2,
     allowAlphaNumeric,
@@ -54768,17 +55053,17 @@ var InputOTP = React10.forwardRef(
     containerClassName,
     ...restProps
   }, ref) => {
-    const autoId = React10.useId();
+    const autoId = React11.useId();
     const inputId = id || autoId;
-    const effectiveLength = React10.useMemo(() => clampLength(length2), [length2]);
+    const effectiveLength = React11.useMemo(() => clampLength(length2), [length2]);
     const effectiveSize = size || "default";
     const hasError = !!error || !!errorContent;
     const isControlled = value2 !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = React10.useState(
+    const [uncontrolledValue, setUncontrolledValue] = React11.useState(
       typeof defaultValue === "string" ? defaultValue : ""
     );
     const effectiveValue = isControlled ? value2 : uncontrolledValue;
-    const handleChange = React10.useCallback(
+    const handleChange = React11.useCallback(
       (next) => {
         if (!isControlled) setUncontrolledValue(next);
         onChange?.(next);
@@ -54786,7 +55071,7 @@ var InputOTP = React10.forwardRef(
       [isControlled, onChange]
     );
     const pattern = regex && regex.length > 0 ? regex : allowAlphaNumeric ? REGEXP_ONLY_DIGITS_AND_CHARS : REGEXP_ONLY_DIGITS;
-    const groups = React10.useMemo(
+    const groups = React11.useMemo(
       () => buildGroups(effectiveLength, separators),
       [effectiveLength, separators]
     );
@@ -54829,7 +55114,7 @@ var InputOTP = React10.forwardRef(
             containerClassName
           ),
           ...restProps,
-          children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
+          children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React11.Fragment, { children: [
             groupIndex > 0 && /* @__PURE__ */ jsx(InputOTPSeparator, {}),
             /* @__PURE__ */ jsx(
               "div",
@@ -54875,15 +55160,15 @@ var InputOTP = React10.forwardRef(
   }
 );
 InputOTP.displayName = "InputOTP";
-var CarouselContext = React10.createContext(null);
+var CarouselContext = React11.createContext(null);
 function useCarousel() {
-  const context = React10.useContext(CarouselContext);
+  const context = React11.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
   return context;
 }
-var Carousel = React10.forwardRef(
+var Carousel = React11.forwardRef(
   ({
     orientation = "horizontal",
     opts,
@@ -54900,20 +55185,20 @@ var Carousel = React10.forwardRef(
       },
       plugins
     );
-    const [canScrollPrev, setCanScrollPrev] = React10.useState(false);
-    const [canScrollNext, setCanScrollNext] = React10.useState(false);
-    const onSelect = React10.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React11.useState(false);
+    const [canScrollNext, setCanScrollNext] = React11.useState(false);
+    const onSelect = React11.useCallback((api2) => {
       if (!api2) return;
       setCanScrollPrev(api2.canScrollPrev());
       setCanScrollNext(api2.canScrollNext());
     }, []);
-    const scrollPrev = React10.useCallback(() => {
+    const scrollPrev = React11.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React10.useCallback(() => {
+    const scrollNext = React11.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React10.useCallback(
+    const handleKeyDown = React11.useCallback(
       (event) => {
         const isHorizontal = orientation === "horizontal";
         const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
@@ -54928,11 +55213,11 @@ var Carousel = React10.forwardRef(
       },
       [scrollPrev, scrollNext, orientation]
     );
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       if (!api || !setApi) return;
       setApi(api);
     }, [api, setApi]);
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       if (!api) return;
       onSelect(api);
       api.on("reInit", onSelect);
@@ -54972,7 +55257,7 @@ var Carousel = React10.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React10.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React11.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
   return (
     // Vertical carousels need an explicit viewport height so overflow clips at
@@ -55003,7 +55288,7 @@ var CarouselContent = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React10.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React11.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -55021,7 +55306,7 @@ var CarouselItem = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React10.forwardRef(({ className, ...props }, ref) => {
+var CarouselPrevious = React11.forwardRef(({ className, ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
     "button",
@@ -55045,7 +55330,7 @@ var CarouselPrevious = React10.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React10.forwardRef(({ className, ...props }, ref) => {
+var CarouselNext = React11.forwardRef(({ className, ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
     "button",
@@ -55149,10 +55434,10 @@ function Carousel2({
     MAX_DOTS_DEFAULT
   );
   const clampedDelay = clamp2(delay2, DELAY_MIN, DELAY_MAX, DELAY_DEFAULT);
-  const autoplayPlugin = React10.useRef(
+  const autoplayPlugin = React11.useRef(
     autoplay ? Autoplay({ delay: clampedDelay, stopOnInteraction: true }) : null
   );
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const plugin = autoplayPlugin.current;
     if (!plugin || !autoplay) return;
     autoplayPlugin.current = Autoplay({
@@ -55160,17 +55445,17 @@ function Carousel2({
       stopOnInteraction: true
     });
   }, [autoplay, clampedDelay]);
-  const plugins = React10.useMemo(
+  const plugins = React11.useMemo(
     () => autoplay && autoplayPlugin.current ? [autoplayPlugin.current] : [],
     [autoplay, clampedDelay]
   );
-  const [api, setApi] = React10.useState();
-  const [selectedIndex, setSelectedIndex] = React10.useState(0);
-  const [scrollSnaps, setScrollSnaps] = React10.useState([]);
-  const [canScrollPrev, setCanScrollPrev] = React10.useState(false);
-  const [canScrollNext, setCanScrollNext] = React10.useState(false);
-  const prevIndexRef = React10.useRef(0);
-  React10.useEffect(() => {
+  const [api, setApi] = React11.useState();
+  const [selectedIndex, setSelectedIndex] = React11.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React11.useState([]);
+  const [canScrollPrev, setCanScrollPrev] = React11.useState(false);
+  const [canScrollNext, setCanScrollNext] = React11.useState(false);
+  const prevIndexRef = React11.useRef(0);
+  React11.useEffect(() => {
     if (!api) return;
     setScrollSnaps(api.scrollSnapList());
     setSelectedIndex(api.selectedScrollSnap());
@@ -55207,12 +55492,12 @@ function Carousel2({
       api.off("reInit", handleReInit);
     };
   }, [api, loop, onNext, onPrevious]);
-  const scrollTo = React10.useCallback(
+  const scrollTo = React11.useCallback(
     (index2) => api?.scrollTo(index2),
     [api]
   );
-  const scrollPrev = React10.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React10.useCallback(() => api?.scrollNext(), [api]);
+  const scrollPrev = React11.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React11.useCallback(() => api?.scrollNext(), [api]);
   const navigationState = {
     canScrollPrev,
     canScrollNext,
@@ -55276,7 +55561,7 @@ var sizeClasses2 = {
   default: "min-h-[80px] px-3 py-2 text-base md:text-sm",
   lg: "min-h-[100px] px-4 py-3 text-lg"
 };
-var Textarea = React10.forwardRef(
+var Textarea = React11.forwardRef(
   ({
     className,
     label,
@@ -55293,15 +55578,15 @@ var Textarea = React10.forwardRef(
     placeholder,
     ...restProps
   }, ref) => {
-    const autoId = React10.useId();
+    const autoId = React11.useId();
     const textareaId = id || autoId;
-    const [charCount, setCharCount] = React10.useState(() => {
+    const [charCount, setCharCount] = React11.useState(() => {
       if (charLimit === void 0) return 0;
       if (typeof value2 === "string") return value2.length;
       if (typeof defaultValue === "string") return defaultValue.length;
       return 0;
     });
-    React10.useEffect(() => {
+    React11.useEffect(() => {
       if (charLimit !== void 0 && typeof value2 === "string") {
         setCharCount(value2.length);
       }
@@ -55379,7 +55664,7 @@ var Textarea = React10.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Command = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Command = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1,
   {
     ref,
@@ -55391,7 +55676,7 @@ var Command = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = Command$1.displayName;
-var CommandInput = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx(
     Command$1.Input,
@@ -55406,7 +55691,7 @@ var CommandInput = React10.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.List,
   {
     ref,
@@ -55415,7 +55700,7 @@ var CommandList = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React10.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React11.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   {
     ref,
@@ -55424,7 +55709,7 @@ var CommandEmpty = React10.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandGroup = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Group,
   {
     ref,
@@ -55436,7 +55721,7 @@ var CommandGroup = React10.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Separator,
   {
     ref,
@@ -55445,7 +55730,7 @@ var CommandSeparator = React10.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandItem = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Item,
   {
     ref,
@@ -55474,8 +55759,8 @@ function AsyncCombobox({
   hasMore = false,
   onLoadMore
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const [inputValue, setInputValue] = React10.useState("");
+  const [open, setOpen] = React11.useState(false);
+  const [inputValue, setInputValue] = React11.useState("");
   const selectedOption = options.find((o) => o.value === value2);
   const displayValue = selectedOption?.label ?? (value2 || "");
   const handleSelect = (selected) => {
@@ -55483,7 +55768,7 @@ function AsyncCombobox({
     onValueChange?.(next);
     if (!clearable) setOpen(false);
   };
-  const handleSearchChange = React10.useCallback(
+  const handleSearchChange = React11.useCallback(
     (q) => {
       setInputValue(q);
       onSearchChange?.(q);
@@ -55598,17 +55883,17 @@ function AsyncMultiSelect({
   portal = true,
   renderOption
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const [inputValue, setInputValue] = React10.useState("");
-  const listRef = React10.useRef(null);
-  const sentinelRef = React10.useRef(null);
+  const [open, setOpen] = React11.useState(false);
+  const [inputValue, setInputValue] = React11.useState("");
+  const listRef = React11.useRef(null);
+  const sentinelRef = React11.useRef(null);
   const selected = normalizeValue(value2, multiple);
-  const selectedOptions = React10.useMemo(() => {
+  const selectedOptions = React11.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const opt of options) map.set(opt.value, opt);
     return selected.map((v) => map.get(v) ?? { value: v, label: v });
   }, [options, selected]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const sentinel = sentinelRef.current;
     if (!open || !hasMore || !onLoadMore || !sentinel) return;
     const observer = new IntersectionObserver(
@@ -55635,7 +55920,7 @@ function AsyncMultiSelect({
     const next = selected.filter((v) => v !== optionValue);
     onValueChange?.(multiple ? next.length > 0 ? next : void 0 : void 0);
   };
-  const handleSearchChange = React10.useCallback(
+  const handleSearchChange = React11.useCallback(
     (q) => {
       setInputValue(q);
       onSearchChange?.(q);
@@ -55936,8 +56221,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const ref = React10.useRef(null);
-  React10.useEffect(() => {
+  const ref = React11.useRef(null);
+  React11.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -56110,7 +56395,7 @@ function DatePicker(props) {
 }
 DatePicker.displayName = "DatePicker";
 var timeInputChromeClass = "appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";
-var TimePicker = React10.forwardRef(
+var TimePicker = React11.forwardRef(
   ({ hideIcon = false, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Input,
@@ -56173,20 +56458,20 @@ function DateTimePicker(props) {
     className
   } = props;
   const isControlled = "value" in props;
-  const [uncontrolledValue, setUncontrolledValue] = React10.useState(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = React11.useState(defaultValue);
   const current = isControlled ? value2 : uncontrolledValue;
   const isOpenControlled = controlledOpen !== void 0;
-  const [internalOpen, setInternalOpen] = React10.useState(false);
+  const [internalOpen, setInternalOpen] = React11.useState(false);
   const isOpen = isOpenControlled ? controlledOpen : internalOpen;
   const setOpen = (nextOpen) => {
     if (!isOpenControlled) setInternalOpen(nextOpen);
     onOpenChange?.(nextOpen);
   };
-  const [draftTime, setDraftTime] = React10.useState(
+  const [draftTime, setDraftTime] = React11.useState(
     () => current ? formatTimeOfDay(current, timeStep) : ""
   );
   const currentMs = current?.getTime();
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (currentMs === void 0) return;
     setDraftTime(formatTimeOfDay(new Date(currentMs), timeStep));
   }, [currentMs, timeStep]);
@@ -56490,17 +56775,17 @@ function DateRangePicker({
   side = "bottom",
   className
 }) {
-  const [open, setOpen] = React10.useState(false);
-  const [showCalendar, setShowCalendar] = React10.useState(false);
-  const [draftRange, setDraftRange] = React10.useState(
+  const [open, setOpen] = React11.useState(false);
+  const [showCalendar, setShowCalendar] = React11.useState(false);
+  const [draftRange, setDraftRange] = React11.useState(
     EMPTY_DRAFT_RANGE
   );
-  const [calendarMonth, setCalendarMonth] = React10.useState(/* @__PURE__ */ new Date());
-  const [flyoutSide, setFlyoutSide] = React10.useState("right");
-  const calendarRef = React10.useRef(null);
-  const [startInputValue, setStartInputValue] = React10.useState("");
-  const [endInputValue, setEndInputValue] = React10.useState("");
-  React10.useLayoutEffect(() => {
+  const [calendarMonth, setCalendarMonth] = React11.useState(/* @__PURE__ */ new Date());
+  const [flyoutSide, setFlyoutSide] = React11.useState("right");
+  const calendarRef = React11.useRef(null);
+  const [startInputValue, setStartInputValue] = React11.useState("");
+  const [endInputValue, setEndInputValue] = React11.useState("");
+  React11.useLayoutEffect(() => {
     if (!showCalendar || !calendarRef.current) return;
     const rect = calendarRef.current.getBoundingClientRect();
     if (rect.right > window.innerWidth) {
@@ -56509,14 +56794,14 @@ function DateRangePicker({
   }, [showCalendar]);
   const activePresets = presets ?? [...PRESET_IDS];
   const resolveLabel = (id) => presetLabels?.[id] ?? (id === "custom" ? "Custom" : PRESET_LABELS[id]);
-  const updateDraftRange = React10.useCallback(
+  const updateDraftRange = React11.useCallback(
     (nextRange) => {
       setDraftRange(nextRange);
       onDraftChange?.(nextRange);
     },
     [onDraftChange]
   );
-  const syncInputsFromDraft = React10.useCallback(
+  const syncInputsFromDraft = React11.useCallback(
     (range) => {
       setStartInputValue(range.startDate ? format(range.startDate, dateFormat) : "");
       if (lockEndToToday) {
@@ -56543,7 +56828,7 @@ function DateRangePicker({
     onChange?.({ presetId: id, ...range });
     setOpen(false);
   };
-  const handleRangeChange = React10.useCallback(
+  const handleRangeChange = React11.useCallback(
     (range) => {
       const nextDraft = toDraftRange(range);
       if (lockEndToToday && nextDraft.startDate) {
@@ -56859,18 +57144,28 @@ function SimplifiedDate({ ts, dateFormat, className, relative = false }) {
   }
   return /* @__PURE__ */ jsx("span", { className: cn(className), children: detailedDate });
 }
-var Table = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
-  "table",
-  {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
-  }
-) }));
+var Table = React11.forwardRef(
+  ({ className, containerRef, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      "data-slot": "table-container",
+      className: cn("relative w-full overflow-auto", containerClassName),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  )
+);
 Table.displayName = "Table";
-var TableHeader = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -56879,7 +57174,7 @@ var TableBody = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -56891,7 +57186,7 @@ var TableFooter = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -56903,7 +57198,7 @@ var TableRow = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -56915,7 +57210,7 @@ var TableHead = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -56927,7 +57222,7 @@ var TableCell = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -57201,53 +57496,67 @@ function Pagination({
   const handlePageSizeChange = (value2) => {
     onPageSizeChange(Number(value2));
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center border-t", s.container), children: [
-    pageLabel !== void 0 ? /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm text-muted-foreground", children: pageLabel }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
-    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", s.buttonGroupGap), children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          fullWidth: false,
-          variant: "outline",
-          color: "gray",
-          usePrimaryColorOnHover: true,
-          size,
-          onClick: onPrevPage,
-          disabled: !hasPrevPage || disabled,
-          startIcon: /* @__PURE__ */ jsx(ChevronLeft, { className: s.icon }),
-          children: previousLabel
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          fullWidth: false,
-          variant: "outline",
-          color: "gray",
-          usePrimaryColorOnHover: true,
-          size,
-          onClick: onNextPage,
-          disabled: !hasNextPage || disabled,
-          endIcon: /* @__PURE__ */ jsx(ChevronRight, { className: s.icon }),
-          children: nextLabel
-        }
-      )
-    ] }),
-    showPageSizeSelector ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { fullWidth: false, variant: "outline", color: "gray", usePrimaryColorOnHover: true, size, children: [
-        pageSizeOptionLabel(currentPageSize),
-        /* @__PURE__ */ jsx(ChevronDown, { className: cn(s.icon, "opacity-50") })
-      ] }) }),
-      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx(
-        DropdownMenuRadioGroup,
-        {
-          value: String(currentPageSize),
-          onValueChange: handlePageSizeChange,
-          children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: String(size2), children: pageSizeOptionLabel(size2) }, size2))
-        }
-      ) })
-    ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-1" })
-  ] });
+  return (
+    // A size container: below 28rem the Previous/Next labels collapse to
+    // icon-only buttons (still named for screen readers) so the row fits; in
+    // very narrow containers the page-size selector wraps onto its own line.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "@container flex flex-wrap items-center gap-x-2 gap-y-3 border-t",
+          s.container
+        ),
+        children: [
+          pageLabel !== void 0 ? /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm whitespace-nowrap text-muted-foreground", children: pageLabel }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", s.buttonGroupGap), children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: false,
+                variant: "outline",
+                color: "gray",
+                usePrimaryColorOnHover: true,
+                size,
+                onClick: onPrevPage,
+                disabled: !hasPrevPage || disabled,
+                startIcon: /* @__PURE__ */ jsx(ChevronLeft, { className: s.icon }),
+                children: /* @__PURE__ */ jsx("span", { className: "@max-md:sr-only", children: previousLabel })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: false,
+                variant: "outline",
+                color: "gray",
+                usePrimaryColorOnHover: true,
+                size,
+                onClick: onNextPage,
+                disabled: !hasNextPage || disabled,
+                endIcon: /* @__PURE__ */ jsx(ChevronRight, { className: s.icon }),
+                children: /* @__PURE__ */ jsx("span", { className: "@max-md:sr-only", children: nextLabel })
+              }
+            )
+          ] }),
+          showPageSizeSelector ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-end", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { fullWidth: false, variant: "outline", color: "gray", usePrimaryColorOnHover: true, size, children: [
+              pageSizeOptionLabel(currentPageSize),
+              /* @__PURE__ */ jsx(ChevronDown, { className: cn(s.icon, "opacity-50") })
+            ] }) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsx(
+              DropdownMenuRadioGroup,
+              {
+                value: String(currentPageSize),
+                onValueChange: handlePageSizeChange,
+                children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: String(size2), children: pageSizeOptionLabel(size2) }, size2))
+              }
+            ) })
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-1" })
+        ]
+      }
+    )
+  );
 }
 
 // src/components/pagination/pagination.props.ts
@@ -57332,9 +57641,79 @@ function TableSkeleton({
     rowIndex
   )) });
 }
+function getColumnMeta(column) {
+  return column.columnDef.meta;
+}
+var SELECT_COLUMN_ID = "__select";
+function countStickyColumns(columns) {
+  let count = 0;
+  for (let i = 0; i < columns.length; i++) {
+    const column = columns[i];
+    const pinned = column.id === SELECT_COLUMN_ID ? Boolean(columns[i + 1] && getColumnMeta(columns[i + 1])?.sticky) : Boolean(getColumnMeta(column)?.sticky);
+    if (!pinned) break;
+    count++;
+  }
+  return count;
+}
+function useStickyOffsets(tableRef, count) {
+  const [offsets, setOffsets] = useState([]);
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!table || count === 0) {
+      setOffsets((prev) => prev.length === 0 ? prev : []);
+      return;
+    }
+    const measure = () => {
+      const cells = table.querySelectorAll(
+        "thead tr:last-child > th"
+      );
+      const next = [];
+      let left = 0;
+      for (let i = 0; i < count && i < cells.length; i++) {
+        next.push(left);
+        left += cells[i].getBoundingClientRect().width;
+      }
+      setOffsets(
+        (prev) => prev.length === next.length && prev.every((v, i) => v === next[i]) ? prev : next
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(table);
+    return () => observer.disconnect();
+  }, [tableRef, count]);
+  return offsets;
+}
+function buildStickyColumns(columns, offsets) {
+  const map = /* @__PURE__ */ new Map();
+  const count = Math.min(offsets.length, columns.length);
+  for (let i = 0; i < count; i++) {
+    map.set(columns[i].id, { left: offsets[i], isLast: i === count - 1 });
+  }
+  return map;
+}
+var stickyBase = "sticky";
+var stickyHeadBg = "z-[2] bg-[var(--data-table-sticky-bg,var(--color-background))]";
+var stickyHeadBorderedBg = "z-[2] bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--data-table-sticky-bg,var(--color-background)))]";
+var stickyCellBg = "z-[1] bg-[var(--data-table-sticky-bg,var(--color-background))] [tr:hover>&]:bg-[color-mix(in_oklab,var(--color-muted)_50%,var(--data-table-sticky-bg,var(--color-background)))] [tr[data-state=selected]>&]:bg-muted";
+var stickyEdge = "after:pointer-events-none after:absolute after:inset-y-0 after:-right-4 after:w-4 after:bg-linear-to-r after:from-black/10 after:to-transparent after:opacity-0 after:transition-opacity group-data-[overflow-start]/data-table:after:opacity-100 dark:after:from-black/40";
+function stickyCellProps(stickyColumns, columnId, kind) {
+  const sticky = stickyColumns?.get(columnId);
+  if (!sticky) return {};
+  return {
+    className: cn(
+      stickyBase,
+      kind === "head" ? stickyHeadBg : kind === "headBordered" ? stickyHeadBorderedBg : stickyCellBg,
+      sticky.isLast && stickyEdge
+    ),
+    style: { left: sticky.left }
+  };
+}
 function DataTableHeader({
   headerGroups,
-  showBorder = false
+  showBorder = false,
+  stickyColumns
 }) {
   return /* @__PURE__ */ jsx(
     TableHeader,
@@ -57342,20 +57721,29 @@ function DataTableHeader({
       className: cn(
         showBorder && "bg-muted/50 [&_tr]:border-border/50"
       ),
-      children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header, headerIndex) => /* @__PURE__ */ jsx(
-        TableHead,
-        {
-          className: cn(
-            "text-sm text-gray-500 font-medium whitespace-nowrap",
-            showBorder && headerIndex === 0 && "pl-4"
-          ),
-          children: header.isPlaceholder ? null : flexRender(
-            header.column.columnDef.header,
-            header.getContext()
-          )
-        },
-        header.id
-      )) }, headerGroup.id))
+      children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header, headerIndex) => {
+        const sticky = stickyCellProps(
+          stickyColumns,
+          header.column.id,
+          showBorder ? "headBordered" : "head"
+        );
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: cn(
+              "text-sm text-gray-500 font-medium whitespace-nowrap",
+              showBorder && headerIndex === 0 && "pl-4",
+              sticky.className
+            ),
+            style: sticky.style,
+            children: header.isPlaceholder ? null : flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            )
+          },
+          header.id
+        );
+      }) }, headerGroup.id))
     }
   );
 }
@@ -57372,7 +57760,8 @@ function DataTableBody({
   onRowClick,
   showBorder = false,
   tableRowClassName,
-  getRowClassName
+  getRowClassName,
+  stickyColumns
 }) {
   if (isFetching) {
     return /* @__PURE__ */ jsx(
@@ -57417,21 +57806,85 @@ function DataTableBody({
           onRowClick(row.original);
         }
       } : void 0,
-      children: row.getVisibleCells().map((cell, cellIndex) => /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          className: cn(
-            "px-2 py-4",
-            showBorder && cellIndex === 0 && "pl-4"
-          ),
-          children: flexRender(cell.column.columnDef.cell, cell.getContext())
-        },
-        cell.id
-      ))
+      children: row.getVisibleCells().map((cell, cellIndex) => {
+        const sticky = stickyCellProps(
+          stickyColumns,
+          cell.column.id,
+          "cell"
+        );
+        return /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            className: cn(
+              "px-2 py-4",
+              // One line by default: narrow screens scroll the table rather
+              // than squashing every column into a stack of words.
+              getColumnMeta(cell.column)?.wrap ? "min-w-64 whitespace-normal" : "whitespace-nowrap",
+              showBorder && cellIndex === 0 && "pl-4",
+              sticky.className
+            ),
+            style: sticky.style,
+            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          },
+          cell.id
+        );
+      })
     },
     row.id
   )) });
 }
+var BREAKPOINTS = {
+  sm: 384,
+  md: 448,
+  lg: 512,
+  xl: 576,
+  "2xl": 672,
+  "3xl": 768,
+  "4xl": 896,
+  "5xl": 1024,
+  "6xl": 1152,
+  "7xl": 1280
+};
+function minWidth(hideBelow) {
+  return typeof hideBelow === "number" ? hideBelow : hideBelow && BREAKPOINTS[hideBelow];
+}
+function useElementWidth(ref, enabled) {
+  const [width2, setWidth] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+    const measure = () => setWidth(el.getBoundingClientRect().width);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+  return enabled ? width2 : null;
+}
+function useResponsiveColumnVisibility(ref, columns, setColumnVisibility) {
+  const responsive = columns.filter(
+    (column) => minWidth(getColumnMeta(column)?.hideBelow) !== void 0
+  );
+  const width2 = useElementWidth(ref, responsive.length > 0);
+  const hiddenKey = width2 === null ? null : responsive.filter((column) => width2 < minWidth(getColumnMeta(column)?.hideBelow)).map((column) => column.id).join("\0");
+  useLayoutEffect(() => {
+    if (hiddenKey === null) return;
+    const hidden = new Set(hiddenKey.split("\0"));
+    setColumnVisibility((prev) => {
+      let next = null;
+      for (const column of responsive) {
+        const visible = !hidden.has(column.id) && !getColumnMeta(column)?.defaultHidden;
+        if ((prev[column.id] ?? true) !== visible) {
+          next ?? (next = { ...prev });
+          next[column.id] = visible;
+        }
+      }
+      return next ?? prev;
+    });
+  }, [hiddenKey, setColumnVisibility]);
+}
+var edgeShadowClass = "pointer-events-none absolute inset-y-0 z-[3] w-4 from-black/10 to-transparent opacity-0 transition-opacity dark:from-black/40";
 function DataTable({
   columns,
   data: data2,
@@ -57482,7 +57935,7 @@ function DataTable({
     }
   );
   const selectColumn = useMemo(() => ({
-    id: "__select",
+    id: SELECT_COLUMN_ID,
     enableHiding: false,
     enableSorting: false,
     size: 40,
@@ -57532,6 +57985,27 @@ function DataTable({
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel()
   });
+  const rootRef = useRef(null);
+  useResponsiveColumnVisibility(
+    rootRef,
+    table.getAllLeafColumns(),
+    setColumnVisibility
+  );
+  const tableRef = useRef(null);
+  const scrollerRef = useRef(null);
+  const overflow = useScrollOverflow(scrollerRef, {
+    getContent: (scroller) => scroller.querySelector("table")
+  });
+  const visibleColumns = table.getVisibleLeafColumns();
+  const stickyOffsets = useStickyOffsets(
+    tableRef,
+    countStickyColumns(visibleColumns)
+  );
+  const stickyColumns = useMemo(
+    () => buildStickyColumns(visibleColumns, stickyOffsets),
+    [visibleColumns, stickyOffsets]
+  );
+  const hasStickyColumns = stickyColumns.size > 0;
   const { columnVisibilityItems, columnVisibilityCheckedState } = useMemo(() => {
     const def = (c) => c;
     const hideableDefs = columns.filter((col) => def(col).enableHiding !== false);
@@ -57555,9 +58029,11 @@ function DataTable({
     return pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
   }, [canChangePageSize, pageSizeOptions, pageSize]);
   const showToolbar = tableActionsContent || showColumnVisibilitySelector;
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
-    showToolbar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 data-table-toolbar", children: [
-      tableActionsContent && /* @__PURE__ */ jsx("div", { className: "flex-1", children: tableActionsContent }),
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("space-y-3", className), children: [
+    showToolbar && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 data-table-toolbar", children: [
+      tableActionsContent && // Grows to fill the row, and wraps above the Columns button once
+      // it would get narrower than 16rem.
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-[1_1_16rem]", children: tableActionsContent }),
       showColumnVisibilitySelector && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(
         TogglableItemsList,
         {
@@ -57570,41 +58046,69 @@ function DataTable({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
+        "data-overflow-start": overflow.start || void 0,
+        "data-overflow-end": overflow.end || void 0,
         className: cn(
-          "overflow-hidden rounded-md data-table-container",
+          "group/data-table relative overflow-hidden rounded-md data-table-container",
           showToolbar && "mt-6",
           showBorder && "border border-border/50"
         ),
-        children: /* @__PURE__ */ jsxs(Table, { children: [
+        children: [
+          /* @__PURE__ */ jsxs(Table, { ref: tableRef, containerRef: scrollerRef, children: [
+            /* @__PURE__ */ jsx(
+              DataTableHeader,
+              {
+                headerGroups: table.getHeaderGroups(),
+                showBorder,
+                stickyColumns
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DataTableBody,
+              {
+                rows: table.getRowModel().rows,
+                columnCount: tableColumns.length,
+                isFetching,
+                pageSize,
+                noResultsHeading,
+                noResultsDescription,
+                noResultsAction,
+                noResultsIllustration,
+                hideNoResultsIllustration,
+                onRowClick,
+                showBorder,
+                tableRowClassName,
+                getRowClassName,
+                stickyColumns
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
-            DataTableHeader,
+            "div",
             {
-              headerGroups: table.getHeaderGroups(),
-              showBorder
+              "aria-hidden": true,
+              className: cn(
+                edgeShadowClass,
+                "left-0 bg-linear-to-r",
+                overflow.start && !hasStickyColumns && "opacity-100"
+              )
             }
           ),
           /* @__PURE__ */ jsx(
-            DataTableBody,
-            {
-              rows: table.getRowModel().rows,
-              columnCount: tableColumns.length,
-              isFetching,
-              pageSize,
-              noResultsHeading,
-              noResultsDescription,
-              noResultsAction,
-              noResultsIllustration,
-              hideNoResultsIllustration,
-              onRowClick,
-              showBorder,
-              tableRowClassName,
-              getRowClassName
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                edgeShadowClass,
+                "right-0 bg-linear-to-l",
+                overflow.end && "opacity-100"
+              )
             }
           )
-        ] })
+        ]
       }
     ),
     !hidePaginationControls && /* @__PURE__ */ jsx(
@@ -57953,7 +58457,7 @@ var userTypeBadgeMetallicClasses = cn(
   "after:bg-[linear-gradient(315deg,rgba(255,255,255,0.24)_0%,rgba(255,255,255,0.04)_36%,rgba(0,0,0,0.16)_72%,rgba(255,255,255,0.12)_100%)]",
   "after:opacity-0 after:transition-opacity after:duration-[1800ms] after:ease-in-out hover:after:opacity-100"
 );
-var UserTypeBadge = React10.forwardRef(
+var UserTypeBadge = React11.forwardRef(
   ({ userType, size = "default", className, ...props }, ref) => {
     const { color, icon: Icon2, label } = userTypeBadgeRegistry[userType];
     return /* @__PURE__ */ jsx("div", { ref, className: "inline-block", ...props, children: /* @__PURE__ */ jsxs(
@@ -57975,6 +58479,12 @@ var UserTypeBadge = React10.forwardRef(
   }
 );
 UserTypeBadge.displayName = "UserTypeBadge";
+function renderStatusBadgeIcon(icon, px) {
+  if (!icon) return null;
+  if (React11.isValidElement(icon)) return icon;
+  const Icon2 = icon;
+  return /* @__PURE__ */ jsx(Icon2, { size: px, "aria-hidden": true });
+}
 var ICON_PX = {
   sm: 14,
   default: 16,
@@ -58008,7 +58518,7 @@ var statusBadgeSizeVariants = cva(
     }
   }
 );
-var StatusBadge = React10.forwardRef(
+var StatusBadge = React11.forwardRef(
   ({
     label,
     icon: Icon2,
@@ -58021,7 +58531,7 @@ var StatusBadge = React10.forwardRef(
   }, ref) => {
     const iconPx = ICON_PX[size];
     const showIcon = isLoading || !!Icon2;
-    return /* @__PURE__ */ jsx("div", { ref, className: "inline-block", ...props, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { ref, className: "inline-flex align-middle", ...props, children: /* @__PURE__ */ jsxs(
       Badge,
       {
         color,
@@ -58031,7 +58541,7 @@ var StatusBadge = React10.forwardRef(
           className
         ),
         children: [
-          isLoading ? /* @__PURE__ */ jsx(Spinner, { size: iconPx, "aria-hidden": true }) : Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: iconPx, "aria-hidden": true }) : null,
+          isLoading ? /* @__PURE__ */ jsx(Spinner, { size: iconPx, "aria-hidden": true }) : renderStatusBadgeIcon(Icon2, iconPx),
           /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label })
         ]
       }
@@ -58121,7 +58631,7 @@ var deleteButtonVariantClasses = {
   gradient: "bg-error/10 text-error hover:bg-error/15 hover:text-error",
   solid: "bg-error/20 text-error-foreground hover:bg-error/30 hover:text-error-foreground"
 };
-var Tag = React10.forwardRef(
+var Tag = React11.forwardRef(
   ({
     name: name2,
     value: value2,
@@ -58200,7 +58710,7 @@ function parseNameValueTag(tag) {
   if (i <= 0 || i >= tag.length - 1) return null;
   return { name: tag.slice(0, i), value: tag.slice(i + 1) };
 }
-var TagInput = React10.forwardRef(
+var TagInput = React11.forwardRef(
   ({
     tags,
     onTagsChange,
@@ -58227,13 +58737,13 @@ var TagInput = React10.forwardRef(
     onBlur,
     ...restInputProps
   }, ref) => {
-    const autoId = React10.useId();
+    const autoId = React11.useId();
     const inputId = id ?? autoId;
-    const rootRef = React10.useRef(null);
-    const [draft, setDraft] = React10.useState("");
+    const rootRef = React11.useRef(null);
+    const [draft, setDraft] = React11.useState("");
     const effectiveSize = size ?? "default";
     const hasError = error || !!errorContent;
-    const tryCommitDraft = React10.useCallback(() => {
+    const tryCommitDraft = React11.useCallback(() => {
       if (disabled || readOnly) return;
       const trimmed = draft.trim();
       if (!trimmed) return;
@@ -59064,9 +59574,9 @@ var SIZE_STYLES2 = {
 function iconSized4(icon, iconPx) {
   if (icon == null) return null;
   const dim = { width: iconPx, height: iconPx };
-  if (React10.isValidElement(icon)) {
+  if (React11.isValidElement(icon)) {
     const el = icon;
-    return React10.cloneElement(el, {
+    return React11.cloneElement(el, {
       className: cn(el.props.className, "shrink-0"),
       style: { ...el.props.style, ...dim }
     });
@@ -59145,7 +59655,7 @@ function useSimpleClickableCardSurface(options) {
   const s = SIZE_STYLES2[size];
   const styles = resolveVariantStyles(variant, color);
   const isArbitraryGradient = variant === "gradient" && !isPresetColor(color);
-  const surfaceStyleWithoutGradientBg = React10.useMemo(() => {
+  const surfaceStyleWithoutGradientBg = React11.useMemo(() => {
     if (!isArbitraryGradient || typeof color !== "string")
       return styles.containerStyle;
     const cs = styles.containerStyle;
@@ -59156,7 +59666,7 @@ function useSimpleClickableCardSurface(options) {
   const presetGradientPair = variant === "gradient" && isPresetColor(color) ? PRESET_GRADIENT_BACKDROP[color] : void 0;
   const surfaceContainerClass = variant === "gradient" && isPresetColor(color) ? PRESET_GRADIENT_FRAME[color] : styles.container;
   const presetRingClasses = isPresetColor(color) ? PRESET_RING_CLASSES_FOCUS_VISIBLE[color] : "";
-  const ringAccentStyle = React10.useMemo(() => {
+  const ringAccentStyle = React11.useMemo(() => {
     if (isPresetColor(color)) return void 0;
     if (typeof color !== "string") return void 0;
     return {
@@ -59229,7 +59739,16 @@ function renderTitleAndDescriptionBlocks(p) {
         extraTitleClass: s.titleSizeClass
       });
     } else {
-      titleBlock = /* @__PURE__ */ jsx("div", { className: cn("min-w-0 text-left", fgClass), style: fgStyle, children: title });
+      titleBlock = /* @__PURE__ */ jsx(
+        Typography,
+        {
+          as: "div",
+          variant: s.titleVariant,
+          className: cn("min-w-0 text-left", s.titleSizeClass, fgClass),
+          style: fgStyle,
+          children: title
+        }
+      );
     }
   }
   let descriptionBlock = null;
@@ -59441,7 +59960,7 @@ function shellPresetRing(color) {
   const c = color ?? "gray";
   return isPresetColor(c) ? PRESET_RING_CLASSES[c] : "";
 }
-var IconTextActionCard = React10.forwardRef(
+var IconTextActionCard = React11.forwardRef(
   ({
     icon,
     title,
@@ -59729,7 +60248,7 @@ var dismissButtonSizeClasses = {
   default: "size-7 [&_svg]:size-4",
   lg: "size-8 [&_svg]:size-4"
 };
-var Alert = React10.forwardRef(
+var Alert = React11.forwardRef(
   ({
     icon,
     title,
@@ -59748,8 +60267,8 @@ var Alert = React10.forwardRef(
     dismissLabel = "Close alert",
     className
   }, ref) => {
-    const [dismissed, setDismissed] = React10.useState(false);
-    const handleDismiss = React10.useCallback(() => {
+    const [dismissed, setDismissed] = React11.useState(false);
+    const handleDismiss = React11.useCallback(() => {
       setDismissed(true);
       onDismiss?.();
     }, [onDismiss]);
@@ -60124,10 +60643,10 @@ function CodeBlock({
       inViewMargin
     }
   );
-  const [visibleCode, setVisibleCode] = React10.useState("");
-  const [highlightedCode, setHighlightedCode] = React10.useState("");
-  const [isDone, setIsDone] = React10.useState(false);
-  React10.useEffect(() => {
+  const [visibleCode, setVisibleCode] = React11.useState("");
+  const [highlightedCode, setHighlightedCode] = React11.useState("");
+  const [isDone, setIsDone] = React11.useState(false);
+  React11.useEffect(() => {
     if (!visibleCode.length || !isInView) return;
     const loadHighlightedCode = async () => {
       const normalizedLang = normalizeLang(lang);
@@ -60151,7 +60670,7 @@ function CodeBlock({
     };
     loadHighlightedCode();
   }, [lang, themes, writing, isInView, duration, delay2, visibleCode, theme]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!writing) {
       setVisibleCode(code);
       onDone?.();
@@ -60198,7 +60717,7 @@ function CodeBlock({
       clearInterval(intervalId);
     };
   }, [code, duration, delay2, isInView, writing, onDone, onWrite, localRef]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!writing || !isInView) return;
     const el = scrollContainerRef?.current ?? localRef.current?.parentElement ?? localRef.current;
     if (!el) return;
@@ -60262,7 +60781,7 @@ function Code({
 }) {
   const showCopyButton = copyButton !== false && (copyButton === true || copyButton === void 0 && Boolean(lang));
   const showHeader = fileName !== void 0 || showCopyButton;
-  const scrollRef = React10.useRef(null);
+  const scrollRef = React11.useRef(null);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -60305,9 +60824,9 @@ var MONOSPACE_SIZE_STYLES = {
   default: { title: "text-sm", value: "text-sm", action: "size-6", gap: "gap-2" },
   lg: { title: "text-base", value: "text-base", action: "size-7", gap: "gap-2.5" }
 };
-var MonospaceContent = React10.forwardRef(
+var MonospaceContent = React11.forwardRef(
   function MonospaceContent2({ title, value: value2, color = "info", mask: mask2 = false, allowUnmask = true, size = "default", className }, ref) {
-    const [revealed, setRevealed] = React10.useState(false);
+    const [revealed, setRevealed] = React11.useState(false);
     const canUnmask = mask2 && allowUnmask;
     const masked = mask2 && !(canUnmask && revealed);
     const sizeStyles9 = MONOSPACE_SIZE_STYLES[size];
@@ -60363,6 +60882,7 @@ var LIST_SIZE_STYLES = {
   sm: {
     listGap: "gap-4",
     rowGap: "gap-3",
+    rowGapFromSm: "sm:gap-3",
     itemGap: "gap-1.5",
     labelTypography: "text-xs font-medium",
     rowValueTypography: "text-xs",
@@ -60372,6 +60892,7 @@ var LIST_SIZE_STYLES = {
   default: {
     listGap: "gap-5",
     rowGap: "gap-4",
+    rowGapFromSm: "sm:gap-4",
     itemGap: "gap-2",
     labelTypography: "text-sm font-medium",
     rowValueTypography: "text-sm",
@@ -60381,6 +60902,7 @@ var LIST_SIZE_STYLES = {
   lg: {
     listGap: "gap-6",
     rowGap: "gap-5",
+    rowGapFromSm: "sm:gap-5",
     itemGap: "gap-3",
     labelTypography: "text-base font-medium",
     rowValueTypography: "text-base",
@@ -60470,21 +60992,33 @@ function ItemRow({
       "div",
       {
         className: cn(
-          "flex flex-row items-center min-w-0",
+          "flex flex-row items-start sm:items-center min-w-0",
           listSizeStyles.rowGap,
           item.className
         ),
         children: [
           avatarNode,
-          /* @__PURE__ */ jsx("div", { className: "shrink-0", children: labelNode }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
-                "min-w-0 flex-1 flex justify-end",
-                listSizeStyles.rowValueTypography
+                "flex min-w-0 flex-1 flex-col sm:flex-row sm:items-center",
+                listSizeStyles.itemGap,
+                listSizeStyles.rowGapFromSm
               ),
-              children: item.content
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "shrink-0", children: labelNode }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 flex sm:flex-1 sm:justify-end",
+                      listSizeStyles.rowValueTypography
+                    ),
+                    children: item.content
+                  }
+                )
+              ]
             }
           )
         ]
@@ -60986,10 +61520,17 @@ function DynamicList({
     const valueRowAlignStart = usesBadgeArrayLayout;
     const needsBlockValueLayout = hasTypedOrEffectiveMetaLayout || usesDefaultStructuredCode || usesBadgeArrayLayout;
     if (rowDir === "row") {
+      const splitStyle = {
+        "--dynamic-list-key-width": `${keyWidthPct}%`,
+        "--dynamic-list-value-width": `${valueWidthPct}%`
+      };
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn("flex w-full min-w-0 items-center", sizeStyles9.rowGap),
+          className: cn(
+            "flex w-full min-w-0 items-start sm:items-center",
+            sizeStyles9.rowGap
+          ),
           children: [
             !hideIcon && /* @__PURE__ */ jsx(Avatar, { className: sizeStyles9.avatarSize, children: /* @__PURE__ */ jsx(
               AvatarFallback,
@@ -61005,19 +61546,20 @@ function DynamicList({
               "div",
               {
                 className: cn(
-                  "flex min-w-0 flex-1 flex-row",
-                  valueRowAlignStart ? "items-start" : "items-center"
+                  "flex min-w-0 flex-1 flex-col sm:flex-row sm:gap-0",
+                  sizeStyles9.itemGap,
+                  valueRowAlignStart ? "sm:items-start" : "sm:items-center"
                 ),
+                style: splitStyle,
                 children: [
                   /* @__PURE__ */ jsx(
                     "span",
                     {
                       className: cn(
-                        "truncate",
+                        "truncate sm:flex-none sm:basis-[var(--dynamic-list-key-width)]",
                         sizeStyles9.labelTypography,
                         labelClassName
                       ),
-                      style: { flex: `0 0 ${keyWidthPct}%` },
                       children: labelText
                     }
                   ),
@@ -61025,17 +61567,16 @@ function DynamicList({
                     "div",
                     {
                       className: cn(
-                        "flex min-w-0 justify-end text-muted-foreground",
+                        "flex min-w-0 text-muted-foreground sm:flex-none sm:basis-[var(--dynamic-list-value-width)] sm:justify-end",
                         sizeStyles9.valueTypography,
-                        usesBadgeArrayLayout ? "flex-1 items-start pt-0.5 text-start" : "items-center"
+                        usesBadgeArrayLayout ? "items-start sm:pt-0.5 text-start" : "items-center"
                       ),
-                      style: { flex: `0 0 ${valueWidthPct}%` },
                       children: /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: cn(
                             "min-w-0 max-w-full",
-                            !usesBadgeArrayLayout && "truncate text-end",
+                            !usesBadgeArrayLayout && "sm:truncate sm:text-end",
                             valueClassName
                           ),
                           children: valueDisplay
@@ -61188,7 +61729,8 @@ function KeyValueManagerAddPopover({
   meta,
   labels,
   maxAllowed,
-  onUpdate
+  onUpdate,
+  triggerClassName
 }) {
   const [open, setOpen] = useState(false);
   const [draftKey, setDraftKey] = useState("");
@@ -61251,9 +61793,9 @@ function KeyValueManagerAddPopover({
         color: "primary",
         fullWidth: false,
         disabled: atLimit,
-        className: "shrink-0",
+        className: cn("shrink-0 max-sm:size-9 max-sm:gap-0 max-sm:px-0", triggerClassName),
         startIcon: /* @__PURE__ */ jsx(Plus, {}),
-        children: labels.add
+        children: /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: labels.add })
       }
     ) }),
     /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-80 space-y-4", children: [
@@ -61351,8 +61893,44 @@ function KeyValueManagerTable({
     setDirection(1);
     setPage((current) => current + 1);
   };
+  const deleteButton = (item, sourceIndex, className) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      color: "error",
+      size: "icon",
+      fullWidth: false,
+      "aria-label": `Delete ${item.key}`,
+      className,
+      onClick: () => onDelete(sourceIndex),
+      children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4", "aria-hidden": true })
+    }
+  );
+  const emptyMessage = hasSearchQuery ? emptySearch : emptyItems;
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden sm:hidden", children: noRows ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, initial: false, children: /* @__PURE__ */ jsx(
+      motion.ul,
+      {
+        custom: direction,
+        variants: slideVariants,
+        initial: "enter",
+        animate: "center",
+        exit: "exit",
+        transition: slideTransition,
+        className: "divide-y divide-border",
+        children: pageRows.map(({ item, sourceIndex }) => /* @__PURE__ */ jsx("li", { className: "py-3", children: /* @__PURE__ */ jsx(
+          BasicDetailsCard,
+          {
+            primaryText: /* @__PURE__ */ jsx("span", { className: "block truncate", children: item.key }),
+            secondaryText: item.value,
+            action: deleteButton(item, sourceIndex)
+          }
+        ) }, `${sourceIndex}-${item.key}`))
+      },
+      page
+    ) }) }),
+    /* @__PURE__ */ jsxs(Table, { containerClassName: "hidden sm:block", children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableHead, { children: keyLabel }),
         /* @__PURE__ */ jsx(TableHead, { children: valueLabel }),
@@ -61363,7 +61941,7 @@ function KeyValueManagerTable({
         {
           colSpan: 3,
           className: "py-8 text-center text-muted-foreground",
-          children: hasSearchQuery ? emptySearch : emptyItems
+          children: emptyMessage
         }
       ) }) : /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsx(
         motion.tr,
@@ -61378,22 +61956,15 @@ function KeyValueManagerTable({
           children: pageRows.map(({ item, sourceIndex }) => /* @__PURE__ */ jsxs(TableRow, { className: "group", children: [
             /* @__PURE__ */ jsx(TableCell, { className: "max-w-[200px] truncate font-medium", children: item.key }),
             /* @__PURE__ */ jsx(TableCell, { className: "max-w-[300px] truncate", children: item.value }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                color: "error",
-                size: "icon",
-                fullWidth: false,
-                "aria-label": `Delete ${item.key}`,
-                className: cn(
-                  "pointer-events-none opacity-0 transition-opacity",
-                  "group-hover:pointer-events-auto group-hover:opacity-100"
-                ),
-                onClick: () => onDelete(sourceIndex),
-                children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4", "aria-hidden": true })
-              }
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: deleteButton(
+              item,
+              sourceIndex,
+              cn(
+                "pointer-events-none opacity-0 transition-opacity",
+                "group-hover:pointer-events-auto group-hover:opacity-100",
+                // Keyboard users tab to it, so show it when focused.
+                "focus-visible:opacity-100"
+              )
             ) })
           ] }, `${sourceIndex}-${item.key}`))
         },
@@ -61436,6 +62007,7 @@ function KeyValueManagerTable({
 // src/components/key-value-manager/key-value-manager.props.ts
 var STATIC_DEFAULT_LABELS = {
   add: "Add",
+  closeSearch: "Close search",
   keyErrorMessage: "Invalid key",
   valueErrorMessage: "Invalid value",
   successMessage: "Added successfully",
@@ -61462,6 +62034,27 @@ function KeyValueManager({
 }) {
   const labels = resolveKeyValueManagerLabels(labelsProp);
   const [searchQuery, setSearchQuery] = useState("");
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchBoxKey, setSearchBoxKey] = useState(0);
+  const toolbarRef = useRef(null);
+  const searchButtonRef = useRef(null);
+  const returnFocusRef = useRef(false);
+  const searchExpanded = searchOpen || searchQuery !== "";
+  useEffect(() => {
+    if (searchOpen) toolbarRef.current?.querySelector("input")?.focus();
+  }, [searchOpen]);
+  useEffect(() => {
+    if (!searchExpanded && returnFocusRef.current) {
+      returnFocusRef.current = false;
+      searchButtonRef.current?.focus();
+    }
+  }, [searchExpanded]);
+  const closeSearch = () => {
+    returnFocusRef.current = true;
+    setSearchOpen(false);
+    setSearchQuery("");
+    setSearchBoxKey((key2) => key2 + 1);
+  };
   const filteredRows = useMemo(
     () => filterKeyValueRows(items, searchQuery),
     [items, searchQuery]
@@ -61470,28 +62063,71 @@ function KeyValueManager({
     onUpdate(items.filter((_, index2) => index2 !== sourceIndex));
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx(
-        SearchBox,
-        {
-          className: "min-w-0 flex-1",
-          placeholder: labels.search,
-          onSearch: setSearchQuery,
-          onClear: () => setSearchQuery(""),
-          onValueChange: setSearchQuery
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        KeyValueManagerAddPopover,
-        {
-          items,
-          meta,
-          labels,
-          maxAllowed,
-          onUpdate
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: toolbarRef,
+        className: "flex items-center gap-3 max-sm:gap-1",
+        onKeyDown: (e) => {
+          const inToolbar = toolbarRef.current?.contains(e.target);
+          if (e.key === "Escape" && searchOpen && inToolbar) closeSearch();
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: cn("flex-1 sm:hidden", searchExpanded && "hidden") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              color: "primary",
+              size: "icon",
+              fullWidth: false,
+              ref: searchButtonRef,
+              "aria-label": labels.search,
+              className: cn("sm:hidden", searchExpanded && "hidden"),
+              onClick: () => setSearchOpen(true),
+              children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SearchBox,
+            {
+              className: cn("min-w-0 flex-1", !searchExpanded && "max-sm:hidden"),
+              placeholder: labels.search,
+              onSearch: setSearchQuery,
+              onClear: () => setSearchQuery(""),
+              onValueChange: setSearchQuery
+            },
+            searchBoxKey
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              color: "gray",
+              size: "icon",
+              fullWidth: false,
+              "aria-label": labels.closeSearch,
+              className: cn("shrink-0 sm:hidden", !searchExpanded && "hidden"),
+              onClick: closeSearch,
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            KeyValueManagerAddPopover,
+            {
+              items,
+              meta,
+              labels,
+              maxAllowed,
+              onUpdate,
+              triggerClassName: cn(searchExpanded && "max-sm:hidden")
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       KeyValueManagerTable,
       {
@@ -61759,7 +62395,7 @@ function SimplePaginatedList({
     ] }) : null
   ] });
 }
-var ToastDefaultVariantContext = React10.createContext(void 0);
+var ToastDefaultVariantContext = React11.createContext(void 0);
 var typeIconMap2 = {
   error: /* @__PURE__ */ jsx(CircleX, { className: "h-4 w-4" }),
   info: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
@@ -61778,7 +62414,7 @@ function defaultIconFromColor2(color) {
   return type != null ? typeIconMap2[type] : void 0;
 }
 function isToastProps(input) {
-  return input != null && typeof input === "object" && !React10.isValidElement(input) && ("title" in input || "children" in input || "type" in input || "color" in input || "icon" in input || "hideIcon" in input || "action" in input || "variant" in input);
+  return input != null && typeof input === "object" && !React11.isValidElement(input) && ("title" in input || "children" in input || "type" in input || "color" in input || "icon" in input || "hideIcon" in input || "action" in input || "variant" in input);
 }
 function normalizeToastInput(input, type) {
   if (isToastProps(input)) {
@@ -61802,7 +62438,7 @@ function resolveToastOptions(props, options) {
     closeButton: options?.closeButton
   };
 }
-var Toast = React10.forwardRef(
+var Toast = React11.forwardRef(
   ({
     icon,
     title,
@@ -61814,7 +62450,7 @@ var Toast = React10.forwardRef(
     action,
     className
   }, ref) => {
-    const defaultVariantFromToaster = React10.useContext(
+    const defaultVariantFromToaster = React11.useContext(
       ToastDefaultVariantContext
     );
     const resolvedVariant = variant ?? defaultVariantFromToaster ?? "soft";
@@ -61861,7 +62497,7 @@ var Toast = React10.forwardRef(
   }
 );
 Toast.displayName = "Toast";
-var Toaster = React10.forwardRef(
+var Toaster = React11.forwardRef(
   ({
     position: position2 = "top-right",
     closeButton = true,
@@ -61990,9 +62626,9 @@ function createMarkdownComponents({
 }
 var REMARK_PLUGINS = [remarkGfm];
 var REHYPE_PLUGINS = [rehypeSlug];
-var MarkdownContent = React10.forwardRef(
+var MarkdownContent = React11.forwardRef(
   function MarkdownContent2({ content: content3, linkComponent, colorTheme, className }, ref) {
-    const components = React10.useMemo(
+    const components = React11.useMemo(
       () => createMarkdownComponents({ linkComponent, colorTheme }),
       [linkComponent, colorTheme]
     );
@@ -62008,9 +62644,25 @@ var MarkdownContent = React10.forwardRef(
   }
 );
 MarkdownContent.displayName = "MarkdownContent";
+function resolveBadge(item, index2, defaultIcon, defaultColor) {
+  if (typeof item === "string") {
+    return {
+      key: `${item}-${index2}`,
+      label: item,
+      icon: index2 === 0 ? defaultIcon : void 0,
+      color: defaultColor
+    };
+  }
+  return {
+    key: `${item.id ?? item.label}-${index2}`,
+    label: item.label,
+    icon: item.icon,
+    color: item.color ?? defaultColor
+  };
+}
 function OverflowBadgeList({
   items,
-  icon: Icon2,
+  icon,
   badgeColor,
   badgeVariant = "outline",
   badgeSize = "default",
@@ -62022,22 +62674,25 @@ function OverflowBadgeList({
   if (items.length === 0) {
     return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: noneLabel });
   }
-  const visibleCount = Math.min(Math.max(1, maxBadgesToShow), items.length);
-  const visibleItems = items.slice(0, visibleCount);
-  const hiddenCount = items.length - visibleCount;
-  const tooltipContent = hiddenCount > 0 ? /* @__PURE__ */ jsx("ul", { className: "max-h-48 max-w-xs list-disc space-y-1 overflow-y-auto pl-4 text-left text-sm", children: items.map((item, index2) => /* @__PURE__ */ jsx("li", { className: "break-words", children: item }, `${item}-${index2}`)) }) : null;
+  const badges = items.map(
+    (item, index2) => resolveBadge(item, index2, icon, badgeColor)
+  );
+  const visibleCount = Math.min(Math.max(1, maxBadgesToShow), badges.length);
+  const visibleBadges = badges.slice(0, visibleCount);
+  const hiddenCount = badges.length - visibleCount;
+  const tooltipContent = hiddenCount > 0 ? /* @__PURE__ */ jsx("ul", { className: "max-h-48 max-w-xs list-disc space-y-1 overflow-y-auto pl-4 text-left text-sm", children: badges.map((badge) => /* @__PURE__ */ jsx("li", { className: "break-words", children: badge.label }, badge.key)) }) : null;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-wrap items-center gap-2", className), children: [
-    visibleItems.map((item, index2) => /* @__PURE__ */ jsx(
+    visibleBadges.map((badge) => /* @__PURE__ */ jsx(
       StatusBadge,
       {
-        label: item,
-        icon: index2 === 0 ? Icon2 : void 0,
+        label: badge.label,
+        icon: badge.icon,
         variant: badgeVariant,
-        color: badgeColor,
+        color: badge.color,
         size: badgeSize,
         className: "max-w-[12rem]"
       },
-      `${item}-${index2}`
+      badge.key
     )),
     hiddenCount > 0 && tooltipContent ? /* @__PURE__ */ jsx(Tooltip2, { content: tooltipContent, side: "top", align: "start", children: /* @__PURE__ */ jsx(
       "span",
@@ -67554,7 +68209,7 @@ function strokeResolvedStyle(color, opacity) {
   return { stroke: mix };
 }
 var labelTypographyClass = "whitespace-nowrap text-center leading-none font-semibold tracking-tight tabular-nums";
-var CircularProgress = React10.forwardRef(
+var CircularProgress = React11.forwardRef(
   function CircularProgress2({
     value: value2,
     showPercentage = false,
@@ -67682,13 +68337,13 @@ function CountingNumber({
   const decimals = typeof decimalPlaces === "number" ? decimalPlaces : numberStr.includes(".") ? numberStr.split(".")[1]?.length ?? 0 : 0;
   const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
   const springVal = useSpring(motionVal, transition);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const timeoutId = setTimeout(() => {
       if (isInView) motionVal.set(number);
     }, delay2);
     return () => clearTimeout(timeoutId);
   }, [isInView, number, motionVal, delay2]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const unsubscribe = springVal.on("change", (latest) => {
       if (localRef.current) {
         let formatted = decimals > 0 ? latest.toFixed(decimals) : Math.round(latest).toString();
@@ -67832,9 +68487,9 @@ function ProgressBar({
   className,
   ...props
 }) {
-  const [fakeValue, setFakeValue] = React10.useState(FAKE_PROGRESS_MIN);
-  const intervalRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const [fakeValue, setFakeValue] = React11.useState(FAKE_PROGRESS_MIN);
+  const intervalRef = React11.useRef(null);
+  React11.useEffect(() => {
     if (!showFakeProgress) return;
     if (intervalRef.current) clearInterval(intervalRef.current);
     setFakeValue(FAKE_PROGRESS_MIN);
@@ -67966,7 +68621,7 @@ function trailingChevronRow(options) {
     }
   );
 }
-var SimpleClickableCard = React10.forwardRef(
+var SimpleClickableCard = React11.forwardRef(
   ({
     icon,
     leadingIcon,
@@ -68122,7 +68777,7 @@ function infoTriggerIconFgClass(variant, cardColor, infoButtonColor) {
   }
   return INFO_ICON_FG_CLASS[infoButtonColor];
 }
-var SimpleInfoCard = React10.forwardRef(
+var SimpleInfoCard = React11.forwardRef(
   ({
     icon,
     title,
@@ -68373,8 +69028,8 @@ function applyEdit(el, edit) {
   el.setSelectionRange(edit.selectionStart, edit.selectionEnd);
 }
 function useCodeEditorKeys({ tabSize, onKeyDown, onBlur }) {
-  const tabReleasedRef = React10.useRef(false);
-  const handleKeyDown = React10.useCallback(
+  const tabReleasedRef = React11.useRef(false);
+  const handleKeyDown = React11.useCallback(
     (event) => {
       onKeyDown?.(event);
       if (event.defaultPrevented) return;
@@ -68408,7 +69063,7 @@ function useCodeEditorKeys({ tabSize, onKeyDown, onBlur }) {
     },
     [onKeyDown, tabSize]
   );
-  const handleBlur = React10.useCallback(
+  const handleBlur = React11.useCallback(
     (event) => {
       tabReleasedRef.current = false;
       onBlur?.(event);
@@ -68443,11 +69098,11 @@ function warnOnce(key2, message, error) {
 }
 var resolved = /* @__PURE__ */ new WeakMap();
 function useHighlightedHtml(value2, { lang, theme, themes, maxHighlightLength }) {
-  const [highlighter, setHighlighter] = React10.useState(() => {
+  const [highlighter, setHighlighter] = React11.useState(() => {
     const promise = getHighlighter();
     return resolved.get(promise) ?? null;
   });
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (highlighter) return;
     let active2 = true;
     const promise = getHighlighter();
@@ -68462,9 +69117,9 @@ function useHighlightedHtml(value2, { lang, theme, themes, maxHighlightLength })
       active2 = false;
     };
   }, [highlighter]);
-  const deferredValue = React10.useDeferredValue(value2);
+  const deferredValue = React11.useDeferredValue(value2);
   const { light, dark } = themes;
-  return React10.useMemo(() => {
+  return React11.useMemo(() => {
     if (!highlighter || deferredValue.length > maxHighlightLength) {
       return plainHtml(deferredValue);
     }
@@ -68527,7 +69182,7 @@ function hasContent(node) {
 function toCssSize(size) {
   return typeof size === "number" ? `${size}px` : size;
 }
-var CodeEditor = React10.forwardRef(
+var CodeEditor = React11.forwardRef(
   ({
     className,
     style,
@@ -68566,12 +69221,12 @@ var CodeEditor = React10.forwardRef(
     "aria-describedby": ariaDescribedBy,
     ...textareaProps
   }, forwardedRef) => {
-    const autoId = React10.useId();
+    const autoId = React11.useId();
     const textareaId = id || autoId;
     const errorId = `${textareaId}-error`;
     const hasError = error || !!errorContent;
     const isControlled = value2 !== void 0;
-    const [innerValue, setInnerValue] = React10.useState(
+    const [innerValue, setInnerValue] = React11.useState(
       () => defaultValue == null ? "" : String(defaultValue)
     );
     const currentValue = isControlled ? String(value2 ?? "") : innerValue;
@@ -68582,9 +69237,9 @@ var CodeEditor = React10.forwardRef(
       maxHighlightLength
     });
     const keys = useCodeEditorKeys({ tabSize, onKeyDown, onBlur });
-    const textareaRef = React10.useRef(null);
-    const stopObservingRef = React10.useRef(void 0);
-    const setTextareaRef = React10.useCallback(
+    const textareaRef = React11.useRef(null);
+    const stopObservingRef = React11.useRef(void 0);
+    const setTextareaRef = React11.useCallback(
       (node) => {
         textareaRef.current = node;
         stopObservingRef.current?.();
@@ -68762,7 +69417,7 @@ var maxWidthClasses = {
   lg: "max-w-5xl",
   xl: "max-w-7xl"
 };
-var ContentContainer = React10.forwardRef(
+var ContentContainer = React11.forwardRef(
   function ContentContainer2({ maxWidth, children, className, noGutters = false }, ref) {
     return /* @__PURE__ */ jsx(
       "div",