@espressif/dashboard-ui-components 1.4.0 → 1.6.0

package/dist/{chunk-XMEZ2BP6.js → chunk-IYMCZTJ5.js}

@@ -1,9 +1,9 @@
-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';
+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 { Switch as Switch$1, ToggleGroup as ToggleGroup$1, Dialog as Dialog$1, Accordion as Accordion$1 } from 'radix-ui';
@@ -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, sub, endOfMonth, startOfMonth, 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
     }
@@ -52264,6 +52331,12 @@ var stateVisuals = {
     titleClass: "text-success",
     descriptionClass: "text-success/80"
   },
+  warning: {
+    avatarColor: "warning",
+    endIconClass: "text-warning",
+    titleClass: "text-warning",
+    descriptionClass: "text-warning/80"
+  },
   error: {
     avatarColor: "error",
     endIconClass: "text-error",
@@ -52285,6 +52358,7 @@ var stateVisuals = {
 };
 var stateSurfaceCssVar = {
   success: "--color-success",
+  warning: "--color-warning",
   error: "--color-error",
   in_progress: "--color-primary",
   not_started: "--color-gray"
@@ -52397,6 +52471,8 @@ function StatusEndIndicator({
   switch (state) {
     case "success":
       return /* @__PURE__ */ jsx(CheckCircle2, { className: cls, "aria-hidden": true });
+    case "warning":
+      return /* @__PURE__ */ jsx(TriangleAlert, { className: cls, "aria-hidden": true });
     case "error":
       return /* @__PURE__ */ jsx(XCircle, { className: cls, "aria-hidden": true });
     case "in_progress":
@@ -52715,15 +52791,15 @@ var Spinner = React10.forwardRef(function Spinner2({
   "aria-labelledby": ariaLabelledby,
   ...rest
 }, ref) {
-  const resolved = color != null ? resolveColor(color, "text") : void 0;
+  const resolved2 = color != null ? resolveColor(color, "text") : void 0;
   const ariaLabelResolved = ariaLabelledby != null ? void 0 : ariaLabel !== void 0 ? ariaLabel : "Loading";
   return /* @__PURE__ */ jsx(
     LoaderCircle,
     {
       ref,
       ...rest,
-      className: cn("animate-spin", resolved?.className, className),
-      style: { ...resolved?.style, ...style },
+      className: cn("animate-spin", resolved2?.className, className),
+      style: { ...resolved2?.style, ...style },
       size: size ?? "1em",
       "aria-label": ariaLabelResolved,
       "aria-labelledby": ariaLabelledby
@@ -55889,35 +55965,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 +56030,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 +56053,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 +56083,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,7 +56109,191 @@ 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 = [
+  // Calendar periods
   "today",
   "yesterday",
   "this-week",
@@ -56001,10 +56302,16 @@ var PRESET_IDS = [
   "last-month",
   "this-year",
   "last-year",
+  // Trailing ranges, shortest first. A rolling preset (ends now) precedes
+  // the day-snapped preset of the same length.
+  "last-1-hour",
+  "last-24-hours",
   "last-1-day",
+  "past-7-days",
   "last-7-days",
   "last-14-days",
   "last-15-days",
+  "past-30-days",
   "last-30-days",
   "last-4-weeks",
   "last-90-days",
@@ -56022,10 +56329,14 @@ var PRESET_LABELS = {
   "last-month": "Last month",
   "this-year": "This year",
   "last-year": "Last year",
+  "last-1-hour": "Last 1 hour",
+  "last-24-hours": "Last 24 hours",
   "last-1-day": "Last 1 day",
+  "past-7-days": "Past 7 days",
   "last-7-days": "Last 7 days",
   "last-14-days": "Last 14 days",
   "last-15-days": "Last 15 days",
+  "past-30-days": "Past 30 days",
   "last-30-days": "Last 30 days",
   "last-4-weeks": "Last 4 weeks",
   "last-90-days": "Last 90 days",
@@ -56034,6 +56345,12 @@ var PRESET_LABELS = {
   "last-1-year": "Last 1 year",
   "last-5-years": "Last 5 years"
 };
+var ROLLING_PRESET_IDS = [
+  "last-1-hour",
+  "last-24-hours",
+  "past-7-days",
+  "past-30-days"
+];
 function computeDateRange(id) {
   const now = /* @__PURE__ */ new Date();
   switch (id) {
@@ -56110,6 +56427,14 @@ function computeDateRange(id) {
       return { startDate: startOfMonth(sub(now, { years: 1 })), endDate: endOfMonth(now) };
     case "last-5-years":
       return { startDate: startOfMonth(sub(now, { years: 5 })), endDate: endOfMonth(now) };
+    case "last-1-hour":
+      return { startDate: sub(now, { hours: 1 }), endDate: now };
+    case "last-24-hours":
+      return { startDate: sub(now, { hours: 24 }), endDate: now };
+    case "past-7-days":
+      return { startDate: sub(now, { days: 7 }), endDate: now };
+    case "past-30-days":
+      return { startDate: sub(now, { days: 30 }), endDate: now };
   }
 }
 var DEFAULT_DATE_FORMAT = "dd MMM yyyy";
@@ -56145,6 +56470,9 @@ function DateRangePicker({
   selectedPresetId,
   selectedStartDate,
   selectedEndDate,
+  clearable = false,
+  clearLabel = "Clear",
+  onClear,
   trigger,
   placeholder = "Select date range",
   label,
@@ -56286,7 +56614,12 @@ function DateRangePicker({
     if (lockEndToToday) return;
     setEndInputValue(draftRange.endDate ? format(draftRange.endDate, dateFormat) : "");
   };
+  const handleClear = () => {
+    onClear?.();
+    handleOpenChange(false);
+  };
   const displayValue = selectedPresetId ? resolveLabel(selectedPresetId) : "";
+  const hasSelection = !!(selectedPresetId || selectedStartDate);
   const inputTrigger = /* @__PURE__ */ jsx(
     Input,
     {
@@ -56382,6 +56715,22 @@ function DateRangePicker({
                   ]
                 }
               )
+            ] }),
+            clearable && hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "mx-1 my-1 h-px bg-border" }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  onMouseEnter: () => setShowCalendar(false),
+                  className: "flex w-full items-center justify-between gap-6 px-3 py-1.5 text-left text-sm text-muted-foreground hover:bg-accent",
+                  children: [
+                    clearLabel,
+                    /* @__PURE__ */ jsx(XIcon, { className: "size-4 shrink-0" })
+                  ]
+                }
+              )
             ] })
           ] }),
           allowCustom && showCalendar && /* @__PURE__ */ jsx(
@@ -56468,22 +56817,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 +56838,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 +56848,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]);
@@ -57176,17 +57509,21 @@ function DataTable({
     () => enableRowSelection ? [selectColumn, ...columns] : columns,
     [enableRowSelection, selectColumn, columns]
   );
+  const pagination = useMemo(() => ({ pageIndex: 0, pageSize }), [pageSize]);
   const table = useReactTable({
     data: data2,
     columns: tableColumns,
     state: {
       columnVisibility,
-      pagination: {
-        pageIndex: 0,
-        pageSize
-      },
+      pagination,
       ...rowSelection !== void 0 && { rowSelection }
     },
+    // With `manualPagination` unset, TanStack resets pageIndex (an internal
+    // setState + re-render) whenever `data` changes identity. pageIndex is pinned
+    // to 0 here, so that reset is a no-op; with consumers that pass a fresh array
+    // each render (`data?.items ?? []`) it can loop into "Maximum update depth
+    // exceeded".
+    autoResetPageIndex: false,
     onColumnVisibilityChange: setColumnVisibility,
     enableRowSelection,
     enableMultiRowSelection,
@@ -57576,8 +57913,8 @@ function DeviceIcon({ type, size = 18, color, fallback: Fallback, className }) {
   const Matched = matchDevice(type);
   const Icon2 = Matched ?? Fallback;
   if (!Icon2) return null;
-  const resolved = color ? resolveColor(color, "text") : void 0;
-  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex", resolved?.className, className), style: resolved?.style, children: /* @__PURE__ */ jsx(Icon2, { size }) });
+  const resolved2 = color ? resolveColor(color, "text") : void 0;
+  return /* @__PURE__ */ jsx("span", { className: cn("inline-flex", resolved2?.className, className), style: resolved2?.style, children: /* @__PURE__ */ jsx(Icon2, { size }) });
 }
 var userTypeBadgeRegistry = {
   admin: {
@@ -57695,7 +58032,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 })
         ]
       }
     ) });
@@ -59754,6 +60091,8 @@ function getHighlighter() {
 function normalizeLang(lang) {
   return LANG_ALIASES[lang.toLowerCase()] ?? lang;
 }
+
+// src/core/animate-ui/primitives/animate/escape-html.ts
 function escapeHtml(input) {
   return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -59881,6 +60220,33 @@ function CodeBlock({
     }
   );
 }
+function CodeHeader({ icon: Icon2, fileName, copyContent, copyLabel = "Copy", actions }) {
+  const copyButton = copyContent !== void 0 && /* @__PURE__ */ jsx(
+    CopyButton,
+    {
+      content: copyContent,
+      size: "sm",
+      variant: "ghost",
+      "aria-label": copyLabel,
+      title: copyLabel,
+      className: cn(actions == null && "ml-auto", "w-auto h-auto p-2 -mr-2")
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "shrink-0 gap-x-2 border-b border-border/75 dark:border-border/50 text-sm flex text-muted-foreground items-center px-4 w-full h-10 font-medium",
+      children: [
+        Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "size-4" }),
+        fileName,
+        actions != null ? /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+          actions,
+          copyButton
+        ] }) : copyButton
+      ]
+    }
+  );
+}
 function Code({
   className,
   code,
@@ -59907,23 +60273,12 @@ function Code({
       style: { height: height2, ...style },
       ...props,
       children: [
-        showHeader && /* @__PURE__ */ jsxs(
-          "div",
+        showHeader && /* @__PURE__ */ jsx(
+          CodeHeader,
           {
-            className: "shrink-0 gap-x-2 border-b border-border/75 dark:border-border/50 text-sm flex text-muted-foreground items-center px-4 w-full h-10 font-medium",
-            children: [
-              Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "size-4" }),
-              fileName,
-              showCopyButton && /* @__PURE__ */ jsx(
-                CopyButton,
-                {
-                  content: code,
-                  size: "sm",
-                  variant: "ghost",
-                  className: "ml-auto w-auto h-auto p-2 -mr-2"
-                }
-              )
-            ]
+            icon: Icon2,
+            fileName,
+            copyContent: showCopyButton ? code : void 0
           }
         ),
         lang && /* @__PURE__ */ jsx(
@@ -60742,14 +61097,79 @@ function DynamicList({
     );
   }) });
 }
+function KeyValueManagerField({
+  field,
+  label,
+  value: value2,
+  meta,
+  error,
+  errorMessage,
+  selectPlaceholder,
+  onChange
+}) {
+  const errorContent = error ? errorMessage : void 0;
+  if (meta?.options) {
+    return (
+      // Remounted when cleared: a Radix Select can't show its placeholder again once it held a value.
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: value2 || void 0,
+          onValueChange: onChange,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                label,
+                size: "sm",
+                error,
+                errorContent,
+                children: /* @__PURE__ */ jsx(SelectValue, { placeholder: selectPlaceholder })
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: meta.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option, children: option }, option)) })
+          ]
+        },
+        value2 ? "selected" : "empty"
+      )
+    );
+  }
+  if (field === "key") {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        label,
+        value: value2,
+        charLimit: meta?.maxLength,
+        error,
+        size: "sm",
+        errorContent,
+        onChange: (e) => onChange(e.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      label,
+      value: value2,
+      charLimit: meta?.maxLength,
+      error,
+      errorContent,
+      onChange: (e) => onChange(e.target.value),
+      size: "sm"
+    }
+  );
+}
 
 // src/components/key-value-manager/key-value-manager.utils.ts
 function validateField(value2, meta) {
   if (!value2.trim()) return false;
   if (meta?.maxLength != null && value2.length > meta.maxLength) return false;
+  if (meta?.options && !meta.options.includes(value2)) return false;
   if (meta?.regex) {
     try {
-      if (!new RegExp(meta.regex).test(value2)) return false;
+      if (!new RegExp(meta.regex, meta.regexFlags).test(value2)) return false;
     } catch {
     }
   }
@@ -60838,27 +61258,29 @@ function KeyValueManagerAddPopover({
     ) }),
     /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-80 space-y-4", children: [
       /* @__PURE__ */ jsx(
-        Input,
+        KeyValueManagerField,
         {
+          field: "key",
           label: labels.keyLabel,
           value: draftKey,
-          charLimit: meta?.key?.maxLength,
+          meta: meta?.key,
           error: keyError,
-          size: "sm",
-          errorContent: keyError ? labels.keyErrorMessage : void 0,
-          onChange: (e) => handleFieldChange("key", e.target.value)
+          errorMessage: labels.keyErrorMessage,
+          selectPlaceholder: labels.selectPlaceholder,
+          onChange: (value2) => handleFieldChange("key", value2)
         }
       ),
       /* @__PURE__ */ jsx(
-        Textarea,
+        KeyValueManagerField,
         {
+          field: "value",
           label: labels.valueLabel,
           value: draftValue,
-          charLimit: meta?.value?.maxLength,
+          meta: meta?.value,
           error: valueError,
-          errorContent: valueError ? labels.valueErrorMessage : void 0,
-          onChange: (e) => handleFieldChange("value", e.target.value),
-          size: "sm"
+          errorMessage: labels.valueErrorMessage,
+          selectPlaceholder: labels.selectPlaceholder,
+          onChange: (value2) => handleFieldChange("value", value2)
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -61021,7 +61443,8 @@ var STATIC_DEFAULT_LABELS = {
   valueLabel: "Value",
   actionLabel: "Action",
   emptyItems: "No items",
-  emptySearch: "No matches"
+  emptySearch: "No matches",
+  selectPlaceholder: "Select"
 };
 function resolveKeyValueManagerLabels(labels) {
   const merged = { ...STATIC_DEFAULT_LABELS, ...labels };
@@ -61590,6 +62013,7 @@ function OverflowBadgeList({
   icon: Icon2,
   badgeColor,
   badgeVariant = "outline",
+  badgeSize = "default",
   maxBadgesToShow = 1,
   noneLabel,
   andMoreLabel,
@@ -61603,16 +62027,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}`
     )),
@@ -67833,6 +68256,506 @@ var SimpleInfoCard = React10.forwardRef(
   }
 );
 SimpleInfoCard.displayName = "SimpleInfoCard";
+
+// src/components/code-editor/code-editor.utils.ts
+function getLineStart(value2, pos) {
+  return value2.lastIndexOf("\n", pos - 1) + 1;
+}
+function getLineEnd(value2, pos) {
+  const next = value2.indexOf("\n", pos);
+  return next === -1 ? value2.length : next;
+}
+function getLineIndent(value2, pos) {
+  const lineStart = getLineStart(value2, pos);
+  return /^[ \t]*/.exec(value2.slice(lineStart, pos))[0];
+}
+function isMultiLineSelection(value2, start, end) {
+  return value2.slice(start, end).includes("\n");
+}
+function getSelectedLineStarts(value2, start, end) {
+  const lastPos = end > start && value2[end - 1] === "\n" ? end - 1 : end;
+  const starts = [getLineStart(value2, start)];
+  for (let i = value2.indexOf("\n", starts[0]); i !== -1 && i < lastPos; i = value2.indexOf("\n", i + 1)) {
+    starts.push(i + 1);
+  }
+  return starts;
+}
+function insertTab(value2, start, end, tabSize) {
+  const column = start - getLineStart(value2, start);
+  const text2 = " ".repeat(tabSize - column % tabSize);
+  const caret = start + text2.length;
+  return { start, end, text: text2, selectionStart: caret, selectionEnd: caret };
+}
+function indentLines(value2, start, end, tabSize) {
+  const lineStarts = getSelectedLineStarts(value2, start, end);
+  const blockStart = lineStarts[0];
+  const blockEnd = getLineEnd(value2, lineStarts[lineStarts.length - 1]);
+  const indent = " ".repeat(tabSize);
+  const added = lineStarts.map(
+    (lineStart) => lineStart === getLineEnd(value2, lineStart) ? 0 : tabSize
+  );
+  const lines = value2.slice(blockStart, blockEnd).split("\n");
+  const text2 = lines.map((line, i) => added[i] ? indent + line : line).join("\n");
+  const mapOffset = (pos, keepAtLineStart) => {
+    let shift = 0;
+    lineStarts.forEach((lineStart, i) => {
+      if (lineStart < pos || lineStart === pos && !keepAtLineStart) shift += added[i];
+    });
+    return pos + shift;
+  };
+  return {
+    start: blockStart,
+    end: blockEnd,
+    text: text2,
+    // A selection starting at column 0 keeps starting there, so the new indentation is selected too.
+    selectionStart: mapOffset(start, true),
+    selectionEnd: mapOffset(end, false)
+  };
+}
+function outdentLines(value2, start, end, tabSize) {
+  const lineStarts = getSelectedLineStarts(value2, start, end);
+  const blockStart = lineStarts[0];
+  const blockEnd = getLineEnd(value2, lineStarts[lineStarts.length - 1]);
+  const lines = value2.slice(blockStart, blockEnd).split("\n");
+  const removed = lines.map(
+    (line) => line.startsWith("	") ? 1 : Math.min(tabSize, /^ */.exec(line)[0].length)
+  );
+  const text2 = lines.map((line, i) => line.slice(removed[i])).join("\n");
+  const mapOffset = (pos) => {
+    let shift = 0;
+    lineStarts.forEach((lineStart, i) => {
+      if (lineStart <= pos) shift += Math.min(removed[i], pos - lineStart);
+    });
+    return pos - shift;
+  };
+  return {
+    start: blockStart,
+    end: blockEnd,
+    text: text2,
+    selectionStart: mapOffset(start),
+    selectionEnd: mapOffset(end)
+  };
+}
+function insertNewline(value2, start, end) {
+  const text2 = "\n" + getLineIndent(value2, start);
+  const caret = start + text2.length;
+  return { start, end, text: text2, selectionStart: caret, selectionEnd: caret };
+}
+function applyTextEdit(value2, edit) {
+  return value2.slice(0, edit.start) + edit.text + value2.slice(edit.end);
+}
+function formatJson(value2, tabSize) {
+  return JSON.stringify(JSON.parse(value2), null, tabSize);
+}
+function getBuiltInFormatter(lang) {
+  return lang.toLowerCase() === "json" ? formatJson : void 0;
+}
+function applyEdit(el, edit) {
+  const current = el.value;
+  const expected = applyTextEdit(current, edit);
+  if (expected === current) {
+    el.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+    return;
+  }
+  if (el.ownerDocument.activeElement !== el) el.focus({ preventScroll: true });
+  el.setSelectionRange(edit.start, edit.end);
+  let applied = false;
+  try {
+    applied = typeof document.execCommand === "function" && document.execCommand(edit.text ? "insertText" : "delete", false, edit.text);
+  } catch {
+    applied = false;
+  }
+  if (!applied || el.value !== expected) {
+    if (el.value !== current) el.value = current;
+    el.setRangeText(edit.text, edit.start, edit.end, "end");
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  el.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+}
+function useCodeEditorKeys({ tabSize, onKeyDown, onBlur }) {
+  const tabReleasedRef = React10.useRef(false);
+  const handleKeyDown = React10.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+      const el = event.currentTarget;
+      if (el.readOnly || el.disabled) return;
+      if (event.key === "Escape") {
+        tabReleasedRef.current = true;
+        return;
+      }
+      if (event.key === "Shift") return;
+      const released = tabReleasedRef.current;
+      tabReleasedRef.current = false;
+      const { value: value2, selectionStart: start, selectionEnd: end } = el;
+      if (event.key === "Tab") {
+        if (released || event.altKey || event.ctrlKey || event.metaKey) return;
+        event.preventDefault();
+        if (event.shiftKey) {
+          applyEdit(el, outdentLines(value2, start, end, tabSize));
+        } else if (isMultiLineSelection(value2, start, end)) {
+          applyEdit(el, indentLines(value2, start, end, tabSize));
+        } else {
+          applyEdit(el, insertTab(value2, start, end, tabSize));
+        }
+        return;
+      }
+      if (event.key === "Enter" && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+        applyEdit(el, insertNewline(value2, start, end));
+      }
+    },
+    [onKeyDown, tabSize]
+  );
+  const handleBlur = React10.useCallback(
+    (event) => {
+      tabReleasedRef.current = false;
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+  return { onKeyDown: handleKeyDown, onBlur: handleBlur };
+}
+var DEFAULT_CODE_EDITOR_THEMES = {
+  light: "everforest-light",
+  dark: "everforest-dark"
+};
+var PLAIN_LANGS = /* @__PURE__ */ new Set(["text", "plaintext", "txt", "plain"]);
+var TRAILING_LINE = "\u200B";
+var transformer = {
+  // Shiki makes its `<pre>` focusable; this one sits in an `aria-hidden` layer.
+  pre(node) {
+    delete node.properties.tabindex;
+  },
+  code(node) {
+    node.children.push({ type: "text", value: TRAILING_LINE });
+  }
+};
+function plainHtml(value2) {
+  return `<pre><code>${escapeHtml(value2)}${TRAILING_LINE}</code></pre>`;
+}
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key2, message, error) {
+  if (warned.has(key2)) return;
+  warned.add(key2);
+  console.warn(`[dashboard-ui-components] ${message}`, ...error ? [error] : []);
+}
+var resolved = /* @__PURE__ */ new WeakMap();
+function useHighlightedHtml(value2, { lang, theme, themes, maxHighlightLength }) {
+  const [highlighter, setHighlighter] = React10.useState(() => {
+    const promise = getHighlighter();
+    return resolved.get(promise) ?? null;
+  });
+  React10.useEffect(() => {
+    if (highlighter) return;
+    let active2 = true;
+    const promise = getHighlighter();
+    promise.then(
+      (loaded) => {
+        resolved.set(promise, loaded);
+        if (active2) setHighlighter(loaded);
+      },
+      (error) => warnOnce("load", "Syntax highlighter failed to load; showing plain text.", error)
+    );
+    return () => {
+      active2 = false;
+    };
+  }, [highlighter]);
+  const deferredValue = React10.useDeferredValue(value2);
+  const { light, dark } = themes;
+  return React10.useMemo(() => {
+    if (!highlighter || deferredValue.length > maxHighlightLength) {
+      return plainHtml(deferredValue);
+    }
+    const normalizedLang = normalizeLang(lang);
+    if (!PLAIN_LANGS.has(normalizedLang) && !highlighter.getLoadedLanguages().includes(normalizedLang)) {
+      warnOnce(
+        `lang:${lang}`,
+        `Falling back to plain text for lang="${lang}"; not in the curated Shiki bundle.`
+      );
+      return plainHtml(deferredValue);
+    }
+    try {
+      return highlighter.codeToHtml(deferredValue, {
+        lang: normalizedLang,
+        themes: { light, dark },
+        defaultColor: theme,
+        transformers: [transformer]
+      });
+    } catch (error) {
+      warnOnce(
+        `theme:${light}:${dark}:${lang}`,
+        `Falling back to plain text for themes "${light}" / "${dark}" with lang="${lang}".`,
+        error
+      );
+      return plainHtml(deferredValue);
+    }
+  }, [highlighter, deferredValue, lang, theme, light, dark, maxHighlightLength]);
+}
+var layerClassName = "col-start-1 row-start-1 m-0 box-border border-0 p-4 font-mono text-[16px] leading-normal tracking-normal [font-variant-ligatures:none] md:text-[13px]";
+var highlightClassName = "[&_pre]:m-0 [&_pre]:p-0 [&_pre]:!bg-transparent [&_pre]:[font:inherit] [&_pre]:[white-space:inherit] [&_pre]:[overflow-wrap:inherit] [&_code]:[font:inherit]";
+function observeValueWrites(node, onWrite) {
+  const own = Object.getOwnPropertyDescriptor(node, "value");
+  const base = own ?? Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value");
+  if (!base?.get || !base.set || own && !own.configurable) return () => {
+  };
+  const { get, set: set2 } = base;
+  Object.defineProperty(node, "value", {
+    configurable: true,
+    enumerable: base.enumerable,
+    get() {
+      return get.call(this);
+    },
+    set(next) {
+      set2.call(this, next);
+      onWrite(get.call(this));
+    }
+  });
+  const form = node.form;
+  const handleReset = () => setTimeout(() => onWrite(node.value));
+  form?.addEventListener("reset", handleReset);
+  return () => {
+    form?.removeEventListener("reset", handleReset);
+    if (own) Object.defineProperty(node, "value", own);
+    else delete node.value;
+  };
+}
+function hasContent(node) {
+  return node != null && node !== false && node !== "";
+}
+function toCssSize(size) {
+  return typeof size === "number" ? `${size}px` : size;
+}
+var CodeEditor = React10.forwardRef(
+  ({
+    className,
+    style,
+    lang = "json",
+    theme = "light",
+    themes = DEFAULT_CODE_EDITOR_THEMES,
+    hideHeader = false,
+    fileName,
+    icon,
+    copyButton = true,
+    formatButton,
+    formatter,
+    onFormatError,
+    formatLabel = "Format",
+    copyLabel,
+    headerActions,
+    label,
+    required,
+    hintContent,
+    error,
+    errorContent,
+    minHeight,
+    maxHeight,
+    wrap = false,
+    tabSize = 2,
+    maxHighlightLength = 1e4,
+    id,
+    value: value2,
+    defaultValue,
+    onChange,
+    onKeyDown,
+    onBlur,
+    onScroll,
+    disabled,
+    readOnly,
+    "aria-describedby": ariaDescribedBy,
+    ...textareaProps
+  }, forwardedRef) => {
+    const autoId = React10.useId();
+    const textareaId = id || autoId;
+    const errorId = `${textareaId}-error`;
+    const hasError = error || !!errorContent;
+    const isControlled = value2 !== void 0;
+    const [innerValue, setInnerValue] = React10.useState(
+      () => defaultValue == null ? "" : String(defaultValue)
+    );
+    const currentValue = isControlled ? String(value2 ?? "") : innerValue;
+    const html = useHighlightedHtml(currentValue, {
+      lang,
+      theme,
+      themes,
+      maxHighlightLength
+    });
+    const keys = useCodeEditorKeys({ tabSize, onKeyDown, onBlur });
+    const textareaRef = React10.useRef(null);
+    const stopObservingRef = React10.useRef(void 0);
+    const setTextareaRef = React10.useCallback(
+      (node) => {
+        textareaRef.current = node;
+        stopObservingRef.current?.();
+        stopObservingRef.current = void 0;
+        if (node && !isControlled) {
+          stopObservingRef.current = observeValueWrites(node, setInnerValue);
+          setInnerValue(node.value);
+        }
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef, isControlled]
+    );
+    const handleChange = (event) => {
+      if (!isControlled) setInnerValue(event.target.value);
+      onChange?.(event);
+    };
+    const handleScroll = (event) => {
+      const el = event.currentTarget;
+      if (el.scrollTop !== 0) el.scrollTop = 0;
+      if (el.scrollLeft !== 0) el.scrollLeft = 0;
+      onScroll?.(event);
+    };
+    const builtInFormatter = getBuiltInFormatter(lang);
+    const format6 = formatter ?? (builtInFormatter && ((v) => builtInFormatter(v, tabSize)));
+    const showFormatButton = formatButton !== false && format6 !== void 0;
+    const handleFormat = () => {
+      const el = textareaRef.current;
+      if (!el || !format6) return;
+      let formatted;
+      try {
+        formatted = format6(el.value);
+      } catch (formatError) {
+        onFormatError?.(formatError);
+        return;
+      }
+      applyEdit(el, {
+        start: 0,
+        end: el.value.length,
+        text: formatted,
+        selectionStart: 0,
+        selectionEnd: 0
+      });
+    };
+    const describedBy = [ariaDescribedBy, errorContent ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+    const wrapClassName = wrap ? "whitespace-pre-wrap [overflow-wrap:anywhere]" : "whitespace-pre [overflow-wrap:normal]";
+    const showHeader = !hideHeader && (hasContent(fileName) || copyButton || showFormatButton || hasContent(headerActions));
+    const actions = hasContent(headerActions) || showFormatButton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      headerActions,
+      showFormatButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "code-editor-format",
+          "aria-label": formatLabel,
+          title: formatLabel,
+          disabled: disabled || readOnly || currentValue.trim() === "",
+          onClick: handleFormat,
+          className: cn(buttonVariants$1({ variant: "ghost", size: "sm" }), "w-auto h-auto p-2"),
+          children: /* @__PURE__ */ jsx(Braces, {})
+        }
+      )
+    ] }) : void 0;
+    const editor = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "code-editor",
+        "data-disabled": disabled ? "" : void 0,
+        className: cn(
+          "relative flex flex-col overflow-hidden rounded-lg border bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out",
+          "has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring has-[textarea:focus-visible]:ring-offset-2",
+          hasError && "border-destructive has-[textarea:focus-visible]:ring-destructive",
+          className
+        ),
+        style,
+        children: [
+          showHeader && /* @__PURE__ */ jsx(
+            CodeHeader,
+            {
+              icon,
+              fileName,
+              actions,
+              copyContent: copyButton ? currentValue : void 0,
+              copyLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "relative min-h-0 flex-1 overflow-auto bg-accent/10",
+                disabled && "cursor-not-allowed opacity-50"
+              ),
+              style: { maxHeight: toCssSize(maxHeight) },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn("grid", wrap ? "w-full grid-cols-[minmax(0,1fr)]" : "w-max min-w-full"),
+                  style: { minHeight: toCssSize(minHeight), tabSize },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: cn(layerClassName, wrapClassName, "invisible"), children: [
+                      currentValue,
+                      "\u200B"
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: cn(layerClassName, wrapClassName, highlightClassName, "pointer-events-none"),
+                        dangerouslySetInnerHTML: { __html: html }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        id: textareaId,
+                        ref: setTextareaRef,
+                        value: value2,
+                        defaultValue,
+                        disabled,
+                        readOnly,
+                        required,
+                        wrap: wrap ? "soft" : "off",
+                        spellCheck: false,
+                        autoCapitalize: "off",
+                        autoComplete: "off",
+                        autoCorrect: "off",
+                        translate: "no",
+                        "data-gramm": "false",
+                        "aria-invalid": hasError || void 0,
+                        "aria-describedby": describedBy,
+                        ...textareaProps,
+                        onChange: handleChange,
+                        onKeyDown: keys.onKeyDown,
+                        onBlur: keys.onBlur,
+                        onScroll: handleScroll,
+                        style: { tabSize },
+                        className: cn(
+                          layerClassName,
+                          wrapClassName,
+                          "relative z-10 h-full w-full resize-none overflow-hidden bg-transparent text-transparent caret-foreground outline-none [-webkit-text-fill-color:transparent]",
+                          "placeholder:text-muted-foreground placeholder:[-webkit-text-fill-color:var(--color-muted-foreground)] selection:bg-primary/20",
+                          "disabled:cursor-not-allowed read-only:cursor-default"
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+    if (label == null && hintContent == null && errorContent == null) return editor;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
+      label != null ? /* @__PURE__ */ jsx(
+        FieldLabelRow,
+        {
+          htmlFor: textareaId,
+          label,
+          required,
+          hintContent
+        }
+      ) : hintContent != null && /* @__PURE__ */ jsx("span", { className: fieldHintClassName, children: hintContent }),
+      editor,
+      errorContent != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-sm text-destructive", children: errorContent })
+    ] });
+  }
+);
+CodeEditor.displayName = "CodeEditor";
 var maxWidthClasses = {
   sm: "max-w-2xl",
   md: "max-w-4xl",
@@ -68013,4 +68936,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, CodeEditor, 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, ROLLING_PRESET_IDS, 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 };