@espressif/dashboard-ui-components 1.3.0 → 1.5.0

package/dist/{chunk-O5BFYRPY.js → chunk-X7LDLZBT.js}

@@ -1,6 +1,6 @@
-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-KCMVLNM5.js';
-import { 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-UHRNPXO5.js';
-import { getStrictContext, buttonVariants, Separator, CollapsibleContent, Collapsible, CollapsibleTrigger, useIsMobile, useControlledState, Button as Button$1, Skeleton, Avatar, AvatarFallback } from './chunk-7BO76CNB.js';
+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 { 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, FileCheck, CheckCheck, TriangleAlert, CircleX, Menu, ChevronsUpDown, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, CalendarIcon, CalendarRangeIcon, CheckIcon, ChevronLeft, Columns2, ChevronsRight, ChevronsLeft, XIcon, MoveLeft, CircleIcon, Bolt, Plus, Trash2, Clock, XCircle, CheckCircle2 } from 'lucide-react';
@@ -24,7 +24,7 @@ import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Command as Command$1 } from 'cmdk';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
-import { format, endOfMonth, startOfMonth, sub, endOfDay, startOfDay, endOfYear, startOfYear, endOfWeek, startOfWeek, parse, isValid } from 'date-fns';
+import { format, endOfMonth, startOfMonth, sub, endOfDay, startOfDay, endOfYear, startOfYear, endOfWeek, startOfWeek, isValid, parse, set } from 'date-fns';
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { PreviewCard as PreviewCard$1 } from '@base-ui-components/react/preview-card';
 import { startCase } from 'lodash-es';
@@ -16525,7 +16525,7 @@ var create_new_group_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg id=
 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-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  <defs>\n    <style>\n      .st0 {\n        fill: var(--color-destructive);\n      }\n\n      .st1 {\n        fill: var(--color-error-light);\n      }\n\n      .st2 {\n        fill: var(--color-gray);\n      }\n\n      .st3 {\n        fill: var(--color-muted-foreground);\n      }\n\n      .st4 {\n        fill: var(--color-card);\n      }\n\n      .st5 {\n        fill: var(--color-muted);\n      }\n\n      .st6 {\n        fill: var(--color-muted);\n      }\n    </style>\n  </defs>\n  <g id="rm-logo">\n    <circle class="st0" cx="196.56" cy="204.3" r="8.88"/>\n    <path class="st1" d="M206.56,482.35l.39-240.76c-3.35.03-6.71.05-10.06.05-1.91,0-3.82-.02-5.72-.03l-.4,241.55c5.35-.32,10.79-.62,15.78-.81Z"/>\n    <path class="st1" d="M241.83,422.44l.39-178.97c-3.35.02-6.71.03-10.06.03-1.91,0-3.82-.02-5.72-.02l-.4,179.56c5.35-.24,10.79-.46,15.78-.6Z"/>\n    <path class="st1" d="M277.03,361.96l.39-121.75c-3.35.01-6.71.02-10.06.02-1.91,0-3.82-.01-5.72-.02l-.4,122.15c5.35-.16,10.79-.31,15.78-.41Z"/>\n    <path class="st1" d="M547.53,361.77l-286.28-.39c.03,3.35.05,6.71.05,10.06,0,1.91-.03,3.82-.04,5.72l287.22.4c-.38-5.35-.74-10.79-.96-15.78Z"/>\n    <path class="st1" d="M547.41,422.43l-321.36-.39c.04,3.35.06,6.71.06,10.06,0,1.91-.03,3.82-.04,5.72l322.42.4c-.43-5.35-.83-10.79-1.08-15.78Z"/>\n    <path class="st1" d="M547.29,482.55l-356.63-.39c.04,3.35.07,6.71.07,10.06,0,1.91-.03,3.82-.04,5.72l357.81.4c-.48-5.35-.92-10.79-1.2-15.78Z"/>\n    <path class="st0" d="M1.45,3c1.93,0,1.93-3,0-3S-.48,3,1.45,3h0Z"/>\n    <path class="st0" d="M298.29,165.07h0c-.87-28.76-24.91-51.37-53.67-50.49-27.38.84-49.44,22.73-50.48,50.11h0c-21.89,1.16-38.69,19.85-37.53,41.74,1.13,21.33,18.94,37.93,40.3,37.58h71.35c3.73-.3,7.11,2.19,7.94,5.85h0l7.35-8.63h0c1.26-1.48,1.93-3.37,1.88-5.31-.17-4.31-3.73-7.72-8.05-7.69h-80.57c-13.21.4-24.24-9.97-24.64-23.18-.4-13.21,9.97-24.24,23.18-24.64.39-.01.79-.01,1.18,0,1.44,0,2.87.13,4.29.39,2.07.38,4.22-.09,5.94-1.31,2.55-1.68,3.9-4.67,3.48-7.69-.24-1.7-.37-3.41-.37-5.12,0-20.06,16.26-36.32,36.32-36.32s36.32,16.26,36.32,36.32v1.54h0c-14.54,6.23-24.01,20.5-24.09,36.32-.04,4.39,3.47,7.99,7.86,8.06,4.36.02,7.9-3.5,7.92-7.86v-.03c-.05-13.21,10.62-23.96,23.83-24.02,13.21-.05,23.96,10.62,24.02,23.83.02,6.03-2.23,11.84-6.31,16.28l-.11.14-23.49,27.09c-2.86,3.29-2.52,8.28.77,11.14s8.28,2.52,11.14-.77h0l23.46-26.95c14.71-16.26,13.47-41.37-2.79-56.08-7.25-6.56-16.66-10.22-26.44-10.27h0s0-.01,0-.01Z"/>\n  </g>\n  <g id="body">\n    <rect id="bezel" class="st3" x="526.77" y="310.15" width="296.41" height="203.65" rx="29.36" ry="29.36"/>\n    <g id="base">\n      <path id="base-2" class="st2" 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 id="trackpad" class="st5" 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    </g>\n    <g id="top">\n      <g id="screen-content">\n        <rect id="screen" class="st4" x="539.84" y="327.23" width="270.27" height="169.5"/>\n        <g id="app">\n          <rect id="header" class="st3" x="539.84" y="327.23" width="270.27" height="17.44"/>\n          <g id="table">\n            <rect class="st6" x="549.32" y="419.94" width="250.49" height="11.81"/>\n            <rect class="st6" x="549.32" y="442.43" width="250.49" height="9.31"/>\n            <rect class="st6" x="549.32" y="398.14" width="250.49" height="11.81"/>\n            <rect class="st6" x="549.32" y="373.58" width="250.49" height="11.81"/>\n            <rect class="st6" x="549.73" y="463.97" width="250.49" height="11.81"/>\n          </g>\n        </g>\n      </g>\n      <circle id="cam" class="st4" cx="674.98" cy="318.61" r="3.7"/>\n    </g>\n  </g>\n</svg>\n';
