@homebound/beam 3.99.3 → 3.101.0

package/dist/Css.json

@@ -815,7 +815,7 @@
     "mdSb": {"kind":"static","defs":{"fontWeight":600,"fontSize":"16px","lineHeight":"24px"}},
     "lg": {"kind":"static","defs":{"fontWeight":600,"fontSize":"18px","lineHeight":"28px"}},
     "xl": {"kind":"static","defs":{"fontWeight":600,"fontSize":"20px","lineHeight":"28px"}},
-    "xl2": {"kind":"static","defs":{"fontWeight":600,"fontSize":"30px","lineHeight":"36px"}},
+    "xl2": {"kind":"static","defs":{"fontWeight":600,"fontSize":"24px","lineHeight":"32px"}},
     "measure": {"kind":"static","defs":{"maxWidth":"30em"}},
     "measureWide": {"kind":"static","defs":{"maxWidth":"34em"}},
     "measureNarrow": {"kind":"static","defs":{"maxWidth":"20em"}},

package/dist/index.cjs

@@ -3905,9 +3905,9 @@ var CssBuilder = class _CssBuilder {
   get xl() {
     return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px");
   }
-  /** Sets `fontWeight: 600; fontSize: "30px"; lineHeight: "36px"`. */
+  /** Sets `fontWeight: 600; fontSize: "24px"; lineHeight: "32px"`. */
   get xl2() {
-    return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px");
+    return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px");
   }
   // typography
   /** Sets `maxWidth: "30em"`. */
@@ -7217,6 +7217,7 @@ var RowState = class {
       {
         _row: false,
         _data: import_mobx5.observable.ref,
+        _aiMode: import_mobx5.observable.ref,
         isCalculatingDirectMatch: false
       },
       { name: `RowState@${row.id}` }
@@ -7246,6 +7247,7 @@ var RowState = class {
    * at which point this would become `"top" | "bottom"`.
    */
   pinned = false;
+  _aiMode;
   /** Whether we are dragged over. */
   isDraggedOver = 0 /* None */;
   /**
@@ -7276,6 +7278,11 @@ var RowState = class {
   set row(row) {
     this._row = row;
     this._data = row.data;
+    if (this._aiMode !== row.aiMode) this._aiMode = row.aiMode;
+  }
+  /** True when `row.aiMode` is true or its function returns true. */
+  get aiMode() {
+    return !!maybeApply(this._aiMode);
   }
   /**
    * Whether we match a client-side filter; true if no filter is in place.
@@ -9030,8 +9037,8 @@ var __typography = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 var insetSeparator = `inset 0 -1px 0 ${maybeCssVar("--b-surface-separator" /* SurfaceSeparator */)}`;
@@ -9508,8 +9515,8 @@ var __typography2 = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 function maybeApplyFunction(row, maybeFn) {
@@ -9555,7 +9562,8 @@ function RowImpl(props) {
     isKept: isKeptRow,
     isLastKeptRow,
     pinned,
-    level
+    level,
+    aiMode
   } = rs;
   const isHeader = row.kind === HEADER;
   const isTotals = row.kind === TOTALS;
@@ -9581,7 +9589,7 @@ function RowImpl(props) {
       paddingBottom: "pb_25px"
     }
   };
-  const rowHoverBg = maybeCssVar(style.rowHoverColor !== void 0 && style.rowHoverColor !== "none" ? style.rowHoverColor : "--b-surface-hover" /* SurfaceHover */);
+  const rowHoverBg = maybeCssVar(aiMode && !reservedRowKinds.includes(row.kind) ? "rgba(237, 233, 254, 1)" /* Purple100 */ : style.rowHoverColor !== void 0 && style.rowHoverColor !== "none" ? style.rowHoverColor : "--b-surface-hover" /* SurfaceHover */);
   const rowCss = {
     ...!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss,
     ...isFirstBodyRow && style.firstBodyRowCss,
@@ -9771,6 +9779,12 @@ function RowImpl(props) {
       ...isLastKeptRow && style.keptLastRowCss,
       // Apply the blue highlight to every runtime-pinned row's cells (wins over `isActive`)
       ...pinned && style.pinnedRowCss,
+      // AI wash wins over pinned/active; reserved kinds never get it.
+      ...aiMode && !reservedRowKinds.includes(row.kind) && {
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-ai-field-bg)"
+        }]
+      },
       // Apply cell highlight styles to active cell and hover
       ...{
         ...applyCellHighlight && isCellActive ? {
@@ -9975,8 +9989,8 @@ var __typography3 = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 function TextFieldBase(props) {
@@ -10662,8 +10676,8 @@ var __typography4 = {
   },
   xl2: {
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px"
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px"
   }
 };
 function Avatar({
@@ -17853,6 +17867,7 @@ function RowGroup(props) {
 }
 
 // src/components/Table/components/TableCard.tsx
+var import_mobx_react2 = require("mobx-react");
 var import_react89 = require("react");
 var import_react_aria48 = require("react-aria");
 var import_react_router_dom4 = require("react-router-dom");
@@ -18014,7 +18029,7 @@ var import_jsx_runtime97 = require("react/jsx-runtime");
 var __maybeInc13 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
-function TableCard(props) {
+function TableCardImpl(props) {
   const {
     rs,
     columns,
@@ -18071,8 +18086,9 @@ function TableCard(props) {
   }
   if (!title) return null;
   const onClick = rowStyle?.onClick;
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, leftEyebrow, rightEyebrow, badge, badgeTags, status, data: dataBlocks, progress, interactiveFooter, to: rowStyle?.rowLink?.(rs.row), onClick: onClick ? () => onClick(rs.row, api) : void 0, height, imageFit });
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TableCardView, { ...tid, imgSrc: rs.row.imgSrc ?? "", title, leftEyebrow, rightEyebrow, badge, badgeTags, status, data: dataBlocks, progress, interactiveFooter, to: rowStyle?.rowLink?.(rs.row), onClick: onClick ? () => onClick(rs.row, api) : void 0, height, imageFit, aiMode: rs.aiMode });
 }
+var TableCard = (0, import_mobx_react2.observer)(TableCardImpl);
 function TableCardView(props) {
   const {
     title,
@@ -18088,7 +18104,8 @@ function TableCardView(props) {
     to,
     onClick,
     height = 430,
-    imageFit = "cover"
+    imageFit = "cover",
+    aiMode = false
   } = props;
   const tid = useTestIds(props, "tableCardView");
   const action = to || onClick;
@@ -18238,7 +18255,7 @@ function TableCardView(props) {
         "--borderColor": "var(--b-field-border-default)"
       }],
       backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface-raised)"
+        "--backgroundColor": (0, import_runtime71.maybeCssVar)(aiMode ? "--b-ai-field-bg" /* AiFieldBg */ : "--b-surface-raised" /* SurfaceRaised */)
       }],
       height: ["h_var", {
         "--height": `${height}px`
@@ -20017,8 +20034,8 @@ function Modal(props) {
   const title = /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("h1", { ...(0, import_runtime88.trussProps)({
     flexGrow: "fg1",
     fontWeight: "fw6",
-    fontSize: "fz_30px",
-    lineHeight: "lh_36px",
+    fontSize: "fz_24px",
+    lineHeight: "lh_32px",
     ...aiMode ? {
       color: "purple700",
       backgroundImage: "aiBoldBg",
@@ -20526,7 +20543,7 @@ var import_react114 = __toESM(require("react"), 1);
 var import_react_aria53 = require("react-aria");
 
 // src/forms/BoundCheckboxField.tsx
-var import_mobx_react2 = require("mobx-react");
+var import_mobx_react3 = require("mobx-react");
 
 // src/utils/defaultLabel.ts
 var import_change_case6 = require("change-case");
@@ -20547,7 +20564,7 @@ function BoundCheckboxField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_mobx_react2.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_mobx_react3.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
     Checkbox,
     {
       label,
@@ -20573,7 +20590,7 @@ function BoundCheckboxField(props) {
 }
 
 // src/forms/BoundCheckboxGroupField.tsx
-var import_mobx_react3 = require("mobx-react");
+var import_mobx_react4 = require("mobx-react");
 var import_jsx_runtime124 = require("react/jsx-runtime");
 function BoundCheckboxGroupField(props) {
   const {
@@ -20585,7 +20602,7 @@ function BoundCheckboxGroupField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_mobx_react3.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_mobx_react4.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
     CheckboxGroup,
     {
       label,
@@ -20611,7 +20628,7 @@ function BoundCheckboxGroupField(props) {
 }
 
 // src/forms/BoundChipSelectField.tsx
-var import_mobx_react4 = require("mobx-react");
+var import_mobx_react5 = require("mobx-react");
 var import_jsx_runtime125 = require("react/jsx-runtime");
 function BoundChipSelectField(props) {
   const {
@@ -20628,7 +20645,7 @@ function BoundChipSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_mobx_react4.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_mobx_react5.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     ChipSelectField,
     {
       label,
@@ -20658,7 +20675,7 @@ function BoundChipSelectField(props) {
 }
 
 // src/forms/BoundDateField.tsx
-var import_mobx_react5 = require("mobx-react");
+var import_mobx_react6 = require("mobx-react");
 var import_jsx_runtime126 = require("react/jsx-runtime");
 function BoundDateField(props) {
   const {
@@ -20672,7 +20689,7 @@ function BoundDateField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_mobx_react5.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_mobx_react6.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
     DateField,
     {
       label,
@@ -20703,7 +20720,7 @@ function BoundDateField(props) {
 }
 
 // src/forms/BoundDateRangeField.tsx
-var import_mobx_react6 = require("mobx-react");
+var import_mobx_react7 = require("mobx-react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 function BoundDateRangeField(props) {
   const {
@@ -20717,7 +20734,7 @@ function BoundDateRangeField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_mobx_react6.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_mobx_react7.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     DateRangeField,
     {
       label,
@@ -20751,7 +20768,7 @@ function BoundDateRangeField(props) {
 var import_react103 = require("react");
 
 // src/forms/BoundListField.tsx
-var import_mobx_react7 = require("mobx-react");
+var import_mobx_react8 = require("mobx-react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
 function ListField({
   row,
@@ -20769,7 +20786,7 @@ function ListField({
   const tid = useTestIds({}, "listField");
   const filteredRows = useComputed(() => filterDeleted ? listFieldObjectState.rows.filter((rowState) => filterDeleted(rowState)) : listFieldObjectState.rows, [filterDeleted]);
   const listIsValid = useComputed(() => listFieldObjectState.valid, [filteredRows]);
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_mobx_react7.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "df fdc gap3", ...tid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "df fdc gap3", ...tid, children: [
     filteredRows.map((rowState, index) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(ListFieldRowInputs, { rowState, rowNumber: index + 1, listFieldConfig, formState, listFieldKey }, `listFieldRowInputs-${listFieldKey}-${index}`)),
     /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Button, { icon: "plus", label: `Add ${listFieldConfig.name}`, onClick: () => onNew(listFieldObjectState), variant: "secondary", disabled: !listIsValid }) })
   ] }) });
@@ -20816,7 +20833,7 @@ function isListFieldRow(row) {
 }
 
 // src/forms/BoundMultiLineSelectField.tsx
-var import_mobx_react8 = require("mobx-react");
+var import_mobx_react9 = require("mobx-react");
 var import_jsx_runtime129 = require("react/jsx-runtime");
 function BoundMultiLineSelectField(props) {
   const {
@@ -20834,7 +20851,7 @@ function BoundMultiLineSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_mobx_react8.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_mobx_react9.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     MultiLineSelectField,
     {
       label,
@@ -20864,12 +20881,12 @@ function BoundMultiLineSelectField(props) {
 }
 
 // src/forms/BoundMultiSelectCardGroupField.tsx
-var import_mobx_react9 = require("mobx-react");
+var import_mobx_react10 = require("mobx-react");
 var import_jsx_runtime130 = require("react/jsx-runtime");
 function BoundMultiSelectCardGroupField(props) {
   const { field, onChange = (values) => field.set(values), label = defaultLabel(field.key), ...others } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_mobx_react9.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_mobx_react10.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     MultiSelectCardGroup,
     {
       ...others,
@@ -20886,7 +20903,7 @@ function BoundMultiSelectCardGroupField(props) {
 }
 
 // src/forms/BoundMultiSelectField.tsx
-var import_mobx_react10 = require("mobx-react");
+var import_mobx_react11 = require("mobx-react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
 function BoundMultiSelectField(props) {
   const {
@@ -20904,7 +20921,7 @@ function BoundMultiSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_mobx_react10.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_mobx_react11.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
     MultiSelectField,
     {
       label,
@@ -20934,7 +20951,7 @@ function BoundMultiSelectField(props) {
 }
 
 // src/forms/BoundNumberField.tsx
-var import_mobx_react11 = require("mobx-react");
+var import_mobx_react12 = require("mobx-react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 function BoundNumberField(props) {
   const {
@@ -20949,7 +20966,7 @@ function BoundNumberField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, label || field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_mobx_react11.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_mobx_react12.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     NumberField,
     {
       label,
@@ -20978,7 +20995,7 @@ function BoundNumberField(props) {
 }
 
 // src/forms/BoundRadioGroupField.tsx
-var import_mobx_react12 = require("mobx-react");
+var import_mobx_react13 = require("mobx-react");
 var import_jsx_runtime133 = require("react/jsx-runtime");
 function BoundRadioGroupField(props) {
   const {
@@ -20990,7 +21007,7 @@ function BoundRadioGroupField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_mobx_react12.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_mobx_react13.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     RadioGroupField,
     {
       label,
@@ -21016,7 +21033,7 @@ function BoundRadioGroupField(props) {
 }
 
 // src/forms/BoundRichTextField.tsx
-var import_mobx_react13 = require("mobx-react");
+var import_mobx_react14 = require("mobx-react");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 function BoundRichTextField(props) {
   const {
@@ -21029,7 +21046,7 @@ function BoundRichTextField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_mobx_react13.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_mobx_react14.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     RichTextField,
     {
       label,
@@ -21051,12 +21068,12 @@ function BoundRichTextField(props) {
 }
 
 // src/forms/BoundSelectCardGroupField.tsx
-var import_mobx_react14 = require("mobx-react");
+var import_mobx_react15 = require("mobx-react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 function BoundSelectCardGroupField(props) {
   const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_mobx_react14.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_mobx_react15.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     SelectCardGroup,
     {
       ...others,
@@ -21073,7 +21090,7 @@ function BoundSelectCardGroupField(props) {
 }
 
 // src/forms/BoundSelectField.tsx
-var import_mobx_react15 = require("mobx-react");
+var import_mobx_react16 = require("mobx-react");
 var import_jsx_runtime136 = require("react/jsx-runtime");
 function BoundSelectField(props) {
   const {
@@ -21089,7 +21106,7 @@ function BoundSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_mobx_react15.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_mobx_react16.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     SelectField,
     {
       label,
@@ -21119,7 +21136,7 @@ function BoundSelectField(props) {
 }
 
 // src/forms/BoundSwitchField.tsx
-var import_mobx_react16 = require("mobx-react");
+var import_mobx_react17 = require("mobx-react");
 var import_jsx_runtime137 = require("react/jsx-runtime");
 function BoundSwitchField(props) {
   const {
@@ -21131,7 +21148,7 @@ function BoundSwitchField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_mobx_react16.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_mobx_react17.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     Switch,
     {
       label,
@@ -21149,7 +21166,7 @@ function BoundSwitchField(props) {
 }
 
 // src/forms/BoundTextAreaField.tsx
-var import_mobx_react17 = require("mobx-react");
+var import_mobx_react18 = require("mobx-react");
 var import_jsx_runtime138 = require("react/jsx-runtime");
 function BoundTextAreaField(props) {
   const {
@@ -21163,7 +21180,7 @@ function BoundTextAreaField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_mobx_react17.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_mobx_react18.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     TextAreaField,
     {
       label,
@@ -21191,7 +21208,7 @@ function BoundTextAreaField(props) {
 }
 
 // src/forms/BoundTextField.tsx
-var import_mobx_react18 = require("mobx-react");
+var import_mobx_react19 = require("mobx-react");
 var import_jsx_runtime139 = require("react/jsx-runtime");
 function BoundTextField(props) {
   const {
@@ -21205,7 +21222,7 @@ function BoundTextField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_mobx_react18.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_mobx_react19.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     TextField,
     {
       label,
@@ -21233,12 +21250,12 @@ function BoundTextField(props) {
 }
 
 // src/forms/BoundToggleChipGroupField.tsx
-var import_mobx_react19 = require("mobx-react");
+var import_mobx_react20 = require("mobx-react");
 var import_jsx_runtime140 = require("react/jsx-runtime");
 function BoundToggleChipGroupField(props) {
   const { field, onChange = (value) => field.set(value), label = defaultLabel(field.key), ...others } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_mobx_react19.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_mobx_react20.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     ToggleChipGroup,
     {
       label,
@@ -21252,7 +21269,7 @@ function BoundToggleChipGroupField(props) {
 }
 
 // src/forms/BoundTreeSelectField.tsx
-var import_mobx_react20 = require("mobx-react");
+var import_mobx_react21 = require("mobx-react");
 var import_jsx_runtime141 = require("react/jsx-runtime");
 function BoundTreeSelectField(props) {
   const {
@@ -21270,7 +21287,7 @@ function BoundTreeSelectField(props) {
     ...others
   } = props;
   const testId = useTestIds(props, field.key);
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_mobx_react20.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_mobx_react21.Observer, { children: () => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     TreeSelectField,
     {
       label,
@@ -22318,14 +22335,14 @@ function StaticField(props) {
 }
 
 // src/forms/SubmitButton.tsx
-var import_mobx_react21 = require("mobx-react");
+var import_mobx_react22 = require("mobx-react");
 var import_jsx_runtime155 = require("react/jsx-runtime");
 function SubmitButton(props) {
   const { form, disabled, onClick, label = "Submit", ...others } = props;
   if (typeof onClick === "string") {
     throw new Error("SubmitButton.onClick doesn't support strings yet");
   }
-  const state = (0, import_mobx_react21.useLocalObservable)(() => ({ clicked: false }));
+  const state = (0, import_mobx_react22.useLocalObservable)(() => ({ clicked: false }));
   const canSubmit = useComputed(() => {
     return form.isNewEntity && !state.clicked ? true : form.dirty && form.valid;
   }, [form]);
@@ -22646,7 +22663,7 @@ function PageHeader(props) {
     /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "pt2 pb2 pl3 pr3 df jcsb aic", children: [
       /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { children: [
         breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("h1", { className: "fw6 fz_30px lh_36px", ...tids.pageTitle, children: pageTitle })
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("h1", { className: "fw6 fz_24px lh_32px", ...tids.pageTitle, children: pageTitle })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "df gap1", children: [
         tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Button, { label: tertiaryAction.label, onClick: tertiaryAction.onClick, variant: "tertiary", disabled: tertiaryAction.disabled, tooltip: tertiaryAction.tooltip }),
@@ -22825,7 +22842,7 @@ function useActiveSection(sectionsWithRefs) {
   });
   (0, import_react114.useEffect)(() => {
     if (!("IntersectionObserver" in window)) return;
-    const observer2 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
+    const observer3 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
       /**
        * Creating rules to determine when a section is "in view" is a real challenge given the section sizes
        * are unknown and will likely be mixed (optimizing for large sections makes tracking small sections
@@ -22841,7 +22858,7 @@ function useActiveSection(sectionsWithRefs) {
       ref
     }) => {
       if (ref.current) {
-        observer2.observe(ref.current);
+        observer3.observe(ref.current);
       }
     });
     return () => {
@@ -22849,7 +22866,7 @@ function useActiveSection(sectionsWithRefs) {
         ref
       }) => {
         if (ref.current) {
-          observer2.unobserve(ref.current);
+          observer3.unobserve(ref.current);
         }
       });
     };
@@ -24695,7 +24712,7 @@ function TableReviewLayout(props) {
       /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { className: "df jcsb aic", children: [
         /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { children: [
           breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("h1", { className: "fw6 fz_30px lh_36px mt1 mb0", ...tid.pageTitle, children: pageTitle })
+          /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
       ] }),
@@ -27547,7 +27564,7 @@ function SuperDrawerHeader(props) {
   return (0, import_react_dom8.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { className: "df aic jcsb gap3", ...tid, children: [
     isStructuredProps(props) ? /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { className: "df jcsb aic gap2 fg1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)("div", { className: "fg1 df aic gap2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("h1", { className: "fw6 fz_30px lh_36px", children: props.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("h1", { className: "fw6 fz_24px lh_32px", children: props.title }),
         props.left
       ] }),
       props.right && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", { className: "fs0", children: props.right })