@assure-one/design-system 1.42.0 → 1.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  "use client";
2
- import { useFormReset, badgeVariants, DataTableBody, DataTableRow, DataTableCell, Badge, Pagination, TableBody, TableRow, TableCell, Table, TableHeader, TableHead, ToggleGroup, ToggleGroupItem } from './chunk-YMRSFVW7.js';
3
- 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-YMRSFVW7.js';
4
- import { Collapsible, CollapsibleTrigger, CollapsibleContent, PlainLink, Combobox, CmdkCompatContext, Sheet, SheetContent, SheetTitle } from './chunk-H53VF62B.js';
5
- 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-H53VF62B.js';
6
- 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, 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-M2HMZ2RW.js';
7
- 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-M2HMZ2RW.js';
8
- 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';
9
- 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';
2
+ import { Skeleton, useFormReset, ToggleGroup, ToggleGroupItem, badgeVariants, DataTableBody, DataTableRow, DataTableCell, Badge, Pagination, TableBody, TableRow, TableCell, Table, TableHeader, TableHead } from './chunk-LUWPEBXZ.js';
3
+ 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';
4
+ import { Collapsible, CollapsibleTrigger, CollapsibleContent, PlainLink, Combobox, Sidebar, SidebarFooter, SidebarUser, useSidebarState, SidebarSection, SidebarLinkGroup, SidebarLink, SidebarLinkLabel, SidebarLinkBadge, CmdkCompatContext, Sheet, SheetContent, SheetTitle } from './chunk-TYXT5C2B.js';
5
+ 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';
6
+ 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';
7
+ 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';
8
+ 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';
9
+ 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';
10
10
  export { systemTokens } from './chunk-CPOGSNXS.js';
11
11
  import './chunk-EUHGZA6Q.js';
12
12
  export { colors, radii, reference, shadows, spacing, surfaces, typography } from './chunk-YRHRVOLV.js';
13
- import * as React28 from 'react';
14
- import { forwardRef, useId, useRef, useState, useEffect, createContext, useCallback, useMemo, useImperativeHandle, Children, isValidElement, cloneElement, useSyncExternalStore, useContext } from 'react';
13
+ import * as React30 from 'react';
14
+ import { forwardRef, useId, useRef, useState, useLayoutEffect, createContext, useEffect, useCallback, useMemo, useImperativeHandle, Children, isValidElement, cloneElement, useSyncExternalStore, useContext } from 'react';
15
15
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
16
16
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
17
17
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -33,7 +33,7 @@ import { useFormStatus } from 'react-dom';
33
33
  import { Branch } from '@radix-ui/react-dismissable-layer';
34
34
  import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
35
35
 
