@homebound/beam 3.103.0 → 3.104.0

package/dist/index.js

@@ -8163,6 +8163,34 @@ function InlineLabel({
   ] });
 }
 
+// src/components/ProposedValue.tsx
+import { trussProps as trussProps20 } from "@homebound/truss/runtime";
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+function ProposedValue(props) {
+  const {
+    original,
+    proposed
+  } = props;
+  const tid = useTestIds(props, "proposedValue");
+  return /* @__PURE__ */ jsxs13("span", { ...tid, children: [
+    original && /* @__PURE__ */ jsxs13(Fragment7, { children: [
+      /* @__PURE__ */ jsx27("span", { ...trussProps20({
+        textDecoration: "tdlt",
+        color: ["color_var", {
+          "--color": "var(--b-on-surface-muted)"
+        }]
+      }), ...tid.original, children: original }),
+      " "
+    ] }),
+    /* @__PURE__ */ jsx27("span", { ...trussProps20({
+      fontWeight: "fw6",
+      color: ["color_var", {
+        "--color": "var(--b-ai-field-fg)"
+      }]
+    }), ...tid.proposed, children: proposed })
+  ] });
+}
+
 // src/components/Table/components/Row.tsx
 import { observer } from "mobx-react";
 import React7, { useCallback as useCallback8, useContext as useContext12, useRef as useRef11 } from "react";
@@ -8171,10 +8199,10 @@ import { mergeProps as mergeProps5 } from "react-aria";
 // src/components/Table/components/cell.tsx
 import { Link as Link2 } from "react-router-dom";
 import { mergeProps as mergeProps4 } from "@homebound/truss/runtime";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ jsx27(Cell, { ...mergeProps4(classNames, void 0, {
+  return /* @__PURE__ */ jsx28(Cell, { ...mergeProps4(classNames, void 0, {
     ...css2,
     ...{
       cursor: "cursor_default"
@@ -8185,7 +8213,7 @@ var defaultRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "th" : "div";
-  return /* @__PURE__ */ jsx27(Cell, { ...mergeProps4(classNames, void 0, {
+  return /* @__PURE__ */ jsx28(Cell, { ...mergeProps4(classNames, void 0, {
     ...css2
   }), ...as === "table" && {
     colSpan
@@ -8194,15 +8222,15 @@ var headerRenderFn = (column2, as, colSpan) => (key, css2, content, row, rowStyl
 var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const to = rowStyle.rowLink(row);
   if (as === "table") {
-    return /* @__PURE__ */ jsx27("td", { ...mergeProps4(classNames, void 0, {
+    return /* @__PURE__ */ jsx28("td", { ...mergeProps4(classNames, void 0, {
       ...css2
-    }), colSpan, children: /* @__PURE__ */ jsx27(Link2, { to, ...mergeProps4(navLink, void 0, {
+    }), colSpan, children: /* @__PURE__ */ jsx28(Link2, { to, ...mergeProps4(navLink, void 0, {
       textDecoration: "tdn",
       color: "color_unset",
       display: "db"
     }), children: content }) }, key);
   }
-  return /* @__PURE__ */ jsx27(Link2, { to, ...mergeProps4(`${navLink} ${classNames}`, void 0, {
+  return /* @__PURE__ */ jsx28(Link2, { to, ...mergeProps4(`${navLink} ${classNames}`, void 0, {
     ...{
       textDecoration: "tdn",
       color: "color_unset"
@@ -8212,7 +8240,7 @@ var rowLinkRenderFn = (as, colSpan) => (key, css2, content, row, rowStyle, class
 };
 var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle, classNames, onClick, tooltip) => {
   const Cell = as === "table" ? "td" : "div";
-  return /* @__PURE__ */ jsx27(Cell, { ...mergeProps4(classNames, void 0, {
+  return /* @__PURE__ */ jsx28(Cell, { ...mergeProps4(classNames, void 0, {
     ...css2
   }), onClick: (e) => {
     rowStyle.onClick(row, api);
@@ -8224,8 +8252,8 @@ var rowClickRenderFn = (as, api, colSpan) => (key, css2, content, row, rowStyle,
 
 // src/components/Table/components/ColumnResizeHandle.tsx
 import { useCallback as useCallback7, useContext as useContext10, useEffect as useEffect7, useRef as useRef10, useState as useState11 } from "react";
-import { trussProps as trussProps20, maybeCssVar as maybeCssVar10 } from "@homebound/truss/runtime";
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+import { trussProps as trussProps21, maybeCssVar as maybeCssVar10 } from "@homebound/truss/runtime";
+import { Fragment as Fragment8, jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 function findScrollableParent(element) {
   if (!element) return null;
   let parent = element.parentElement;
@@ -8388,8 +8416,8 @@ function ColumnResizeHandle({
       document.body.style.userSelect = "";
     };
   }, []);
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    /* @__PURE__ */ jsx28("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...trussProps20({
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    /* @__PURE__ */ jsx29("div", { ref: handleRef, onMouseDown: handleMouseDown, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => !isDragging && setIsHovering(false), ...trussProps21({
       position: "absolute",
       top: "top0",
       bottom: "bottom0",
@@ -8406,7 +8434,7 @@ function ColumnResizeHandle({
         }]
       } : {}
     }), ...tid.handle, "data-column-id": columnId, "data-column-index": columnIndex }),
-    isDragging && guideLineX !== null && /* @__PURE__ */ jsx28("div", { ...trussProps20({
+    isDragging && guideLineX !== null && /* @__PURE__ */ jsx29("div", { ...trussProps21({
       position: "fixed",
       top: ["top_var", {
         "--top": `${guideLineTop}px`
@@ -8432,8 +8460,8 @@ function ColumnResizeHandle({
 
 // src/components/Table/components/KeptGroupRow.tsx
 import { useContext as useContext11 } from "react";
-import { trussProps as trussProps21, maybeCssVar as maybeCssVar11 } from "@homebound/truss/runtime";
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+import { trussProps as trussProps22, maybeCssVar as maybeCssVar11 } from "@homebound/truss/runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var __maybeInc5 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -8451,7 +8479,7 @@ function KeptGroupRow(props) {
     tableState
   } = useContext11(TableStateContext);
   const numHiddenSelectedRows = useComputed(() => tableState.keptRows.length, [tableState]);
-  return /* @__PURE__ */ jsx29(CellTag, { ...trussProps21({
+  return /* @__PURE__ */ jsx30(CellTag, { ...trussProps22({
     ...style.cellCss,
     ...style.betweenRowsCss,
     ...isLastBodyRow && style.lastRowCellCss,
@@ -8466,10 +8494,10 @@ function KeptGroupRow(props) {
     }
   }), ...as === "table" ? {
     colSpan
-  } : {}, children: /* @__PURE__ */ jsxs14("div", { className: "df aic gap_12px", children: [
-    /* @__PURE__ */ jsx29("div", { className: "w_38px df jcc", children: /* @__PURE__ */ jsx29(CollapseToggle, { row, compact: true }) }),
-    /* @__PURE__ */ jsxs14("div", { className: "df aic gap1", children: [
-      /* @__PURE__ */ jsx29(Icon, { icon: "infoCircle", inc: 2 }),
+  } : {}, children: /* @__PURE__ */ jsxs15("div", { className: "df aic gap_12px", children: [
+    /* @__PURE__ */ jsx30("div", { className: "w_38px df jcc", children: /* @__PURE__ */ jsx30(CollapseToggle, { row, compact: true }) }),
+    /* @__PURE__ */ jsxs15("div", { className: "df aic gap1", children: [
+      /* @__PURE__ */ jsx30(Icon, { icon: "infoCircle", inc: 2 }),
       `${numHiddenSelectedRows} selected ${pluralize(numHiddenSelectedRows, "row")} hidden due to filters`
     ] })
   ] }) });
@@ -8950,8 +8978,8 @@ function resolveStyles(style) {
 
 // src/components/Table/components/Row.tsx
 import { useDebouncedCallback as useDebouncedCallback2 } from "use-debounce";
-import { trussProps as trussProps22, mergeProps as mergeProps_12, maybeCssVar as maybeCssVar_12 } from "@homebound/truss/runtime";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { trussProps as trussProps23, mergeProps as mergeProps_12, maybeCssVar as maybeCssVar_12 } from "@homebound/truss/runtime";
+import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var __maybeInc6 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -9123,12 +9151,12 @@ function RowImpl(props) {
   const ref = useRef11(null);
   const dragOverCallback = useCallback8((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = useDebouncedCallback2(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ jsx30(RowTag, { ...mergeProps_12(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx30(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ jsx31(RowTag, { ...mergeProps_12(`${BorderHoverParent}${showRowHoverColor ? ` ${RowHoverClass}` : ""}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx31(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
       expandColumnHidden = true;
-      return /* @__PURE__ */ jsx30(Fragment8, {});
+      return /* @__PURE__ */ jsx31(Fragment9, {});
     }
     const numExpandedColumns = isExpanded ? tableState.numberOfExpandedChildren(maybeExpandedColumn.id) ? (
       // Subtract 1 if the column is hidden on expand, since we're not rendering it.
@@ -9309,24 +9337,24 @@ function RowImpl(props) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
       const currentWidthPx = parseWidthToPx(currentSizeStr, void 0) ?? resizedWidths?.[column2.id] ?? minWidthPx;
-      const cellElementWithHandle = React7.cloneElement(cellElement, mergeProps5(cellElement.props, trussProps22({
+      const cellElementWithHandle = React7.cloneElement(cellElement, mergeProps5(cellElement.props, trussProps23({
         ...!maybeSticky && {
           position: "relative"
         }
       }), {
-        children: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+        children: /* @__PURE__ */ jsxs16(Fragment9, { children: [
           cellElement.props.children,
-          /* @__PURE__ */ jsx30(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
+          /* @__PURE__ */ jsx31(ColumnResizeHandle, { columnId: column2.id, columnIndex, currentWidth: currentWidthPx, minWidth: minWidthPx, onResize: (colId, width2) => setResizedWidth?.(colId, width2, columnIndex), calculatePreviewWidth })
         ] })
       }));
       return cellElementWithHandle;
     }
     return cellElement;
   }) });
-  return row.draggable ? /* @__PURE__ */ jsx30(
+  return row.draggable ? /* @__PURE__ */ jsx31(
     "div",
     {
-      ...trussProps22(containerCss),
+      ...trussProps23(containerCss),
       onDrop: (evt) => onDrop?.(row, evt),
       onDragEnter: (evt) => onDragEnter?.(row, evt),
       onDragOver: (evt) => {
@@ -9335,7 +9363,7 @@ function RowImpl(props) {
       },
       children: RowContent()
     }
-  ) : /* @__PURE__ */ jsx30(Fragment8, { children: RowContent() });
+  ) : /* @__PURE__ */ jsx31(Fragment9, { children: RowContent() });
 }
 var Row = observer(RowImpl);
 var BorderHoverParent = "beam-bhp";
@@ -9365,8 +9393,8 @@ function useLabelSuffix(required, readOnly) {
 
 // src/inputs/ErrorMessage.tsx
 import { VisuallyHidden as VisuallyHidden2 } from "react-aria";
-import { trussProps as trussProps23 } from "@homebound/truss/runtime";
-import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { trussProps as trussProps24 } from "@homebound/truss/runtime";
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function ErrorMessage(props) {
   const {
     id,
@@ -9374,7 +9402,7 @@ function ErrorMessage(props) {
     hidden = false,
     ...others
   } = props;
-  const errorEl = errorMsg ? /* @__PURE__ */ jsxs16("div", { ...trussProps23({
+  const errorEl = errorMsg ? /* @__PURE__ */ jsxs17("div", { ...trussProps24({
     color: ["color_var", {
       "--color": "var(--b-danger)"
     }],
@@ -9384,38 +9412,10 @@ function ErrorMessage(props) {
     display: "df",
     marginTop: "mt_4px"
   }), children: [
-    /* @__PURE__ */ jsx31("span", { className: "fs0", children: /* @__PURE__ */ jsx31(Icon, { icon: "error" }) }),
-    /* @__PURE__ */ jsx31("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
-  ] }) : /* @__PURE__ */ jsx31(Fragment9, {});
-  return hidden ? /* @__PURE__ */ jsx31(VisuallyHidden2, { children: errorEl }) : errorEl;
-}
-
-// src/inputs/internal/ProposedValue.tsx
-import { trussProps as trussProps24 } from "@homebound/truss/runtime";
-import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
-function ProposedValue(props) {
-  const {
-    original,
-    proposed
-  } = props;
-  const tid = useTestIds(props, "proposedValue");
-  return /* @__PURE__ */ jsxs17("span", { ...tid, children: [
-    original && /* @__PURE__ */ jsxs17(Fragment10, { children: [
-      /* @__PURE__ */ jsx32("span", { ...trussProps24({
-        textDecoration: "tdlt",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface-muted)"
-        }]
-      }), ...tid.original, children: original }),
-      " "
-    ] }),
-    /* @__PURE__ */ jsx32("span", { ...trussProps24({
-      fontWeight: "fw6",
-      color: ["color_var", {
-        "--color": "var(--b-ai-field-fg)"
-      }]
-    }), ...tid.proposed, children: proposed })
-  ] });
+    /* @__PURE__ */ jsx32("span", { className: "fs0", children: /* @__PURE__ */ jsx32(Icon, { icon: "error" }) }),
+    /* @__PURE__ */ jsx32("span", { id, className: "ml1 mt_2px", ...others, children: errorMsg })
+  ] }) : /* @__PURE__ */ jsx32(Fragment10, {});
+  return hidden ? /* @__PURE__ */ jsx32(VisuallyHidden2, { children: errorEl }) : errorEl;
 }
 
 // src/inputs/utils.ts
@@ -17601,6 +17601,7 @@ function TableCardView(props) {
     aiMode = false
   } = props;
   const tid = useTestIds(props, "tableCardView");
+  const titleText = typeof title === "string" ? title : title.proposed;
   const action = to || onClick;
   const progressValue = useMemo27(() => progress !== void 0 ? clampProgress(progress) : 0, [progress]);
   const shownFooter = shownInteractiveFooter(interactiveFooter);
@@ -17613,7 +17614,7 @@ function TableCardView(props) {
   } = useFocusRing11();
   const actionAttrs = {
     ...tid.action,
-    "aria-label": title,
+    "aria-label": titleText,
     // `getButtonOrLink` renders its `<button>` without a type, which would default to submit inside a form.
     type: typeof action === "string" ? void 0 : "button",
     ...trussProps63(contentStyles),
@@ -17627,7 +17628,7 @@ function TableCardView(props) {
       borderBottomStyle: "bbs_solid",
       borderBottomWidth: "bbw_1px",
       borderColor: ["bc_var", {
-        "--borderColor": "var(--b-field-border-default)"
+        "--borderColor": maybeCssVar31(aiMode ? "--b-ai-field-bg" /* AiFieldBg */ : "--b-field-border-default" /* FieldBorderDefault */)
       }],
       overflow: "oh",
       borderRadius: "borderRadius_12px_12px_0_0"
@@ -17638,7 +17639,7 @@ function TableCardView(props) {
         objectFit: ["objectFit_var", {
           "--objectFit": maybeCssVar31(imageFit)
         }]
-      }), src: imgSrc, alt: title, loading: "lazy", ...tid.image }),
+      }), src: imgSrc, alt: titleText, loading: "lazy", ...tid.image }),
       status && /* @__PURE__ */ jsx97("div", { className: "absolute top1 left1 df", ...tid.status, children: /* @__PURE__ */ jsx97(Tag, { ...status }) })
     ] }),
     /* @__PURE__ */ jsxs51("div", { ...trussProps63({
@@ -17662,8 +17663,8 @@ function TableCardView(props) {
           "--color": "var(--b-on-surface)"
         }]
       }), ...tid.eyebrow, children: [
-        /* @__PURE__ */ jsx97("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: leftEyebrow }),
-        rightEyebrow && /* @__PURE__ */ jsx97("span", { className: "fs0", ...tid.rightEyebrow, children: rightEyebrow })
+        /* @__PURE__ */ jsx97("span", { className: "wsnw oh to_ellipsis", ...tid.leftEyebrow, children: renderMaybeProposed(leftEyebrow, tid.leftEyebrowProposal) }),
+        rightEyebrow && /* @__PURE__ */ jsx97("span", { className: "fs0", ...tid.rightEyebrow, children: renderMaybeProposed(rightEyebrow, tid.rightEyebrowProposal) })
       ] }),
       /* @__PURE__ */ jsxs51("div", { className: "dif w100 jcsb aic", children: [
         /* @__PURE__ */ jsx97("h4", { ...trussProps63({
@@ -17678,7 +17679,7 @@ function TableCardView(props) {
           color: ["color_var", {
             "--color": "var(--b-on-surface)"
           }]
-        }), ...tid.title, children: title }),
+        }), ...tid.title, children: renderMaybeProposed(title, tid.titleProposal) }),
         (badge || badgeTags?.length) && /* @__PURE__ */ jsxs51("div", { className: "dif aic gap1 fs0", ...tid.badge, children: [
           badge && /* @__PURE__ */ jsx97("span", { className: "fw4 fz_14px lh_20px wsnw", children: badge }),
           badgeTags?.map((tag) => /* @__PURE__ */ jsx97(Tag, { ...tag }, tag.text))
@@ -17697,19 +17698,19 @@ function TableCardView(props) {
       } : {}
     }), children: [
       data.length > 0 && /* @__PURE__ */ jsxs51("dl", { className: "df gap2 fw4 fz_14px lh_20px", children: [
-        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1", children: col1.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ jsxs51("dt", { children: [
+        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1 fb2 mw0", children: col1.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ jsxs51("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ jsx97("dd", { children: d.value })
+          /* @__PURE__ */ jsx97("dd", { className: "mw0", children: d.value })
         ] }, d.label)) }),
-        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1", children: col2.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
-          /* @__PURE__ */ jsxs51("dt", { children: [
+        /* @__PURE__ */ jsx97("div", { className: "df fdc fg1 fb2 mw0", children: col2.map((d) => /* @__PURE__ */ jsxs51("div", { className: "df gap_4px", ...tid[defaultTestId(d.label)], children: [
+          /* @__PURE__ */ jsxs51("dt", { className: "fs0", children: [
             d.label,
             ":"
           ] }),
-          /* @__PURE__ */ jsx97("dd", { children: d.value })
+          /* @__PURE__ */ jsx97("dd", { className: "mw0", children: d.value })
         ] }, d.label)) })
       ] }),
       progress !== void 0 && /* @__PURE__ */ jsxs51("div", { className: "df aic gap1 fs_10px lh_14px", children: [
@@ -17718,16 +17719,16 @@ function TableCardView(props) {
           height: "h_8px",
           borderRadius: "br4",
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": "var(--b-surface-subtle)"
+            "--backgroundColor": maybeCssVar31(aiMode ? "rgba(221, 214, 254, 1)" /* Purple200 */ : "--b-surface-subtle" /* SurfaceSubtle */)
           }]
-        }), children: /* @__PURE__ */ jsx97("div", { ...trussProps63({
+        }), ...tid.progressTrack, children: /* @__PURE__ */ jsx97("div", { ...trussProps63({
           height: "h100",
           borderRadius: "br4",
           backgroundColor: "bgBlue500",
           width: ["w_var", {
             "--width": maybeCssVar31(__maybeInc13(`${progressValue}%`))
           }]
-        }) }) }),
+        }), ...tid.progressFill }) }),
         /* @__PURE__ */ jsxs51("span", { ...tid.progressValue, children: [
           progressValue,
           "%"
@@ -17760,6 +17761,13 @@ function TableCardView(props) {
       boxShadow: "bshFocus",
       borderStyle: "bss",
       borderWidth: "bw1"
+    } : {},
+    // Must follow the focus ring, whose `ba` would reset the AI border back to 1px.
+    ...aiMode ? {
+      borderWidth: "bw2",
+      borderColor: ["bc_var", {
+        "--borderColor": "var(--b-ai-field-fg)"
+      }]
     } : {}
   }), ...tid, children: [
     action ? getButtonOrLink(content, action, actionAttrs) : (
@@ -17821,6 +17829,9 @@ function Thumbnail(props) {
     pointerEvents: "after_a_pointerEvents_none"
   }), children: /* @__PURE__ */ jsx97("span", { className: "db w100 h100 oh br8", children: /* @__PURE__ */ jsx97("img", { className: "w100 h100 objectFit_cover db", src: item.imgUrl, alt: "", loading: "lazy" }) }) }) });
 }
+function renderMaybeProposed(value, tid) {
+  return typeof value === "string" || value === void 0 ? value : /* @__PURE__ */ jsx97(ProposedValue, { ...value, ...tid });
+}
 function clampProgress(value) {
   if (process.env.NODE_ENV !== "production" && (value < 0 || value > 100)) {
     console.warn(`[TableCard] progress value ${value} is outside the expected range [0, 100] and will be clamped.`);
@@ -28819,6 +28830,7 @@ export {
   PinToggle,
   PresentationProvider,
   PreventBrowserScroll,
+  ProposedValue,
   RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField,
   ResponsiveGrid,