+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';
 
 // svg-raw:/builds/app-frameworks/esp-ui-component-library/src/assets/illustrations/secured-key.svg
 var secured_key_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg id="secured-key" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 459.75 456.99">\n  <defs>\n    <style>\n      .st0 {\n        fill: var(--color-foreground);\n      }\n\n      .st1 {\n        fill: var(--color-card);\n      }\n\n      .st2 {\n        fill: var(--color-muted-foreground);\n      }\n    </style>\n  </defs>\n  <g id="shield">\n    <g id="background">\n      <path class="st0" d="M378.05,77.43l-22.49,170.1c-8.7,65.78-44.56,124.91-98.87,163.02l-52.54,36.87c-13.4,9.4-31.36,8.97-44.28-1.07l-45.96-35.69c-49.42-38.37-81.66-94.72-89.72-156.77L1.32,77.62C-.99,59.83,10.22,43.07,27.54,38.41L141.87,7.64c33.33-8.97,68.45-8.83,101.71.41l108.55,30.16c17.21,4.78,28.27,21.51,25.93,39.22Z"/>\n      <path class="st1" d="M182.73,455.25c-8.28,0-16.55-2.71-23.48-8.1l-45.96-35.69c-24.7-19.18-45.1-42.67-60.63-69.81-15.53-27.14-25.45-56.63-29.47-87.64L.31,77.75c-2.36-18.22,9.23-35.56,26.97-40.33L141.6,6.65c33.48-9.01,68.83-8.87,102.24.41l108.55,30.16c17.6,4.89,29.06,22.23,26.67,40.34l-22.49,170.1c-8.71,65.88-44.9,125.55-99.29,163.72l-52.54,36.87c-6.66,4.67-14.34,7-22.01,7ZM191.96,2.04c-16.76,0-33.52,2.19-49.83,6.58L27.81,39.4C11.05,43.91.1,60.28,2.33,77.49l22.88,176.26c8.07,62.19,39.79,117.63,89.33,156.09l45.96,35.69c12.65,9.82,29.96,10.24,43.07,1.04l52.54-36.87c53.93-37.84,89.81-97.01,98.44-162.32l22.49-170.1c2.26-17.1-8.57-33.48-25.19-38.1l-108.55-30.16c-16.78-4.66-34.06-6.99-51.33-6.99ZM378.05,77.43h0,0Z"/>\n    </g>\n    <g id="foreground">\n      <path class="st1" d="M396.29,79.17l-22.49,170.1c-8.7,65.78-44.56,124.91-98.87,163.02l-52.54,36.87c-13.4,9.4-31.36,8.97-44.28-1.07l-45.96-35.69c-49.42-38.37-81.66-94.72-89.72-156.77L19.56,79.36c-2.31-17.79,8.9-34.55,26.22-39.21l114.32-30.77c33.33-8.97,68.45-8.83,101.71.41l108.55,30.16c17.21,4.78,28.27,21.51,25.93,39.22Z"/>\n      <path class="st0" d="M200.97,456.99c-8.28,0-16.54-2.71-23.48-8.1l-45.96-35.69c-24.7-19.18-45.1-42.67-60.63-69.81-15.53-27.14-25.45-56.63-29.47-87.64L18.55,79.49c-2.37-18.22,9.23-35.56,26.97-40.33l114.33-30.77c33.48-9.01,68.84-8.87,102.24.41l108.55,30.16c17.6,4.89,29.06,22.23,26.67,40.34l-22.49,170.1c-8.71,65.88-44.9,125.55-99.29,163.72l-52.54,36.87c-6.66,4.67-14.34,7-22.01,7ZM210.21,3.78c-16.76,0-33.52,2.19-49.83,6.58l-114.33,30.77c-16.76,4.51-27.71,20.89-25.47,38.09l22.88,176.26c8.07,62.19,39.8,117.63,89.33,156.09l45.96,35.69c12.65,9.82,29.96,10.24,43.07,1.04l52.54-36.87c53.93-37.84,89.81-97.01,98.44-162.32l22.49-170.1,1.01.13-1.01-.13c2.26-17.1-8.57-33.48-25.19-38.1l-108.55-30.16c-16.78-4.66-34.06-6.99-51.33-6.99Z"/>\n    </g>\n  </g>\n  <path id="key" class="st2" d="M98.84,294.41c6.8,19.51,26,38.63,49.43,34.99,18.52-2.87,34.5-17.68,43.24-34.13,7.26-13.66,9.55-30.84,1.61-41.75,14.44-10.8,26.96-25.03,39.69-37.72,4.59-4.57,9.21-9.08,13.89-13.54-.11.58,0,1.2.42,1.79,5.52,7.65,12.99,14.24,19.53,21.02.77.79,2.31.9,3.23-.07,3.45-3.63,6.12-7.49,8.73-11.63.07.14.15.27.26.37.94.86,2.46,1.28,3.63.07,1.33-1.37.9-2.95.09-4.21-1.47-2.27-3.31-4.26-5.18-6.2.27-.24.54-.49.58-.54.61-.63,1.22-1.26,1.83-1.89.63-.65,1.24-1.32,1.85-1.99,1.32,2.05,3.95,3.98,5.23,5.36.64.68,2.02,1.02,2.96.34,5.89-4.28,10.74-9.83,12.78-16.71.86-.22,1.59-.87,1.7-1.89.17-1.68-.94-2.89-1.72-4.18-.46-.75-.92-1.51-1.39-2.25.73-.17,1.46-.38,2.21-.66,3.15-1.18,5.47-.06,8.11,1.32.75.39,2.01.38,2.7-.42,1.98-2.31,2.81-5.07,4.74-7.4.37-.44.38-.89.22-1.25,1.09-.89,1.64-2.43.55-3.63-3.7-4.04-7.47-7.99-11.36-11.85-1.49-1.48-4.1-4.97-6.86-6.45,2.88-3.5,5.42-7.19,7.14-11.09,2.94-6.69-2.72-9.13-8.42-8.15-10.76,1.84-21.62,12.81-29.44,20.06-11.67,10.82-22.38,22.66-33.17,34.33-12.08,13.07-25.27,24.9-38.32,37.02-6.72,6.24-13.27,12.65-19.72,19.16-16.04-11.64-38.74-12.89-58.53-2.08-21.79,11.9-29.38,35.38-22.24,55.86ZM127.82,287.93c4.06-2.79,10.77-.97,11.96,3.33.85,3.11-.47,6.94-2.87,9.47-2.24,2.37-5.08,2.91-7.88,2.73-.03-.44-.18-.87-.52-1.27-2.61-3.09-5.7-10.81-.69-14.26Z"/>\n  <g id="tick-circle">\n    <path class="st0" d="M423.55,19.42c.37.24.75-.31.39-.56-.83-.58-1.78-.94-2.74-1.24-.75-.24-1.73-.71-2.51-.43l-.07.33c.5.59,1.47.61,2.18.8.96.26,1.92.57,2.76,1.11Z"/>\n    <path class="st0" d="M412.34,16.75c.34-.28-.1-.81-.44-.53-.34.28.1.81.44.53Z"/>\n    <polygon class="st0" points="368.27 60.45 368.21 60.26 367.91 60.05 367.64 60.13 367.5 60.38 367.54 60.57 367.66 60.72 367.84 60.81 368.02 60.86 368.19 60.8 368.28 60.67 368.27 60.45"/>\n    <path class="st0" d="M447.17,59.37c.08-2.17-.31-4.21-.96-6.28l-.05.02c.39,2.13.53,4.32.39,6.49-.13,2-.86,3.93-.96,5.91l.38.14c.95-1.8,1.13-4.27,1.2-6.27Z"/>\n    <path class="st0" d="M368.47,62.42c-.55.46.16,1.31.71.85.55-.46-.16-1.31-.71-.85Z"/>\n    <path class="st0" d="M449.03,58.97c-.28,6.1-2.63,10.3-4.94,15.7-.13.3.27.54.5.35,4.34-3.43,5.68-10.7,5.76-15.93.1-6.33-1.36-12.5-4.68-17.91l-.05.02c2.37,5.59,3.68,11.68,3.41,17.77Z"/>\n    <path class="st0" d="M444.08,68.61c.23-.2-.07-.56-.3-.36-.23.2.07.56.3.36Z"/>\n    <polygon class="st0" points="442.85 78.76 443 78.79 443.12 78.78 443.24 78.75 443.46 78.53 443.51 78.3 443.4 78.01 442.96 77.85 442.84 77.88 442.69 78 442.57 78.27 442.57 78.42 442.64 78.65 442.85 78.76"/>\n    <path class="st0" d="M392.72,90.36c-.27-.02-.5.22-.45.49.04.25.35.45.59.31l.39-.23.17-.31-.26-.24-.44-.03Z"/>\n    <path class="st0" d="M453.43,30.36c-12.43-23.53-43.73-34.39-70.13-21.97-29.34,13.8-32.64,46.32-20.42,70.74,10.15,20.29,32.54,31.34,55.08,26.4,10.16-1.69,18.65-6.53,25.22-13.23,18.05-16.62,21.19-42.73,10.25-61.93ZM422.78,101.22c-35.07,11.39-63.96-19.82-62.88-52.37.62-18.74,13.77-33.73,32.19-38.79,15.33-4.21,31.37-1.67,43.6,6.5,3.51,2.35,6.71,5.16,9.49,8.41,9.12,10.66,13.87,25.53,10.96,40.13-3.32,16.55-17.13,30.85-33.36,36.12Z"/>\n    <path class="st0" d="M423.19,54.17h-.17c.3.05.6.1.9.14l-.21-.05-.53-.09Z"/>\n    <path class="st0" d="M417.57,10.57c-25.19-6.85-52.38,8.9-55.51,36.24-3.12,27.35,19.73,52.97,47.37,53.17,9.88.07,19.93-3.83,28.02-9.98,7.4-5.63,13.76-14.09,16.09-22.92,3.7-14.07-2.39-30.7-11.13-40.88-6.42-7.47-15.08-12.98-24.84-15.64ZM450.54,69.05c-3.35,13.1-16.77,23.25-29.48,26.82-5.15,1.45-10.49,1.92-15.65,1.37-25.13-2.7-44.79-28.08-40.56-53.31,4.66-27.84,34.6-38.82,57.87-29.06,20.14,8.45,33.56,31.72,27.82,54.17Z"/>\n    <path class="st0" d="M373.93,34.82c-2.66,1.85-3.04,5.33-3.74,8.26-.68,2.87-1.97,7.06-.28,9.72.15.23.56.14.63-.11.34-1.28.1-2.43.14-3.76.04-1.57.28-3.14.57-4.68.55-2.89.83-6.83,3.05-8.98.27-.26-.07-.66-.37-.45Z"/>\n    <path class="st0" d="M371.64,55.89c-.12-.2-.29-.37-.54-.38l-.48.15-.23.45c-.02.25.1.45.28.6l.19.16c.22.17.54.17.76-.01.22-.18.28-.5.15-.75l-.12-.21Z"/>\n    <path class="st0" d="M409.81,94.95c-2.75.26-5.51-.14-8.15-.9-2.03-.59-3.93-1.77-6-2.15-.39-.07-.69.49-.41.78,1.63,1.62,4.34,2.13,6.51,2.58,2.69.56,5.43.76,8.15.32.41-.07.3-.66-.11-.62Z"/>\n    <path class="st0" d="M392.91,17.51l.15-.22c-5.25-3.4-12.79,4.09-16.31,7.26-9.04,8.14-11.92,20.29-10.31,32.08.09.68,1.15.64,1.2-.05.82-10.48.56-20.08,8-28.58,3.07-3.51,12.28-13.22,17.26-10.49Z"/>\n    <path class="st0" d="M415.04,39.52c-4.34,1.84-7.77,4.29-11.63,6.79-1.84,1.2-4.72,4.51-7.46,3.24-1.08-.5-4.65-8.38-5.44-9.55-.35-.53-1.09-.68-1.56-.2-4.49,4.5-12.73,9.41-15.4,15.41-.29.64.06,1.24.55,1.5,1.97,4.7,5.61,8.32,8.48,12.62,2.95,4.42,5.25,9.05,8.76,13.07.64.73,2.13.59,2.54-.33,7.67-17.02,28.05-43.3,48.86-42.48.81.03.91-1.14.19-1.37-9.83-3.15-18.36-2.73-27.89,1.3ZM413.72,50.78s-.09,0-.14.01c-.41.2-.8.48-1.17.79-.12,0-.25.03-.35.14-2.77,2.95-5.94,5.74-8.87,8.71.23-.3.46-.62.69-.92,3.76-4.98,8.15-8.18,12.82-11.19-1.03.79-2.02,1.6-2.98,2.45ZM388.18,44.92s0,0,0,0c0,.3-.02.61,0,.93-.33-.03-.73.24-.59.62.31.86.67,1.69,1.04,2.53.08.36.15.72.25,1.08-.44-.5-.9-.98-1.37-1.45-.07-.77-.16-1.54-.29-2.29-.08-.48-.4-.67-.76-.68.64-.37,1.2-.6,1.71-.73ZM379.52,54.86c.2.51.41,1.01.64,1.5-.03.28-.07.56-.09.84-.43-.34-.86-.69-1.3-1.01,0,0,0,0,0,0,0,0,0,0,0,0-.05-.03-.09-.07-.14-.11-.34-.25-.73-.03-.91.29-.28-.61-.41-1.09-.31-1.34.76.08,1.48.04,2.12-.16ZM382.91,58.56c.93,1.16,1.84,2.33,2.69,3.56.29.42.54.88.83,1.31-.5-.6-1-1.2-1.53-1.77-.64-1.05-1.31-2.07-1.99-3.1ZM384.39,58.04s.04-.03.05-.04c.09.14.19.29.28.43-.11-.13-.22-.26-.33-.39ZM385.74,55.68c.41.51.79,1.05,1.13,1.61.18.53.39,1.05.64,1.58.1.2.27.33.47.41.21.42.43.84.64,1.27-.95-1.43-2.17-2.84-3.09-4.36.08-.17.15-.33.22-.5ZM388.39,55.35c-.05-.17-.09-.35-.13-.53.06.12.12.24.17.36-.01.06-.03.11-.04.16ZM389.7,57.95c.23.51.45,1.03.66,1.55-.25-.45-.5-.91-.75-1.36.03-.06.06-.13.08-.19ZM385.03,47.83c-.02.15-.03.3.05.47.03.06.05.11.08.17-.11,1.27-.22,2.56-.43,3.82-.24-.16-.46-.34-.71-.48.02-.52.04-1.04.09-1.57.23-.44.43-.88.62-1.33.1-.23.07-.46-.02-.66.11-.13.22-.27.33-.42ZM391.16,65.15c.37.54.79,1.04,1.25,1.52-.09.18-.18.35-.26.53-.32-.69-.65-1.37-.98-2.05ZM390.58,55.21c.04-.19.06-.39.1-.58.49.98,1.03,1.91,1.61,2.73.64,1.21,1.26,2.45,1.87,3.68-.11.3-.26.6-.36.91-.11.35.38.52.57.24.07-.1.15-.2.22-.3.09.17.18.35.27.52-.26.39-.5.78-.74,1.18-.84-2.96-2.11-5.7-3.54-8.38ZM391.66,52.2c-.25-.61-.48-1.23-.68-1.86-.01-.45-.03-.9-.06-1.35.21.31.42.63.63.94.48,1.33.85,2.69,1.1,4.06-.33-.6-.66-1.19-.99-1.79ZM394.94,58.37c.04-.11.11-.21.11-.33-.02-1.13-.14-2.23-.33-3.32.18.35.35.69.49,1.04,0,.02.01.03.02.05.23.6.37,1.19.35,1.74,0,.09.03.2.08.3-.18.31-.36.63-.52.95-.06-.14-.12-.28-.19-.42ZM388.85,52.06c-.05-.09-.1-.18-.16-.28.06.07.1.14.16.21,0,.02,0,.05,0,.07ZM391.07,76.22c.09-.18.14-.38.13-.61.19,0,.39-.03.56-.11-.06.23-.11.46-.17.69-.17.04-.34.05-.52.03ZM392.23,73.65c-.16-.5-.35-.99-.54-1.48.07.13.15.26.22.38.14.25.33.39.52.48-.06.21-.14.41-.2.62ZM393.44,70.02c-.26-.58-.53-1.15-.8-1.73.17-.33.35-.66.53-.98.81.27,1.69-.48,1.5-1.41-.05-.27-.13-.54-.2-.81.4-.62.81-1.24,1.24-1.85.5,0,1.04-.42.84-1-.01-.04-.03-.07-.04-.11,1.64-2.23,3.44-4.35,5.22-6.31-3.51,4.24-6.34,9.05-8.29,14.2ZM408.77,48.85c.23-.19.47-.37.7-.55-.23.18-.47.37-.7.55ZM419.22,42.44c-.59.26-1.17.53-1.74.81.58-.28,1.15-.56,1.74-.81ZM416.45,43.76c-.91.48-1.81.98-2.69,1.52.88-.54,1.77-1.05,2.69-1.52ZM413.45,45.47c-.81.51-1.59,1.05-2.37,1.6.77-.57,1.57-1.09,2.37-1.6ZM403.87,51.53c-2.67,2.68-5.48,5.83-7.89,9.22-.07-.18-.13-.36-.21-.53,2.33-3.12,5.05-6.06,8.09-8.68ZM376.52,58.06c-.38-.64-.72-1.28-1.03-1.91.01-.03.03-.05.05-.08.29.67.62,1.34.98,1.99ZM392.55,75.61c.94-2.03,1.94-4.03,3-5.99-1.14,2.53-1.94,4.9-3,5.99ZM426.68,41.87c.17-.12.15-.34.03-.45.92-.27,1.87-.5,2.83-.71-1.27.53-2.5,1.1-3.71,1.74.28-.2.57-.37.85-.58ZM433.44,39.23c-.12.04-.24.08-.36.12,0-.05,0-.09,0-.14.12,0,.24.02.36.02ZM418.81,40.85c-.16.07-.31.15-.47.22-1.76.6-3.52,1.31-5.24,2.1,1.86-.9,3.76-1.69,5.71-2.32ZM397.64,54.1c.46-.27.9-.56,1.34-.85-.58.65-1.13,1.32-1.64,2-.09-.34-.17-.67-.27-1,.19,0,.38-.04.57-.15ZM393.88,75.67c.45-1.14.96-2.28,1.54-3.41.1,0,.2-.02.26-.13,1.73-3.5,4.19-6.28,6.83-8.89-1.62,2.12-3.21,4.28-4.82,6.45-.4.53-2.38,3.98-3.81,5.98ZM431.3,39.98s0-.06,0-.09c.09,0,.18,0,.27-.01-.08.03-.18.07-.26.09,0,0,0,0-.01,0Z"/>\n  </g>\n</svg>\n';