36
- var Accordion = React28.forwardRef(function Accordion2({ className, ...props }, ref) {
36
+ var Accordion = React30.forwardRef(function Accordion2({ className, ...props }, ref) {
37
37
  return /* @__PURE__ */ jsx(
38
38
  AccordionPrimitive.Root,
39
39
  {
@@ -44,22 +44,28 @@ var Accordion = React28.forwardRef(function Accordion2({ className, ...props },
44
44
  );
45
45
  });
46
46
  Accordion.displayName = AccordionPrimitive.Root.displayName;
47
- var AccordionItem = React28.forwardRef(function AccordionItem2({ className, ...props }, ref) {
47
+ var AccordionItem = React30.forwardRef(function AccordionItem2({ className, ...props }, ref) {
48
48
  return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn(className), ...props });
49
49
  });
50
50
  AccordionItem.displayName = AccordionPrimitive.Item.displayName;
51
- var AccordionTrigger = React28.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
51
+ var AccordionTrigger = React30.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
52
52
  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "ds:flex", children: /* @__PURE__ */ jsxs(
53
53
  AccordionPrimitive.Trigger,
54
54
  {
55
55
  ref,
56
56
  className: cn(
57
- "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",
57
+ "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",
58
58
  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
59
59
  "ds:hover:text-fg-2",
60
60
  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
61
61
  "ds:data-[disabled]:cursor-not-allowed ds:data-[disabled]:opacity-50 ds:data-[disabled]:hover:text-fg",
62
+ // `aria-expanded` twin: a TooltipTrigger asChild ancestor can
63
+ // clobber this trigger's own `data-state` with the tooltip's (see
64
+ // toggle-group.tsx's note on the same bug), but never sets
65
+ // `aria-expanded` — which Radix's Collapsible-backed Accordion
66
+ // trigger always carries alongside `data-state`.
62
67
  "ds:[&[data-state=open]>svg]:rotate-180",
68
+ "ds:[&[aria-expanded=true]>svg]:rotate-180",
63
69
  className
64
70
  ),
65
71
  ...props,
@@ -77,7 +83,7 @@ var AccordionTrigger = React28.forwardRef(function AccordionTrigger2({ children,
77
83
  ) });
78
84
  });
79
85
  AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
80
- var AccordionContent = React28.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
86
+ var AccordionContent = React30.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
81
87
  return /* @__PURE__ */ jsx(
82
88
  AccordionPrimitive.Content,
83
89
  {
@@ -97,7 +103,7 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
97
103
  var AlertDialog = AlertDialogPrimitive.Root;
98
104
  var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
99
105
  var AlertDialogPortal = withPortalContainer(AlertDialogPrimitive.Portal);
100
- var AlertDialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
106
+ var AlertDialogOverlay = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
101
107
  Backdrop,
102
108
  {
103
109
  as: AlertDialogPrimitive.Overlay,
@@ -108,7 +114,7 @@ var AlertDialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
108
114
  }
109
115
  ));
110
116
  AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
111
- var AlertDialogContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
117
+ var AlertDialogContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
112
118
  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
113
119
  /* @__PURE__ */ jsx(
114
120
  OverlaySurface,
@@ -129,9 +135,9 @@ var AlertDialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy:
129
135
  AlertDialogHeader.displayName = "AlertDialogHeader";
130
136
  var AlertDialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: alertDialogAnatomy, layout: "inset", ...props });
131
137
  AlertDialogFooter.displayName = "AlertDialogFooter";
132
- var AlertDialogTitle = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
138
+ var AlertDialogTitle = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
133
139
  AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
134
- var AlertDialogDescription = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
140
+ var AlertDialogDescription = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
135
141
  OverlayDescription,
136
142
  {
137
143
  as: AlertDialogPrimitive.Description,
@@ -144,7 +150,7 @@ AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayNam
144
150
  var EMPHASES = /* @__PURE__ */ new Set(["solid", "soft", "outline", "ghost", "link"]);
145
151
  var isEmphasis = (word) => EMPHASES.has(word);
146
152
  var LEGACY_ACTION_HOVER = "ds:hover:bg-destructive/90";
147
- var AlertDialogAction = React28.forwardRef(({ variant, intent, className, ...props }, ref) => {
153
+ var AlertDialogAction = React30.forwardRef(({ variant, intent, className, ...props }, ref) => {
148
154
  const legacy = variant === void 0 && intent === void 0;
149
155
  const resolvedIntent = intent ?? (variant === void 0 || isEmphasis(variant) ? "danger" : void 0);
150
156
  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
160
166
  });
161
167
  AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
162
168
  var LEGACY_CANCEL_HOVER = "ds:hover:border-rule-strong ds:hover:text-fg";
163
- var AlertDialogCancel = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...slot(alertDialogAnatomy, "cancel"), children: /* @__PURE__ */ jsx(
169
+ var AlertDialogCancel = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...slot(alertDialogAnatomy, "cancel"), children: /* @__PURE__ */ jsx(
164
170
  Button,
165
171
  {
166
172
  variant: "outline",
@@ -258,9 +264,11 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
258
264
  const wrapRef = useRef(null);
259
265
  const [width, setWidth] = useState(620);
260
266
  const [hover, setHover] = useState(null);
261
- useEffect(() => {
267
+ useLayoutEffect(() => {
262
268
  const el = wrapRef.current;
263
269
  if (!el) return;
270
+ const measured = el.getBoundingClientRect().width;
271
+ if (measured > 0) setWidth(measured);
264
272
  const ro = new ResizeObserver((entries) => {
265
273
  for (const entry of entries) setWidth(entry.contentRect.width);
266
274
  });
@@ -287,6 +295,7 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
287
295
  width,
288
296
  height,
289
297
  viewBox: `0 0 ${width} ${height}`,
298
+ className: "ds:block ds:h-auto ds:max-w-full",
290
299
  role: "img",
291
300
  "aria-label": "Area trend chart",
292
301
  onMouseLeave: () => setHover(null),
@@ -351,7 +360,7 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
351
360
  ] });
352
361
  });
353
362
  AreaChart.displayName = "AreaChart";
354
- var AspectRatio = React28.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
363
+ var AspectRatio = React30.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
355
364
  return /* @__PURE__ */ jsx(
356
365
  AspectRatioPrimitive.Root,
357
366
  {
@@ -1086,15 +1095,15 @@ function Calendar({
1086
1095
  const range = isRange ? selected : void 0;
1087
1096
  const locale = useLocale(typeof localeProp === "string" ? localeProp : void 0);
1088
1097
  const localeObject = typeof localeProp === "object" ? localeProp : void 0;
1089
- const localeProps = React28.useMemo(
1098
+ const localeProps = React30.useMemo(
1090
1099
  () => localeObject ? {} : calendarLocaleProps(locale),
1091
1100
  [locale, localeObject]
1092
1101
  );
1093
1102
  const hydrated = useHydrated();
1094
- const clockToday = React28.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
1103
+ const clockToday = React30.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
1095
1104
  const today = todayProp ?? clockToday;
1096
1105
  const anchor = props.month ?? props.defaultMonth ?? todayProp;
1097
- const { modifiers, modifiersClassNames } = React28.useMemo(() => {
1106
+ const { modifiers, modifiersClassNames } = React30.useMemo(() => {
1098
1107
  const buckets = {};
1099
1108
  for (const h of highlights) {
1100
1109
  const key = h.color ?? "primary";
@@ -1109,7 +1118,7 @@ function Calendar({
1109
1118
  }
1110
1119
  return { modifiers: mods, modifiersClassNames: modClasses };
1111
1120
  }, [highlights]);
1112
- const disabledMatcher = React28.useMemo(() => {
1121
+ const disabledMatcher = React30.useMemo(() => {
1113
1122
  if (!minDate && !maxDate) return void 0;
1114
1123
  if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
1115
1124
  if (minDate) return { before: minDate };
@@ -1117,7 +1126,7 @@ function Calendar({
1117
1126
  }, [minDate, maxDate]);
1118
1127
  const rangeFrom = range?.from;
1119
1128
  const rangeTo = range?.to;
1120
- const navRange = React28.useMemo(
1129
+ const navRange = React30.useMemo(
1121
1130
  () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({
1122
1131
  minDate,
1123
1132
  maxDate,
@@ -1182,7 +1191,7 @@ function Calendar({
1182
1191
  day: "ds:flex-1 ds:text-center ds:relative ds:p-0",
1183
1192
  day_button: cn(
1184
1193
  "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",
1185
- "ds:transition-colors ds:duration-[var(--duration-instant)] ds:motion-reduce:transition-none",
1194
+ "ds:transition-colors ds:duration-[var(--duration-instant)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
1186
1195
  "ds:hover:bg-surface-hover",
1187
1196
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1188
1197
  "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled"
@@ -1279,7 +1288,10 @@ var CardHeader = forwardRef(
1279
1288
  ref,
1280
1289
  ...slot(cardAnatomy, "header"),
1281
1290
  className: cn(
1282
- "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",
1291
+ // `border-rule` colours the documented `className="border-b"` divider
1292
+ // the way CardFooter's border is coloured (Tailwind 4 would otherwise
1293
+ // paint it `currentColor`); it draws nothing without a border width.
1294
+ "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",
1283
1295
  className
1284
1296
  ),
1285
1297
  ...props
@@ -1295,7 +1307,12 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, headingLev
1295
1307
  {
1296
1308
  ref,
1297
1309
  ...slot(cardAnatomy, "title"),
1298
- className: cn("ds:text-fg ds:text-base ds:leading-tight ds:font-medium", className),
1310
+ className: cn(
1311
+ // Column 1 of CardHeader's `1fr auto` grid, so a description stacks
1312
+ // under the title instead of flowing into the action column.
1313
+ "ds:col-start-1 ds:text-fg ds:text-base ds:leading-tight ds:font-medium",
1314
+ className
1315
+ ),
1299
1316
  ...props,
1300
1317
  children
1301
1318
  }
@@ -1308,7 +1325,7 @@ var CardDescription = forwardRef(function CardDescription2({ className, ...props
1308
1325
  {
1309
1326
  ref,
1310
1327
  ...slot(cardAnatomy, "description"),
1311
- className: cn("ds:text-fg-3 ds:text-sm", className),
1328
+ className: cn("ds:col-start-1 ds:text-fg-3 ds:text-sm", className),
1312
1329
  ...props
1313
1330
  }
1314
1331
  );
@@ -1552,17 +1569,17 @@ function CommandPalette({
1552
1569
  }) {
1553
1570
  const messages = useDsMessages("commandPalette", messagesProp);
1554
1571
  const placeholder = placeholderProp ?? messages.search;
1555
- const [internalOpen, setInternalOpen] = React28.useState(defaultOpen);
1572
+ const [internalOpen, setInternalOpen] = React30.useState(defaultOpen);
1556
1573
  const isControlled = controlledOpen !== void 0;
1557
1574
  const open = isControlled ? controlledOpen : internalOpen;
1558
- const setOpen = React28.useCallback(
1575
+ const setOpen = React30.useCallback(
1559
1576
  (value) => {
1560
1577
  if (!isControlled) setInternalOpen(value);
1561
1578
  onOpenChange?.(value);
1562
1579
  },
1563
1580
  [isControlled, onOpenChange]
1564
1581
  );
1565
- React28.useEffect(() => {
1582
+ React30.useEffect(() => {
1566
1583
  function handleKeyDown(e) {
1567
1584
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
1568
1585
  e.preventDefault();
@@ -1881,19 +1898,19 @@ function ConfirmDialog({
1881
1898
  }) {
1882
1899
  const messages = useDsMessages("confirm", messagesOverride);
1883
1900
  const isControlled = open !== void 0;
1884
- const [uncontrolledOpen, setUncontrolledOpen] = React28.useState(defaultOpen);
1901
+ const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(defaultOpen);
1885
1902
  const resolvedOpen = isControlled ? open : uncontrolledOpen;
1886
- const [pending, setPending] = React28.useState(false);
1887
- const [error, setError] = React28.useState(void 0);
1888
- const actionRef = React28.useRef(null);
1889
- const mounted = React28.useRef(true);
1890
- React28.useEffect(() => {
1903
+ const [pending, setPending] = React30.useState(false);
1904
+ const [error, setError] = React30.useState(void 0);
1905
+ const actionRef = React30.useRef(null);
1906
+ const mounted = React30.useRef(true);
1907
+ React30.useEffect(() => {
1891
1908
  mounted.current = true;
1892
1909
  return () => {
1893
1910
  mounted.current = false;
1894
1911
  };
1895
1912
  }, []);
1896
- const setDialogOpen = React28.useCallback(
1913
+ const setDialogOpen = React30.useCallback(
1897
1914
  (nextOpen) => {
1898
1915
  onOpenChange?.(nextOpen);
1899
1916
  if (!isControlled) setUncontrolledOpen(nextOpen);
@@ -2022,7 +2039,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
2022
2039
  var ContextMenuPortal = withPortalContainer(ContextMenuPrimitive.Portal);
2023
2040
  var ContextMenuSub = ContextMenuPrimitive.Sub;
2024
2041
  var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
2025
- var ContextMenuSubTrigger = React28.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2042
+ var ContextMenuSubTrigger = React30.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2026
2043
  ContextMenuPrimitive.SubTrigger,
2027
2044
  {
2028
2045
  ref,
@@ -2036,7 +2053,7 @@ var ContextMenuSubTrigger = React28.forwardRef(({ className, inset, children, ..
2036
2053
  }
2037
2054
  ));
2038
2055
  ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
2039
- var ContextMenuSubContent = React28.forwardRef(({ className, ...props }, ref) => (
2056
+ var ContextMenuSubContent = React30.forwardRef(({ className, ...props }, ref) => (
2040
2057
  // Portal the sub-content to the body. The parent Content is transformed
2041
2058
  // while its presence keyframes run, which makes it the containing block for
2042
2059
  // `position: fixed` descendants — and its `overflow-hidden` would then clip
@@ -2056,7 +2073,7 @@ var ContextMenuSubContent = React28.forwardRef(({ className, ...props }, ref) =>
2056
2073
  ) })
2057
2074
  ));
2058
2075
  ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
2059
- var ContextMenuContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
2076
+ var ContextMenuContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
2060
2077
  ContextMenuPrimitive.Content,
2061
2078
  {
2062
2079
  ref,
@@ -2070,7 +2087,7 @@ var ContextMenuContent = React28.forwardRef(({ className, ...props }, ref) => /*
2070
2087
  }
2071
2088
  ) }));
2072
2089
  ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
2073
- var ContextMenuItem = React28.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2090
+ var ContextMenuItem = React30.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2074
2091
  ContextMenuPrimitive.Item,
2075
2092
  {
2076
2093
  ref,
@@ -2085,7 +2102,7 @@ var ContextMenuItem = React28.forwardRef(({ className, destructive, inset, ...pr
2085
2102
  }
2086
2103
  ));
2087
2104
  ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
2088
- var ContextMenuCheckboxItem = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2105
+ var ContextMenuCheckboxItem = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2089
2106
  ContextMenuPrimitive.CheckboxItem,
2090
2107
  {
2091
2108
  ref,
@@ -2099,7 +2116,7 @@ var ContextMenuCheckboxItem = React28.forwardRef(({ className, children, ...prop
2099
2116
  }
2100
2117
  ));
2101
2118
  ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
2102
- var ContextMenuRadioItem = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2119
+ var ContextMenuRadioItem = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2103
2120
  ContextMenuPrimitive.RadioItem,
2104
2121
  {
2105
2122
  ref,
@@ -2113,7 +2130,7 @@ var ContextMenuRadioItem = React28.forwardRef(({ className, children, ...props }
2113
2130
  }
2114
2131
  ));
2115
2132
  ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
2116
- var ContextMenuLabel = React28.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2133
+ var ContextMenuLabel = React30.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2117
2134
  ContextMenuPrimitive.Label,
2118
2135
  {
2119
2136
  ref,
@@ -2127,7 +2144,7 @@ var ContextMenuLabel = React28.forwardRef(({ className, inset, ...props }, ref)
2127
2144
  }
2128
2145
  ));
2129
2146
  ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
2130
- var ContextMenuSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2147
+ var ContextMenuSeparator = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2131
2148
  ContextMenuPrimitive.Separator,
2132
2149
  {
2133
2150
  ref,
@@ -2148,10 +2165,13 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
2148
2165
  var CopyButton = forwardRef(function CopyButton2({ value, feedbackDuration = 2e3, messages: messagesProp, className, children, ...props }, ref) {
2149
2166
  const messages = useDsMessages("copyButton", messagesProp);
2150
2167
  const [copied, setCopied] = useState(false);
2168
+ const resetTimer = useRef(void 0);
2169
+ useEffect(() => () => clearTimeout(resetTimer.current), []);
2151
2170
  const handleCopy = useCallback(async () => {
2152
2171
  await navigator.clipboard.writeText(value);
2153
2172
  setCopied(true);
2154
- setTimeout(() => setCopied(false), feedbackDuration);
2173
+ clearTimeout(resetTimer.current);
2174
+ resetTimer.current = setTimeout(() => setCopied(false), feedbackDuration);
2155
2175
  }, [value, feedbackDuration]);
2156
2176
  return /* @__PURE__ */ jsx(
2157
2177
  "button",
@@ -2168,7 +2188,14 @@ var CopyButton = forwardRef(function CopyButton2({ value, feedbackDuration = 2e3
2168
2188
  ),
2169
2189
  "aria-label": copied ? messages.copied : messages.copy,
2170
2190
  ...props,
2171
- children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16, "aria-hidden": "true" }) : children ?? /* @__PURE__ */ jsx(CopyIcon, { size: 16, "aria-hidden": "true" })
2191
+ children: copied ? /* @__PURE__ */ jsx(
2192
+ CheckIcon,
2193
+ {
2194
+ size: 16,
2195
+ "aria-hidden": "true",
2196
+ 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)]"
2197
+ }
2198
+ ) : children ?? /* @__PURE__ */ jsx(CopyIcon, { size: 16, "aria-hidden": "true" })
2172
2199
  }
2173
2200
  );
2174
2201
  });
@@ -2297,7 +2324,7 @@ function YearGrid({ selected, onSelect, minYear, maxYear, formatLabel, autoFocus
2297
2324
  className: cn(
2298
2325
  "ds:rounded-input ds:font-mono ds:text-(length:--control-font-size-md) ds:tabular-nums",
2299
2326
  "ds:inline-flex ds:h-10 ds:items-center ds:justify-center",
2300
- "ds:transition-colors ds:duration-[var(--duration-instant)] ds:motion-reduce:transition-none",
2327
+ "ds:transition-colors ds:duration-[var(--duration-instant)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
2301
2328
  "ds:hover:bg-surface-hover",
2302
2329
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
2303
2330
  "ds:disabled:text-fg-disabled ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed",
@@ -2865,7 +2892,7 @@ DateRangePicker.displayName = "DateRangePicker";
2865
2892
  var Dialog = DialogPrimitive.Root;
2866
2893
  var DialogTrigger = DialogPrimitive.Trigger;
2867
2894
  var DialogPortal = withPortalContainer(DialogPrimitive.Portal);
2868
- var DialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
2895
+ var DialogOverlay = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
2869
2896
  Backdrop,
2870
2897
  {
2871
2898
  as: DialogPrimitive.Overlay,
@@ -2899,7 +2926,7 @@ var DIALOG_HEIGHTS = {
2899
2926
  full: "ds:h-[calc(100vh-6rem)]"
2900
2927
  };
2901
2928
  function useTitleRequired(element) {
2902
- React28.useEffect(() => {
2929
+ React30.useEffect(() => {
2903
2930
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
2904
2931
  const timer = setTimeout(() => {
2905
2932
  const node = element.current;
@@ -2916,7 +2943,7 @@ function useTitleRequired(element) {
2916
2943
  return () => clearTimeout(timer);
2917
2944
  }, [element]);
2918
2945
  }
2919
- var DialogContent = React28.forwardRef(
2946
+ var DialogContent = React30.forwardRef(
2920
2947
  ({
2921
2948
  size = "md",
2922
2949
  height = "auto",
@@ -2928,7 +2955,7 @@ var DialogContent = React28.forwardRef(
2928
2955
  children,
2929
2956
  ...props
2930
2957
  }, ref) => {
2931
- const element = React28.useRef(null);
2958
+ const element = React30.useRef(null);
2932
2959
  const mergedRef = useMergedRefs(ref, element);
2933
2960
  useTitleRequired(element);
2934
2961
  const heightRow = DIALOG_HEIGHTS[height];
@@ -2966,7 +2993,7 @@ var DialogContent = React28.forwardRef(
2966
2993
  }
2967
2994
  );
2968
2995
  DialogContent.displayName = DialogPrimitive.Content.displayName;
2969
- var DialogClose = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2996
+ var DialogClose = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2970
2997
  DialogPrimitive.Close,
2971
2998
  {
2972
2999
  ref,
@@ -2978,15 +3005,15 @@ var DialogClose = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
2978
3005
  DialogClose.displayName = "DialogClose";
2979
3006
  var DialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy: dialogAnatomy, layout: "inset", dismissGutter: true, ...props });
2980
3007
  DialogHeader.displayName = "DialogHeader";
2981
- var DialogBody = React28.forwardRef(
3008
+ var DialogBody = React30.forwardRef(
2982
3009
  ({ padding = "none", ...props }, ref) => /* @__PURE__ */ jsx(OverlayBody, { anatomy: dialogAnatomy, layout: "inset", padding, ref, ...props })
2983
3010
  );
2984
3011
  DialogBody.displayName = "DialogBody";
2985
3012
  var DialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: dialogAnatomy, layout: "inset", ...props });
2986
3013
  DialogFooter.displayName = "DialogFooter";
2987
- var DialogTitle = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive.Title, anatomy: dialogAnatomy, ref, ...props }));
3014
+ var DialogTitle = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive.Title, anatomy: dialogAnatomy, ref, ...props }));
2988
3015
  DialogTitle.displayName = DialogPrimitive.Title.displayName;
2989
- var DialogDescription = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
3016
+ var DialogDescription = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
2990
3017
  OverlayDescription,
2991
3018
  {
2992
3019
  as: DialogPrimitive.Description,
@@ -3016,7 +3043,7 @@ var chipVariants2 = cva(
3016
3043
  }
3017
3044
  }
3018
3045
  );
3019
- var DismissibleChip = React28.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
3046
+ var DismissibleChip = React30.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
3020
3047
  const messages = useDsMessages("dismissibleChip");
3021
3048
  return /* @__PURE__ */ jsxs(
3022
3049
  "button",
@@ -3130,7 +3157,7 @@ var DonutChart = forwardRef(function DonutChart2({
3130
3157
  onBlur: () => setHover(null),
3131
3158
  className: cn(
3132
3159
  "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",
3133
- hover === i ? "ds:bg-bg-2" : "ds:hover:bg-surface-hover"
3160
+ hover === i ? "ds:bg-surface-hover" : "ds:hover:bg-surface-hover"
3134
3161
  ),
3135
3162
  children: [
3136
3163
  /* @__PURE__ */ jsx(
@@ -3350,7 +3377,7 @@ var ErrorState = forwardRef(function ErrorState2({
3350
3377
  {
3351
3378
  className: cn(
3352
3379
  "ds:text-fg-3 ds:hover:text-fg ds:mx-auto ds:w-auto ds:gap-1 ds:rounded-md",
3353
- "ds:px-1.5 ds:py-0.5 ds:text-xs ds:font-medium ds:transition-colors",
3380
+ "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)]",
3354
3381
  "ds:motion-reduce:transition-none"
3355
3382
  ),
3356
3383
  children: [
@@ -3361,7 +3388,7 @@ var ErrorState = forwardRef(function ErrorState2({
3361
3388
  size: 12,
3362
3389
  "aria-hidden": "true",
3363
3390
  className: cn(
3364
- "ds:transition-transform ds:motion-reduce:transition-none",
3391
+ "ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
3365
3392
  detailsOpen && "ds:rotate-180"
3366
3393
  )
3367
3394
  }
@@ -3526,7 +3553,7 @@ FormSection.displayName = "FormSection";
3526
3553
  var HoverCard = HoverCardPrimitive.Root;
3527
3554
  var HoverCardTrigger = HoverCardPrimitive.Trigger;
3528
3555
  var HoverCardPortal = withPortalContainer(HoverCardPrimitive.Portal);
3529
- var HoverCardContent = React28.forwardRef(
3556
+ var HoverCardContent = React30.forwardRef(
3530
3557
  ({
3531
3558
  className,
3532
3559
  align = "center",
@@ -3647,19 +3674,19 @@ function KeyboardShortcutsDialog({
3647
3674
  messages: messagesProp
3648
3675
  } = {}) {
3649
3676
  const messages = useDsMessages("keyboardShortcuts", messagesProp);
3650
- const [internalOpen, setInternalOpen] = React28.useState(defaultOpen);
3677
+ const [internalOpen, setInternalOpen] = React30.useState(defaultOpen);
3651
3678
  const isControlled = controlledOpen !== void 0;
3652
3679
  const open = isControlled ? controlledOpen : internalOpen;
3653
- const openRef = React28.useRef(open);
3680
+ const openRef = React30.useRef(open);
3654
3681
  openRef.current = open;
3655
- const setOpen = React28.useCallback(
3682
+ const setOpen = React30.useCallback(
3656
3683
  (value) => {
3657
3684
  if (!isControlled) setInternalOpen(value);
3658
3685
  onOpenChange?.(value);
3659
3686
  },
3660
3687
  [isControlled, onOpenChange]
3661
3688
  );
3662
- React28.useEffect(() => {
3689
+ React30.useEffect(() => {
3663
3690
  if (hotkey === null) return;
3664
3691
  function handleKeyDown(e) {
3665
3692
  const target = e.target;
@@ -3698,7 +3725,7 @@ function KeyboardShortcutsDialog({
3698
3725
  className: "ds:flex ds:items-center ds:justify-between ds:gap-3 ds:py-1",
3699
3726
  children: [
3700
3727
  /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-sm", children: shortcut.description }),
3701
- /* @__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: [
3728
+ /* @__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: [
3702
3729
  i > 0 && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:mx-0.5 ds:text-(length:--text-caption)", children: messages.then }),
3703
3730
  /* @__PURE__ */ jsx(Kbd, { children: key })
3704
3731
  ] }, i)) })
@@ -3719,7 +3746,7 @@ function KeyboardShortcutsDialog({
3719
3746
  var labelVariants = cva(
3720
3747
  "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"
3721
3748
  );
3722
- var Label2 = React28.forwardRef(
3749
+ var Label2 = React30.forwardRef(
3723
3750
  function Label3({ children, required, className, id, htmlFor, onClick, ...props }, ref) {
3724
3751
  const field = useFieldContext();
3725
3752
  const fieldLabelId = useFieldPart("label", id, field !== null);
@@ -3868,49 +3895,6 @@ var LinkAction = forwardRef(function LinkAction2({ arrow, iconRight, children, c
3868
3895
  );
3869
3896
  });
3870
3897
  LinkAction.displayName = "LinkAction";
3871
- var SKELETON_SURFACE = cn(
3872
- "skeleton ds:bg-skeleton ds:relative ds:overflow-hidden",
3873
- "ds:after:absolute ds:after:inset-0 ds:after:-translate-x-full",
3874
- "ds:after:bg-[linear-gradient(90deg,transparent,var(--color-skeleton-sheen),transparent)]",
3875
- "ds:motion-safe:after:animate-skeleton-shimmer"
3876
- );
3877
- var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
3878
- return /* @__PURE__ */ jsx(
3879
- "div",
3880
- {
3881
- ref,
3882
- className: cn(SKELETON_SURFACE, "ds:rounded-icon", className),
3883
- "aria-hidden": "true",
3884
- ...props
3885
- }
3886
- );
3887
- });
3888
- Skeleton.displayName = "Skeleton";
3889
- var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
3890
- 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(
3891
- "div",
3892
- {
3893
- className: cn(SKELETON_SURFACE, "ds:rounded-icon ds:h-4", i === lines - 1 && "ds:w-3/4")
3894
- },
3895
- i
3896
- )) });
3897
- });
3898
- SkeletonText.displayName = "SkeletonText";
3899
- var SkeletonCircle = forwardRef(
3900
- function SkeletonCircle2({ size = 40, className, ...props }, ref) {
3901
- return /* @__PURE__ */ jsx(
3902
- "div",
3903
- {
3904
- ref,
3905
- className: cn(SKELETON_SURFACE, "ds:rounded-full", className),
3906
- style: { width: size, height: size },
3907
- "aria-hidden": "true",
3908
- ...props
3909
- }
3910
- );
3911
- }
3912
- );
3913
- SkeletonCircle.displayName = "SkeletonCircle";
3914
3898
  var LoadingRows = forwardRef(function LoadingRows2({
3915
3899
  count = 3,
3916
3900
  rowHeight = "ds:h-14",
@@ -4137,7 +4121,7 @@ function MultiFilterPill({
4137
4121
  "span",
4138
4122
  {
4139
4123
  className: cn(
4140
- "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",
4124
+ "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",
4141
4125
  isSelected ? "ds:border-brand ds:bg-brand ds:text-fg-on-brand" : "ds:border-rule-strong ds:bg-surface"
4142
4126
  ),
4143
4127
  "aria-hidden": "true",
@@ -4191,7 +4175,7 @@ function MultiSelectField({
4191
4175
  size = "md",
4192
4176
  id
4193
4177
  }) {
4194
- const selected = React28.useMemo(
4178
+ const selected = React30.useMemo(
4195
4179
  () => new Set(value ? value.split(",").filter(Boolean) : []),
4196
4180
  [value]
4197
4181
  );
@@ -4204,7 +4188,7 @@ function MultiSelectField({
4204
4188
  }
4205
4189
  onChange(Array.from(next).join(","));
4206
4190
  };
4207
- const generatedId = React28.useId();
4191
+ const generatedId = React30.useId();
4208
4192
  const groupId = id ?? generatedId;
4209
4193
  return /* @__PURE__ */ jsxs("div", { className: cn("ds:w-full", className), children: [
4210
4194
  /* @__PURE__ */ jsx(
@@ -4587,7 +4571,7 @@ function OTPInput({
4587
4571
  "aria-labelledby": ariaLabelledBy,
4588
4572
  "aria-describedby": ariaDescribedBy
4589
4573
  });
4590
- const inputRef = React28.useRef(null);
4574
+ const inputRef = React30.useRef(null);
4591
4575
  useFormReset$1(inputRef, () => setValue(defaultValue ?? ""), wiring.name, form);
4592
4576
  const errorId = `${wiring.id}-error`;
4593
4577
  const hasError = wiring["aria-invalid"] === true;
@@ -4648,7 +4632,7 @@ function OTPSlot({ isActive, char, hasFakeCaret, hasError }) {
4648
4632
  className: cn(
4649
4633
  "ds:relative ds:flex ds:h-12 ds:w-10 ds:items-center ds:justify-center",
4650
4634
  "ds:rounded-input ds:bg-surface ds:text-fg ds:border ds:font-mono ds:text-lg ds:tabular-nums",
4651
- "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--duration-fast)]",
4635
+ "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",
4652
4636
  "ds:sm:h-14 ds:sm:w-12 ds:sm:text-xl",
4653
4637
  "ds:border-field-border",
4654
4638
  isActive && "ds:[border-color:var(--focus-ring-border)] ds:z-[calc(var(--z-base)+10)] ds:[box-shadow:var(--shadow-focus-ring-field)]",
@@ -5652,18 +5636,18 @@ function PriorityIcon({ priority, size = 16, className, ...props }) {
5652
5636
  )),
5653
5637
  priority === "urgent" && /* @__PURE__ */ jsxs(Fragment, { children: [
5654
5638
  /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "12", height: "12", rx: "3", fill: "var(--ds-color-priority-urgent, var(--color-priority-urgent))" }),
5655
- /* @__PURE__ */ jsx("rect", { x: "7.25", y: "3.75", width: "1.5", height: "5", rx: "0.75", fill: "#fff" }),
5656
- /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.25", r: "1", fill: "#fff" })
5639
+ /* @__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))" }),
5640
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.25", r: "1", fill: "var(--ds-color-feedback-danger-solid-fg, var(--color-fg-on-danger))" })
5657
5641
  ] })
5658
5642
  ]
5659
5643
  }
5660
5644
  );
5661
5645
  }
5662
- var RadioGroupContext = React28.createContext({
5646
+ var RadioGroupContext = React30.createContext({
5663
5647
  appearance: "plain",
5664
5648
  invalid: false
5665
5649
  });
5666
- var RadioGroup2 = React28.forwardRef(function RadioGroup3({
5650
+ var RadioGroup2 = React30.forwardRef(function RadioGroup3({
5667
5651
  className,
5668
5652
  appearance = "plain",
5669
5653
  invalid,
@@ -5695,12 +5679,12 @@ var RadioGroup2 = React28.forwardRef(function RadioGroup3({
5695
5679
  defaultProp: defaultValue ?? null,
5696
5680
  onChange: onValueChange
5697
5681
  });
5698
- const initialValue = React28.useRef(valueProp ?? defaultValue ?? null);
5699
- const rootRef = React28.useRef(null);
5682
+ const initialValue = React30.useRef(valueProp ?? defaultValue ?? null);
5683
+ const rootRef = React30.useRef(null);
5700
5684
  useFormReset(rootRef, () => setValue(initialValue.current));
5701
5685
  const mergedRef = useMergedRefs(ref, rootRef);
5702
5686
  const isInvalid = wiring["aria-invalid"] === true;
5703
- const context = React28.useMemo(
5687
+ const context = React30.useMemo(
5704
5688
  () => ({ appearance, invalid: isInvalid }),
5705
5689
  [appearance, isInvalid]
5706
5690
  );
@@ -5733,10 +5717,11 @@ var ITEM_CLASSES = cn(
5733
5717
  "ds:hover:border-fg-4",
5734
5718
  "ds:focus-visible:[border-color:var(--focus-ring-border)] ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)] ds:focus-visible:outline-none",
5735
5719
  "ds:data-[state=checked]:border-brand",
5736
- "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:cursor-not-allowed",
5720
+ "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed",
5721
+ "ds:disabled:data-[state=checked]:border-rule",
5737
5722
  "ds:aria-[invalid=true]:border-danger-line"
5738
5723
  );
5739
- var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
5724
+ var RadioGroupItem = React30.forwardRef(function RadioGroupItem2({
5740
5725
  className,
5741
5726
  label,
5742
5727
  description,
@@ -5745,9 +5730,9 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
5745
5730
  "aria-invalid": ariaInvalid,
5746
5731
  ...props
5747
5732
  }, ref) {
5748
- const generatedId = React28.useId();
5733
+ const generatedId = React30.useId();
5749
5734
  const id = providedId ?? generatedId;
5750
- const { appearance, invalid } = React28.useContext(RadioGroupContext);
5735
+ const { appearance, invalid } = React30.useContext(RadioGroupContext);
5751
5736
  const card = appearance === "card";
5752
5737
  const descriptionId = card && description ? `${id}-description` : void 0;
5753
5738
  const root = /* @__PURE__ */ jsx(
@@ -5764,8 +5749,8 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
5764
5749
  RadioGroupPrimitive.Indicator,
5765
5750
  {
5766
5751
  ...slot(radioGroupAnatomy, "indicator"),
5767
- className: "ds:flex ds:items-center ds:justify-center",
5768
- children: /* @__PURE__ */ jsx(CircleIcon, { className: "ds:fill-brand ds:text-brand ds:size-2", "aria-hidden": "true" })
5752
+ 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)]",
5753
+ children: /* @__PURE__ */ jsx(CircleIcon, { className: "ds:fill-current ds:size-2", "aria-hidden": "true" })
5769
5754
  }
5770
5755
  )
5771
5756
  }
@@ -5883,19 +5868,19 @@ function ResponsiveDialog({
5883
5868
  side,
5884
5869
  size = "md"
5885
5870
  }) {
5886
- const [uncontrolledOpen, setUncontrolledOpen] = React28.useState(defaultOpen);
5871
+ const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(defaultOpen);
5887
5872
  const controlled = open !== void 0;
5888
5873
  const isOpen = controlled ? open : uncontrolledOpen;
5889
- const handleOpenChange = React28.useCallback(
5874
+ const handleOpenChange = React30.useCallback(
5890
5875
  (next) => {
5891
5876
  if (!controlled) setUncontrolledOpen(next);
5892
5877
  onOpenChange?.(next);
5893
5878
  },
5894
5879
  [controlled, onOpenChange]
5895
5880
  );
5896
- const close = React28.useCallback(() => handleOpenChange(false), [handleOpenChange]);
5881
+ const close = React30.useCallback(() => handleOpenChange(false), [handleOpenChange]);
5897
5882
  const hasTitle = title !== void 0 && title !== null && title !== "";
5898
- React28.useEffect(() => {
5883
+ React30.useEffect(() => {
5899
5884
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
5900
5885
  if (!hasTitle) {
5901
5886
  errorOnce(
@@ -5953,7 +5938,7 @@ var RouteTransition = forwardRef(
5953
5938
  }
5954
5939
  );
5955
5940
  RouteTransition.displayName = "RouteTransition";
5956
- var ScrollArea = React28.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
5941
+ var ScrollArea = React30.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
5957
5942
  return /* @__PURE__ */ jsxs(
5958
5943
  ScrollAreaPrimitive.Root,
5959
5944
  {
@@ -5976,7 +5961,7 @@ var ScrollArea = React28.forwardRef(function ScrollArea2({ className, children,
5976
5961
  );
5977
5962
  });
5978
5963
  ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
5979
- var ScrollBar = React28.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
5964
+ var ScrollBar = React30.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
5980
5965
  return /* @__PURE__ */ jsx(
5981
5966
  ScrollAreaPrimitive.ScrollAreaScrollbar,
5982
5967
  {
@@ -6034,7 +6019,7 @@ function searchInputVariants({
6034
6019
  class: cn(SEARCH_RESET, row, classProp, className) || void 0
6035
6020
  });
6036
6021
  }
6037
- var SearchInput = React28.forwardRef(
6022
+ var SearchInput = React30.forwardRef(
6038
6023
  function SearchInput2({
6039
6024
  value,
6040
6025
  onValueChange,
@@ -6073,20 +6058,20 @@ var SearchInput = React28.forwardRef(
6073
6058
  "aria-labelledby": ariaLabelledBy,
6074
6059
  "aria-describedby": ariaDescribedBy
6075
6060
  });
6076
- const inputRef = React28.useRef(null);
6061
+ const inputRef = React30.useRef(null);
6077
6062
  const setRefs = useMergedRefs(ref, wiringRef, inputRef);
6078
6063
  const debouncedValue = useDebounce(value, debounceMs);
6079
- const isFirstRender = React28.useRef(true);
6080
- React28.useEffect(() => {
6064
+ const isFirstRender = React30.useRef(true);
6065
+ React30.useEffect(() => {
6081
6066
  if (isFirstRender.current) {
6082
6067
  isFirstRender.current = false;
6083
6068
  return;
6084
6069
  }
6085
6070
  onSearch?.(debouncedValue);
6086
6071
  }, [debouncedValue, onSearch]);
6087
- const latestChange = React28.useRef(onValueChange);
6072
+ const latestChange = React30.useRef(onValueChange);
6088
6073
  latestChange.current = onValueChange;
6089
- React28.useEffect(() => {
6074
+ React30.useEffect(() => {
6090
6075
  const owner = inputRef.current?.form;
6091
6076
  if (!owner) return;
6092
6077
  const handle = () => latestChange.current("");
@@ -6229,20 +6214,20 @@ function SearchSelect({
6229
6214
  const createNewLabel = createNewLabelProp ?? copy.createNew;
6230
6215
  const isSingleMode = value !== void 0 || onValueChange !== void 0;
6231
6216
  const closeOnSelect = isSingleMode || closeOnSelectProp;
6232
- const byId = React28.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
6217
+ const byId = React30.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
6233
6218
  const singleSelectedOption = isSingleMode && value ? byId.get(value) ?? null : null;
6234
- const selected = React28.useMemo(
6219
+ const selected = React30.useMemo(
6235
6220
  () => isSingleMode ? singleSelectedOption ? [singleSelectedOption] : [] : selectedProp ?? [],
6236
6221
  [isSingleMode, singleSelectedOption, selectedProp]
6237
6222
  );
6238
- const selectedIds = React28.useMemo(() => selected.map((s) => s.id), [selected]);
6239
- const [open, setOpen] = React28.useState(false);
6240
- const [search, setSearch] = React28.useState("");
6241
- const [activeChip, setActiveChip] = React28.useState(null);
6242
- const hasGroups = React28.useMemo(() => options.some((o) => o.group != null), [options]);
6243
- const hasLeadingDot = React28.useMemo(() => options.some((o) => !!o.color), [options]);
6244
- const pinnedSet = React28.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
6245
- const chips = React28.useMemo(() => {
6223
+ const selectedIds = React30.useMemo(() => selected.map((s) => s.id), [selected]);
6224
+ const [open, setOpen] = React30.useState(false);
6225
+ const [search, setSearch] = React30.useState("");
6226
+ const [activeChip, setActiveChip] = React30.useState(null);
6227
+ const hasGroups = React30.useMemo(() => options.some((o) => o.group != null), [options]);
6228
+ const hasLeadingDot = React30.useMemo(() => options.some((o) => !!o.color), [options]);
6229
+ const pinnedSet = React30.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
6230
+ const chips = React30.useMemo(() => {
6246
6231
  if (!groupFilter || !hasGroups) return [];
6247
6232
  const seen = [];
6248
6233
  for (const option of options) {
@@ -6254,7 +6239,7 @@ function SearchSelect({
6254
6239
  }, [groupFilter, hasGroups, options, pinnedSet]);
6255
6240
  const chipActive = chips.length > 0 && activeChip !== null;
6256
6241
  const trimmed = search.trim();
6257
- const groupCounts = React28.useMemo(() => {
6242
+ const groupCounts = React30.useMemo(() => {
6258
6243
  const counts = /* @__PURE__ */ new Map();
6259
6244
  if (!showGroupCounts || trimmed) return counts;
6260
6245
  for (const option of options) {
@@ -6264,7 +6249,7 @@ function SearchSelect({
6264
6249
  }
6265
6250
  return counts;
6266
6251
  }, [showGroupCounts, trimmed, options, selectedIds]);
6267
- const rows = React28.useMemo(
6252
+ const rows = React30.useMemo(
6268
6253
  () => options.filter((option) => !chipActive || option.group === activeChip).map((option) => {
6269
6254
  const heading = chipActive ? void 0 : option.group ?? void 0;
6270
6255
  const count = heading ? groupCounts.get(heading) : void 0;
@@ -6287,7 +6272,7 @@ function SearchSelect({
6287
6272
  };
6288
6273
  const singleValue = closeOnSelect ? selected[0] ?? null : null;
6289
6274
  const showValue = singleValue !== null && !open;
6290
- const renderValue = React28.useCallback(
6275
+ const renderValue = React30.useCallback(
6291
6276
  (row) => {
6292
6277
  const source = sourceOf(row);
6293
6278
  return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6316,7 +6301,7 @@ function SearchSelect({
6316
6301
  },
6317
6302
  [descriptionVariant]
6318
6303
  );
6319
- const messages = React28.useMemo(
6304
+ const messages = React30.useMemo(
6320
6305
  () => ({
6321
6306
  empty: search ? copy.empty : copy.noOptions,
6322
6307
  clear: singleValue ? copy.clearNamed(singleValue.label) : copy.clear,
@@ -6456,7 +6441,7 @@ function SearchSelect({
6456
6441
  ] });
6457
6442
  }
6458
6443
  SearchSelect.displayName = "SearchSelect";
6459
- var Separator2 = React28.forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
6444
+ var Separator2 = React30.forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
6460
6445
  return /* @__PURE__ */ jsx(
6461
6446
  SeparatorPrimitive.Root,
6462
6447
  {
@@ -6593,7 +6578,7 @@ var THUMB_SIZE = {
6593
6578
  md: "ds:size-4",
6594
6579
  lg: "ds:size-(--control-icon-xl)"
6595
6580
  };
6596
- var Slider = React28.forwardRef(
6581
+ var Slider = React30.forwardRef(
6597
6582
  function Slider2({
6598
6583
  className,
6599
6584
  label,
@@ -6630,8 +6615,8 @@ var Slider = React28.forwardRef(
6630
6615
  defaultProp: defaultValue,
6631
6616
  onChange: onValueChange
6632
6617
  });
6633
- const initialValue = React28.useRef(valueProp ?? defaultValue);
6634
- const rootRef = React28.useRef(null);
6618
+ const initialValue = React30.useRef(valueProp ?? defaultValue);
6619
+ const rootRef = React30.useRef(null);
6635
6620
  useFormReset(rootRef, () => setValue(initialValue.current), form);
6636
6621
  const mergedRef = useMergedRefs(ref, rootRef);
6637
6622
  const displayValue = (() => {
@@ -6987,7 +6972,7 @@ var StackedBarChart = forwardRef(
6987
6972
  children: ticks.map((t) => /* @__PURE__ */ jsx(
6988
6973
  "span",
6989
6974
  {
6990
- className: "ds:absolute ds:right-0 ds:-translate-y-1/2 ds:leading-none",
6975
+ className: "ds:absolute ds:right-0 ds:translate-y-1/2 ds:leading-none",
6991
6976
  style: { bottom: `${t / niceMax * 100}%` },
6992
6977
  children: formatValue(t)
6993
6978
  },
@@ -7410,7 +7395,9 @@ var StickyActionBar = forwardRef(
7410
7395
  className: cn(
7411
7396
  mode === "fixed" ? "ds:fixed" : "ds:sticky",
7412
7397
  "ds:inset-x-0 ds:z-[calc(var(--z-base)+20)] ds:flex ds:flex-wrap ds:items-center ds:gap-3",
7413
- "ds:border-t ds:border-rule ds:bg-surface/80 ds:px-4 ds:py-3 ds:backdrop-blur-md ds:sm:px-6",
7398
+ // Translucent only where the blur behind it exists; an opaque bar
7399
+ // otherwise, so page content never shows through un-blurred.
7400
+ "ds:border-t ds:border-rule ds:bg-surface ds:px-4 ds:py-3 ds:backdrop-blur-md ds:sm:px-6",
7414
7401
  "ds:supports-[backdrop-filter]:bg-surface/80",
7415
7402
  offsetForMobileNav ? "ds:bottom-[calc(3.5rem_+_env(safe-area-inset-bottom))] ds:sm:bottom-0" : "ds:bottom-0",
7416
7403
  className
@@ -7539,6 +7526,55 @@ var SuiteProgress = forwardRef(function SuiteProgress2({
7539
7526
  );
7540
7527
  });
7541
7528
  SuiteProgress.displayName = "SuiteProgress";
7529
+ var TableDensityToggle = React30.forwardRef(
7530
+ function TableDensityToggle2({
7531
+ value,
7532
+ onValueChange,
7533
+ size = "sm",
7534
+ messages: messagesOverride,
7535
+ "aria-label": ariaLabel,
7536
+ "aria-labelledby": ariaLabelledBy,
7537
+ className
7538
+ }, ref) {
7539
+ const messages = useDsMessages("tableDensity", messagesOverride);
7540
+ const itemClassName = "ds:aspect-square ds:px-0 ds:[&_svg]:size-4";
7541
+ return /* @__PURE__ */ jsxs(
7542
+ ToggleGroup,
7543
+ {
7544
+ ref,
7545
+ type: "single",
7546
+ variant: "segmented",
7547
+ size,
7548
+ value,
7549
+ onValueChange: (next) => {
7550
+ if (next) onValueChange(next);
7551
+ },
7552
+ "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? messages.label,
7553
+ "aria-labelledby": ariaLabelledBy,
7554
+ className,
7555
+ children: [
7556
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
7557
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
7558
+ ToggleGroupItem,
7559
+ {
7560
+ value: "comfortable",
7561
+ "aria-label": messages.comfortable,
7562
+ className: itemClassName,
7563
+ children: /* @__PURE__ */ jsx(RowsIcon, {})
7564
+ }
7565
+ ) }),
7566
+ /* @__PURE__ */ jsx(TooltipContent, { children: messages.comfortable })
7567
+ ] }),
7568
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
7569
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToggleGroupItem, { value: "compact", "aria-label": messages.compact, className: itemClassName, children: /* @__PURE__ */ jsx(Rows4Icon, {}) }) }),
7570
+ /* @__PURE__ */ jsx(TooltipContent, { children: messages.compact })
7571
+ ] })
7572
+ ]
7573
+ }
7574
+ );
7575
+ }
7576
+ );
7577
+ TableDensityToggle.displayName = "TableDensityToggle";
7542
7578
  var ToastContext = createContext(null);
7543
7579
  function useToast() {
7544
7580
  const ctx = useContext(ToastContext);
@@ -8194,7 +8230,7 @@ var StatusBadge = forwardRef(function StatusBadge2({
8194
8230
  className: cn(
8195
8231
  "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
8196
8232
  // The dot is its own 6px box, as on Badge; glyphs and the spinner sit in the 14px icon box.
8197
- !showDot && "ds:size-3.5"
8233
+ !showDot && "ds:size-3.5 ds:[&>svg]:max-h-full ds:[&>svg]:max-w-full"
8198
8234
  ),
8199
8235
  "aria-hidden": "true",
8200
8236
  children: indicator
@@ -8285,6 +8321,9 @@ function MultiSelect(props) {
8285
8321
  return /* @__PURE__ */ jsx(Combobox, { ...props, multiple: true });
8286
8322
  }
8287
8323
  MultiSelect.displayName = "MultiSelect";
8324
+
8325
+ // src/foundation/use-reduced-motion.ts
8326
+ var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
8288
8327
  var statusLabel = {
8289
8328
  "not-started": "Not started",
8290
8329
  "in-progress": "In progress",
@@ -8333,8 +8372,9 @@ var QuestionnairePanel = forwardRef(
8333
8372
  const selectedCardRef = useRef(null);
8334
8373
  const titleId = useId();
8335
8374
  useEffect(() => {
8375
+ const reduce = typeof window !== "undefined" && window.matchMedia?.(REDUCED_MOTION_QUERY).matches;
8336
8376
  selectedCardRef.current?.scrollIntoView({
8337
- behavior: "smooth",
8377
+ behavior: reduce ? "auto" : "smooth",
8338
8378
  block: "center",
8339
8379
  inline: "center"
8340
8380
  });
@@ -8369,7 +8409,7 @@ var QuestionnairePanel = forwardRef(
8369
8409
  "aria-expanded": isOpen,
8370
8410
  className: cn(
8371
8411
  "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",
8372
- "ds:hover:bg-brand-bg/50 ds:transition-colors ds:duration-[var(--duration-fast)]",
8412
+ "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",
8373
8413
  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
8374
8414
  ),
8375
8415
  children: [
@@ -8381,7 +8421,7 @@ var QuestionnairePanel = forwardRef(
8381
8421
  size: 13,
8382
8422
  "aria-hidden": "true",
8383
8423
  className: cn(
8384
- "ds:text-brand ds:transition-transform ds:duration-[var(--duration-fast)]",
8424
+ "ds:text-brand ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
8385
8425
  !isOpen && "ds:-rotate-90"
8386
8426
  )
8387
8427
  }
@@ -8400,7 +8440,7 @@ var QuestionnairePanel = forwardRef(
8400
8440
  "data-active": selected ? "true" : void 0,
8401
8441
  className: cn(
8402
8442
  "ds:group ds:flex ds:h-8 ds:w-full ds:items-center ds:gap-3 ds:px-5 ds:text-left",
8403
- "ds:text-fg-2 ds:transition-colors ds:duration-[var(--duration-fast)]",
8443
+ "ds:text-fg-2 ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
8404
8444
  "ds:hover:bg-surface-hover ds:hover:text-fg",
8405
8445
  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
8406
8446
  selected && "ds:bg-brand-bg ds:text-brand ds:font-semibold"
@@ -8639,7 +8679,9 @@ var FolderTree = forwardRef(function FolderTree2({ nodes, activeId, onSelect, de
8639
8679
  toggle(node.id);
8640
8680
  },
8641
8681
  className: cn(
8642
- "ds:shrink-0 ds:text-fg-4 ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
8682
+ "ds:shrink-0 ds:rounded-icon ds:text-fg-4 ds:hover:text-fg-2",
8683
+ "ds:transition-[color,transform] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
8684
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
8643
8685
  isOpen && "ds:rotate-90"
8644
8686
  ),
8645
8687
  children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, "aria-hidden": "true" })
@@ -8714,7 +8756,13 @@ function SegmentedControl({
8714
8756
  ...disabled !== void 0 && { disabled },
8715
8757
  "aria-label": aria["aria-label"],
8716
8758
  "aria-labelledby": aria["aria-labelledby"],
8717
- className: cn("ds:bg-bg-2 ds:rounded-pill ds:p-0.5", className),
8759
+ className: cn(
8760
+ // `segmented` gets its track chrome from `ToggleGroup` itself
8761
+ // (quiet surface-sunken well, control radius, hairline border) —
8762
+ // this preset's own bare pill track is the `default`/`outline` look.
8763
+ variant === "segmented" ? void 0 : "ds:bg-bg-2 ds:rounded-pill ds:p-0.5",
8764
+ className
8765
+ ),
8718
8766
  children: options.map((option) => /* @__PURE__ */ jsxs(
8719
8767
  ToggleGroupItem,
8720
8768
  {
@@ -8783,6 +8831,195 @@ var Content6 = forwardRef(function Content7({ padding = "default", padTop, padBo
8783
8831
  );
8784
8832
  });
8785
8833
  Content6.displayName = "Content";
8834
+ function matchesPath(href, currentPath, mode = "prefix") {
8835
+ if (currentPath === href) return true;
8836
+ if (mode === "exact") return false;
8837
+ return currentPath.startsWith(href.endsWith("/") ? href : `${href}/`);
8838
+ }
8839
+ function findActiveId(sections, currentPath) {
8840
+ let activeId = null;
8841
+ let longest = -1;
8842
+ const visit = (items) => {
8843
+ for (const item of items) {
8844
+ if (matchesPath(item.href, currentPath, item.match) && item.href.length > longest) {
8845
+ longest = item.href.length;
8846
+ activeId = item.id;
8847
+ }
8848
+ if (item.children) visit(item.children);
8849
+ }
8850
+ };
8851
+ for (const section of sections) visit(section.items);
8852
+ return activeId;
8853
+ }
8854
+ function hasActiveDescendant(item, activeId) {
8855
+ if (!item.children || activeId == null) return false;
8856
+ return item.children.some((child) => child.id === activeId || hasActiveDescendant(child, activeId));
8857
+ }
8858
+ var TRUNCATED_LABEL_CLASSNAME = "ds:line-clamp-none ds:truncate";
8859
+ function getNodeText(node) {
8860
+ if (node == null || typeof node === "boolean") return "";
8861
+ if (typeof node === "string" || typeof node === "number") return String(node);
8862
+ if (Array.isArray(node)) return node.map(getNodeText).filter(Boolean).join(" ");
8863
+ if (React30.isValidElement(node)) {
8864
+ return getNodeText(node.props.children);
8865
+ }
8866
+ return "";
8867
+ }
8868
+ function getAccessibleLabel(item) {
8869
+ const parts = [getNodeText(item.label), item.badge != null ? getNodeText(item.badge) : ""];
8870
+ return parts.filter(Boolean).join(", ") || void 0;
8871
+ }
8872
+ function AppSidebarItemContent({ item, showTitle }) {
8873
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
8874
+ item.icon,
8875
+ /* @__PURE__ */ jsx(
8876
+ SidebarLinkLabel,
8877
+ {
8878
+ className: TRUNCATED_LABEL_CLASSNAME,
8879
+ title: showTitle && typeof item.label === "string" ? item.label : void 0,
8880
+ children: item.label
8881
+ }
8882
+ ),
8883
+ item.badge != null && /* @__PURE__ */ jsx(SidebarLinkBadge, { tone: item.badgeTone, children: item.badge })
8884
+ ] });
8885
+ }
8886
+ function AppSidebarLeafLink({
8887
+ item,
8888
+ active,
8889
+ showTitle,
8890
+ RouterLink
8891
+ }) {
8892
+ 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 }) }) });
8893
+ }
8894
+ function AppSidebarRow({
8895
+ item,
8896
+ activeId,
8897
+ showTitle,
8898
+ RouterLink
8899
+ }) {
8900
+ const active = item.id === activeId;
8901
+ if (!item.children || item.children.length === 0) {
8902
+ return /* @__PURE__ */ jsx(AppSidebarLeafLink, { item, active, showTitle, RouterLink });
8903
+ }
8904
+ return /* @__PURE__ */ jsx(
8905
+ SidebarLinkGroup,
8906
+ {
8907
+ id: item.id,
8908
+ icon: item.icon,
8909
+ label: (
8910
+ // `SidebarLinkGroup` wraps `label` in its own frozen `line-clamp-1`
8911
+ // span (not ours to override via className), so truncation has to
8912
+ // come from this inner block instead: a definite width (`w-full`)
8913
+ // plus the standard ellipsis trio truncates regardless of the
8914
+ // ancestor's `-webkit-box` display.
8915
+ /* @__PURE__ */ jsx(
8916
+ "span",
8917
+ {
8918
+ className: "ds:block ds:w-full ds:truncate",
8919
+ title: showTitle && typeof item.label === "string" ? item.label : void 0,
8920
+ children: item.label
8921
+ }
8922
+ )
8923
+ ),
8924
+ href: item.href,
8925
+ active,
8926
+ defaultOpen: active || hasActiveDescendant(item, activeId),
8927
+ children: item.children.map((child) => /* @__PURE__ */ jsx(AppSidebarRow, { item: child, activeId, showTitle, RouterLink }, child.id))
8928
+ }
8929
+ );
8930
+ }
8931
+ function AppSidebarNav({
8932
+ sections,
8933
+ currentPath,
8934
+ sectionClassName,
8935
+ collapsible = false
8936
+ }) {
8937
+ const RouterLink = useLinkComponent() ?? PlainLink;
8938
+ const activeId = React30.useMemo(() => findActiveId(sections, currentPath), [sections, currentPath]);
8939
+ const { state } = useSidebarState();
8940
+ const showTitle = !(collapsible && state === "rail");
8941
+ return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => /* @__PURE__ */ jsx(
8942
+ SidebarSection,
8943
+ {
8944
+ label: section.label,
8945
+ headerActions: section.headerActions,
8946
+ className: sectionClassName,
8947
+ children: section.items.map((item) => /* @__PURE__ */ jsx(
8948
+ AppSidebarRow,
8949
+ {
8950
+ item,
8951
+ activeId,
8952
+ showTitle,
8953
+ RouterLink
8954
+ },
8955
+ item.id
8956
+ ))
8957
+ },
8958
+ section.id
8959
+ )) });
8960
+ }
8961
+ AppSidebarNav.displayName = "AppSidebarNav";
8962
+ var AppSidebar = React30.forwardRef(function AppSidebar2({
8963
+ sections,
8964
+ currentPath,
8965
+ sectionClassName,
8966
+ brand,
8967
+ footer,
8968
+ user,
8969
+ variant = "flush",
8970
+ collapsible,
8971
+ className,
8972
+ classNames,
8973
+ ...props
8974
+ }, ref) {
8975
+ return /* @__PURE__ */ jsxs(
8976
+ Sidebar,
8977
+ {
8978
+ ref,
8979
+ variant,
8980
+ ...collapsible !== void 0 && { collapsible },
8981
+ className: cn(classNames?.root, className),
8982
+ ...props,
8983
+ children: [
8984
+ brand,
8985
+ /* @__PURE__ */ jsx(
8986
+ AppSidebarNav,
8987
+ {
8988
+ sections,
8989
+ currentPath,
8990
+ sectionClassName: cn(classNames?.section, sectionClassName),
8991
+ collapsible
8992
+ }
8993
+ ),
8994
+ (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: [
8995
+ footer,
8996
+ user != null && /* @__PURE__ */ jsx(
8997
+ "div",
8998
+ {
8999
+ className: cn(
9000
+ "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",
9001
+ // <SidebarUser> already renders a 28px avatar (`size="sm"`)
9002
+ // and a 13px/medium name — both already the body-sm role's
9003
+ // computed size. Only the subtitle moves off its default
9004
+ // fg-4/mono treatment, reached through the part's own
9005
+ // `data-slot` (ADR-008) instead of a second copy of
9006
+ // SidebarUser's markup.
9007
+ "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",
9008
+ // Rail: the card's border/padding has nothing left to frame
9009
+ // once the name/subtitle collapse to a lone avatar —
9010
+ // <SidebarUser> already carries `data-collapsed` for it.
9011
+ "ds:has-[[data-collapsed]]:border-0 ds:has-[[data-collapsed]]:px-0 ds:has-[[data-collapsed]]:pt-0",
9012
+ classNames?.footer
9013
+ ),
9014
+ children: /* @__PURE__ */ jsx(SidebarUser, { ...user })
9015
+ }
9016
+ )
9017
+ ] })
9018
+ ]
9019
+ }
9020
+ );
9021
+ });
9022
+ AppSidebar.displayName = "AppSidebar";
8786
9023
  var AppHeader = forwardRef(function AppHeader2({ className, ...props }, ref) {
8787
9024
  return /* @__PURE__ */ jsx(
8788
9025
  "header",
@@ -9402,7 +9639,12 @@ var KanbanColumn = forwardRef(function KanbanColumn2({ title, count, className,
9402
9639
  KanbanColumn.displayName = "KanbanColumn";
9403
9640
  var kanbanCardBase = cn(
9404
9641
  "ds:bg-surface ds:border ds:border-rule ds:rounded-card ds:shadow-quiet ds:p-3 ds:space-y-2 ds:cursor-grab",
9405
- "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:hover:border-rule-strong ds:motion-reduce:transition-none"
9642
+ // Card `interactive`'s lift (F14): a shadow step, no geometry, so a column
9643
+ // never jitters under the pointer.
9644
+ "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",
9645
+ "ds:active:cursor-grabbing",
9646
+ // Drag libraries (dnd-kit, @hello-pangea/dnd) make the card focusable.
9647
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
9406
9648
  );
9407
9649
  var priorityConfig = {
9408
9650
  high: { label: "High", variant: "destructive" },
@@ -9458,7 +9700,7 @@ var MessageBubble = forwardRef(function MessageBubble2({ avatar, name, timestamp
9458
9700
  "span",
9459
9701
  {
9460
9702
  className: cn(
9461
- "ds:ml-auto ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none",
9703
+ "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",
9462
9704
  "ds:group-hover/bubble:opacity-100 ds:group-focus-within/bubble:opacity-100"
9463
9705
  ),
9464
9706
  children: actions
@@ -9504,7 +9746,9 @@ var MessageBubbleAction = forwardRef(
9504
9746
  ref,
9505
9747
  type,
9506
9748
  className: cn(
9507
- "ds:text-fg-4 ds:text-[10px] ds:focus-visible:outline-none",
9749
+ "ds:text-fg-4 ds:text-[10px] ds:rounded-badge",
9750
+ "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
9751
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9508
9752
  destructive ? "ds:hover:text-danger-fg" : "ds:hover:text-fg",
9509
9753
  className
9510
9754
  ),
@@ -9568,7 +9812,9 @@ var MessageComposer = forwardRef(
9568
9812
  className: cn(
9569
9813
  "ds:relative ds:flex ds:flex-col",
9570
9814
  "ds:border-rule ds:bg-input-background ds:rounded-xl ds:border",
9571
- "ds:transition-shadow ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
9815
+ // Border, fill and shadow move together on focus-within; transitioning the
9816
+ // shadow alone let the border and fill snap.
9817
+ "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",
9572
9818
  "ds:focus-within:border-accent-ring ds:focus-within:bg-surface ds:focus-within:shadow-flat",
9573
9819
  isDisabled && "ds:pointer-events-none ds:opacity-60",
9574
9820
  className
@@ -9584,10 +9830,10 @@ var MessageComposer = forwardRef(
9584
9830
  className: "ds:flex ds:w-full ds:gap-1.5 ds:overflow-x-auto",
9585
9831
  style: { maskImage, WebkitMaskImage: maskImage },
9586
9832
  children: chipsLoading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(
9587
- "div",
9833
+ Skeleton,
9588
9834
  {
9589
9835
  "aria-hidden": "true",
9590
- 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"
9836
+ className: "ds:h-6 ds:w-20 ds:shrink-0 ds:rounded-full"
9591
9837
  },
9592
9838
  i
9593
9839
  )) : chips.map((chip) => /* @__PURE__ */ jsx(
@@ -9663,7 +9909,7 @@ var NotificationPanelHeader = forwardRef(
9663
9909
  {
9664
9910
  type: "button",
9665
9911
  onClick: onMarkAllRead,
9666
- 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",
9912
+ 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)]",
9667
9913
  children: "Mark all read"
9668
9914
  }
9669
9915
  ),
@@ -9673,7 +9919,7 @@ var NotificationPanelHeader = forwardRef(
9673
9919
  type: "button",
9674
9920
  onClick: onSettings,
9675
9921
  "aria-label": "Notification settings",
9676
- className: "ds:text-fg-3 ds:hover:text-fg ds:hover:bg-surface-hover ds:rounded-md ds:p-1 ds:[&_svg]:size-[15px]",
9922
+ 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)]",
9677
9923
  children: /* @__PURE__ */ jsx(SettingsIcon, {})
9678
9924
  }
9679
9925
  )
@@ -9707,8 +9953,9 @@ var NotificationFilter = forwardRef(
9707
9953
  onClick: () => onValueChange(option),
9708
9954
  "aria-pressed": selected,
9709
9955
  className: cn(
9710
- "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",
9711
- "ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
9956
+ "ds:inline-flex ds:items-center ds:gap-1.5 ds:rounded-lg ds:px-2.5 ds:py-1 ds:capitalize",
9957
+ "ds:transition-[color,background-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
9958
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9712
9959
  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"
9713
9960
  ),
9714
9961
  children: [
@@ -9781,7 +10028,9 @@ var NotificationItem = forwardRef(
9781
10028
  className: cn(
9782
10029
  "ds:flex ds:w-full ds:gap-3 ds:px-4 ds:py-3 ds:text-left ds:outline-none",
9783
10030
  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
9784
- 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",
10031
+ 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",
10032
+ // Rows stack edge to edge, so focus is an inset outline (TableRow's).
10033
+ "ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
9785
10034
  className
9786
10035
  ),
9787
10036
  ...props,
@@ -9835,7 +10084,7 @@ var NotificationPanelFooter = forwardRef(
9835
10084
  className: cn(
9836
10085
  "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",
9837
10086
  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
9838
- "ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
10087
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9839
10088
  className
9840
10089
  ),
9841
10090
  ...props,
@@ -9894,7 +10143,7 @@ var FilterChip = forwardRef(function FilterChip2({ active = false, size, count,
9894
10143
  );
9895
10144
  });
9896
10145
  FilterChip.displayName = "FilterChip";
9897
- var BulkActionBarContext = React28.createContext({ tone: "surface" });
10146
+ var BulkActionBarContext = React30.createContext({ tone: "surface" });
9898
10147
  function actionClasses(tone, destructive) {
9899
10148
  const base = cn(
9900
10149
  "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",
@@ -9907,18 +10156,18 @@ function actionClasses(tone, destructive) {
9907
10156
  if (tone === "inverse") {
9908
10157
  return cn(
9909
10158
  base,
9910
- "ds:data-[state=open]:bg-selection-floating-active-bg",
10159
+ "ds:data-[state=open]:bg-selection-floating-active-bg ds:aria-expanded:bg-selection-floating-active-bg",
9911
10160
  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"
9912
10161
  );
9913
10162
  }
9914
10163
  return cn(
9915
10164
  base,
9916
- "ds:data-[state=open]:bg-control-active-bg",
10165
+ "ds:data-[state=open]:bg-control-active-bg ds:aria-expanded:bg-control-active-bg",
9917
10166
  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"
9918
10167
  );
9919
10168
  }
9920
- var BulkActionBarAction = React28.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
9921
- const { tone } = React28.use(BulkActionBarContext);
10169
+ var BulkActionBarAction = React30.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
10170
+ const { tone } = React30.use(BulkActionBarContext);
9922
10171
  const Comp = asChild ? Slot : "button";
9923
10172
  return /* @__PURE__ */ jsx(
9924
10173
  Comp,
@@ -9932,7 +10181,7 @@ var BulkActionBarAction = React28.forwardRef(function BulkActionBarAction2({ asC
9932
10181
  });
9933
10182
  BulkActionBarAction.displayName = "BulkActionBarAction";
9934
10183
  function BulkActionBarSeparator({ className }) {
9935
- const { tone } = React28.use(BulkActionBarContext);
10184
+ const { tone } = React30.use(BulkActionBarContext);
9936
10185
  return /* @__PURE__ */ jsx(
9937
10186
  "span",
9938
10187
  {
@@ -9945,6 +10194,7 @@ function BulkActionBarSeparator({ className }) {
9945
10194
  }
9946
10195
  );
9947
10196
  }
10197
+ 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)]";
9948
10198
  function BulkActionBarClear({
9949
10199
  variant,
9950
10200
  clearLabel,
@@ -9990,7 +10240,7 @@ function BulkActionBar({
9990
10240
  const labelText = label ?? `${selectedCount} selected`;
9991
10241
  const tone = variant === "page-floating" ? "inverse" : "surface";
9992
10242
  const content = /* @__PURE__ */ jsxs(BulkActionBarContext, { value: { tone }, children: [
9993
- /* @__PURE__ */ jsx("span", { className: "ds:text-sm ds:font-medium ds:tabular-nums", children: labelText }),
10243
+ /* @__PURE__ */ jsx("span", { className: "ds:text-sm ds:font-medium ds:tabular-nums ds:whitespace-nowrap", children: labelText }),
9994
10244
  /* @__PURE__ */ jsx(BulkActionBarSeparator, {}),
9995
10245
  /* @__PURE__ */ jsx("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-1", children }),
9996
10246
  /* @__PURE__ */ jsx("div", { className: "ds:min-w-2 ds:flex-1" }),
@@ -10014,7 +10264,7 @@ function BulkActionBar({
10014
10264
  ),
10015
10265
  ...props,
10016
10266
  children: [
10017
- /* @__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 }),
10267
+ /* @__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 }),
10018
10268
  footer
10019
10269
  ]
10020
10270
  }
@@ -10030,7 +10280,7 @@ function BulkActionBar({
10030
10280
  ),
10031
10281
  ...props,
10032
10282
  children: [
10033
- /* @__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 }),
10283
+ /* @__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 }),
10034
10284
  footer
10035
10285
  ]
10036
10286
  }
@@ -10042,7 +10292,7 @@ function BulkActionBar({
10042
10292
  className: cn("ds:sticky ds:bottom-4 ds:z-[var(--z-sticky)] ds:mt-3 ds:flex ds:justify-center", className),
10043
10293
  ...props,
10044
10294
  children: [
10045
- /* @__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 }),
10295
+ /* @__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 }),
10046
10296
  footer
10047
10297
  ]
10048
10298
  }
@@ -10394,7 +10644,14 @@ function DisplayMenu({
10394
10644
  {
10395
10645
  ref: flyoutRef,
10396
10646
  tabIndex: -1,
10397
- style: { top: flyout.top, width: FLYOUT_WIDTH, maxHeight: flyout.maxHeight },
10647
+ "data-ds-presence": "floating",
10648
+ "data-state": "open",
10649
+ style: {
10650
+ top: flyout.top,
10651
+ width: FLYOUT_WIDTH,
10652
+ maxHeight: flyout.maxHeight,
10653
+ transformOrigin: flyout.side === "left" ? "right top" : "left top"
10654
+ },
10398
10655
  className: cn(
10399
10656
  // Column + overflow-hidden so the option list (the only flexible
10400
10657
  // part) absorbs the height cap, while the search box and Clear
@@ -10507,35 +10764,35 @@ function DisplayMenu({
10507
10764
  function EmptyRow({ label = "No matches" }) {
10508
10765
  return /* @__PURE__ */ jsx("p", { className: "ds:px-2 ds:py-3 ds:text-center ds:text-[11px] ds:text-fg-3", children: label });
10509
10766
  }
10510
- var StickyStackContext = React28.createContext(null);
10767
+ var StickyStackContext = React30.createContext(null);
10511
10768
  function StickyStack({
10512
10769
  layers,
10513
10770
  top = 0,
10514
10771
  layerMode = "fixed",
10515
10772
  children
10516
10773
  }) {
10517
- const [layerHeights, setLayerHeights] = React28.useState({});
10518
- const normalizedLayers = React28.useMemo(() => {
10774
+ const [layerHeights, setLayerHeights] = React30.useState({});
10775
+ const normalizedLayers = React30.useMemo(() => {
10519
10776
  const names = [...layers];
10520
10777
  if (new Set(names).size !== names.length) {
10521
10778
  throw new Error("StickyStack layer names must be unique.");
10522
10779
  }
10523
10780
  return names;
10524
10781
  }, [layers]);
10525
- const setLayerHeight = React28.useCallback((name, height) => {
10782
+ const setLayerHeight = React30.useCallback((name, height) => {
10526
10783
  setLayerHeights((current) => {
10527
10784
  if (current[name] === height) return current;
10528
10785
  return { ...current, [name]: height };
10529
10786
  });
10530
10787
  }, []);
10531
- const value = React28.useMemo(
10788
+ const value = React30.useMemo(
10532
10789
  () => ({ layers: normalizedLayers, layerHeights, setLayerHeight, top, layerMode }),
10533
10790
  [layerHeights, layerMode, normalizedLayers, setLayerHeight, top]
10534
10791
  );
10535
10792
  return /* @__PURE__ */ jsx(StickyStackContext, { value, children });
10536
10793
  }
10537
10794
  function useStickyStack(componentName) {
10538
- const context = React28.use(StickyStackContext);
10795
+ const context = React30.use(StickyStackContext);
10539
10796
  if (!context) {
10540
10797
  throw new Error(`${componentName} must be rendered inside StickyStack.`);
10541
10798
  }
@@ -10558,21 +10815,21 @@ function stackOffset(context, layerName, includeNamedLayer) {
10558
10815
  const base = cssLength(top);
10559
10816
  return measuredOffset === 0 ? base : `calc(${base} + ${measuredOffset}px)`;
10560
10817
  }
10561
- var StickyStackLayer = React28.forwardRef(
10818
+ var StickyStackLayer = React30.forwardRef(
10562
10819
  function StickyStackLayer2({ name, hostClassName, layerMode, className, children, style, ...props }, forwardedRef) {
10563
10820
  const context = useStickyStack("StickyStackLayer");
10564
10821
  const { setLayerHeight } = context;
10565
10822
  const mode = layerMode ?? context.layerMode;
10566
10823
  const top = stackOffset(context, name, false);
10567
- const hostRef = React28.useRef(null);
10568
- const layerRef = React28.useRef(null);
10569
- const [bounds, setBounds] = React28.useState({
10824
+ const hostRef = React30.useRef(null);
10825
+ const layerRef = React30.useRef(null);
10826
+ const [bounds, setBounds] = React30.useState({
10570
10827
  height: 0,
10571
10828
  left: 0,
10572
10829
  ready: false,
10573
10830
  width: 0
10574
10831
  });
10575
- const setLayerRef = React28.useCallback(
10832
+ const setLayerRef = React30.useCallback(
10576
10833
  (node) => {
10577
10834
  layerRef.current = node;
10578
10835
  if (typeof forwardedRef === "function") forwardedRef(node);
@@ -10580,7 +10837,7 @@ var StickyStackLayer = React28.forwardRef(
10580
10837
  },
10581
10838
  [forwardedRef]
10582
10839
  );
10583
- const measure = React28.useCallback(() => {
10840
+ const measure = React30.useCallback(() => {
10584
10841
  const host = hostRef.current;
10585
10842
  const layer = layerRef.current;
10586
10843
  if (!host || !layer) return;
@@ -10597,7 +10854,7 @@ var StickyStackLayer = React28.forwardRef(
10597
10854
  );
10598
10855
  setLayerHeight(name, next.height);
10599
10856
  }, [name, setLayerHeight]);
10600
- React28.useLayoutEffect(() => {
10857
+ React30.useLayoutEffect(() => {
10601
10858
  measure();
10602
10859
  let frame = 0;
10603
10860
  const scheduleMeasure = () => {
@@ -10650,7 +10907,7 @@ var StickyStackLayer = React28.forwardRef(
10650
10907
  }
10651
10908
  );
10652
10909
  StickyStackLayer.displayName = "StickyStackLayer";
10653
- var StickyStackSticky = React28.forwardRef(
10910
+ var StickyStackSticky = React30.forwardRef(
10654
10911
  function StickyStackSticky2({ after, className, style, ...props }, ref) {
10655
10912
  const context = useStickyStack("StickyStackSticky");
10656
10913
  const top = stackOffset(context, after, true);
@@ -10671,7 +10928,7 @@ var StickyStackSticky = React28.forwardRef(
10671
10928
  }
10672
10929
  );
10673
10930
  StickyStackSticky.displayName = "StickyStackSticky";
10674
- var StickyStackSectionHeader = React28.forwardRef(function StickyStackSectionHeader2(props, ref) {
10931
+ var StickyStackSectionHeader = React30.forwardRef(function StickyStackSectionHeader2(props, ref) {
10675
10932
  return /* @__PURE__ */ jsx(StickyStackSticky, { ref, "data-sticky-stack-section-header": "", ...props });
10676
10933
  });
10677
10934
  StickyStackSectionHeader.displayName = "StickyStackSectionHeader";
@@ -10681,7 +10938,7 @@ function defineStatusMap(map) {
10681
10938
  if (map === void 0) return (entries) => entries;
10682
10939
  return map;
10683
10940
  }
10684
- var ConfirmHostContext = React28.createContext(null);
10941
+ var ConfirmHostContext = React30.createContext(null);
10685
10942
  var isServer = typeof window === "undefined";
10686
10943
  function missingHost(hook) {
10687
10944
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
@@ -10692,8 +10949,8 @@ function missingHost(hook) {
10692
10949
  );
10693
10950
  }
10694
10951
  function useConfirm() {
10695
- const host = React28.useContext(ConfirmHostContext);
10696
- return React28.useMemo(() => {
10952
+ const host = React30.useContext(ConfirmHostContext);
10953
+ return React30.useMemo(() => {
10697
10954
  if (host) return host.confirm;
10698
10955
  return () => {
10699
10956
  missingHost("useConfirm");
@@ -10702,8 +10959,8 @@ function useConfirm() {
10702
10959
  }, [host]);
10703
10960
  }
10704
10961
  function usePrompt() {
10705
- const host = React28.useContext(ConfirmHostContext);
10706
- return React28.useMemo(() => {
10962
+ const host = React30.useContext(ConfirmHostContext);
10963
+ return React30.useMemo(() => {
10707
10964
  if (host) return host.prompt;
10708
10965
  return () => {
10709
10966
  missingHost("usePrompt");
@@ -10712,12 +10969,12 @@ function usePrompt() {
10712
10969
  }, [host]);
10713
10970
  }
10714
10971
  function ConfirmHost({ children }) {
10715
- const [queue, setQueue] = React28.useState([]);
10716
- const nextId = React28.useRef(0);
10717
- const enqueue = React28.useCallback((request) => {
10972
+ const [queue, setQueue] = React30.useState([]);
10973
+ const nextId = React30.useRef(0);
10974
+ const enqueue = React30.useCallback((request) => {
10718
10975
  setQueue((previous) => [...previous, request]);
10719
10976
  }, []);
10720
- const value = React28.useMemo(
10977
+ const value = React30.useMemo(
10721
10978
  () => ({
10722
10979
  confirm: (options) => {
10723
10980
  if (isServer) return Promise.resolve(false);
@@ -10735,7 +10992,7 @@ function ConfirmHost({ children }) {
10735
10992
  [enqueue]
10736
10993
  );
10737
10994
  const current = queue[0];
10738
- const settle = React28.useCallback(() => {
10995
+ const settle = React30.useCallback(() => {
10739
10996
  setQueue((previous) => previous.slice(1));
10740
10997
  }, []);
10741
10998
  return /* @__PURE__ */ jsxs(ConfirmHostContext, { value, children: [
@@ -10746,8 +11003,8 @@ function ConfirmHost({ children }) {
10746
11003
  }
10747
11004
  ConfirmHost.displayName = "ConfirmHost";
10748
11005
  function useSettleOnce(resolve) {
10749
- const done = React28.useRef(false);
10750
- return React28.useCallback(
11006
+ const done = React30.useRef(false);
11007
+ return React30.useCallback(
10751
11008
  (value) => {
10752
11009
  if (done.current) return;
10753
11010
  done.current = true;
@@ -10770,7 +11027,7 @@ function HostedConfirm({
10770
11027
  request,
10771
11028
  onSettled
10772
11029
  }) {
10773
- const [open, setOpen] = React28.useState(true);
11030
+ const [open, setOpen] = React30.useState(true);
10774
11031
  const settle = useSettleOnce(request.resolve);
10775
11032
  return /* @__PURE__ */ jsx(
10776
11033
  ConfirmDialog,
@@ -10795,8 +11052,8 @@ function HostedPrompt({
10795
11052
  onSettled
10796
11053
  }) {
10797
11054
  const { options } = request;
10798
- const [open, setOpen] = React28.useState(true);
10799
- const [value, setValue] = React28.useState(options.defaultValue ?? "");
11055
+ const [open, setOpen] = React30.useState(true);
11056
+ const [value, setValue] = React30.useState(options.defaultValue ?? "");
10800
11057
  const settle = useSettleOnce(request.resolve);
10801
11058
  const empty = value.trim() === "";
10802
11059
  const accessibleName = options.label === void 0 && typeof options.title === "string" ? options.title : void 0;
@@ -11298,7 +11555,7 @@ function PeoplePicker(props) {
11298
11555
  ...rest
11299
11556
  } = props;
11300
11557
  const messages = useDsMessages("peoplePicker");
11301
- const byId = React28.useMemo(
11558
+ const byId = React30.useMemo(
11302
11559
  () => new Map(people.map((person) => [person.id, person])),
11303
11560
  [people]
11304
11561
  );
@@ -11375,7 +11632,39 @@ function PeoplePicker(props) {
11375
11632
  }
11376
11633
  );
11377
11634
  }
11635
+ function readStorage(key) {
11636
+ if (!key || typeof window === "undefined") return null;
11637
+ try {
11638
+ const stored = window.localStorage.getItem(key);
11639
+ return stored === "comfortable" || stored === "compact" ? stored : null;
11640
+ } catch {
11641
+ return null;
11642
+ }
11643
+ }
11644
+ function writeStorage(key, next) {
11645
+ if (!key || typeof window === "undefined") return;
11646
+ try {
11647
+ window.localStorage.setItem(key, next);
11648
+ } catch {
11649
+ }
11650
+ }
11651
+ function useTableDensity(options) {
11652
+ const { storageKey, defaultDensity = "comfortable" } = options ?? {};
11653
+ const [density, setDensityState] = useState(defaultDensity);
11654
+ useEffect(() => {
11655
+ const stored = readStorage(storageKey);
11656
+ if (stored && stored !== defaultDensity) setDensityState(stored);
11657
+ }, []);
11658
+ const setDensity = useCallback(
11659
+ (next) => {
11660
+ setDensityState(next);
11661
+ writeStorage(storageKey, next);
11662
+ },
11663
+ [storageKey]
11664
+ );
11665
+ return { density, setDensity };
11666
+ }
11378
11667
 
11379
- 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 };
11668
+ 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 };
11380
11669
  //# sourceMappingURL=index.js.map
11381
11670
  //# sourceMappingURL=index.js.map