@proteos/ui 0.78.0 → 0.80.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import { cn, Button, Skeleton } from './chunk-XRN5MNDX.js';
 export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-XRN5MNDX.js';
-import { icons, Contact, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, ChevronLeft, ChevronRight, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, Square, RotateCcw, Pause, Play, RotateCw, AlertCircle, Undo2, ArrowRight, Check, CircleCheck, CircleAlert, Info } from 'lucide-react';
+import { icons, Contact, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, ChevronLeft, ChevronRight, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, Square, RotateCcw, Pause, Play, RotateCw, TriangleAlert, AlertCircle, Plus, Undo2, CornerDownRight, ArrowRight, Check, CircleCheck, CircleAlert, Info } from 'lucide-react';
 import { tv } from 'tailwind-variants';
-import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Calendar as Calendar$1, Button as Button$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, CalendarStateContext, Label, Input as Input$1, ListBox, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, ToggleButtonGroup, ToggleButton, Slider as Slider$1, SliderTrack, SliderThumb, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, DatePickerStateContext } from 'react-aria-components';
+import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Calendar as Calendar$1, Button as Button$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, CalendarStateContext, Label, Input as Input$1, ListBox, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, ToggleButtonGroup, ToggleButton, Slider as Slider$1, SliderTrack, SliderThumb, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, useFilter, Autocomplete, SearchField, MenuSection, Header, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, DatePickerStateContext } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { lazy, createContext, memo, useRef, useEffect, useContext, useState, useMemo, Children, isValidElement, useLayoutEffect, useSyncExternalStore, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
 import { formatAmount, parseAmount } from '@proteos/sdk';
@@ -1663,7 +1663,7 @@ function ChannelIcon({ channel, className, label }) {
   const Icon = channelIcon(channel);
   return label !== void 0 ? /* @__PURE__ */ jsx(Icon, { className: cn("size-4", className), role: "img", "aria-label": label }) : /* @__PURE__ */ jsx(Icon, { className: cn("size-4", className), "aria-hidden": true });
 }
-function Checkbox({ children, className, ...props }) {
+function Checkbox({ children, className, size = "md", ...props }) {
   return /* @__PURE__ */ jsx(
     Checkbox$1,
     {
@@ -1676,8 +1676,9 @@ function Checkbox({ children, className, ...props }) {
         // scroll clipping, and focusing it makes the browser scroll a
         // container the user cannot scroll back (the roles permission
         // matrix, where toggling a row threw the page off-screen).
-        "group relative inline-flex items-center gap-2.5 cursor-pointer",
-        "font-sans text-[14px] text-ink-2 select-none",
+        "group relative inline-flex items-center cursor-pointer",
+        size === "sm" ? "gap-2 text-[13px]" : "gap-2.5 text-[14px]",
+        "font-sans text-ink-2 select-none",
         "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed",
         typeof className === "function" ? className(renderProps) : className
       ),
@@ -1688,7 +1689,8 @@ function Checkbox({ children, className, ...props }) {
             "aria-hidden": true,
             className: cn(
               "relative inline-flex items-center justify-center shrink-0",
-              "size-[18px] rounded-[4px] border bg-surface",
+              size === "sm" ? "size-4" : "size-[18px]",
+              "rounded-[4px] border bg-surface",
               "border-ink-4",
               "transition-[background-color,border-color,box-shadow] duration-150",
               // hovered
@@ -1699,12 +1701,13 @@ function Checkbox({ children, className, ...props }) {
               // focus ring on the box
               "group-data-[focus-visible]:shadow-[var(--shadow-focus)]"
             ),
-            children: renderProps.isIndeterminate ? /* @__PURE__ */ jsx("span", { className: "block h-px w-2.5 bg-surface" }) : /* @__PURE__ */ jsx(
+            children: renderProps.isIndeterminate ? /* @__PURE__ */ jsx("span", { className: cn("block h-px bg-surface", size === "sm" ? "w-2" : "w-2.5") }) : /* @__PURE__ */ jsx(
               "svg",
               {
                 viewBox: "0 0 12 12",
                 className: cn(
-                  "size-3 text-surface transition-opacity duration-150",
+                  size === "sm" ? "size-2.5" : "size-3",
+                  "text-surface transition-opacity duration-150",
                   renderProps.isSelected ? "opacity-100" : "opacity-0"
                 ),
                 "aria-hidden": true,
@@ -7553,7 +7556,7 @@ function RadioGroup({
     }
   );
 }
-function Radio({ children, className, ...props }) {
+function Radio({ children, className, size = "md", ...props }) {
   return /* @__PURE__ */ jsxs(
     Radio$1,
     {
@@ -7563,8 +7566,9 @@ function Radio({ children, className, ...props }) {
         // visually-hidden <input> is absolutely positioned and must resolve
         // against this radio, not a far-away shell, or focusing it scrolls
         // the clipped page.
-        "group relative inline-flex items-center gap-2.5 cursor-pointer",
-        "font-sans text-[14px] text-ink-2 select-none",
+        "group relative inline-flex items-center cursor-pointer",
+        size === "sm" ? "gap-2 text-[13px]" : "gap-2.5 text-[14px]",
+        "font-sans text-ink-2 select-none",
         "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed",
         typeof className === "function" ? className(renderProps) : className
       ),
@@ -7575,7 +7579,8 @@ function Radio({ children, className, ...props }) {
             "aria-hidden": true,
             className: cn(
               "relative inline-flex items-center justify-center shrink-0",
-              "size-[18px] rounded-full border bg-surface border-ink-4",
+              size === "sm" ? "size-4" : "size-[18px]",
+              "rounded-full border bg-surface border-ink-4",
               "transition-[border-color,box-shadow] duration-150",
               "group-data-[hovered]:border-ink",
               "group-data-[selected]:border-ink",
@@ -7585,7 +7590,8 @@ function Radio({ children, className, ...props }) {
               "span",
               {
                 className: cn(
-                  "block size-[10px] rounded-full bg-accent",
+                  size === "sm" ? "size-2" : "size-[10px]",
+                  "block rounded-full bg-accent",
                   "transition-opacity duration-150 opacity-0",
                   "group-data-[selected]:opacity-100"
                 )
@@ -9667,99 +9673,321 @@ function InlineAddFilter({ onClick }) {
     }
   );
 }
-var recordUpdateStyles = tv({
+var avaActionReviewStyles = tv({
   slots: {
-    root: "flex flex-col min-w-0 text-ink",
-    summary: "px-4 pt-3 pb-1 text-[13px] text-ink-3",
-    rows: "flex flex-col px-4 divide-y divide-rule",
+    root: "@container flex h-full min-h-0 min-w-0 flex-1 flex-col text-ink",
+    // In a short host the head gives way and scrolls before the body would
+    // collapse and push the foot out of the box (a long summary, many problems).
+    head: [
+      "flex min-h-0 flex-col gap-1.5 overflow-y-auto [scrollbar-width:thin] [&>*]:shrink-0",
+      "border-b border-rule-2 px-3 pt-3 pb-2.5 @md:px-4"
+    ],
+    title: "flex min-w-0 items-baseline gap-2",
+    eyebrow: "shrink-0 font-mono text-[10.5px] font-medium uppercase tracking-[0.08em] text-ink-4",
+    titleText: "min-w-0 flex-1 truncate text-[13.5px] font-medium",
+    titleAction: "shrink-0 self-center",
+    reason: "text-[12px] leading-[1.4] text-ink-3",
+    summary: "text-[13px] leading-[1.45] text-ink-2",
+    summaryMore: "flex flex-wrap items-baseline gap-2.5",
+    summaryMeta: "font-mono text-[11px] leading-[1.4] text-ink-3",
+    problem: [
+      "flex gap-1.5 rounded-sm px-2 py-1 text-[12.5px] leading-[1.4] text-warning",
+      "bg-[color-mix(in_oklab,var(--color-warning)_10%,var(--color-surface))]"
+    ],
+    body: "min-h-20 flex-1 overflow-y-auto [scrollbar-width:thin]",
+    rows: "flex flex-col px-3 @md:px-4",
     errors: [
-      "mx-4 my-3 flex gap-2 rounded-md px-3 py-2 text-[13px] text-danger",
+      "mx-3 mt-2.5 flex gap-2 rounded-md px-3 py-2 text-[13px] text-danger @md:mx-4",
       "bg-[color-mix(in_oklab,var(--color-danger)_8%,var(--color-surface))]"
     ],
-    footer: "flex items-center justify-end gap-2 px-4 py-3"
+    footer: "flex shrink-0 flex-wrap items-center justify-between gap-1.5 border-t border-rule-2 px-3 py-2 @md:px-4",
+    actions: "ml-auto flex items-center gap-1",
+    hint: "basis-full text-[12px] leading-[1.35] text-ink-3"
   }
 });
-var recordUpdateRowStyles = tv({
+var avaActionReviewRowStyles = tv({
   slots: {
-    // fieldset resets (UA border / padding / min-content width) included.
-    root: "flex flex-col gap-1.5 m-0 border-0 px-0 py-2.5 min-w-0",
+    // fieldset resets (UA border / padding / min-content width) included. The
+    // hairline comes after `border-0`: a row's own reset would otherwise beat
+    // a divider set on its parent.
+    root: "m-0 flex min-w-0 flex-col gap-1.5 border-0 border-t border-rule-2 px-0 pt-2 pb-2.5 first:border-t-0",
     labelRow: [
-      "flex items-center gap-2 min-h-7",
+      "flex min-h-7 items-center gap-2",
       "font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-4"
     ],
-    tag: "normal-case tracking-normal text-[10px] rounded-full px-1.5 py-px",
-    cells: "grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 sm:gap-3",
-    from: "min-w-0 opacity-70",
-    arrow: "size-3.5 shrink-0 text-ink-4 rotate-90 sm:rotate-0 justify-self-center",
+    tag: "rounded-full px-1.5 py-px text-[10px] normal-case tracking-normal",
+    cells: "grid grid-cols-[16px_minmax(0,1fr)] items-start gap-x-1.5 gap-y-1",
+    from: "col-span-full min-w-0",
+    arrow: "flex h-8 items-center justify-center text-ink-4 [&_svg]:size-3.5",
+    arrowStacked: "",
+    arrowBeside: "hidden",
     to: "min-w-0",
-    hint: "text-[12px] text-ink-4",
+    hint: "text-[12px] text-ink-3",
     error: "text-[12px] text-danger",
-    removed: "text-[13px] italic text-ink-4"
+    removed: "whitespace-nowrap font-sans text-[12.5px] italic normal-case tracking-normal"
   },
   variants: {
     state: {
       changed: {},
+      added: {
+        tag: "bg-surface-2 text-ink-3"
+      },
       unresolved: {
-        tag: "text-warning bg-[color-mix(in_oklab,var(--color-warning)_12%,var(--color-surface))]"
+        tag: "bg-[color-mix(in_oklab,var(--color-warning)_12%,var(--color-surface))] text-warning"
       },
       rejected: {
-        tag: "text-danger bg-[color-mix(in_oklab,var(--color-danger)_10%,var(--color-surface))]"
+        tag: "bg-[color-mix(in_oklab,var(--color-danger)_10%,var(--color-surface))] text-danger"
       },
-      removed: { labelRow: "line-through decoration-ink-4/60" }
+      removed: { root: "pt-0.5 pb-0.5" }
+    },
+    /** Long values read better one above the other at any width. */
+    isLong: {
+      false: {
+        cells: "@md:grid-cols-[minmax(0,1fr)_14px_minmax(0,1fr)] @md:gap-x-2.5 @md:gap-y-0",
+        from: "@md:col-auto",
+        arrowStacked: "@md:hidden",
+        arrowBeside: "@md:block"
+      },
+      true: {}
     }
   },
-  defaultVariants: { state: "changed" }
+  defaultVariants: { state: "changed", isLong: false }
 });
-function RecordUpdate({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn(recordUpdateStyles().root(), className), children });
+function AvaActionReview({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(avaActionReviewStyles().root(), className), children });
+}
+function AvaActionReviewHead({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(avaActionReviewStyles().head(), className), children });
 }
-function RecordUpdateSummary({
+function AvaActionReviewTitle({
+  eyebrow,
+  action,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("p", { ...props, className: cn(recordUpdateStyles().summary(), className), children });
+  const styles4 = avaActionReviewStyles();
+  return /* @__PURE__ */ jsxs("div", { ...props, className: cn(styles4.title(), className), children: [
+    eyebrow ? /* @__PURE__ */ jsx("span", { className: styles4.eyebrow(), children: eyebrow }) : null,
+    /* @__PURE__ */ jsx("span", { className: styles4.titleText(), children }),
+    action ? /* @__PURE__ */ jsx("span", { className: styles4.titleAction(), children: action }) : null
+  ] });
 }
-function RecordUpdateRows({
+function AvaActionReviewReason({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn(recordUpdateStyles().rows(), className), children });
+  return /* @__PURE__ */ jsx("p", { ...props, className: cn(avaActionReviewStyles().reason(), className), children });
 }
-function RecordUpdateErrors({ errors, className, ...props }) {
+function AvaActionReviewSummary({
+  meta,
+  moreLabel = "More",
+  lessLabel = "Less",
+  className,
+  children,
+  ...props
+}) {
+  const styles4 = avaActionReviewStyles();
+  const textRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isClamped, setIsClamped] = useState(false);
+  useLayoutEffect(() => {
+    const text = textRef.current;
+    if (!text || isOpen) return;
+    const measure = () => setIsClamped(text.scrollHeight > text.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(text);
+    return () => observer.disconnect();
+  }, [isOpen, children]);
+  const canToggle = isOpen || isClamped;
+  return /* @__PURE__ */ jsxs("div", { ...props, className: cn("flex flex-col gap-1", className), children: [
+    children ? /* @__PURE__ */ jsx("p", { ref: textRef, className: cn(styles4.summary(), !isOpen && "line-clamp-2"), children }) : null,
+    canToggle || meta ? /* @__PURE__ */ jsxs("div", { className: styles4.summaryMore(), children: [
+      canToggle ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "link",
+          size: "sm",
+          className: "h-auto py-0 text-[12.5px]",
+          "aria-expanded": isOpen,
+          onPress: () => setIsOpen((open) => !open),
+          children: isOpen ? lessLabel : moreLabel
+        }
+      ) : null,
+      meta ? /* @__PURE__ */ jsx("span", { className: styles4.summaryMeta(), children: meta }) : null
+    ] }) : null
+  ] });
+}
+function AvaActionReviewProblem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { ...props, className: cn(avaActionReviewStyles().problem(), className), children: [
+    /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-[3px] size-3 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+  ] });
+}
+function AvaActionReviewBody({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(avaActionReviewStyles().body(), className), children });
+}
+function AvaActionReviewRows({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(avaActionReviewStyles().rows(), className), children });
+}
+function AvaActionReviewErrors({ errors, className, ...props }) {
   if (errors.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { ...props, role: "alert", className: cn(recordUpdateStyles().errors(), className), children: [
-    /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 shrink-0 mt-px", "aria-hidden": true }),
-    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 min-w-0", children: errors.map((error) => /* @__PURE__ */ jsx("li", { children: error }, error)) })
+  return /* @__PURE__ */ jsxs("div", { ...props, role: "alert", className: cn(avaActionReviewStyles().errors(), className), children: [
+    /* @__PURE__ */ jsx(AlertCircle, { className: "mt-px size-4 shrink-0", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("ul", { className: "flex min-w-0 flex-col gap-1", children: errors.map((error) => /* @__PURE__ */ jsx("li", { children: error }, error)) })
   ] });
 }
-function RecordUpdateFooter({
+function AvaActionReviewFooter({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(avaActionReviewStyles().footer(), className), children });
+}
+function AvaActionReviewActions({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(avaActionReviewStyles().actions(), className), children });
+}
+function AvaActionReviewHint({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: cn(recordUpdateStyles().footer(), className), children });
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn(avaActionReviewStyles().hint(), className), children });
 }
-function RecordUpdateRow({
+function AvaActionReviewAddField({
+  groups,
+  onPick,
+  id,
+  isDisabled = false,
+  label = "Add field",
+  searchLabel = "Find a field",
+  emptyText = "No other fields match."
+}) {
+  const { contains } = useFilter({ sensitivity: "base" });
+  return /* @__PURE__ */ jsxs(DialogTrigger, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ...id !== void 0 ? { id } : {},
+        variant: "ghost",
+        size: "sm",
+        className: "px-1.5",
+        isDisabled,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+          label
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover$1,
+      {
+        placement: "top start",
+        offset: 6,
+        className: cn(
+          "w-[260px] max-w-[calc(100vw-2rem)] rounded-md border border-rule bg-surface p-1",
+          "shadow-[var(--shadow-float)] outline-none",
+          "entering:animate-enter-slide-up exiting:animate-exit-slide-up"
+        ),
+        children: /* @__PURE__ */ jsx(Dialog, { "aria-label": label, className: "flex max-h-[290px] flex-col outline-none", children: ({ close }) => /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
+          /* @__PURE__ */ jsxs(
+            SearchField,
+            {
+              "aria-label": searchLabel,
+              autoFocus: true,
+              className: cn(
+                "mb-1 flex shrink-0 items-center gap-1.5 rounded-sm border border-rule px-2 py-1",
+                "focus-within:border-accent"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Search, { className: "size-3.5 shrink-0 text-ink-4", "aria-hidden": true }),
+                /* @__PURE__ */ jsx(
+                  Input$1,
+                  {
+                    placeholder: searchLabel,
+                    className: "w-full min-w-0 bg-transparent text-[13px] outline-none placeholder:text-ink-4"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Menu,
+            {
+              "aria-label": label,
+              className: "min-h-0 overflow-y-auto [scrollbar-width:thin]",
+              onAction: (key) => {
+                onPick(String(key));
+                close();
+              },
+              renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 text-[12.5px] text-ink-3", children: emptyText }),
+              children: groups.map((group, index) => /* @__PURE__ */ jsxs(MenuSection, { children: [
+                group.label ? /* @__PURE__ */ jsx(Header, { className: "px-2.5 pt-2 pb-1 font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-4", children: group.label }) : null,
+                group.options.map((option) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    id: option.id,
+                    textValue: option.label,
+                    ...option.icon ? { icon: option.icon } : {},
+                    children: option.label
+                  },
+                  option.id
+                ))
+              ] }, group.label ?? index))
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}
+function AvaActionReviewRow({
   label,
   from,
   to,
   state = "changed",
+  isLong = false,
   hint,
   errorMessage,
   onRemove,
   onRestore,
   removeLabel = "Remove change",
   restoreLabel = "Restore change",
+  fromLabel = "Current",
+  toLabel = "New",
+  addedLabel = "added",
   unresolvedLabel = "needs a value",
   rejectedLabel = "not possible",
   removedText = "Kept as it is",
   className,
   ...props
 }) {
-  const styles4 = recordUpdateRowStyles({ state });
+  const styles4 = avaActionReviewRowStyles({ state, isLong });
   const isRemoved = state === "removed";
+  const hasCells = from !== void 0 && state !== "rejected";
   return /* @__PURE__ */ jsxs(
     "fieldset",
     {
@@ -9769,7 +9997,9 @@ function RecordUpdateRow({
       className: cn(styles4.root(), className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: styles4.labelRow(), children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: isRemoved ? /* @__PURE__ */ jsx("s", { children: label }) : label }),
+          isRemoved ? /* @__PURE__ */ jsx("span", { className: styles4.removed(), children: removedText }) : null,
+          state === "added" ? /* @__PURE__ */ jsx("span", { className: styles4.tag(), children: addedLabel }) : null,
           state === "unresolved" ? /* @__PURE__ */ jsx("span", { className: styles4.tag(), children: unresolvedLabel }) : null,
           state === "rejected" ? /* @__PURE__ */ jsx("span", { className: styles4.tag(), children: rejectedLabel }) : null,
           /* @__PURE__ */ jsx("span", { className: "ml-auto flex items-center", children: isRemoved ? onRestore && /* @__PURE__ */ jsx(
@@ -9783,11 +10013,20 @@ function RecordUpdateRow({
             }
           ) : onRemove && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": removeLabel, onPress: onRemove, children: /* @__PURE__ */ jsx(X, {}) }) })
         ] }),
-        isRemoved ? /* @__PURE__ */ jsx("div", { className: styles4.removed(), children: removedText }) : from === void 0 ? /* @__PURE__ */ jsx("div", { className: styles4.to(), children: to }) : /* @__PURE__ */ jsxs("div", { className: styles4.cells(), children: [
-          /* @__PURE__ */ jsx("div", { className: styles4.from(), children: from }),
-          /* @__PURE__ */ jsx(ArrowRight, { className: styles4.arrow(), "aria-hidden": true }),
-          /* @__PURE__ */ jsx("div", { className: styles4.to(), children: to })
-        ] }),
+        isRemoved ? null : hasCells ? /* @__PURE__ */ jsxs("div", { className: styles4.cells(), children: [
+          /* @__PURE__ */ jsxs("div", { className: styles4.from(), children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: fromLabel }),
+            from
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles4.arrow(), "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx(CornerDownRight, { className: styles4.arrowStacked() }),
+            /* @__PURE__ */ jsx(ArrowRight, { className: styles4.arrowBeside() })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles4.to(), children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: toLabel }),
+            to
+          ] })
+        ] }) : /* @__PURE__ */ jsx("div", { className: styles4.to(), children: to }),
         !isRemoved && hint ? /* @__PURE__ */ jsx("div", { className: styles4.hint(), children: hint }) : null,
         !isRemoved && errorMessage ? /* @__PURE__ */ jsx("div", { className: styles4.error(), role: "alert", children: errorMessage }) : null
       ]
@@ -9915,6 +10154,7 @@ function Switch({
   children,
   labelPlacement = "end",
   description,
+  size = "md",
   className,
   ...props
 }) {
@@ -9930,8 +10170,9 @@ function Switch({
         // without a positioned label it escapes an overflow-auto ancestor and
         // its containing block becomes the page shell, so focusing it (any
         // press) scrolls the clipped shell and the whole tab goes blank.
-        "group relative inline-flex items-center gap-3 cursor-pointer select-none",
-        "font-sans text-[14px] text-ink-2",
+        "group relative inline-flex items-center cursor-pointer select-none",
+        size === "sm" ? "gap-2 text-[13px]" : "gap-3 text-[14px]",
+        "font-sans text-ink-2",
         labelPlacement === "start" && "flex-row-reverse",
         "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed",
         typeof className === "function" ? className(renderProps) : className
@@ -9943,7 +10184,8 @@ function Switch({
             "aria-hidden": true,
             className: cn(
               "relative inline-block shrink-0",
-              "w-[38px] h-[22px] rounded-pill border",
+              size === "sm" ? "w-8 h-[18px]" : "w-[38px] h-[22px]",
+              "rounded-pill border",
               "bg-surface-3 border-rule",
               "transition-[background-color,border-color] duration-150",
               "group-data-[selected]:bg-accent group-data-[selected]:border-accent",
@@ -9954,9 +10196,9 @@ function Switch({
               {
                 className: cn(
                   "absolute top-[1px] left-[1px]",
-                  "block size-[18px] rounded-full bg-surface",
+                  "block rounded-full bg-surface",
                   "transition-transform duration-200",
-                  "group-data-[selected]:translate-x-[16px]"
+                  size === "sm" ? "size-3.5 group-data-[selected]:translate-x-[14px]" : "size-[18px] group-data-[selected]:translate-x-[16px]"
                 )
               }
             )
@@ -9976,8 +10218,8 @@ function Switch({
         className: cn(
           fieldHintStyles,
           "leading-[1.45]",
-          // Track (38px) + gap-3 (12px): the copy starts under the label text.
-          labelPlacement === "end" && "pl-[50px]",
+          // Track + gap: the copy starts under the label text.
+          labelPlacement === "end" && (size === "sm" ? "pl-10" : "pl-[50px]"),
           props.isDisabled && "opacity-45"
         ),
         children: description
@@ -10347,6 +10589,6 @@ function ToastRegion({ queue, className }) {
   );
 }
 
-export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, AvailabilityCalendar, Avatar, AvatarGroup, Badge, BadgeAction, BadgeGroup, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, CONVERSATION_BRIEF_OUTCOME_LABEL, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, ConversationBriefCard, ConversationBriefPreview, ConversationBriefReview, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, FrameStrip, GlowFrame, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, MAX_DECODE_BYTES, MediaControls, MediaMarkerTrack, MediaPlayer, MediaStage, MediaTimeline, MediaVideoStage, MediaWaveform, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, ProgressRing, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RecordUpdate, RecordUpdateErrors, RecordUpdateFooter, RecordUpdateRow, RecordUpdateRows, RecordUpdateSummary, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, Slider, Stepper, StepperStep, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, TextShimmer, Textarea, TimeField, TimeSlotList, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, availabilityCalendarStyles, avatarGroupStyles, avatarStyles, badgeGroupOverflowStyles, badgeGroupStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, contactPhoneNumbers, conversationBriefCardStyles, conversationBriefOutcomeFor, countLeaves, createConversationBriefClient, createDraftMessageClient, createToastQueue, currentMediaMarkers, decodePeaks, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, fitBadgeCount, fitMediaBox, formatFileSize, formatMediaTime, formatValue, frameStripStyles, getPlatform, glowFrameStyles, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDialableConversationBrief, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, maskPeaks, mediaControlsStyles, mediaMarkersStyles, mediaPlayerStyles, mediaTimelineStyles, mediaVideoStageStyles, mediaWaveformStyles, messageComposerStyles, namesOf, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, peaksFromChannels, progressBarStyles, progressRingStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, recordUpdateRowStyles, recordUpdateStyles, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, sliderStyles, spokenMediaTime, stepperStyles, subscribeDraftMessageOutcome, summaryFor, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, textShimmerStyles, timeSlotListStyles, toastStyles, updateLeaf, updateSubgroup, useActiveCommands, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useMediaPlayer, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
+export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, AvaActionReview, AvaActionReviewActions, AvaActionReviewAddField, AvaActionReviewBody, AvaActionReviewErrors, AvaActionReviewFooter, AvaActionReviewHead, AvaActionReviewHint, AvaActionReviewProblem, AvaActionReviewReason, AvaActionReviewRow, AvaActionReviewRows, AvaActionReviewSummary, AvaActionReviewTitle, AvailabilityCalendar, Avatar, AvatarGroup, Badge, BadgeAction, BadgeGroup, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, CONVERSATION_BRIEF_OUTCOME_LABEL, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, ConversationBriefCard, ConversationBriefPreview, ConversationBriefReview, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, FrameStrip, GlowFrame, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, MAX_DECODE_BYTES, MediaControls, MediaMarkerTrack, MediaPlayer, MediaStage, MediaTimeline, MediaVideoStage, MediaWaveform, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, ProgressRing, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, Slider, Stepper, StepperStep, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, TextShimmer, Textarea, TimeField, TimeSlotList, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avaActionReviewRowStyles, avaActionReviewStyles, availabilityCalendarStyles, avatarGroupStyles, avatarStyles, badgeGroupOverflowStyles, badgeGroupStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, contactPhoneNumbers, conversationBriefCardStyles, conversationBriefOutcomeFor, countLeaves, createConversationBriefClient, createDraftMessageClient, createToastQueue, currentMediaMarkers, decodePeaks, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, fitBadgeCount, fitMediaBox, formatFileSize, formatMediaTime, formatValue, frameStripStyles, getPlatform, glowFrameStyles, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDialableConversationBrief, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, maskPeaks, mediaControlsStyles, mediaMarkersStyles, mediaPlayerStyles, mediaTimelineStyles, mediaVideoStageStyles, mediaWaveformStyles, messageComposerStyles, namesOf, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, peaksFromChannels, progressBarStyles, progressRingStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, sliderStyles, spokenMediaTime, stepperStyles, subscribeDraftMessageOutcome, summaryFor, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, textShimmerStyles, timeSlotListStyles, toastStyles, updateLeaf, updateSubgroup, useActiveCommands, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useMediaPlayer, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map