@@ -16588,6 +16588,18 @@ var illustrationRegistry = [
 var illustrationsById = Object.fromEntries(
   illustrationRegistry.map((e) => [e.id, e])
 );
+
+// src/components/illustration/illustration-variants.ts
+var STATIC_ONLY_GROUP_RE = /<g\s[^>]*data-variant="static"[^>]*>[\s\S]*?<\/g>\s*/g;
+var ANIMATED_ONLY_GROUP_RE = /<g\s[^>]*data-variant="animated"[^>]*>[\s\S]*?<\/g>\s*/g;
+var ANIMATE_MOTION_BLOCK_RE = /<animateMotion\b[^>]*>[\s\S]*?<\/animateMotion>\s*/g;
+var SMIL_ELEMENT_RE = /<(?:animate|animateTransform|animateMotion|set)\b[^>]*\/>\s*/g;
+function selectIllustrationVariant(svg, animated) {
+  if (animated) {
+    return svg.replace(STATIC_ONLY_GROUP_RE, "");
+  }
+  return svg.replace(ANIMATED_ONLY_GROUP_RE, "").replace(ANIMATE_MOTION_BLOCK_RE, "").replace(SMIL_ELEMENT_RE, "");
+}
 function escapeAttr(value2) {
   return value2.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
 }
@@ -16601,7 +16613,7 @@ function buildSvgHtml(svgSource, options) {
   );
 }
 var Illustration = forwardRef(
-  function Illustration2({ type, size, alt, className, ...rest }, ref) {
+  function Illustration2({ type, size, alt, animated = false, className, ...rest }, ref) {
     const entry = type in illustrationsById ? illustrationsById[type] : void 0;
     const label = alt?.trim();
     const decorative = !label;
@@ -16619,13 +16631,13 @@ var Illustration = forwardRef(
     }
     const html = useMemo(() => {
       if (!entry) return "";
-      return buildSvgHtml(entry.svg, {
+      return buildSvgHtml(selectIllustrationVariant(entry.svg, animated), {
         decorative,
         alt: label,
         pixelW,
         pixelH
       });
-    }, [entry, decorative, label, pixelW, pixelH]);
+    }, [entry, animated, decorative, label, pixelW, pixelH]);
     if (!entry) return null;
     const fixedSquare = size != null;
     const fillParentWidth = !fixedSquare && entry.aspectRatio != null;
@@ -16813,7 +16825,9 @@ function SectionCard({
   truncateSecondaryText = true,
   actions,
   allowCollapse = true,
+  hideCollapseIcon = false,
   defaultOpen = true,
+  open: controlledOpen,
   size = "default",
   variant = "outline",
   color = "gray",
@@ -16829,16 +16843,20 @@ function SectionCard({
   const collapseButtonColor = variantStyles != null && isPresetColor(resolvedColor) ? resolvedColor : "gray";
   const primaryClass = variantStyles != null ? cn(s.primaryTypography, variantStyles.foreground) : s.primary;
   const secondaryClass = variantStyles != null ? cn(s.secondaryTypography, variantStyles.description) : s.secondary;
-  const [open, setOpen] = useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   useEffect(() => {
-    setOpen(defaultOpen);
+    setUncontrolledOpen(defaultOpen);
   }, [defaultOpen]);
+  const isOpenControlled = controlledOpen !== void 0;
+  const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
   const toggleLabel = typeof primaryText === "string" ? `Toggle ${primaryText}` : "Toggle section";
   const hasPrimaryText = hasRenderableContent(primaryText);
   const hasSecondaryText = hasRenderableContent(secondaryText);
   const hasHeaderText = hasPrimaryText || hasSecondaryText;
   const hasIcon = hasRenderableContent(icon);
-  const hasHeaderRight = hasRenderableContent(actions) || allowCollapse;
+  const showCollapseIcon = allowCollapse && !hideCollapseIcon;
+  const hasHeaderRight = hasRenderableContent(actions) || showCollapseIcon;
+  const headerMainPad = hasHeaderRight ? s.headerTriggerPad : s.pad;
   const isHeaderRequired = hasIcon || hasHeaderText || hasHeaderRight;
   const hasBody = hasRenderableContent(children);
   const headerMain = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -16921,7 +16939,7 @@ function SectionCard({
   ) });
   const headerRight = hasHeaderRight ? /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", s.headerRightPad), children: [
     actions,
-    allowCollapse ? chevronButton : null
+    showCollapseIcon ? chevronButton : null
   ] }) : null;
   const header = allowCollapse ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between", children: [
     /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -16931,7 +16949,7 @@ function SectionCard({
         className: cn(
           "section-card-header",
           "flex min-w-0 flex-1 items-center text-left rounded-md",
-          s.headerTriggerPad,
+          headerMainPad,
           s.gap,
           "cursor-pointer outline-none transition-colors hover:bg-muted/50",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
@@ -16949,7 +16967,7 @@ function SectionCard({
           "section-card-header",
           "flex min-w-0 flex-1 items-center",
           s.gap,
-          s.headerTriggerPad
+          headerMainPad
         ),
         children: headerMain
       }
@@ -16999,7 +17017,7 @@ function SectionCard({
         {
           open,
           onOpenChange: (next) => {
-            setOpen(next);
+            if (!isOpenControlled) setUncontrolledOpen(next);
             onOpenChange?.(next);
           },
           children: [
@@ -48650,32 +48668,77 @@ var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 var triggerSizeClasses = {
-  sm: "h-8 px-3 text-xs [&_[data-slot=select-icon]]:size-3.5",
-  default: "h-10 px-3.5 py-2 text-base md:text-sm [&_[data-slot=select-icon]]:size-4",
-  lg: "h-12 px-5 text-lg [&_[data-slot=select-icon]]:size-5"
+  sm: "h-8 px-3 text-xs",
+  default: "h-10 px-3.5 py-2 text-base md:text-sm",
+  lg: "h-12 px-5 text-lg"
 };
-var SelectTrigger = React10.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      triggerSizeClasses[size],
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
-        ChevronDown,
+var triggerIconClassName = "size-4 shrink-0 opacity-50";
+var SelectTrigger = React10.forwardRef(
+  ({
+    className,
+    children,
+    size = "default",
+    label,
+    required,
+    hintContent,
+    error,
+    errorContent,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const autoId = React10.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);
+    const errorId = errorContent ? `${triggerId}-error` : void 0;
+    const describedBy = [ariaDescribedBy, errorId].filter(Boolean).join(" ") || void 0;
+    const trigger = /* @__PURE__ */ jsxs(
+      SelectPrimitive.Trigger,
+      {
+        ref,
+        id: triggerId,
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        className: cn(
+          "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out data-[placeholder]:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          triggerSizeClasses[size],
+          hasError && "border-destructive focus-visible:ring-destructive",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              "data-slot": "select-icon",
+              className: triggerIconClassName
+            }
+          ) })
+        ]
+      }
+    );
+    if (!hasEnhancedProps) {
+      return trigger;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
+      label && /* @__PURE__ */ jsx(
+        FieldLabelRow,
         {
-          "data-slot": "select-icon",
-          className: "shrink-0 opacity-50"
+          htmlFor: triggerId,
+          label,
+          required,
+          hintContent
         }
-      ) })
-    ]
+      ),
+      !label && hintContent && /* @__PURE__ */ jsx("span", { className: fieldHintClassName, children: hintContent }),
+      trigger,
+      errorContent && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-sm text-destructive", children: errorContent })
+    ] });
   }
-));
+);
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 var SelectScrollUpButton = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
@@ -49493,7 +49556,11 @@ var FormLabel = React10.forwardRef(({ className, ...props }, ref) => {
     Label,
     {
       ref,
-      className: cn(error && "text-destructive", className),
+      className: cn(
+        "flex items-center gap-2",
+        error && "text-destructive",
+        className
+      ),
       htmlFor: formItemId,
       ...props
     }
@@ -55889,35 +55956,59 @@ function CalendarDayButton({
   );
 }
 Calendar.displayName = "Calendar";
-function DatePicker({
-  value: value2,
-  onChange,
-  defaultValue,
-  formatDate: formatDate2,
-  name: name2,
-  trigger,
-  placeholder = "Pick a date",
-  label,
-  size,
-  hideIcon = false,
-  disabled = false,
-  required = false,
-  rounded = false,
-  error,
-  errorContent,
-  startHelperContent,
-  endHelperContent,
-  hintContent,
-  calendarProps,
-  open: controlledOpen,
-  onOpenChange,
-  className
-}) {
+var FIELD_ICON_SIZE = 16;
+function FieldEndIcons({ icon, onClear, clearLabel = "Clear", className }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1.5", className), children: [
+    onClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": clearLabel,
+        onClick: onClear,
+        className: "pointer-events-auto rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsx(XIcon, { size: FIELD_ICON_SIZE, "aria-hidden": true })
+      }
+    ),
+    icon
+  ] });
+}
+function fieldEndPaddingClassName(hasClear, hasIcon) {
+  if (hasClear && hasIcon) return "pe-16";
+  if (hasClear || hasIcon) return "pe-9";
+  return "";
+}
+function DatePicker(props) {
+  const {
+    value: value2,
+    onChange,
+    defaultValue,
+    formatDate: formatDate2,
+    name: name2,
+    trigger,
+    placeholder = "Pick a date",
+    label,
+    size,
+    hideIcon = false,
+    disabled = false,
+    required = false,
+    rounded = false,
+    error,
+    errorContent,
+    startHelperContent,
+    endHelperContent,
+    hintContent,
+    clearable = false,
+    clearLabel = "Clear",
+    calendarProps,
+    open: controlledOpen,
+    onOpenChange,
+    className
+  } = props;
   const [uncontrolledDate, setUncontrolledDate] = useState(
     defaultValue
   );
   const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = value2 !== void 0;
+  const isControlled = "value" in props;
   const selectedDate = isControlled ? value2 : uncontrolledDate;
   const isOpenControlled = controlledOpen !== void 0;
   const isOpen = isOpenControlled ? controlledOpen : internalOpen;
@@ -55930,6 +56021,12 @@ function DatePicker({
     onChange?.(date);
     setOpen(false);
   };
+  const handleClear = (event) => {
+    event.stopPropagation();
+    if (!isControlled) setUncontrolledDate(void 0);
+    onChange?.(void 0);
+  };
+  const showClear = clearable && !disabled && selectedDate !== void 0;
   const displayValue = selectedDate ? (formatDate2 ?? ((d) => format(d, "PPP")))(selectedDate) : "";
   const inputTrigger = /* @__PURE__ */ jsx(
     Input,
@@ -55947,8 +56044,19 @@ function DatePicker({
       startHelperContent,
       endHelperContent,
       hintContent,
-      className: cn("cursor-pointer read-only:bg-background", !displayValue && "text-muted-foreground"),
-      endIcon: hideIcon ? void 0 : /* @__PURE__ */ jsx(CalendarIcon, { size: 16, className: "text-muted-foreground" })
+      className: cn(
+        "cursor-pointer read-only:bg-background",
+        fieldEndPaddingClassName(showClear, !hideIcon),
+        !displayValue && "text-muted-foreground"
+      ),
+      endIcon: showClear || !hideIcon ? /* @__PURE__ */ jsx(
+        FieldEndIcons,
+        {
+          onClear: showClear ? handleClear : void 0,
+          clearLabel,
+          icon: hideIcon ? void 0 : /* @__PURE__ */ jsx(CalendarIcon, { size: FIELD_ICON_SIZE, className: "text-muted-foreground" })
+        }
+      ) : void 0
     }
   );
   return /* @__PURE__ */ jsxs("div", { className: cn("flex-1", className), children: [
@@ -55966,7 +56074,7 @@ function DatePicker({
         PopoverContent,
         {
           align: "start",
-          className: "w-auto rounded-2xl p-1 shadow-lg",
+          className: "w-auto overflow-hidden rounded-2xl p-1 shadow-lg",
           children: /* @__PURE__ */ jsx(
             Calendar,
             {
@@ -55992,6 +56100,189 @@ function DatePicker({
   ] });
 }
 DatePicker.displayName = "DatePicker";
+var timeInputChromeClass = "appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";
+var TimePicker = React10.forwardRef(
+  ({ hideIcon = false, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        ...props,
+        type: "time",
+        className: cn(timeInputChromeClass, className),
+        endIcon: hideIcon ? void 0 : /* @__PURE__ */ jsx(ClockIcon, { size: 16, className: "text-muted-foreground" })
+      }
+    );
+  }
+);
+TimePicker.displayName = "TimePicker";
+var TIME_RE = /^([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d))?$/;
+var DEFAULT_TIME = "00:00";
+var DEFAULT_TIME_STEP_SECONDS = 60;
+function isValidTimeString(time2) {
+  return TIME_RE.test(time2);
+}
+function mergeDateAndTime(date, time2) {
+  const match = TIME_RE.exec(time2);
+  if (!match) return startOfDay(date);
+  return set(startOfDay(date), {
+    hours: Number(match[1]),
+    minutes: Number(match[2]),
+    seconds: match[3] === void 0 ? 0 : Number(match[3])
+  });
+}
+function formatTimeOfDay(date, timeStep) {
+  if (!isValid(date)) return "";
+  return format(date, timeStep < 60 ? "HH:mm:ss" : "HH:mm");
+}
+var OPEN_KEYS = /* @__PURE__ */ new Set(["Enter", " ", "ArrowDown"]);
+function DateTimePicker(props) {
+  const {
+    value: value2,
+    onChange,
+    defaultValue,
+    defaultTime = DEFAULT_TIME,
+    timeStep = DEFAULT_TIME_STEP_SECONDS,
+    clearable = false,
+    clearLabel = "Clear",
+    timeAriaLabel = "Time",
+    formatDate: formatDate2,
+    placeholder = "Pick date and time",
+    label,
+    size,
+    hideIcon = false,
+    disabled = false,
+    required = false,
+    rounded = false,
+    error,
+    errorContent,
+    hintContent,
+    calendarProps,
+    open: controlledOpen,
+    onOpenChange,
+    name: name2,
+    className
+  } = props;
+  const isControlled = "value" in props;
+  const [uncontrolledValue, setUncontrolledValue] = React10.useState(defaultValue);
+  const current = isControlled ? value2 : uncontrolledValue;
+  const isOpenControlled = controlledOpen !== void 0;
+  const [internalOpen, setInternalOpen] = React10.useState(false);
+  const isOpen = isOpenControlled ? controlledOpen : internalOpen;
+  const setOpen = (nextOpen) => {
+    if (!isOpenControlled) setInternalOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  };
+  const [draftTime, setDraftTime] = React10.useState(
+    () => current ? formatTimeOfDay(current, timeStep) : ""
+  );
+  const currentMs = current?.getTime();
+  React10.useEffect(() => {
+    if (currentMs === void 0) return;
+    setDraftTime(formatTimeOfDay(new Date(currentMs), timeStep));
+  }, [currentMs, timeStep]);
+  const commit = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onChange?.(next);
+  };
+  const handleDaySelect = (day) => {
+    if (!day) {
+      commit(void 0);
+      return;
+    }
+    const time2 = isValidTimeString(draftTime) ? draftTime : defaultTime;
+    commit(mergeDateAndTime(day, time2));
+  };
+  const handleTimeChange = (event) => {
+    const nextTime = event.target.value;
+    setDraftTime(nextTime);
+    if (current && isValidTimeString(nextTime)) {
+      commit(mergeDateAndTime(current, nextTime));
+    }
+  };
+  const handleTimeBlur = () => {
+    if (current && !isValidTimeString(draftTime)) {
+      setDraftTime(formatTimeOfDay(current, timeStep));
+    }
+  };
+  const handleClear = (event) => {
+    event.stopPropagation();
+    setDraftTime("");
+    commit(void 0);
+  };
+  const handleTriggerKeyDown = (event) => {
+    if (disabled || !OPEN_KEYS.has(event.key)) return;
+    event.preventDefault();
+    setOpen(true);
+  };
+  const displayValue = current ? (formatDate2 ?? ((d) => format(d, "PPP, p")))(current) : "";
+  const showClear = clearable && !disabled && current !== void 0;
+  const endIcon = /* @__PURE__ */ jsx(
+    FieldEndIcons,
+    {
+      onClear: showClear ? handleClear : void 0,
+      clearLabel,
+      icon: hideIcon ? void 0 : /* @__PURE__ */ jsx(CalendarIcon, { size: FIELD_ICON_SIZE, className: "text-muted-foreground" })
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex-1", className), children: [
+    /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          readOnly: true,
+          value: displayValue,
+          placeholder,
+          label,
+          size,
+          disabled,
+          required,
+          rounded,
+          error,
+          errorContent,
+          hintContent,
+          endIcon,
+          onKeyDown: handleTriggerKeyDown,
+          "aria-haspopup": "dialog",
+          className: cn(
+            "cursor-pointer read-only:bg-background",
+            fieldEndPaddingClassName(showClear, !hideIcon),
+            !displayValue && "text-muted-foreground"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-auto overflow-hidden rounded-2xl p-1 shadow-lg", children: [
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            selected: current,
+            onSelect: handleDaySelect,
+            defaultMonth: current,
+            showOutsideDays: true,
+            captionLayout: "dropdown",
+            ...calendarProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 pb-3 pt-3", children: /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            "aria-label": timeAriaLabel,
+            value: draftTime,
+            onChange: handleTimeChange,
+            onBlur: handleTimeBlur,
+            step: timeStep,
+            size,
+            disabled
+          }
+        ) })
+      ] })
+    ] }),
+    name2 && /* @__PURE__ */ jsx("input", { type: "hidden", name: name2, value: current?.toISOString() ?? "" })
+  ] });
+}
+DateTimePicker.displayName = "DateTimePicker";
 var PRESET_IDS = [
   "today",
   "yesterday",
@@ -56468,22 +56759,6 @@ function DateRangePicker({
   ] }) });
 }
 DateRangePicker.displayName = "DateRangePicker";
