@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.
@@ -1,14 +1,14 @@
1
- import { slot, badgeAnatomy, stateAttributes, useDsMessages, deprecate, paginationAnatomy, Select, microInteractions, useFieldsetContext, useFieldControl, useControllableState, useMergedRefs, switchAnatomy, CONTROL_LABEL_TEXT, tableAnatomy, Pressable, FormBridge, CONTROL_SIZE_CLASSES, FileUpload, FileChip, Button, Tooltip, TooltipTrigger, TooltipContent, Avatar, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, dataTableAnatomy, Checkbox, DocumentDetailPanel, DocumentDetailHeader, DocumentDetailTitle, DocumentDetailRequester, DocumentDetailMetaRow, DocumentDetailActions, DropdownMenuItem, DocumentList, DocumentRow, DocumentListSection, Textarea, DropdownMenuCheckboxItem, Popover, PopoverTrigger, PopoverContent, PopoverClose, DropdownMenuShortcut, useId as useId$1 } from './chunk-M2HMZ2RW.js';
2
- import { cn, ShieldIcon, UploadIcon, SendIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpDownIcon, LockIcon, TrashIcon, HelpCircleIcon, ArrowRightIcon, CheckIcon, EyeIcon, FileTextIcon, CloseIcon, SparklesIcon, PlusIcon, SearchIcon, AlertTriangleIcon, FolderClosedIcon, CalendarIcon, PencilIcon, LockOpenIcon, FlagIcon, CheckCircleSolidIcon, DownloadIcon, XCircleSolidIcon, MessageCircleIcon, BellIcon, PaperclipIcon, UsersIcon, ClockIcon, PlayIcon, PauseIcon, StopIcon, SettingsIcon, Trash2Icon, FileIcon, SparkleIcon, MailIcon } from './chunk-AF3QYJ24.js';
1
+ import { slot, badgeAnatomy, stateAttributes, useDsMessages, deprecate, paginationAnatomy, Select, microInteractions, useFieldsetContext, useFieldControl, useControllableState, useMergedRefs, switchAnatomy, CONTROL_LABEL_TEXT, tableAnatomy, Pressable, FormBridge, CONTROL_SIZE_CLASSES, FileUpload, FileChip, Button, Tooltip, TooltipTrigger, TooltipContent, Avatar, Input, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, dataTableAnatomy, Checkbox, DocumentDetailPanel, DocumentDetailHeader, DocumentDetailTitle, DocumentDetailRequester, DocumentDetailMetaRow, DocumentDetailActions, DropdownMenuItem, DocumentList, DocumentRow, DocumentListSection, Textarea, DropdownMenuCheckboxItem, Popover, PopoverTrigger, PopoverContent, PopoverClose, DropdownMenuShortcut, useId as useId$1 } from './chunk-XJKCKBHI.js';
2
+ import { cn, ShieldIcon, UploadIcon, SendIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, ChevronsUpDownIcon, LockIcon, TrashIcon, HelpCircleIcon, ArrowRightIcon, CheckIcon, EyeIcon, FileTextIcon, CloseIcon, SparklesIcon, PlusIcon, SearchIcon, AlertTriangleIcon, FolderClosedIcon, CalendarIcon, PencilIcon, LockOpenIcon, FlagIcon, CheckCircleSolidIcon, DownloadIcon, XCircleSolidIcon, MessageCircleIcon, BellIcon, PaperclipIcon, UsersIcon, ClockIcon, PlayIcon, PauseIcon, StopIcon, SettingsIcon, Trash2Icon, FileIcon, SparkleIcon, MailIcon } from './chunk-TBDTXAFH.js';
3
3
  import { clsx } from 'clsx';
4
- import * as React4 from 'react';
4
+ import * as React2 from 'react';
5
5
  import { forwardRef, useMemo, createContext, useRef, useContext, useState, useCallback, useEffect, useId } from 'react';
6
6
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
7
7
  import { cva } from 'class-variance-authority';
8
8
  import * as ProgressPrimitive from '@radix-ui/react-progress';
9
9
  import * as SwitchPrimitive from '@radix-ui/react-switch';
10
- import * as TabsPrimitive from '@radix-ui/react-tabs';
11
10
  import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
11
+ import * as TabsPrimitive from '@radix-ui/react-tabs';
12
12
 
13
13
  var LEGACY_PAIRS = {
14
14
  default: { variant: "solid", intent: "brand" },
@@ -84,7 +84,7 @@ function badgeVariants({
84
84
  } = {}) {
85
85
  const pair = resolveBadgeAppearance({ variant, intent });
86
86
  return clsx(
87
- "ds:inline-flex ds:items-center ds:gap-1 ds:tabular-nums",
87
+ "ds:inline-flex ds:items-center ds:gap-1 ds:whitespace-nowrap ds:tabular-nums",
88
88
  SHAPE[shape ?? "legacy"],
89
89
  "ds:border ds:font-medium",
90
90
  APPEARANCE[pair.variant][pair.intent],
@@ -116,7 +116,7 @@ var Badge = forwardRef(function Badge2({ variant, intent, size, shape, dot, icon
116
116
  "span",
117
117
  {
118
118
  ...slot(badgeAnatomy, "icon"),
119
- className: "ds:inline-flex ds:size-3.5 ds:shrink-0",
119
+ className: "ds:inline-flex ds:size-3.5 ds:shrink-0 ds:items-center ds:justify-center ds:[&>svg]:max-h-full ds:[&>svg]:max-w-full",
120
120
  "aria-hidden": "true",
121
121
  children: icon
122
122
  }
@@ -172,7 +172,14 @@ var categoryTagVariants = cva(
172
172
  );
173
173
  var CategoryTag = forwardRef(function CategoryTag2({ label, icon, tone, className, ...props }, ref) {
174
174
  return /* @__PURE__ */ jsxs("span", { ref, className: cn(categoryTagVariants({ tone }), className), ...props, children: [
175
- icon && /* @__PURE__ */ jsx("span", { className: "ds:inline-flex ds:size-3.5 ds:shrink-0", "aria-hidden": "true", children: icon }),
175
+ icon && /* @__PURE__ */ jsx(
176
+ "span",
177
+ {
178
+ className: "ds:inline-flex ds:size-3.5 ds:shrink-0 ds:items-center ds:justify-center ds:[&>svg]:max-h-full ds:[&>svg]:max-w-full",
179
+ "aria-hidden": "true",
180
+ children: icon
181
+ }
182
+ ),
176
183
  label
177
184
  ] });
178
185
  });
@@ -250,6 +257,49 @@ var DocumentsWorkspaceLayout = forwardRef(function DocumentsWorkspaceLayout2({ c
250
257
  );
251
258
  });
252
259
  DocumentsWorkspaceLayout.displayName = "DocumentsWorkspaceLayout";
260
+ var SKELETON_SURFACE = cn(
261
+ "skeleton ds:bg-skeleton ds:relative ds:overflow-hidden",
262
+ "ds:after:absolute ds:after:inset-0 ds:after:-translate-x-full",
263
+ "ds:after:bg-[linear-gradient(90deg,transparent,var(--color-skeleton-sheen),transparent)]",
264
+ "ds:motion-safe:after:animate-skeleton-shimmer"
265
+ );
266
+ var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
267
+ return /* @__PURE__ */ jsx(
268
+ "div",
269
+ {
270
+ ref,
271
+ className: cn(SKELETON_SURFACE, "ds:rounded-icon", className),
272
+ "aria-hidden": "true",
273
+ ...props
274
+ }
275
+ );
276
+ });
277
+ Skeleton.displayName = "Skeleton";
278
+ var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
279
+ 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(
280
+ "div",
281
+ {
282
+ className: cn(SKELETON_SURFACE, "ds:rounded-icon ds:h-4", i === lines - 1 && "ds:w-3/4")
283
+ },
284
+ i
285
+ )) });
286
+ });
287
+ SkeletonText.displayName = "SkeletonText";
288
+ var SkeletonCircle = forwardRef(
289
+ function SkeletonCircle2({ size = 40, className, ...props }, ref) {
290
+ return /* @__PURE__ */ jsx(
291
+ "div",
292
+ {
293
+ ref,
294
+ className: cn(SKELETON_SURFACE, "ds:rounded-full", className),
295
+ style: { width: size, height: size },
296
+ "aria-hidden": "true",
297
+ ...props
298
+ }
299
+ );
300
+ }
301
+ );
302
+ SkeletonCircle.displayName = "SkeletonCircle";
253
303
  function getPageNumbers(current, total, siblings) {
254
304
  const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
255
305
  const totalSlots = siblings * 2 + 5;
@@ -271,7 +321,8 @@ function getPageNumbers(current, total, siblings) {
271
321
  var NAV_BUTTON = cn(
272
322
  "ds:inline-flex ds:size-7 ds:items-center ds:justify-center ds:rounded-btn ds:text-fg-3",
273
323
  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
274
- "ds:hover:bg-surface-hover ds:hover:text-fg",
324
+ // Pressed takes the control press wash (Polish 2 §3.7, as ghost buttons do).
325
+ "ds:hover:bg-surface-hover ds:hover:text-fg ds:active:bg-control-active-bg",
275
326
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
276
327
  "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled"
277
328
  );
@@ -338,7 +389,7 @@ var Pagination = forwardRef(function Pagination2({
338
389
  ref,
339
390
  "aria-label": messages.region(currentPage, totalPages),
340
391
  ...slot(paginationAnatomy, "root"),
341
- className: cn("ds:flex ds:items-center ds:justify-between ds:gap-4", className),
392
+ className: cn("ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-x-4 ds:gap-y-2", className),
342
393
  ...props,
343
394
  children: [
344
395
  /* @__PURE__ */ jsx(
@@ -370,7 +421,7 @@ var Pagination = forwardRef(function Pagination2({
370
421
  ]
371
422
  }
372
423
  ),
373
- /* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "ds:flex ds:items-center ds:gap-0.5", children: [
424
+ /* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "ds:flex ds:items-center ds:gap-0.5 ds:max-sm:ml-auto", children: [
374
425
  /* @__PURE__ */ jsx(
375
426
  "button",
376
427
  {
@@ -404,7 +455,7 @@ var Pagination = forwardRef(function Pagination2({
404
455
  ...stateAttributes({ selected: page === currentPage }),
405
456
  className: cn(
406
457
  PAGE_BUTTON_BASE,
407
- page === currentPage ? "ds:bg-accent-tint ds:text-accent-2 ds:border ds:border-[color:var(--color-accent-tint)]" : "ds:text-fg-3 ds:hover:bg-surface-hover ds:hover:text-fg"
458
+ page === currentPage ? "ds:bg-accent-tint ds:text-accent-2 ds:border ds:border-[color:var(--color-accent-tint)]" : "ds:text-fg-3 ds:hover:bg-surface-hover ds:hover:text-fg ds:active:bg-control-active-bg"
408
459
  ),
409
460
  children: page
410
461
  },
@@ -910,7 +961,7 @@ var switchThumbVariants = cva(
910
961
  }
911
962
  }
912
963
  );
913
- var Switch = React4.forwardRef(
964
+ var Switch = React2.forwardRef(
914
965
  function Switch2({
915
966
  label,
916
967
  size,
@@ -944,8 +995,8 @@ var Switch = React4.forwardRef(
944
995
  defaultProp: defaultChecked ?? false,
945
996
  onChange: onCheckedChange
946
997
  });
947
- const initialChecked = React4.useRef(checkedProp ?? defaultChecked ?? false);
948
- const rootRef = React4.useRef(null);
998
+ const initialChecked = React2.useRef(checkedProp ?? defaultChecked ?? false);
999
+ const rootRef = React2.useRef(null);
949
1000
  useFormReset(rootRef, () => setChecked(initialChecked.current), form);
950
1001
  const mergedRef = useMergedRefs(ref, rootRef);
951
1002
  const root = /* @__PURE__ */ jsx(
@@ -1273,138 +1324,14 @@ var TableCaption = forwardRef(
1273
1324
  }
1274
1325
  );
1275
1326
  TableCaption.displayName = "TableCaption";
1276
- var Tabs = React4.forwardRef(
1277
- function Tabs2({ className, ...props }, ref) {
1278
- return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
1279
- }
1280
- );
1281
- Tabs.displayName = TabsPrimitive.Root.displayName;
1282
- var TabsList = React4.forwardRef(function TabsList2({ className, ...props }, ref) {
1283
- return /* @__PURE__ */ jsx(
1284
- TabsPrimitive.List,
1285
- {
1286
- ref,
1287
- className: cn("ds:border-rule ds:flex ds:items-center ds:gap-0 ds:border-b", className),
1288
- ...props
1289
- }
1290
- );
1291
- });
1292
- TabsList.displayName = TabsPrimitive.List.displayName;
1293
- var triggerVariants = cva(
1294
- cn(
1295
- "ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:text-(length:--control-font-size-md) ds:font-medium",
1296
- "ds:text-fg-3",
1297
- microInteractions.selection,
1298
- "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1299
- "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled",
1300
- "ds:hover:text-fg"
1301
- ),
1302
- {
1303
- variants: {
1304
- variant: {
1305
- // §5.16: tab current = 2px accent underline + bold foreground text.
1306
- // The cyan rule carries the brand statement (tabs are interaction,
1307
- // so cyan; Pro purple is reserved for selection state on
1308
- // list/dropdown surfaces). The active LABEL stays in `text-fg` for
1309
- // legibility — accent on text was too low-contrast against the page
1310
- // background, especially in dark mode.
1311
- underline: cn(
1312
- "ds:rounded-none ds:bg-transparent ds:px-3.5 ds:py-2.5",
1313
- "ds:border-b-2 ds:border-transparent ds:-mb-px",
1314
- "ds:data-[state=active]:border-accent ds:data-[state=active]:text-fg ds:data-[state=active]:font-semibold"
1315
- ),
1316
- pill: cn(
1317
- "ds:rounded-pill ds:px-3 ds:py-1.5",
1318
- "ds:data-[state=active]:bg-brand-bg ds:data-[state=active]:text-brand"
1319
- )
1320
- }
1321
- },
1322
- defaultVariants: {
1323
- variant: "underline"
1324
- }
1325
- }
1327
+ var SELECTED_STATE_CLASSES = "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand ds:aria-checked:bg-brand-bg ds:aria-checked:text-brand ds:aria-pressed:bg-brand-bg ds:aria-pressed:text-brand";
1328
+ var SEGMENTED_ITEM_CLASSES = cn(
1329
+ "ds:rounded-control",
1330
+ "ds:not-aria-checked:not-aria-pressed:hover:bg-transparent ds:not-aria-checked:not-aria-pressed:hover:text-fg-2",
1331
+ "ds:data-[state=on]:bg-surface ds:data-[state=on]:text-fg ds:data-[state=on]:shadow-quiet",
1332
+ "ds:aria-checked:bg-surface ds:aria-checked:text-fg ds:aria-checked:shadow-quiet ds:aria-checked:hover:bg-surface ds:aria-checked:hover:text-fg",
1333
+ "ds:aria-pressed:bg-surface ds:aria-pressed:text-fg ds:aria-pressed:shadow-quiet ds:aria-pressed:hover:bg-surface ds:aria-pressed:hover:text-fg"
1326
1334
  );
1327
- var TabsTrigger = React4.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
1328
- return /* @__PURE__ */ jsx(
1329
- TabsPrimitive.Trigger,
1330
- {
1331
- ref,
1332
- className: cn(triggerVariants({ variant }), className),
1333
- ...props
1334
- }
1335
- );
1336
- });
1337
- TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
1338
- var TabsContent = React4.forwardRef(function TabsContent2({ className, ...props }, ref) {
1339
- return /* @__PURE__ */ jsx(
1340
- TabsPrimitive.Content,
1341
- {
1342
- ref,
1343
- className: cn(
1344
- "ds:mt-3 ds:focus-visible:outline-none",
1345
- "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1346
- className
1347
- ),
1348
- ...props
1349
- }
1350
- );
1351
- });
1352
- TabsContent.displayName = TabsPrimitive.Content.displayName;
1353
- var UNASSIGNED_VALUE = "__unassigned__";
1354
- function TeamMemberSelect({
1355
- teamMembers,
1356
- currentUserId,
1357
- value,
1358
- onValueChange,
1359
- includeUnassigned = true,
1360
- placeholder = "Select team member...",
1361
- className,
1362
- size
1363
- }) {
1364
- const options = React4.useMemo(() => {
1365
- const meBadge = /* @__PURE__ */ jsx(
1366
- Badge,
1367
- {
1368
- variant: "secondary",
1369
- size: "sm",
1370
- className: "ds:px-1.5 ds:py-0 ds:font-mono ds:text-[10px] ds:tracking-wider ds:uppercase",
1371
- children: "Me"
1372
- }
1373
- );
1374
- const sorted = [...teamMembers].sort((a, b) => {
1375
- if (currentUserId) {
1376
- if (a.id === currentUserId) return -1;
1377
- if (b.id === currentUserId) return 1;
1378
- }
1379
- return a.fullName.localeCompare(b.fullName);
1380
- });
1381
- const memberOptions = sorted.map((m) => ({
1382
- value: m.id,
1383
- label: m.fullName,
1384
- labelSuffix: m.id === currentUserId ? meBadge : void 0
1385
- }));
1386
- if (includeUnassigned) {
1387
- return [{ value: UNASSIGNED_VALUE, label: "Unassigned" }, ...memberOptions];
1388
- }
1389
- return memberOptions;
1390
- }, [teamMembers, currentUserId, includeUnassigned]);
1391
- const innerValue = value === "" ? UNASSIGNED_VALUE : value;
1392
- const handleChange = (next) => {
1393
- onValueChange(next === UNASSIGNED_VALUE ? "" : next);
1394
- };
1395
- return /* @__PURE__ */ jsx(
1396
- Select,
1397
- {
1398
- options,
1399
- value: innerValue,
1400
- onValueChange: handleChange,
1401
- placeholder,
1402
- className,
1403
- size
1404
- }
1405
- );
1406
- }
1407
- TeamMemberSelect.displayName = "TeamMemberSelect";
1408
1335
  var itemVariants = cva(
1409
1336
  cn(
1410
1337
  "ds:inline-flex ds:items-center ds:justify-center ds:rounded-pill ds:px-3 ds:py-1.5 ds:text-(length:--control-font-size-md) ds:font-medium",
@@ -1413,13 +1340,14 @@ var itemVariants = cva(
1413
1340
  "ds:hover:bg-surface-hover ds:hover:text-fg",
1414
1341
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1415
1342
  "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
1416
- "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand"
1343
+ SELECTED_STATE_CLASSES
1417
1344
  ),
1418
1345
  {
1419
1346
  variants: {
1420
1347
  variant: {
1421
1348
  default: "",
1422
- outline: "ds:border ds:border-rule-strong ds:bg-surface"
1349
+ outline: "ds:border ds:border-rule-strong ds:bg-surface",
1350
+ segmented: SEGMENTED_ITEM_CLASSES
1423
1351
  }
1424
1352
  },
1425
1353
  defaultVariants: {
@@ -1435,13 +1363,14 @@ var sizedItemVariants = cva(
1435
1363
  "ds:hover:bg-surface-hover ds:hover:text-fg",
1436
1364
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1437
1365
  "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
1438
- "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand"
1366
+ SELECTED_STATE_CLASSES
1439
1367
  ),
1440
1368
  {
1441
1369
  variants: {
1442
1370
  variant: {
1443
1371
  default: "",
1444
- outline: "ds:border ds:border-rule-strong ds:bg-surface"
1372
+ outline: "ds:border ds:border-rule-strong ds:bg-surface",
1373
+ segmented: SEGMENTED_ITEM_CLASSES
1445
1374
  }
1446
1375
  },
1447
1376
  defaultVariants: {
@@ -1449,11 +1378,11 @@ var sizedItemVariants = cva(
1449
1378
  }
1450
1379
  }
1451
1380
  );
1452
- var ToggleGroupContext = React4.createContext({
1381
+ var ToggleGroupContext = React2.createContext({
1453
1382
  variant: "default",
1454
1383
  size: void 0
1455
1384
  });
1456
- var ToggleGroup = React4.forwardRef(function ToggleGroup2({
1385
+ var ToggleGroup = React2.forwardRef(function ToggleGroup2({
1457
1386
  className,
1458
1387
  variant,
1459
1388
  size,
@@ -1495,11 +1424,11 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
1495
1424
  defaultProp: defaultValue ?? emptyValue,
1496
1425
  onChange: onValueChange
1497
1426
  });
1498
- const initialValue = React4.useRef(valueProp ?? defaultValue ?? emptyValue);
1499
- const rootRef = React4.useRef(null);
1427
+ const initialValue = React2.useRef(valueProp ?? defaultValue ?? emptyValue);
1428
+ const rootRef = React2.useRef(null);
1500
1429
  const mergedRef = useMergedRefs(ref, rootRef);
1501
1430
  const labelledBy = wiring["aria-labelledby"] ?? (fieldset?.legendMounted ? fieldset.legendId : void 0);
1502
- const context = React4.useMemo(() => ({ variant, size }), [variant, size]);
1431
+ const context = React2.useMemo(() => ({ variant, size }), [variant, size]);
1503
1432
  const radixProps = {
1504
1433
  ...props,
1505
1434
  type,
@@ -1518,7 +1447,14 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
1518
1447
  "aria-invalid": ariaInvalid ?? wiring["aria-invalid"],
1519
1448
  "data-invalid": wiring["data-invalid"],
1520
1449
  ...size ? stateAttributes({ size }) : void 0,
1521
- className: cn("ds:inline-flex ds:items-center ds:gap-1", className),
1450
+ className: cn(
1451
+ "ds:inline-flex ds:items-center ds:gap-1",
1452
+ // The `segmented` track: quiet surface-sunken well, hairline
1453
+ // rule-soft border, control radius, 2px inset padding for the
1454
+ // thumb to sit inside. Matches `TabsList`'s own `segmented` track.
1455
+ variant === "segmented" && "ds:bg-surface-2 ds:rounded-control ds:border-rule-soft ds:gap-0.5 ds:border ds:p-0.5",
1456
+ className
1457
+ ),
1522
1458
  ...radixProps,
1523
1459
  children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children })
1524
1460
  }
@@ -1539,8 +1475,8 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
1539
1475
  ] });
1540
1476
  });
1541
1477
  ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
1542
- var ToggleGroupItem = React4.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
1543
- const ctx = React4.useContext(ToggleGroupContext);
1478
+ var ToggleGroupItem = React2.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
1479
+ const ctx = React2.useContext(ToggleGroupContext);
1544
1480
  const resolvedVariant = variant ?? ctx.variant;
1545
1481
  return /* @__PURE__ */ jsx(
1546
1482
  ToggleGroupPrimitive.Item,
@@ -1555,6 +1491,162 @@ var ToggleGroupItem = React4.forwardRef(function ToggleGroupItem2({ className, v
1555
1491
  );
1556
1492
  });
1557
1493
  ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
1494
+ var Tabs = React2.forwardRef(
1495
+ function Tabs2({ className, ...props }, ref) {
1496
+ return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
1497
+ }
1498
+ );
1499
+ Tabs.displayName = TabsPrimitive.Root.displayName;
1500
+ var TabsList = React2.forwardRef(function TabsList2({ className, variant = "default", ...props }, ref) {
1501
+ return /* @__PURE__ */ jsx(
1502
+ TabsPrimitive.List,
1503
+ {
1504
+ ref,
1505
+ className: cn(
1506
+ "ds:flex ds:items-center",
1507
+ variant === "segmented" ? (
1508
+ // A track, not a row: hugs its segments (inline-flex + w-fit)
1509
+ // instead of stretching to the parent's width like the flush
1510
+ // underline row does. A consumer's own width class (passed via
1511
+ // `className`, after this in the merge) still wins.
1512
+ "ds:inline-flex ds:w-fit ds:rounded-control ds:border-rule-soft ds:bg-surface-2 ds:gap-0.5 ds:border ds:p-0.5"
1513
+ ) : "ds:border-rule ds:gap-0 ds:border-b",
1514
+ className
1515
+ ),
1516
+ ...props
1517
+ }
1518
+ );
1519
+ });
1520
+ TabsList.displayName = TabsPrimitive.List.displayName;
1521
+ var triggerVariants = cva(
1522
+ cn(
1523
+ "ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:text-(length:--control-font-size-md) ds:font-medium",
1524
+ "ds:text-fg-3",
1525
+ microInteractions.selection,
1526
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1527
+ "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled",
1528
+ "ds:hover:text-fg"
1529
+ ),
1530
+ {
1531
+ variants: {
1532
+ variant: {
1533
+ // §5.16: tab current = 2px accent underline + bold foreground text.
1534
+ // The cyan rule carries the brand statement (tabs are interaction,
1535
+ // so cyan; Pro purple is reserved for selection state on
1536
+ // list/dropdown surfaces). The active LABEL stays in `text-fg` for
1537
+ // legibility — accent on text was too low-contrast against the page
1538
+ // background, especially in dark mode.
1539
+ underline: cn(
1540
+ "ds:rounded-none ds:bg-transparent ds:px-3.5 ds:py-2.5",
1541
+ "ds:border-b-2 ds:border-transparent ds:-mb-px",
1542
+ "ds:data-[state=active]:border-accent ds:data-[state=active]:text-fg ds:data-[state=active]:font-semibold",
1543
+ "ds:aria-selected:border-accent ds:aria-selected:text-fg ds:aria-selected:font-semibold"
1544
+ ),
1545
+ pill: cn(
1546
+ "ds:rounded-pill ds:px-3 ds:py-1.5",
1547
+ "ds:data-[state=active]:bg-brand-bg ds:data-[state=active]:text-brand",
1548
+ "ds:aria-selected:bg-brand-bg ds:aria-selected:text-brand"
1549
+ ),
1550
+ // The `TabsList variant="segmented"` track's thumb: a raised
1551
+ // `surface` tile (quiet shadow, full-ink `fg`) over quiet fg-3
1552
+ // labels that lift to fg-2 on hover. The hover rule is scoped to
1553
+ // `not-aria-selected` so it never competes by stylesheet order with
1554
+ // the thumb's own (higher-specificity, compound) hover rule below.
1555
+ segmented: cn(
1556
+ "ds:rounded-control ds:px-3 ds:py-1.5",
1557
+ "ds:not-aria-selected:hover:text-fg-2",
1558
+ "ds:data-[state=active]:bg-surface ds:data-[state=active]:text-fg ds:data-[state=active]:shadow-quiet ds:data-[state=active]:font-semibold",
1559
+ "ds:aria-selected:bg-surface ds:aria-selected:text-fg ds:aria-selected:shadow-quiet ds:aria-selected:font-semibold",
1560
+ "ds:aria-selected:hover:bg-surface ds:aria-selected:hover:text-fg"
1561
+ )
1562
+ }
1563
+ },
1564
+ defaultVariants: {
1565
+ variant: "underline"
1566
+ }
1567
+ }
1568
+ );
1569
+ var TabsTrigger = React2.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
1570
+ return /* @__PURE__ */ jsx(
1571
+ TabsPrimitive.Trigger,
1572
+ {
1573
+ ref,
1574
+ className: cn(triggerVariants({ variant }), className),
1575
+ ...props
1576
+ }
1577
+ );
1578
+ });
1579
+ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
1580
+ var TabsContent = React2.forwardRef(function TabsContent2({ className, ...props }, ref) {
1581
+ return /* @__PURE__ */ jsx(
1582
+ TabsPrimitive.Content,
1583
+ {
1584
+ ref,
1585
+ className: cn(
1586
+ "ds:mt-3 ds:focus-visible:outline-none",
1587
+ "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1588
+ className
1589
+ ),
1590
+ ...props
1591
+ }
1592
+ );
1593
+ });
1594
+ TabsContent.displayName = TabsPrimitive.Content.displayName;
1595
+ var UNASSIGNED_VALUE = "__unassigned__";
1596
+ function TeamMemberSelect({
1597
+ teamMembers,
1598
+ currentUserId,
1599
+ value,
1600
+ onValueChange,
1601
+ includeUnassigned = true,
1602
+ placeholder = "Select team member...",
1603
+ className,
1604
+ size
1605
+ }) {
1606
+ const options = React2.useMemo(() => {
1607
+ const meBadge = /* @__PURE__ */ jsx(
1608
+ Badge,
1609
+ {
1610
+ variant: "secondary",
1611
+ size: "sm",
1612
+ className: "ds:px-1.5 ds:py-0 ds:font-mono ds:text-[10px] ds:tracking-wider ds:uppercase",
1613
+ children: "Me"
1614
+ }
1615
+ );
1616
+ const sorted = [...teamMembers].sort((a, b) => {
1617
+ if (currentUserId) {
1618
+ if (a.id === currentUserId) return -1;
1619
+ if (b.id === currentUserId) return 1;
1620
+ }
1621
+ return a.fullName.localeCompare(b.fullName);
1622
+ });
1623
+ const memberOptions = sorted.map((m) => ({
1624
+ value: m.id,
1625
+ label: m.fullName,
1626
+ labelSuffix: m.id === currentUserId ? meBadge : void 0
1627
+ }));
1628
+ if (includeUnassigned) {
1629
+ return [{ value: UNASSIGNED_VALUE, label: "Unassigned" }, ...memberOptions];
1630
+ }
1631
+ return memberOptions;
1632
+ }, [teamMembers, currentUserId, includeUnassigned]);
1633
+ const innerValue = value === "" ? UNASSIGNED_VALUE : value;
1634
+ const handleChange = (next) => {
1635
+ onValueChange(next === UNASSIGNED_VALUE ? "" : next);
1636
+ };
1637
+ return /* @__PURE__ */ jsx(
1638
+ Select,
1639
+ {
1640
+ options,
1641
+ value: innerValue,
1642
+ onValueChange: handleChange,
1643
+ placeholder,
1644
+ className,
1645
+ size
1646
+ }
1647
+ );
1648
+ }
1649
+ TeamMemberSelect.displayName = "TeamMemberSelect";
1558
1650
  var TONE_DOT = {
1559
1651
  brand: "ds:bg-brand",
1560
1652
  info: "ds:bg-accent-2",
@@ -1582,7 +1674,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
1582
1674
  "aria-selected": active,
1583
1675
  onClick: () => onChange(tab.value),
1584
1676
  className: cn(
1585
- "ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:border ds:px-3 ds:py-1.5 ds:text-sm ds:font-medium ds:transition-colors ds:motion-reduce:transition-none",
1677
+ "ds:flex ds:items-center ds:gap-2 ds:rounded-md ds:border ds:px-3 ds:py-1.5 ds:text-sm ds:font-medium ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
1586
1678
  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
1587
1679
  active ? "ds:border-brand ds:bg-brand/5 ds:text-brand" : "ds:border-transparent ds:text-fg-3 ds:hover:text-fg"
1588
1680
  ),
@@ -2522,7 +2614,7 @@ var DashGrid = forwardRef(function DashGrid2({ widgets, storageKey, onReorder, c
2522
2614
  setDragId(null);
2523
2615
  setOverId(null);
2524
2616
  },
2525
- className: "ds:absolute ds:top-3 ds:right-3 ds:z-[var(--z-base)] ds:flex ds:cursor-grab ds:touch-none ds:items-center ds:justify-center ds:rounded-[var(--radius-icon)] ds:p-1 ds:text-fg-4 ds:opacity-0 ds:transition-opacity ds:duration-[var(--duration-fast)] ds:hover:bg-surface-hover ds:hover:text-fg-2 ds:focus-visible:opacity-100 ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:active:cursor-grabbing ds:group-hover/dash:opacity-100 ds:motion-reduce:transition-none",
2617
+ className: "ds:absolute ds:top-3 ds:right-3 ds:z-[var(--z-base)] ds:flex ds:cursor-grab ds:touch-none ds:items-center ds:justify-center ds:rounded-[var(--radius-icon)] ds:p-1 ds:text-fg-4 ds:opacity-0 ds:transition-[opacity,background-color,color] ds:duration-[var(--duration-fast)] ds:ease-[var(--motion-ease-enter)] ds:hover:bg-surface-hover ds:hover:text-fg-2 ds:focus-visible:opacity-100 ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:active:cursor-grabbing ds:group-hover/dash:opacity-100 ds:motion-reduce:transition-none",
2526
2618
  children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ds:grid ds:grid-cols-2 ds:gap-[3px]", children: Array.from({ length: 6 }, (_, i) => /* @__PURE__ */ jsx("span", { className: "ds:size-[3px] ds:rounded-full ds:bg-current" }, i)) })
2527
2619
  }
2528
2620
  ),
@@ -2724,13 +2816,17 @@ var ClientRailItem = forwardRef(
2724
2816
  // Layout
2725
2817
  "ds:relative ds:flex ds:w-full ds:items-center ds:gap-[11px] ds:border-b ds:border-rule ds:px-[14px] ds:py-[11px] ds:text-left",
2726
2818
  // Motion
2727
- "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
2819
+ "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
2728
2820
  // Cursor
2729
2821
  "ds:cursor-pointer",
2822
+ // Focus — an inset outline: rows stack edge to edge in the rail, so an
2823
+ // outer ring would be clipped by the neighbours (same as TableRow).
2824
+ "ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
2730
2825
  // State — hover only when not active to avoid override
2731
2826
  active ? "ds:bg-brand-bg" : "ds:hover:bg-surface-2",
2732
2827
  className
2733
2828
  ),
2829
+ "aria-current": active ? "true" : void 0,
2734
2830
  ...props,
2735
2831
  children: [
2736
2832
  active && /* @__PURE__ */ jsx(
@@ -2818,7 +2914,7 @@ function MetaText({
2818
2914
  if (presentValues.length === 0) {
2819
2915
  return null;
2820
2916
  }
2821
- return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
2917
+ return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
2822
2918
  index > 0 && /* @__PURE__ */ jsx(
2823
2919
  "span",
2824
2920
  {
@@ -2858,7 +2954,7 @@ function CheckboxSlot({
2858
2954
  {
2859
2955
  className: cn(
2860
2956
  "ds:shrink-0 ds:transition-opacity ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
2861
- selected ? "ds:opacity-100" : "ds:opacity-0 ds:group-hover:opacity-100",
2957
+ selected ? "ds:opacity-100" : "ds:opacity-0 ds:group-hover:opacity-100 ds:focus-within:opacity-100",
2862
2958
  className
2863
2959
  ),
2864
2960
  onClick: (event) => event.stopPropagation(),
@@ -2886,7 +2982,14 @@ function MoreActions({ menu }) {
2886
2982
  className: cn(
2887
2983
  "ds:grid ds:size-[30px] ds:place-items-center ds:rounded-[8px] ds:text-fg-4",
2888
2984
  "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
2889
- "ds:group-hover:text-fg-2 ds:hover:bg-surface ds:hover:text-brand ds:hover:shadow-flat"
2985
+ "ds:group-hover:text-fg-2 ds:hover:bg-surface ds:hover:text-brand ds:hover:shadow-flat",
2986
+ // `aria-expanded` twin of the `data-state` selector below: a
2987
+ // TooltipTrigger asChild ancestor can clobber this button's own
2988
+ // `data-state` with the tooltip's (see toggle-group.tsx's note
2989
+ // on the same bug), but never sets `aria-expanded`.
2990
+ "ds:data-[state=open]:bg-surface ds:data-[state=open]:text-brand ds:data-[state=open]:shadow-flat",
2991
+ "ds:aria-expanded:bg-surface ds:aria-expanded:text-brand ds:aria-expanded:shadow-flat",
2992
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
2890
2993
  ),
2891
2994
  "aria-label": "More actions",
2892
2995
  onClick: (event) => event.stopPropagation(),
@@ -2896,7 +2999,7 @@ function MoreActions({ menu }) {
2896
2999
  /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", onClick: (event) => event.stopPropagation(), children: menu })
2897
3000
  ] });
2898
3001
  }
2899
- var DocumentFileRow = React4.forwardRef(
3002
+ var DocumentFileRow = React2.forwardRef(
2900
3003
  function DocumentFileRow2({
2901
3004
  name,
2902
3005
  fileType,
@@ -2963,7 +3066,7 @@ var DocumentFileRow = React4.forwardRef(
2963
3066
  }
2964
3067
  );
2965
3068
  DocumentFileRow.displayName = "DocumentFileRow";
2966
- var DocumentFileCard = React4.forwardRef(
3069
+ var DocumentFileCard = React2.forwardRef(
2967
3070
  function DocumentFileCard2({
2968
3071
  name,
2969
3072
  fileType,
@@ -3039,7 +3142,7 @@ var lineCaptionToneClass = {
3039
3142
  warning: "ds:text-warning-fg",
3040
3143
  danger: "ds:text-danger-fg"
3041
3144
  };
3042
- var DocumentFileLine = React4.forwardRef(
3145
+ var DocumentFileLine = React2.forwardRef(
3043
3146
  function DocumentFileLine2({
3044
3147
  name,
3045
3148
  fileType = "",
@@ -3167,7 +3270,7 @@ function ChecklistItemRow({ item }) {
3167
3270
  "div",
3168
3271
  {
3169
3272
  className: cn(
3170
- "ds:rounded-xl ds:border ds:px-3.5 ds:py-2.5 ds:shadow-quiet ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
3273
+ "ds:rounded-xl ds:border ds:px-3.5 ds:py-2.5 ds:shadow-quiet ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
3171
3274
  done ? "ds:border-success-line/70 ds:bg-success-bg/30" : item.status === "in-review" ? "ds:border-warning-line/70 ds:bg-warning-bg/25" : "ds:border-rule ds:bg-surface"
3172
3275
  ),
3173
3276
  children: [
@@ -3213,7 +3316,7 @@ function FileGroup({ files }) {
3213
3316
  file.id
3214
3317
  )) });
3215
3318
  }
3216
- var DocumentChecklist = React4.forwardRef(
3319
+ var DocumentChecklist = React2.forwardRef(
3217
3320
  function DocumentChecklist2({
3218
3321
  items,
3219
3322
  title = "Your documents",
@@ -3319,7 +3422,7 @@ var DocumentRequestField = forwardRef(
3319
3422
  className: cn(
3320
3423
  "ds:ml-auto ds:size-[26px] ds:rounded-[7px] ds:grid ds:place-items-center",
3321
3424
  "ds:text-fg-4",
3322
- "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
3425
+ "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
3323
3426
  "ds:hover:bg-danger-bg ds:hover:text-danger-fg",
3324
3427
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
3325
3428
  ),
@@ -3500,7 +3603,7 @@ var DataTableToolbar = forwardRef(
3500
3603
  ref,
3501
3604
  ...slot(dataTableAnatomy, "toolbar"),
3502
3605
  className: cn(
3503
- "ds:flex ds:items-center ds:gap-2 ds:px-3 ds:py-2.5",
3606
+ "ds:flex ds:flex-wrap ds:items-center ds:gap-2 ds:px-3 ds:py-2.5",
3504
3607
  "ds:border-rule ds:bg-surface ds:border-b",
3505
3608
  className
3506
3609
  ),
@@ -4021,7 +4124,7 @@ function StagePill({
4021
4124
  "span",
4022
4125
  {
4023
4126
  className: cn(
4024
- "ds:inline-flex ds:items-center ds:gap-1.5 ds:rounded-pill ds:px-2 ds:py-0.5 ds:text-xs ds:font-medium",
4127
+ "ds:inline-flex ds:items-center ds:gap-1.5 ds:whitespace-nowrap ds:rounded-pill ds:px-2 ds:py-0.5 ds:text-xs ds:font-medium",
4025
4128
  toneClass[tone]
4026
4129
  ),
4027
4130
  children: [
@@ -4563,7 +4666,7 @@ function AssigneePicker({
4563
4666
  {
4564
4667
  type: "button",
4565
4668
  "aria-label": "Edit assignees",
4566
- className: "ds:rounded-pill ds:border-rule ds:hover:bg-overlay-hover ds:inline-flex ds:items-center ds:gap-2 ds:border ds:py-1 ds:pr-2.5 ds:pl-1.5 ds:transition-colors ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
4669
+ className: "ds:rounded-pill ds:border-rule ds:hover:bg-overlay-hover ds:active:bg-overlay-active ds:inline-flex ds:items-center ds:gap-2 ds:border ds:py-1 ds:pr-2.5 ds:pl-1.5 ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
4567
4670
  children: [
4568
4671
  stack,
4569
4672
  /* @__PURE__ */ jsx("span", { className: "ds:text-fg-2 ds:text-sm ds:font-semibold ds:tabular-nums tabular-nums", children: selected.length }),
@@ -4878,7 +4981,7 @@ var TimeLoggerContextRow = forwardRef(
4878
4981
  {
4879
4982
  type: "button",
4880
4983
  onClick: onClientSelect,
4881
- className: "ds:rounded-btn ds:hover:bg-surface-2 ds:focus-visible:bg-surface-2 ds:-m-1 ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-2.5 ds:p-1 ds:text-left ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none",
4984
+ className: "ds:rounded-btn ds:hover:bg-surface-2 ds:focus-visible:bg-surface-2 ds:active:bg-control-active-bg ds:-m-1 ds:flex ds:min-w-0 ds:flex-1 ds:items-center ds:gap-2.5 ds:p-1 ds:text-left ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none",
4882
4985
  children: [
4883
4986
  avatar,
4884
4987
  text
@@ -5085,7 +5188,7 @@ var TimeLoggerBillable = forwardRef(
5085
5188
  {
5086
5189
  type: "button",
5087
5190
  "aria-label": "Billing settings",
5088
- className: "ds:text-fg-4 ds:hover:text-fg-2 ds:hover:bg-surface-hover ds:rounded-btn ds:flex ds:size-6 ds:items-center ds:justify-center ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none ds:[&_svg]:size-4",
5191
+ className: "ds:text-fg-4 ds:hover:text-fg-2 ds:hover:bg-surface-hover ds:active:bg-control-active-bg ds:rounded-btn ds:flex ds:size-6 ds:items-center ds:justify-center ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:motion-reduce:transition-none ds:[&_svg]:size-4",
5089
5192
  children: /* @__PURE__ */ jsx(SettingsIcon, {})
5090
5193
  }
5091
5194
  ) }),
@@ -5452,10 +5555,10 @@ function EmailMessageCard({
5452
5555
  type: "button",
5453
5556
  onClick: () => setExpanded((v) => !v),
5454
5557
  "aria-expanded": expanded,
5455
- className: "ds:flex ds:w-full ds:items-center ds:justify-center ds:gap-1.5 ds:border-t ds:border-rule/60 ds:bg-surface ds:py-1.5 ds:text-xs ds:font-medium ds:text-brand ds:transition-colors ds:hover:bg-surface-hover/40 ds:motion-reduce:transition-none",
5558
+ className: "ds:flex ds:w-full ds:items-center ds:justify-center ds:gap-1.5 ds:border-t ds:border-rule/60 ds:bg-surface ds:py-1.5 ds:text-xs ds:font-medium ds:text-brand ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:hover:bg-surface-hover/40 ds:motion-reduce:transition-none",
5456
5559
  children: [
5457
5560
  expanded ? "Show less" : "Show full email",
5458
- /* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("ds:transition-transform ds:motion-reduce:transition-none", expanded && "ds:rotate-180") })
5561
+ /* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none", expanded && "ds:rotate-180") })
5459
5562
  ]
5460
5563
  }
5461
5564
  ),
@@ -5506,7 +5609,7 @@ function SignatureEditor({
5506
5609
  }
5507
5610
  )
5508
5611
  ] }),
5509
- /* @__PURE__ */ jsx("div", { className: "ds:p-3", children: loading ? /* @__PURE__ */ jsx("div", { className: "ds:h-32 ds:animate-pulse ds:rounded-md ds:bg-bg-2 ds:motion-reduce:animate-none" }) : children }),
5612
+ /* @__PURE__ */ jsx("div", { className: "ds:p-3", children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "ds:h-32 ds:rounded-md" }) : children }),
5510
5613
  (onSave || onInsert) && /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:justify-end ds:gap-2 ds:border-t ds:border-rule ds:px-3 ds:py-2", children: [
5511
5614
  onSave && /* @__PURE__ */ jsx(
5512
5615
  Button,
@@ -5526,6 +5629,6 @@ function SignatureEditor({
5526
5629
  }
5527
5630
  SignatureEditor.displayName = "SignatureEditor";
5528
5631
 
5529
- export { AIReceiptPanel, AiDraftCard, Assignee, AttentionItem, Badge, Blockquote, BottomNav, CategoryDivider, CategoryTag, ChannelTabs, ClientRailGroupHeader, ClientRailItem, Dash, DashGrid, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DocumentChecklist, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, EmailMessageCard, EmptyValue, EngagementCard, EngagementTimeline, EngagementTimelineStep, IntentBadge, MissingDocumentsPanel, MoneyCell, NewMenu, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, Section, SectionHead, SectionHeader, SegmentedProgress, SignatureEditor, StagePill, Stat, StatusDot, StatusPill, SuggestionPills, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagsCell, TeamMemberSelect, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, formatClock, formatCurrency, formatDuration, nextSortDirection, parseDuration, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable, useFormReset, useStopwatch };
5530
- //# sourceMappingURL=chunk-YMRSFVW7.js.map
5531
- //# sourceMappingURL=chunk-YMRSFVW7.js.map
5632
+ export { AIReceiptPanel, AiDraftCard, Assignee, AttentionItem, Badge, Blockquote, BottomNav, CategoryDivider, CategoryTag, ChannelTabs, ClientRailGroupHeader, ClientRailItem, Dash, DashGrid, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DocumentChecklist, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, EmailMessageCard, EmptyValue, EngagementCard, EngagementTimeline, EngagementTimelineStep, IntentBadge, MissingDocumentsPanel, MoneyCell, NewMenu, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, Section, SectionHead, SectionHeader, SegmentedProgress, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, StagePill, Stat, StatusDot, StatusPill, SuggestionPills, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagsCell, TeamMemberSelect, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, formatClock, formatCurrency, formatDuration, nextSortDirection, parseDuration, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable, useFormReset, useStopwatch };
5633
+ //# sourceMappingURL=chunk-LUWPEBXZ.js.map
5634
+ //# sourceMappingURL=chunk-LUWPEBXZ.js.map