@assure-one/design-system 1.42.0 → 1.43.1

package/dist/{chunk-YMRSFVW7.js → chunk-5AL4W32Z.js}

@@ -1,14 +1,14 @@
-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';
-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';
+import { slot, badgeAnatomy, stateAttributes, useDsMessages, deprecate, paginationAnatomy, Select, microInteractions, useFieldsetContext, useFieldControl, useControllableState, useFormReset2, 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-VK6SW34V.js';
+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';
 import { clsx } from 'clsx';
-import * as React4 from 'react';
+import * as React2 from 'react';
 import { forwardRef, useMemo, createContext, useRef, useContext, useState, useCallback, useEffect, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 var LEGACY_PAIRS = {
   default: { variant: "solid", intent: "brand" },
@@ -84,7 +84,7 @@ function badgeVariants({
 } = {}) {
   const pair = resolveBadgeAppearance({ variant, intent });
   return clsx(
-    "ds:inline-flex ds:items-center ds:gap-1 ds:tabular-nums",
+    "ds:inline-flex ds:items-center ds:gap-1 ds:whitespace-nowrap ds:tabular-nums",
     SHAPE[shape ?? "legacy"],
     "ds:border ds:font-medium",
     APPEARANCE[pair.variant][pair.intent],
@@ -116,7 +116,7 @@ var Badge = forwardRef(function Badge2({ variant, intent, size, shape, dot, icon
           "span",
           {
             ...slot(badgeAnatomy, "icon"),
-            className: "ds:inline-flex ds:size-3.5 ds:shrink-0",
+            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",
             "aria-hidden": "true",
             children: icon
           }
@@ -172,7 +172,14 @@ var categoryTagVariants = cva(
 );
 var CategoryTag = forwardRef(function CategoryTag2({ label, icon, tone, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs("span", { ref, className: cn(categoryTagVariants({ tone }), className), ...props, children: [
-    icon && /* @__PURE__ */ jsx("span", { className: "ds:inline-flex ds:size-3.5 ds:shrink-0", "aria-hidden": "true", children: icon }),
+    icon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        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",
+        "aria-hidden": "true",
+        children: icon
+      }
+    ),
     label
   ] });
 });
@@ -250,6 +257,49 @@ var DocumentsWorkspaceLayout = forwardRef(function DocumentsWorkspaceLayout2({ c
   );
 });
 DocumentsWorkspaceLayout.displayName = "DocumentsWorkspaceLayout";
+var SKELETON_SURFACE = cn(
+  "skeleton ds:bg-skeleton ds:relative ds:overflow-hidden",
+  "ds:after:absolute ds:after:inset-0 ds:after:-translate-x-full",
+  "ds:after:bg-[linear-gradient(90deg,transparent,var(--color-skeleton-sheen),transparent)]",
+  "ds:motion-safe:after:animate-skeleton-shimmer"
+);
+var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(SKELETON_SURFACE, "ds:rounded-icon", className),
+      "aria-hidden": "true",
+      ...props
+    }
+  );
+});
+Skeleton.displayName = "Skeleton";
+var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("ds:space-y-2", className), "aria-hidden": "true", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(SKELETON_SURFACE, "ds:rounded-icon ds:h-4", i === lines - 1 && "ds:w-3/4")
+    },
+    i
+  )) });
+});
+SkeletonText.displayName = "SkeletonText";
+var SkeletonCircle = forwardRef(
+  function SkeletonCircle2({ size = 40, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(SKELETON_SURFACE, "ds:rounded-full", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true",
+        ...props
+      }
+    );
+  }
+);
+SkeletonCircle.displayName = "SkeletonCircle";
 function getPageNumbers(current, total, siblings) {
   const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
   const totalSlots = siblings * 2 + 5;
@@ -271,7 +321,8 @@ function getPageNumbers(current, total, siblings) {
 var NAV_BUTTON = cn(
   "ds:inline-flex ds:size-7 ds:items-center ds:justify-center ds:rounded-btn ds:text-fg-3",
   "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-  "ds:hover:bg-surface-hover ds:hover:text-fg",
+  // Pressed takes the control press wash (Polish 2 §3.7, as ghost buttons do).
+  "ds:hover:bg-surface-hover ds:hover:text-fg ds:active:bg-control-active-bg",
   "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
   "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled"
 );
@@ -338,7 +389,7 @@ var Pagination = forwardRef(function Pagination2({
       ref,
       "aria-label": messages.region(currentPage, totalPages),
       ...slot(paginationAnatomy, "root"),
-      className: cn("ds:flex ds:items-center ds:justify-between ds:gap-4", className),
+      className: cn("ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-x-4 ds:gap-y-2", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(
@@ -370,7 +421,7 @@ var Pagination = forwardRef(function Pagination2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "ds:flex ds:items-center ds:gap-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "ds:flex ds:items-center ds:gap-0.5 ds:max-sm:ml-auto", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -404,7 +455,7 @@ var Pagination = forwardRef(function Pagination2({
                 ...stateAttributes({ selected: page === currentPage }),
                 className: cn(
                   PAGE_BUTTON_BASE,
-                  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"
+                  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"
                 ),
                 children: page
               },
@@ -855,19 +906,6 @@ var StatusPill = forwardRef(function StatusPill2({ status, dot = true, children,
   return /* @__PURE__ */ jsx(Badge, { ref, variant, dot, ...props, children: children ?? label });
 });
 StatusPill.displayName = "StatusPill";
-function useFormReset(elementRef, onReset, form) {
-  const latest = useRef(onReset);
-  latest.current = onReset;
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element) return;
-    const owner = form ? element.ownerDocument.getElementById(form) : element.closest("form");
-    if (!owner) return;
-    const handle = () => latest.current?.();
-    owner.addEventListener("reset", handle);
-    return () => owner.removeEventListener("reset", handle);
-  }, [elementRef, form]);
-}
 var switchVariants = cva(
   [
     "ds:peer ds:inline-flex ds:shrink-0 ds:cursor-pointer ds:items-center ds:rounded-full ds:border ds:border-transparent",
@@ -910,7 +948,7 @@ var switchThumbVariants = cva(
     }
   }
 );
-var Switch = React4.forwardRef(
+var Switch = React2.forwardRef(
   function Switch2({
     label,
     size,
@@ -944,9 +982,9 @@ var Switch = React4.forwardRef(
       defaultProp: defaultChecked ?? false,
       onChange: onCheckedChange
     });
-    const initialChecked = React4.useRef(checkedProp ?? defaultChecked ?? false);
-    const rootRef = React4.useRef(null);
-    useFormReset(rootRef, () => setChecked(initialChecked.current), form);
+    const initialChecked = React2.useRef(checkedProp ?? defaultChecked ?? false);
+    const rootRef = React2.useRef(null);
+    useFormReset2(rootRef, () => setChecked(initialChecked.current), form);
     const mergedRef = useMergedRefs(ref, rootRef);
     const root = /* @__PURE__ */ jsx(
       SwitchPrimitive.Root,
@@ -1273,138 +1311,14 @@ var TableCaption = forwardRef(
   }
 );
 TableCaption.displayName = "TableCaption";
-var Tabs = React4.forwardRef(
-  function Tabs2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
-  }
+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";
+var SEGMENTED_ITEM_CLASSES = cn(
+  "ds:rounded-control",
+  "ds:not-aria-checked:not-aria-pressed:hover:bg-transparent ds:not-aria-checked:not-aria-pressed:hover:text-fg-2",
+  "ds:data-[state=on]:bg-surface ds:data-[state=on]:text-fg ds:data-[state=on]:shadow-quiet",
+  "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",
+  "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"
 );
-Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React4.forwardRef(function TabsList2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.List,
-    {
-      ref,
-      className: cn("ds:border-rule ds:flex ds:items-center ds:gap-0 ds:border-b", className),
-      ...props
-    }
-  );
-});
-TabsList.displayName = TabsPrimitive.List.displayName;
-var triggerVariants = cva(
-  cn(
-    "ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:text-(length:--control-font-size-md) ds:font-medium",
-    "ds:text-fg-3",
-    microInteractions.selection,
-    "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
-    "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled",
-    "ds:hover:text-fg"
-  ),
-  {
-    variants: {
-      variant: {
-        // §5.16: tab current = 2px accent underline + bold foreground text.
-        // The cyan rule carries the brand statement (tabs are interaction,
-        // so cyan; Pro purple is reserved for selection state on
-        // list/dropdown surfaces). The active LABEL stays in `text-fg` for
-        // legibility — accent on text was too low-contrast against the page
-        // background, especially in dark mode.
-        underline: cn(
-          "ds:rounded-none ds:bg-transparent ds:px-3.5 ds:py-2.5",
-          "ds:border-b-2 ds:border-transparent ds:-mb-px",
-          "ds:data-[state=active]:border-accent ds:data-[state=active]:text-fg ds:data-[state=active]:font-semibold"
-        ),
-        pill: cn(
-          "ds:rounded-pill ds:px-3 ds:py-1.5",
-          "ds:data-[state=active]:bg-brand-bg ds:data-[state=active]:text-brand"
-        )
-      }
-    },
-    defaultVariants: {
-      variant: "underline"
-    }
-  }
-);
-var TabsTrigger = React4.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Trigger,
-    {
-      ref,
-      className: cn(triggerVariants({ variant }), className),
-      ...props
-    }
-  );
-});
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React4.forwardRef(function TabsContent2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    TabsPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "ds:mt-3 ds:focus-visible:outline-none",
-        "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
-        className
-      ),
-      ...props
-    }
-  );
-});
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-var UNASSIGNED_VALUE = "__unassigned__";
-function TeamMemberSelect({
-  teamMembers,
-  currentUserId,
-  value,
-  onValueChange,
-  includeUnassigned = true,
-  placeholder = "Select team member...",
-  className,
-  size
-}) {
-  const options = React4.useMemo(() => {
-    const meBadge = /* @__PURE__ */ jsx(
-      Badge,
-      {
-        variant: "secondary",
-        size: "sm",
-        className: "ds:px-1.5 ds:py-0 ds:font-mono ds:text-[10px] ds:tracking-wider ds:uppercase",
-        children: "Me"
-      }
-    );
-    const sorted = [...teamMembers].sort((a, b) => {
-      if (currentUserId) {
-        if (a.id === currentUserId) return -1;
-        if (b.id === currentUserId) return 1;
-      }
-      return a.fullName.localeCompare(b.fullName);
-    });
-    const memberOptions = sorted.map((m) => ({
-      value: m.id,
-      label: m.fullName,
-      labelSuffix: m.id === currentUserId ? meBadge : void 0
-    }));
-    if (includeUnassigned) {
-      return [{ value: UNASSIGNED_VALUE, label: "Unassigned" }, ...memberOptions];
-    }
-    return memberOptions;
-  }, [teamMembers, currentUserId, includeUnassigned]);
-  const innerValue = value === "" ? UNASSIGNED_VALUE : value;
-  const handleChange = (next) => {
-    onValueChange(next === UNASSIGNED_VALUE ? "" : next);
-  };
-  return /* @__PURE__ */ jsx(
-    Select,
-    {
-      options,
-      value: innerValue,
-      onValueChange: handleChange,
-      placeholder,
-      className,
-      size
-    }
-  );
-}
-TeamMemberSelect.displayName = "TeamMemberSelect";
 var itemVariants = cva(
   cn(
     "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 +1327,14 @@ var itemVariants = cva(
     "ds:hover:bg-surface-hover ds:hover:text-fg",
     "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
-    "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand"
+    SELECTED_STATE_CLASSES
   ),
   {
     variants: {
       variant: {
         default: "",
-        outline: "ds:border ds:border-rule-strong ds:bg-surface"
+        outline: "ds:border ds:border-rule-strong ds:bg-surface",
+        segmented: SEGMENTED_ITEM_CLASSES
       }
     },
     defaultVariants: {
@@ -1435,13 +1350,14 @@ var sizedItemVariants = cva(
     "ds:hover:bg-surface-hover ds:hover:text-fg",
     "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled",
-    "ds:data-[state=on]:bg-brand-bg ds:data-[state=on]:text-brand"
+    SELECTED_STATE_CLASSES
   ),
   {
     variants: {
       variant: {
         default: "",
-        outline: "ds:border ds:border-rule-strong ds:bg-surface"
+        outline: "ds:border ds:border-rule-strong ds:bg-surface",
+        segmented: SEGMENTED_ITEM_CLASSES
       }
     },
     defaultVariants: {
@@ -1449,11 +1365,11 @@ var sizedItemVariants = cva(
     }
   }
 );
-var ToggleGroupContext = React4.createContext({
+var ToggleGroupContext = React2.createContext({
   variant: "default",
   size: void 0
 });
-var ToggleGroup = React4.forwardRef(function ToggleGroup2({
+var ToggleGroup = React2.forwardRef(function ToggleGroup2({
   className,
   variant,
   size,
@@ -1495,11 +1411,11 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
     defaultProp: defaultValue ?? emptyValue,
     onChange: onValueChange
   });
-  const initialValue = React4.useRef(valueProp ?? defaultValue ?? emptyValue);
-  const rootRef = React4.useRef(null);
+  const initialValue = React2.useRef(valueProp ?? defaultValue ?? emptyValue);
+  const rootRef = React2.useRef(null);
   const mergedRef = useMergedRefs(ref, rootRef);
   const labelledBy = wiring["aria-labelledby"] ?? (fieldset?.legendMounted ? fieldset.legendId : void 0);
-  const context = React4.useMemo(() => ({ variant, size }), [variant, size]);
+  const context = React2.useMemo(() => ({ variant, size }), [variant, size]);
   const radixProps = {
     ...props,
     type,
@@ -1518,7 +1434,14 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
         "aria-invalid": ariaInvalid ?? wiring["aria-invalid"],
         "data-invalid": wiring["data-invalid"],
         ...size ? stateAttributes({ size }) : void 0,
-        className: cn("ds:inline-flex ds:items-center ds:gap-1", className),
+        className: cn(
+          "ds:inline-flex ds:items-center ds:gap-1",
+          // The `segmented` track: quiet surface-sunken well, hairline
+          // rule-soft border, control radius, 2px inset padding for the
+          // thumb to sit inside. Matches `TabsList`'s own `segmented` track.
+          variant === "segmented" && "ds:bg-surface-2 ds:rounded-control ds:border-rule-soft ds:gap-0.5 ds:border ds:p-0.5",
+          className
+        ),
         ...radixProps,
         children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children })
       }
@@ -1539,8 +1462,8 @@ var ToggleGroup = React4.forwardRef(function ToggleGroup2({
   ] });
 });
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React4.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
-  const ctx = React4.useContext(ToggleGroupContext);
+var ToggleGroupItem = React2.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
+  const ctx = React2.useContext(ToggleGroupContext);
   const resolvedVariant = variant ?? ctx.variant;
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
@@ -1555,6 +1478,162 @@ var ToggleGroupItem = React4.forwardRef(function ToggleGroupItem2({ className, v
   );
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+var Tabs = React2.forwardRef(
+  function Tabs2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
+  }
+);
+Tabs.displayName = TabsPrimitive.Root.displayName;
+var TabsList = React2.forwardRef(function TabsList2({ className, variant = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        "ds:flex ds:items-center",
+        variant === "segmented" ? (
+          // A track, not a row: hugs its segments (inline-flex + w-fit)
+          // instead of stretching to the parent's width like the flush
+          // underline row does. A consumer's own width class (passed via
+          // `className`, after this in the merge) still wins.
+          "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"
+        ) : "ds:border-rule ds:gap-0 ds:border-b",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var triggerVariants = cva(
+  cn(
+    "ds:inline-flex ds:items-center ds:justify-center ds:gap-2 ds:text-(length:--control-font-size-md) ds:font-medium",
+    "ds:text-fg-3",
+    microInteractions.selection,
+    "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+    "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled",
+    "ds:hover:text-fg"
+  ),
+  {
+    variants: {
+      variant: {
+        // §5.16: tab current = 2px accent underline + bold foreground text.
+        // The cyan rule carries the brand statement (tabs are interaction,
+        // so cyan; Pro purple is reserved for selection state on
+        // list/dropdown surfaces). The active LABEL stays in `text-fg` for
+        // legibility — accent on text was too low-contrast against the page
+        // background, especially in dark mode.
+        underline: cn(
+          "ds:rounded-none ds:bg-transparent ds:px-3.5 ds:py-2.5",
+          "ds:border-b-2 ds:border-transparent ds:-mb-px",
+          "ds:data-[state=active]:border-accent ds:data-[state=active]:text-fg ds:data-[state=active]:font-semibold",
+          "ds:aria-selected:border-accent ds:aria-selected:text-fg ds:aria-selected:font-semibold"
+        ),
+        pill: cn(
+          "ds:rounded-pill ds:px-3 ds:py-1.5",
+          "ds:data-[state=active]:bg-brand-bg ds:data-[state=active]:text-brand",
+          "ds:aria-selected:bg-brand-bg ds:aria-selected:text-brand"
+        ),
+        // The `TabsList variant="segmented"` track's thumb: a raised
+        // `surface` tile (quiet shadow, full-ink `fg`) over quiet fg-3
+        // labels that lift to fg-2 on hover. The hover rule is scoped to
+        // `not-aria-selected` so it never competes by stylesheet order with
+        // the thumb's own (higher-specificity, compound) hover rule below.
+        segmented: cn(
+          "ds:rounded-control ds:px-3 ds:py-1.5",
+          "ds:not-aria-selected:hover:text-fg-2",
+          "ds:data-[state=active]:bg-surface ds:data-[state=active]:text-fg ds:data-[state=active]:shadow-quiet ds:data-[state=active]:font-semibold",
+          "ds:aria-selected:bg-surface ds:aria-selected:text-fg ds:aria-selected:shadow-quiet ds:aria-selected:font-semibold",
+          "ds:aria-selected:hover:bg-surface ds:aria-selected:hover:text-fg"
+        )
+      }
+    },
+    defaultVariants: {
+      variant: "underline"
+    }
+  }
+);
+var TabsTrigger = React2.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(triggerVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React2.forwardRef(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "ds:mt-3 ds:focus-visible:outline-none",
+        "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+var UNASSIGNED_VALUE = "__unassigned__";
+function TeamMemberSelect({
+  teamMembers,
+  currentUserId,
+  value,
+  onValueChange,
+  includeUnassigned = true,
+  placeholder = "Select team member...",
+  className,
+  size
+}) {
+  const options = React2.useMemo(() => {
+    const meBadge = /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "secondary",
+        size: "sm",
+        className: "ds:px-1.5 ds:py-0 ds:font-mono ds:text-[10px] ds:tracking-wider ds:uppercase",
+        children: "Me"
+      }
+    );
+    const sorted = [...teamMembers].sort((a, b) => {
+      if (currentUserId) {
+        if (a.id === currentUserId) return -1;
+        if (b.id === currentUserId) return 1;
+      }
+      return a.fullName.localeCompare(b.fullName);
+    });
+    const memberOptions = sorted.map((m) => ({
+      value: m.id,
+      label: m.fullName,
+      labelSuffix: m.id === currentUserId ? meBadge : void 0
+    }));
+    if (includeUnassigned) {
+      return [{ value: UNASSIGNED_VALUE, label: "Unassigned" }, ...memberOptions];
+    }
+    return memberOptions;
+  }, [teamMembers, currentUserId, includeUnassigned]);
+  const innerValue = value === "" ? UNASSIGNED_VALUE : value;
+  const handleChange = (next) => {
+    onValueChange(next === UNASSIGNED_VALUE ? "" : next);
+  };
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      options,
+      value: innerValue,
+      onValueChange: handleChange,
+      placeholder,
+      className,
+      size
+    }
+  );
+}
+TeamMemberSelect.displayName = "TeamMemberSelect";
 var TONE_DOT = {
   brand: "ds:bg-brand",
   info: "ds:bg-accent-2",
@@ -1582,7 +1661,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
             "aria-selected": active,
             onClick: () => onChange(tab.value),
             className: cn(
-              "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",
+              "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",
               "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
               active ? "ds:border-brand ds:bg-brand/5 ds:text-brand" : "ds:border-transparent ds:text-fg-3 ds:hover:text-fg"
             ),
@@ -2522,7 +2601,7 @@ var DashGrid = forwardRef(function DashGrid2({ widgets, storageKey, onReorder, c
                       setDragId(null);
                       setOverId(null);
                     },
-                    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",
+                    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",
                     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)) })
                   }
                 ),
@@ -2724,13 +2803,17 @@ var ClientRailItem = forwardRef(
           // Layout
           "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",
           // Motion
-          "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
+          "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
           // Cursor
           "ds:cursor-pointer",
+          // Focus — an inset outline: rows stack edge to edge in the rail, so an
+          // outer ring would be clipped by the neighbours (same as TableRow).
+          "ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
           // State — hover only when not active to avoid override
           active ? "ds:bg-brand-bg" : "ds:hover:bg-surface-2",
           className
         ),
+        "aria-current": active ? "true" : void 0,
         ...props,
         children: [
           active && /* @__PURE__ */ jsx(
@@ -2818,7 +2901,7 @@ function MetaText({
   if (presentValues.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(
       "span",
       {
@@ -2858,7 +2941,7 @@ function CheckboxSlot({
       {
         className: cn(
           "ds:shrink-0 ds:transition-opacity ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
-          selected ? "ds:opacity-100" : "ds:opacity-0 ds:group-hover:opacity-100",
+          selected ? "ds:opacity-100" : "ds:opacity-0 ds:group-hover:opacity-100 ds:focus-within:opacity-100",
           className
         ),
         onClick: (event) => event.stopPropagation(),
@@ -2886,7 +2969,14 @@ function MoreActions({ menu }) {
         className: cn(
           "ds:grid ds:size-[30px] ds:place-items-center ds:rounded-[8px] ds:text-fg-4",
           "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
-          "ds:group-hover:text-fg-2 ds:hover:bg-surface ds:hover:text-brand ds:hover:shadow-flat"
+          "ds:group-hover:text-fg-2 ds:hover:bg-surface ds:hover:text-brand ds:hover:shadow-flat",
+          // `aria-expanded` twin of the `data-state` selector below: a
+          // TooltipTrigger asChild ancestor can clobber this button's own
+          // `data-state` with the tooltip's (see toggle-group.tsx's note
+          // on the same bug), but never sets `aria-expanded`.
+          "ds:data-[state=open]:bg-surface ds:data-[state=open]:text-brand ds:data-[state=open]:shadow-flat",
+          "ds:aria-expanded:bg-surface ds:aria-expanded:text-brand ds:aria-expanded:shadow-flat",
+          "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
         ),
         "aria-label": "More actions",
         onClick: (event) => event.stopPropagation(),
@@ -2896,7 +2986,7 @@ function MoreActions({ menu }) {
     /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", onClick: (event) => event.stopPropagation(), children: menu })
   ] });
 }
-var DocumentFileRow = React4.forwardRef(
+var DocumentFileRow = React2.forwardRef(
   function DocumentFileRow2({
     name,
     fileType,
@@ -2963,7 +3053,7 @@ var DocumentFileRow = React4.forwardRef(
   }
 );
 DocumentFileRow.displayName = "DocumentFileRow";
-var DocumentFileCard = React4.forwardRef(
+var DocumentFileCard = React2.forwardRef(
   function DocumentFileCard2({
     name,
     fileType,
@@ -3039,7 +3129,7 @@ var lineCaptionToneClass = {
   warning: "ds:text-warning-fg",
   danger: "ds:text-danger-fg"
 };
-var DocumentFileLine = React4.forwardRef(
+var DocumentFileLine = React2.forwardRef(
   function DocumentFileLine2({
     name,
     fileType = "",
@@ -3167,7 +3257,7 @@ function ChecklistItemRow({ item }) {
     "div",
     {
       className: cn(
-        "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",
+        "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",
         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"
       ),
       children: [
@@ -3213,7 +3303,7 @@ function FileGroup({ files }) {
     file.id
   )) });
 }
-var DocumentChecklist = React4.forwardRef(
+var DocumentChecklist = React2.forwardRef(
   function DocumentChecklist2({
     items,
     title = "Your documents",
@@ -3319,7 +3409,7 @@ var DocumentRequestField = forwardRef(
                 className: cn(
                   "ds:ml-auto ds:size-[26px] ds:rounded-[7px] ds:grid ds:place-items-center",
                   "ds:text-fg-4",
-                  "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
+                  "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
                   "ds:hover:bg-danger-bg ds:hover:text-danger-fg",
                   "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
                 ),
@@ -3480,9 +3570,10 @@ var DataTable = forwardRef(function DataTable2({ withToolbar, className, childre
       className: cn(
         // Outer frame on the whole component: a single visible border +
         // quiet shadow wrapping the toolbar (if any) and the table as one
-        // card. overflow-hidden clips the header/cell backgrounds to the
-        // rounded corners.
-        "ds:w-full ds:overflow-hidden ds:rounded-card ds:border ds:border-rule-strong ds:bg-surface ds:shadow-quiet",
+        // card. The overflow clips the header/cell backgrounds to the
+        // rounded corners; a table wider than the card scrolls sideways
+        // inside it instead of being cut off (the toolbar stays put).
+        "ds:w-full ds:overflow-x-auto ds:overflow-y-hidden ds:rounded-card ds:border ds:border-rule-strong ds:bg-surface ds:shadow-quiet",
         "ds:[&_table]:bg-surface ds:[&_table]:w-full ds:[&_table]:border-collapse",
         className
       ),
@@ -3500,8 +3591,10 @@ var DataTableToolbar = forwardRef(
         ref,
         ...slot(dataTableAnatomy, "toolbar"),
         className: cn(
-          "ds:flex ds:items-center ds:gap-2 ds:px-3 ds:py-2.5",
+          "ds:flex ds:flex-wrap ds:items-center ds:gap-2 ds:px-3 ds:py-2.5",
           "ds:border-rule ds:bg-surface ds:border-b",
+          // Pinned to the card's left edge while a wide table scrolls.
+          "ds:sticky ds:left-0",
           className
         ),
         ...props
@@ -3522,7 +3615,8 @@ var DataTableSearch = forwardRef(
         inputSize: "sm",
         placeholder,
         prefixIcon: /* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true" }),
-        className: cn("ds:w-[280px]", className),
+        rootClassName: "ds:w-auto ds:min-w-0 ds:max-w-full ds:shrink",
+        className: cn("ds:w-[280px] ds:max-w-full", className),
         ...props
       }
     );
@@ -3689,7 +3783,10 @@ var DataTableCellId = forwardRef(
         ref,
         ...slot(dataTableAnatomy, "cell"),
         ...stateAttributes({ variant: "id" }),
-        className: cn("ds:font-sans ds:text-fg-4 ds:text-xs ds:tabular-nums", className),
+        className: cn(
+          "ds:font-sans ds:text-fg-4 ds:text-xs ds:whitespace-nowrap ds:tabular-nums",
+          className
+        ),
         ...props
       }
     );
@@ -3715,7 +3812,7 @@ var DataTableCellDue = forwardRef(
         "data-due-state": ariaState,
         ...slot(dataTableAnatomy, "cell"),
         ...stateAttributes({ variant: "due" }),
-        className: cn("ds:font-sans ds:tabular-nums", tone, className),
+        className: cn("ds:font-sans ds:whitespace-nowrap ds:tabular-nums", tone, className),
         ...props,
         children: children ?? dueDateFormatter.format(value)
       }
@@ -4021,7 +4118,7 @@ function StagePill({
     "span",
     {
       className: cn(
-        "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",
+        "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",
         toneClass[tone]
       ),
       children: [
@@ -4563,7 +4660,7 @@ function AssigneePicker({
       {
         type: "button",
         "aria-label": "Edit assignees",
-        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",
+        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",
         children: [
           stack,
           /* @__PURE__ */ jsx("span", { className: "ds:text-fg-2 ds:text-sm ds:font-semibold ds:tabular-nums tabular-nums", children: selected.length }),
@@ -4792,6 +4889,7 @@ function useStopwatch() {
   }, [setPhase]);
   return { phase, elapsedMs, isRunning: phase === "running", start, pause, resume, stop, reset };
 }
+var FOCUSED_INPUT_ROW = "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none ds:has-[input:focus-visible:not([readonly])]:bg-surface-2";
 var TimeLogger = forwardRef(function TimeLogger2({ className, orientation = "vertical", children, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -4878,7 +4976,7 @@ var TimeLoggerContextRow = forwardRef(
             {
               type: "button",
               onClick: onClientSelect,
-              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",
+              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",
               children: [
                 avatar,
                 text
@@ -4917,6 +5015,9 @@ var TimeLoggerTimer = forwardRef(
         ref,
         className: cn(
           "ds:border-rule-soft ds:flex ds:items-center ds:gap-2.5 ds:border-t ds:px-4 ds:py-4",
+          // The bare input has no chrome of its own; tint its row while it
+          // has keyboard focus so the focus is visible beyond the caret.
+          FOCUSED_INPUT_ROW,
           // In a horizontal bar this segment is usually the `flex-1` grower;
           // min-w-0 lets the clock shrink instead of pushing the trailing
           // segment off the edge.
@@ -5026,32 +5127,41 @@ var TimeLoggerField = forwardRef(
 TimeLoggerField.displayName = "TimeLoggerField";
 var TimeLoggerNotes = forwardRef(
   function TimeLoggerNotes2({ value, onValueChange, icon, placeholder = "Add notes", className, ...props }, ref) {
-    return /* @__PURE__ */ jsxs("div", { className: "ds:border-rule-soft ds:flex ds:items-center ds:gap-3 ds:border-t ds:px-4 ds:py-3", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "ds:text-fg-4 ds:flex ds:size-[17px] ds:shrink-0 ds:items-center ds:justify-center ds:[&_svg]:size-[17px]",
-          "aria-hidden": "true",
-          children: icon ?? /* @__PURE__ */ jsx(FileTextIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          type: "text",
-          value: value ?? "",
-          onChange: (event) => onValueChange?.(event.target.value),
-          placeholder,
-          "aria-label": "Notes",
-          className: cn(
-            "ds:text-fg ds:placeholder:text-fg-4 ds:min-w-0 ds:flex-1 ds:border-0 ds:bg-transparent ds:text-sm ds:outline-none",
-            className
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "ds:border-rule-soft ds:flex ds:items-center ds:gap-3 ds:border-t ds:px-4 ds:py-3",
+          FOCUSED_INPUT_ROW
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ds:text-fg-4 ds:flex ds:size-[17px] ds:shrink-0 ds:items-center ds:justify-center ds:[&_svg]:size-[17px]",
+              "aria-hidden": "true",
+              children: icon ?? /* @__PURE__ */ jsx(FileTextIcon, {})
+            }
           ),
-          ...props
-        }
-      )
-    ] });
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              value: value ?? "",
+              onChange: (event) => onValueChange?.(event.target.value),
+              placeholder,
+              "aria-label": "Notes",
+              className: cn(
+                "ds:text-fg ds:placeholder:text-fg-4 ds:min-w-0 ds:flex-1 ds:border-0 ds:bg-transparent ds:text-sm ds:outline-none",
+                className
+              ),
+              ...props
+            }
+          )
+        ]
+      }
+    );
   }
 );
 TimeLoggerNotes.displayName = "TimeLoggerNotes";
@@ -5085,7 +5195,7 @@ var TimeLoggerBillable = forwardRef(
           {
             type: "button",
             "aria-label": "Billing settings",
-            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",
+            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",
             children: /* @__PURE__ */ jsx(SettingsIcon, {})
           }
         ) }),
@@ -5452,10 +5562,10 @@ function EmailMessageCard({
                     type: "button",
                     onClick: () => setExpanded((v) => !v),
                     "aria-expanded": expanded,
-                    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",
+                    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",
                     children: [
                       expanded ? "Show less" : "Show full email",
-                      /* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("ds:transition-transform ds:motion-reduce:transition-none", expanded && "ds:rotate-180") })
+                      /* @__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") })
                     ]
                   }
                 ),
@@ -5506,7 +5616,7 @@ function SignatureEditor({
         }
       )
     ] }),
-    /* @__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 }),
+    /* @__PURE__ */ jsx("div", { className: "ds:p-3", children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "ds:h-32 ds:rounded-md" }) : children }),
     (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: [
       onSave && /* @__PURE__ */ jsx(
         Button,
@@ -5526,6 +5636,6 @@ function SignatureEditor({
 }
 SignatureEditor.displayName = "SignatureEditor";
 
-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 };
-//# sourceMappingURL=chunk-YMRSFVW7.js.map
-//# sourceMappingURL=chunk-YMRSFVW7.js.map
+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, useStopwatch };
+//# sourceMappingURL=chunk-5AL4W32Z.js.map
+//# sourceMappingURL=chunk-5AL4W32Z.js.map