@assure-one/design-system 1.37.0 → 1.38.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React44 from 'react';
-import { createContext, forwardRef, useMemo, useId, useRef, useState, useEffect, useCallback, useImperativeHandle, Fragment as Fragment$1, useContext, useSyncExternalStore, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+import * as React45 from 'react';
+import { createContext, forwardRef, useMemo, useId, useRef, useState, useEffect, useCallback, useImperativeHandle, Children, isValidElement, cloneElement, useContext, Fragment as Fragment$1, useSyncExternalStore, useLayoutEffect } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
@@ -2278,7 +2278,7 @@ function ZoomOutIcon({ size = 24, ...props }) {
     )
   ] });
 }
-var Accordion = React44.forwardRef(function Accordion2({ className, ...props }, ref) {
+var Accordion = React45.forwardRef(function Accordion2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Root,
     {
@@ -2289,11 +2289,11 @@ var Accordion = React44.forwardRef(function Accordion2({ className, ...props },
   );
 });
 Accordion.displayName = AccordionPrimitive.Root.displayName;
-var AccordionItem = React44.forwardRef(function AccordionItem2({ className, ...props }, ref) {
+var AccordionItem = React45.forwardRef(function AccordionItem2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn(className), ...props });
 });
 AccordionItem.displayName = AccordionPrimitive.Item.displayName;
-var AccordionTrigger = React44.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
+var AccordionTrigger = React45.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "ds:flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
     {
@@ -2322,7 +2322,7 @@ var AccordionTrigger = React44.forwardRef(function AccordionTrigger2({ children,
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React44.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
+var AccordionContent = React45.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
     {
@@ -2553,7 +2553,9 @@ var tableAnatomy = defineAnatomy("table", [
   "row",
   "head",
   "cell",
-  "caption"
+  "caption",
+  "sort",
+  "sort-indicator"
 ]);
 var dataTableAnatomy = defineAnatomy("data-table", [
   "root",
@@ -2567,11 +2569,18 @@ var dataTableAnatomy = defineAnatomy("data-table", [
   "head-button",
   "head-indicator",
   "cell",
-  "checkbox-cell"
+  "checkbox-cell",
+  "search",
+  "filters",
+  "columns-menu",
+  "content",
+  "bulk-actions",
+  "pagination"
 ]);
 var paginationAnatomy = defineAnatomy("pagination", [
   "root",
   "label",
+  "page-size",
   "pages",
   "previous",
   "next",
@@ -2971,7 +2980,8 @@ var EN_MESSAGES = {
     range: (start, end, total) => `${start}\u2013${end} of ${total}`,
     page: (page, total) => `Page ${page} of ${total}`,
     previous: "Previous page",
-    next: "Next page"
+    next: "Next page",
+    rowsPerPage: "Rows per page"
   },
   copyButton: { copy: "Copy to clipboard", copied: "Copied" },
   loadingRows: { loading: "Loading" },
@@ -2984,6 +2994,10 @@ var EN_MESSAGES = {
     unknownUser: "Unknown user",
     status: (status) => `${status} status`
   },
+  avatarGroup: {
+    overflow: (count) => `+${count}`,
+    overflowLabel: (count) => `${count} more`
+  },
   otpInput: { name: "One-time password" },
   datePicker: {
     openCalendar: "Open calendar",
@@ -3038,7 +3052,8 @@ var EN_MESSAGES = {
     pin: "Pin sidebar",
     unpin: "Unpin sidebar",
     collapseSection: "Collapse section",
-    expandSection: "Expand section"
+    expandSection: "Expand section",
+    navigation: "Navigation"
   },
   shell: { content: "Page content" },
   bottomNav: { region: "Primary" },
@@ -3049,7 +3064,24 @@ var EN_MESSAGES = {
   },
   appHeader: { search: "Search\u2026" },
   bulkActionBar: { clearSelection: "Clear selection" },
-  dataTable: { search: "Search\u2026", of: "of" }
+  errorState: {
+    title: "Something went wrong",
+    retry: "Try again",
+    showDetails: "Show details",
+    hideDetails: "Hide details"
+  },
+  dataTable: {
+    search: "Search\u2026",
+    of: "of",
+    searchLabel: "Search",
+    columns: "Columns",
+    filterAll: "All",
+    selectAll: "Select all rows",
+    selectRow: "Select row"
+  },
+  tableStates: { loading: "Loading", empty: "No results" },
+  table: { region: "Scrollable table" },
+  peoplePicker: { assignToMe: "Assign to me" }
 };
 
 // src/primitives/behavior/overlay/recipes.ts
@@ -3186,9 +3218,9 @@ function presence(motion2) {
   return { [PRESENCE_ATTRIBUTE]: motion2 };
 }
 function useExitPresence(ref, open, onExited) {
-  const onExitedRef = React44.useRef(onExited);
+  const onExitedRef = React45.useRef(onExited);
   onExitedRef.current = onExited;
-  React44.useLayoutEffect(() => {
+  React45.useLayoutEffect(() => {
     if (open) return void 0;
     const node = ref.current;
     const running = node && typeof node.getAnimations === "function" ? node.getAnimations().filter((animation) => animation.playState !== "finished") : [];
@@ -3366,7 +3398,7 @@ var ModalDescription = DialogPrimitive2.Description;
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = withPortalContainer(AlertDialogPrimitive.Portal);
-var AlertDialogOverlay = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Backdrop,
   {
     as: AlertDialogPrimitive.Overlay,
@@ -3377,7 +3409,7 @@ var AlertDialogOverlay = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     OverlaySurface,
@@ -3398,9 +3430,9 @@ var AlertDialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy:
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: alertDialogAnatomy, layout: "inset", ...props });
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
+var AlertDialogTitle = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   OverlayDescription,
   {
     as: AlertDialogPrimitive.Description,
@@ -3419,7 +3451,7 @@ var LEGACY_ACTION_CLASSES = cn(
   "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
   "ds:disabled:bg-bg-disabled ds:disabled:text-fg-disabled ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed"
 );
-var AlertDialogAction = React44.forwardRef(({ variant, intent, className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React45.forwardRef(({ variant, intent, className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -3438,7 +3470,7 @@ var AlertDialogAction = React44.forwardRef(({ variant, intent, className, ...pro
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React45.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -3634,7 +3666,7 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
   ] });
 });
 AreaChart.displayName = "AreaChart";
-var AspectRatio = React44.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
+var AspectRatio = React45.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     AspectRatioPrimitive.Root,
     {
@@ -4186,7 +4218,7 @@ var statusDotSizes = {
 function getInitials(name) {
   return name.split(" ").map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
 }
-var Avatar = React44.forwardRef(
+var Avatar = React45.forwardRef(
   function Avatar2({ src, alt, name, size = "md", variant = "initials", status, className, classNames, ...props }, ref) {
     const messages = useDsMessages("avatar");
     const initials2 = name ? getInitials(name) : "?";
@@ -4467,22 +4499,19 @@ var BreadcrumbItem = forwardRef(
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
 var BreadcrumbLink = forwardRef(
-  function BreadcrumbLink2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ref,
-        className: cn(
-          "ds:text-fg-3 ds:inline-flex ds:items-center ds:gap-1",
-          "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
-          "ds:hover:text-fg",
-          "ds:rounded-icon ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
-          className
-        ),
-        ...props,
-        children
-      }
+  function BreadcrumbLink2({ className, children, href, ...props }, ref) {
+    const RouterLink = useLinkComponent();
+    const classes = cn(
+      "ds:text-fg-3 ds:inline-flex ds:items-center ds:gap-1",
+      "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+      "ds:hover:text-fg",
+      "ds:rounded-icon ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
+      className
     );
+    if (RouterLink && href !== void 0) {
+      return /* @__PURE__ */ jsx(RouterLink, { ref, href, className: classes, ...props, children });
+    }
+    return /* @__PURE__ */ jsx("a", { ref, href, className: classes, ...props, children });
   }
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
@@ -5244,7 +5273,7 @@ var TOOLTIP_MAX_WIDTH = {
   md: "ds:max-w-md",
   none: "ds:max-w-none"
 };
-var TooltipContent = React44.forwardRef(({ className, sideOffset = 6, maxWidth = "xs", ...props }, ref) => /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React45.forwardRef(({ className, sideOffset = 6, maxWidth = "xs", ...props }, ref) => /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -5358,8 +5387,8 @@ var SelectRoot = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 function useTriggerOpen(node) {
-  const [open, setOpen] = React44.useState(false);
-  React44.useEffect(() => {
+  const [open, setOpen] = React45.useState(false);
+  React45.useEffect(() => {
     if (!node) return;
     const sync = () => setOpen(node.getAttribute("data-state") === "open");
     sync();
@@ -5369,10 +5398,10 @@ function useTriggerOpen(node) {
   }, [node]);
   return open;
 }
-var SelectTrigger = React44.forwardRef(({ className, children, tabIndex, size, classNames, ...props }, ref) => {
-  const [node, setNode] = React44.useState(null);
+var SelectTrigger = React45.forwardRef(({ className, children, tabIndex, size, classNames, ...props }, ref) => {
+  const [node, setNode] = React45.useState(null);
   const open = useTriggerOpen(node);
-  const composedRef = React44.useCallback(
+  const composedRef = React45.useCallback(
     (element) => {
       setNode(element);
       if (typeof ref === "function") ref(element);
@@ -5426,7 +5455,7 @@ var SelectTrigger = React44.forwardRef(({ className, children, tabIndex, size, c
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -5440,7 +5469,7 @@ var SelectScrollUpButton = React44.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -5455,7 +5484,7 @@ var SelectScrollDownButton = React44.forwardRef(({ className, ...props }, ref) =
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 var SelectPortal = withPortalContainer(SelectPrimitive.Portal);
-var SelectContent = React44.forwardRef(({ className, children, position = "popper", classNames, ...props }, ref) => /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React45.forwardRef(({ className, children, position = "popper", classNames, ...props }, ref) => /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -5492,7 +5521,7 @@ var SelectContent = React44.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -5505,7 +5534,7 @@ var SelectLabel = React44.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React45.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -5533,7 +5562,7 @@ var SelectItem = React44.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -5600,9 +5629,9 @@ function Select({
   const disabled = wiring.disabled ?? false;
   const required = wiring["aria-required"] === true;
   const size = sizeProp ?? fieldControlSize(field?.size);
-  const triggerRef = React44.useRef(null);
+  const triggerRef = React45.useRef(null);
   const fieldRef = wiring.ref;
-  const composedTriggerRef = React44.useCallback(
+  const composedTriggerRef = React45.useCallback(
     (node) => {
       triggerRef.current = node;
       fieldRef(node);
@@ -5876,15 +5905,15 @@ function Calendar({
   const range = isRange ? selected : void 0;
   const locale = useLocale(typeof localeProp === "string" ? localeProp : void 0);
   const localeObject = typeof localeProp === "object" ? localeProp : void 0;
-  const localeProps = React44.useMemo(
+  const localeProps = React45.useMemo(
     () => localeObject ? {} : calendarLocaleProps(locale),
     [locale, localeObject]
   );
   const hydrated = useHydrated();
-  const clockToday = React44.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
+  const clockToday = React45.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
   const today = todayProp ?? clockToday;
   const anchor = props.month ?? props.defaultMonth ?? todayProp;
-  const { modifiers, modifiersClassNames } = React44.useMemo(() => {
+  const { modifiers, modifiersClassNames } = React45.useMemo(() => {
     const buckets = {};
     for (const h of highlights) {
       const key = h.color ?? "primary";
@@ -5899,7 +5928,7 @@ function Calendar({
     }
     return { modifiers: mods, modifiersClassNames: modClasses };
   }, [highlights]);
-  const disabledMatcher = React44.useMemo(() => {
+  const disabledMatcher = React45.useMemo(() => {
     if (!minDate && !maxDate) return void 0;
     if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
     if (minDate) return { before: minDate };
@@ -5907,7 +5936,7 @@ function Calendar({
   }, [minDate, maxDate]);
   const rangeFrom = range?.from;
   const rangeTo = range?.to;
-  const navRange = React44.useMemo(
+  const navRange = React45.useMemo(
     () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({
       minDate,
       maxDate,
@@ -6216,7 +6245,7 @@ function useFieldsetLegend(explicitId) {
   }, [registerLegend]);
   return explicitId ?? fieldset?.legendId;
 }
-var Checkbox = React44.forwardRef(function Checkbox2({
+var Checkbox = React45.forwardRef(function Checkbox2({
   label,
   indeterminate,
   checked,
@@ -6323,11 +6352,11 @@ function ClientSelect({
   ] });
 }
 ClientSelect.displayName = "ClientSelect";
-var Collapsible = React44.forwardRef(function Collapsible2({ className, ...props }, ref) {
+var Collapsible = React45.forwardRef(function Collapsible2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { ref, className: cn(className), ...props });
 });
 Collapsible.displayName = CollapsiblePrimitive.Root.displayName;
-var CollapsibleTrigger = React44.forwardRef(function CollapsibleTrigger2({ className, ...props }, ref) {
+var CollapsibleTrigger = React45.forwardRef(function CollapsibleTrigger2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     CollapsiblePrimitive.Trigger,
     {
@@ -6342,7 +6371,7 @@ var CollapsibleTrigger = React44.forwardRef(function CollapsibleTrigger2({ class
   );
 });
 CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
-var CollapsibleContent = React44.forwardRef(function CollapsibleContent2({ className, ...props }, ref) {
+var CollapsibleContent = React45.forwardRef(function CollapsibleContent2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     CollapsiblePrimitive.Content,
     {
@@ -6602,17 +6631,17 @@ function CommandPalette({
 }) {
   const messages = useDsMessages("commandPalette", messagesProp);
   const placeholder = placeholderProp ?? messages.search;
-  const [internalOpen, setInternalOpen] = React44.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React45.useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = React44.useCallback(
+  const setOpen = React45.useCallback(
     (value) => {
       if (!isControlled) setInternalOpen(value);
       onOpenChange?.(value);
     },
     [isControlled, onOpenChange]
   );
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -6933,19 +6962,19 @@ function ConfirmDialog({
 }) {
   const messages = useDsMessages("confirm", messagesOverride);
   const isControlled = open !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = React44.useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = React45.useState(defaultOpen);
   const resolvedOpen = isControlled ? open : uncontrolledOpen;
-  const [pending, setPending] = React44.useState(false);
-  const [error, setError] = React44.useState(void 0);
-  const actionRef = React44.useRef(null);
-  const mounted = React44.useRef(true);
-  React44.useEffect(() => {
+  const [pending, setPending] = React45.useState(false);
+  const [error, setError] = React45.useState(void 0);
+  const actionRef = React45.useRef(null);
+  const mounted = React45.useRef(true);
+  React45.useEffect(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
-  const setDialogOpen = React44.useCallback(
+  const setDialogOpen = React45.useCallback(
     (nextOpen) => {
       onOpenChange?.(nextOpen);
       if (!isControlled) setUncontrolledOpen(nextOpen);
@@ -7143,7 +7172,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = withPortalContainer(ContextMenuPrimitive.Portal);
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React44.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuSubTrigger = React45.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -7157,7 +7186,7 @@ var ContextMenuSubTrigger = React44.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React44.forwardRef(({ className, ...props }, ref) => (
+var ContextMenuSubContent = React45.forwardRef(({ className, ...props }, ref) => (
   // Portal the sub-content to the body. The parent Content is transformed
   // while its presence keyframes run, which makes it the containing block for
   // `position: fixed` descendants — and its `overflow-hidden` would then clip
@@ -7177,7 +7206,7 @@ var ContextMenuSubContent = React44.forwardRef(({ className, ...props }, ref) =>
   ) })
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
+var ContextMenuContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -7191,7 +7220,7 @@ var ContextMenuContent = React44.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React44.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuItem = React45.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -7206,7 +7235,7 @@ var ContextMenuItem = React44.forwardRef(({ className, destructive, inset, ...pr
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React44.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuCheckboxItem = React45.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -7221,7 +7250,7 @@ var ContextMenuCheckboxItem = React44.forwardRef(({ className, children, checked
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuRadioItem = React45.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -7235,7 +7264,7 @@ var ContextMenuRadioItem = React44.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React44.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuLabel = React45.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -7245,7 +7274,7 @@ var ContextMenuLabel = React44.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSeparator = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -7290,7 +7319,7 @@ var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
 var PopoverPortal = withPortalContainer(PopoverPrimitive.Portal);
 var PopoverClose = PopoverPrimitive.Close;
-var PopoverContent = React44.forwardRef(
+var PopoverContent = React45.forwardRef(
   ({
     className,
     align = "center",
@@ -7920,7 +7949,7 @@ DateRangePicker.displayName = "DateRangePicker";
 var Dialog = DialogPrimitive2.Root;
 var DialogTrigger = DialogPrimitive2.Trigger;
 var DialogPortal = withPortalContainer(DialogPrimitive2.Portal);
-var DialogOverlay = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Backdrop,
   {
     as: DialogPrimitive2.Overlay,
@@ -7954,7 +7983,7 @@ var DIALOG_HEIGHTS = {
   full: "ds:h-[calc(100vh-6rem)]"
 };
 function useTitleRequired(element) {
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
     const timer = setTimeout(() => {
       const node = element.current;
@@ -7971,7 +8000,7 @@ function useTitleRequired(element) {
     return () => clearTimeout(timer);
   }, [element]);
 }
-var DialogContent = React44.forwardRef(
+var DialogContent = React45.forwardRef(
   ({
     size = "md",
     height = "auto",
@@ -7983,7 +8012,7 @@ var DialogContent = React44.forwardRef(
     children,
     ...props
   }, ref) => {
-    const element = React44.useRef(null);
+    const element = React45.useRef(null);
     const mergedRef = useMergedRefs(ref, element);
     useTitleRequired(element);
     const heightRow = DIALOG_HEIGHTS[height];
@@ -8021,7 +8050,7 @@ var DialogContent = React44.forwardRef(
   }
 );
 DialogContent.displayName = DialogPrimitive2.Content.displayName;
-var DialogClose = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogClose = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive2.Close,
   {
     ref,
@@ -8033,15 +8062,15 @@ var DialogClose = React44.forwardRef(({ className, ...props }, ref) => /* @__PUR
 DialogClose.displayName = "DialogClose";
 var DialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy: dialogAnatomy, layout: "inset", dismissGutter: true, ...props });
 DialogHeader.displayName = "DialogHeader";
-var DialogBody = React44.forwardRef(
+var DialogBody = React45.forwardRef(
   ({ padding = "none", ...props }, ref) => /* @__PURE__ */ jsx(OverlayBody, { anatomy: dialogAnatomy, layout: "inset", padding, ref, ...props })
 );
 DialogBody.displayName = "DialogBody";
 var DialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: dialogAnatomy, layout: "inset", ...props });
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive2.Title, anatomy: dialogAnatomy, ref, ...props }));
+var DialogTitle = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive2.Title, anatomy: dialogAnatomy, ref, ...props }));
 DialogTitle.displayName = DialogPrimitive2.Title.displayName;
-var DialogDescription = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   OverlayDescription,
   {
     as: DialogPrimitive2.Description,
@@ -8071,7 +8100,7 @@ var chipVariants = cva(
     }
   }
 );
-var DismissibleChip = React44.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
+var DismissibleChip = React45.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
   const messages = useDsMessages("dismissibleChip");
   return /* @__PURE__ */ jsxs(
     "button",
@@ -8284,7 +8313,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = withPortalContainer(DropdownMenuPrimitive.Portal);
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React44.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React45.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -8298,7 +8327,7 @@ var DropdownMenuSubTrigger = React44.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React44.forwardRef(({ className, ...props }, ref) => (
+var DropdownMenuSubContent = React45.forwardRef(({ className, ...props }, ref) => (
   // Portal the sub-content to the body. The parent Content is transformed
   // while its presence keyframes run, which makes it the containing block for
   // `position: fixed` descendants — and its `overflow-hidden` would then clip
@@ -8318,7 +8347,7 @@ var DropdownMenuSubContent = React44.forwardRef(({ className, ...props }, ref) =
   ) })
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React44.forwardRef(({ className, sideOffset = 6, align = "start", width = "auto", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React45.forwardRef(({ className, sideOffset = 6, align = "start", width = "auto", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -8335,7 +8364,7 @@ var DropdownMenuContent = React44.forwardRef(({ className, sideOffset = 6, align
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React44.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React45.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -8350,7 +8379,7 @@ var DropdownMenuItem = React44.forwardRef(({ className, destructive, inset, ...p
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React44.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React45.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -8365,7 +8394,7 @@ var DropdownMenuCheckboxItem = React44.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React45.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -8379,7 +8408,7 @@ var DropdownMenuRadioItem = React44.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React44.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React45.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -8389,7 +8418,7 @@ var DropdownMenuLabel = React44.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -8408,32 +8437,322 @@ var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var EmptyState = forwardRef(function EmptyState2({ icon, title, description, action, className, ...props }, ref) {
+var SIZES = {
+  page: {
+    pad: "ds:py-20",
+    tile: "ds:mb-5 ds:size-14 ds:[&>svg]:size-7",
+    title: "ds:text-lg",
+    description: "ds:mt-2 ds:text-sm",
+    action: "ds:mt-7"
+  },
+  section: {
+    pad: "ds:py-12",
+    tile: "ds:mb-4 ds:size-12 ds:[&>svg]:size-6",
+    title: "ds:text-base",
+    description: "ds:mt-1.5 ds:text-sm",
+    action: "ds:mt-6"
+  },
+  compact: {
+    pad: "ds:py-8",
+    tile: "ds:mb-3 ds:size-9 ds:[&>svg]:size-4",
+    title: "ds:text-sm",
+    description: "ds:mt-1 ds:text-xs",
+    action: "ds:mt-4"
+  }
+};
+var EmptyState = forwardRef(function EmptyState2({
+  icon,
+  title,
+  description,
+  action,
+  size = "default",
+  headingLevel = 3,
+  align = "center",
+  className,
+  ...props
+}, ref) {
+  const key = size === "default" ? "section" : size;
+  const s = SIZES[key];
+  const Tag = `h${headingLevel}`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
-      className: cn("ds:flex ds:flex-col ds:items-center ds:justify-center ds:px-6 ds:py-12 ds:text-center", className),
+      "data-size": key === "section" ? void 0 : key,
+      "data-align": align === "center" ? void 0 : align,
+      className: cn(
+        "ds:flex ds:flex-col ds:items-center ds:justify-center ds:px-6 ds:text-center",
+        align === "start" && "ds:items-start ds:text-start",
+        s.pad,
+        className
+      ),
       ...props,
       children: [
         icon && /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "ds:mb-4 ds:flex ds:size-12 ds:items-center ds:justify-center ds:rounded-full",
-              "ds:bg-surface-2 ds:text-fg-3 ds:ring-1 ds:ring-rule ds:[&>svg]:size-6"
+              "ds:flex ds:items-center ds:justify-center ds:rounded-full",
+              "ds:bg-surface-2 ds:text-fg-3 ds:ring-1 ds:ring-rule",
+              s.tile
             ),
             children: icon
           }
         ),
-        /* @__PURE__ */ jsx("h3", { className: "ds:font-display ds:text-fg ds:text-base ds:font-medium ds:tracking-[-0.02em]", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-1.5 ds:max-w-sm ds:text-sm", children: description }),
-        action && /* @__PURE__ */ jsx("div", { className: "ds:mt-6", children: action })
+        /* @__PURE__ */ jsx(
+          Tag,
+          {
+            className: cn("ds:font-display ds:text-fg ds:font-medium ds:tracking-[-0.02em]", s.title),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx("p", { className: cn("ds:text-fg-3 ds:max-w-sm", s.description), children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: s.action, children: action })
       ]
     }
   );
 });
 EmptyState.displayName = "EmptyState";
+var DEFAULT_SIZE = {
+  1: "title-page",
+  2: "title-section",
+  3: "title-sub",
+  4: "title-sub",
+  5: "title-sub",
+  6: "title-sub"
+};
+var SIZE_CLASS = {
+  display: "ds:text-display",
+  "title-page": "ds:text-title-page",
+  "title-section": "ds:text-title-section",
+  "title-sub": "ds:text-title-sub"
+};
+var Heading = forwardRef(function Heading2({ level, size, className, ...props }, ref) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      ...slot(headingAnatomy, "root"),
+      className: cn("ds:font-display ds:text-fg", SIZE_CLASS[size ?? DEFAULT_SIZE[level]], className),
+      ...props
+    }
+  );
+});
+Heading.displayName = "Heading";
+var SIZES2 = {
+  page: {
+    pad: "ds:py-20",
+    tile: "ds:mb-5 ds:size-14 ds:[&>svg]:size-7",
+    title: "ds:text-lg",
+    description: "ds:mt-2 ds:text-sm",
+    actions: "ds:mt-7",
+    button: "lg"
+  },
+  section: {
+    pad: "ds:py-12",
+    tile: "ds:mb-4 ds:size-12 ds:[&>svg]:size-6",
+    title: "ds:text-base",
+    description: "ds:mt-1.5 ds:text-sm",
+    actions: "ds:mt-6",
+    button: "md"
+  },
+  compact: {
+    pad: "ds:py-8",
+    tile: "ds:mb-3 ds:size-9 ds:[&>svg]:size-4",
+    title: "ds:text-sm",
+    description: "ds:mt-1 ds:text-xs",
+    actions: "ds:mt-4",
+    button: "sm"
+  }
+};
+var ErrorState = forwardRef(function ErrorState2({
+  icon,
+  title,
+  description,
+  onRetry,
+  retryLabel,
+  action,
+  details,
+  defaultDetailsOpen = false,
+  headingLevel = 3,
+  size = "default",
+  messages: messagesProp,
+  className,
+  ...props
+}, ref) {
+  const messages = useDsMessages("errorState", messagesProp);
+  const [detailsOpen, setDetailsOpen] = useState(defaultDetailsOpen);
+  const key = size === "default" ? "section" : size;
+  const s = SIZES2[key];
+  const compact = key === "compact";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "alert",
+      "data-size": key === "section" ? void 0 : key,
+      className: cn(
+        "ds:flex ds:flex-col ds:items-center ds:justify-center ds:px-6 ds:text-center",
+        s.pad,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "ds:flex ds:items-center ds:justify-center ds:rounded-full",
+              "ds:bg-danger-bg ds:text-danger-fg ds:ring-1 ds:ring-rule",
+              s.tile
+            ),
+            children: icon ?? /* @__PURE__ */ jsx(AlertTriangleIcon, { "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Heading,
+          {
+            level: headingLevel,
+            size: "title-sub",
+            className: cn("ds:font-display ds:text-fg ds:font-medium ds:tracking-[-0.02em]", s.title),
+            children: title ?? messages.title
+          }
+        ),
+        description && /* @__PURE__ */ jsx("p", { className: cn("ds:text-fg-3 ds:max-w-sm", s.description), children: description }),
+        (onRetry || action) && /* @__PURE__ */ jsxs("div", { className: cn("ds:flex ds:items-center ds:gap-2", s.actions), children: [
+          onRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: s.button, onClick: onRetry, children: retryLabel ?? messages.retry }),
+          action
+        ] }),
+        details != null && /* @__PURE__ */ jsxs(
+          Collapsible,
+          {
+            open: detailsOpen,
+            onOpenChange: setDetailsOpen,
+            className: cn("ds:w-full ds:max-w-md", compact ? "ds:mt-3" : "ds:mt-4"),
+            children: [
+              /* @__PURE__ */ jsxs(
+                CollapsibleTrigger,
+                {
+                  className: cn(
+                    "ds:text-fg-3 ds:hover:text-fg ds:mx-auto ds:w-auto ds:gap-1 ds:rounded-md",
+                    "ds:px-1.5 ds:py-0.5 ds:text-xs ds:font-medium ds:transition-colors",
+                    "ds:motion-reduce:transition-none"
+                  ),
+                  children: [
+                    detailsOpen ? messages.hideDetails : messages.showDetails,
+                    /* @__PURE__ */ jsx(
+                      ChevronDownIcon,
+                      {
+                        size: 12,
+                        "aria-hidden": "true",
+                        className: cn(
+                          "ds:transition-transform ds:motion-reduce:transition-none",
+                          detailsOpen && "ds:rotate-180"
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CollapsibleContent,
+                {
+                  className: cn(
+                    "ds:bg-surface-2 ds:text-fg-3 ds:border-rule ds:mt-2 ds:rounded-md ds:border",
+                    "ds:p-3 ds:text-left ds:font-mono ds:text-xs ds:break-words ds:whitespace-pre-wrap"
+                  ),
+                  children: details
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+ErrorState.displayName = "ErrorState";
+var SectionCard = forwardRef(function SectionCard2({
+  title,
+  description,
+  actions,
+  headingLevel = 3,
+  footer,
+  flush = false,
+  classNames,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(Card, { ref, ...props, children: [
+    (title || description || actions) && /* @__PURE__ */ jsxs(CardHeader, { className: classNames?.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:min-w-0 ds:flex-col ds:gap-1.5", children: [
+        title && /* @__PURE__ */ jsx(CardTitle, { headingLevel, className: classNames?.title, children: title }),
+        description && /* @__PURE__ */ jsx(CardDescription, { className: classNames?.description, children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx(CardAction, { children: actions })
+    ] }),
+    children != null && /* @__PURE__ */ jsx(
+      CardContent,
+      {
+        className: cn(
+          flush && "ds:px-0",
+          !(title || description || actions) && "ds:pt-6",
+          classNames?.content
+        ),
+        children
+      }
+    ),
+    footer && /* @__PURE__ */ jsx(CardFooter, { children: footer })
+  ] });
+});
+SectionCard.displayName = "SectionCard";
+var OVERFLOW_SIZE = {
+  xs: "ds:size-(--avatar-size-xs) ds:text-xs",
+  sm: "ds:size-(--avatar-size-sm) ds:text-xs",
+  md: "ds:size-(--avatar-size-md) ds:text-xs",
+  lg: "ds:size-(--avatar-size-lg) ds:text-sm",
+  xl: "ds:size-(--avatar-size-xl) ds:text-sm"
+};
+var AvatarGroup = forwardRef(function AvatarGroup2({ children, max = 4, total, size = "sm", className, ...props }, ref) {
+  const messages = useDsMessages("avatarGroup");
+  const items = Children.toArray(children).filter(isValidElement);
+  const shown = items.slice(0, Math.max(0, max));
+  const hidden = Math.max(0, (total ?? items.length) - shown.length);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-size": size,
+      className: cn("ds:flex ds:items-center ds:-space-x-1.5", className),
+      ...props,
+      children: [
+        shown.map((child, index) => {
+          const element = child;
+          return cloneElement(element, {
+            key: element.key ?? index,
+            size: element.props.size ?? size,
+            classNames: { ...element.props.classNames, frame: "ds:ring-bg ds:ring-2" }
+          });
+        }),
+        hidden > 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "img",
+            "aria-label": messages.overflowLabel(hidden),
+            className: cn(
+              "ds:bg-bg-3 ds:text-fg-2 ds:ring-bg ds:relative ds:inline-flex ds:shrink-0",
+              "ds:items-center ds:justify-center ds:rounded-full ds:font-mono ds:leading-none ds:font-medium ds:ring-2",
+              OVERFLOW_SIZE[size]
+            ),
+            children: messages.overflow(hidden)
+          }
+        )
+      ]
+    }
+  );
+});
+AvatarGroup.displayName = "AvatarGroup";
 var kindTile = {
   doc: "ds:bg-danger-bg ds:text-danger-fg",
   sheet: "ds:bg-success-bg ds:text-success-fg",
@@ -8726,7 +9045,7 @@ FormSection.displayName = "FormSection";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardPortal = withPortalContainer(HoverCardPrimitive.Portal);
-var HoverCardContent = React44.forwardRef(
+var HoverCardContent = React45.forwardRef(
   ({
     className,
     align = "center",
@@ -9111,19 +9430,19 @@ function KeyboardShortcutsDialog({
   messages: messagesProp
 } = {}) {
   const messages = useDsMessages("keyboardShortcuts", messagesProp);
-  const [internalOpen, setInternalOpen] = React44.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React45.useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const openRef = React44.useRef(open);
+  const openRef = React45.useRef(open);
   openRef.current = open;
-  const setOpen = React44.useCallback(
+  const setOpen = React45.useCallback(
     (value) => {
       if (!isControlled) setInternalOpen(value);
       onOpenChange?.(value);
     },
     [isControlled, onOpenChange]
   );
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (hotkey === null) return;
     function handleKeyDown(e) {
       const target = e.target;
@@ -9162,7 +9481,7 @@ function KeyboardShortcutsDialog({
           className: "ds:flex ds:items-center ds:justify-between ds:gap-3 ds:py-1",
           children: [
             /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-sm", children: shortcut.description }),
-            /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React44.Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React45.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:mx-0.5 ds:text-[11px]", children: messages.then }),
               /* @__PURE__ */ jsx(Kbd, { children: key })
             ] }, i)) })
@@ -9183,7 +9502,7 @@ function KeyboardShortcutsDialog({
 var labelVariants = cva(
   "ds:text-[13px] ds:font-medium ds:leading-none ds:text-fg ds:select-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:text-fg-disabled ds:has-[+input:disabled]:text-fg-disabled"
 );
-var Label4 = React44.forwardRef(
+var Label4 = React45.forwardRef(
   function Label5({ children, required, className, id, htmlFor, onClick, ...props }, ref) {
     const field = useFieldContext();
     const fieldLabelId = useFieldPart("label", id, field !== null);
@@ -9543,18 +9862,28 @@ var MasterDetailLayout = forwardRef(
         ref,
         "data-detail-open": detailOpen ? "true" : "false",
         className: cn(
-          "ds:bg-surface ds:relative ds:flex ds:h-full ds:min-h-0 ds:w-full ds:overflow-hidden",
+          // `isolate`: the mobile detail overlay stacks inside this root, so it
+          // no longer borrows the global `--z-modal` layer for an in-flow pane.
+          "ds:bg-surface ds:relative ds:isolate ds:flex ds:h-full ds:min-h-0 ds:w-full ds:overflow-hidden",
           className
         ),
-        style: { "--master-list-width": resolvedWidth, ...style },
+        style: {
+          "--ds-master-detail-list-width": resolvedWidth,
+          // The name this component has carried since W0-22; consumers may
+          // have set it directly, so it stays written and stays the
+          // fallback of the `--ds-*` hook (C-DOM-03).
+          "--master-list-width": resolvedWidth,
+          ...style
+        },
         ...props,
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "ds:bg-surface ds:flex ds:min-h-0 ds:w-full ds:flex-col ds:overflow-auto",
-                "ds:md:w-[var(--master-list-width)] ds:md:shrink-0 ds:md:border-rule ds:md:border-r"
+                "ds:bg-surface ds:flex ds:min-h-0 ds:flex-col ds:overflow-auto",
+                "ds:max-md:w-full",
+                "ds:md:w-[var(--ds-master-detail-list-width,var(--master-list-width))] ds:md:shrink-0 ds:md:border-rule ds:md:border-r"
               ),
               children: list
             }
@@ -9565,12 +9894,15 @@ var MasterDetailLayout = forwardRef(
               className: cn(
                 "ds:bg-surface-2 ds:flex ds:min-h-0 ds:flex-col ds:overflow-auto",
                 // mobile: overlay the list and slide in from the right
-                "ds:max-md:absolute ds:max-md:inset-0 ds:max-md:z-[var(--z-modal)]",
+                // No z-index: the root is an isolated stacking context and this
+                // positioned pane is the later sibling, so it paints above the
+                // static list pane on its own.
+                "ds:max-md:absolute ds:max-md:inset-0",
                 "ds:max-md:transition-transform ds:max-md:duration-[var(--duration-normal)] ds:max-md:ease-[var(--ease-out-quart)]",
                 "ds:motion-reduce:transition-none",
                 detailOpen ? "ds:max-md:translate-x-0" : "ds:max-md:pointer-events-none ds:max-md:translate-x-full",
                 // desktop: reset to a static, independently-scrolling flex column
-                "ds:md:static ds:md:z-auto ds:md:flex-1 ds:md:translate-x-0 ds:md:transition-none ds:md:pointer-events-auto"
+                "ds:md:static ds:md:flex-1 ds:md:translate-x-0 ds:md:transition-none ds:md:pointer-events-auto"
               ),
               children: [
                 onBack && /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface ds:sticky ds:top-0 ds:z-[var(--z-sticky)] ds:flex ds:h-12 ds:shrink-0 ds:items-center ds:border-b ds:px-2 ds:md:hidden", children: /* @__PURE__ */ jsx(
@@ -9764,7 +10096,7 @@ function MultiSelectField({
   size = "md",
   id
 }) {
-  const selected = React44.useMemo(
+  const selected = React45.useMemo(
     () => new Set(value ? value.split(",").filter(Boolean) : []),
     [value]
   );
@@ -9777,7 +10109,7 @@ function MultiSelectField({
     }
     onChange(Array.from(next).join(","));
   };
-  const generatedId = React44.useId();
+  const generatedId = React45.useId();
   const groupId = id ?? generatedId;
   return /* @__PURE__ */ jsxs("div", { className: cn("ds:w-full", className), children: [
     /* @__PURE__ */ jsx(
@@ -10160,7 +10492,7 @@ function OTPInput({
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
   });
-  const inputRef = React44.useRef(null);
+  const inputRef = React45.useRef(null);
   useFormReset(inputRef, () => setValue(defaultValue ?? ""), wiring.name, form);
   const errorId = `${wiring.id}-error`;
   const hasError = wiring["aria-invalid"] === true;
@@ -10274,23 +10606,38 @@ var PAGE_BUTTON_BASE = cn(
   "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
   "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
 );
+var noop2 = () => {
+};
 var Pagination = forwardRef(function Pagination2({
-  currentPage,
-  totalPages,
-  onPageChange,
+  page: pageProp,
+  pageCount: pageCountProp,
+  onPageChange = noop2,
   siblingCount = 1,
   totalItems,
   pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
+  hideOnSinglePage = true,
   messages: messagesProp,
+  currentPage: legacyCurrentPage,
+  totalPages: legacyTotalPages,
   className,
   ...props
 }, ref) {
   const messages = useDsMessages("pagination", messagesProp);
-  if (totalPages <= 1) return null;
+  const currentPage = pageProp ?? legacyCurrentPage ?? 1;
+  const derivedPageCount = totalItems != null && pageSize != null && pageSize > 0 ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1;
+  const totalPages = pageCountProp ?? legacyTotalPages ?? derivedPageCount;
+  const sizeOptions = useMemo(
+    () => (pageSizeOptions ?? []).map((size) => ({ value: String(size), label: String(size) })),
+    [pageSizeOptions]
+  );
+  const showPageSize = sizeOptions.length > 0 && onPageSizeChange != null;
+  if (hideOnSinglePage && totalPages <= 1 && !showPageSize) return null;
   const pages = getPageNumbers(currentPage, totalPages, siblingCount);
   let contextLabel;
   if (totalItems != null && pageSize != null) {
-    const start = (currentPage - 1) * pageSize + 1;
+    const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
     const end = Math.min(currentPage * pageSize, totalItems);
     contextLabel = messages.range(start, end, totalItems);
   } else {
@@ -10313,6 +10660,27 @@ var Pagination = forwardRef(function Pagination2({
             children: contextLabel
           }
         ),
+        showPageSize && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...slot(paginationAnatomy, "page-size"),
+            className: "ds:flex ds:shrink-0 ds:items-center ds:gap-2",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:text-xs", children: messages.rowsPerPage }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  size: "sm",
+                  options: sizeOptions,
+                  value: pageSize != null ? String(pageSize) : void 0,
+                  onValueChange: (value) => onPageSizeChange?.(Number(value)),
+                  "aria-label": messages.rowsPerPage,
+                  className: "ds:w-auto ds:min-w-18"
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "ds:flex ds:items-center ds:gap-0.5", children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -10373,6 +10741,22 @@ var Pagination = forwardRef(function Pagination2({
   );
 });
 Pagination.displayName = "Pagination";
+var DataTablePagination = forwardRef(
+  function DataTablePagination2({ page, totalItems, pageSize = 25, current, total, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        ref,
+        page: page ?? current,
+        totalItems: totalItems ?? total ?? 0,
+        pageSize,
+        className: cn("ds:mt-4", className),
+        ...props
+      }
+    );
+  }
+);
+DataTablePagination.displayName = "DataTablePagination";
 var previewVariants = cva("ds:bg-surface ds:flex ds:min-h-0 ds:flex-col ds:overflow-hidden", {
   variants: {
     variant: {
@@ -11302,7 +11686,7 @@ var CREATE_ITEM_CLASSES = cn(
 var GROUP_HEADING_CLASSES = groupHeadingClasses({ palette: "neutral", labelSize: SMALL_TEXT });
 var STATE_CLASSES = cn("ds:text-fg-3 ds:px-3 ds:py-2", SMALL_TEXT);
 var CREATE_ROW = "\0create";
-var CmdkCompatContext = React44.createContext(false);
+var CmdkCompatContext = React45.createContext(false);
 function Combobox(props) {
   const {
     options: items,
@@ -11350,7 +11734,7 @@ function Combobox(props) {
   const closeOnSelect = props.closeOnSelect ?? !multiple;
   const hideSelected = props.multiple === true && props.hideSelected === true;
   const messages = useDsMessages("combobox", messagesProp);
-  const accessors = React44.useMemo(() => {
+  const accessors = React45.useMemo(() => {
     if (!getOptionValue || !getOptionLabel) return void 0;
     return {
       getOptionValue,
@@ -11360,7 +11744,7 @@ function Combobox(props) {
       getOptionKeywords
     };
   }, [getOptionValue, getOptionLabel, getOptionDisabled, getOptionGroup, getOptionKeywords]);
-  const options = React44.useMemo(() => toOptions(items, accessors), [items, accessors]);
+  const options = React45.useMemo(() => toOptions(items, accessors), [items, accessors]);
   const wiring = useFieldControl({
     id: idProp,
     name: nameProp,
@@ -11382,7 +11766,7 @@ function Combobox(props) {
     const single = normalizeSingleValue(raw);
     return single === null ? [] : [single];
   };
-  const defaultSelection = React44.useMemo(
+  const defaultSelection = React45.useMemo(
     () => toSelection(props.defaultValue) ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps -- read once, like a default should be
     []
@@ -11403,15 +11787,15 @@ function Combobox(props) {
     defaultProp: defaultSearch,
     onChange: onSearchChange
   });
-  const selectedOption = React44.useMemo(() => findOption(options, value), [options, value]);
-  const selectedOptions = React44.useMemo(
+  const selectedOption = React45.useMemo(() => findOption(options, value), [options, value]);
+  const selectedOptions = React45.useMemo(
     () => selection.map((entry) => findOption(options, entry)).filter((option) => option !== void 0),
     [options, selection]
   );
-  const inputRef = React44.useRef(null);
-  const controlRef = React44.useRef(null);
+  const inputRef = React45.useRef(null);
+  const controlRef = React45.useRef(null);
   const mergedInputRef = useMergedRefs(inputRef, ref, wiring.ref);
-  const commitSelection = React44.useCallback(
+  const commitSelection = React45.useCallback(
     (next, option) => {
       setSelectionState(next);
       const changed = next.length !== selection.length || next.some((entry, index) => entry !== selection[index]);
@@ -11422,18 +11806,18 @@ function Combobox(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `props` is read for the discriminant
     [setSelectionState, selection, props.multiple, props.onValueChange]
   );
-  const setValue = React44.useCallback(
+  const setValue = React45.useCallback(
     (next) => commitSelection(next === null ? [] : [next], findOption(options, next) ?? null),
     [commitSelection, options]
   );
-  const removeValue = React44.useCallback(
+  const removeValue = React45.useCallback(
     (entry) => commitSelection(
       selection.filter((current) => current !== entry),
       findOption(options, entry) ?? null
     ),
     [commitSelection, selection, options]
   );
-  const setOpen = React44.useCallback(
+  const setOpen = React45.useCallback(
     (next) => {
       if (next && inert) return;
       setOpenState(next);
@@ -11442,39 +11826,39 @@ function Combobox(props) {
     [inert, setOpenState, setSearchState]
   );
   const trimmed = search.trim();
-  const visibleOptions = React44.useMemo(() => {
+  const visibleOptions = React45.useMemo(() => {
     const filtered = shouldFilter ? filterOptions(options, search) : options;
     return hideSelected ? filtered.filter((option) => !selection.includes(option.value)) : filtered;
   }, [options, search, shouldFilter, hideSelected, selection]);
   const showCreate = onCreate !== void 0 && trimmed.length > 0 && !options.some((option) => foldForMatch(option.label) === foldForMatch(trimmed));
-  const groups = React44.useMemo(() => groupOptions(visibleOptions), [visibleOptions]);
+  const groups = React45.useMemo(() => groupOptions(visibleOptions), [visibleOptions]);
   const hasGroups = groups.some((group) => group.group !== void 0);
-  const rows = React44.useMemo(() => {
+  const rows = React45.useMemo(() => {
     const list = groups.flatMap((group) => group.options);
     if (showCreate) list.push({ value: CREATE_ROW, label: messages.create(trimmed) });
     return list;
   }, [groups, showCreate, messages, trimmed]);
-  const [highlightedValue, setHighlightedValue] = React44.useState(null);
+  const [highlightedValue, setHighlightedValue] = React45.useState(null);
   const highlightedIndex = indexOfValue(rows, highlightedValue);
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (!open) return;
     setHighlightedValue((current) => reconcileHighlight(rows, current, "first"));
   }, [open, rows]);
-  const openList = React44.useCallback(() => {
+  const openList = React45.useCallback(() => {
     if (open) return;
     setHighlightedValue(value !== null && findOption(rows, value) ? value : null);
     setOpen(true);
   }, [open, rows, setOpen, value]);
-  const scrollHighlightedIntoView = React44.useCallback(() => {
+  const scrollHighlightedIntoView = React45.useCallback(() => {
     const id = activeDescendantId(listId, rows, highlightedIndex);
     if (!id) return;
     document.getElementById(id)?.scrollIntoView({ block: "nearest" });
   }, [listId, rows, highlightedIndex]);
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (open) scrollHighlightedIntoView();
   }, [open, scrollHighlightedIntoView]);
   const focusInput = () => inputRef.current?.focus();
-  const activateRow = React44.useCallback(
+  const activateRow = React45.useCallback(
     (option) => {
       if (option.disabled) return;
       if (option.value === CREATE_ROW) {
@@ -11560,7 +11944,7 @@ function Combobox(props) {
     option.value
   )) : null;
   const hasChips = props.multiple === true && selectedOptions.length > 0;
-  const cmdkCompat = React44.useContext(CmdkCompatContext);
+  const cmdkCompat = React45.useContext(CmdkCompatContext);
   const buttonSize = BUTTON_SIZE[size];
   const indexByValue = new Map(rows.map((row, index) => [row.value, index]));
   const renderRow = (option) => {
@@ -12571,11 +12955,11 @@ function useFormReset2(elementRef, onReset, form) {
     return () => owner.removeEventListener("reset", handle);
   }, [elementRef, form]);
 }
-var RadioGroupContext = React44.createContext({
+var RadioGroupContext = React45.createContext({
   appearance: "plain",
   invalid: false
 });
-var RadioGroup3 = React44.forwardRef(function RadioGroup4({
+var RadioGroup3 = React45.forwardRef(function RadioGroup4({
   className,
   appearance = "plain",
   invalid,
@@ -12607,12 +12991,12 @@ var RadioGroup3 = React44.forwardRef(function RadioGroup4({
     defaultProp: defaultValue ?? null,
     onChange: onValueChange
   });
-  const initialValue = React44.useRef(valueProp ?? defaultValue ?? null);
-  const rootRef = React44.useRef(null);
+  const initialValue = React45.useRef(valueProp ?? defaultValue ?? null);
+  const rootRef = React45.useRef(null);
   useFormReset2(rootRef, () => setValue(initialValue.current));
   const mergedRef = useMergedRefs(ref, rootRef);
   const isInvalid = wiring["aria-invalid"] === true;
-  const context = React44.useMemo(
+  const context = React45.useMemo(
     () => ({ appearance, invalid: isInvalid }),
     [appearance, isInvalid]
   );
@@ -12648,7 +13032,7 @@ var ITEM_CLASSES2 = cn(
   "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:cursor-not-allowed",
   "ds:aria-[invalid=true]:border-danger-line"
 );
-var RadioGroupItem = React44.forwardRef(function RadioGroupItem2({
+var RadioGroupItem = React45.forwardRef(function RadioGroupItem2({
   className,
   label,
   description,
@@ -12657,9 +13041,9 @@ var RadioGroupItem = React44.forwardRef(function RadioGroupItem2({
   "aria-invalid": ariaInvalid,
   ...props
 }, ref) {
-  const generatedId = React44.useId();
+  const generatedId = React45.useId();
   const id = providedId ?? generatedId;
-  const { appearance, invalid } = React44.useContext(RadioGroupContext);
+  const { appearance, invalid } = React45.useContext(RadioGroupContext);
   const card = appearance === "card";
   const descriptionId = card && description ? `${id}-description` : void 0;
   const root = /* @__PURE__ */ jsx(
@@ -12792,19 +13176,19 @@ function ResponsiveDialog({
   side,
   size = "md"
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React44.useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = React45.useState(defaultOpen);
   const controlled = open !== void 0;
   const isOpen = controlled ? open : uncontrolledOpen;
-  const handleOpenChange = React44.useCallback(
+  const handleOpenChange = React45.useCallback(
     (next) => {
       if (!controlled) setUncontrolledOpen(next);
       onOpenChange?.(next);
     },
     [controlled, onOpenChange]
   );
-  const close = React44.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+  const close = React45.useCallback(() => handleOpenChange(false), [handleOpenChange]);
   const hasTitle = title !== void 0 && title !== null && title !== "";
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
     if (!hasTitle) {
       errorOnce(
@@ -12855,7 +13239,7 @@ var RouteTransition = forwardRef(
   }
 );
 RouteTransition.displayName = "RouteTransition";
-var ScrollArea = React44.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
+var ScrollArea = React45.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
     {
@@ -12878,7 +13262,7 @@ var ScrollArea = React44.forwardRef(function ScrollArea2({ className, children,
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React44.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
+var ScrollBar = React45.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
   return /* @__PURE__ */ jsx(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
@@ -12947,7 +13331,7 @@ function searchInputVariants({
     class: cn(SEARCH_RESET, row, classProp, className) || void 0
   });
 }
-var SearchInput = React44.forwardRef(
+var SearchInput = React45.forwardRef(
   function SearchInput2({
     value,
     onValueChange,
@@ -12979,20 +13363,20 @@ var SearchInput = React44.forwardRef(
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy
     });
-    const inputRef = React44.useRef(null);
+    const inputRef = React45.useRef(null);
     const setRefs = useMergedRefs(ref, wiringRef, inputRef);
     const debouncedValue = useDebounce(value, debounceMs);
-    const isFirstRender = React44.useRef(true);
-    React44.useEffect(() => {
+    const isFirstRender = React45.useRef(true);
+    React45.useEffect(() => {
       if (isFirstRender.current) {
         isFirstRender.current = false;
         return;
       }
       onSearch?.(debouncedValue);
     }, [debouncedValue, onSearch]);
-    const latestChange = React44.useRef(onValueChange);
+    const latestChange = React45.useRef(onValueChange);
     latestChange.current = onValueChange;
-    React44.useEffect(() => {
+    React45.useEffect(() => {
       const owner = inputRef.current?.form;
       if (!owner) return;
       const handle = () => latestChange.current("");
@@ -13128,20 +13512,20 @@ function SearchSelect({
   const createNewLabel = createNewLabelProp ?? copy.createNew;
   const isSingleMode = value !== void 0 || onValueChange !== void 0;
   const closeOnSelect = isSingleMode || closeOnSelectProp;
-  const byId = React44.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
+  const byId = React45.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
   const singleSelectedOption = isSingleMode && value ? byId.get(value) ?? null : null;
-  const selected = React44.useMemo(
+  const selected = React45.useMemo(
     () => isSingleMode ? singleSelectedOption ? [singleSelectedOption] : [] : selectedProp ?? [],
     [isSingleMode, singleSelectedOption, selectedProp]
   );
-  const selectedIds = React44.useMemo(() => selected.map((s) => s.id), [selected]);
-  const [open, setOpen] = React44.useState(false);
-  const [search, setSearch] = React44.useState("");
-  const [activeChip, setActiveChip] = React44.useState(null);
-  const hasGroups = React44.useMemo(() => options.some((o) => o.group != null), [options]);
-  const hasLeadingDot = React44.useMemo(() => options.some((o) => !!o.color), [options]);
-  const pinnedSet = React44.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
-  const chips = React44.useMemo(() => {
+  const selectedIds = React45.useMemo(() => selected.map((s) => s.id), [selected]);
+  const [open, setOpen] = React45.useState(false);
+  const [search, setSearch] = React45.useState("");
+  const [activeChip, setActiveChip] = React45.useState(null);
+  const hasGroups = React45.useMemo(() => options.some((o) => o.group != null), [options]);
+  const hasLeadingDot = React45.useMemo(() => options.some((o) => !!o.color), [options]);
+  const pinnedSet = React45.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
+  const chips = React45.useMemo(() => {
     if (!groupFilter || !hasGroups) return [];
     const seen = [];
     for (const option of options) {
@@ -13153,7 +13537,7 @@ function SearchSelect({
   }, [groupFilter, hasGroups, options, pinnedSet]);
   const chipActive = chips.length > 0 && activeChip !== null;
   const trimmed = search.trim();
-  const groupCounts = React44.useMemo(() => {
+  const groupCounts = React45.useMemo(() => {
     const counts = /* @__PURE__ */ new Map();
     if (!showGroupCounts || trimmed) return counts;
     for (const option of options) {
@@ -13163,7 +13547,7 @@ function SearchSelect({
     }
     return counts;
   }, [showGroupCounts, trimmed, options, selectedIds]);
-  const rows = React44.useMemo(
+  const rows = React45.useMemo(
     () => options.filter((option) => !chipActive || option.group === activeChip).map((option) => {
       const heading = chipActive ? void 0 : option.group ?? void 0;
       const count = heading ? groupCounts.get(heading) : void 0;
@@ -13186,7 +13570,7 @@ function SearchSelect({
   };
   const singleValue = closeOnSelect ? selected[0] ?? null : null;
   const showValue = singleValue !== null && !open;
-  const renderValue = React44.useCallback(
+  const renderValue = React45.useCallback(
     (row) => {
       const source = sourceOf(row);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -13215,7 +13599,7 @@ function SearchSelect({
     },
     [descriptionVariant]
   );
-  const messages = React44.useMemo(
+  const messages = React45.useMemo(
     () => ({
       empty: search ? copy.empty : copy.noOptions,
       clear: singleValue ? copy.clearNamed(singleValue.label) : copy.clear,
@@ -13476,7 +13860,7 @@ var SegmentedProgress = forwardRef(
   }
 );
 SegmentedProgress.displayName = "SegmentedProgress";
-var Separator4 = React44.forwardRef(function Separator5({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
+var Separator4 = React45.forwardRef(function Separator5({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -13493,13 +13877,13 @@ var Separator4 = React44.forwardRef(function Separator5({ className, orientation
   );
 });
 Separator4.displayName = SeparatorPrimitive.Root.displayName;
-var SheetSideContext = React44.createContext({});
+var SheetSideContext = React45.createContext({});
 var Sheet = ({ side, children, ...props }) => /* @__PURE__ */ jsx(DialogPrimitive2.Root, { ...props, children: /* @__PURE__ */ jsx(SheetSideContext, { value: { side }, children }) });
 Sheet.displayName = "Sheet";
 var SheetTrigger = DialogPrimitive2.Trigger;
 var SheetClose = DialogPrimitive2.Close;
 var SheetPortal = withPortalContainer(DialogPrimitive2.Portal);
-var SheetOverlay = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var SheetOverlay = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Backdrop,
   {
     as: DialogPrimitive2.Overlay,
@@ -13517,7 +13901,7 @@ var SHEET_SIZES = {
   xl: "ds:w-[95vw] ds:max-w-[95vw] ds:sm:w-[var(--ds-sheet-width,760px)]",
   full: "ds:w-full ds:max-w-none"
 };
-var SheetContent = React44.forwardRef(
+var SheetContent = React45.forwardRef(
   ({
     side,
     size,
@@ -13531,12 +13915,12 @@ var SheetContent = React44.forwardRef(
     style,
     ...props
   }, ref) => {
-    const ctx = React44.use(SheetSideContext);
+    const ctx = React45.use(SheetSideContext);
     const resolvedSide = side ?? ctx.side ?? "right";
     const supportsWidth = resolvedSide === "left" || resolvedSide === "right";
     const resolvedSize = size ?? (width === void 0 || width === "default" ? void 0 : width);
     const sizeRow = supportsWidth && resolvedSize ? SHEET_SIZES[resolvedSize] : null;
-    const widthStyle = supportsWidth && customWidth ? { width: customWidth, maxWidth: "95vw", ...style } : style;
+    const widthStyle2 = supportsWidth && customWidth ? { width: customWidth, maxWidth: "95vw", ...style } : style;
     return /* @__PURE__ */ jsxs(SheetPortal, { children: [
       /* @__PURE__ */ jsx(SheetOverlay, {}),
       /* @__PURE__ */ jsxs(
@@ -13550,7 +13934,7 @@ var SheetContent = React44.forwardRef(
           ...stateAttributes({ size: resolvedSize ?? "default" }),
           rows: [sizeRow],
           className,
-          style: widthStyle,
+          style: widthStyle2,
           ...props,
           children: [
             children,
@@ -13572,15 +13956,15 @@ var SheetContent = React44.forwardRef(
 SheetContent.displayName = DialogPrimitive2.Content.displayName;
 var SheetHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy: sheetAnatomy, layout: "padded", dismissGutter: true, ...props });
 SheetHeader.displayName = "SheetHeader";
-var SheetBody = React44.forwardRef(
+var SheetBody = React45.forwardRef(
   ({ padding = "md", ...props }, ref) => /* @__PURE__ */ jsx(OverlayBody, { anatomy: sheetAnatomy, layout: "padded", padding, ref, ...props })
 );
 SheetBody.displayName = "SheetBody";
 var SheetFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: sheetAnatomy, layout: "padded", ...props });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive2.Title, anatomy: sheetAnatomy, ref, ...props }));
+var SheetTitle = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive2.Title, anatomy: sheetAnatomy, ref, ...props }));
 SheetTitle.displayName = DialogPrimitive2.Title.displayName;
-var SheetDescription = React44.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayDescription, { as: DialogPrimitive2.Description, anatomy: sheetAnatomy, ref, ...props }));
+var SheetDescription = React45.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayDescription, { as: DialogPrimitive2.Description, anatomy: sheetAnatomy, ref, ...props }));
 SheetDescription.displayName = DialogPrimitive2.Description.displayName;
 var SIDE_DRAWER_WIDTHS = {
   sm: "ds:max-w-none ds:w-[420px] ds:max-md:w-[95vw]",
@@ -13697,7 +14081,7 @@ var THUMB_SIZE = {
   md: "ds:size-4",
   lg: "ds:size-(--control-icon-xl)"
 };
-var Slider = React44.forwardRef(
+var Slider = React45.forwardRef(
   function Slider2({
     className,
     label,
@@ -13734,8 +14118,8 @@ var Slider = React44.forwardRef(
       defaultProp: defaultValue,
       onChange: onValueChange
     });
-    const initialValue = React44.useRef(valueProp ?? defaultValue);
-    const rootRef = React44.useRef(null);
+    const initialValue = React45.useRef(valueProp ?? defaultValue);
+    const rootRef = React45.useRef(null);
     useFormReset2(rootRef, () => setValue(initialValue.current), form);
     const mergedRef = useMergedRefs(ref, rootRef);
     const displayValue = (() => {
@@ -14584,13 +14968,15 @@ var Stepper = forwardRef(function Stepper2({ steps, currentStep, orientation = "
 });
 Stepper.displayName = "Stepper";
 var StickyActionBar = forwardRef(
-  function StickyActionBar2({ children, hint, offsetForMobileNav, className, ...props }, ref) {
+  function StickyActionBar2({ children, hint, offsetForMobileNav, mode = "sticky", className, ...props }, ref) {
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
+        "data-mode": mode,
         className: cn(
-          "ds:sticky ds:inset-x-0 ds:z-20 ds:flex ds:flex-wrap ds:items-center ds:gap-3",
+          mode === "fixed" ? "ds:fixed" : "ds:sticky",
+          "ds:inset-x-0 ds:z-20 ds:flex ds:flex-wrap ds:items-center ds:gap-3",
           "ds:border-t ds:border-rule ds:bg-surface/80 ds:px-4 ds:py-3 ds:backdrop-blur-md ds:sm:px-6",
           "ds:supports-[backdrop-filter]:bg-surface/80",
           offsetForMobileNav ? "ds:bottom-[calc(3.5rem_+_env(safe-area-inset-bottom))] ds:sm:bottom-0" : "ds:bottom-0",
@@ -14762,7 +15148,7 @@ var switchThumbVariants = cva(
     }
   }
 );
-var Switch = React44.forwardRef(
+var Switch = React45.forwardRef(
   function Switch2({
     label,
     size,
@@ -14796,8 +15182,8 @@ var Switch = React44.forwardRef(
       defaultProp: defaultChecked ?? false,
       onChange: onCheckedChange
     });
-    const initialChecked = React44.useRef(checkedProp ?? defaultChecked ?? false);
-    const rootRef = React44.useRef(null);
+    const initialChecked = React45.useRef(checkedProp ?? defaultChecked ?? false);
+    const rootRef = React45.useRef(null);
     useFormReset2(rootRef, () => setChecked(initialChecked.current), form);
     const mergedRef = useMergedRefs(ref, rootRef);
     const root = /* @__PURE__ */ jsx(
@@ -14844,16 +15230,53 @@ var Switch = React44.forwardRef(
   }
 );
 Switch.displayName = SwitchPrimitive.Root.displayName;
-var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }, ref) {
+var DEFAULT_TABLE_CONTEXT = { headerStyle: "plain", stickyHeader: false };
+var TableContext = createContext(DEFAULT_TABLE_CONTEXT);
+function useOverflowing(target) {
+  const [overflowing, setOverflowing] = useState(false);
+  useEffect(() => {
+    const element = target.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const measure = () => setOverflowing(
+      element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1
+    );
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    const table = element.firstElementChild;
+    if (table) observer.observe(table);
+    return () => observer.disconnect();
+  }, [target]);
+  return overflowing;
+}
+var Table = forwardRef(function Table2({
+  className,
+  wrapperClassName,
+  classNames,
+  headerStyle = "plain",
+  density,
+  stickyHeader = false,
+  messages: messagesOverride,
+  ...props
+}, ref) {
+  const messages = useDsMessages("table", messagesOverride);
+  const wrapperRef = useRef(null);
+  const overflowing = useOverflowing(wrapperRef);
+  const context = headerStyle === "plain" && !stickyHeader ? DEFAULT_TABLE_CONTEXT : { headerStyle, stickyHeader };
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: wrapperRef,
       ...slot(tableAnatomy, "wrapper"),
+      ...density === void 0 ? {} : { "data-ds-density": density },
+      ...overflowing ? { role: "region", "aria-label": messages.region, tabIndex: 0 } : {},
       className: cn(
         "ds:rounded-card ds:border-rule-strong ds:bg-surface ds:w-full ds:overflow-x-auto ds:border ds:shadow-quiet",
-        wrapperClassName
+        overflowing && "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
+        wrapperClassName,
+        classNames?.wrapper
       ),
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(TableContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
         "table",
         {
           ref,
@@ -14861,7 +15284,7 @@ var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }
           className: cn("ds:w-full ds:caption-bottom ds:border-collapse ds:text-sm", className),
           ...props
         }
-      )
+      ) })
     }
   );
 });
@@ -14909,18 +15332,32 @@ var TableFooter = forwardRef(
   }
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = forwardRef(function TableRow2({ className, ...props }, ref) {
+var TableRow = forwardRef(function TableRow2({ className, selected, interactive = false, onKeyDown, tabIndex, ...props }, ref) {
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
   return /* @__PURE__ */ jsx(
     "tr",
     {
       ref,
       ...slot(tableAnatomy, "row"),
+      ...selected ? { "data-state": "selected" } : {},
+      ...interactive ? { tabIndex: tabIndex ?? 0, onKeyDown: handleKeyDown } : { tabIndex, onKeyDown },
       className: cn(
         "ds:border-rule-soft ds:border-b ds:transition-colors ds:duration-[var(--duration-instant)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
         // G15 compound: selected wins over hover; selected+hover uses the
         // Pro hover tint (not bg-bg-2, which would fight the selection).
         "ds:data-[state=selected]:bg-brand-bg ds:data-[state=selected]:hover:bg-brand-bg-hover",
         "ds:[&:not([data-state=selected])]:hover:bg-surface-hover",
+        // An outline rather than the box-shadow ring: collapsed-border tables
+        // do not paint a row's box-shadow, and an inset outline stays inside
+        // the wrapper's overflow.
+        interactive && "ds:cursor-pointer ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
         className
       ),
       ...props
@@ -14928,12 +15365,64 @@ var TableRow = forwardRef(function TableRow2({ className, ...props }, ref) {
   );
 });
 TableRow.displayName = "TableRow";
-var TableHead = forwardRef(function TableHead2({ className, ...props }, ref) {
+var CELL_DENSITY = "ds:[[data-ds-density]_&]:px-(--table-cell-padding-x) ds:[[data-ds-density]_&]:py-(--table-cell-padding-y) ds:[[data-ds-density]_&:has([role=checkbox])]:pr-0";
+var HEAD_DENSITY = "ds:[[data-ds-density]_&]:h-(--table-row-height) ds:[[data-ds-density]_&]:px-(--table-cell-padding-x) ds:[[data-ds-density]_&]:py-(--table-head-padding-y) ds:[[data-ds-density]_&:has([role=checkbox])]:pr-0";
+var ALIGN_CLASSES = {
+  start: "ds:text-start",
+  center: "ds:text-center",
+  end: "ds:text-end"
+};
+var STICKY_HEADER_Z = "ds:z-[calc(var(--z-base)+1)]";
+var STICKY_CORNER_Z = "ds:z-[calc(var(--z-base)+2)]";
+var STICKY_CLASSES = {
+  start: "ds:sticky ds:start-0 ds:[box-shadow:inset_-1px_0_0_var(--color-rule-soft)]",
+  end: "ds:sticky ds:end-0 ds:[box-shadow:inset_1px_0_0_var(--color-rule-soft)]"
+};
+var STICKY_CELL_SURFACE = "ds:bg-surface ds:[tr:hover>&]:bg-surface-hover ds:[tr[data-state=selected]>&]:bg-brand-bg ds:[tr[data-state=selected]:hover>&]:bg-brand-bg-hover";
+function cellCommon({ align, numeric, truncate, sticky }, stickySurface) {
+  const resolvedAlign = align ?? (numeric ? "end" : void 0);
+  return cn(
+    resolvedAlign && ALIGN_CLASSES[resolvedAlign],
+    numeric && "ds:tabular-nums",
+    truncate && "ds:max-w-0 ds:truncate",
+    sticky && STICKY_CLASSES[sticky],
+    sticky && stickySurface
+  );
+}
+function widthStyle(width, style) {
+  if (width === void 0) return style;
+  return { width, ...style };
+}
+var HEAD_TYPOGRAPHY = {
+  plain: "ds:font-sans ds:text-sm ds:font-medium ds:tracking-normal ds:normal-case ds:text-fg-3",
+  overline: "ds:font-mono ds:text-overline ds:font-medium ds:tracking-[0.14em] ds:uppercase ds:text-fg-4"
+};
+var TableHead = forwardRef(function TableHead2({
+  className,
+  align,
+  numeric,
+  truncate,
+  width,
+  sticky,
+  sort,
+  onSortChange,
+  style,
+  children,
+  ...props
+}, ref) {
+  const { headerStyle, stickyHeader } = useContext(TableContext);
+  const sortable = sort !== void 0;
+  const ariaSort = sortable ? sort === "asc" ? "ascending" : sort === "desc" ? "descending" : "none" : void 0;
+  const handleSort = () => {
+    const next = sort === null ? "asc" : sort === "asc" ? "desc" : null;
+    onSortChange?.(next);
+  };
   return /* @__PURE__ */ jsx(
     "th",
     {
       ref,
       ...slot(tableAnatomy, "head"),
+      ...sortable ? { "aria-sort": ariaSort, ...stateAttributes({ state: sort ?? void 0 }) } : {},
       className: cn(
         // Sentence-case column labels in the body font (Plus Jakarta Sans),
         // quiet gray — not mono uppercase eyebrows.
@@ -14942,14 +15431,52 @@ var TableHead = forwardRef(function TableHead2({ className, ...props }, ref) {
         "ds:text-fg-3 ds:bg-surface-2",
         "ds:border-rule ds:border-b",
         "ds:[&:has([role=checkbox])]:pr-0",
+        HEAD_DENSITY,
+        headerStyle !== "plain" && HEAD_TYPOGRAPHY[headerStyle],
+        // Stuck header cells lose their collapsed border: the rule is an inset shadow.
+        stickyHeader && cn(
+          "ds:sticky ds:top-0 ds:[box-shadow:inset_0_-1px_0_var(--color-rule)]",
+          STICKY_HEADER_Z
+        ),
+        // A head cell that is both a sticky column and in a sticky header is the corner: above both.
+        cellCommon({ align, numeric, truncate, sticky }, STICKY_CORNER_Z),
         className
       ),
-      ...props
+      style: widthStyle(width, style),
+      ...props,
+      children: sortable ? /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          onClick: handleSort,
+          ...slot(tableAnatomy, "sort"),
+          className: cn(
+            "ds:-mx-1 ds:-my-1 ds:inline-flex ds:items-center ds:gap-1 ds:rounded-icon ds:px-1 ds:py-1",
+            HEAD_TYPOGRAPHY[headerStyle],
+            "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
+            "ds:hover:text-fg"
+          ),
+          children: [
+            children,
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                ...slot(tableAnatomy, "sort-indicator"),
+                className: cn(
+                  "ds:text-fg-5 ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+                  sort && "ds:text-fg-3"
+                ),
+                children: sort === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : sort === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ds:size-3", strokeWidth: 2 })
+              }
+            )
+          ]
+        }
+      ) : children
     }
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = forwardRef(function TableCell2({ className, ...props }, ref) {
+var TableCell = forwardRef(function TableCell2({ className, align, numeric, muted, truncate, width, sticky, style, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "td",
     {
@@ -14960,8 +15487,12 @@ var TableCell = forwardRef(function TableCell2({ className, ...props }, ref) {
         // rhythm (py-3) for the taller rows in the catalog layout.
         "ds:text-fg-2 ds:px-4 ds:py-3 ds:align-middle ds:text-[13px] ds:tabular-nums",
         "ds:[&:has([role=checkbox])]:pr-0",
+        CELL_DENSITY,
+        muted && "ds:text-fg-3",
+        cellCommon({ align, numeric, truncate, sticky }, STICKY_CELL_SURFACE),
         className
       ),
+      style: widthStyle(width, style),
       ...props
     }
   );
@@ -14981,13 +15512,13 @@ var TableCaption = forwardRef(
   }
 );
 TableCaption.displayName = "TableCaption";
-var Tabs = React44.forwardRef(
+var Tabs = React45.forwardRef(
   function Tabs2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, className: cn(className), ...props });
   }
 );
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React44.forwardRef(function TabsList2({ className, ...props }, ref) {
+var TabsList = React45.forwardRef(function TabsList2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
@@ -15032,7 +15563,7 @@ var triggerVariants = cva(
     }
   }
 );
-var TabsTrigger = React44.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
+var TabsTrigger = React45.forwardRef(function TabsTrigger2({ className, variant, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
@@ -15043,7 +15574,7 @@ var TabsTrigger = React44.forwardRef(function TabsTrigger2({ className, variant,
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React44.forwardRef(function TabsContent2({ className, ...props }, ref) {
+var TabsContent = React45.forwardRef(function TabsContent2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Content,
     {
@@ -15068,7 +15599,7 @@ function TeamMemberSelect({
   placeholder = "Select team member...",
   className
 }) {
-  const options = React44.useMemo(() => {
+  const options = React45.useMemo(() => {
     const meBadge = /* @__PURE__ */ jsx(
       Badge,
       {
@@ -15716,11 +16247,11 @@ var sizedItemVariants = cva(
     }
   }
 );
-var ToggleGroupContext = React44.createContext({
+var ToggleGroupContext = React45.createContext({
   variant: "default",
   size: void 0
 });
-var ToggleGroup = React44.forwardRef(function ToggleGroup2({
+var ToggleGroup = React45.forwardRef(function ToggleGroup2({
   className,
   variant,
   size,
@@ -15762,11 +16293,11 @@ var ToggleGroup = React44.forwardRef(function ToggleGroup2({
     defaultProp: defaultValue ?? emptyValue,
     onChange: onValueChange
   });
-  const initialValue = React44.useRef(valueProp ?? defaultValue ?? emptyValue);
-  const rootRef = React44.useRef(null);
+  const initialValue = React45.useRef(valueProp ?? defaultValue ?? emptyValue);
+  const rootRef = React45.useRef(null);
   const mergedRef = useMergedRefs(ref, rootRef);
   const labelledBy = wiring["aria-labelledby"] ?? (fieldset?.legendMounted ? fieldset.legendId : void 0);
-  const context = React44.useMemo(() => ({ variant, size }), [variant, size]);
+  const context = React45.useMemo(() => ({ variant, size }), [variant, size]);
   const radixProps = {
     ...props,
     type,
@@ -15806,8 +16337,8 @@ var ToggleGroup = React44.forwardRef(function ToggleGroup2({
   ] });
 });
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React44.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
-  const ctx = React44.useContext(ToggleGroupContext);
+var ToggleGroupItem = React45.forwardRef(function ToggleGroupItem2({ className, variant, ...props }, ref) {
+  const ctx = React45.useContext(ToggleGroupContext);
   const resolvedVariant = variant ?? ctx.variant;
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
@@ -15954,7 +16485,7 @@ function IntentBadge({ tone = "muted", icon, children, className, ...props }) {
   );
 }
 IntentBadge.displayName = "IntentBadge";
-var SIZE_CLASS = {
+var SIZE_CLASS2 = {
   display: "ds:text-display",
   "title-page": "ds:text-title-page",
   "title-section": "ds:text-title-section",
@@ -15993,7 +16524,7 @@ var Text = forwardRef(function Text2({ size = "body", color, weight, numeric, tr
       ref,
       ...slot(textAnatomy, "root"),
       className: cn(
-        SIZE_CLASS[size],
+        SIZE_CLASS2[size],
         color && COLOR_CLASS[color],
         weight && WEIGHT_CLASS[weight],
         numeric && "ds:numeric",
@@ -16005,33 +16536,6 @@ var Text = forwardRef(function Text2({ size = "body", color, weight, numeric, tr
   );
 });
 Text.displayName = "Text";
-var DEFAULT_SIZE = {
-  1: "title-page",
-  2: "title-section",
-  3: "title-sub",
-  4: "title-sub",
-  5: "title-sub",
-  6: "title-sub"
-};
-var SIZE_CLASS2 = {
-  display: "ds:text-display",
-  "title-page": "ds:text-title-page",
-  "title-section": "ds:text-title-section",
-  "title-sub": "ds:text-title-sub"
-};
-var Heading = forwardRef(function Heading2({ level, size, className, ...props }, ref) {
-  const Tag = `h${level}`;
-  return /* @__PURE__ */ jsx(
-    Tag,
-    {
-      ref,
-      ...slot(headingAnatomy, "root"),
-      className: cn("ds:font-display ds:text-fg", SIZE_CLASS2[size ?? DEFAULT_SIZE[level]], className),
-      ...props
-    }
-  );
-});
-Heading.displayName = "Heading";
 
 // src/primitives/layout/responsive.ts
 var GAP = {
@@ -16284,6 +16788,424 @@ var FieldsetLegend = forwardRef(
     );
   }
 );
+var DEFAULT_PAGE_SIZE = 15;
+var EMPTY_RECORD = Object.freeze({});
+var EMPTY_LIST = Object.freeze([]);
+function defaultGetRowId(row, index) {
+  const id = row?.id;
+  return typeof id === "string" || typeof id === "number" ? String(id) : String(index);
+}
+function readAccessor(row, column) {
+  const accessor = column.accessor;
+  if (typeof accessor === "function") return accessor(row);
+  if (accessor !== void 0) return row[accessor];
+  return row[column.id];
+}
+function toText(value) {
+  if (value == null) return "";
+  if (value instanceof Date) return value.toISOString();
+  return typeof value === "object" ? "" : String(value);
+}
+function compareSortValues(a, b, direction) {
+  const dir = direction === "asc" ? 1 : -1;
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  const av = normaliseSortValue(a);
+  const bv = normaliseSortValue(b);
+  return av < bv ? -dir : av > bv ? dir : 0;
+}
+function normaliseSortValue(value) {
+  if (typeof value === "string") return value.toLowerCase();
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === "boolean") return value ? 1 : 0;
+  return value;
+}
+function filterValues(value) {
+  if (value == null || value === "") return EMPTY_LIST;
+  return typeof value === "string" ? [value] : value;
+}
+function nextSortDirection(current) {
+  return current === null ? "asc" : current === "asc" ? "desc" : null;
+}
+function useDataTable(options) {
+  const {
+    data,
+    columns: allColumns,
+    filterDefinitions = EMPTY_LIST,
+    getRowId = defaultGetRowId,
+    isRowSelectable,
+    manual = false,
+    onSelectAllMatching,
+    resetPageOnChange = true
+  } = options;
+  const id = useId4(options.id, "ds-table");
+  const [sorting, setSortingState] = useSlice(
+    options.sorting,
+    options.state?.sorting,
+    options.defaultSorting,
+    options.defaultState?.sorting,
+    null
+  );
+  const [pagination, setPaginationState] = useSlice(
+    options.pagination,
+    options.state?.pagination,
+    options.defaultPagination ? {
+      page: options.defaultPagination.page ?? 1,
+      pageSize: options.defaultPagination.pageSize ?? DEFAULT_PAGE_SIZE
+    } : void 0,
+    options.defaultState?.pagination,
+    { page: 1, pageSize: DEFAULT_PAGE_SIZE }
+  );
+  const [search, setSearchState] = useSlice(
+    options.search,
+    options.state?.search,
+    options.defaultSearch,
+    options.defaultState?.search,
+    ""
+  );
+  const [selection, setSelectionState] = useSlice(
+    options.selection,
+    options.state?.selection,
+    options.defaultSelection,
+    options.defaultState?.selection,
+    EMPTY_LIST
+  );
+  const [columnVisibility, setColumnVisibilityState] = useSlice(
+    options.columnVisibility,
+    options.state?.columnVisibility,
+    options.defaultColumnVisibility,
+    options.defaultState?.columnVisibility,
+    EMPTY_RECORD
+  );
+  const [filters, setFiltersState] = useSlice(
+    options.filters,
+    options.state?.filters,
+    options.defaultFilters,
+    options.defaultState?.filters,
+    EMPTY_RECORD
+  );
+  const state = useMemo(
+    () => ({ sorting, pagination, search, selection, columnVisibility, filters }),
+    [sorting, pagination, search, selection, columnVisibility, filters]
+  );
+  const latest = useRef({ state, options });
+  latest.current = { state, options };
+  const commit = useCallback(
+    (patch) => {
+      const { state: current, options: opts } = latest.current;
+      const next = { ...current, ...patch };
+      let changed = false;
+      if ("sorting" in patch && !Object.is(patch.sorting, current.sorting)) {
+        changed = true;
+        setSortingState(next.sorting);
+        opts.onSortingChange?.(next.sorting);
+      }
+      if ("pagination" in patch && !Object.is(patch.pagination, current.pagination)) {
+        changed = true;
+        setPaginationState(next.pagination);
+        opts.onPaginationChange?.(next.pagination);
+      }
+      if ("search" in patch && !Object.is(patch.search, current.search)) {
+        changed = true;
+        setSearchState(next.search);
+        opts.onSearchChange?.(next.search);
+      }
+      if ("selection" in patch && !Object.is(patch.selection, current.selection)) {
+        changed = true;
+        setSelectionState(next.selection);
+        opts.onSelectionChange?.(next.selection);
+      }
+      if ("columnVisibility" in patch && !Object.is(patch.columnVisibility, current.columnVisibility)) {
+        changed = true;
+        setColumnVisibilityState(next.columnVisibility);
+        opts.onColumnVisibilityChange?.(next.columnVisibility);
+      }
+      if ("filters" in patch && !Object.is(patch.filters, current.filters)) {
+        changed = true;
+        setFiltersState(next.filters);
+        opts.onFiltersChange?.(next.filters);
+      }
+      if (changed) {
+        latest.current = { state: next, options: opts };
+        opts.onStateChange?.(next);
+      }
+    },
+    [
+      setSortingState,
+      setPaginationState,
+      setSearchState,
+      setSelectionState,
+      setColumnVisibilityState,
+      setFiltersState
+    ]
+  );
+  const firstPage = useCallback(
+    (current) => resetPageOnChange && current.page !== 1 ? { pagination: { ...current, page: 1 } } : {},
+    [resetPageOnChange]
+  );
+  const columns = useMemo(
+    () => allColumns.filter((column) => columnVisibility[column.id] !== false),
+    [allColumns, columnVisibility]
+  );
+  const getCellValue = useCallback(
+    (row, column) => readAccessor(row, column),
+    []
+  );
+  const matching = useMemo(() => {
+    if (manual) return data;
+    const query = search.trim().toLowerCase();
+    const activeFilters = filterDefinitions.map((definition) => ({ definition, values: filterValues(filters[definition.id]) })).filter(({ values }) => values.length > 0);
+    const searched = query ? allColumns.filter(
+      (column) => column.searchable !== false && (column.searchText !== void 0 || column.accessor !== void 0 || column.id in (data[0] ?? {}))
+    ) : [];
+    let rows2 = data.filter((row) => {
+      for (const { definition, values } of activeFilters) {
+        if (!values.some((value) => definition.match(row, value))) return false;
+      }
+      if (query) {
+        const hit = searched.some(
+          (column) => (column.searchText ? column.searchText(row) : toText(readAccessor(row, column))).toLowerCase().includes(query)
+        );
+        if (!hit) return false;
+      }
+      return true;
+    });
+    if (sorting) {
+      const column = allColumns.find((c) => c.id === sorting.columnId);
+      if (column) {
+        const sortValue = column.sortValue ?? ((row) => readAccessor(row, column));
+        rows2 = [...rows2].sort(
+          (a, b) => compareSortValues(sortValue(a), sortValue(b), sorting.direction)
+        );
+      }
+    }
+    return rows2;
+  }, [manual, data, allColumns, filterDefinitions, filters, search, sorting]);
+  const rowCount = manual ? options.rowCount ?? data.length : matching.length;
+  const pageSize = Math.max(1, pagination.pageSize);
+  const pageCount = Math.max(1, Math.ceil(rowCount / pageSize));
+  const page = Math.min(Math.max(1, pagination.page), pageCount);
+  const pageRows = useMemo(
+    () => manual ? matching : matching.slice((page - 1) * pageSize, page * pageSize),
+    [manual, matching, page, pageSize]
+  );
+  const selectedSet = useMemo(() => new Set(selection), [selection]);
+  const rowIds = useMemo(() => {
+    const ids = /* @__PURE__ */ new Map();
+    data.forEach((row, index) => ids.set(row, getRowId(row, index)));
+    return ids;
+  }, [data, getRowId]);
+  const idOf = useCallback(
+    (row) => rowIds.get(row) ?? getRowId(row, data.indexOf(row)),
+    [rowIds, getRowId, data]
+  );
+  const rows = useMemo(
+    () => pageRows.map((row, index) => {
+      const rowId = idOf(row);
+      return {
+        id: rowId,
+        row,
+        index,
+        selected: selectedSet.has(rowId),
+        selectable: isRowSelectable ? isRowSelectable(row) : true
+      };
+    }),
+    [pageRows, idOf, isRowSelectable, selectedSet]
+  );
+  const renderCell = useCallback(
+    (model, column) => {
+      const value = readAccessor(model.row, column);
+      return column.cell ? column.cell(model.row, { value, rowId: model.id, index: model.index }) : toText(value);
+    },
+    []
+  );
+  const getColumnId = useCallback((columnId) => `${id}-col-${columnId}`, [id]);
+  const getRowDomId = useCallback((rowId) => `${id}-row-${rowId}`, [id]);
+  const sortingApi = useMemo(() => {
+    const getDirection = (columnId) => sorting?.columnId === columnId ? sorting.direction : null;
+    return {
+      value: sorting,
+      set: (next) => commit({ sorting: next }),
+      getDirection,
+      toggle: (columnId) => {
+        const direction = nextSortDirection(getDirection(columnId));
+        commit({ sorting: direction ? { columnId, direction } : null });
+      },
+      getAriaSort: (columnId) => {
+        const column = allColumns.find((c) => c.id === columnId);
+        if (!column?.sortable) return void 0;
+        const direction = getDirection(columnId);
+        return direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none";
+      }
+    };
+  }, [sorting, allColumns, commit]);
+  const paginationApi = useMemo(() => {
+    const setPage = (next) => commit({ pagination: { page: Math.min(Math.max(1, next), pageCount), pageSize } });
+    return {
+      page,
+      pageSize,
+      pageCount,
+      rowCount,
+      rangeStart: rowCount === 0 ? 0 : (page - 1) * pageSize + 1,
+      rangeEnd: rowCount === 0 ? 0 : Math.min(page * pageSize, rowCount),
+      canPreviousPage: page > 1,
+      canNextPage: page < pageCount,
+      set: (next) => commit({ pagination: next }),
+      setPage,
+      setPageSize: (next) => commit({ pagination: { page: 1, pageSize: Math.max(1, next) } }),
+      nextPage: () => setPage(page + 1),
+      previousPage: () => setPage(page - 1)
+    };
+  }, [page, pageSize, pageCount, rowCount, commit]);
+  const searchApi = useMemo(
+    () => ({
+      value: search,
+      set: (next) => commit({ search: next, ...firstPage(latest.current.state.pagination) }),
+      clear: () => commit({ search: "", ...firstPage(latest.current.state.pagination) })
+    }),
+    [search, commit, firstPage]
+  );
+  const selectionApi = useMemo(() => {
+    const selectableOnPage = rows.filter((r) => r.selectable).map((r) => r.id);
+    const selectedOnPage = selectableOnPage.filter((rowId) => selectedSet.has(rowId));
+    const allPageSelected = selectableOnPage.length > 0 && selectedOnPage.length === selectableOnPage.length;
+    const somePageSelected = selectedOnPage.length > 0 && !allPageSelected;
+    const set = (next) => commit({ selection: next });
+    const add = (ids) => {
+      const current = latest.current.state.selection;
+      const seen = new Set(current);
+      const added = ids.filter((rowId) => !seen.has(rowId));
+      if (added.length > 0) set([...current, ...added]);
+    };
+    const remove = (ids) => {
+      const drop = new Set(ids);
+      const current = latest.current.state.selection;
+      const kept = current.filter((rowId) => !drop.has(rowId));
+      if (kept.length !== current.length) set(kept);
+    };
+    const selectPage = () => add(selectableOnPage);
+    const deselectPage = () => remove(selectableOnPage);
+    return {
+      value: selection,
+      count: selection.length,
+      isSelected: (rowId) => selectedSet.has(rowId),
+      set,
+      select: (rowId) => add([rowId]),
+      deselect: (rowId) => remove([rowId]),
+      toggle: (rowId) => selectedSet.has(rowId) ? remove([rowId]) : add([rowId]),
+      clear: () => {
+        if (latest.current.state.selection.length > 0) set(EMPTY_LIST);
+      },
+      allPageSelected,
+      somePageSelected,
+      selectPage,
+      deselectPage,
+      togglePage: () => allPageSelected ? deselectPage() : selectPage(),
+      selectAllMatching: () => {
+        if (manual) {
+          onSelectAllMatching?.(latest.current.state);
+          return;
+        }
+        add(
+          matching.filter((row) => isRowSelectable ? isRowSelectable(row) : true).map((row) => idOf(row))
+        );
+      }
+    };
+  }, [
+    rows,
+    selection,
+    selectedSet,
+    commit,
+    manual,
+    onSelectAllMatching,
+    matching,
+    idOf,
+    isRowSelectable
+  ]);
+  const columnVisibilityApi = useMemo(() => {
+    const setVisible = (columnId, visible) => {
+      const current = latest.current.state.columnVisibility;
+      if (current[columnId] !== false === visible) return;
+      const next = { ...current };
+      if (visible) delete next[columnId];
+      else next[columnId] = false;
+      commit({ columnVisibility: next });
+    };
+    return {
+      value: columnVisibility,
+      isVisible: (columnId) => columnVisibility[columnId] !== false,
+      set: (next) => commit({ columnVisibility: next }),
+      setVisible,
+      toggle: (columnId) => setVisible(columnId, columnVisibility[columnId] === false),
+      reset: () => {
+        if (Object.keys(latest.current.state.columnVisibility).length > 0) {
+          commit({ columnVisibility: EMPTY_RECORD });
+        }
+      }
+    };
+  }, [columnVisibility, commit]);
+  const filtersApi = useMemo(() => {
+    const set = (filterId, value) => {
+      const { state: current } = latest.current;
+      const next = { ...current.filters };
+      if (filterValues(value).length === 0) delete next[filterId];
+      else next[filterId] = value;
+      commit({ filters: next, ...firstPage(current.pagination) });
+    };
+    return {
+      value: filters,
+      definitions: filterDefinitions,
+      get: (filterId) => {
+        const value = filters[filterId];
+        return filterValues(value).length === 0 ? null : value;
+      },
+      set,
+      clear: (filterId) => set(filterId, null),
+      clearAll: () => {
+        const { state: current } = latest.current;
+        if (Object.keys(current.filters).length > 0) {
+          commit({ filters: EMPTY_RECORD, ...firstPage(current.pagination) });
+        }
+      },
+      activeCount: Object.values(filters).filter((value) => filterValues(value).length > 0).length
+    };
+  }, [filters, filterDefinitions, commit, firstPage]);
+  return {
+    id,
+    manual,
+    state,
+    allColumns,
+    columns,
+    rows,
+    matchingRows: matching,
+    getCellValue,
+    renderCell,
+    getColumnId,
+    getRowDomId,
+    sorting: sortingApi,
+    pagination: paginationApi,
+    search: searchApi,
+    selection: selectionApi,
+    columnVisibility: columnVisibilityApi,
+    filters: filtersApi
+  };
+}
+function useSlice(prop, stateProp, defaultProp, defaultStateProp, fallback) {
+  const controlled = prop !== void 0 ? prop : stateProp;
+  const [uncontrolled, setUncontrolled] = useState(
+    defaultProp !== void 0 ? defaultProp : defaultStateProp !== void 0 ? defaultStateProp : fallback
+  );
+  const value = controlled !== void 0 ? controlled : uncontrolled;
+  const isControlled = controlled !== void 0;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled, setUncontrolled]
+  );
+  return [value, setValue];
+}
 function MultiSelect(props) {
   return /* @__PURE__ */ jsx(Combobox, { ...props, multiple: true });
 }
@@ -19089,7 +20011,7 @@ function MetaText({
   if (presentValues.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(React44.Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className, children: presentValues.map((value, index) => /* @__PURE__ */ jsxs(React45.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(
       "span",
       {
@@ -19167,7 +20089,7 @@ function MoreActions({ menu }) {
     /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", onClick: (event) => event.stopPropagation(), children: menu })
   ] });
 }
-var DocumentFileRow = React44.forwardRef(
+var DocumentFileRow = React45.forwardRef(
   function DocumentFileRow2({
     name,
     fileType,
@@ -19234,7 +20156,7 @@ var DocumentFileRow = React44.forwardRef(
   }
 );
 DocumentFileRow.displayName = "DocumentFileRow";
-var DocumentFileCard = React44.forwardRef(
+var DocumentFileCard = React45.forwardRef(
   function DocumentFileCard2({
     name,
     fileType,
@@ -19310,7 +20232,7 @@ var lineCaptionToneClass = {
   warning: "ds:text-warning-fg",
   danger: "ds:text-danger-fg"
 };
-var DocumentFileLine = React44.forwardRef(
+var DocumentFileLine = React45.forwardRef(
   function DocumentFileLine2({
     name,
     fileType = "",
@@ -19484,7 +20406,7 @@ function FileGroup({ files }) {
     file.id
   )) });
 }
-var DocumentChecklist = React44.forwardRef(
+var DocumentChecklist = React45.forwardRef(
   function DocumentChecklist2({
     items,
     title = "Your documents",
@@ -19734,6 +20656,58 @@ var NewMenu = forwardRef(function NewMenu2({ actions, groups, triggerLabel = "Ne
   ] });
 });
 NewMenu.displayName = "NewMenu";
+function SegmentedControl({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  variant,
+  size,
+  name,
+  form,
+  required,
+  disabled,
+  allowDeselect = false,
+  className,
+  itemClassName,
+  ...aria
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup,
+    {
+      type: "single",
+      value,
+      defaultValue,
+      onValueChange: (next) => {
+        if (!next && !allowDeselect) return;
+        onValueChange?.(next);
+      },
+      variant,
+      size,
+      name,
+      form,
+      required,
+      disabled,
+      "aria-label": aria["aria-label"],
+      "aria-labelledby": aria["aria-labelledby"],
+      className: cn("ds:bg-bg-2 ds:rounded-pill ds:p-0.5", className),
+      children: options.map((option) => /* @__PURE__ */ jsxs(
+        ToggleGroupItem,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          className: itemClassName,
+          children: [
+            option.icon,
+            option.label,
+            option.count != null && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:ms-1.5 ds:text-xs ds:font-medium ds:tabular-nums", children: option.count })
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+}
 var Shell = forwardRef(function Shell2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -19758,7 +20732,7 @@ var Main = forwardRef(function Main2({ className, ...props }, ref) {
   );
 });
 Main.displayName = "Main";
-var Content14 = forwardRef(function Content15({ padTop, padBottom, className, style, ...props }, ref) {
+var Content14 = forwardRef(function Content15({ padding = "default", padTop, padBottom, className, style, ...props }, ref) {
   const messages = useDsMessages("shell");
   const paddingStyle = padTop || padBottom ? {
     ...padTop ? { paddingTop: padTop } : null,
@@ -19773,14 +20747,19 @@ var Content14 = forwardRef(function Content15({ padTop, padBottom, className, st
       "aria-label": messages.content,
       tabIndex: 0,
       ...slot(shellAnatomy, "content"),
-      className: cn("ds:flex-1 ds:overflow-y-auto ds:p-[var(--content-pad)]", className),
+      "data-padding": padding === "none" ? "none" : void 0,
+      className: cn(
+        "ds:flex-1 ds:overflow-y-auto",
+        padding === "none" ? "ds:p-0" : "ds:p-[var(--content-pad)]",
+        className
+      ),
       style: paddingStyle,
       ...props
     }
   );
 });
 Content14.displayName = "Content";
-var SidebarContext = React44.createContext(null);
+var SidebarContext = React45.createContext(null);
 var NOOP_CONTEXT = {
   state: "expanded",
   setState: () => {
@@ -19793,53 +20772,66 @@ var NOOP_CONTEXT = {
   }
 };
 function useSidebarState() {
-  return React44.useContext(SidebarContext) ?? NOOP_CONTEXT;
+  return React45.useContext(SidebarContext) ?? NOOP_CONTEXT;
 }
 var DEFAULT_SHORTCUT = "Mod+\\";
-function readStorage(key) {
-  if (!key || typeof window === "undefined") return null;
+var asState = (value) => value === "rail" || value === "expanded" ? value : null;
+function readStorage(key, storage) {
+  if (!key || typeof document === "undefined") return null;
   try {
-    const v = window.localStorage.getItem(key);
-    return v === "rail" || v === "expanded" ? v : null;
+    if (storage === "cookie") {
+      const match = document.cookie.match(
+        new RegExp(`(?:^|;\\s*)${key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}=([^;]*)`)
+      );
+      return asState(match ? decodeURIComponent(match[1]) : null);
+    }
+    return asState(window.localStorage.getItem(key));
   } catch {
     return null;
   }
 }
+function writeStorage(key, storage, next) {
+  if (typeof document === "undefined") return;
+  try {
+    if (storage === "cookie") {
+      document.cookie = `${key}=${next}; path=/; max-age=31536000; samesite=lax`;
+      return;
+    }
+    window.localStorage.setItem(key, next);
+  } catch {
+  }
+}
 function SidebarProvider({
   children,
   state: controlled,
   defaultState = "expanded",
   onStateChange,
   storageKey,
+  storage = "localStorage",
   shortcut = DEFAULT_SHORTCUT
 }) {
-  const [uncontrolled, setUncontrolled] = React44.useState(
+  const [uncontrolled, setUncontrolled] = React45.useState(
     controlled ?? defaultState
   );
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (controlled !== void 0) return;
-    const stored = readStorage(storageKey);
+    const stored = readStorage(storageKey, storage);
     if (stored && stored !== uncontrolled) setUncontrolled(stored);
   }, []);
   const state = controlled ?? uncontrolled;
-  const setState = React44.useCallback(
+  const setState = React45.useCallback(
     (next) => {
       if (controlled === void 0) setUncontrolled(next);
       onStateChange?.(next);
-      if (storageKey && typeof window !== "undefined") {
-        try {
-          window.localStorage.setItem(storageKey, next);
-        } catch {
-        }
-      }
+      if (storageKey) writeStorage(storageKey, storage, next);
     },
-    [controlled, onStateChange, storageKey]
+    [controlled, onStateChange, storageKey, storage]
   );
-  const toggle = React44.useCallback(() => {
+  const toggle = React45.useCallback(() => {
     setState(state === "expanded" ? "rail" : "expanded");
   }, [state, setState]);
-  const [peekLockCount, setPeekLockCount] = React44.useState(0);
-  const acquirePeekLock = React44.useCallback(() => {
+  const [peekLockCount, setPeekLockCount] = React45.useState(0);
+  const acquirePeekLock = React45.useCallback(() => {
     setPeekLockCount((n) => n + 1);
     let released = false;
     return () => {
@@ -19848,7 +20840,7 @@ function SidebarProvider({
       setPeekLockCount((n) => Math.max(0, n - 1));
     };
   }, []);
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     if (!shortcut) return;
     const parts = shortcut.split("+");
     const key = parts.pop() ?? "";
@@ -19868,7 +20860,7 @@ function SidebarProvider({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [shortcut, toggle]);
-  const value = React44.useMemo(
+  const value = React45.useMemo(
     () => ({ state, setState, toggle, collapsible: true, peekLockCount, acquirePeekLock }),
     [state, setState, toggle, peekLockCount, acquirePeekLock]
   );
@@ -19877,9 +20869,12 @@ function SidebarProvider({
 SidebarProvider.displayName = "SidebarProvider";
 var PEEK_ENTER_DELAY_MS = 100;
 var PEEK_LEAVE_DELAY_MS = 200;
-var SidebarLabelsHiddenContext = React44.createContext(false);
-var SidebarPeekEnabledContext = React44.createContext(true);
-var Sidebar = React44.forwardRef(function Sidebar2({
+var SidebarLabelsHiddenContext = React45.createContext(false);
+var SidebarPeekEnabledContext = React45.createContext(true);
+function useCollapsedAttribute() {
+  return React45.useContext(SidebarLabelsHiddenContext) ? { "data-collapsed": "true" } : {};
+}
+var Sidebar = React45.forwardRef(function Sidebar2({
   className,
   collapsible = false,
   variant = "classic",
@@ -19891,13 +20886,13 @@ var Sidebar = React44.forwardRef(function Sidebar2({
   ...props
 }, ref) {
   const isFloating = variant === "floating";
-  const ctx = React44.useContext(SidebarContext);
+  const ctx = React45.useContext(SidebarContext);
   const state = collapsible && ctx ? ctx.state : "expanded";
   const peekLockCount = collapsible && ctx && peekEnabled ? ctx.peekLockCount : 0;
-  const [peek, setPeek] = React44.useState(false);
-  const enterTimer = React44.useRef(null);
-  const leaveTimer = React44.useRef(null);
-  const clearTimers = React44.useCallback(() => {
+  const [peek, setPeek] = React45.useState(false);
+  const enterTimer = React45.useRef(null);
+  const leaveTimer = React45.useRef(null);
+  const clearTimers = React45.useCallback(() => {
     if (enterTimer.current != null) {
       window.clearTimeout(enterTimer.current);
       enterTimer.current = null;
@@ -19907,8 +20902,8 @@ var Sidebar = React44.forwardRef(function Sidebar2({
       leaveTimer.current = null;
     }
   }, []);
-  React44.useEffect(() => () => clearTimers(), [clearTimers]);
-  React44.useEffect(() => {
+  React45.useEffect(() => () => clearTimers(), [clearTimers]);
+  React45.useEffect(() => {
     if (state === "expanded") {
       clearTimers();
       setPeek(false);
@@ -19993,7 +20988,7 @@ var Sidebar = React44.forwardRef(function Sidebar2({
   );
 });
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React44.forwardRef(
+var SidebarTrigger = React45.forwardRef(
   function SidebarTrigger2({
     className,
     expandLabel,
@@ -20002,7 +20997,7 @@ var SidebarTrigger = React44.forwardRef(
     ...props
   }, ref) {
     const messages = useDsMessages("sidebar");
-    const ctx = React44.useContext(SidebarContext);
+    const ctx = React45.useContext(SidebarContext);
     if (!ctx) return null;
     const { state, toggle } = ctx;
     const label = state === "expanded" ? collapseLabel ?? messages.collapse : expandLabel ?? messages.expand;
@@ -20034,14 +21029,14 @@ var SidebarTrigger = React44.forwardRef(
 );
 SidebarTrigger.displayName = "SidebarTrigger";
 function useSidebarPeekLock(active) {
-  const ctx = React44.useContext(SidebarContext);
-  React44.useEffect(() => {
+  const ctx = React45.useContext(SidebarContext);
+  React45.useEffect(() => {
     if (!active || !ctx) return;
     const release = ctx.acquirePeekLock();
     return release;
   }, [active, ctx]);
 }
-var SidebarPinButton = React44.forwardRef(
+var SidebarPinButton = React45.forwardRef(
   function SidebarPinButton2({
     pinLabel,
     unpinLabel,
@@ -20050,7 +21045,7 @@ var SidebarPinButton = React44.forwardRef(
     ...props
   }, ref) {
     const messages = useDsMessages("sidebar");
-    const ctx = React44.useContext(SidebarContext);
+    const ctx = React45.useContext(SidebarContext);
     if (!ctx || !ctx.collapsible) return null;
     const { state, setState } = ctx;
     const isPinned = state === "expanded";
@@ -20117,7 +21112,7 @@ function PinGlyph({
     }
   );
 }
-var SidebarBrand = React44.forwardRef(
+var SidebarBrand = React45.forwardRef(
   function SidebarBrand2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -20134,14 +21129,16 @@ var SidebarBrand = React44.forwardRef(
   }
 );
 SidebarBrand.displayName = "SidebarBrand";
-var SidebarBrandText = React44.forwardRef(
+var SidebarBrandText = React45.forwardRef(
   function SidebarBrandText2({ className, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
         "aria-hidden": "false",
         ...slot(sidebarAnatomy, "brand-text"),
+        ...collapsed,
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word wordmarks clip at a
           // word boundary instead of mid-word when the rail is narrow.
@@ -20160,16 +21157,17 @@ var SidebarBrandText = React44.forwardRef(
   }
 );
 SidebarBrandText.displayName = "SidebarBrandText";
-var SidebarGroupScopeContext = React44.createContext(null);
-var SidebarSection = React44.forwardRef(
-  function SidebarSection2({ label, tone = "pro", className, children, ...props }, ref) {
+var SidebarGroupScopeContext = React45.createContext(null);
+var SidebarSection = React45.forwardRef(
+  function SidebarSection2({ label, tone = "pro", headerActions, className, children, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
     const ariaLabel = typeof label === "string" ? label : typeof label === "number" ? String(label) : void 0;
-    const [exclusiveId, setExclusiveIdState] = React44.useState(null);
-    const setExclusive = React44.useCallback(
+    const [exclusiveId, setExclusiveIdState] = React45.useState(null);
+    const setExclusive = React45.useCallback(
       (id) => setExclusiveIdState(id),
       []
     );
-    const scope = React44.useMemo(
+    const scope = React45.useMemo(
       () => ({ exclusiveId, setExclusive }),
       [exclusiveId, setExclusive]
     );
@@ -20180,6 +21178,7 @@ var SidebarSection = React44.forwardRef(
         role: ariaLabel ? "group" : void 0,
         "aria-label": ariaLabel,
         ...slot(sidebarAnatomy, "section"),
+        ...collapsed,
         className: cn(
           "ds:mb-4",
           // In rail, the visible section labels disappear and the only
@@ -20191,27 +21190,31 @@ var SidebarSection = React44.forwardRef(
         ),
         ...props,
         children: [
-          label != null && /* @__PURE__ */ jsx(
+          (label != null || headerActions != null) && /* @__PURE__ */ jsxs(
             "div",
             {
               ...slot(sidebarAnatomy, "section-header"),
+              ...collapsed,
               className: cn(
                 "ds:mb-1 ds:flex ds:items-center ds:justify-between ds:px-2.5 ds:py-1",
                 "ds:transition-opacity ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
                 "ds:opacity-100",
                 "ds:group-data-[labels=hide]/sidebar:invisible ds:group-data-[labels=hide]/sidebar:opacity-0"
               ),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  ...slot(sidebarAnatomy, "section-label"),
-                  className: cn(
-                    "ds:font-mono ds:text-[11px] ds:tracking-[0.14em] ds:uppercase",
-                    tone === "muted" ? "ds:text-fg-3" : "ds:text-brand"
-                  ),
-                  children: label
-                }
-              )
+              children: [
+                label != null && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...slot(sidebarAnatomy, "section-label"),
+                    className: cn(
+                      "ds:font-mono ds:text-[11px] ds:tracking-[0.14em] ds:uppercase",
+                      tone === "muted" ? "ds:text-fg-3" : "ds:text-brand"
+                    ),
+                    children: label
+                  }
+                ),
+                headerActions
+              ]
             }
           ),
           children
@@ -20225,17 +21228,17 @@ function getTextContent(node) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(getTextContent).filter(Boolean).join(" ");
-  if (React44.isValidElement(node)) {
+  if (React45.isValidElement(node)) {
     return getTextContent(node.props.children);
   }
   return "";
 }
-var SidebarLink = React44.forwardRef(
+var SidebarLink = React45.forwardRef(
   function SidebarLink2({ href, icon, active = false, asChild, className, children, "aria-label": ariaLabel, ...props }, ref) {
     const Comp = asChild ? Slot : "a";
     const accessibleLabel = ariaLabel ?? (asChild ? void 0 : getTextContent(children) || void 0);
-    const labelsHidden = React44.useContext(SidebarLabelsHiddenContext);
-    const peekEnabled = React44.useContext(SidebarPeekEnabledContext);
+    const labelsHidden = React45.useContext(SidebarLabelsHiddenContext);
+    const peekEnabled = React45.useContext(SidebarPeekEnabledContext);
     const tooltipLabel = ariaLabel ?? (getTextContent(children) || void 0);
     const showTooltip = labelsHidden && !peekEnabled && Boolean(tooltipLabel);
     const link = /* @__PURE__ */ jsx(
@@ -20287,6 +21290,7 @@ var SidebarLink = React44.forwardRef(
             "span",
             {
               ...slot(sidebarAnatomy, "link-label"),
+              ...labelsHidden ? { "data-collapsed": "true" } : {},
               className: cn(
                 // Flex row so a trailing <SidebarLinkBadge> (ml-auto) aligns
                 // to the right edge with a gap from the label, instead of
@@ -20312,13 +21316,15 @@ var SidebarLink = React44.forwardRef(
   }
 );
 SidebarLink.displayName = "SidebarLink";
-var SidebarLinkLabel = React44.forwardRef(
+var SidebarLinkLabel = React45.forwardRef(
   function SidebarLinkLabel2({ className, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
         ...slot(sidebarAnatomy, "link-label"),
+        ...collapsed,
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word labels clip at a
           // word boundary; collapses cleanly with the rail-mode max-width
@@ -20338,13 +21344,15 @@ var SidebarLinkLabel = React44.forwardRef(
   }
 );
 SidebarLinkLabel.displayName = "SidebarLinkLabel";
-var SidebarLinkAction = React44.forwardRef(
+var SidebarLinkAction = React45.forwardRef(
   function SidebarLinkAction2({ className, ...props }, ref) {
+    const collapsed = useCollapsedAttribute();
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
         ...slot(sidebarAnatomy, "link-action"),
+        ...collapsed,
         className: cn(
           "ds:transition-opacity ds:duration-[var(--motion-duration-spatial)] ds:ease-[var(--motion-ease-move)] ds:motion-reduce:transition-none",
           "ds:opacity-100",
@@ -20371,7 +21379,7 @@ var sidebarLinkBadgeVariants = cva(
     defaultVariants: { tone: "default" }
   }
 );
-var SidebarLinkBadge = React44.forwardRef(
+var SidebarLinkBadge = React45.forwardRef(
   function SidebarLinkBadge2({ tone, className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       "span",
@@ -20385,7 +21393,7 @@ var SidebarLinkBadge = React44.forwardRef(
   }
 );
 SidebarLinkBadge.displayName = "SidebarLinkBadge";
-var SidebarLinkGroup = React44.forwardRef(
+var SidebarLinkGroup = React45.forwardRef(
   function SidebarLinkGroup2({
     id: idProp,
     icon,
@@ -20401,19 +21409,20 @@ var SidebarLinkGroup = React44.forwardRef(
     ...props
   }, ref) {
     const messages = useDsMessages("sidebar");
-    const reactId = React44.useId();
+    const collapsed = useCollapsedAttribute();
+    const reactId = React45.useId();
     const id = idProp ?? reactId;
-    const scope = React44.useContext(SidebarGroupScopeContext);
-    const [uncontrolledOpen, setUncontrolledOpen] = React44.useState(defaultOpen);
+    const scope = React45.useContext(SidebarGroupScopeContext);
+    const [uncontrolledOpen, setUncontrolledOpen] = React45.useState(defaultOpen);
     const open = controlled ?? uncontrolledOpen;
-    const setOpen = React44.useCallback(
+    const setOpen = React45.useCallback(
       (next) => {
         if (controlled === void 0) setUncontrolledOpen(next);
         onOpenChange?.(next);
       },
       [controlled, onOpenChange]
     );
-    React44.useEffect(() => {
+    React45.useEffect(() => {
       if (scope?.exclusiveId && scope.exclusiveId !== id && open) {
         setOpen(false);
       }
@@ -20454,6 +21463,7 @@ var SidebarLinkGroup = React44.forwardRef(
       "span",
       {
         ...slot(sidebarAnatomy, "link-label"),
+        ...collapsed,
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word labels clip at a
           // word boundary; collapses cleanly with the rail-mode max-width
@@ -20536,7 +21546,7 @@ var SidebarLinkGroup = React44.forwardRef(
   }
 );
 SidebarLinkGroup.displayName = "SidebarLinkGroup";
-var SidebarFooter = React44.forwardRef(
+var SidebarFooter = React45.forwardRef(
   function SidebarFooter2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -20554,12 +21564,14 @@ var SidebarFooter = React44.forwardRef(
   }
 );
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarUser = React44.forwardRef(function SidebarUser2({ name, subtitle, avatarSrc, className, ...props }, ref) {
+var SidebarUser = React45.forwardRef(function SidebarUser2({ name, subtitle, avatarSrc, className, ...props }, ref) {
+  const collapsed = useCollapsedAttribute();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       ...slot(sidebarAnatomy, "user"),
+      ...collapsed,
       className: cn("ds:flex ds:min-w-0 ds:items-center ds:gap-2.5", className),
       ...props,
       children: [
@@ -20598,7 +21610,35 @@ var SidebarUser = React44.forwardRef(function SidebarUser2({ name, subtitle, ava
   );
 });
 SidebarUser.displayName = "SidebarUser";
-var SidebarBrandSwitcher = React44.forwardRef(
+function SidebarDrawer({
+  open,
+  defaultOpen,
+  onOpenChange,
+  label,
+  className,
+  children
+}) {
+  const messages = useDsMessages("sidebar");
+  return /* @__PURE__ */ jsx(Sheet, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: "left",
+      "data-mode": "mobile",
+      "data-labels": "show",
+      style: { width: "var(--ds-layout-shell-sidebar-width, var(--shell-sidebar-w))" },
+      className: cn(
+        "ds:group/sidebar group/sidebar ds:scrollbar-thin ds:bg-bg-2 ds:flex ds:flex-col ds:overflow-y-auto ds:px-3 ds:pt-4 ds:pb-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SheetTitle, { className: "ds:sr-only", children: label ?? messages.navigation }),
+        children
+      ]
+    }
+  ) });
+}
+SidebarDrawer.displayName = "SidebarDrawer";
+var SidebarBrandSwitcher = React45.forwardRef(
   function SidebarBrandSwitcher2({
     brand,
     label,
@@ -20619,7 +21659,7 @@ var SidebarBrandSwitcher = React44.forwardRef(
     rowClassName,
     trailing
   }, ref) {
-    const [open, setOpen] = React44.useState(false);
+    const [open, setOpen] = React45.useState(false);
     useSidebarPeekLock(open);
     const others = items.filter((p) => p.id !== current.id);
     return (
@@ -20782,7 +21822,7 @@ function SidebarBrandSwitcherOtherRow({
   isLaunching
 }) {
   const reachable = item.available !== false;
-  const [launching, setLaunching] = React44.useState(false);
+  const [launching, setLaunching] = React45.useState(false);
   const externalLaunching = isLaunching?.(item) ?? false;
   const busy = launching || externalLaunching;
   const handleSelect = async () => {
@@ -20926,11 +21966,29 @@ var AppHeaderActions = forwardRef(
   }
 );
 AppHeaderActions.displayName = "AppHeaderActions";
-var PageHeader = forwardRef(function PageHeader2({ eyebrow, title, description, actions, meta, className, ...props }, ref) {
+var PageHeader = forwardRef(function PageHeader2({
+  eyebrow,
+  title,
+  description,
+  actions,
+  meta,
+  headingLevel = 1,
+  titleSize,
+  className,
+  ...props
+}, ref) {
   return /* @__PURE__ */ jsxs("header", { ref, className: cn("ds:mb-7", className), ...props, children: [
     eyebrow && /* @__PURE__ */ jsx("div", { className: "ds:mb-1.5", children: eyebrow }),
     /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:flex-wrap ds:items-start ds:justify-between ds:gap-3", children: [
-      /* @__PURE__ */ jsx("h1", { className: "ds:font-display ds:text-fg ds:text-[26px] ds:leading-tight ds:tracking-tight", children: title }),
+      /* @__PURE__ */ jsx(
+        Heading,
+        {
+          level: headingLevel,
+          size: titleSize,
+          className: titleSize ? void 0 : "ds:text-[26px] ds:leading-tight ds:tracking-tight",
+          children: title
+        }
+      ),
       actions && /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-2", children: actions })
     ] }),
     description && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-2 ds:max-w-2xl ds:text-sm ds:leading-relaxed", children: description }),
@@ -21310,66 +22368,25 @@ var DataTableResultsCount = forwardRef(
 );
 DataTableResultsCount.displayName = "DataTableResultsCount";
 var DataTableHead = forwardRef(
-  function DataTableHead2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "thead",
-      {
-        ref,
-        ...slot(dataTableAnatomy, "header"),
-        className: cn("ds:[&_tr]:border-rule ds:[&_tr]:border-b", className),
-        ...props
-      }
-    );
+  function DataTableHead2(props, ref) {
+    return /* @__PURE__ */ jsx(TableHeader, { ref, ...slot(dataTableAnatomy, "header"), ...props });
   }
 );
 DataTableHead.displayName = "DataTableHead";
 var DataTableBody = forwardRef(
-  function DataTableBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "tbody",
-      {
-        ref,
-        ...slot(dataTableAnatomy, "body"),
-        className: cn("ds:[&_tr:last-child]:border-0", className),
-        ...props
-      }
-    );
+  function DataTableBody2(props, ref) {
+    return /* @__PURE__ */ jsx(TableBody, { ref, ...slot(dataTableAnatomy, "body"), ...props });
   }
 );
 DataTableBody.displayName = "DataTableBody";
 var DataTableRow = forwardRef(
-  function DataTableRow2({ selected, className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "tr",
-      {
-        ref,
-        "data-state": selected ? "selected" : void 0,
-        ...slot(dataTableAnatomy, "row"),
-        className: cn(
-          "ds:border-rule-soft ds:border-b",
-          microInteractions.selection,
-          // Selected hover stays in the brand tint (G15) — when both states fire,
-          // hover:bg-bg-2 was previously winning and dropping the row out of
-          // the selected tint, which read as the row deselecting on hover.
-          selected ? "ds:bg-brand-bg ds:hover:bg-brand-bg-hover" : "ds:hover:bg-surface-hover",
-          className
-        ),
-        ...props
-      }
-    );
+  function DataTableRow2(props, ref) {
+    return /* @__PURE__ */ jsx(TableRow, { ref, ...slot(dataTableAnatomy, "row"), ...props });
   }
 );
 DataTableRow.displayName = "DataTableRow";
 var DataTableHeader = forwardRef(
-  function DataTableHeader2({
-    sortable = false,
-    defaultSort,
-    sort: controlledSort,
-    onSortChange,
-    children,
-    className,
-    ...props
-  }, ref) {
+  function DataTableHeader2({ sortable = false, defaultSort, sort: controlledSort, onSortChange, children, ...props }, ref) {
     const [uncontrolledSort, setUncontrolledSort] = useState(
       defaultSort ?? null
     );
@@ -21381,52 +22398,43 @@ var DataTableHeader = forwardRef(
       if (!isControlled) setUncontrolledSort(next);
       onSortChange?.(next);
     }, [sortable, currentSort, isControlled, onSortChange]);
-    const indicator = sortable ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        ...slot(dataTableAnatomy, "head-indicator"),
-        className: cn(
-          "ds:text-fg-5 ds:ml-1 ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
-          currentSort && "ds:text-fg-3"
-        ),
-        children: currentSort === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : currentSort === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ds:size-3", strokeWidth: 2 })
-      }
-    ) : null;
     const ariaSort = sortable ? currentSort === "asc" ? "ascending" : currentSort === "desc" ? "descending" : "none" : void 0;
     return /* @__PURE__ */ jsx(
-      "th",
+      TableHead,
       {
         ref,
         scope: "col",
         "aria-sort": ariaSort,
         ...slot(dataTableAnatomy, "head"),
         ...stateAttributes({ state: currentSort ?? void 0 }),
-        className: cn(
-          "ds:h-11 ds:px-4 ds:py-2.5 ds:text-left ds:align-middle ds:whitespace-nowrap",
-          "ds:font-sans ds:text-[14px] ds:font-medium ds:tracking-normal ds:normal-case",
-          "ds:text-fg-3 ds:bg-surface-2",
-          "ds:border-rule ds:border-b",
-          "ds:[&:has([role=checkbox])]:pr-0",
-          className
-        ),
         ...props,
         children: sortable ? /* @__PURE__ */ jsxs(
-          "button",
+          Pressable,
           {
-            type: "button",
             onClick: handleClick,
             ...slot(dataTableAnatomy, "head-button"),
             className: cn(
-              "ds:-mx-1 ds:-my-1 ds:inline-flex ds:items-center ds:gap-1 ds:rounded-[4px] ds:px-1 ds:py-1",
-              "ds:font-sans ds:text-[14px] ds:font-medium ds:tracking-normal ds:normal-case",
-              "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:text-fg",
-              "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
+              // Mirrors the sort button of `TableHead` (table.tsx) on the
+              // DataTable's own `head-button` slot.
+              "ds:-mx-1 ds:-my-1 ds:inline-flex ds:items-center ds:gap-1 ds:rounded-icon ds:px-1 ds:py-1",
+              "ds:font-sans ds:text-sm ds:font-medium ds:tracking-normal ds:normal-case 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:text-fg"
             ),
             children: [
               children,
-              indicator
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  ...slot(dataTableAnatomy, "head-indicator"),
+                  className: cn(
+                    "ds:text-fg-5 ds:ml-1 ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+                    currentSort && "ds:text-fg-3"
+                  ),
+                  children: currentSort === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : currentSort === "desc" ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ds:size-3", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ds:size-3", strokeWidth: 2 })
+                }
+              )
             ]
           }
         ) : children
@@ -21435,35 +22443,21 @@ var DataTableHeader = forwardRef(
   }
 );
 DataTableHeader.displayName = "DataTableHeader";
-var cellBase = "ds:px-4 ds:py-3 ds:align-middle";
 var DataTableCell = forwardRef(
-  function DataTableCell2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "td",
-      {
-        ref,
-        ...slot(dataTableAnatomy, "cell"),
-        className: cn(
-          cellBase,
-          "ds:text-fg-2 ds:text-[13px]",
-          "ds:[&:has([role=checkbox])]:pr-0",
-          className
-        ),
-        ...props
-      }
-    );
+  function DataTableCell2(props, ref) {
+    return /* @__PURE__ */ jsx(TableCell, { ref, ...slot(dataTableAnatomy, "cell"), ...props });
   }
 );
 DataTableCell.displayName = "DataTableCell";
 var DataTableCellName = forwardRef(
   function DataTableCellName2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
-      "td",
+      TableCell,
       {
         ref,
         ...slot(dataTableAnatomy, "cell"),
         ...stateAttributes({ variant: "name" }),
-        className: cn(cellBase, "ds:font-display ds:text-fg ds:text-[13px] ds:font-medium", className),
+        className: cn("ds:font-display ds:text-fg ds:font-medium", className),
         ...props
       }
     );
@@ -21471,15 +22465,14 @@ var DataTableCellName = forwardRef(
 );
 DataTableCellName.displayName = "DataTableCellName";
 var DataTableCellMono = forwardRef(
-  function DataTableCellMono2({ className, style, ...props }, ref) {
+  function DataTableCellMono2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
-      "td",
+      TableCell,
       {
         ref,
         ...slot(dataTableAnatomy, "cell"),
         ...stateAttributes({ variant: "mono" }),
-        className: cn(cellBase, "ds:font-sans ds:text-fg-2 ds:text-[13px] ds:tabular-nums", className),
-        style,
+        className: cn("ds:font-sans ds:tabular-nums", className),
         ...props
       }
     );
@@ -21487,15 +22480,14 @@ var DataTableCellMono = forwardRef(
 );
 DataTableCellMono.displayName = "DataTableCellMono";
 var DataTableCellId = forwardRef(
-  function DataTableCellId2({ className, style, ...props }, ref) {
+  function DataTableCellId2({ className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
-      "td",
+      TableCell,
       {
         ref,
         ...slot(dataTableAnatomy, "cell"),
         ...stateAttributes({ variant: "id" }),
-        className: cn(cellBase, "ds:font-sans ds:text-fg-4 ds:text-xs ds:tabular-nums", className),
-        style,
+        className: cn("ds:font-sans ds:text-fg-4 ds:text-xs ds:tabular-nums", className),
         ...props
       }
     );
@@ -21510,19 +22502,18 @@ var dueDateFormatter = new Intl.DateTimeFormat("en-US", {
   year: "numeric"
 });
 var DataTableCellDue = forwardRef(
-  function DataTableCellDue2({ value, children, className, style, ...props }, ref) {
+  function DataTableCellDue2({ value, children, className, ...props }, ref) {
     const days = Math.floor((value.getTime() - Date.now()) / MS_PER_DAY);
     const tone = days < 0 ? "ds:text-danger-fg ds:font-medium" : days < DUE_NEAR_THRESHOLD_DAYS ? "ds:text-warning-fg ds:font-medium" : "ds:text-fg-3";
     const ariaState = days < 0 ? "overdue" : days < DUE_NEAR_THRESHOLD_DAYS ? "near" : "future";
     return /* @__PURE__ */ jsx(
-      "td",
+      TableCell,
       {
         ref,
         "data-due-state": ariaState,
         ...slot(dataTableAnatomy, "cell"),
         ...stateAttributes({ variant: "due" }),
-        className: cn(cellBase, "ds:font-sans ds:text-[13px] ds:tabular-nums", tone, className),
-        style,
+        className: cn("ds:font-sans ds:tabular-nums", tone, className),
         ...props,
         children: children ?? dueDateFormatter.format(value)
       }
@@ -21541,17 +22532,13 @@ var DataTableCheckbox = forwardRef(
     className,
     ...props
   }, ref) {
-    const Cell = asHeader ? "th" : "td";
+    const Cell = asHeader ? TableHead : TableCell;
     return /* @__PURE__ */ jsx(
       Cell,
       {
         ref,
         ...slot(dataTableAnatomy, "checkbox-cell"),
-        className: cn(
-          "ds:w-8 ds:px-4 ds:py-3 ds:pr-0 ds:align-middle",
-          asHeader && "ds:bg-surface-2 ds:border-rule ds:h-11 ds:border-b",
-          className
-        ),
+        className: cn("ds:w-8 ds:pr-0", className),
         ...props,
         children: /* @__PURE__ */ jsx(
           Checkbox,
@@ -21568,34 +22555,74 @@ var DataTableCheckbox = forwardRef(
   }
 );
 DataTableCheckbox.displayName = "DataTableCheckbox";
-var DataTablePagination = forwardRef(
-  function DataTablePagination2({ current, total, pageSize = 25, onPageChange, siblingCount, className, ...props }, ref) {
-    const totalPages = Math.max(1, Math.ceil(total / pageSize));
+var DEFAULT_WIDTHS = ["60%", "40%", "75%", "50%", "35%"];
+var TableLoading = forwardRef(
+  function TableLoading2({
+    columns,
+    rows = 5,
+    widths = DEFAULT_WIDTHS,
+    label,
+    messages: messagesProp,
+    className,
+    ...props
+  }, ref) {
+    const messages = useDsMessages("tableStates", messagesProp);
+    const cycle = widths.length > 0 ? widths : DEFAULT_WIDTHS;
     return /* @__PURE__ */ jsx(
-      Pagination,
+      DataTableBody,
       {
         ref,
-        currentPage: current,
-        totalPages,
-        onPageChange: onPageChange ?? (() => {
-        }),
-        siblingCount,
-        totalItems: total,
-        pageSize,
-        className: cn("ds:mt-4", className),
-        ...props
+        "aria-busy": "true",
+        "aria-label": label ?? messages.loading,
+        "data-state": "loading",
+        className,
+        ...props,
+        children: Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsx(DataTableRow, { className: "ds:hover:bg-transparent", children: Array.from({ length: columns }).map((_2, c) => /* @__PURE__ */ jsx(DataTableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: "ds:h-3.5", style: { width: cycle[c % cycle.length] } }) }, c)) }, r))
       }
     );
   }
 );
-DataTablePagination.displayName = "DataTablePagination";
+TableLoading.displayName = "TableLoading";
+var TableEmpty = forwardRef(function TableEmpty2({ columns, icon, title, description, action, messages: messagesProp, className, ...props }, ref) {
+  const messages = useDsMessages("tableStates", messagesProp);
+  return /* @__PURE__ */ jsx(DataTableBody, { ref, "data-state": "empty", className, ...props, children: /* @__PURE__ */ jsx(DataTableRow, { className: "ds:hover:bg-transparent", children: /* @__PURE__ */ jsx(DataTableCell, { colSpan: columns, className: "ds:p-0", children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      size: "compact",
+      icon,
+      title: title ?? messages.empty,
+      description,
+      action
+    }
+  ) }) }) });
+});
+TableEmpty.displayName = "TableEmpty";
+var TableError = forwardRef(function TableError2({ columns, icon, title, description, onRetry, action, messages, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DataTableBody, { ref, "data-state": "error", className, ...props, children: /* @__PURE__ */ jsx(DataTableRow, { className: "ds:hover:bg-transparent", children: /* @__PURE__ */ jsx(DataTableCell, { colSpan: columns, className: "ds:p-0", children: /* @__PURE__ */ jsx(
+    ErrorState,
+    {
+      size: "compact",
+      messages,
+      icon,
+      title,
+      description,
+      onRetry,
+      action
+    }
+  ) }) }) });
+});
+TableError.displayName = "TableError";
 var ALL = "__all";
+var SEARCH_ONLY = "__search:";
 function colStyle(width) {
   if (!width) return void 0;
   const flexible = width.match(/minmax\(\s*([\d.]+)px/);
   if (flexible) return { minWidth: `${flexible[1]}px` };
   return { width, minWidth: width };
 }
+var toControllerSort = (sort) => sort === void 0 ? void 0 : sort && { columnId: sort.key, direction: sort.dir };
+var fromControllerSort = (sort) => sort && { key: sort.columnId, dir: sort.direction };
+var fieldText = (row, key) => String(row[key] ?? "");
 function DataTableView({
   columns,
   data,
@@ -21603,6 +22630,12 @@ function DataTableView({
   searchKeys = [],
   searchPlaceholder = "Search\u2026",
   initialSort = null,
+  sorting: sortingProp,
+  onSortingChange,
+  page: pageProp,
+  onPageChange,
+  search: searchProp,
+  onSearchChange,
   onRowClick,
   rowKey = "id",
   pageSize = 15,
@@ -21610,86 +22643,93 @@ function DataTableView({
   selection,
   className
 }) {
-  const [search, setSearch] = useState("");
-  const [filterValues, setFilterValues] = useState({});
-  const [sort, setSort] = useState(initialSort);
-  const [page, setPage] = useState(1);
-  const setFilter = (key, value) => {
-    setFilterValues((prev) => ({ ...prev, [key]: value }));
-    setPage(1);
-  };
-  const processed = useMemo(() => {
-    const query = search.trim().toLowerCase();
-    let rows = data.filter((row) => {
-      for (const filter of filters) {
-        const value = filterValues[filter.key];
-        if (value && value !== ALL && !filter.match(row, value)) return false;
-      }
-      if (query && searchKeys.length) {
-        const hit = searchKeys.some(
-          (key) => String(row[key] ?? "").toLowerCase().includes(query)
-        );
-        if (!hit) return false;
-      }
-      return true;
-    });
-    if (sort) {
-      const col = columns.find((c) => c.key === sort.key);
-      const accessor = col?.sortValue ?? ((row) => row[sort.key]);
-      const dir = sort.dir === "asc" ? 1 : -1;
-      rows = [...rows].sort((a, b) => {
-        let av = accessor(a);
-        let bv = accessor(b);
-        if (typeof av === "string") av = av.toLowerCase();
-        if (typeof bv === "string") bv = bv.toLowerCase();
-        if (av == null) av = sort.dir === "asc" ? "\uFFFF" : "";
-        if (bv == null) bv = sort.dir === "asc" ? "\uFFFF" : "";
-        return av < bv ? -dir : av > bv ? dir : 0;
+  const [uncontrolledPage, setUncontrolledPage] = useState(1);
+  const page = pageProp ?? uncontrolledPage;
+  const controllerColumns = useMemo(() => {
+    const searched = new Set(searchKeys);
+    const result = columns.map((c) => ({
+      id: c.key,
+      header: c.header,
+      sortable: c.sortable,
+      sortValue: c.sortValue,
+      searchable: searched.has(c.key),
+      searchText: (row) => fieldText(row, c.key)
+    }));
+    for (const key of searchKeys) {
+      if (columns.some((c) => c.key === key)) continue;
+      result.push({
+        id: `${SEARCH_ONLY}${key}`,
+        header: null,
+        searchable: true,
+        searchText: (row) => fieldText(row, key)
       });
     }
-    return rows;
-  }, [data, filters, filterValues, search, searchKeys, sort, columns]);
-  const total = processed.length;
-  const pageCount = Math.max(1, Math.ceil(total / pageSize));
-  const current = Math.min(page, pageCount);
-  const pageRows = processed.slice((current - 1) * pageSize, current * pageSize);
+    return result;
+  }, [columns, searchKeys]);
+  const filterDefinitions = useMemo(
+    () => filters.map((filter) => ({
+      id: filter.key,
+      label: filter.label ?? filter.key,
+      options: filter.options.map((o) => typeof o === "string" ? { value: o, label: o } : o),
+      match: filter.match
+    })),
+    [filters]
+  );
+  const getRowId = useCallback((row) => String(row[rowKey]), [rowKey]);
+  const selectedIds = selection?.selectedIds;
+  const controlledSelection = useMemo(
+    () => selectedIds ? Array.from(selectedIds) : void 0,
+    [selectedIds]
+  );
+  const table = useDataTable({
+    data,
+    columns: controllerColumns,
+    filterDefinitions,
+    getRowId,
+    isRowSelectable: selection?.isRowSelectable,
+    sorting: toControllerSort(sortingProp),
+    defaultSorting: toControllerSort(initialSort),
+    onSortingChange: onSortingChange ? (next) => onSortingChange(fromControllerSort(next)) : void 0,
+    pagination: { page, pageSize },
+    onPaginationChange: (next) => {
+      setUncontrolledPage(next.page);
+      onPageChange?.(next.page);
+    },
+    // Without search keys nothing is searchable, so a query must not hide every row.
+    search: searchKeys.length > 0 ? searchProp : "",
+    onSearchChange,
+    selection: controlledSelection,
+    onSelectionChange: selection ? (next) => selection.onSelectionChange(new Set(next)) : void 0
+  });
+  const total = table.pagination.rowCount;
   const hasToolbar = searchKeys.length > 0 || filters.length > 0;
   const selectCol = selection != null;
-  const idOf = (row) => String(row[rowKey]);
   const canSelect = (row) => selection?.isRowSelectable?.(row) ?? true;
-  const scopeIds = selection ? (selection.selectAllScope === "filtered" ? processed : pageRows).filter(canSelect).map(idOf) : [];
-  const selectedInScope = scopeIds.filter((id) => selection?.selectedIds.has(id));
+  const filteredScope = selection?.selectAllScope === "filtered";
+  const scopeIds = selection ? filteredScope ? table.matchingRows.filter(canSelect).map(getRowId) : table.rows.filter((r) => r.selectable).map((r) => r.id) : [];
+  const selectedInScope = scopeIds.filter((id) => table.selection.isSelected(id));
   const allInScopeSelected = scopeIds.length > 0 && selectedInScope.length === scopeIds.length;
   const someInScopeSelected = selectedInScope.length > 0 && !allInScopeSelected;
   const toggleAll = () => {
     if (!selection) return;
-    const next = new Set(selection.selectedIds);
-    for (const id of scopeIds) {
-      if (allInScopeSelected) next.delete(id);
-      else next.add(id);
+    if (!filteredScope) {
+      table.selection.togglePage();
+    } else if (allInScopeSelected) {
+      const drop = new Set(scopeIds);
+      table.selection.set(table.selection.value.filter((id) => !drop.has(id)));
+    } else {
+      table.selection.selectAllMatching();
     }
-    selection.onSelectionChange(next);
-  };
-  const toggleRow = (row) => {
-    if (!selection) return;
-    const id = idOf(row);
-    const next = new Set(selection.selectedIds);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
-    selection.onSelectionChange(next);
   };
-  const selectAllLabel = selection?.selectAllScope === "filtered" ? `Select all ${scopeIds.length} ${itemLabel}` : `Select all ${itemLabel} on this page`;
+  const selectAllLabel = filteredScope ? `Select all ${scopeIds.length} ${itemLabel}` : `Select all ${itemLabel} on this page`;
   return /* @__PURE__ */ jsxs(DataTable, { withToolbar: hasToolbar, className, children: [
     hasToolbar && /* @__PURE__ */ jsxs(DataTableToolbar, { children: [
       searchKeys.length > 0 && /* @__PURE__ */ jsx(
         DataTableSearch,
         {
           placeholder: searchPlaceholder,
-          value: search,
-          onChange: (e) => {
-            setSearch(e.target.value);
-            setPage(1);
-          }
+          value: table.search.value,
+          onChange: (e) => table.search.set(e.target.value)
         }
       ),
       filters.map((filter) => {
@@ -21701,8 +22741,8 @@ function DataTableView({
           Select,
           {
             options,
-            value: filterValues[filter.key] ?? ALL,
-            onValueChange: (value) => setFilter(filter.key, value),
+            value: table.filters.get(filter.key) ?? ALL,
+            onValueChange: (value) => table.filters.set(filter.key, value === ALL ? null : value),
             "aria-label": filter.label ?? filter.key,
             className: "ds:w-auto ds:min-w-[150px]"
           },
@@ -21733,16 +22773,23 @@ function DataTableView({
             DataTableHeader,
             {
               sortable: true,
-              sort: sort?.key === c.key ? sort.dir : null,
-              onSortChange: (next) => setSort(next ? { key: c.key, dir: next } : null),
+              sort: table.sorting.getDirection(c.key),
+              onSortChange: () => table.sorting.toggle(c.key),
               className: c.align === "right" ? "ds:text-right ds:[&>button]:ml-auto" : void 0,
               children: c.header
             },
             c.key
-          ) : /* @__PURE__ */ jsx(DataTableHeader, { className: c.align === "right" ? "ds:text-right" : void 0, children: c.header }, c.key)
+          ) : /* @__PURE__ */ jsx(
+            DataTableHeader,
+            {
+              className: c.align === "right" ? "ds:text-right" : void 0,
+              children: c.header
+            },
+            c.key
+          )
         )
       ] }) }),
-      /* @__PURE__ */ jsx(DataTableBody, { children: pageRows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(DataTableBody, { children: table.rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs(
         DataTableCell,
         {
           colSpan: columns.length + (selectCol ? 1 : 0),
@@ -21753,40 +22800,63 @@ function DataTableView({
             " match your filters."
           ]
         }
-      ) }) : pageRows.map((row) => /* @__PURE__ */ jsxs(
+      ) }) : table.rows.map(({ id, row, selected, selectable }) => /* @__PURE__ */ jsxs(
         DataTableRow,
         {
-          selected: selection ? selection.selectedIds.has(idOf(row)) : void 0,
+          selected: selection ? selected : void 0,
           onClick: onRowClick ? () => onRowClick(row) : void 0,
           className: onRowClick ? "ds:cursor-pointer" : void 0,
           children: [
             selection && /* @__PURE__ */ jsx(
               DataTableCheckbox,
               {
-                checked: selection.selectedIds.has(idOf(row)),
-                onCheckedChange: () => toggleRow(row),
-                disabled: !canSelect(row),
-                ariaLabel: selection.rowLabel?.(row) ?? `Select ${idOf(row)}`,
+                checked: selected,
+                onCheckedChange: () => table.selection.toggle(id),
+                disabled: !selectable,
+                ariaLabel: selection.rowLabel?.(row) ?? `Select ${id}`,
                 onClick: (event) => event.stopPropagation()
               }
             ),
-            columns.map((c) => /* @__PURE__ */ jsx(DataTableCell, { className: c.align === "right" ? "ds:text-right" : void 0, children: c.render ? c.render(row) : row[c.key] ?? /* @__PURE__ */ jsx(Dash, {}) }, c.key))
+            columns.map((c) => /* @__PURE__ */ jsx(
+              DataTableCell,
+              {
+                className: c.align === "right" ? "ds:text-right" : void 0,
+                children: c.render ? c.render(row) : row[c.key] ?? /* @__PURE__ */ jsx(EmptyValue, {})
+              },
+              c.key
+            ))
           ]
         },
-        idOf(row)
+        id
       )) })
     ] }),
     /* @__PURE__ */ jsx(
       DataTablePagination,
       {
-        current,
-        total,
+        page: table.pagination.page,
+        totalItems: total,
         pageSize,
-        onPageChange: setPage
+        onPageChange: table.pagination.setPage
       }
     )
   ] });
 }
+function EmptyValue() {
+  return /* @__PURE__ */ jsx("span", { className: "ds:text-fg-5", children: "\u2014" });
+}
+function Dash() {
+  return /* @__PURE__ */ jsx(EmptyValue, {});
+}
+function TagsCell({ items = [] }) {
+  if (items.length === 0) return /* @__PURE__ */ jsx(EmptyValue, {});
+  return /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:items-center ds:gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "ds:bg-bg-2 ds:text-fg-3 ds:border-rule ds:rounded-pill ds:border ds:px-2 ds:py-0.5 ds:text-xs", children: items[0] }),
+    items.length > 1 && /* @__PURE__ */ jsxs("span", { className: "ds:text-fg-4 ds:text-xs ds:tabular-nums", children: [
+      "+",
+      items.length - 1
+    ] })
+  ] });
+}
 var toneClass = {
   slate: "ds:bg-bg-3 ds:text-fg-3",
   blue: "ds:bg-[color-mix(in_oklab,var(--color-brand-tax)_14%,transparent)] ds:text-[color:var(--color-brand-tax)]",
@@ -21795,9 +22865,6 @@ var toneClass = {
   ok: "ds:bg-success-bg ds:text-success-fg",
   rose: "ds:bg-danger-bg ds:text-danger-fg"
 };
-function Dash() {
-  return /* @__PURE__ */ jsx("span", { className: "ds:text-fg-5", children: "\u2014" });
-}
 function StagePill({
   tone = "slate",
   dot = true,
@@ -21825,22 +22892,12 @@ function Assignee({ name }) {
   ] });
 }
 function MoneyCell({ value }) {
-  if (!value) return /* @__PURE__ */ jsx(Dash, {});
+  if (!value) return /* @__PURE__ */ jsx(EmptyValue, {});
   return /* @__PURE__ */ jsxs("span", { className: "ds:text-fg ds:font-medium ds:tabular-nums", children: [
     "$",
     value.toLocaleString()
   ] });
 }
-function TagsCell({ items = [] }) {
-  if (items.length === 0) return /* @__PURE__ */ jsx(Dash, {});
-  return /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:items-center ds:gap-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "ds:bg-bg-2 ds:text-fg-3 ds:border-rule ds:rounded-pill ds:border ds:px-2 ds:py-0.5 ds:text-xs", children: items[0] }),
-    items.length > 1 && /* @__PURE__ */ jsxs("span", { className: "ds:text-fg-4 ds:text-xs ds:tabular-nums", children: [
-      "+",
-      items.length - 1
-    ] })
-  ] });
-}
 var DetailGrid = forwardRef(function DetailGrid2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -23204,7 +24261,29 @@ var NotificationList = forwardRef(
 );
 NotificationList.displayName = "NotificationList";
 var NotificationItem = forwardRef(
-  function NotificationItem2({ title, body, typeLabel, client, time, sender, icon, iconClassName, unread, className, ...props }, ref) {
+  function NotificationItem2({
+    title,
+    body,
+    typeLabel,
+    client,
+    meta,
+    time,
+    sender,
+    icon,
+    iconClassName,
+    unread,
+    className,
+    ...props
+  }, ref) {
+    const metaSlot = meta ?? client;
+    const metaContent = metaSlot == null ? null : typeof metaSlot === "string" || typeof metaSlot === "number" ? /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "outline",
+        className: "ds:rounded-md ds:px-1.5 ds:py-0.5 ds:text-[11px] ds:font-medium",
+        children: metaSlot
+      }
+    ) : metaSlot;
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -23245,16 +24324,9 @@ var NotificationItem = forwardRef(
               unread && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ds:bg-brand ds:size-1.5 ds:shrink-0 ds:rounded-full" })
             ] }),
             body && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-0.5 ds:truncate ds:text-xs", children: body }),
-            (typeLabel || client || time) && /* @__PURE__ */ jsxs("div", { className: "ds:mt-1.5 ds:flex ds:items-center ds:gap-2", children: [
+            (typeLabel || metaContent || time) && /* @__PURE__ */ jsxs("div", { className: "ds:mt-1.5 ds:flex ds:items-center ds:gap-2", children: [
               typeLabel && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:text-[11px]", children: typeLabel }),
-              client && /* @__PURE__ */ jsx(
-                Badge,
-                {
-                  variant: "outline",
-                  className: "ds:rounded-md ds:px-1.5 ds:py-0.5 ds:text-[11px] ds:font-medium",
-                  children: client
-                }
-              ),
+              metaContent,
               time && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:text-xs ds:whitespace-nowrap ds:tabular-nums", children: time })
             ] })
           ] })
@@ -23869,7 +24941,7 @@ var FilterChip = forwardRef(function FilterChip2({ active = false, size, count,
   );
 });
 FilterChip.displayName = "FilterChip";
-var BulkActionBarContext = React44.createContext({ tone: "surface" });
+var BulkActionBarContext = React45.createContext({ tone: "surface" });
 function actionClasses(tone, destructive) {
   const base = cn(
     "ds:inline-flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-btn ds:px-3 ds:text-[13px] ds:font-medium",
@@ -23892,8 +24964,8 @@ function actionClasses(tone, destructive) {
     destructive ? "ds:text-control-destructive-fg ds:hover:bg-control-destructive-hover-bg" : "ds:text-control-fg ds:hover:bg-control-hover-bg ds:hover:text-control-hover-fg"
   );
 }
-var BulkActionBarAction = React44.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
-  const { tone } = React44.use(BulkActionBarContext);
+var BulkActionBarAction = React45.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
+  const { tone } = React45.use(BulkActionBarContext);
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -23907,7 +24979,7 @@ var BulkActionBarAction = React44.forwardRef(function BulkActionBarAction2({ asC
 });
 BulkActionBarAction.displayName = "BulkActionBarAction";
 function BulkActionBarSeparator({ className }) {
-  const { tone } = React44.use(BulkActionBarContext);
+  const { tone } = React45.use(BulkActionBarContext);
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -24402,8 +25474,16 @@ function DisplayMenu({
   triggerIcon,
   triggerLabel = "Display",
   className,
+  gutterPx,
   flyoutSide = "auto"
 }) {
+  if (gutterPx !== void 0) {
+    warnOnce(
+      "C-SELECT-DEAD",
+      "DisplayMenu.gutterPx",
+      "`DisplayMenu gutterPx` has done nothing since 1.30 and is removed in 2.0: the panel anchors to its trigger. Delete the prop and any gutter measurement around it."
+    );
+  }
   const [open, setOpen] = useState(false);
   const [openKey, setOpenKey] = useState(null);
   const [flyout, setFlyout] = useState({
@@ -24539,7 +25619,7 @@ function DisplayMenu({
             setOpenKey(null);
           }
         },
-        children: /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "ds:relative", children: [
+        children: /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "ds:relative ds:isolate", children: [
           /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-center ds:gap-1.5 ds:border-b ds:border-rule ds:px-2.5 ds:py-1.5", children: [
             /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "ds:shrink-0 ds:text-fg-3", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx(
@@ -24682,7 +25762,7 @@ function DisplayMenu({
                 // Column + overflow-hidden so the option list (the only flexible
                 // part) absorbs the height cap, while the search box and Clear
                 // footer stay pinned and fully visible.
-                "ds:absolute ds:z-50 ds:flex ds:flex-col ds:overflow-hidden ds:rounded-lg ds:border ds:border-rule ds:bg-surface ds:shadow-floating ds:motion-reduce:transition-none",
+                "ds:absolute ds:flex ds:flex-col ds:overflow-hidden ds:rounded-lg ds:border ds:border-rule ds:bg-surface ds:shadow-floating ds:motion-reduce:transition-none",
                 // -mx-1 lets the flyout tuck against the panel so there's no
                 // dead gap for the cursor to fall through on the way over.
                 flyout.side === "left" ? "ds:right-full ds:-mr-1" : "ds:left-full ds:-ml-1"
@@ -24782,30 +25862,35 @@ function DisplayMenu({
 function EmptyRow({ label = "No matches" }) {
   return /* @__PURE__ */ jsx("p", { className: "ds:px-2 ds:py-3 ds:text-center ds:text-[11px] ds:text-fg-3", children: label });
 }
-var StickyStackContext = React44.createContext(null);
-function StickyStack({ layers, top = 0, children }) {
-  const [layerHeights, setLayerHeights] = React44.useState({});
-  const normalizedLayers = React44.useMemo(() => {
+var StickyStackContext = React45.createContext(null);
+function StickyStack({
+  layers,
+  top = 0,
+  layerMode = "fixed",
+  children
+}) {
+  const [layerHeights, setLayerHeights] = React45.useState({});
+  const normalizedLayers = React45.useMemo(() => {
     const names = [...layers];
     if (new Set(names).size !== names.length) {
       throw new Error("StickyStack layer names must be unique.");
     }
     return names;
   }, [layers]);
-  const setLayerHeight = React44.useCallback((name, height) => {
+  const setLayerHeight = React45.useCallback((name, height) => {
     setLayerHeights((current) => {
       if (current[name] === height) return current;
       return { ...current, [name]: height };
     });
   }, []);
-  const value = React44.useMemo(
-    () => ({ layers: normalizedLayers, layerHeights, setLayerHeight, top }),
-    [layerHeights, normalizedLayers, setLayerHeight, top]
+  const value = React45.useMemo(
+    () => ({ layers: normalizedLayers, layerHeights, setLayerHeight, top, layerMode }),
+    [layerHeights, layerMode, normalizedLayers, setLayerHeight, top]
   );
   return /* @__PURE__ */ jsx(StickyStackContext, { value, children });
 }
 function useStickyStack(componentName) {
-  const context = React44.use(StickyStackContext);
+  const context = React45.use(StickyStackContext);
   if (!context) {
     throw new Error(`${componentName} must be rendered inside StickyStack.`);
   }
@@ -24828,20 +25913,21 @@ function stackOffset(context, layerName, includeNamedLayer) {
   const base = cssLength(top);
   return measuredOffset === 0 ? base : `calc(${base} + ${measuredOffset}px)`;
 }
-var StickyStackLayer = React44.forwardRef(
-  function StickyStackLayer2({ name, hostClassName, className, children, style, ...props }, forwardedRef) {
+var StickyStackLayer = React45.forwardRef(
+  function StickyStackLayer2({ name, hostClassName, layerMode, className, children, style, ...props }, forwardedRef) {
     const context = useStickyStack("StickyStackLayer");
     const { setLayerHeight } = context;
+    const mode = layerMode ?? context.layerMode;
     const top = stackOffset(context, name, false);
-    const hostRef = React44.useRef(null);
-    const layerRef = React44.useRef(null);
-    const [bounds, setBounds] = React44.useState({
+    const hostRef = React45.useRef(null);
+    const layerRef = React45.useRef(null);
+    const [bounds, setBounds] = React45.useState({
       height: 0,
       left: 0,
       ready: false,
       width: 0
     });
-    const setLayerRef = React44.useCallback(
+    const setLayerRef = React45.useCallback(
       (node) => {
         layerRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -24849,7 +25935,7 @@ var StickyStackLayer = React44.forwardRef(
       },
       [forwardedRef]
     );
-    const measure = React44.useCallback(() => {
+    const measure = React45.useCallback(() => {
       const host = hostRef.current;
       const layer = layerRef.current;
       if (!host || !layer) return;
@@ -24866,7 +25952,7 @@ var StickyStackLayer = React44.forwardRef(
       );
       setLayerHeight(name, next.height);
     }, [name, setLayerHeight]);
-    React44.useLayoutEffect(() => {
+    React45.useLayoutEffect(() => {
       measure();
       let frame = 0;
       const scheduleMeasure = () => {
@@ -24886,12 +25972,13 @@ var StickyStackLayer = React44.forwardRef(
         setLayerHeight(name, 0);
       };
     }, [measure, name, setLayerHeight]);
+    const pinned = mode === "fixed" && bounds.ready;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref: hostRef,
         className: cn("ds:relative", hostClassName),
-        style: { height: bounds.ready ? bounds.height : void 0 },
+        style: { height: pinned ? bounds.height : void 0 },
         "data-sticky-stack-host": name,
         children: /* @__PURE__ */ jsx(
           "div",
@@ -24900,14 +25987,15 @@ var StickyStackLayer = React44.forwardRef(
             className,
             style: {
               ...style,
-              position: bounds.ready ? "fixed" : "sticky",
+              position: pinned ? "fixed" : "sticky",
               top,
-              left: bounds.ready ? bounds.left : void 0,
-              width: bounds.ready ? bounds.width : void 0,
+              left: pinned ? bounds.left : void 0,
+              width: pinned ? bounds.width : void 0,
               boxSizing: "border-box",
               zIndex: style?.zIndex ?? "var(--ds-z-sticky, var(--z-sticky))"
             },
             "data-sticky-stack-layer": name,
+            "data-sticky-stack-mode": mode,
             ...props,
             children
           }
@@ -24917,7 +26005,7 @@ var StickyStackLayer = React44.forwardRef(
   }
 );
 StickyStackLayer.displayName = "StickyStackLayer";
-var StickyStackSticky = React44.forwardRef(
+var StickyStackSticky = React45.forwardRef(
   function StickyStackSticky2({ after, className, style, ...props }, ref) {
     const context = useStickyStack("StickyStackSticky");
     const top = stackOffset(context, after, true);
@@ -24938,7 +26026,7 @@ var StickyStackSticky = React44.forwardRef(
   }
 );
 StickyStackSticky.displayName = "StickyStackSticky";
-var StickyStackSectionHeader = React44.forwardRef(function StickyStackSectionHeader2(props, ref) {
+var StickyStackSectionHeader = React45.forwardRef(function StickyStackSectionHeader2(props, ref) {
   return /* @__PURE__ */ jsx(StickyStackSticky, { ref, "data-sticky-stack-section-header": "", ...props });
 });
 StickyStackSectionHeader.displayName = "StickyStackSectionHeader";
@@ -24948,7 +26036,7 @@ function defineStatusMap(map) {
   if (map === void 0) return (entries) => entries;
   return map;
 }
-var ConfirmHostContext = React44.createContext(null);
+var ConfirmHostContext = React45.createContext(null);
 var isServer = typeof window === "undefined";
 function missingHost(hook) {
   if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
@@ -24959,8 +26047,8 @@ function missingHost(hook) {
   );
 }
 function useConfirm() {
-  const host = React44.useContext(ConfirmHostContext);
-  return React44.useMemo(() => {
+  const host = React45.useContext(ConfirmHostContext);
+  return React45.useMemo(() => {
     if (host) return host.confirm;
     return () => {
       missingHost("useConfirm");
@@ -24969,8 +26057,8 @@ function useConfirm() {
   }, [host]);
 }
 function usePrompt() {
-  const host = React44.useContext(ConfirmHostContext);
-  return React44.useMemo(() => {
+  const host = React45.useContext(ConfirmHostContext);
+  return React45.useMemo(() => {
     if (host) return host.prompt;
     return () => {
       missingHost("usePrompt");
@@ -24979,12 +26067,12 @@ function usePrompt() {
   }, [host]);
 }
 function ConfirmHost({ children }) {
-  const [queue, setQueue] = React44.useState([]);
-  const nextId = React44.useRef(0);
-  const enqueue = React44.useCallback((request) => {
+  const [queue, setQueue] = React45.useState([]);
+  const nextId = React45.useRef(0);
+  const enqueue = React45.useCallback((request) => {
     setQueue((previous) => [...previous, request]);
   }, []);
-  const value = React44.useMemo(
+  const value = React45.useMemo(
     () => ({
       confirm: (options) => {
         if (isServer) return Promise.resolve(false);
@@ -25002,7 +26090,7 @@ function ConfirmHost({ children }) {
     [enqueue]
   );
   const current = queue[0];
-  const settle = React44.useCallback(() => {
+  const settle = React45.useCallback(() => {
     setQueue((previous) => previous.slice(1));
   }, []);
   return /* @__PURE__ */ jsxs(ConfirmHostContext, { value, children: [
@@ -25013,8 +26101,8 @@ function ConfirmHost({ children }) {
 }
 ConfirmHost.displayName = "ConfirmHost";
 function useSettleOnce(resolve) {
-  const done = React44.useRef(false);
-  return React44.useCallback(
+  const done = React45.useRef(false);
+  return React45.useCallback(
     (value) => {
       if (done.current) return;
       done.current = true;
@@ -25037,7 +26125,7 @@ function HostedConfirm({
   request,
   onSettled
 }) {
-  const [open, setOpen] = React44.useState(true);
+  const [open, setOpen] = React45.useState(true);
   const settle = useSettleOnce(request.resolve);
   return /* @__PURE__ */ jsx(
     ConfirmDialog,
@@ -25062,8 +26150,8 @@ function HostedPrompt({
   onSettled
 }) {
   const { options } = request;
-  const [open, setOpen] = React44.useState(true);
-  const [value, setValue] = React44.useState(options.defaultValue ?? "");
+  const [open, setOpen] = React45.useState(true);
+  const [value, setValue] = React45.useState(options.defaultValue ?? "");
   const settle = useSettleOnce(request.resolve);
   const empty = value.trim() === "";
   const accessibleName = options.label === void 0 && typeof options.title === "string" ? options.title : void 0;
@@ -25129,6 +26217,512 @@ function DesignSystemProvider({
   }
   return /* @__PURE__ */ jsx(DesignSystemContext, { value, children: /* @__PURE__ */ jsx(LocaleProvider, { locale, children: /* @__PURE__ */ jsx(PortalContainerContext, { value: portalContainer, children: tree }) }) });
 }
+var DataTablePatternContext = createContext(null);
+function usePattern(part) {
+  const context = useContext(DataTablePatternContext);
+  if (!context) {
+    throw new Error(`<DataTablePattern.${part}> must be rendered inside <DataTablePattern>.`);
+  }
+  return context;
+}
+function Root26({
+  table,
+  children,
+  selectable = false,
+  loading = false,
+  error = false,
+  onRetry,
+  sticky = false,
+  classNames = {},
+  messages: messagesOverride,
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const messages = useDsMessages("dataTable", messagesOverride);
+  const [toolbarHeight, setToolbarHeight] = useState(0);
+  const columnCount = table.columns.length + (selectable ? 1 : 0);
+  const value = {
+    table,
+    selectable,
+    loading,
+    error,
+    onRetry,
+    sticky,
+    classNames,
+    messages,
+    columnCount,
+    reportToolbarHeight: setToolbarHeight
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...slot(dataTableAnatomy, "root"),
+      "data-sticky": sticky ? "" : void 0,
+      className: cn(
+        // The card: one border and a quiet shadow around toolbar and table.
+        // `overflow-clip` clips the header surfaces to the corners without
+        // creating a scroll container, so sticky chrome sticks to the page.
+        "ds:rounded-card ds:border-rule-strong ds:bg-surface ds:w-full ds:overflow-clip ds:border ds:shadow-quiet",
+        className
+      ),
+      style: sticky ? {
+        ...style,
+        "--ds-data-table-toolbar-height": `${toolbarHeight}px`
+      } : style,
+      ...props,
+      children: /* @__PURE__ */ jsx(DataTablePatternContext.Provider, { value, children })
+    }
+  );
+}
+function useReportedHeight(element, report, enabled) {
+  useEffect(() => {
+    const node = element.current;
+    if (!enabled || !node || typeof ResizeObserver === "undefined") return;
+    const measure = () => report(node.getBoundingClientRect().height);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+      report(0);
+    };
+  }, [element, report, enabled]);
+}
+var STICKY_TOOLBAR_Z = "ds:z-[calc(var(--z-base)+3)]";
+var Toolbar3 = forwardRef(function Toolbar4({ className, ...props }, ref) {
+  const { sticky, classNames, reportToolbarHeight } = usePattern("Toolbar");
+  const ownRef = useRef(null);
+  useReportedHeight(ownRef, reportToolbarHeight, sticky);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        ownRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      ...slot(dataTableAnatomy, "toolbar"),
+      className: cn(
+        "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",
+        sticky && cn("ds:sticky ds:top-[var(--ds-data-table-sticky-top,0px)]", STICKY_TOOLBAR_Z),
+        classNames.toolbar,
+        className
+      ),
+      ...props
+    }
+  );
+});
+Toolbar3.displayName = "DataTablePattern.Toolbar";
+var Search = forwardRef(function Search2({ className, placeholder, size = "sm", "aria-label": ariaLabel, ...props }, ref) {
+  const { table, classNames, messages } = usePattern("Search");
+  return /* @__PURE__ */ jsx(
+    SearchInput,
+    {
+      ref,
+      size,
+      value: table.search.value,
+      onValueChange: table.search.set,
+      placeholder: placeholder ?? messages.search,
+      "aria-label": ariaLabel ?? messages.searchLabel,
+      className: cn(
+        "ds:w-[var(--ds-data-table-search-width,280px)] ds:max-w-full",
+        classNames.search,
+        className
+      ),
+      ...props
+    }
+  );
+});
+Search.displayName = "DataTablePattern.Search";
+var ALL2 = "__all__";
+function FilterControl({ definition }) {
+  const { table, messages } = usePattern("Filters");
+  const current = table.filters.get(definition.id);
+  if (definition.multiple) {
+    const values = Array.isArray(current) ? current : [];
+    return /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        options: definition.options,
+        value: values,
+        onValueChange: (next) => table.filters.set(definition.id, next.length ? next : null),
+        "aria-label": definition.label,
+        placeholder: definition.label,
+        size: "sm",
+        className: "ds:w-auto ds:min-w-40"
+      }
+    );
+  }
+  const value = typeof current === "string" ? current : ALL2;
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      options: [
+        { value: ALL2, label: `${messages.filterAll} ${definition.label}`.trim() },
+        ...definition.options.map((option) => ({
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled
+        }))
+      ],
+      value,
+      onValueChange: (next) => table.filters.set(definition.id, next === ALL2 || !next ? null : next),
+      "aria-label": definition.label,
+      size: "sm",
+      className: "ds:w-auto ds:min-w-40"
+    }
+  );
+}
+var Filters = forwardRef(function Filters2({ className, children, ...props }, ref) {
+  const { table, classNames } = usePattern("Filters");
+  if (table.filters.definitions.length === 0 && !children) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...slot(dataTableAnatomy, "filters"),
+      className: cn("ds:flex ds:flex-wrap ds:items-center ds:gap-2", classNames.filters, className),
+      ...props,
+      children: [
+        table.filters.definitions.map((definition) => /* @__PURE__ */ jsx(FilterControl, { definition }, definition.id)),
+        children
+      ]
+    }
+  );
+});
+Filters.displayName = "DataTablePattern.Filters";
+var ColumnsMenu = forwardRef(
+  function ColumnsMenu2({ label, className, ...props }, ref) {
+    const { table, classNames, messages } = usePattern("ColumnsMenu");
+    const hideable = table.allColumns.filter((column) => column.hideable !== false);
+    if (hideable.length === 0) return null;
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          variant: "outline",
+          size: "sm",
+          iconEnd: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" }),
+          className: cn(classNames["columns-menu"], className),
+          ...props,
+          children: label ?? messages.columns
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: hideable.map((column) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: table.columnVisibility.isVisible(column.id),
+          onCheckedChange: (checked) => table.columnVisibility.setVisible(column.id, checked === true),
+          onSelect: (event) => event.preventDefault(),
+          children: column.header
+        },
+        column.id
+      )) })
+    ] });
+  }
+);
+ColumnsMenu.displayName = "DataTablePattern.ColumnsMenu";
+var STICKY_HEAD_TOP = "ds:top-[calc(var(--ds-data-table-sticky-top,0px)+var(--ds-data-table-toolbar-height,0px))]";
+function Content16({
+  onRowClick,
+  getRowLabel,
+  loading: loadingSlot,
+  error: errorSlot,
+  empty: emptySlot,
+  className,
+  wrapperClassName,
+  ...props
+}) {
+  const context = usePattern("Content");
+  const table = context.table;
+  const { selectable, loading, error, sticky, classNames, messages } = context;
+  const { selection } = table;
+  const body = loading ? loadingSlot ?? /* @__PURE__ */ jsx(LoadingSlot, {}) : error ? errorSlot ?? /* @__PURE__ */ jsx(ErrorSlot, {}) : table.rows.length === 0 ? emptySlot ?? /* @__PURE__ */ jsx(EmptySlot, {}) : /* @__PURE__ */ jsx(TableBody, { children: table.rows.map((model) => /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      id: table.getRowDomId(model.id),
+      selected: model.selected,
+      interactive: Boolean(onRowClick),
+      onClick: onRowClick ? () => onRowClick(model.row, model) : void 0,
+      children: [
+        selectable && /* @__PURE__ */ jsx(TableCell, { width: 32, className: "ds:pr-0", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: model.selected,
+            disabled: !model.selectable,
+            onCheckedChange: () => selection.toggle(model.id),
+            onClick: (event) => event.stopPropagation(),
+            "aria-label": getRowLabel ? getRowLabel(model.row) : messages.selectRow
+          }
+        ) }),
+        table.columns.map((column) => /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            headers: table.getColumnId(column.id),
+            align: column.align,
+            numeric: column.numeric,
+            children: table.renderCell(model, column)
+          },
+          column.id
+        ))
+      ]
+    },
+    model.id
+  )) });
+  return /* @__PURE__ */ jsxs(
+    Table,
+    {
+      stickyHeader: sticky,
+      wrapperClassName: cn(
+        // The root is the card; the table's own frame goes.
+        "ds:rounded-none ds:border-0 ds:shadow-none",
+        // Sticky chrome sticks to the page, so the wrapper must not scroll.
+        sticky && "ds:overflow-visible",
+        classNames.content,
+        wrapperClassName
+      ),
+      className,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsx(TableHead, { width: 32, className: cn("ds:pr-0", sticky && STICKY_HEAD_TOP), children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selection.allPageSelected ? true : selection.somePageSelected ? "indeterminate" : false,
+              disabled: table.rows.every((model) => !model.selectable),
+              onCheckedChange: () => selection.togglePage(),
+              "aria-label": messages.selectAll
+            }
+          ) }),
+          table.columns.map((column) => /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              id: table.getColumnId(column.id),
+              scope: "col",
+              align: column.align,
+              numeric: column.numeric,
+              width: column.width,
+              sort: column.sortable ? table.sorting.getDirection(column.id) : void 0,
+              onSortChange: column.sortable ? (next) => table.sorting.set(next ? { columnId: column.id, direction: next } : null) : void 0,
+              className: cn(sticky && STICKY_HEAD_TOP),
+              children: column.header
+            },
+            column.id
+          ))
+        ] }) }),
+        body
+      ]
+    }
+  );
+}
+var EmptySlot = forwardRef(
+  function EmptySlot2(props, ref) {
+    const { columnCount } = usePattern("Empty");
+    return /* @__PURE__ */ jsx(TableEmpty, { ref, columns: columnCount, ...props });
+  }
+);
+EmptySlot.displayName = "DataTablePattern.Empty";
+var LoadingSlot = forwardRef(
+  function LoadingSlot2(props, ref) {
+    const { columnCount } = usePattern("Loading");
+    return /* @__PURE__ */ jsx(TableLoading, { ref, columns: columnCount, ...props });
+  }
+);
+LoadingSlot.displayName = "DataTablePattern.Loading";
+var ErrorSlot = forwardRef(
+  function ErrorSlot2({ description, onRetry, ...props }, ref) {
+    const context = usePattern("Error");
+    return /* @__PURE__ */ jsx(
+      TableError,
+      {
+        ref,
+        columns: context.columnCount,
+        description: description ?? (typeof context.error === "string" ? context.error : void 0),
+        onRetry: onRetry ?? context.onRetry,
+        ...props
+      }
+    );
+  }
+);
+ErrorSlot.displayName = "DataTablePattern.Error";
+var PaginationSlot = forwardRef(
+  function PaginationSlot2({ className, onPageSizeChange, pageSizeOptions, ...props }, ref) {
+    const { table, classNames } = usePattern("Pagination");
+    const { pagination } = table;
+    return /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        ref,
+        page: pagination.page,
+        pageCount: pagination.pageCount,
+        onPageChange: pagination.setPage,
+        totalItems: pagination.rowCount,
+        pageSize: pagination.pageSize,
+        pageSizeOptions,
+        onPageSizeChange: pageSizeOptions ? (size) => {
+          pagination.setPageSize(size);
+          onPageSizeChange?.(size);
+        } : onPageSizeChange,
+        className: cn(
+          "ds:border-rule ds:border-t ds:px-3 ds:py-2",
+          classNames.pagination,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+PaginationSlot.displayName = "DataTablePattern.Pagination";
+function BulkActions({ onClear, className, ...props }) {
+  const { table, classNames } = usePattern("BulkActions");
+  return /* @__PURE__ */ jsx(
+    BulkActionBar,
+    {
+      variant: "table-inline",
+      selectedCount: table.selection.count,
+      onClear: onClear ?? table.selection.clear,
+      className: cn(classNames["bulk-actions"], className),
+      ...props
+    }
+  );
+}
+BulkActions.displayName = "DataTablePattern.BulkActions";
+var DataTablePattern = Object.assign(Root26, {
+  Toolbar: Toolbar3,
+  Search,
+  Filters,
+  ColumnsMenu,
+  Content: Content16,
+  Empty: EmptySlot,
+  Loading: LoadingSlot,
+  Error: ErrorSlot,
+  Pagination: PaginationSlot,
+  BulkActions
+});
+function InfoHint({
+  label,
+  children,
+  presentation = "tooltip",
+  icon,
+  size = "xs",
+  side = "top",
+  className,
+  open,
+  onOpenChange
+}) {
+  const trigger = /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      label,
+      variant: "ghost",
+      intent: "neutral",
+      size,
+      className,
+      tooltip: presentation === "tooltip" ? children : label,
+      tooltipSide: side,
+      icon: icon ?? /* @__PURE__ */ jsx(InfoIcon, { "aria-hidden": "true" })
+    }
+  );
+  if (presentation === "tooltip") return trigger;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { side, width: "sm", className: "ds:text-sm", children })
+  ] });
+}
+var ROW_CLASSES = "ds:w-full ds:justify-start";
+function PeoplePicker(props) {
+  const {
+    people,
+    currentUserId,
+    assignToMeLabel,
+    assignToMeSlot,
+    size = "md",
+    ...rest
+  } = props;
+  const messages = useDsMessages("peoplePicker");
+  const byId = React45.useMemo(
+    () => new Map(people.map((person) => [person.id, person])),
+    [people]
+  );
+  const single = props.multiple !== true;
+  const unassignedLabel = single ? props.unassignedLabel : void 0;
+  const setSingle = (value) => {
+    props.onValueChange?.(value);
+  };
+  const shortcuts = assignToMeSlot ?? (single && (currentUserId || unassignedLabel) || !single && currentUserId ? /* @__PURE__ */ jsxs("div", { className: "ds:border-rule ds:border-b ds:p-1", children: [
+    currentUserId && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: cn(ROW_CLASSES, "ds:text-brand"),
+        onClick: () => {
+          if (single) {
+            setSingle(currentUserId);
+            return;
+          }
+          const current = props.value ?? [];
+          if (!current.includes(currentUserId)) {
+            props.onValueChange?.([...current, currentUserId]);
+          }
+        },
+        children: assignToMeLabel ?? messages.assignToMe
+      }
+    ),
+    single && unassignedLabel && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: ROW_CLASSES,
+        onClick: () => setSingle(null),
+        children: unassignedLabel
+      }
+    )
+  ] }) : void 0);
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      ...rest,
+      size,
+      options: people,
+      getOptionValue: (person) => person.id,
+      getOptionLabel: (person) => person.name,
+      getOptionDisabled: (person) => person.disabled === true,
+      getOptionKeywords: (person) => person.description ? [person.description] : [],
+      header: shortcuts,
+      renderOption: (option) => {
+        const person = byId.get(option.value);
+        return /* @__PURE__ */ jsxs("span", { className: "ds:flex ds:min-w-0 ds:items-center ds:gap-2", children: [
+          /* @__PURE__ */ jsx(Avatar, { size: "xs", name: option.label, src: person?.avatarSrc ?? void 0 }),
+          /* @__PURE__ */ jsxs("span", { className: "ds:min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "ds:block ds:truncate", children: option.label }),
+            person?.description && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:block ds:truncate ds:text-xs", children: person.description })
+          ] })
+        ] });
+      },
+      ...single ? {
+        multiple: false,
+        value: props.value,
+        defaultValue: props.defaultValue,
+        onValueChange: (value) => setSingle(value)
+      } : {
+        multiple: true,
+        value: props.value,
+        defaultValue: props.defaultValue,
+        onValueChange: (value) => props.onValueChange?.(value)
+      }
+    }
+  );
+}
 function brandScope(product) {
   return { "data-brand": product };
 }
@@ -25154,6 +26748,6 @@ var BrandScope = forwardRef(function BrandScope2({ product, children, ...props }
 });
 BrandScope.displayName = "BrandScope";
 
-export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArchiveIcon, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrainIcon, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, ConfirmDialog, ConfirmHost, Content14 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag2 as CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DEFAULT_COMBOBOX_MESSAGES, DEFAULT_PHONE_FIELD_MESSAGES, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DesignSystemProvider, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EngagementCard, EngagementTimeline, EngagementTimelineStep, ExternalLinkIcon, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, Field, FieldControl, FieldDescription, FieldError, Fieldset, FieldsetLegend, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, GripVerticalIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, ICON_TILE_TONE_TO_INTENT, IconAction, IconButton, IconTile, InboxIcon, InfoCircleSolidIcon, InfoIcon, Inline, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, Kbd, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayersIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MaximizeIcon, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicIcon, MicrosoftBrandIcon, MinimizeIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelect, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, NumberInput, Numeric, OTPInput, PROGRESS_LEGACY_TO_INTENT, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneField, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Pressable, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, RefreshCwIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SPINNER_TONE_TO_INTENT, STATUS_DOT_TONE_TO_INTENT, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SigmaIcon, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, Stack, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusBadge, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Text, Textarea, ThemeScope, ThumbsDownIcon, ThumbsUpIcon, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, TimerIcon, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrashSolidIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VideoIcon, VisuallyHidden, Volume2Icon, VolumeXIcon, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, assetPath, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, chipVariants2 as chipVariants, cn, colors, createIcon, dateToIso, defineStatusMap, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getAssetBasePath, getFlagEmoji, iconButtonVariants, resolveIconTileVariants as iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, resolveBadgeAppearance, resolveButtonStyle, resolveChipStyle, searchInputVariants, serviceToneLabel, serviceToneStyle, setAssetBasePath, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useConfirm, useDsMessages, useFieldControl, usePrompt, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
+export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, ArchiveIcon, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, AvatarGroup, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrainIcon, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Code, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, ConfirmDialog, ConfirmHost, Content14 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag2 as CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DEFAULT_COMBOBOX_MESSAGES, DEFAULT_PHONE_FIELD_MESSAGES, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTablePattern, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DesignSystemProvider, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EmptyValue, EngagementCard, EngagementTimeline, EngagementTimelineStep, ErrorState, ExternalLinkIcon, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, Field, FieldControl, FieldDescription, FieldError, Fieldset, FieldsetLegend, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, GripVerticalIcon, Heading, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, ICON_TILE_TONE_TO_INTENT, IconAction, IconButton, IconTile, InboxIcon, InfoCircleSolidIcon, InfoHint, InfoIcon, Inline, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, Kbd, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayersIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MaximizeIcon, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicIcon, MicrosoftBrandIcon, MinimizeIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelect, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, NumberInput, Numeric, OTPInput, PROGRESS_LEGACY_TO_INTENT, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PeoplePicker, PhoneCountryInput, PhoneField, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Pressable, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, RefreshCwIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SPINNER_TONE_TO_INTENT, STATUS_DOT_TONE_TO_INTENT, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionCard, SectionHead, SectionHeader, SegmentedControl, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SigmaIcon, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, Stack, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusBadge, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, TableError, TableFooter, TableHead, TableHeader, TableIcon, TableLoading, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Text, Textarea, ThemeScope, ThumbsDownIcon, ThumbsUpIcon, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, TimerIcon, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrashSolidIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VideoIcon, VisuallyHidden, Volume2Icon, VolumeXIcon, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, assetPath, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, chipVariants2 as chipVariants, cn, colors, compareSortValues, createIcon, dateToIso, defineStatusMap, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getAssetBasePath, getFlagEmoji, iconButtonVariants, resolveIconTileVariants as iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, nextSortDirection, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, resolveBadgeAppearance, resolveButtonStyle, resolveChipStyle, searchInputVariants, serviceToneLabel, serviceToneStyle, setAssetBasePath, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useConfirm, useDataTable, useDsMessages, useFieldControl, usePrompt, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map