-var timeInputChromeClass = "appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";
-var TimePicker = React10.forwardRef(
-  ({ hideIcon = false, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref,
-        ...props,
-        type: "time",
-        className: cn(timeInputChromeClass, className),
-        endIcon: hideIcon ? void 0 : /* @__PURE__ */ jsx(ClockIcon, { size: 16, className: "text-muted-foreground" })
-      }
-    );
-  }
-);
-TimePicker.displayName = "TimePicker";
 var DEFAULT_DATE_FORMAT2 = "dd/MM/yyyy HH:mm:ss";
 var MS_THRESHOLD = 1e10;
 var RELATIVE_TIME_OUTER_CLASSES = "underline underline-offset-5 decoration-primary/20";
@@ -56505,7 +56780,7 @@ function computeRelativeTime(ms) {
   const years = Math.floor(months / 12);
   return `${years}y ago`;
 }
-function formatDate(date, format4) {
+function formatDate(date, format6) {
   const pad = (n) => String(n).padStart(2, "0");
   const tokens = {
     dd: pad(date.getDate()),
@@ -56515,7 +56790,7 @@ function formatDate(date, format4) {
     mm: pad(date.getMinutes()),
     ss: pad(date.getSeconds())
   };
-  return format4.replace(/yyyy|MM|dd|HH|mm|ss/g, (match) => tokens[match]);
+  return format6.replace(/yyyy|MM|dd|HH|mm|ss/g, (match) => tokens[match]);
 }
 function SimplifiedDate({ ts, dateFormat, className, relative = false }) {
   const ms = useMemo(() => ts != null ? normalizeTimestamp(ts) : null, [ts]);
@@ -56919,13 +57194,26 @@ function Pagination({
 
 // src/components/pagination/pagination.props.ts
 var DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25];
-function CopiableText({ text: text2, actions, alwaysShowActions = false, className }) {
+var COPIABLE_TEXT_SIZE_STYLES = {
+  sm: { row: "min-h-6", action: "size-5" },
+  default: { row: "min-h-7", action: "size-6" },
+  lg: { row: "min-h-8", action: "size-7" }
+};
+function CopiableText({
+  text: text2,
+  actions,
+  alwaysShowActions = false,
+  size = "default",
+  className
+}) {
   const content3 = typeof text2 === "number" ? String(text2) : text2;
+  const sizeStyles9 = COPIABLE_TEXT_SIZE_STYLES[size];
   return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
-        "relative inline-flex min-h-7 min-w-0 max-w-full items-center overflow-hidden group/copiable-text",
+        "relative inline-flex min-w-0 max-w-full items-center overflow-hidden group/copiable-text",
+        sizeStyles9.row,
         className
       ),
       children: [
@@ -56945,7 +57233,7 @@ function CopiableText({ text: text2, actions, alwaysShowActions = false, classNa
                 CopyButton,
                 {
                   content: content3,
-                  className: "size-6",
+                  className: sizeStyles9.action,
                   variant: "outline",
                   size: "sm",
                   hoverScale: 1,
@@ -57682,7 +57970,7 @@ var StatusBadge = React10.forwardRef(
         ),
         children: [
           isLoading ? /* @__PURE__ */ jsx(Spinner, { size: iconPx, "aria-hidden": true }) : Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: iconPx, "aria-hidden": true }) : null,
-          label
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label })
         ]
       }
     ) });
@@ -59459,10 +59747,19 @@ function ConfirmationDialog({
   confirmButtonVariant = "default",
   cancelButtonColor,
   confirmButtonColor = "error",
+  cancelButtonStartIcon,
+  confirmButtonEndIcon,
   isLoading = false,
-  error = null
+  error = null,
+  open,
+  onOpenChange
 }) {
-  const [open, setOpen] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isOpen = open ?? uncontrolledOpen;
+  const setOpen = (next) => {
+    setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
   const handleConfirm = async () => {
     try {
       await onConfirm();
@@ -59470,8 +59767,8 @@ function ConfirmationDialog({
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs(Dialog2, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(DialogTrigger2, { asChild: true, children }),
+  return /* @__PURE__ */ jsxs(Dialog2, { open: isOpen, onOpenChange: setOpen, children: [
+    children != null && /* @__PURE__ */ jsx(DialogTrigger2, { asChild: true, children }),
     /* @__PURE__ */ jsxs(DialogContent2, { showCloseButton: false, children: [
       /* @__PURE__ */ jsxs(DialogHeader2, { children: [
         /* @__PURE__ */ jsx(DialogTitle2, { className: "leading-relaxed", children: title }),
@@ -59489,6 +59786,7 @@ function ConfirmationDialog({
             fullWidth: false,
             className: "text-foreground",
             disabled: isLoading,
+            startIcon: cancelButtonStartIcon,
             children: cancelButtonText
           }
         ) }),
@@ -59501,6 +59799,7 @@ function ConfirmationDialog({
             color: confirmButtonColor,
             onClick: handleConfirm,
             loading: isLoading,
+            endIcon: confirmButtonEndIcon,
             children: confirmButtonText
           }
         )
@@ -59921,34 +60220,50 @@ function Code({
     }
   );
 }
+var MONOSPACE_SIZE_STYLES = {
+  sm: { title: "text-xs", value: "text-xs", action: "size-5", gap: "gap-1.5" },
+  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(
-  function MonospaceContent2({ title, value: value2, color = "info", mask: mask2 = false, allowUnmask = true, className }, ref) {
+  function MonospaceContent2({ title, value: value2, color = "info", mask: mask2 = false, allowUnmask = true, size = "default", className }, ref) {
     const [revealed, setRevealed] = React10.useState(false);
     const canUnmask = mask2 && allowUnmask;
     const masked = mask2 && !(canUnmask && revealed);
+    const sizeStyles9 = MONOSPACE_SIZE_STYLES[size];
     const unmaskToggle = canUnmask ? /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         "aria-pressed": !masked,
         onClick: () => setRevealed((prev) => !prev),
-        className: cn(buttonVariants$1({ variant: "outline", size: "sm" }), "size-6"),
+        className: cn(buttonVariants$1({ variant: "outline", size: "sm" }), sizeStyles9.action),
         children: [
           masked ? /* @__PURE__ */ jsx(Eye, { "aria-hidden": true }) : /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: masked ? "Show value" : "Hide value" })
         ]
       }
     ) : void 0;
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-w-0 max-w-full flex-col gap-2 overflow-hidden", className), children: [
-      title != null && (typeof title === "string" ? /* @__PURE__ */ jsx("div", { className: cn(inputLabelClassName, "title"), children: title }) : /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", as: "div", className: cn(inputLabelClassName, "title"), children: title })),
-      /* @__PURE__ */ jsx(Alert, { variant: "soft", color, type: "info", hideIcon: true, className: cn("min-w-0 max-w-full", "content"), children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-w-0 max-w-full flex-col overflow-hidden", sizeStyles9.gap, className), children: [
+      title != null && (typeof title === "string" ? /* @__PURE__ */ jsx("div", { className: cn(inputLabelClassName, sizeStyles9.title, "title"), children: title }) : /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "subtitle2",
+          as: "div",
+          className: cn(inputLabelClassName, sizeStyles9.title, "title"),
+          children: title
+        }
+      )),
+      /* @__PURE__ */ jsx(Alert, { variant: "soft", color, type: "info", hideIcon: true, size, className: cn("min-w-0 max-w-full", "content"), children: /* @__PURE__ */ jsx(
         CopiableText,
         {
           text: value2,
+          size,
           actions: unmaskToggle,
           alwaysShowActions: mask2,
           className: cn(
             "w-full min-w-0 max-w-full font-mono tabular-nums",
+            sizeStyles9.value,
             // `-webkit-text-security` is inherited, so it reaches the text span while the
             // real value stays intact for the copy button.
             masked && "select-none [-webkit-text-security:disc]"
@@ -60417,14 +60732,17 @@ function wrapTypedValue(value2, rowMeta, key2, opts, effectiveType) {
         {
           variant: "solid",
           color: "gray",
-          className: "w-fit max-w-full self-start text-sm font-medium",
+          className: cn(
+            "w-fit max-w-full self-start font-medium",
+            DYNAMIC_LIST_SIZE_STYLES[opts.size].valueTypography
+          ),
           children: base
         }
       );
     case "info":
-      return /* @__PURE__ */ jsx(Alert, { variant: "soft", color: "info", type: "info", children: base });
+      return /* @__PURE__ */ jsx(Alert, { variant: "soft", color: "info", type: "info", size: opts.size, children: base });
     case "error":
-      return /* @__PURE__ */ jsx(Alert, { variant: "soft", color: "error", type: "error", children: base });
+      return /* @__PURE__ */ jsx(Alert, { variant: "soft", color: "error", type: "error", size: opts.size, children: base });
     case "mono":
       if (rowMeta?.valueRender) {
         return base;
@@ -60449,7 +60767,8 @@ function wrapTypedValue(value2, rowMeta, key2, opts, effectiveType) {
         MonospaceContent,
         {
           value: resolveMonoString(value2, rowMeta, key2),
-          color: "gray"
+          color: "gray",
+          size: opts.size
         }
       );
     case "url":
@@ -60536,7 +60855,7 @@ function DynamicList({
 }) {
   const keyWidthPct = Math.min(100, Math.max(1, keyWidth));
   const valueWidthPct = 100 - keyWidthPct;
-  const resolveOpts = { useIconsForBoolean };
+  const resolveOpts = { useIconsForBoolean, size };
   const sizeStyles9 = DYNAMIC_LIST_SIZE_STYLES[size];
   if (simple) {
     return /* @__PURE__ */ jsx(
@@ -61546,6 +61865,7 @@ function OverflowBadgeList({
   icon: Icon2,
   badgeColor,
   badgeVariant = "outline",
+  badgeSize = "default",
   maxBadgesToShow = 1,
   noneLabel,
   andMoreLabel,
@@ -61559,16 +61879,15 @@ function OverflowBadgeList({
   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;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-wrap items-center gap-2", className), children: [
-    visibleItems.map((item, index2) => /* @__PURE__ */ jsxs(
-      Badge,
+    visibleItems.map((item, index2) => /* @__PURE__ */ jsx(
+      StatusBadge,
       {
+        label: item,
+        icon: index2 === 0 ? Icon2 : void 0,
         variant: badgeVariant,
         color: badgeColor,
-        className: "inline-flex max-w-[min(100%,12rem)] items-center gap-1 font-normal text-xs",
-        children: [
-          index2 === 0 && Icon2 ? /* @__PURE__ */ jsx(Icon2, { className: "h-2.5 w-2.5 shrink-0", "aria-hidden": true }) : null,
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item })
-        ]
+        size: badgeSize,
+        className: "max-w-[12rem]"
       },
       `${item}-${index2}`
     )),
@@ -67969,4 +68288,4 @@ lottie-react/build/index.es.js:
   (*! goToAndStop must be relative to the start of the current segment *)
 */
 
-export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };
+export { Accordion3 as Accordion, AdvancedSearchBox, Alert, AnimatedCard, AnimatedRainmakerLogo, AreaChart, AsyncCombobox, AsyncMultiSelect, BarChart, BasicDetailsCard, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, Calendar, CalendarDayButton, Carousel2 as Carousel, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox2 as Checkbox, CircularProgress, Code, CollapsibleCard, ComposedChart, ConfirmationDialog, ContentContainer, CopiableText, DEFAULT_CHART_SERIES_COLORS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, DatePicker, DateRangePicker, DateTimePicker, DeviceIcon, Dialog2 as Dialog, DialogClose2 as DialogClose, DialogContent2 as DialogContent, DialogDescription2 as DialogDescription, DialogFooter2 as DialogFooter, DialogHeader2 as DialogHeader, DialogTitle2 as DialogTitle, DialogTrigger2 as DialogTrigger, DonutChart, DynamicList, FileInput, FileUpload, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FullSizeError, FullscreenDialog, IconAvatar, IconTextActionCard, Illustration, InlineError, InputOTP, InputOTPSeparator, KeyValueManager, LineChart, ListDetails, LottieAnimationContainer, MarkdownContent, MonospaceContent, NavBar, OverflowBadgeList, PRESET_IDS, PRESET_LABELS, PageContainer, PageContainerSkeleton, Pagination, PopCollectionItem, PreviewCard2 as PreviewCard, PreviewCardBackdrop2 as PreviewCardBackdrop, PreviewCardPanel, PreviewCardTrigger2 as PreviewCardTrigger, ProgressBar, RadioGroup3 as RadioGroup, RequirementList, ScrollableSections, SearchBox, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCardList, SimpleCard, SimpleClickableCard, SimpleInfoCard, SimpleList, SimplePaginatedList, SimplifiedDate, Spinner, StatCard, StatusBadge, StatusCardList, Switch2 as Switch, TYPOGRAPHY_VARIANTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs2 as Tabs, TabsContent2 as TabsContent, TabsContents2 as TabsContents, TabsList2 as TabsList, TabsTrigger2 as TabsTrigger, Tag, TagInput, Textarea, TimePicker, Toast, Toaster, TogglableItemsList, ToggleGroup2 as ToggleGroup, ToggleGroupItem2 as ToggleGroupItem, TransferList, TreemapChart, Typography, UserTypeBadge, VerificationInProgress, VerticalStepper, animatedCardAnimations, animatedCardTypeKeys, buildSeriesChartConfig, computeDateRange, getChartSeriesColor, illustrationRegistry, illustrationsById, no_data_card_default, parseSvgViewBoxAspectRatio, statusBadgeSizeVariants, toast, typographyDefaultElement, typographyVariantClasses, useFormField, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };