@assure-one/design-system 1.41.2 → 1.43.0

package/dist/index.js

@@ -1,17 +1,17 @@
 "use client";
-import { useFormReset, badgeVariants, DataTableBody, DataTableRow, DataTableCell, Badge, Pagination, TableBody, TableRow, TableCell, Table, TableHeader, TableHead, ToggleGroup, ToggleGroupItem } from './chunk-UAPQ7VTS.js';
-export { Badge, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, EmptyValue, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, SegmentedProgress, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, nextSortDirection, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable } from './chunk-UAPQ7VTS.js';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent, PlainLink, Combobox, CmdkCompatContext, Sheet, SheetContent, SheetTitle } from './chunk-JKNHNNNY.js';
-export { BrandScope, BrandScopeProvider, Chip, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, DEFAULT_COMBOBOX_MESSAGES, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarBrand, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, assetPath, brandScope, chipVariants, getAssetBasePath, resolveChipStyle, setAssetBasePath, sidebarLinkBadgeVariants, useBrandScope, useSidebarPeekLock, useSidebarState } from './chunk-JKNHNNNY.js';
-import { withPortalContainer, Backdrop, alertDialogAnatomy, OverlaySurface, OverlayTitle, OverlayDescription, Button, slot, useDsMessages, useLinkComponent, surfaceAnatomy, stateAttributes, cardAnatomy, ModalPortal, kbdAnatomy, FieldContext, fieldAnatomy, useFieldContext, MENU_SUB_TRIGGER_CHEVRON, menuSubTriggerClasses, MENU_INSET, contextMenuAnatomy, presence, menuItemClasses, MENU_ITEM_DANGER, MENU_INDICATOR_WELL, MENU_CHECK_GLYPH, menuIndicatorItemClasses, MENU_RADIO_GLYPH, menuLabelClasses, menuSeparatorClasses, useFieldControl, useMergedRefs, joinIds, Popover, PopoverTrigger, PopoverContent, FormBridge, dialogAnatomy, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, headingAnatomy, deprecate, floatingSurfaceClasses, FLOATING_PADDING, FLOATING_WIDTH, labelAnatomy, warnLegacyButtonProps, resolveButtonIcons, buttonVariants, INERT_CLASSES, DISABLED_LOOK_CLASSES, inertHandlers, INERT_ATTRIBUTES, linkButtonAnatomy, useControllableState, controlChrome, mergeRefs, numberInputAnatomy, EN_MESSAGES, phoneFieldAnatomy, Input, useFieldsetContext, radioGroupAnatomy, microInteractions, CONTROL_LABEL_TEXT, searchInputAnatomy, IconButton, codeAnatomy, Slot, textAnatomy, stackAnatomy, inlineAnatomy, statusBadgeAnatomy, Tooltip, TooltipTrigger, TooltipContent, useFieldsetState, FieldsetContext, fieldsetAnatomy, useFieldsetLegend, shellAnatomy, Avatar, dataTableAnatomy, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useId as useId$1, partId, errorOnce, isLabelable, Spinner, Select, Checkbox, FIELD_PARTS, SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, OverlayHeader, OverlayFooter, commandAnatomy, menuShortcutClasses, useFormReset as useFormReset$1, sideDrawerAnatomy, Portal, toastAnatomy, useExitPresence, TooltipProvider, TOOLTIP_DEFAULT_DELAY_MS, DesignSystemContext, PortalContainerContext, ModalRoot, ModalOverlay, ModalContent, ModalTitle, ModalDescription } from './chunk-XN7OBLQR.js';
-export { Avatar, Button, Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileChip, FileUpload, IconButton, Input, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Pressable, SPINNER_TONE_TO_INTENT, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Spinner, Textarea, ThemeScope, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, iconButtonVariants, inputVariants, resolveButtonStyle, spinnerVariants, textareaVariants, useDsMessages, useFieldControl } from './chunk-XN7OBLQR.js';
-import { cn, ChevronDownIcon, EyeIcon, DownloadIcon, ChevronRightIcon, CheckIcon, CircleIcon, CopyIcon, CalendarIcon, XIcon, AlertTriangleIcon, ArrowRightIcon, ArrowLeftIcon, FileTextIcon, ZoomOutIcon, ZoomInIcon, TrendingUpIcon, TrendingDownIcon, SearchIcon, TableIcon, StarIcon, ListChecksIcon, CheckCircleSolidIcon, HelpCircleIcon, UserIcon, SendIcon, SettingsIcon, ChevronLeftIcon, FolderOpenIcon, FolderClosedIcon, MinusIcon, AlertCircleIcon, CheckCircle2Icon, PlusIcon, LoaderIcon, InfoCircleSolidIcon, AlertTriangleSolidIcon, XCircleSolidIcon, RotateCcwIcon, InfoIcon, CommandIcon } from './chunk-AF3QYJ24.js';
-export { AlertCircleIcon, AlertTriangleIcon, AlertTriangleSolidIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, ArrowUpRightIcon, AtSignIcon, BanIcon, BarChartIcon, BellIcon, BoldIcon, BrainIcon, BriefcaseIcon, Building2Icon, BuildingIcon, CalculatorIcon, CalendarIcon, CameraIcon, ChatBubbleIcon, CheckCheckIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CommandIcon, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DocumentIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, ExtractIcon, EyeIcon, EyeOffIcon, FileChartColumnIcon, FileIcon, FileReturnIcon, FileTextIcon, FilterIcon, FlagIcon, FolderClosedIcon, FolderDownIcon, FolderOpenIcon, FolderPlusIcon, FolderUpIcon, GlobeIcon, GoogleBrandIcon, GraduationCapIcon, GripHorizontalIcon, GripVerticalIcon, HelpCircleIcon, HistoryIcon, HomeIcon, InboxIcon, InfoCircleSolidIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, LandmarkIcon, LayersIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, MenuIcon, MessageCircleIcon, MessageCircleMoreIcon, MessageCircleWarningIcon, MicIcon, MicrosoftBrandIcon, MinimizeIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointer2Icon, MoveIcon, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightCloseIcon, PanelRightIcon, PaperclipIcon, PauseIcon, PenSignIcon, PenToolIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, ReplyIcon, RotateCcwIcon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, SigmaIcon, SlashIcon, SmartphoneIcon, SparkleIcon, SparklesIcon, SquarePlayIcon, StarIcon, StopIcon, StrikethroughIcon, SunIcon, TableIcon, TagIcon, TeamIcon, ThumbsDownIcon, ThumbsUpIcon, TimerIcon, Trash2Icon, TrashIcon, TrashSolidIcon, TrendingDownIcon, TrendingUpIcon, TypeIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VideoIcon, Volume2Icon, VolumeXIcon, WorkflowIcon, XCircleSolidIcon, XIcon, ZoomInIcon, ZoomOutIcon, cn, createIcon } from './chunk-AF3QYJ24.js';
+import { Skeleton, useFormReset, ToggleGroup, ToggleGroupItem, badgeVariants, DataTableBody, DataTableRow, DataTableCell, Badge, Pagination, TableBody, TableRow, TableCell, Table, TableHeader, TableHead } from './chunk-LUWPEBXZ.js';
+export { Badge, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, EmptyValue, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, SegmentedProgress, Skeleton, SkeletonCircle, SkeletonText, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, nextSortDirection, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable } from './chunk-LUWPEBXZ.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent, PlainLink, Combobox, Sidebar, SidebarFooter, SidebarUser, useSidebarState, SidebarSection, SidebarLinkGroup, SidebarLink, SidebarLinkLabel, SidebarLinkBadge, CmdkCompatContext, Sheet, SheetContent, SheetTitle } from './chunk-TYXT5C2B.js';
+export { BrandScope, BrandScopeProvider, Chip, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, DEFAULT_COMBOBOX_MESSAGES, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarBrand, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, assetPath, brandScope, chipVariants, getAssetBasePath, resolveChipStyle, setAssetBasePath, sidebarLinkBadgeVariants, useBrandScope, useSidebarPeekLock, useSidebarState } from './chunk-TYXT5C2B.js';
+import { withPortalContainer, Backdrop, alertDialogAnatomy, OverlaySurface, OverlayTitle, OverlayDescription, Button, slot, useDsMessages, useLinkComponent, surfaceAnatomy, stateAttributes, cardAnatomy, ModalPortal, kbdAnatomy, FieldContext, fieldAnatomy, useFieldContext, MENU_SUB_TRIGGER_CHEVRON, menuSubTriggerClasses, MENU_INSET, contextMenuAnatomy, presence, menuItemClasses, MENU_ITEM_DANGER, MENU_INDICATOR_WELL, MENU_CHECK_GLYPH, menuIndicatorItemClasses, MENU_RADIO_GLYPH, menuLabelClasses, menuSeparatorClasses, useFieldControl, useMergedRefs, joinIds, Popover, PopoverTrigger, PopoverContent, FormBridge, CONTROL_SIZE_CLASSES, dialogAnatomy, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, headingAnatomy, deprecate, floatingSurfaceClasses, FLOATING_PADDING, FLOATING_WIDTH, labelAnatomy, warnLegacyButtonProps, resolveButtonIcons, buttonVariants, INERT_CLASSES, DISABLED_LOOK_CLASSES, inertHandlers, INERT_ATTRIBUTES, linkButtonAnatomy, useControllableState, controlChrome, mergeRefs, numberInputAnatomy, EN_MESSAGES, phoneFieldAnatomy, Input, useFieldsetContext, radioGroupAnatomy, microInteractions, CONTROL_LABEL_TEXT, searchInputAnatomy, IconButton, Tooltip, TooltipTrigger, TooltipContent, codeAnatomy, Slot, textAnatomy, stackAnatomy, inlineAnatomy, statusBadgeAnatomy, useFieldsetState, FieldsetContext, fieldsetAnatomy, useFieldsetLegend, shellAnatomy, Avatar, dataTableAnatomy, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useId as useId$1, partId, errorOnce, isLabelable, Spinner, Select, Checkbox, FIELD_PARTS, SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, OverlayHeader, OverlayFooter, commandAnatomy, menuShortcutClasses, useFormReset as useFormReset$1, sideDrawerAnatomy, Portal, toastAnatomy, useExitPresence, TooltipProvider, TOOLTIP_DEFAULT_DELAY_MS, DesignSystemContext, PortalContainerContext, ModalRoot, ModalOverlay, ModalContent, ModalTitle, ModalDescription } from './chunk-XJKCKBHI.js';
+export { Avatar, Button, Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileChip, FileUpload, IconButton, Input, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Pressable, SPINNER_TONE_TO_INTENT, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Spinner, Textarea, ThemeScope, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, iconButtonVariants, inputVariants, resolveButtonStyle, spinnerVariants, textareaVariants, useDsMessages, useFieldControl } from './chunk-XJKCKBHI.js';
+import { cn, ChevronDownIcon, EyeIcon, DownloadIcon, ChevronRightIcon, CheckIcon, CircleIcon, CopyIcon, CalendarIcon, XIcon, AlertTriangleIcon, ArrowRightIcon, ArrowLeftIcon, FileTextIcon, ZoomOutIcon, ZoomInIcon, TrendingUpIcon, TrendingDownIcon, SearchIcon, TableIcon, StarIcon, RowsIcon, Rows4Icon, ListChecksIcon, CheckCircleSolidIcon, HelpCircleIcon, UserIcon, SendIcon, SettingsIcon, ChevronLeftIcon, FolderOpenIcon, FolderClosedIcon, MinusIcon, AlertCircleIcon, CheckCircle2Icon, PlusIcon, LoaderIcon, InfoCircleSolidIcon, AlertTriangleSolidIcon, XCircleSolidIcon, RotateCcwIcon, InfoIcon, CommandIcon } from './chunk-TBDTXAFH.js';
+export { AlertCircleIcon, AlertTriangleIcon, AlertTriangleSolidIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, ArrowUpRightIcon, AtSignIcon, BanIcon, BarChartIcon, BellIcon, BoldIcon, BrainIcon, BriefcaseIcon, Building2Icon, BuildingIcon, CalculatorIcon, CalendarIcon, CameraIcon, ChatBubbleIcon, CheckCheckIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CommandIcon, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DocumentIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, ExtractIcon, EyeIcon, EyeOffIcon, FileChartColumnIcon, FileIcon, FileReturnIcon, FileTextIcon, FilterIcon, FlagIcon, FolderClosedIcon, FolderDownIcon, FolderOpenIcon, FolderPlusIcon, FolderUpIcon, GlobeIcon, GoogleBrandIcon, GraduationCapIcon, GripHorizontalIcon, GripVerticalIcon, HelpCircleIcon, HistoryIcon, HomeIcon, InboxIcon, InfoCircleSolidIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, LandmarkIcon, LayersIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, MenuIcon, MessageCircleIcon, MessageCircleMoreIcon, MessageCircleWarningIcon, MicIcon, MicrosoftBrandIcon, MinimizeIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointer2Icon, MoveIcon, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightCloseIcon, PanelRightIcon, PaperclipIcon, PauseIcon, PenSignIcon, PenToolIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, ReplyIcon, RotateCcwIcon, Rows4Icon, RowsIcon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, SigmaIcon, SlashIcon, SmartphoneIcon, SparkleIcon, SparklesIcon, SquarePlayIcon, StarIcon, StopIcon, StrikethroughIcon, SunIcon, TableIcon, TagIcon, TeamIcon, ThumbsDownIcon, ThumbsUpIcon, TimerIcon, Trash2Icon, TrashIcon, TrashSolidIcon, TrendingDownIcon, TrendingUpIcon, TypeIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VideoIcon, Volume2Icon, VolumeXIcon, WorkflowIcon, XCircleSolidIcon, XIcon, ZoomInIcon, ZoomOutIcon, cn, createIcon } from './chunk-TBDTXAFH.js';
 export { systemTokens } from './chunk-CPOGSNXS.js';
 import './chunk-EUHGZA6Q.js';
 export { colors, radii, reference, shadows, spacing, surfaces, typography } from './chunk-YRHRVOLV.js';
-import * as React28 from 'react';
-import { forwardRef, useId, useRef, useState, useEffect, createContext, useCallback, useMemo, useImperativeHandle, Children, isValidElement, cloneElement, useSyncExternalStore, useContext } from 'react';
+import * as React30 from 'react';
+import { forwardRef, useId, useRef, useState, useLayoutEffect, createContext, useEffect, useCallback, useMemo, useImperativeHandle, Children, isValidElement, cloneElement, useSyncExternalStore, useContext } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -33,7 +33,7 @@ import { useFormStatus } from 'react-dom';
 import { Branch } from '@radix-ui/react-dismissable-layer';
 import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 
-var Accordion = React28.forwardRef(function Accordion2({ className, ...props }, ref) {
+var Accordion = React30.forwardRef(function Accordion2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,
     {
@@ -44,22 +44,28 @@ var Accordion = React28.forwardRef(function Accordion2({ className, ...props },
   );
 });
 Accordion.displayName = AccordionPrimitive.Root.displayName;
-var AccordionItem = React28.forwardRef(function AccordionItem2({ className, ...props }, ref) {
+var AccordionItem = React30.forwardRef(function AccordionItem2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn(className), ...props });
 });
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
-var AccordionTrigger = React28.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
+var AccordionTrigger = React30.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "ds:flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
     {
       ref,
       className: cn(
-        "ds:group group ds:text-fg ds:flex ds:flex-1 ds:items-center ds:justify-between ds:gap-4 ds:py-4 ds:text-left ds:text-sm ds:font-medium",
+        "ds:group group ds:text-fg ds:flex ds:flex-1 ds:items-center ds:justify-between ds:gap-4 ds:rounded-control ds:py-4 ds:text-left ds:text-sm ds:font-medium",
         "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
         "ds:hover:text-fg-2",
         "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
         "ds:data-[disabled]:cursor-not-allowed ds:data-[disabled]:opacity-50 ds:data-[disabled]:hover:text-fg",
+        // `aria-expanded` twin: a TooltipTrigger asChild ancestor can
+        // clobber this trigger's own `data-state` with the tooltip's (see
+        // toggle-group.tsx's note on the same bug), but never sets
+        // `aria-expanded` — which Radix's Collapsible-backed Accordion
+        // trigger always carries alongside `data-state`.
         "ds:[&[data-state=open]>svg]:rotate-180",
+        "ds:[&[aria-expanded=true]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -77,7 +83,7 @@ var AccordionTrigger = React28.forwardRef(function AccordionTrigger2({ children,
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React28.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
+var AccordionContent = React30.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
     {
@@ -97,7 +103,7 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = withPortalContainer(AlertDialogPrimitive.Portal);
-var AlertDialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Backdrop,
   {
     as: AlertDialogPrimitive.Overlay,
@@ -108,7 +114,7 @@ var AlertDialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     OverlaySurface,
@@ -129,9 +135,9 @@ var AlertDialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy:
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: alertDialogAnatomy, layout: "inset", ...props });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
+var AlertDialogTitle = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   OverlayDescription,
   {
     as: AlertDialogPrimitive.Description,
@@ -144,7 +150,7 @@ AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayNam
 var EMPHASES = /* @__PURE__ */ new Set(["solid", "soft", "outline", "ghost", "link"]);
 var isEmphasis = (word) => EMPHASES.has(word);
 var LEGACY_ACTION_HOVER = "ds:hover:bg-destructive/90";
-var AlertDialogAction = React28.forwardRef(({ variant, intent, className, ...props }, ref) => {
+var AlertDialogAction = React30.forwardRef(({ variant, intent, className, ...props }, ref) => {
   const legacy = variant === void 0 && intent === void 0;
   const resolvedIntent = intent ?? (variant === void 0 || isEmphasis(variant) ? "danger" : void 0);
   return /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, asChild: true, ...slot(alertDialogAnatomy, "action"), children: /* @__PURE__ */ jsx(
@@ -160,7 +166,7 @@ var AlertDialogAction = React28.forwardRef(({ variant, intent, className, ...pro
 });
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 var LEGACY_CANCEL_HOVER = "ds:hover:border-rule-strong ds:hover:text-fg";
-var AlertDialogCancel = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...slot(alertDialogAnatomy, "cancel"), children: /* @__PURE__ */ jsx(
+var AlertDialogCancel = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...slot(alertDialogAnatomy, "cancel"), children: /* @__PURE__ */ jsx(
   Button,
   {
     variant: "outline",
@@ -258,9 +264,11 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
   const wrapRef = useRef(null);
   const [width, setWidth] = useState(620);
   const [hover, setHover] = useState(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const el = wrapRef.current;
     if (!el) return;
+    const measured = el.getBoundingClientRect().width;
+    if (measured > 0) setWidth(measured);
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) setWidth(entry.contentRect.width);
     });
@@ -287,6 +295,7 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
           width,
           height,
           viewBox: `0 0 ${width} ${height}`,
+          className: "ds:block ds:h-auto ds:max-w-full",
           role: "img",
           "aria-label": "Area trend chart",
           onMouseLeave: () => setHover(null),
@@ -351,7 +360,7 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
   ] });
 });
 AreaChart.displayName = "AreaChart";
-var AspectRatio = React28.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
+var AspectRatio = React30.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AspectRatioPrimitive.Root,
     {
@@ -1086,15 +1095,15 @@ function Calendar({
   const range = isRange ? selected : void 0;
   const locale = useLocale(typeof localeProp === "string" ? localeProp : void 0);
   const localeObject = typeof localeProp === "object" ? localeProp : void 0;
-  const localeProps = React28.useMemo(
+  const localeProps = React30.useMemo(
     () => localeObject ? {} : calendarLocaleProps(locale),
     [locale, localeObject]
   );
   const hydrated = useHydrated();
-  const clockToday = React28.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
+  const clockToday = React30.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
   const today = todayProp ?? clockToday;
   const anchor = props.month ?? props.defaultMonth ?? todayProp;
-  const { modifiers, modifiersClassNames } = React28.useMemo(() => {
+  const { modifiers, modifiersClassNames } = React30.useMemo(() => {
     const buckets = {};
     for (const h of highlights) {
       const key = h.color ?? "primary";
@@ -1109,7 +1118,7 @@ function Calendar({
     }
     return { modifiers: mods, modifiersClassNames: modClasses };
   }, [highlights]);
-  const disabledMatcher = React28.useMemo(() => {
+  const disabledMatcher = React30.useMemo(() => {
     if (!minDate && !maxDate) return void 0;
     if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
     if (minDate) return { before: minDate };
@@ -1117,7 +1126,7 @@ function Calendar({
   }, [minDate, maxDate]);
   const rangeFrom = range?.from;
   const rangeTo = range?.to;
-  const navRange = React28.useMemo(
+  const navRange = React30.useMemo(
     () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({
       minDate,
       maxDate,
@@ -1182,7 +1191,7 @@ function Calendar({
         day: "ds:flex-1 ds:text-center ds:relative ds:p-0",
         day_button: cn(
           "ds:inline-flex ds:size-8 ds:w-full ds:items-center ds:justify-center ds:rounded-input ds:font-mono ds:tabular-nums ds:text-(length:--control-font-size-md) ds:text-fg",
-          "ds:transition-colors ds:duration-[var(--duration-instant)] ds:motion-reduce:transition-none",
+          "ds:transition-colors ds:duration-[var(--duration-instant)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
           "ds:hover:bg-surface-hover",
           "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
           "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled"
@@ -1279,7 +1288,10 @@ var CardHeader = forwardRef(
         ref,
         ...slot(cardAnatomy, "header"),
         className: cn(
-          "ds:grid ds:auto-cols-fr ds:grid-cols-[1fr_auto] ds:items-start ds:gap-1.5 ds:p-6 ds:[.border-b]:pb-4",
+          // `border-rule` colours the documented `className="border-b"` divider
+          // the way CardFooter's border is coloured (Tailwind 4 would otherwise
+          // paint it `currentColor`); it draws nothing without a border width.
+          "ds:grid ds:auto-cols-fr ds:grid-cols-[1fr_auto] ds:items-start ds:gap-1.5 ds:border-rule ds:p-6 ds:[.border-b]:pb-4",
           className
         ),
         ...props
@@ -1295,7 +1307,12 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, headingLev
     {
       ref,
       ...slot(cardAnatomy, "title"),
-      className: cn("ds:text-fg ds:text-base ds:leading-tight ds:font-medium", className),
+      className: cn(
+        // Column 1 of CardHeader's `1fr auto` grid, so a description stacks
+        // under the title instead of flowing into the action column.
+        "ds:col-start-1 ds:text-fg ds:text-base ds:leading-tight ds:font-medium",
+        className
+      ),
       ...props,
       children
     }
@@ -1308,7 +1325,7 @@ var CardDescription = forwardRef(function CardDescription2({ className, ...props
     {
       ref,
       ...slot(cardAnatomy, "description"),
-      className: cn("ds:text-fg-3 ds:text-sm", className),
+      className: cn("ds:col-start-1 ds:text-fg-3 ds:text-sm", className),
       ...props
     }
   );
@@ -1552,17 +1569,17 @@ function CommandPalette({
 }) {
   const messages = useDsMessages("commandPalette", messagesProp);
   const placeholder = placeholderProp ?? messages.search;
-  const [internalOpen, setInternalOpen] = React28.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React30.useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = React28.useCallback(
+  const setOpen = React30.useCallback(
     (value) => {
       if (!isControlled) setInternalOpen(value);
       onOpenChange?.(value);
     },
     [isControlled, onOpenChange]
   );
-  React28.useEffect(() => {
+  React30.useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -1881,19 +1898,19 @@ function ConfirmDialog({
 }) {
   const messages = useDsMessages("confirm", messagesOverride);
   const isControlled = open !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = React28.useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(defaultOpen);
   const resolvedOpen = isControlled ? open : uncontrolledOpen;
-  const [pending, setPending] = React28.useState(false);
-  const [error, setError] = React28.useState(void 0);
-  const actionRef = React28.useRef(null);
-  const mounted = React28.useRef(true);
-  React28.useEffect(() => {
+  const [pending, setPending] = React30.useState(false);
+  const [error, setError] = React30.useState(void 0);
+  const actionRef = React30.useRef(null);
+  const mounted = React30.useRef(true);
+  React30.useEffect(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
-  const setDialogOpen = React28.useCallback(
+  const setDialogOpen = React30.useCallback(
     (nextOpen) => {
       onOpenChange?.(nextOpen);
       if (!isControlled) setUncontrolledOpen(nextOpen);
@@ -2022,7 +2039,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = withPortalContainer(ContextMenuPrimitive.Portal);
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React28.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuSubTrigger = React30.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -2036,7 +2053,7 @@ var ContextMenuSubTrigger = React28.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React28.forwardRef(({ className, ...props }, ref) => (
+var ContextMenuSubContent = React30.forwardRef(({ className, ...props }, ref) => (
   // Portal the sub-content to the body. The parent Content is transformed
   // while its presence keyframes run, which makes it the containing block for
   // `position: fixed` descendants — and its `overflow-hidden` would then clip
@@ -2056,7 +2073,7 @@ var ContextMenuSubContent = React28.forwardRef(({ className, ...props }, ref) =>
   ) })
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
+var ContextMenuContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -2070,7 +2087,7 @@ var ContextMenuContent = React28.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React28.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuItem = React30.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -2085,7 +2102,7 @@ var ContextMenuItem = React28.forwardRef(({ className, destructive, inset, ...pr
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuCheckboxItem = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -2099,7 +2116,7 @@ var ContextMenuCheckboxItem = React28.forwardRef(({ className, children, ...prop
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuRadioItem = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -2113,7 +2130,7 @@ var ContextMenuRadioItem = React28.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React28.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuLabel = React30.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -2127,7 +2144,7 @@ var ContextMenuLabel = React28.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSeparator = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -2148,10 +2165,13 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 var CopyButton = forwardRef(function CopyButton2({ value, feedbackDuration = 2e3, messages: messagesProp, className, children, ...props }, ref) {
   const messages = useDsMessages("copyButton", messagesProp);
   const [copied, setCopied] = useState(false);
+  const resetTimer = useRef(void 0);
+  useEffect(() => () => clearTimeout(resetTimer.current), []);
   const handleCopy = useCallback(async () => {
     await navigator.clipboard.writeText(value);
     setCopied(true);
-    setTimeout(() => setCopied(false), feedbackDuration);
+    clearTimeout(resetTimer.current);
+    resetTimer.current = setTimeout(() => setCopied(false), feedbackDuration);
   }, [value, feedbackDuration]);
   return /* @__PURE__ */ jsx(
     "button",
@@ -2168,11 +2188,67 @@ var CopyButton = forwardRef(function CopyButton2({ value, feedbackDuration = 2e3
       ),
       "aria-label": copied ? messages.copied : messages.copy,
       ...props,
-      children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16, "aria-hidden": "true" }) : children ?? /* @__PURE__ */ jsx(CopyIcon, { size: 16, "aria-hidden": "true" })
+      children: copied ? /* @__PURE__ */ jsx(
+        CheckIcon,
+        {
+          size: 16,
+          "aria-hidden": "true",
+          className: "ds:text-success-fg ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:zoom-in-50 ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)]"
+        }
+      ) : children ?? /* @__PURE__ */ jsx(CopyIcon, { size: 16, "aria-hidden": "true" })
     }
   );
 });
 CopyButton.displayName = "CopyButton";
+var DATE_PICKER_BOX = {
+  xs: "ds:h-(--control-height-xs) ds:text-(length:--control-font-size-xs)",
+  sm: "ds:h-(--control-height-sm) ds:text-(length:--control-font-size-sm)",
+  md: "ds:h-(--control-height-md) ds:text-(length:--control-font-size-md)",
+  lg: "ds:h-(--control-height-lg) ds:text-(length:--control-font-size-lg)",
+  xl: "ds:h-(--control-height-xl) ds:text-(length:--control-font-size-xl)"
+};
+var DATE_PICKER_OUTER_PAD_LEFT = {
+  xs: "ds:pl-2",
+  sm: "ds:pl-2.5",
+  md: "ds:pl-3",
+  lg: "ds:pl-3.5",
+  xl: "ds:pl-4"
+};
+var DATE_PICKER_OUTER_PAD_RIGHT = {
+  xs: "ds:pr-2",
+  sm: "ds:pr-2.5",
+  md: "ds:pr-3",
+  lg: "ds:pr-3.5",
+  xl: "ds:pr-4"
+};
+var DATE_PICKER_ICON_SLOT = {
+  xs: "ds:w-8",
+  sm: "ds:w-9",
+  md: "ds:w-10",
+  lg: "ds:w-11",
+  xl: "ds:w-12"
+};
+var DATE_PICKER_ICON_PAD_LEFT = {
+  xs: "ds:pl-8",
+  sm: "ds:pl-9",
+  md: "ds:pl-10",
+  lg: "ds:pl-11",
+  xl: "ds:pl-12"
+};
+var DATE_PICKER_ICON_PAD_RIGHT = {
+  xs: "ds:pr-8",
+  sm: "ds:pr-9",
+  md: "ds:pr-10",
+  lg: "ds:pr-11",
+  xl: "ds:pr-12"
+};
+var DATE_PICKER_ICON_SIZE = {
+  xs: "ds:size-(--control-icon-xs)",
+  sm: "ds:size-(--control-icon-sm)",
+  md: "ds:size-(--control-icon-md)",
+  lg: "ds:size-(--control-icon-lg)",
+  xl: "ds:size-(--control-icon-xl)"
+};
 function YearGrid({ selected, onSelect, minYear, maxYear, formatLabel, autoFocus }) {
   const messages = useDsMessages("datePicker");
   const today = (/* @__PURE__ */ new Date()).getFullYear();
@@ -2248,7 +2324,7 @@ function YearGrid({ selected, onSelect, minYear, maxYear, formatLabel, autoFocus
           className: cn(
             "ds:rounded-input ds:font-mono ds:text-(length:--control-font-size-md) ds:tabular-nums",
             "ds:inline-flex ds:h-10 ds:items-center ds:justify-center",
-            "ds:transition-colors ds:duration-[var(--duration-instant)] ds:motion-reduce:transition-none",
+            "ds:transition-colors ds:duration-[var(--duration-instant)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
             "ds:hover:bg-surface-hover",
             "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
             "ds:disabled:text-fg-disabled ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed",
@@ -2286,7 +2362,8 @@ var DatePicker = forwardRef(function DatePicker2({
   formatLabel,
   iconPosition = "right",
   captionLayout = "dropdown",
-  inputClassName
+  inputClassName,
+  size
 }, ref) {
   const messages = useDsMessages("datePicker");
   const isYearMode = picker === "year";
@@ -2442,7 +2519,7 @@ var DatePicker = forwardRef(function DatePicker2({
           "aria-describedby": joinIds(wiring["aria-describedby"], error ? errorId : void 0),
           "aria-labelledby": wiring["aria-labelledby"],
           "aria-label": ariaLabel,
-          className: cn(
+          className: size == null ? cn(
             "ds:rounded-input ds:bg-surface ds:text-fg ds:flex ds:h-9 ds:w-full ds:border ds:font-mono ds:text-(length:--control-font-size-md) ds:tabular-nums",
             "ds:border-field-border ds:py-2",
             iconPosition === "left" ? "ds:pl-10 ds:pr-3" : "ds:pl-3 ds:pr-10",
@@ -2457,6 +2534,22 @@ var DatePicker = forwardRef(function DatePicker2({
             "ds:aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
             hasCustomYearLabel && "ds:cursor-pointer",
             inputClassName
+          ) : cn(
+            "ds:rounded-input ds:bg-surface ds:text-fg ds:flex ds:w-full ds:border ds:font-mono ds:tabular-nums",
+            DATE_PICKER_BOX[size],
+            "ds:border-field-border ds:py-2",
+            iconPosition === "left" ? cn(DATE_PICKER_ICON_PAD_LEFT[size], DATE_PICKER_OUTER_PAD_RIGHT[size]) : cn(DATE_PICKER_OUTER_PAD_LEFT[size], DATE_PICKER_ICON_PAD_RIGHT[size]),
+            "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+            "ds:motion-reduce:transition-none",
+            "ds:placeholder:font-body ds:placeholder:text-fg-4",
+            "ds:not-disabled:hover:border-field-border-hover",
+            "ds:focus-visible:[border-color:var(--focus-ring-border)] ds:focus-visible:outline-none",
+            "ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
+            "ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed",
+            "ds:aria-[invalid=true]:border-field-border-invalid ds:aria-[invalid=true]:focus-visible:border-danger-fg",
+            "ds:aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
+            hasCustomYearLabel && "ds:cursor-pointer",
+            inputClassName
           )
         }
       ),
@@ -2468,7 +2561,7 @@ var DatePicker = forwardRef(function DatePicker2({
             disabled: isDisabled,
             tabIndex: -1,
             "aria-label": messages.openCalendar,
-            className: cn(
+            className: size == null ? cn(
               "ds:text-fg-3 ds:absolute ds:inset-y-0 ds:flex ds:w-10 ds:cursor-pointer ds:items-center ds:justify-center",
               iconPosition === "left" ? "ds:left-0 ds:rounded-l-input" : "ds:right-0 ds:rounded-r-input",
               "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
@@ -2476,8 +2569,17 @@ var DatePicker = forwardRef(function DatePicker2({
               "ds:hover:bg-surface-hover ds:hover:text-fg",
               "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
               "ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed ds:disabled:hover:bg-transparent"
+            ) : cn(
+              "ds:text-fg-3 ds:absolute ds:inset-y-0 ds:flex ds:cursor-pointer ds:items-center ds:justify-center",
+              DATE_PICKER_ICON_SLOT[size],
+              iconPosition === "left" ? "ds:left-0 ds:rounded-l-input" : "ds:right-0 ds:rounded-r-input",
+              "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+              "ds:motion-reduce:transition-none",
+              "ds:hover:bg-surface-hover ds:hover:text-fg",
+              "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+              "ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed ds:disabled:hover:bg-transparent"
             ),
-            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ds:size-(--control-icon-md)", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: DATE_PICKER_ICON_SIZE[size ?? "md"], "aria-hidden": "true" })
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -2550,7 +2652,8 @@ var DateRangePicker = forwardRef(
     max,
     iconPosition = "right",
     "aria-label": ariaLabel,
-    captionLayout = "dropdown"
+    captionLayout = "dropdown",
+    size
   }, ref) {
     const messages = useDsMessages("dateRangePicker");
     const placeholder = placeholderProp ?? messages.placeholder;
@@ -2682,7 +2785,7 @@ var DateRangePicker = forwardRef(
                 "aria-label": ariaLabel ?? label ?? messages.name,
                 "aria-haspopup": "dialog",
                 "aria-expanded": open,
-                className: cn(
+                className: size == null ? cn(
                   "ds:rounded-input ds:bg-surface ds:flex ds:h-9 ds:w-full ds:cursor-pointer ds:items-center ds:border ds:font-mono ds:text-(length:--control-font-size-md) ds:tabular-nums",
                   "ds:border-field-border ds:px-3 ds:py-2 ds:gap-2",
                   "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
@@ -2693,6 +2796,18 @@ var DateRangePicker = forwardRef(
                   "ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed ds:disabled:hover:bg-bg-disabled",
                   "ds:data-[invalid=true]:border-field-border-invalid ds:data-[invalid=true]:focus-visible:border-danger-fg",
                   "ds:data-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]"
+                ) : cn(
+                  "ds:rounded-input ds:bg-surface ds:flex ds:w-full ds:cursor-pointer ds:items-center ds:border ds:font-mono ds:tabular-nums",
+                  "ds:border-field-border",
+                  CONTROL_SIZE_CLASSES[size],
+                  "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)]",
+                  "ds:motion-reduce:transition-none",
+                  "ds:hover:bg-surface-hover ds:not-disabled:hover:border-field-border-hover",
+                  "ds:focus-visible:[border-color:var(--focus-ring-border)] ds:focus-visible:outline-none",
+                  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)]",
+                  "ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed ds:disabled:hover:bg-bg-disabled",
+                  "ds:data-[invalid=true]:border-field-border-invalid ds:data-[invalid=true]:focus-visible:border-danger-fg",
+                  "ds:data-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]"
                 ),
                 children: [
                   iconPosition === "left" && iconNode,
@@ -2777,7 +2892,7 @@ DateRangePicker.displayName = "DateRangePicker";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = withPortalContainer(DialogPrimitive.Portal);
-var DialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Backdrop,
   {
     as: DialogPrimitive.Overlay,
@@ -2811,7 +2926,7 @@ var DIALOG_HEIGHTS = {
   full: "ds:h-[calc(100vh-6rem)]"
 };
 function useTitleRequired(element) {
-  React28.useEffect(() => {
+  React30.useEffect(() => {
     if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
     const timer = setTimeout(() => {
       const node = element.current;
@@ -2828,7 +2943,7 @@ function useTitleRequired(element) {
     return () => clearTimeout(timer);
   }, [element]);
 }
-var DialogContent = React28.forwardRef(
+var DialogContent = React30.forwardRef(
   ({
     size = "md",
     height = "auto",
@@ -2840,7 +2955,7 @@ var DialogContent = React28.forwardRef(
     children,
     ...props
   }, ref) => {
-    const element = React28.useRef(null);
+    const element = React30.useRef(null);
     const mergedRef = useMergedRefs(ref, element);
     useTitleRequired(element);
     const heightRow = DIALOG_HEIGHTS[height];
@@ -2878,7 +2993,7 @@ var DialogContent = React28.forwardRef(
   }
 );
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogClose = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogClose = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Close,
   {
     ref,
@@ -2890,15 +3005,15 @@ var DialogClose = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
 DialogClose.displayName = "DialogClose";
 var DialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy: dialogAnatomy, layout: "inset", dismissGutter: true, ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogBody = React28.forwardRef(
+var DialogBody = React30.forwardRef(
   ({ padding = "none", ...props }, ref) => /* @__PURE__ */ jsx(OverlayBody, { anatomy: dialogAnatomy, layout: "inset", padding, ref, ...props })
 );
 DialogBody.displayName = "DialogBody";
 var DialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: dialogAnatomy, layout: "inset", ...props });
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive.Title, anatomy: dialogAnatomy, ref, ...props }));
+var DialogTitle = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive.Title, anatomy: dialogAnatomy, ref, ...props }));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   OverlayDescription,
   {
     as: DialogPrimitive.Description,
@@ -2928,7 +3043,7 @@ var chipVariants2 = cva(
     }
   }
 );
-var DismissibleChip = React28.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
+var DismissibleChip = React30.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
   const messages = useDsMessages("dismissibleChip");
   return /* @__PURE__ */ jsxs(
     "button",
@@ -3042,7 +3157,7 @@ var DonutChart = forwardRef(function DonutChart2({
             onBlur: () => setHover(null),
             className: cn(
               "ds:flex ds:w-full ds:items-center ds:gap-2 ds:rounded-[var(--radius-icon)] ds:px-1.5 ds:py-1 ds:text-left ds:text-sm ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-              hover === i ? "ds:bg-bg-2" : "ds:hover:bg-surface-hover"
+              hover === i ? "ds:bg-surface-hover" : "ds:hover:bg-surface-hover"
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -3262,7 +3377,7 @@ var ErrorState = forwardRef(function ErrorState2({
                 {
                   className: cn(
                     "ds:text-fg-3 ds:hover:text-fg ds:mx-auto ds:w-auto ds:gap-1 ds:rounded-md",
-                    "ds:px-1.5 ds:py-0.5 ds:text-xs ds:font-medium ds:transition-colors",
+                    "ds:px-1.5 ds:py-0.5 ds:text-xs ds:font-medium ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)]",
                     "ds:motion-reduce:transition-none"
                   ),
                   children: [
@@ -3273,7 +3388,7 @@ var ErrorState = forwardRef(function ErrorState2({
                         size: 12,
                         "aria-hidden": "true",
                         className: cn(
-                          "ds:transition-transform ds:motion-reduce:transition-none",
+                          "ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
                           detailsOpen && "ds:rotate-180"
                         )
                       }
@@ -3438,7 +3553,7 @@ FormSection.displayName = "FormSection";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardPortal = withPortalContainer(HoverCardPrimitive.Portal);
-var HoverCardContent = React28.forwardRef(
+var HoverCardContent = React30.forwardRef(
   ({
     className,
     align = "center",
@@ -3559,19 +3674,19 @@ function KeyboardShortcutsDialog({
   messages: messagesProp
 } = {}) {
   const messages = useDsMessages("keyboardShortcuts", messagesProp);
-  const [internalOpen, setInternalOpen] = React28.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React30.useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const openRef = React28.useRef(open);
+  const openRef = React30.useRef(open);
   openRef.current = open;
-  const setOpen = React28.useCallback(
+  const setOpen = React30.useCallback(
     (value) => {
       if (!isControlled) setInternalOpen(value);
       onOpenChange?.(value);
     },
     [isControlled, onOpenChange]
   );
-  React28.useEffect(() => {
+  React30.useEffect(() => {
     if (hotkey === null) return;
     function handleKeyDown(e) {
       const target = e.target;
@@ -3610,7 +3725,7 @@ function KeyboardShortcutsDialog({
           className: "ds:flex ds:items-center ds:justify-between ds:gap-3 ds:py-1",
           children: [
             /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-sm", children: shortcut.description }),
-            /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:mx-0.5 ds:text-(length:--text-caption)", children: messages.then }),
               /* @__PURE__ */ jsx(Kbd, { children: key })
             ] }, i)) })
@@ -3631,7 +3746,7 @@ function KeyboardShortcutsDialog({
 var labelVariants = cva(
   "ds:text-(length:--text-label) ds:font-medium ds:leading-none ds:text-fg ds:select-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:text-fg-disabled ds:has-[+input:disabled]:text-fg-disabled"
 );
-var Label2 = React28.forwardRef(
+var Label2 = React30.forwardRef(
   function Label3({ children, required, className, id, htmlFor, onClick, ...props }, ref) {
     const field = useFieldContext();
     const fieldLabelId = useFieldPart("label", id, field !== null);
@@ -3780,49 +3895,6 @@ var LinkAction = forwardRef(function LinkAction2({ arrow, iconRight, children, c
   );
 });
 LinkAction.displayName = "LinkAction";
-var SKELETON_SURFACE = cn(
-  "skeleton ds:bg-skeleton ds:relative ds:overflow-hidden",
-  "ds:after:absolute ds:after:inset-0 ds:after:-translate-x-full",
-  "ds:after:bg-[linear-gradient(90deg,transparent,var(--color-skeleton-sheen),transparent)]",
-  "ds:motion-safe:after:animate-skeleton-shimmer"
-);
-var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(SKELETON_SURFACE, "ds:rounded-icon", className),
-      "aria-hidden": "true",
-      ...props
-    }
-  );
-});
-Skeleton.displayName = "Skeleton";
-var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("ds:space-y-2", className), "aria-hidden": "true", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(SKELETON_SURFACE, "ds:rounded-icon ds:h-4", i === lines - 1 && "ds:w-3/4")
-    },
-    i
-  )) });
-});
-SkeletonText.displayName = "SkeletonText";
-var SkeletonCircle = forwardRef(
-  function SkeletonCircle2({ size = 40, className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(SKELETON_SURFACE, "ds:rounded-full", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true",
-        ...props
-      }
-    );
-  }
-);
-SkeletonCircle.displayName = "SkeletonCircle";
 var LoadingRows = forwardRef(function LoadingRows2({
   count = 3,
   rowHeight = "ds:h-14",
@@ -4049,7 +4121,7 @@ function MultiFilterPill({
                         "span",
                         {
                           className: cn(
-                            "ds:flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[3px] ds:border ds:transition-colors ds:duration-[var(--duration-fast)] ds:motion-reduce:transition-none",
+                            "ds:flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[3px] ds:border ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
                             isSelected ? "ds:border-brand ds:bg-brand ds:text-fg-on-brand" : "ds:border-rule-strong ds:bg-surface"
                           ),
                           "aria-hidden": "true",
@@ -4103,7 +4175,7 @@ function MultiSelectField({
   size = "md",
   id
 }) {
-  const selected = React28.useMemo(
+  const selected = React30.useMemo(
     () => new Set(value ? value.split(",").filter(Boolean) : []),
     [value]
   );
@@ -4116,7 +4188,7 @@ function MultiSelectField({
     }
     onChange(Array.from(next).join(","));
   };
-  const generatedId = React28.useId();
+  const generatedId = React30.useId();
   const groupId = id ?? generatedId;
   return /* @__PURE__ */ jsxs("div", { className: cn("ds:w-full", className), children: [
     /* @__PURE__ */ jsx(
@@ -4499,7 +4571,7 @@ function OTPInput({
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
   });
-  const inputRef = React28.useRef(null);
+  const inputRef = React30.useRef(null);
   useFormReset$1(inputRef, () => setValue(defaultValue ?? ""), wiring.name, form);
   const errorId = `${wiring.id}-error`;
   const hasError = wiring["aria-invalid"] === true;
@@ -4560,7 +4632,7 @@ function OTPSlot({ isActive, char, hasFakeCaret, hasError }) {
       className: cn(
         "ds:relative ds:flex ds:h-12 ds:w-10 ds:items-center ds:justify-center",
         "ds:rounded-input ds:bg-surface ds:text-fg ds:border ds:font-mono ds:text-lg ds:tabular-nums",
-        "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--duration-fast)]",
+        "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
         "ds:sm:h-14 ds:sm:w-12 ds:sm:text-xl",
         "ds:border-field-border",
         isActive && "ds:[border-color:var(--focus-ring-border)] ds:z-[calc(var(--z-base)+10)] ds:[box-shadow:var(--shadow-focus-ring-field)]",
@@ -5338,10 +5410,25 @@ function CountryFlag2({ iso }) {
     }
   );
 }
+var COUNTRY_SELECT_SIZE_ROWS = {
+  xs: "ds:h-(--control-height-xs) ds:w-[72px] ds:gap-1 ds:px-2 ds:text-xs",
+  sm: "ds:h-(--control-height-sm) ds:w-[80px] ds:gap-1 ds:px-2 ds:text-xs",
+  md: "ds:h-(--control-height-md) ds:w-[90px] ds:gap-1.5 ds:px-2.5 ds:text-sm",
+  lg: "ds:h-(--control-height-lg) ds:w-[100px] ds:gap-2 ds:px-3 ds:text-sm",
+  xl: "ds:h-(--control-height-xl) ds:w-[120px] ds:gap-2 ds:px-3.5 ds:text-base"
+};
+var COUNTRY_SELECT_ICON_SIZE = {
+  xs: "ds:size-2.5",
+  sm: "ds:size-2.5",
+  md: "ds:size-3",
+  lg: "ds:size-3.5",
+  xl: "ds:size-4"
+};
 function CountrySelect({
   value,
   onChange,
-  disabled
+  disabled,
+  size
 }) {
   const messages = useDsMessages("phoneCountryInput");
   const [open, setOpen] = useState(false);
@@ -5371,14 +5458,17 @@ function CountrySelect({
             type: "button",
             disabled,
             "aria-label": messages.selectCountry,
-            className: "ds:rounded-input ds:flex ds:h-9 ds:w-[90px] ds:shrink-0 ds:items-center ds:gap-1.5 ds:border ds:border-field-border ds:bg-surface ds:px-2.5 ds:text-sm ds:text-fg ds:transition-colors ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none ds:motion-reduce:transition-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
+            className: size == null ? "ds:rounded-input ds:flex ds:h-9 ds:w-[90px] ds:shrink-0 ds:items-center ds:gap-1.5 ds:border ds:border-field-border ds:bg-surface ds:px-2.5 ds:text-sm ds:text-fg ds:transition-colors ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none ds:motion-reduce:transition-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled" : cn(
+              "ds:rounded-input ds:flex ds:shrink-0 ds:items-center ds:border ds:border-field-border ds:bg-surface ds:text-fg ds:transition-colors ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none ds:motion-reduce:transition-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
+              COUNTRY_SELECT_SIZE_ROWS[size]
+            ),
             children: [
               /* @__PURE__ */ jsx(CountryFlag2, { iso: selected.iso }),
               /* @__PURE__ */ jsx("span", { className: "ds:text-xs ds:tabular-nums ds:text-fg-3", children: selected.dialCode }),
               /* @__PURE__ */ jsx(
                 ChevronDownIcon,
                 {
-                  className: "ds:ml-auto ds:size-3 ds:shrink-0 ds:text-fg-3",
+                  className: cn("ds:ml-auto ds:shrink-0 ds:text-fg-3", COUNTRY_SELECT_ICON_SIZE[size ?? "md"]),
                   "aria-hidden": "true"
                 }
               )
@@ -5546,18 +5636,18 @@ function PriorityIcon({ priority, size = 16, className, ...props }) {
         )),
         priority === "urgent" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "12", height: "12", rx: "3", fill: "var(--ds-color-priority-urgent, var(--color-priority-urgent))" }),
-          /* @__PURE__ */ jsx("rect", { x: "7.25", y: "3.75", width: "1.5", height: "5", rx: "0.75", fill: "#fff" }),
-          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.25", r: "1", fill: "#fff" })
+          /* @__PURE__ */ jsx("rect", { x: "7.25", y: "3.75", width: "1.5", height: "5", rx: "0.75", fill: "var(--ds-color-feedback-danger-solid-fg, var(--color-fg-on-danger))" }),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.25", r: "1", fill: "var(--ds-color-feedback-danger-solid-fg, var(--color-fg-on-danger))" })
         ] })
       ]
     }
   );
 }
-var RadioGroupContext = React28.createContext({
+var RadioGroupContext = React30.createContext({
   appearance: "plain",
   invalid: false
 });
-var RadioGroup2 = React28.forwardRef(function RadioGroup3({
+var RadioGroup2 = React30.forwardRef(function RadioGroup3({
   className,
   appearance = "plain",
   invalid,
@@ -5589,12 +5679,12 @@ var RadioGroup2 = React28.forwardRef(function RadioGroup3({
     defaultProp: defaultValue ?? null,
     onChange: onValueChange
   });
-  const initialValue = React28.useRef(valueProp ?? defaultValue ?? null);
-  const rootRef = React28.useRef(null);
+  const initialValue = React30.useRef(valueProp ?? defaultValue ?? null);
+  const rootRef = React30.useRef(null);
   useFormReset(rootRef, () => setValue(initialValue.current));
   const mergedRef = useMergedRefs(ref, rootRef);
   const isInvalid = wiring["aria-invalid"] === true;
-  const context = React28.useMemo(
+  const context = React30.useMemo(
     () => ({ appearance, invalid: isInvalid }),
     [appearance, isInvalid]
   );
@@ -5627,10 +5717,11 @@ var ITEM_CLASSES = cn(
   "ds:hover:border-fg-4",
   "ds:focus-visible:[border-color:var(--focus-ring-border)] ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)] ds:focus-visible:outline-none",
   "ds:data-[state=checked]:border-brand",
-  "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:cursor-not-allowed",
+  "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed",
+  "ds:disabled:data-[state=checked]:border-rule",
   "ds:aria-[invalid=true]:border-danger-line"
 );
-var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
+var RadioGroupItem = React30.forwardRef(function RadioGroupItem2({
   className,
   label,
   description,
@@ -5639,9 +5730,9 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
   "aria-invalid": ariaInvalid,
   ...props
 }, ref) {
-  const generatedId = React28.useId();
+  const generatedId = React30.useId();
   const id = providedId ?? generatedId;
-  const { appearance, invalid } = React28.useContext(RadioGroupContext);
+  const { appearance, invalid } = React30.useContext(RadioGroupContext);
   const card = appearance === "card";
   const descriptionId = card && description ? `${id}-description` : void 0;
   const root = /* @__PURE__ */ jsx(
@@ -5658,8 +5749,8 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
         RadioGroupPrimitive.Indicator,
         {
           ...slot(radioGroupAnatomy, "indicator"),
-          className: "ds:flex ds:items-center ds:justify-center",
-          children: /* @__PURE__ */ jsx(CircleIcon, { className: "ds:fill-brand ds:text-brand ds:size-2", "aria-hidden": "true" })
+          className: "ds:flex ds:items-center ds:justify-center ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:zoom-in-50 ds:duration-[var(--motion-duration-press)] ds:ease-[var(--motion-ease-enter)]",
+          children: /* @__PURE__ */ jsx(CircleIcon, { className: "ds:fill-current ds:size-2", "aria-hidden": "true" })
         }
       )
     }
@@ -5777,19 +5868,19 @@ function ResponsiveDialog({
   side,
   size = "md"
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React28.useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(defaultOpen);
   const controlled = open !== void 0;
   const isOpen = controlled ? open : uncontrolledOpen;
-  const handleOpenChange = React28.useCallback(
+  const handleOpenChange = React30.useCallback(
     (next) => {
       if (!controlled) setUncontrolledOpen(next);
       onOpenChange?.(next);
     },
     [controlled, onOpenChange]
   );
-  const close = React28.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+  const close = React30.useCallback(() => handleOpenChange(false), [handleOpenChange]);
   const hasTitle = title !== void 0 && title !== null && title !== "";
-  React28.useEffect(() => {
+  React30.useEffect(() => {
     if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
     if (!hasTitle) {
       errorOnce(
@@ -5847,7 +5938,7 @@ var RouteTransition = forwardRef(
   }
 );
 RouteTransition.displayName = "RouteTransition";
-var ScrollArea = React28.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
+var ScrollArea = React30.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
     {
@@ -5870,7 +5961,7 @@ var ScrollArea = React28.forwardRef(function ScrollArea2({ className, children,
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React28.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
+var ScrollBar = React30.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
   return /* @__PURE__ */ jsx(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
@@ -5910,7 +6001,7 @@ var SEARCH_RESET = "ds:[&::-webkit-search-cancel-button]:appearance-none ds:[&::
 var SEARCH_INPUT_SIZE_ROWS = {
   sm: "ds:h-(--control-height-sm) ds:pl-8 ds:pr-8 ds:text-(length:--control-font-size-sm)",
   md: "ds:h-(--control-height-md) ds:pl-9 ds:pr-9 ds:text-(length:--control-font-size-md)",
-  lg: "ds:h-(--search-input-height-lg) ds:pl-10 ds:pr-10 ds:text-sm",
+  lg: "ds:h-(--control-height-lg) ds:pl-10 ds:pr-10 ds:text-sm",
   compact: "ds:h-(--control-height-sm) ds:pl-8 ds:pr-8 ds:text-(length:--control-font-size-sm)",
   default: "ds:h-(--control-height-lg) ds:pl-9 ds:pr-9 ds:text-sm",
   comfortable: "ds:h-(--control-height-xl) ds:pl-10 ds:pr-10 ds:text-base"
@@ -5921,25 +6012,14 @@ function searchInputVariants({
   class: classProp,
   className
 } = {}) {
-  const LEGACY_ROWS = {
-    // `sm` is the dense control tier: h-8 + 13px, so a search box lines up
-    // pixel-for-pixel (height AND text) with Button / MultiFilterPill /
-    // FilterChip at their `sm` tier in a toolbar row.
-    sm: "ds:h-8 ds:pl-8 ds:pr-8 ds:text-[13px]",
-    md: "ds:h-9 ds:pl-9 ds:pr-9 ds:text-[13px]",
-    lg: "ds:h-11 ds:pl-10 ds:pr-10 ds:text-sm",
-    compact: "ds:h-8 ds:pl-8 ds:pr-8 ds:text-[13px]",
-    default: "ds:h-10 ds:pl-9 ds:pr-9 ds:text-sm",
-    comfortable: "ds:h-12 ds:pl-10 ds:pr-10 ds:text-base"
-  };
-  const row = size ? SEARCH_INPUT_SIZE_ROWS[size] : LEGACY_ROWS[inputSize ?? "md"];
+  const row = SEARCH_INPUT_SIZE_ROWS[size ?? inputSize ?? "md"];
   return controlChrome({
     variant: "default",
     size: null,
     class: cn(SEARCH_RESET, row, classProp, className) || void 0
   });
 }
-var SearchInput = React28.forwardRef(
+var SearchInput = React30.forwardRef(
   function SearchInput2({
     value,
     onValueChange,
@@ -5978,20 +6058,20 @@ var SearchInput = React28.forwardRef(
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy
     });
-    const inputRef = React28.useRef(null);
+    const inputRef = React30.useRef(null);
     const setRefs = useMergedRefs(ref, wiringRef, inputRef);
     const debouncedValue = useDebounce(value, debounceMs);
-    const isFirstRender = React28.useRef(true);
-    React28.useEffect(() => {
+    const isFirstRender = React30.useRef(true);
+    React30.useEffect(() => {
       if (isFirstRender.current) {
         isFirstRender.current = false;
         return;
       }
       onSearch?.(debouncedValue);
     }, [debouncedValue, onSearch]);
-    const latestChange = React28.useRef(onValueChange);
+    const latestChange = React30.useRef(onValueChange);
     latestChange.current = onValueChange;
-    React28.useEffect(() => {
+    React30.useEffect(() => {
       const owner = inputRef.current?.form;
       if (!owner) return;
       const handle = () => latestChange.current("");
@@ -6121,7 +6201,8 @@ function SearchSelect({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
-  id
+  id,
+  size
 }) {
   deprecate(
     CONTRACT,
@@ -6133,20 +6214,20 @@ function SearchSelect({
   const createNewLabel = createNewLabelProp ?? copy.createNew;
   const isSingleMode = value !== void 0 || onValueChange !== void 0;
   const closeOnSelect = isSingleMode || closeOnSelectProp;
-  const byId = React28.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
+  const byId = React30.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
   const singleSelectedOption = isSingleMode && value ? byId.get(value) ?? null : null;
-  const selected = React28.useMemo(
+  const selected = React30.useMemo(
     () => isSingleMode ? singleSelectedOption ? [singleSelectedOption] : [] : selectedProp ?? [],
     [isSingleMode, singleSelectedOption, selectedProp]
   );
-  const selectedIds = React28.useMemo(() => selected.map((s) => s.id), [selected]);
-  const [open, setOpen] = React28.useState(false);
-  const [search, setSearch] = React28.useState("");
-  const [activeChip, setActiveChip] = React28.useState(null);
-  const hasGroups = React28.useMemo(() => options.some((o) => o.group != null), [options]);
-  const hasLeadingDot = React28.useMemo(() => options.some((o) => !!o.color), [options]);
-  const pinnedSet = React28.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
-  const chips = React28.useMemo(() => {
+  const selectedIds = React30.useMemo(() => selected.map((s) => s.id), [selected]);
+  const [open, setOpen] = React30.useState(false);
+  const [search, setSearch] = React30.useState("");
+  const [activeChip, setActiveChip] = React30.useState(null);
+  const hasGroups = React30.useMemo(() => options.some((o) => o.group != null), [options]);
+  const hasLeadingDot = React30.useMemo(() => options.some((o) => !!o.color), [options]);
+  const pinnedSet = React30.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
+  const chips = React30.useMemo(() => {
     if (!groupFilter || !hasGroups) return [];
     const seen = [];
     for (const option of options) {
@@ -6158,7 +6239,7 @@ function SearchSelect({
   }, [groupFilter, hasGroups, options, pinnedSet]);
   const chipActive = chips.length > 0 && activeChip !== null;
   const trimmed = search.trim();
-  const groupCounts = React28.useMemo(() => {
+  const groupCounts = React30.useMemo(() => {
     const counts = /* @__PURE__ */ new Map();
     if (!showGroupCounts || trimmed) return counts;
     for (const option of options) {
@@ -6168,7 +6249,7 @@ function SearchSelect({
     }
     return counts;
   }, [showGroupCounts, trimmed, options, selectedIds]);
-  const rows = React28.useMemo(
+  const rows = React30.useMemo(
     () => options.filter((option) => !chipActive || option.group === activeChip).map((option) => {
       const heading = chipActive ? void 0 : option.group ?? void 0;
       const count = heading ? groupCounts.get(heading) : void 0;
@@ -6191,7 +6272,7 @@ function SearchSelect({
   };
   const singleValue = closeOnSelect ? selected[0] ?? null : null;
   const showValue = singleValue !== null && !open;
-  const renderValue = React28.useCallback(
+  const renderValue = React30.useCallback(
     (row) => {
       const source = sourceOf(row);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6220,7 +6301,7 @@ function SearchSelect({
     },
     [descriptionVariant]
   );
-  const messages = React28.useMemo(
+  const messages = React30.useMemo(
     () => ({
       empty: search ? copy.empty : copy.noOptions,
       clear: singleValue ? copy.clearNamed(singleValue.label) : copy.clear,
@@ -6270,6 +6351,7 @@ function SearchSelect({
   const shared = {
     options: rows,
     id,
+    size,
     "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : placeholder),
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -6359,7 +6441,7 @@ function SearchSelect({
   ] });
 }
 SearchSelect.displayName = "SearchSelect";
-var Separator2 = React28.forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+var Separator2 = React30.forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -6496,7 +6578,7 @@ var THUMB_SIZE = {
   md: "ds:size-4",
   lg: "ds:size-(--control-icon-xl)"
 };
-var Slider = React28.forwardRef(
+var Slider = React30.forwardRef(
   function Slider2({
     className,
     label,
@@ -6533,8 +6615,8 @@ var Slider = React28.forwardRef(
       defaultProp: defaultValue,
       onChange: onValueChange
     });
-    const initialValue = React28.useRef(valueProp ?? defaultValue);
-    const rootRef = React28.useRef(null);
+    const initialValue = React30.useRef(valueProp ?? defaultValue);
+    const rootRef = React30.useRef(null);
     useFormReset(rootRef, () => setValue(initialValue.current), form);
     const mergedRef = useMergedRefs(ref, rootRef);
     const displayValue = (() => {
@@ -6890,7 +6972,7 @@ var StackedBarChart = forwardRef(
             children: ticks.map((t) => /* @__PURE__ */ jsx(
               "span",
               {
-                className: "ds:absolute ds:right-0 ds:-translate-y-1/2 ds:leading-none",
+                className: "ds:absolute ds:right-0 ds:translate-y-1/2 ds:leading-none",
                 style: { bottom: `${t / niceMax * 100}%` },
                 children: formatValue(t)
               },
@@ -7313,7 +7395,9 @@ var StickyActionBar = forwardRef(
         className: cn(
           mode === "fixed" ? "ds:fixed" : "ds:sticky",
           "ds:inset-x-0 ds:z-[calc(var(--z-base)+20)] ds:flex ds:flex-wrap ds:items-center ds:gap-3",
-          "ds:border-t ds:border-rule ds:bg-surface/80 ds:px-4 ds:py-3 ds:backdrop-blur-md ds:sm:px-6",
+          // Translucent only where the blur behind it exists; an opaque bar
+          // otherwise, so page content never shows through un-blurred.
+          "ds:border-t ds:border-rule ds:bg-surface ds:px-4 ds:py-3 ds:backdrop-blur-md ds:sm:px-6",
           "ds:supports-[backdrop-filter]:bg-surface/80",
           offsetForMobileNav ? "ds:bottom-[calc(3.5rem_+_env(safe-area-inset-bottom))] ds:sm:bottom-0" : "ds:bottom-0",
           className
@@ -7442,6 +7526,55 @@ var SuiteProgress = forwardRef(function SuiteProgress2({
   );
 });
 SuiteProgress.displayName = "SuiteProgress";
+var TableDensityToggle = React30.forwardRef(
+  function TableDensityToggle2({
+    value,
+    onValueChange,
+    size = "sm",
+    messages: messagesOverride,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    className
+  }, ref) {
+    const messages = useDsMessages("tableDensity", messagesOverride);
+    const itemClassName = "ds:aspect-square ds:px-0 ds:[&_svg]:size-4";
+    return /* @__PURE__ */ jsxs(
+      ToggleGroup,
+      {
+        ref,
+        type: "single",
+        variant: "segmented",
+        size,
+        value,
+        onValueChange: (next) => {
+          if (next) onValueChange(next);
+        },
+        "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? messages.label,
+        "aria-labelledby": ariaLabelledBy,
+        className,
+        children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              ToggleGroupItem,
+              {
+                value: "comfortable",
+                "aria-label": messages.comfortable,
+                className: itemClassName,
+                children: /* @__PURE__ */ jsx(RowsIcon, {})
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: messages.comfortable })
+          ] }),
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToggleGroupItem, { value: "compact", "aria-label": messages.compact, className: itemClassName, children: /* @__PURE__ */ jsx(Rows4Icon, {}) }) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: messages.compact })
+          ] })
+        ]
+      }
+    );
+  }
+);
+TableDensityToggle.displayName = "TableDensityToggle";
 var ToastContext = createContext(null);
 function useToast() {
   const ctx = useContext(ToastContext);
@@ -8097,7 +8230,7 @@ var StatusBadge = forwardRef(function StatusBadge2({
             className: cn(
               "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
               // The dot is its own 6px box, as on Badge; glyphs and the spinner sit in the 14px icon box.
-              !showDot && "ds:size-3.5"
+              !showDot && "ds:size-3.5 ds:[&>svg]:max-h-full ds:[&>svg]:max-w-full"
             ),
             "aria-hidden": "true",
             children: indicator
@@ -8188,6 +8321,9 @@ function MultiSelect(props) {
   return /* @__PURE__ */ jsx(Combobox, { ...props, multiple: true });
 }
 MultiSelect.displayName = "MultiSelect";
+
+// src/foundation/use-reduced-motion.ts
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 var statusLabel = {
   "not-started": "Not started",
   "in-progress": "In progress",
@@ -8236,8 +8372,9 @@ var QuestionnairePanel = forwardRef(
     const selectedCardRef = useRef(null);
     const titleId = useId();
     useEffect(() => {
+      const reduce = typeof window !== "undefined" && window.matchMedia?.(REDUCED_MOTION_QUERY).matches;
       selectedCardRef.current?.scrollIntoView({
-        behavior: "smooth",
+        behavior: reduce ? "auto" : "smooth",
         block: "center",
         inline: "center"
       });
@@ -8272,7 +8409,7 @@ var QuestionnairePanel = forwardRef(
                   "aria-expanded": isOpen,
                   className: cn(
                     "ds:text-brand ds:flex ds:h-8 ds:w-full ds:items-center ds:gap-2 ds:px-4 ds:text-left ds:text-[11px] ds:font-bold ds:tracking-[0.08em] ds:uppercase",
-                    "ds:hover:bg-brand-bg/50 ds:transition-colors ds:duration-[var(--duration-fast)]",
+                    "ds:hover:bg-brand-bg/50 ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
                     "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
                   ),
                   children: [
@@ -8284,7 +8421,7 @@ var QuestionnairePanel = forwardRef(
                         size: 13,
                         "aria-hidden": "true",
                         className: cn(
-                          "ds:text-brand ds:transition-transform ds:duration-[var(--duration-fast)]",
+                          "ds:text-brand ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
                           !isOpen && "ds:-rotate-90"
                         )
                       }
@@ -8303,7 +8440,7 @@ var QuestionnairePanel = forwardRef(
                     "data-active": selected ? "true" : void 0,
                     className: cn(
                       "ds:group ds:flex ds:h-8 ds:w-full ds:items-center ds:gap-3 ds:px-5 ds:text-left",
-                      "ds:text-fg-2 ds:transition-colors ds:duration-[var(--duration-fast)]",
+                      "ds:text-fg-2 ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
                       "ds:hover:bg-surface-hover ds:hover:text-fg",
                       "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
                       selected && "ds:bg-brand-bg ds:text-brand ds:font-semibold"
@@ -8542,7 +8679,9 @@ var FolderTree = forwardRef(function FolderTree2({ nodes, activeId, onSelect, de
               toggle(node.id);
             },
             className: cn(
-              "ds:shrink-0 ds:text-fg-4 ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
+              "ds:shrink-0 ds:rounded-icon ds:text-fg-4 ds:hover:text-fg-2",
+              "ds:transition-[color,transform] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
+              "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
               isOpen && "ds:rotate-90"
             ),
             children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, "aria-hidden": "true" })
@@ -8617,7 +8756,13 @@ function SegmentedControl({
       ...disabled !== void 0 && { disabled },
       "aria-label": aria["aria-label"],
       "aria-labelledby": aria["aria-labelledby"],
-      className: cn("ds:bg-bg-2 ds:rounded-pill ds:p-0.5", className),
+      className: cn(
+        // `segmented` gets its track chrome from `ToggleGroup` itself
+        // (quiet surface-sunken well, control radius, hairline border) —
+        // this preset's own bare pill track is the `default`/`outline` look.
+        variant === "segmented" ? void 0 : "ds:bg-bg-2 ds:rounded-pill ds:p-0.5",
+        className
+      ),
       children: options.map((option) => /* @__PURE__ */ jsxs(
         ToggleGroupItem,
         {
@@ -8686,6 +8831,195 @@ var Content6 = forwardRef(function Content7({ padding = "default", padTop, padBo
   );
 });
 Content6.displayName = "Content";
+function matchesPath(href, currentPath, mode = "prefix") {
+  if (currentPath === href) return true;
+  if (mode === "exact") return false;
+  return currentPath.startsWith(href.endsWith("/") ? href : `${href}/`);
+}
+function findActiveId(sections, currentPath) {
+  let activeId = null;
+  let longest = -1;
+  const visit = (items) => {
+    for (const item of items) {
+      if (matchesPath(item.href, currentPath, item.match) && item.href.length > longest) {
+        longest = item.href.length;
+        activeId = item.id;
+      }
+      if (item.children) visit(item.children);
+    }
+  };
+  for (const section of sections) visit(section.items);
+  return activeId;
+}
+function hasActiveDescendant(item, activeId) {
+  if (!item.children || activeId == null) return false;
+  return item.children.some((child) => child.id === activeId || hasActiveDescendant(child, activeId));
+}
+var TRUNCATED_LABEL_CLASSNAME = "ds:line-clamp-none ds:truncate";
+function getNodeText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getNodeText).filter(Boolean).join(" ");
+  if (React30.isValidElement(node)) {
+    return getNodeText(node.props.children);
+  }
+  return "";
+}
+function getAccessibleLabel(item) {
+  const parts = [getNodeText(item.label), item.badge != null ? getNodeText(item.badge) : ""];
+  return parts.filter(Boolean).join(", ") || void 0;
+}
+function AppSidebarItemContent({ item, showTitle }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon,
+    /* @__PURE__ */ jsx(
+      SidebarLinkLabel,
+      {
+        className: TRUNCATED_LABEL_CLASSNAME,
+        title: showTitle && typeof item.label === "string" ? item.label : void 0,
+        children: item.label
+      }
+    ),
+    item.badge != null && /* @__PURE__ */ jsx(SidebarLinkBadge, { tone: item.badgeTone, children: item.badge })
+  ] });
+}
+function AppSidebarLeafLink({
+  item,
+  active,
+  showTitle,
+  RouterLink
+}) {
+  return /* @__PURE__ */ jsx(SidebarLink, { asChild: true, active, "aria-label": getAccessibleLabel(item), children: /* @__PURE__ */ jsx(RouterLink, { href: item.href, ...item.linkProps, children: /* @__PURE__ */ jsx(AppSidebarItemContent, { item, showTitle }) }) });
+}
+function AppSidebarRow({
+  item,
+  activeId,
+  showTitle,
+  RouterLink
+}) {
+  const active = item.id === activeId;
+  if (!item.children || item.children.length === 0) {
+    return /* @__PURE__ */ jsx(AppSidebarLeafLink, { item, active, showTitle, RouterLink });
+  }
+  return /* @__PURE__ */ jsx(
+    SidebarLinkGroup,
+    {
+      id: item.id,
+      icon: item.icon,
+      label: (
+        // `SidebarLinkGroup` wraps `label` in its own frozen `line-clamp-1`
+        // span (not ours to override via className), so truncation has to
+        // come from this inner block instead: a definite width (`w-full`)
+        // plus the standard ellipsis trio truncates regardless of the
+        // ancestor's `-webkit-box` display.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ds:block ds:w-full ds:truncate",
+            title: showTitle && typeof item.label === "string" ? item.label : void 0,
+            children: item.label
+          }
+        )
+      ),
+      href: item.href,
+      active,
+      defaultOpen: active || hasActiveDescendant(item, activeId),
+      children: item.children.map((child) => /* @__PURE__ */ jsx(AppSidebarRow, { item: child, activeId, showTitle, RouterLink }, child.id))
+    }
+  );
+}
+function AppSidebarNav({
+  sections,
+  currentPath,
+  sectionClassName,
+  collapsible = false
+}) {
+  const RouterLink = useLinkComponent() ?? PlainLink;
+  const activeId = React30.useMemo(() => findActiveId(sections, currentPath), [sections, currentPath]);
+  const { state } = useSidebarState();
+  const showTitle = !(collapsible && state === "rail");
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => /* @__PURE__ */ jsx(
+    SidebarSection,
+    {
+      label: section.label,
+      headerActions: section.headerActions,
+      className: sectionClassName,
+      children: section.items.map((item) => /* @__PURE__ */ jsx(
+        AppSidebarRow,
+        {
+          item,
+          activeId,
+          showTitle,
+          RouterLink
+        },
+        item.id
+      ))
+    },
+    section.id
+  )) });
+}
+AppSidebarNav.displayName = "AppSidebarNav";
+var AppSidebar = React30.forwardRef(function AppSidebar2({
+  sections,
+  currentPath,
+  sectionClassName,
+  brand,
+  footer,
+  user,
+  variant = "flush",
+  collapsible,
+  className,
+  classNames,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    Sidebar,
+    {
+      ref,
+      variant,
+      ...collapsible !== void 0 && { collapsible },
+      className: cn(classNames?.root, className),
+      ...props,
+      children: [
+        brand,
+        /* @__PURE__ */ jsx(
+          AppSidebarNav,
+          {
+            sections,
+            currentPath,
+            sectionClassName: cn(classNames?.section, sectionClassName),
+            collapsible
+          }
+        ),
+        (footer != null || user != null) && /* @__PURE__ */ jsxs(SidebarFooter, { className: "ds:mt-auto ds:border-t-0 ds:px-0 ds:pt-2 ds:pb-0", children: [
+          footer,
+          user != null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "ds:flex ds:w-full ds:min-w-0 ds:items-center ds:gap-2.5 ds:border-rule ds:border-t ds:px-2 ds:pt-2.5",
+                // <SidebarUser> already renders a 28px avatar (`size="sm"`)
+                // and a 13px/medium name — both already the body-sm role's
+                // computed size. Only the subtitle moves off its default
+                // fg-4/mono treatment, reached through the part's own
+                // `data-slot` (ADR-008) instead of a second copy of
+                // SidebarUser's markup.
+                "ds:[&_[data-slot=sidebar-user-subtitle]]:font-sans ds:[&_[data-slot=sidebar-user-subtitle]]:text-caption ds:[&_[data-slot=sidebar-user-subtitle]]:text-fg-3",
+                // Rail: the card's border/padding has nothing left to frame
+                // once the name/subtitle collapse to a lone avatar —
+                // <SidebarUser> already carries `data-collapsed` for it.
+                "ds:has-[[data-collapsed]]:border-0 ds:has-[[data-collapsed]]:px-0 ds:has-[[data-collapsed]]:pt-0",
+                classNames?.footer
+              ),
+              children: /* @__PURE__ */ jsx(SidebarUser, { ...user })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+AppSidebar.displayName = "AppSidebar";
 var AppHeader = forwardRef(function AppHeader2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "header",
@@ -9305,7 +9639,12 @@ var KanbanColumn = forwardRef(function KanbanColumn2({ title, count, className,
 KanbanColumn.displayName = "KanbanColumn";
 var kanbanCardBase = cn(
   "ds:bg-surface ds:border ds:border-rule ds:rounded-card ds:shadow-quiet ds:p-3 ds:space-y-2 ds:cursor-grab",
-  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:hover:border-rule-strong ds:motion-reduce:transition-none"
+  // Card `interactive`'s lift (F14): a shadow step, no geometry, so a column
+  // never jitters under the pointer.
+  "ds:transition-[border-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:hover:border-rule-strong ds:hover:shadow-raised ds:motion-reduce:transition-none",
+  "ds:active:cursor-grabbing",
+  // Drag libraries (dnd-kit, @hello-pangea/dnd) make the card focusable.
+  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
 );
 var priorityConfig = {
   high: { label: "High", variant: "destructive" },
@@ -9361,7 +9700,7 @@ var MessageBubble = forwardRef(function MessageBubble2({ avatar, name, timestamp
           "span",
           {
             className: cn(
-              "ds:ml-auto ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none",
+              "ds:ml-auto ds:opacity-0 ds:transition-opacity ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
               "ds:group-hover/bubble:opacity-100 ds:group-focus-within/bubble:opacity-100"
             ),
             children: actions
@@ -9407,7 +9746,9 @@ var MessageBubbleAction = forwardRef(
         ref,
         type,
         className: cn(
-          "ds:text-fg-4 ds:text-[10px] ds:focus-visible:outline-none",
+          "ds:text-fg-4 ds:text-[10px] ds:rounded-badge",
+          "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
+          "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
           destructive ? "ds:hover:text-danger-fg" : "ds:hover:text-fg",
           className
         ),
@@ -9471,7 +9812,9 @@ var MessageComposer = forwardRef(
         className: cn(
           "ds:relative ds:flex ds:flex-col",
           "ds:border-rule ds:bg-input-background ds:rounded-xl ds:border",
-          "ds:transition-shadow ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
+          // Border, fill and shadow move together on focus-within; transitioning the
+          // shadow alone let the border and fill snap.
+          "ds:transition-[border-color,background-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
           "ds:focus-within:border-accent-ring ds:focus-within:bg-surface ds:focus-within:shadow-flat",
           isDisabled && "ds:pointer-events-none ds:opacity-60",
           className
@@ -9487,10 +9830,10 @@ var MessageComposer = forwardRef(
               className: "ds:flex ds:w-full ds:gap-1.5 ds:overflow-x-auto",
               style: { maskImage, WebkitMaskImage: maskImage },
               children: chipsLoading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(
-                "div",
+                Skeleton,
                 {
                   "aria-hidden": "true",
-                  className: "ds:bg-bg-3 ds:h-6 ds:w-20 ds:shrink-0 ds:animate-pulse ds:rounded-full ds:motion-reduce:animate-none"
+                  className: "ds:h-6 ds:w-20 ds:shrink-0 ds:rounded-full"
                 },
                 i
               )) : chips.map((chip) => /* @__PURE__ */ jsx(
@@ -9566,7 +9909,7 @@ var NotificationPanelHeader = forwardRef(
               {
                 type: "button",
                 onClick: onMarkAllRead,
-                className: "ds:text-brand ds:rounded-md ds:px-1.5 ds:py-1 ds:text-sm ds:font-medium ds:hover:bg-[color:var(--color-brand-bg)] ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
+                className: "ds:text-brand ds:rounded-md ds:px-1.5 ds:py-1 ds:text-sm ds:font-medium ds:hover:bg-brand-bg ds:active:bg-brand-bg-hover ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
                 children: "Mark all read"
               }
             ),
@@ -9576,7 +9919,7 @@ var NotificationPanelHeader = forwardRef(
                 type: "button",
                 onClick: onSettings,
                 "aria-label": "Notification settings",
-                className: "ds:text-fg-3 ds:hover:text-fg ds:hover:bg-surface-hover ds:rounded-md ds:p-1 ds:[&_svg]:size-[15px]",
+                className: "ds:text-fg-3 ds:hover:text-fg ds:hover:bg-surface-hover ds:active:bg-control-active-bg ds:rounded-md ds:p-1 ds:[&_svg]:size-[15px] ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
                 children: /* @__PURE__ */ jsx(SettingsIcon, {})
               }
             )
@@ -9610,8 +9953,9 @@ var NotificationFilter = forwardRef(
                 onClick: () => onValueChange(option),
                 "aria-pressed": selected,
                 className: cn(
-                  "ds:inline-flex ds:items-center ds:gap-1.5 ds:rounded-lg ds:px-2.5 ds:py-1 ds:capitalize ds:transition-colors",
-                  "ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
+                  "ds:inline-flex ds:items-center ds:gap-1.5 ds:rounded-lg ds:px-2.5 ds:py-1 ds:capitalize",
+                  "ds:transition-[color,background-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
+                  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
                   selected ? "ds:bg-surface ds:text-brand ds:ring-1 ds:ring-[color:var(--color-brand-line)]" : "ds:text-fg-3 ds:hover:text-fg"
                 ),
                 children: [
@@ -9684,7 +10028,9 @@ var NotificationItem = forwardRef(
         className: cn(
           "ds:flex ds:w-full ds:gap-3 ds:px-4 ds:py-3 ds:text-left ds:outline-none",
           "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-          unread ? "ds:bg-brand-bg ds:hover:bg-brand-bg-hover ds:focus-visible:bg-brand-bg-hover" : "ds:hover:bg-surface-hover/60 ds:focus-visible:bg-bg-2/60",
+          unread ? "ds:bg-brand-bg ds:hover:bg-brand-bg-hover ds:focus-visible:bg-brand-bg-hover" : "ds:hover:bg-surface-hover/60 ds:focus-visible:bg-surface-hover/60",
+          // Rows stack edge to edge, so focus is an inset outline (TableRow's).
+          "ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
           className
         ),
         ...props,
@@ -9738,7 +10084,7 @@ var NotificationPanelFooter = forwardRef(
         className: cn(
           "ds:border-rule ds:text-fg ds:hover:bg-surface-hover ds:w-full ds:border-t ds:px-4 ds:py-3 ds:text-center ds:text-sm ds:font-medium",
           "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-          "ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
+          "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
           className
         ),
         ...props,
@@ -9797,7 +10143,7 @@ var FilterChip = forwardRef(function FilterChip2({ active = false, size, count,
   );
 });
 FilterChip.displayName = "FilterChip";
-var BulkActionBarContext = React28.createContext({ tone: "surface" });
+var BulkActionBarContext = React30.createContext({ tone: "surface" });
 function actionClasses(tone, destructive) {
   const base = cn(
     "ds:inline-flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-btn ds:px-3 ds:text-[13px] ds:font-medium",
@@ -9810,18 +10156,18 @@ function actionClasses(tone, destructive) {
   if (tone === "inverse") {
     return cn(
       base,
-      "ds:data-[state=open]:bg-selection-floating-active-bg",
+      "ds:data-[state=open]:bg-selection-floating-active-bg ds:aria-expanded:bg-selection-floating-active-bg",
       destructive ? "ds:bg-danger-fg ds:text-fg-on-danger ds:hover:bg-danger-fg-hover ds:active:bg-danger-fg-active" : "ds:text-selection-floating-muted-fg ds:hover:bg-selection-floating-hover-bg ds:hover:text-selection-floating-fg"
     );
   }
   return cn(
     base,
-    "ds:data-[state=open]:bg-control-active-bg",
+    "ds:data-[state=open]:bg-control-active-bg ds:aria-expanded:bg-control-active-bg",
     destructive ? "ds:text-control-destructive-fg ds:hover:bg-control-destructive-hover-bg" : "ds:text-control-fg ds:hover:bg-control-hover-bg ds:hover:text-control-hover-fg"
   );
 }
-var BulkActionBarAction = React28.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
-  const { tone } = React28.use(BulkActionBarContext);
+var BulkActionBarAction = React30.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
+  const { tone } = React30.use(BulkActionBarContext);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -9835,7 +10181,7 @@ var BulkActionBarAction = React28.forwardRef(function BulkActionBarAction2({ asC
 });
 BulkActionBarAction.displayName = "BulkActionBarAction";
 function BulkActionBarSeparator({ className }) {
-  const { tone } = React28.use(BulkActionBarContext);
+  const { tone } = React30.use(BulkActionBarContext);
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -9848,6 +10194,7 @@ function BulkActionBarSeparator({ className }) {
     }
   );
 }
+var BAR_ENTER = "ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-bottom-2 ds:duration-[var(--motion-duration-overlay)] ds:ease-[var(--motion-ease-enter)]";
 function BulkActionBarClear({
   variant,
   clearLabel,
@@ -9893,7 +10240,7 @@ function BulkActionBar({
   const labelText = label ?? `${selectedCount} selected`;
   const tone = variant === "page-floating" ? "inverse" : "surface";
   const content = /* @__PURE__ */ jsxs(BulkActionBarContext, { value: { tone }, children: [
-    /* @__PURE__ */ jsx("span", { className: "ds:text-sm ds:font-medium ds:tabular-nums", children: labelText }),
+    /* @__PURE__ */ jsx("span", { className: "ds:text-sm ds:font-medium ds:tabular-nums ds:whitespace-nowrap", children: labelText }),
     /* @__PURE__ */ jsx(BulkActionBarSeparator, {}),
     /* @__PURE__ */ jsx("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-1", children }),
     /* @__PURE__ */ jsx("div", { className: "ds:min-w-2 ds:flex-1" }),
@@ -9917,7 +10264,7 @@ function BulkActionBar({
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface ds:text-fg ds:flex ds:items-center ds:gap-3 ds:rounded-card ds:border ds:px-6 ds:py-3 ds:shadow-card", children: content }),
+          /* @__PURE__ */ jsx("div", { className: cn("ds:border-rule ds:bg-surface ds:text-fg ds:flex ds:items-center ds:gap-3 ds:rounded-card ds:border ds:px-6 ds:py-3 ds:shadow-card", BAR_ENTER), children: content }),
           footer
         ]
       }
@@ -9933,7 +10280,7 @@ function BulkActionBar({
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { className: "ds:bg-selection-floating-bg ds:text-selection-floating-fg ds:flex ds:items-center ds:gap-2 ds:rounded-card ds:px-3.5 ds:py-1.5 ds:shadow-pop", children: content }),
+          /* @__PURE__ */ jsx("div", { className: cn("ds:bg-selection-floating-bg ds:text-selection-floating-fg ds:flex ds:items-center ds:gap-2 ds:rounded-card ds:px-3.5 ds:py-1.5 ds:shadow-pop", BAR_ENTER), children: content }),
           footer
         ]
       }
@@ -9945,7 +10292,7 @@ function BulkActionBar({
       className: cn("ds:sticky ds:bottom-4 ds:z-[var(--z-sticky)] ds:mt-3 ds:flex ds:justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface ds:flex ds:w-fit ds:max-w-full ds:items-center ds:gap-3 ds:overflow-x-auto ds:rounded-card ds:border ds:px-4 ds:py-2 ds:shadow-card", children: content }),
+        /* @__PURE__ */ jsx("div", { className: cn("ds:border-rule ds:bg-surface ds:flex ds:w-fit ds:max-w-full ds:items-center ds:gap-3 ds:overflow-x-auto ds:rounded-card ds:border ds:px-4 ds:py-2 ds:shadow-card", BAR_ENTER), children: content }),
         footer
       ]
     }
@@ -10297,7 +10644,14 @@ function DisplayMenu({
             {
               ref: flyoutRef,
               tabIndex: -1,
-              style: { top: flyout.top, width: FLYOUT_WIDTH, maxHeight: flyout.maxHeight },
+              "data-ds-presence": "floating",
+              "data-state": "open",
+              style: {
+                top: flyout.top,
+                width: FLYOUT_WIDTH,
+                maxHeight: flyout.maxHeight,
+                transformOrigin: flyout.side === "left" ? "right top" : "left top"
+              },
               className: cn(
                 // Column + overflow-hidden so the option list (the only flexible
                 // part) absorbs the height cap, while the search box and Clear
@@ -10410,35 +10764,35 @@ function DisplayMenu({
 function EmptyRow({ label = "No matches" }) {
   return /* @__PURE__ */ jsx("p", { className: "ds:px-2 ds:py-3 ds:text-center ds:text-[11px] ds:text-fg-3", children: label });
 }
-var StickyStackContext = React28.createContext(null);
+var StickyStackContext = React30.createContext(null);
 function StickyStack({
   layers,
   top = 0,
   layerMode = "fixed",
   children
 }) {
-  const [layerHeights, setLayerHeights] = React28.useState({});
-  const normalizedLayers = React28.useMemo(() => {
+  const [layerHeights, setLayerHeights] = React30.useState({});
+  const normalizedLayers = React30.useMemo(() => {
     const names = [...layers];
     if (new Set(names).size !== names.length) {
       throw new Error("StickyStack layer names must be unique.");
     }
     return names;
   }, [layers]);
-  const setLayerHeight = React28.useCallback((name, height) => {
+  const setLayerHeight = React30.useCallback((name, height) => {
     setLayerHeights((current) => {
       if (current[name] === height) return current;
       return { ...current, [name]: height };
     });
   }, []);
-  const value = React28.useMemo(
+  const value = React30.useMemo(
     () => ({ layers: normalizedLayers, layerHeights, setLayerHeight, top, layerMode }),
     [layerHeights, layerMode, normalizedLayers, setLayerHeight, top]
   );
   return /* @__PURE__ */ jsx(StickyStackContext, { value, children });
 }
 function useStickyStack(componentName) {
-  const context = React28.use(StickyStackContext);
+  const context = React30.use(StickyStackContext);
   if (!context) {
     throw new Error(`${componentName} must be rendered inside StickyStack.`);
   }
@@ -10461,21 +10815,21 @@ function stackOffset(context, layerName, includeNamedLayer) {
   const base = cssLength(top);
   return measuredOffset === 0 ? base : `calc(${base} + ${measuredOffset}px)`;
 }
-var StickyStackLayer = React28.forwardRef(
+var StickyStackLayer = React30.forwardRef(
   function StickyStackLayer2({ name, hostClassName, layerMode, className, children, style, ...props }, forwardedRef) {
     const context = useStickyStack("StickyStackLayer");
     const { setLayerHeight } = context;
     const mode = layerMode ?? context.layerMode;
     const top = stackOffset(context, name, false);
-    const hostRef = React28.useRef(null);
-    const layerRef = React28.useRef(null);
-    const [bounds, setBounds] = React28.useState({
+    const hostRef = React30.useRef(null);
+    const layerRef = React30.useRef(null);
+    const [bounds, setBounds] = React30.useState({
       height: 0,
       left: 0,
       ready: false,
       width: 0
     });
-    const setLayerRef = React28.useCallback(
+    const setLayerRef = React30.useCallback(
       (node) => {
         layerRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -10483,7 +10837,7 @@ var StickyStackLayer = React28.forwardRef(
       },
       [forwardedRef]
     );
-    const measure = React28.useCallback(() => {
+    const measure = React30.useCallback(() => {
       const host = hostRef.current;
       const layer = layerRef.current;
       if (!host || !layer) return;
@@ -10500,7 +10854,7 @@ var StickyStackLayer = React28.forwardRef(
       );
       setLayerHeight(name, next.height);
     }, [name, setLayerHeight]);
-    React28.useLayoutEffect(() => {
+    React30.useLayoutEffect(() => {
       measure();
       let frame = 0;
       const scheduleMeasure = () => {
@@ -10553,7 +10907,7 @@ var StickyStackLayer = React28.forwardRef(
   }
 );
 StickyStackLayer.displayName = "StickyStackLayer";
-var StickyStackSticky = React28.forwardRef(
+var StickyStackSticky = React30.forwardRef(
   function StickyStackSticky2({ after, className, style, ...props }, ref) {
     const context = useStickyStack("StickyStackSticky");
     const top = stackOffset(context, after, true);
@@ -10574,7 +10928,7 @@ var StickyStackSticky = React28.forwardRef(
   }
 );
 StickyStackSticky.displayName = "StickyStackSticky";
-var StickyStackSectionHeader = React28.forwardRef(function StickyStackSectionHeader2(props, ref) {
+var StickyStackSectionHeader = React30.forwardRef(function StickyStackSectionHeader2(props, ref) {
   return /* @__PURE__ */ jsx(StickyStackSticky, { ref, "data-sticky-stack-section-header": "", ...props });
 });
 StickyStackSectionHeader.displayName = "StickyStackSectionHeader";
@@ -10584,7 +10938,7 @@ function defineStatusMap(map) {
   if (map === void 0) return (entries) => entries;
   return map;
 }
-var ConfirmHostContext = React28.createContext(null);
+var ConfirmHostContext = React30.createContext(null);
 var isServer = typeof window === "undefined";
 function missingHost(hook) {
   if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
@@ -10595,8 +10949,8 @@ function missingHost(hook) {
   );
 }
 function useConfirm() {
-  const host = React28.useContext(ConfirmHostContext);
-  return React28.useMemo(() => {
+  const host = React30.useContext(ConfirmHostContext);
+  return React30.useMemo(() => {
     if (host) return host.confirm;
     return () => {
       missingHost("useConfirm");
@@ -10605,8 +10959,8 @@ function useConfirm() {
   }, [host]);
 }
 function usePrompt() {
-  const host = React28.useContext(ConfirmHostContext);
-  return React28.useMemo(() => {
+  const host = React30.useContext(ConfirmHostContext);
+  return React30.useMemo(() => {
     if (host) return host.prompt;
     return () => {
       missingHost("usePrompt");
@@ -10615,12 +10969,12 @@ function usePrompt() {
   }, [host]);
 }
 function ConfirmHost({ children }) {
-  const [queue, setQueue] = React28.useState([]);
-  const nextId = React28.useRef(0);
-  const enqueue = React28.useCallback((request) => {
+  const [queue, setQueue] = React30.useState([]);
+  const nextId = React30.useRef(0);
+  const enqueue = React30.useCallback((request) => {
     setQueue((previous) => [...previous, request]);
   }, []);
-  const value = React28.useMemo(
+  const value = React30.useMemo(
     () => ({
       confirm: (options) => {
         if (isServer) return Promise.resolve(false);
@@ -10638,7 +10992,7 @@ function ConfirmHost({ children }) {
     [enqueue]
   );
   const current = queue[0];
-  const settle = React28.useCallback(() => {
+  const settle = React30.useCallback(() => {
     setQueue((previous) => previous.slice(1));
   }, []);
   return /* @__PURE__ */ jsxs(ConfirmHostContext, { value, children: [
@@ -10649,8 +11003,8 @@ function ConfirmHost({ children }) {
 }
 ConfirmHost.displayName = "ConfirmHost";
 function useSettleOnce(resolve) {
-  const done = React28.useRef(false);
-  return React28.useCallback(
+  const done = React30.useRef(false);
+  return React30.useCallback(
     (value) => {
       if (done.current) return;
       done.current = true;
@@ -10673,7 +11027,7 @@ function HostedConfirm({
   request,
   onSettled
 }) {
-  const [open, setOpen] = React28.useState(true);
+  const [open, setOpen] = React30.useState(true);
   const settle = useSettleOnce(request.resolve);
   return /* @__PURE__ */ jsx(
     ConfirmDialog,
@@ -10698,8 +11052,8 @@ function HostedPrompt({
   onSettled
 }) {
   const { options } = request;
-  const [open, setOpen] = React28.useState(true);
-  const [value, setValue] = React28.useState(options.defaultValue ?? "");
+  const [open, setOpen] = React30.useState(true);
+  const [value, setValue] = React30.useState(options.defaultValue ?? "");
   const settle = useSettleOnce(request.resolve);
   const empty = value.trim() === "";
   const accessibleName = options.label === void 0 && typeof options.title === "string" ? options.title : void 0;
@@ -11201,7 +11555,7 @@ function PeoplePicker(props) {
     ...rest
   } = props;
   const messages = useDsMessages("peoplePicker");
-  const byId = React28.useMemo(
+  const byId = React30.useMemo(
     () => new Map(people.map((person) => [person.id, person])),
     [people]
   );
@@ -11278,7 +11632,39 @@ function PeoplePicker(props) {
     }
   );
 }
+function readStorage(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const stored = window.localStorage.getItem(key);
+    return stored === "comfortable" || stored === "compact" ? stored : null;
+  } catch {
+    return null;
+  }
+}
+function writeStorage(key, next) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, next);
+  } catch {
+  }
+}
+function useTableDensity(options) {
+  const { storageKey, defaultDensity = "comfortable" } = options ?? {};
+  const [density, setDensityState] = useState(defaultDensity);
+  useEffect(() => {
+    const stored = readStorage(storageKey);
+    if (stored && stored !== defaultDensity) setDensityState(stored);
+  }, []);
+  const setDensity = useCallback(
+    (next) => {
+      setDensityState(next);
+      writeStorage(storageKey, next);
+    },
+    [storageKey]
+  );
+  return { density, setDensity };
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, AspectRatio, AttachmentChip, AvatarGroup, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, COUNTRY_CODES, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Code, CommandPalette, ConfirmActionButton, ConfirmDialog, ConfirmHost, Content6 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CountryFlag2 as CountryFlag, CountrySelect, DATE_DISPLAY_PLACEHOLDER, DEFAULT_PHONE_FIELD_MESSAGES, DangerAction, DataItem, DataTablePattern, DatePicker, DateRangePicker, DesignSystemProvider, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DonutChart, EmptyState, ErrorState, Eyebrow, Field, FieldControl, FieldDescription, FieldError, Fieldset, FieldsetLegend, FileTypeBadge, FilterChip, FolderTree, FormError, FormSection, FormSuccess, Heading, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, ICON_TILE_TONE_TO_INTENT, IconAction, IconTile, InfoHint, Inline, Kanban, KanbanCard, KanbanColumn, Kbd, KbdHint, KeyboardShortcutsDialog, KpiCard, Label2 as Label, LinkAction, LinkButton, LoadingRows, Main, MasterDetailLayout, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageComposer, MetadataGrid, MultiFilterPill, MultiSelect, MultiSelectField, MutedSpec, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, NumberInput, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, PdfPreview, PeoplePicker, PhoneCountryInput, PhoneField, PhoneInput, PrimaryAction, PriorityIcon, QuestionnairePanel, RadioGroup2 as RadioGroup, RadioGroupItem, RankedBars, ResponsiveDialog, RouteTransition, ScrollArea, ScrollBar, SearchInput, SearchSelect, SecondaryAction, SectionCard, SegmentedControl, SelectableKpiCard, Separator2 as Separator, Shell, SideDrawer, Skeleton, SkeletonCircle, SkeletonText, Slider, SpreadsheetPreview, Stack, StackedBarChart, StarRating, StatusBadge, StatusIcon, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, SubmitButton, SuiteProgress, Surface, TableEmpty, TableError, TableLoading, Text, ToastProvider, Toolbar, VisuallyHidden, YEAR_DISPLAY_PLACEHOLDER, alertVariants, applyMask, applyYearMask, attachmentChipVariants, cardVariants, dateToIso, defineStatusMap, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, getFlagEmoji, resolveIconTileVariants as iconTileVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parsePhoneForEditing, searchInputVariants, starRatingVariants, suiteProgressFillVariants, useConfirm, usePrompt, useToast, yearToIso };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AppSidebar, AppSidebarNav, AreaChart, AspectRatio, AttachmentChip, AvatarGroup, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, COUNTRY_CODES, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Code, CommandPalette, ConfirmActionButton, ConfirmDialog, ConfirmHost, Content6 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CountryFlag2 as CountryFlag, CountrySelect, DATE_DISPLAY_PLACEHOLDER, DEFAULT_PHONE_FIELD_MESSAGES, DangerAction, DataItem, DataTablePattern, DatePicker, DateRangePicker, DesignSystemProvider, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DonutChart, EmptyState, ErrorState, Eyebrow, Field, FieldControl, FieldDescription, FieldError, Fieldset, FieldsetLegend, FileTypeBadge, FilterChip, FolderTree, FormError, FormSection, FormSuccess, Heading, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, ICON_TILE_TONE_TO_INTENT, IconAction, IconTile, InfoHint, Inline, Kanban, KanbanCard, KanbanColumn, Kbd, KbdHint, KeyboardShortcutsDialog, KpiCard, Label2 as Label, LinkAction, LinkButton, LoadingRows, Main, MasterDetailLayout, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageComposer, MetadataGrid, MultiFilterPill, MultiSelect, MultiSelectField, MutedSpec, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, NumberInput, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, PdfPreview, PeoplePicker, PhoneCountryInput, PhoneField, PhoneInput, PrimaryAction, PriorityIcon, QuestionnairePanel, RadioGroup2 as RadioGroup, RadioGroupItem, RankedBars, ResponsiveDialog, RouteTransition, ScrollArea, ScrollBar, SearchInput, SearchSelect, SecondaryAction, SectionCard, SegmentedControl, SelectableKpiCard, Separator2 as Separator, Shell, SideDrawer, Slider, SpreadsheetPreview, Stack, StackedBarChart, StarRating, StatusBadge, StatusIcon, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, SubmitButton, SuiteProgress, Surface, TableDensityToggle, TableEmpty, TableError, TableLoading, Text, ToastProvider, Toolbar, VisuallyHidden, YEAR_DISPLAY_PLACEHOLDER, alertVariants, applyMask, applyYearMask, attachmentChipVariants, cardVariants, dateToIso, defineStatusMap, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, getFlagEmoji, resolveIconTileVariants as iconTileVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parsePhoneForEditing, searchInputVariants, starRatingVariants, suiteProgressFillVariants, useConfirm, usePrompt, useTableDensity, useToast, yearToIso };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map