@layerfi/components 0.1.112-alpha.4 → 0.1.112-alpha.5

package/dist/cjs/index.cjs

@@ -69,6 +69,8 @@ const useSWRMutation = require("swr/mutation");
 const react$1 = require("@floating-ui/react");
 const lucideReact = require("lucide-react");
 const reactAriaComponents = require("react-aria-components");
+const useResizeObserver = require("@react-hook/resize-observer");
+const reactMergeRefs = require("react-merge-refs");
 const Select$1 = require("react-select");
 const CurrencyInput = require("react-currency-input-field");
 const RDP = require("react-datepicker");
@@ -128,7 +130,7 @@ const LinkedAccountsContext = react.createContext({
   setAccountsToAddOpeningBalanceInModal: () => {
   }
 });
-const version = "0.1.112-alpha.4";
+const version = "0.1.112-alpha.5";
 const pkg = {
   version
 };
@@ -2692,6 +2694,36 @@ class PlaceholderAsOption extends BaseCategorizationOption {
     return null;
   }
 }
+class SplitAsOption extends BaseCategorizationOption {
+  constructor(splits) {
+    super(splits);
+  }
+  get original() {
+    return this.internalValue;
+  }
+  get type() {
+    return "Split";
+  }
+  get label() {
+    return this.internalValue.map((split) => {
+      var _a, _b;
+      return (_b = (_a = split.category) == null ? void 0 : _a.label) != null ? _b : "Uncategorized";
+    }).join(", ");
+  }
+  get value() {
+    var _a, _b;
+    if (this.internalValue.length == 1) {
+      return (_b = (_a = this.internalValue[0].category) == null ? void 0 : _a.value) != null ? _b : "";
+    }
+    return "split";
+  }
+  get classification() {
+    return null;
+  }
+  get classificationEncoded() {
+    return null;
+  }
+}
 class ApiCategorizationAsOption extends BaseCategorizationOption {
   constructor(categorization) {
     super(categorization);
@@ -5404,19 +5436,6 @@ const hasMatch = (bankTransaction) => {
   );
 };
 const isCredit = ({ direction }) => direction === Direction.CREDIT;
-const isAlreadyMatched$1 = (bankTransaction) => {
-  var _a;
-  if (bankTransaction == null ? void 0 : bankTransaction.match) {
-    const foundMatch = (_a = bankTransaction.suggested_matches) == null ? void 0 : _a.find(
-      (x) => {
-        var _a2;
-        return x.details.id === ((_a2 = bankTransaction == null ? void 0 : bankTransaction.match) == null ? void 0 : _a2.details.id);
-      }
-    );
-    return foundMatch == null ? void 0 : foundMatch.id;
-  }
-  return void 0;
-};
 const countTransactionsToReview = ({
   transactions,
   dateRange
@@ -5448,6 +5467,19 @@ const hasSuggestedTransferMatches = (bankTransaction) => {
   var _a, _b;
   return (_b = (_a = bankTransaction == null ? void 0 : bankTransaction.suggested_matches) == null ? void 0 : _a.every((x) => x.details.type === "Transfer_Match")) != null ? _b : false;
 };
+const getBankTransactionMatchAsSuggestedMatch = (bankTransaction) => {
+  var _a;
+  if (bankTransaction == null ? void 0 : bankTransaction.match) {
+    const foundMatch = (_a = bankTransaction.suggested_matches) == null ? void 0 : _a.find(
+      (x) => {
+        var _a2, _b;
+        return x.details.id === ((_a2 = bankTransaction == null ? void 0 : bankTransaction.match) == null ? void 0 : _a2.details.id) || x.details.id === ((_b = bankTransaction == null ? void 0 : bankTransaction.match) == null ? void 0 : _b.bank_transaction.id);
+      }
+    );
+    return foundMatch;
+  }
+  return void 0;
+};
 const ChevronRight = (_k) => {
   var props = __objRest(_k, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5636,7 +5668,7 @@ function toDataProperties(input) {
   );
   return unsafeProperties;
 }
-const Tooltip = (_n) => {
+const DeprecatedTooltip = (_n) => {
   var _o = _n, {
     children
   } = _o, options2 = __objRest(_o, [
@@ -5645,7 +5677,7 @@ const Tooltip = (_n) => {
   const tooltip = useTooltip(options2);
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value: tooltip, children });
 };
-const TooltipTrigger = react.forwardRef(function TooltipTrigger2(_p, propRef) {
+const DeprecatedTooltipTrigger = react.forwardRef(function TooltipTrigger(_p, propRef) {
   var _q = _p, { children, asChild = false } = _q, props = __objRest(_q, ["children", "asChild"]);
   const context = useTooltipContext();
   const childrenRef = react.isValidElement(children) && "ref" in children ? children.ref : null;
@@ -5672,7 +5704,7 @@ const TooltipTrigger = react.forwardRef(function TooltipTrigger2(_p, propRef) {
     })
   );
 });
-const TooltipContent = react.forwardRef(function TooltipContent2(_r, propRef) {
+const DeprecatedTooltipContent = react.forwardRef(function TooltipContent(_r, propRef) {
   var _s = _r, { className, width } = _s, props = __objRest(_s, ["className", "width"]);
   const context = useTooltipContext();
   const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
@@ -5778,9 +5810,9 @@ const Button$1 = (_t) => {
       onMouseEnter: startAnimation,
       onMouseLeave: stopAnimation,
       ref: buttonRef,
-      children: tooltip ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { offset: 12, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: content }),
-        tooltip && /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: tooltip })
+      children: tooltip ? /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { offset: 12, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: content }),
+        tooltip && /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: tooltip })
       ] }) : content
     })
   );
@@ -6045,9 +6077,9 @@ const buildRightIcon = ({
     return /* @__PURE__ */ jsxRuntime.jsx(Loader$1, { size: 14, className: "Layer__anim--rotating" });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { offset: 12, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(AlertCircle, { size: 14 }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: error })
+    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { offset: 12, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(AlertCircle, { size: 14 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: error })
     ] });
   }
   if (action === "upload") {
@@ -6479,7 +6511,7 @@ const Text = (_Z) => {
     children,
     size = "md",
     weight = "normal",
-    withTooltip,
+    withDeprecatedTooltip: withTooltip,
     ellipsis,
     status,
     pb,
@@ -6490,7 +6522,7 @@ const Text = (_Z) => {
     "children",
     "size",
     "weight",
-    "withTooltip",
+    "withDeprecatedTooltip",
     "ellipsis",
     "status",
     "pb",
@@ -6503,13 +6535,13 @@ const Text = (_Z) => {
   );
   if (withTooltip) {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      TextWithTooltip,
+      DeprecatedTextWithTooltip,
       __spreadProps(__spreadValues(__spreadValues({
         as: Component,
         className: baseClassName2,
         size,
         weight,
-        withTooltip
+        withDeprecatedTooltip: withTooltip
       }, dataProperties), props), {
         children
       })
@@ -6517,14 +6549,14 @@ const Text = (_Z) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues(__spreadValues({}, props), dataProperties), { className: baseClassName2, children }));
 };
-const TextWithTooltip = (_$) => {
+const DeprecatedTextWithTooltip = (_$) => {
   var _aa = _$, {
     as: Component = "p",
     className,
     children,
     size: _size = "md",
     weight: _weight = "normal",
-    withTooltip: _withTooltip = "whenTruncated",
+    withDeprecatedTooltip: _withTooltip = "whenTruncated",
     tooltipOptions
   } = _aa, props = __objRest(_aa, [
     "as",
@@ -6532,7 +6564,7 @@ const TextWithTooltip = (_$) => {
     "children",
     "size",
     "weight",
-    "withTooltip",
+    "withDeprecatedTooltip",
     "tooltipOptions"
   ]);
   const textElementRef = react.useRef();
@@ -6558,14 +6590,14 @@ const TextWithTooltip = (_$) => {
     tooltipOptions == null ? void 0 : tooltipOptions.contentClassName
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Tooltip,
+    DeprecatedTooltip,
     {
       disabled: !hoverStatus,
       offset: tooltipOptions == null ? void 0 : tooltipOptions.offset,
       shift: tooltipOptions == null ? void 0 : tooltipOptions.shift,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({ className, ref: textElementRef }, props), { children })) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: contentClassName, children })
+        /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({ className, ref: textElementRef }, props), { children })) }),
+        /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: contentClassName, children })
       ]
     }
   );
@@ -6693,9 +6725,9 @@ const Badge = ({
   ] });
   content = onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({ type: "button", role: "button" }, baseProps), { children: content })) : /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, baseProps), { children: content }));
   if (tooltip) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { offset: 12, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: content }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: tooltip })
+    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { offset: 12, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: content }),
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: tooltip })
     ] });
   }
   return content;
@@ -7568,6 +7600,165 @@ const MenuItem$1 = react.forwardRef(
     );
   }
 );
+function useTruncationDetection(elementRef, options2 = {
+  dependencies: [],
+  checkFirstChild: false
+}) {
+  const { checkFirstChild = false, dependencies = [] } = options2;
+  const [isTruncated, setIsTruncated] = react.useState(false);
+  const checkTruncation = react.useCallback(() => {
+    if (!elementRef || !elementRef.current) {
+      return;
+    }
+    const element = checkFirstChild ? elementRef.current.children[0] : elementRef.current;
+    if (!element) {
+      return;
+    }
+    const scrollWidth = element.scrollWidth;
+    const clientWidth = element.clientWidth;
+    const scrollHeight = element.scrollHeight;
+    const clientHeight = element.clientHeight;
+    const isHorizontallyOverflowing = Math.ceil(scrollWidth) > Math.ceil(clientWidth);
+    const isVerticallyOverflowing = Math.ceil(scrollHeight) > Math.ceil(clientHeight);
+    const isOverflowing = isHorizontallyOverflowing || isVerticallyOverflowing;
+    setIsTruncated(isOverflowing);
+  }, [elementRef, checkFirstChild, ...dependencies]);
+  const DEBOUNCE_TIME_IN_MS = 450;
+  const debouncedCheckTruncation = react.useMemo(
+    () => lodash.debounce(checkTruncation, DEBOUNCE_TIME_IN_MS),
+    [checkTruncation]
+  );
+  useResizeObserver(elementRef, debouncedCheckTruncation);
+  react.useEffect(() => {
+    const id = requestAnimationFrame(() => checkTruncation());
+    return () => cancelAnimationFrame(id);
+  }, [checkTruncation]);
+  return isTruncated;
+}
+const CLASS_NAME$d = "Layer__Stack";
+const Stack = react.forwardRef(
+  function Stack2(_na, ref) {
+    var _oa = _na, {
+      align,
+      children,
+      className,
+      direction,
+      gap,
+      justify,
+      overflow,
+      pb,
+      pbs,
+      pbe,
+      pi,
+      pis,
+      pie,
+      fluid
+    } = _oa, restProps = __objRest(_oa, [
+      "align",
+      "children",
+      "className",
+      "direction",
+      "gap",
+      "justify",
+      "overflow",
+      "pb",
+      "pbs",
+      "pbe",
+      "pi",
+      "pis",
+      "pie",
+      "fluid"
+    ]);
+    const dataProperties = toDataProperties({
+      align,
+      direction,
+      gap,
+      justify,
+      overflow,
+      pb,
+      pbs,
+      pbe,
+      pi,
+      pis,
+      pie,
+      fluid
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues(__spreadValues({
+        ref
+      }, restProps), dataProperties), {
+        className: classNames(CLASS_NAME$d, className),
+        children
+      })
+    );
+  }
+);
+const VStack = react.forwardRef(
+  function VStack2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "column" }));
+  }
+);
+const HStack = react.forwardRef(
+  function HStack2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "row" }));
+  }
+);
+const Spacer = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__Spacer" });
+const Tooltip = (_pa) => {
+  var _qa = _pa, {
+    children
+  } = _qa, options2 = __objRest(_qa, [
+    "children"
+  ]);
+  const tooltip = useTooltip(options2);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value: tooltip, children });
+};
+const TooltipTrigger2 = react.forwardRef(function TooltipTrigger22(_ra, propRef) {
+  var _sa = _ra, { children, asChild = false, wordBreak } = _sa, props = __objRest(_sa, ["children", "asChild", "wordBreak"]);
+  const context = useTooltipContext();
+  const childrenRef = react.isValidElement(children) && "ref" in children ? children.ref : null;
+  const ref = react$1.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+  if (asChild && react.isValidElement(children)) {
+    return react.cloneElement(
+      children,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      context.getReferenceProps(__spreadProps(__spreadValues(__spreadValues({
+        ref
+      }, props), children.props), {
+        "data-state": context.open ? "open" : "closed",
+        "data-word-break": wordBreak
+      }))
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HStack,
+    __spreadProps(__spreadValues({
+      ref,
+      "data-state": context.open ? "open" : "closed",
+      className: classNames("Layer__UI__tooltip-trigger")
+    }, context.getReferenceProps(props)), {
+      children
+    })
+  );
+});
+const TooltipContent2 = react.forwardRef(function TooltipContent22(_ta, propRef) {
+  var _ua = _ta, { className, width, wordBreak } = _ua, props = __objRest(_ua, ["className", "width", "wordBreak"]);
+  const context = useTooltipContext();
+  const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
+  const dataProperties = toDataProperties({ width, "word-break": wordBreak });
+  if (!context.open || context.disabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref,
+      className: classNames("Layer__UI__tooltip", className),
+      style: __spreadValues({}, context.floatingStyles)
+    }, dataProperties), context.getFloatingProps(props)), {
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__UI__tooltip-content", style: __spreadValues({}, context.styles), children: props.children })
+    })
+  ) });
+});
 function splitTextProps(props) {
   const _a = props, {
     align,
@@ -7641,13 +7832,50 @@ const P = react.forwardRef(
   }
 );
 const SPAN_CLASS_NAME = "Layer__Span";
+const BaseSpan = react.forwardRef(({ dataProperties, restProps, hasRef, className, renderingProps, children }, ref) => {
+  if (renderingProps.nonAria) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(SPAN_CLASS_NAME, className), ref: hasRef ? ref : void 0, children }));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(SPAN_CLASS_NAME, className), ref: hasRef ? ref : void 0, children }));
+});
+BaseSpan.displayName = "BaseSpan";
 const Span = react.forwardRef(
-  function Span2(props, ref) {
+  function Span2(props, forwardedRef) {
     const { children, dataProperties, renderingProps, restProps } = splitTextProps(props);
-    if (renderingProps.nonAria) {
-      return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: SPAN_CLASS_NAME, ref, children }));
+    const { className, tooltipContentWidth = "md" } = props;
+    const internalRef = react.useRef(null);
+    const isTruncated = useTruncationDetection(internalRef, { checkFirstChild: true });
+    const mergedRef = reactMergeRefs.mergeRefs([internalRef, forwardedRef]);
+    if (props.withTooltip) {
+      const dataPropertiesWithEllipsis = __spreadProps(__spreadValues({}, dataProperties), { "data-with-tooltip": true });
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !isTruncated, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          BaseSpan,
+          {
+            dataProperties: dataPropertiesWithEllipsis,
+            restProps,
+            hasRef: true,
+            className,
+            renderingProps,
+            ref: mergedRef,
+            children
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent2, { width: tooltipContentWidth, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__UI__tooltip-content--text", children }) })
+      ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: SPAN_CLASS_NAME, ref, children }));
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseSpan,
+      {
+        dataProperties,
+        restProps,
+        hasRef: true,
+        className,
+        renderingProps,
+        ref: mergedRef,
+        children
+      }
+    );
   }
 );
 function LinkedAccountPill({ label, items }) {
@@ -7685,8 +7913,8 @@ function LinkedAccountPill({ label, items }) {
 const BASE_MODAL_OVERLAY_CLASS_NAME = "Layer__ModalOverlay";
 const MODAL_OVERLAY_CLASS_NAME = `Layer__Portal ${BASE_MODAL_OVERLAY_CLASS_NAME}`;
 const ModalOverlay = react.forwardRef(
-  (_na, ref) => {
-    var _oa = _na, { variant } = _oa, restProps = __objRest(_oa, ["variant"]);
+  (_va, ref) => {
+    var _wa = _va, { variant } = _wa, restProps = __objRest(_wa, ["variant"]);
     const dataProperties = toDataProperties({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.ModalOverlay,
@@ -7713,8 +7941,8 @@ const InternalModal = react.forwardRef(({ children, flexBlock, size, variant = "
 InternalModal.displayName = "Modal";
 const DIALOG_CLASS_NAME = "Layer__Dialog";
 const Dialog = react.forwardRef(
-  (_pa, ref) => {
-    var _qa = _pa, { variant = "center" } = _qa, restProps = __objRest(_qa, ["variant"]);
+  (_xa, ref) => {
+    var _ya = _xa, { variant = "center" } = _ya, restProps = __objRest(_ya, ["variant"]);
     const dataProperties = toDataProperties({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Dialog,
@@ -7750,9 +7978,9 @@ function Drawer({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen, onOpenChange, variant, isDismissable, children: /* @__PURE__ */ jsxRuntime.jsx(InternalModal, { flexBlock, size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, variant, children }) }) });
 }
-const CLASS_NAME$d = "Layer__LoadingSpinner";
+const CLASS_NAME$c = "Layer__LoadingSpinner";
 function LoadingSpinner({ size }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: CLASS_NAME$d, size });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: CLASS_NAME$c, size });
 }
 const BUTTON_CLASS_NAMES = {
   DEFAULT: "Layer__UI__Button",
@@ -7766,15 +7994,15 @@ function ButtonSpinner({ size }) {
 function ButtonTransparentContent({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: BUTTON_CLASS_NAMES.TRANSPARENT_CONTENT, children });
 }
-const Button = react.forwardRef((_ra, ref) => {
-  var _sa = _ra, {
+const Button = react.forwardRef((_za, ref) => {
+  var _Aa = _za, {
     children,
     ellipsis,
     icon,
     inset,
     size = "md",
     variant = "solid"
-  } = _sa, restProps = __objRest(_sa, [
+  } = _Aa, restProps = __objRest(_Aa, [
     "children",
     "ellipsis",
     "icon",
@@ -7809,8 +8037,8 @@ const Button = react.forwardRef((_ra, ref) => {
 });
 Button.displayName = "Button";
 const HEADING_CLASS_NAME = "Layer__UI__Heading";
-const Heading = react.forwardRef((_ta, ref) => {
-  var _ua = _ta, { align, pie, pbe, size, variant, weight, ellipsis, className } = _ua, restProps = __objRest(_ua, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
+const Heading = react.forwardRef((_Ba, ref) => {
+  var _Ca = _Ba, { align, pie, pbe, size, variant, weight, ellipsis, className } = _Ca, restProps = __objRest(_Ca, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
   const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight, ellipsis });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Heading,
@@ -7821,76 +8049,6 @@ const Heading = react.forwardRef((_ta, ref) => {
   );
 });
 Heading.displayName = "Heading";
-const CLASS_NAME$c = "Layer__Stack";
-const Stack = react.forwardRef(
-  function Stack2(_va, ref) {
-    var _wa = _va, {
-      align,
-      children,
-      className,
-      direction,
-      gap,
-      justify,
-      overflow,
-      pb,
-      pbs,
-      pbe,
-      pi,
-      pis,
-      pie,
-      fluid
-    } = _wa, restProps = __objRest(_wa, [
-      "align",
-      "children",
-      "className",
-      "direction",
-      "gap",
-      "justify",
-      "overflow",
-      "pb",
-      "pbs",
-      "pbe",
-      "pi",
-      "pis",
-      "pie",
-      "fluid"
-    ]);
-    const dataProperties = toDataProperties({
-      align,
-      direction,
-      gap,
-      justify,
-      overflow,
-      pb,
-      pbs,
-      pbe,
-      pi,
-      pis,
-      pie,
-      fluid
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      __spreadProps(__spreadValues(__spreadValues({
-        ref
-      }, restProps), dataProperties), {
-        className: classNames(CLASS_NAME$c, className),
-        children
-      })
-    );
-  }
-);
-const VStack = react.forwardRef(
-  function VStack2(props, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "column" }));
-  }
-);
-const HStack = react.forwardRef(
-  function HStack2(props, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "row" }));
-  }
-);
-const Spacer = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__Spacer" });
 const Separator = ({ mbs, mbe }) => {
   const dataProperties = toDataProperties({ mbs, mbe });
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: "Layer__separator" }, dataProperties));
@@ -8220,8 +8378,8 @@ function ConditionalList({
   return Container2 ? /* @__PURE__ */ jsxRuntime.jsx(Container2, { children: listItems }) : listItems;
 }
 const CLASS_NAME$b = "Layer__Checkbox";
-function Checkbox(_xa) {
-  var _ya = _xa, { children, className, variant = "default", size = "md", isIndeterminate } = _ya, props = __objRest(_ya, ["children", "className", "variant", "size", "isIndeterminate"]);
+function Checkbox(_Da) {
+  var _Ea = _Da, { children, className, variant = "default", size = "md", isIndeterminate } = _Ea, props = __objRest(_Ea, ["children", "className", "variant", "size", "isIndeterminate"]);
   const dataProperties = react.useMemo(() => toDataProperties({
     size,
     variant,
@@ -8239,11 +8397,11 @@ function Checkbox(_xa) {
     })
   );
 }
-function CheckboxWithTooltip(_za) {
-  var _Aa = _za, { tooltip } = _Aa, props = __objRest(_Aa, ["tooltip"]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__checkbox-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !tooltip, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadValues({}, props)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: tooltip })
+function CheckboxWithTooltip(_Fa) {
+  var _Ga = _Fa, { tooltip } = _Ga, props = __objRest(_Ga, ["tooltip"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__checkbox-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !tooltip, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadValues({}, props)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: tooltip })
   ] }) });
 }
 const CLASS_NAME$a = "Layer__BasicLinkedAccountContainer";
@@ -8585,13 +8743,13 @@ const isDateAllowedToBrowse = (date2, business) => {
   }
   return dateFns.differenceInCalendarMonths(dateFns.startOfMonth(date2), activationDate) >= 0;
 };
-const Input$1 = (_Ba) => {
-  var _Ca = _Ba, {
+const Input$1 = (_Ha) => {
+  var _Ia = _Ha, {
     className,
     isInvalid,
     errorMessage,
     leftText
-  } = _Ca, props = __objRest(_Ca, [
+  } = _Ia, props = __objRest(_Ia, [
     "className",
     "isInvalid",
     "errorMessage",
@@ -8603,12 +8761,12 @@ const Input$1 = (_Ba) => {
     leftText ? "Layer__input--with-left-text" : "",
     className
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(TooltipTrigger, { className: "Layer__input-tooltip", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: [
       /* @__PURE__ */ jsxRuntime.jsx("input", __spreadProps(__spreadValues({}, props), { className: baseClassName2 })),
       leftText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__input-left-text", children: leftText })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
 const InputGroup$1 = ({
@@ -8637,8 +8795,8 @@ const InputGroup$1 = ({
     children
   ] });
 };
-const UploadCloud = (_Da) => {
-  var _Ea = _Da, { size = 18 } = _Ea, props = __objRest(_Ea, ["size"]);
+const UploadCloud = (_Ja) => {
+  var _Ka = _Ja, { size = 18 } = _Ka, props = __objRest(_Ka, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -8749,8 +8907,8 @@ const FileInput = ({
     )
   ] });
 };
-const ChevronDownFill = (_Fa) => {
-  var _Ga = _Fa, { size = 18 } = _Ga, props = __objRest(_Ga, ["size"]);
+const ChevronDownFill = (_La) => {
+  var _Ma = _La, { size = 18 } = _Ma, props = __objRest(_Ma, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -8796,8 +8954,8 @@ const Select = ({
     className
   );
   const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
       Select$1,
       {
         inputId,
@@ -8816,7 +8974,7 @@ const Select = ({
         isDisabled: disabled
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
 const MultiSelect = ({
@@ -8841,8 +8999,8 @@ const MultiSelect = ({
     className
   );
   const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
       Select$1,
       {
         inputId,
@@ -8864,7 +9022,7 @@ const MultiSelect = ({
         isMulti: true
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
 const transformCurrencyValue = (rawValue) => {
@@ -8877,8 +9035,8 @@ const transformCurrencyValue = (rawValue) => {
   }
   return cleaned;
 };
-const AmountInput = (_Ha) => {
-  var _Ia = _Ha, {
+const AmountInput = (_Na) => {
+  var _Oa = _Na, {
     onChange,
     className,
     leftText,
@@ -8886,7 +9044,7 @@ const AmountInput = (_Ha) => {
     isInvalid,
     badge,
     placeholder = "$0.00"
-  } = _Ia, props = __objRest(_Ia, [
+  } = _Oa, props = __objRest(_Oa, [
     "onChange",
     "className",
     "leftText",
@@ -8920,15 +9078,15 @@ const AmountInput = (_Ha) => {
       className: baseClassName2
     })
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(TooltipTrigger, { className: "Layer__input-tooltip", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: [
       badge ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__input-with-badge", children: [
         currencyInput,
         badge
       ] }) : currencyInput,
       leftText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__input-left-text", children: leftText })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
 const DATE_FORMAT$1 = "LLL d, yyyy";
@@ -8972,8 +9130,8 @@ function useSizeClass() {
     isDesktop: sizeClass === "desktop"
   };
 }
-const ChevronLeft = (_Ja) => {
-  var props = __objRest(_Ja, []);
+const ChevronLeft = (_Pa) => {
+  var props = __objRest(_Pa, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -9101,8 +9259,8 @@ const getDateFormat = (mode) => {
       });
   }
 };
-const DeprecatedDatePicker = (_Ka) => {
-  var _La = _Ka, {
+const DeprecatedDatePicker = (_Qa) => {
+  var _Ra = _Qa, {
     selected,
     onChange,
     disabled,
@@ -9123,7 +9281,7 @@ const DeprecatedDatePicker = (_Ka) => {
     highlightYears,
     onChangeMode,
     slots
-  } = _La, props = __objRest(_La, [
+  } = _Ra, props = __objRest(_Ra, [
     "selected",
     "onChange",
     "disabled",
@@ -9950,8 +10108,8 @@ const useIsVisible = (ref) => {
   }, [ref]);
   return isIntersecting;
 };
-const File = (_Ma) => {
-  var _Na = _Ma, { size = 12 } = _Na, props = __objRest(_Na, ["size"]);
+const File = (_Sa) => {
+  var _Ta = _Sa, { size = 12 } = _Ta, props = __objRest(_Ta, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -10011,8 +10169,8 @@ const File = (_Ma) => {
     })
   );
 };
-const ScissorsFullOpen = (_Oa) => {
-  var _Pa = _Oa, { size = 12 } = _Pa, props = __objRest(_Pa, ["size"]);
+const ScissorsFullOpen = (_Ua) => {
+  var _Va = _Ua, { size = 12 } = _Va, props = __objRest(_Va, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -10077,8 +10235,8 @@ const ScissorsFullOpen = (_Oa) => {
     })
   );
 };
-const Trash = (_Qa) => {
-  var _Ra = _Qa, { size = 18 } = _Ra, props = __objRest(_Ra, ["size"]);
+const Trash = (_Wa) => {
+  var _Xa = _Wa, { size = 18 } = _Xa, props = __objRest(_Xa, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -10129,44 +10287,6 @@ const Trash = (_Qa) => {
     })
   );
 };
-var CategorizationType = /* @__PURE__ */ ((CategorizationType2) => {
-  CategorizationType2["AUTO"] = "AUTO";
-  CategorizationType2["ASK_FROM_SUGGESTIONS"] = "ASK_FROM_SUGGESTIONS";
-  CategorizationType2["MEALS"] = "MEALS";
-  CategorizationType2["BUSINESS_TRAVEL_TRANSPORTATION"] = "BUSINESS_TRAVEL_TRANSPORTATION";
-  return CategorizationType2;
-})(CategorizationType || {});
-function hasSuggestions(categorization) {
-  return categorization != null && categorization.suggestions !== void 0 && categorization.suggestions.length > 0;
-}
-const accountIdentifierIsForCategory = (accountIdentifier, category) => {
-  if (accountIdentifier.type === "AccountId") {
-    switch (category.type) {
-      case "AccountNested":
-        return AccountIdEquivalence(accountIdentifier, makeAccountId(category.id));
-      case "OptionalAccountNested":
-        return false;
-      case "ExclusionNested":
-        return false;
-    }
-  }
-  switch (category.type) {
-    case "AccountNested":
-      return category.stableName ? AccountStableNameEquivalence(accountIdentifier, makeStableName(category.stableName)) : false;
-    case "OptionalAccountNested":
-      return AccountStableNameEquivalence(accountIdentifier, makeStableName(category.stableName));
-    case "ExclusionNested":
-      return false;
-  }
-};
-const getLeafCategories$2 = (categories) => {
-  return categories.flatMap((category) => {
-    if (!category.subCategories || category.subCategories.length === 0) {
-      return [category];
-    }
-    return getLeafCategories$2(category.subCategories);
-  });
-};
 const ReceiptsContext = react.createContext({
   receiptUrls: [],
   uploadReceipt: () => Promise.resolve(),
@@ -10311,8 +10431,8 @@ const ReceiptsProvider = ({
   const contextData = useReceipts({ bankTransaction, isActive });
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsContext.Provider, { value: contextData, children });
 };
-const Eye = (_Sa) => {
-  var _Ta = _Sa, { size = 18 } = _Ta, props = __objRest(_Ta, ["size"]);
+const Eye = (_Ya) => {
+  var _Za = _Ya, { size = 18 } = _Za, props = __objRest(_Za, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -10465,8 +10585,8 @@ const openReceiptInNewTab = (url, index2) => (e) => {
       `);
   }
 };
-const BankTransactionReceiptsWithProvider = react.forwardRef((_Ua, ref) => {
-  var _Va = _Ua, { bankTransaction, isActive } = _Va, props = __objRest(_Va, ["bankTransaction", "isActive"]);
+const BankTransactionReceiptsWithProvider = react.forwardRef((__a, ref) => {
+  var _$a = __a, { bankTransaction, isActive } = _$a, props = __objRest(_$a, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })) });
 });
 BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
@@ -10518,8 +10638,8 @@ const BankTransactionReceipts = react.forwardRef(
 );
 BankTransactionReceipts.displayName = "BankTransactionReceipts";
 const PORTAL_CLASS_NAME = "Layer__Portal";
-const Check = (_Wa) => {
-  var _Xa = _Wa, { size = 18 } = _Xa, props = __objRest(_Xa, ["size"]);
+const Check = (_ab) => {
+  var _bb = _ab, { size = 18 } = _bb, props = __objRest(_bb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -10715,8 +10835,8 @@ function buildCustomMenuPortal() {
     );
   };
 }
-function ComboBox(_Ya) {
-  var _Za = _Ya, {
+function ComboBox(_cb) {
+  var _db = _cb, {
     className,
     selectedValue,
     onSelectedValueChange,
@@ -10734,7 +10854,7 @@ function ComboBox(_Ya) {
     isClearable = true,
     isReadOnly = false,
     displayDisabledAsSelected
-  } = _Za, ariaProps = __objRest(_Za, [
+  } = _db, ariaProps = __objRest(_db, [
     "className",
     "selectedValue",
     "onSelectedValueChange",
@@ -10780,7 +10900,7 @@ function ComboBox(_Ya) {
   const CustomClearIndicatorRef = react.useRef(buildCustomClearIndicator());
   const CustomLoadingIndicatorRef = react.useRef(buildCustomLoadingIndicator());
   const CustomDropdownIndicatorRef = react.useRef(buildCustomDropdownIndicator());
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, className: className ? `${className}__Container` : void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Select$1,
       __spreadProps(__spreadValues({
@@ -11033,7 +11153,8 @@ const TagDimensionsGroup = ({
   onChange,
   showLabels = false,
   isReadOnly = false,
-  isEnabled = true
+  isEnabled = true,
+  className
 }) => {
   var _a;
   const { accountingConfiguration } = useLayerContext();
@@ -11050,10 +11171,10 @@ const TagDimensionsGroup = ({
       (tag) => tag.key.toLowerCase() === dimensionKey.toLowerCase()
     )) != null ? _a2 : null;
   };
-  if (!isEnabled) {
+  if (!isEnabled || (accountingConfiguration == null ? void 0 : accountingConfiguration.platformDisplayTags.length) === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_a = accountingConfiguration == null ? void 0 : accountingConfiguration.platformDisplayTags) != null ? _a : []).map((dimension) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className, children: ((_a = accountingConfiguration == null ? void 0 : accountingConfiguration.platformDisplayTags) != null ? _a : []).map((dimension) => /* @__PURE__ */ jsxRuntime.jsx(
     TagDimensionCombobox,
     {
       dimensionKey: dimension.key,
@@ -11509,22 +11630,6 @@ function CustomerVendorSelector({
     )
   ] });
 }
-const CustomerVendorTypeSchema = effect.Schema.Literal("CUSTOMER", "VENDOR");
-const DiscriminatedCustomerSchema = effect.Schema.Struct(__spreadProps(__spreadValues({}, CustomerSchema.fields), {
-  customerVendorType: CustomerVendorTypeSchema.pipe(
-    effect.Schema.pickLiteral("CUSTOMER")
-  )
-}));
-const DiscriminatedVendorSchema = effect.Schema.Struct(__spreadProps(__spreadValues({}, VendorSchema.fields), {
-  customerVendorType: CustomerVendorTypeSchema.pipe(
-    effect.Schema.pickLiteral("VENDOR")
-  )
-}));
-const CustomerVendorSchema = effect.Schema.Union(
-  DiscriminatedCustomerSchema,
-  DiscriminatedVendorSchema
-);
-const decodeCustomerVendor = effect.Schema.decodeSync(CustomerVendorSchema);
 const TAG_BANK_TRANSACTION_TAG_KEY = "#tag-bank-transaction";
 const tagBankTransaction = post(({ businessId }) => `/v1/businesses/${businessId}/bank-transactions/tags`);
 function buildKey$P({
@@ -11946,8 +12051,8 @@ function isCategorizationEnabledForStatus(status) {
     }
   }
 }
-const MinimizeTwo = (__a) => {
-  var _$a = __a, { size = 18 } = _$a, props = __objRest(_$a, ["size"]);
+const MinimizeTwo = (_eb) => {
+  var _fb = _eb, { size = 18 } = _fb, props = __objRest(_fb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -12029,7 +12134,7 @@ const MatchForm$1 = ({
   classNamePrefix,
   bankTransaction,
   selectedMatchId,
-  setSelectedMatchId,
+  setSelectedMatch,
   matchFormError,
   readOnly = false
 }) => {
@@ -12068,7 +12173,7 @@ const MatchForm$1 = ({
             if (readOnly === true) {
               return;
             }
-            setSelectedMatchId(suggestedMatch.id);
+            setSelectedMatch(suggestedMatch);
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__nowrap ${classNamePrefix}__match-table__date`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: dateFns.format(dateFns.parseISO(suggestedMatch.details.date), DATE_FORMAT$1) }) }),
@@ -12076,7 +12181,7 @@ const MatchForm$1 = ({
               Text,
               {
                 className: `${classNamePrefix}__match-table__desc-tooltip`,
-                withTooltip: TextUseTooltip.whenTruncated,
+                withDeprecatedTooltip: TextUseTooltip.whenTruncated,
                 as: "span",
                 children: suggestedMatch.details.description
               }
@@ -12113,7 +12218,7 @@ const MatchFormMobile = ({
   classNamePrefix,
   bankTransaction,
   selectedMatchId,
-  setSelectedMatchId,
+  setSelectedMatch,
   matchFormError,
   readOnly
 }) => {
@@ -12134,7 +12239,7 @@ const MatchFormMobile = ({
             if (readOnly) {
               return;
             }
-            setSelectedMatchId(match.id);
+            setSelectedMatch(match);
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classNamePrefix}__match-item__col-details`, children: [
@@ -12301,8 +12406,8 @@ const ToggleOption = ({
     "Layer__toggle-option--active": checked
   });
   if (disabled) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {
           className: optionClassName,
@@ -12328,7 +12433,7 @@ const ToggleOption = ({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: disabledMessage })
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: optionClassName, "data-checked": checked, style, children: [
@@ -12456,12 +12561,12 @@ const Notification = ({
     }
   );
 };
-const Textarea = (_ab) => {
-  var _bb = _ab, {
+const Textarea = (_gb) => {
+  var _hb = _gb, {
     className,
     isInvalid,
     errorMessage
-  } = _bb, props = __objRest(_bb, [
+  } = _hb, props = __objRest(_hb, [
     "className",
     "isInvalid",
     "errorMessage"
@@ -12471,9 +12576,9 @@ const Textarea = (_ab) => {
     isInvalid ? "Layer__textarea--error" : "",
     className
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx("textarea", __spreadProps(__spreadValues({}, props), { className: baseClassName2 })) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
+  return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx("textarea", __spreadProps(__spreadValues({}, props), { className: baseClassName2 })) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
 const GET_BANK_TRANSACTION_METADATA_TAG_KEY = "#bank-transaction-metadata";
@@ -12619,6 +12724,22 @@ const BankTransactionMemo = ({ bankTransactionId }) => {
     );
   } }) });
 };
+const CustomerVendorTypeSchema = effect.Schema.Literal("CUSTOMER", "VENDOR");
+const DiscriminatedCustomerSchema = effect.Schema.Struct(__spreadProps(__spreadValues({}, CustomerSchema.fields), {
+  customerVendorType: CustomerVendorTypeSchema.pipe(
+    effect.Schema.pickLiteral("CUSTOMER")
+  )
+}));
+const DiscriminatedVendorSchema = effect.Schema.Struct(__spreadProps(__spreadValues({}, VendorSchema.fields), {
+  customerVendorType: CustomerVendorTypeSchema.pipe(
+    effect.Schema.pickLiteral("VENDOR")
+  )
+}));
+const CustomerVendorSchema = effect.Schema.Union(
+  DiscriminatedCustomerSchema,
+  DiscriminatedVendorSchema
+);
+const decodeCustomerVendor = effect.Schema.decodeSync(CustomerVendorSchema);
 function BankTransactionCustomerVendorSelector({
   bankTransaction
 }) {
@@ -12785,6 +12906,44 @@ function BankTransactionFormFields({
     showDescriptions ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id }) : null
   ] });
 }
+var CategorizationType = /* @__PURE__ */ ((CategorizationType2) => {
+  CategorizationType2["AUTO"] = "AUTO";
+  CategorizationType2["ASK_FROM_SUGGESTIONS"] = "ASK_FROM_SUGGESTIONS";
+  CategorizationType2["MEALS"] = "MEALS";
+  CategorizationType2["BUSINESS_TRAVEL_TRANSPORTATION"] = "BUSINESS_TRAVEL_TRANSPORTATION";
+  return CategorizationType2;
+})(CategorizationType || {});
+function hasSuggestions(categorization) {
+  return categorization != null && categorization.suggestions !== void 0 && categorization.suggestions.length > 0;
+}
+const accountIdentifierIsForCategory = (accountIdentifier, category) => {
+  if (accountIdentifier.type === "AccountId") {
+    switch (category.type) {
+      case "AccountNested":
+        return AccountIdEquivalence(accountIdentifier, makeAccountId(category.id));
+      case "OptionalAccountNested":
+        return false;
+      case "ExclusionNested":
+        return false;
+    }
+  }
+  switch (category.type) {
+    case "AccountNested":
+      return category.stableName ? AccountStableNameEquivalence(accountIdentifier, makeStableName(category.stableName)) : false;
+    case "OptionalAccountNested":
+      return AccountStableNameEquivalence(accountIdentifier, makeStableName(category.stableName));
+    case "ExclusionNested":
+      return false;
+  }
+};
+const getLeafCategories$2 = (categories) => {
+  return categories.flatMap((category) => {
+    if (!category.subCategories || category.subCategories.length === 0) {
+      return [category];
+    }
+    return getLeafCategories$2(category.subCategories);
+  });
+};
 var BankTransactionCategoryComboBoxGroupLabel = /* @__PURE__ */ ((BankTransactionCategoryComboBoxGroupLabel2) => {
   BankTransactionCategoryComboBoxGroupLabel2["TRANSFER"] = "TRANSFER";
   BankTransactionCategoryComboBoxGroupLabel2["MATCH"] = "MATCH";
@@ -12792,6 +12951,19 @@ var BankTransactionCategoryComboBoxGroupLabel = /* @__PURE__ */ ((BankTransactio
   BankTransactionCategoryComboBoxGroupLabel2["ALL_CATEGORIES"] = "ALL CATEGORIES";
   return BankTransactionCategoryComboBoxGroupLabel2;
 })(BankTransactionCategoryComboBoxGroupLabel || {});
+const convertCategorizationToOption = (categorization) => {
+  if (isSplitCategorizationEncoded(categorization)) {
+    const splits = categorization.entries.map((splitEntryEncoded) => ({
+      amount: splitEntryEncoded.amount || 0,
+      inputValue: centsToDollars(splitEntryEncoded.amount),
+      category: splitEntryEncoded.category ? new ApiCategorizationAsOption(splitEntryEncoded.category) : null,
+      tags: splitEntryEncoded.tags.map((tag) => makeTagFromTransactionTag(index.Schema.decodeSync(TransactionTagSchema)(tag))),
+      customerVendor: splitEntryEncoded.customer ? decodeCustomerVendor(__spreadProps(__spreadValues({}, splitEntryEncoded.customer), { customerVendorType: "CUSTOMER" })) : splitEntryEncoded.vendor ? decodeCustomerVendor(__spreadProps(__spreadValues({}, splitEntryEncoded.vendor), { customerVendorType: "VENDOR" })) : null
+    }));
+    return new SplitAsOption(splits);
+  }
+  return new ApiCategorizationAsOption(categorization);
+};
 function getLeafCategories$1(category) {
   if (!category.subCategories || category.subCategories.length === 0) {
     return [category];
@@ -12837,18 +13009,18 @@ const getSuggestedCategoriesGroup = (bankTransaction) => {
   if ((categorizationFlow == null ? void 0 : categorizationFlow.type) === CategorizationType.ASK_FROM_SUGGESTIONS && hasSuggestions(categorizationFlow)) {
     return {
       label: "SUGGESTIONS",
-      options: categorizationFlow.suggestions.map((suggestion) => new ApiCategorizationAsOption(suggestion))
+      options: categorizationFlow.suggestions.map((suggestion) => convertCategorizationToOption(suggestion))
     };
   }
   return null;
 };
-const getDefaultSelectedCategoryForBankTransaction = (bankTransaction) => {
+const getDefaultSelectedCategoryForBankTransaction = (bankTransaction, ignoreSuggestedMatches = false) => {
   var _a;
-  if ((_a = bankTransaction.suggested_matches) == null ? void 0 : _a[0]) {
+  if (!ignoreSuggestedMatches && ((_a = bankTransaction.suggested_matches) == null ? void 0 : _a[0])) {
     return new SuggestedMatchAsOption(bankTransaction.suggested_matches[0]);
   }
   if (hasSuggestions(bankTransaction.categorization_flow)) {
-    return new ApiCategorizationAsOption(bankTransaction.categorization_flow.suggestions[0]);
+    return convertCategorizationToOption(bankTransaction.categorization_flow.suggestions[0]);
   }
   return null;
 };
@@ -12896,8 +13068,8 @@ function useCategories({ mode } = {}) {
 function usePreloadCategories(options2) {
   useCategories(options2);
 }
-const Scissors = (_cb) => {
-  var _db = _cb, { size = 11 } = _db, props = __objRest(_db, ["size"]);
+const Scissors = (_ib) => {
+  var _jb = _ib, { size = 11 } = _jb, props = __objRest(_jb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -13053,8 +13225,8 @@ const DateTime = ({
 };
 const CLASS_NAME$8 = "Layer__MoneyText";
 const MoneySpan = react.forwardRef(
-  (_eb, ref) => {
-    var _fb = _eb, { amount, bold, size, displayPlusSign } = _fb, restProps = __objRest(_fb, ["amount", "bold", "size", "displayPlusSign"]);
+  (_kb, ref) => {
+    var _lb = _kb, { amount, bold, size, displayPlusSign } = _lb, restProps = __objRest(_lb, ["amount", "bold", "size", "displayPlusSign"]);
     const dataProperties = toDataProperties({
       bold,
       positive: amount >= 0,
@@ -13076,7 +13248,7 @@ const BankTransactionCategoryComboBoxSelectedValue = ({ selectedValue }) => {
       /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: selectedValue.label })
     ] });
   }
-  if (isSplitAsOption(selectedValue)) {
+  if (isSplitAsOption(selectedValue) && selectedValue.original.length > 1) {
     return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "3xs", align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: BadgeSize.SMALL, icon: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { size: 11 }), children: "Split" }),
       /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: selectedValue.label })
@@ -13127,7 +13299,6 @@ const BankTransactionCategoryComboBox = ({
   inputId
 }) => {
   const { data: categories } = useCategories();
-  const loadingSuggestions = bankTransaction && isLoadingSuggestions(bankTransaction);
   const matchGroup = react.useMemo(() => {
     if (!includeSuggestedMatches || !bankTransaction) return null;
     return getSuggestedMatchesGroup(bankTransaction);
@@ -13153,6 +13324,7 @@ const BankTransactionCategoryComboBox = ({
     [allCategoriesGroup, categoryGroups, matchGroup, suggestedGroup]
   );
   const numMatchOptions = (matchGroup == null ? void 0 : matchGroup.options.length) || 0;
+  const loadingSuggestions = bankTransaction && isLoadingSuggestions(bankTransaction) && selectedValue === null;
   const placeholder = numMatchOptions > 1 ? `${numMatchOptions} possible matches...` : loadingSuggestions ? "Generating suggestions..." : "Categorize or match...";
   const SelectedValue = react.useMemo(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(BankTransactionCategoryComboBoxSelectedValue, { selectedValue });
@@ -13236,22 +13408,9 @@ function BulkSelectionStoreProvider({
   const [store] = react.useState(() => buildStore$1());
   return /* @__PURE__ */ jsxRuntime.jsx(BulkSelectionStoreContext.Provider, { value: store, children });
 }
-const isAlreadyMatched = (bankTransaction) => {
-  var _a;
-  if (bankTransaction == null ? void 0 : bankTransaction.match) {
-    const foundMatch = (_a = bankTransaction.suggested_matches) == null ? void 0 : _a.find(
-      (x) => {
-        var _a2, _b;
-        return x.details.id === ((_a2 = bankTransaction == null ? void 0 : bankTransaction.match) == null ? void 0 : _a2.details.id) || x.details.id === ((_b = bankTransaction == null ? void 0 : bankTransaction.match) == null ? void 0 : _b.bank_transaction.id);
-      }
-    );
-    return foundMatch == null ? void 0 : foundMatch.id;
-  }
-  return void 0;
-};
-const validateSplit = (splitData) => {
+const validateSplit = (localSplits) => {
   let valid = true;
-  splitData.splits.forEach((split) => {
+  localSplits.forEach((split) => {
     if (split.amount <= 0) {
       valid = false;
     } else if (!split.category) {
@@ -13260,6 +13419,137 @@ const validateSplit = (splitData) => {
   });
   return valid;
 };
+const calculateAddSplit = (initialRowSplits) => {
+  const newSplit = {
+    amount: 0,
+    category: null,
+    tags: [],
+    customerVendor: null
+  };
+  return [...initialRowSplits, newSplit];
+};
+const calculateRemoveSplit = (initialRowSplits, { totalAmount, index: index2 }) => {
+  const newSplits = initialRowSplits.filter((_v, idx) => idx !== index2);
+  const splitTotal = newSplits.reduce((sum, split, index22) => {
+    const splitAmount = index22 === 0 ? 0 : split.amount;
+    return sum + splitAmount;
+  }, 0);
+  const remaining = totalAmount - splitTotal;
+  newSplits[0].amount = remaining;
+  return newSplits;
+};
+const calculateUpdatedAmounts = (initialRowSplits, { index: index2, newAmountInput, totalAmount }) => {
+  const newAmount = Number(newAmountInput) * 100;
+  const splitTotal = initialRowSplits.reduce((sum, split, idx) => {
+    const amount = idx === 0 ? 0 : idx === index2 ? newAmount : split.amount;
+    return sum + amount;
+  }, 0);
+  const remaining = totalAmount - splitTotal;
+  initialRowSplits[index2].amount = newAmount;
+  initialRowSplits[0].amount = remaining;
+  return [...initialRowSplits];
+};
+const getCustomerVendorForBankTransaction = (bankTransaction) => {
+  return bankTransaction.customer ? decodeCustomerVendor(__spreadProps(__spreadValues({}, bankTransaction.customer), { customerVendorType: "CUSTOMER" })) : bankTransaction.vendor ? decodeCustomerVendor(__spreadProps(__spreadValues({}, bankTransaction.vendor), { customerVendorType: "VENDOR" })) : null;
+};
+const getLocalSplitStateForExpandedTableRow = (selectedCategory, bankTransaction) => {
+  let coercedSelectedCategory = selectedCategory;
+  if (!selectedCategory || isPlaceholderAsOption(selectedCategory)) {
+    coercedSelectedCategory = null;
+  } else if (isSuggestedMatchAsOption(selectedCategory)) {
+    coercedSelectedCategory = getDefaultSelectedCategoryForBankTransaction(bankTransaction, true);
+  }
+  if (selectedCategory && isSplitAsOption(selectedCategory)) {
+    return selectedCategory.original.map((splitEntry) => {
+      return {
+        amount: splitEntry.amount || 0,
+        category: splitEntry.category,
+        tags: splitEntry.tags,
+        customerVendor: splitEntry.customerVendor
+      };
+    });
+  }
+  return [
+    {
+      amount: bankTransaction.amount,
+      category: coercedSelectedCategory != null ? coercedSelectedCategory : null,
+      tags: bankTransaction.transaction_tags.map((tag) => makeTagFromTransactionTag(index.Schema.decodeSync(TransactionTagSchema)(tag))),
+      customerVendor: getCustomerVendorForBankTransaction(bankTransaction)
+    }
+  ];
+};
+function buildStore() {
+  return zustand.createStore((set) => ({
+    transactionCategories: /* @__PURE__ */ new Map(),
+    actions: {
+      setTransactionCategory: (id, category) => {
+        set((state) => {
+          const newMap = new Map(state.transactionCategories);
+          newMap.set(id, category);
+          return { transactionCategories: newMap };
+        });
+      },
+      setOnlyNewTransactionCategories: (transactionCategories) => {
+        set((state) => {
+          const newMap = new Map(state.transactionCategories);
+          let hasChanges = false;
+          transactionCategories.forEach(({ id, category }) => {
+            if (!newMap.has(id)) {
+              newMap.set(id, category);
+              hasChanges = true;
+            }
+          });
+          return hasChanges ? { transactionCategories: newMap } : state;
+        });
+      },
+      clearTransactionCategory: (id) => {
+        set((state) => {
+          const newMap = new Map(state.transactionCategories);
+          newMap.delete(id);
+          return { transactionCategories: newMap };
+        });
+      },
+      clearMultipleTransactionCategories: (ids) => {
+        set((state) => {
+          const newMap = new Map(state.transactionCategories);
+          ids.forEach((id) => newMap.delete(id));
+          return { transactionCategories: newMap };
+        });
+      },
+      clearAllTransactionCategories: () => {
+        set({ transactionCategories: /* @__PURE__ */ new Map() });
+      }
+    }
+  }));
+}
+const BankTransactionsCategoryStoreContext = react.createContext(null);
+function useBankTransactionsCategoryStore() {
+  const store = react.useContext(BankTransactionsCategoryStoreContext);
+  if (!store) {
+    throw new Error("useBankTransactionsCategoryStore must be used within BankTransactionsCategoryStoreProvider");
+  }
+  return store;
+}
+function useBankTransactionsCategoryActions() {
+  const store = useBankTransactionsCategoryStore();
+  return zustand.useStore(store, (state) => state.actions);
+}
+function useGetBankTransactionCategory(transactionId) {
+  const store = useBankTransactionsCategoryStore();
+  const selectedCategory = zustand.useStore(store, (state) => state.transactionCategories.get(transactionId));
+  return { selectedCategory };
+}
+function useGetAllBankTransactionsCategories() {
+  const store = useBankTransactionsCategoryStore();
+  const transactionCategories = zustand.useStore(store, (state) => state.transactionCategories);
+  return { transactionCategories };
+}
+function BankTransactionsCategoryStoreProvider({
+  children
+}) {
+  const [store] = react.useState(() => buildStore());
+  return /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsCategoryStoreContext.Provider, { value: store, children });
+}
 const ExpandedBankTransactionRow = react.forwardRef(
   ({
     bankTransaction,
@@ -13272,12 +13562,14 @@ const ExpandedBankTransactionRow = react.forwardRef(
     showDescriptions,
     showReceiptUploads
   }, ref) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     const {
       categorize: categorizeBankTransaction2,
       match: matchBankTransaction2
     } = useBankTransactionsContext();
     const { deselect } = useBulkSelectionActions();
+    const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
+    const { setTransactionCategory } = useBankTransactionsCategoryActions();
     const { trigger: tagBankTransaction2 } = useTagBankTransaction({ bankTransactionId: bankTransaction.id });
     const { trigger: removeTagFromBankTransaction2 } = useRemoveTagFromBankTransaction({ bankTransactionId: bankTransaction.id });
     const { trigger: setMetadataOnBankTransaction2 } = useSetMetadataOnBankTransaction({ bankTransactionId: bankTransaction.id });
@@ -13287,146 +13579,71 @@ const ExpandedBankTransactionRow = react.forwardRef(
       bankTransaction.category ? "categorize" : hasMatch(bankTransaction) ? "match" : "categorize"
       /* categorize */
     );
-    const [selectedMatchId, setSelectedMatchId] = react.useState(
-      (_c = isAlreadyMatched(bankTransaction)) != null ? _c : (_b = (_a = bankTransaction == null ? void 0 : bankTransaction.suggested_matches) == null ? void 0 : _a[0]) == null ? void 0 : _b.id
+    const [selectedMatch, setSelectedMatch] = react.useState(
+      (_b = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) != null ? _b : (_a = bankTransaction == null ? void 0 : bankTransaction.suggested_matches) == null ? void 0 : _a[0]
     );
     const [matchFormError, setMatchFormError] = react.useState();
     const [splitFormError, setSplitFormError] = react.useState();
     const bodyRef = react.useRef(null);
-    const defaultCategory = bankTransaction.category ? bankTransaction.category : hasSuggestions(bankTransaction.categorization_flow) ? (_d = bankTransaction.categorization_flow) == null ? void 0 : _d.suggestions.at(0) : void 0;
-    const initialCustomerVendor = bankTransaction.customer ? decodeCustomerVendor(__spreadProps(__spreadValues({}, bankTransaction.customer), { customerVendorType: "CUSTOMER" })) : bankTransaction.vendor ? decodeCustomerVendor(__spreadProps(__spreadValues({}, bankTransaction.vendor), { customerVendorType: "VENDOR" })) : null;
-    const initialTags = bankTransaction.transaction_tags.map(({ id, key, value, dimension_display_name, value_display_name, archived_at, _local }) => {
-      var _a2;
-      return makeTag({
-        id,
-        key,
-        value,
-        dimensionDisplayName: dimension_display_name,
-        valueDisplayName: value_display_name,
-        archivedAt: archived_at,
-        _local: {
-          isOptimistic: (_a2 = _local == null ? void 0 : _local.isOptimistic) != null ? _a2 : false
-        }
-      });
-    });
-    const [rowState, updateRowState] = react.useState({
-      splits: bankTransaction.category && isSplitCategorizationEncoded(bankTransaction.category) ? (_e = bankTransaction.category) == null ? void 0 : _e.entries.map((c) => {
-        var _a2, _b2;
-        const splitTags = (_b2 = (_a2 = c.tags) == null ? void 0 : _a2.map((tag) => makeTagFromTransactionTag({
-          id: tag.id,
-          key: tag.key,
-          value: tag.value,
-          dimensionDisplayName: tag.dimension_display_name,
-          valueDisplayName: tag.value_display_name,
-          createdAt: new Date(tag.created_at),
-          updatedAt: new Date(tag.updated_at),
-          deletedAt: tag.deleted_at ? new Date(tag.deleted_at) : null,
-          archivedAt: tag.archived_at ? new Date(tag.archived_at) : null,
-          _local: tag._local
-        }))) != null ? _b2 : [];
-        const splitCustomerVendor = c.customer ? decodeCustomerVendor(__spreadProps(__spreadValues({}, c.customer), { customerVendorType: "CUSTOMER" })) : c.vendor ? decodeCustomerVendor(__spreadProps(__spreadValues({}, c.vendor), { customerVendorType: "VENDOR" })) : null;
-        return {
-          amount: c.amount || 0,
-          inputValue: centsToDollars(c.amount),
-          category: new ApiCategorizationAsOption(c.category),
-          tags: splitTags,
-          customerVendor: splitCustomerVendor
-        };
-      }) : [
-        {
-          amount: bankTransaction.amount,
-          inputValue: centsToDollars(bankTransaction.amount),
-          category: defaultCategory ? new ApiCategorizationAsOption(defaultCategory) : null,
-          tags: initialTags,
-          customerVendor: initialCustomerVendor
-        }
-      ],
-      description: "",
-      file: void 0
-    });
+    const [localSplits, setLocalSplits] = react.useState(getLocalSplitStateForExpandedTableRow(selectedCategory, bankTransaction));
+    react.useEffect(() => {
+      setLocalSplits(getLocalSplitStateForExpandedTableRow(selectedCategory, bankTransaction));
+      setSplitFormError(void 0);
+    }, [selectedCategory, bankTransaction, isOpen]);
     const addSplit = () => {
-      updateRowState(__spreadProps(__spreadValues({}, rowState), {
-        splits: [
-          ...rowState.splits,
-          {
-            amount: 0,
-            inputValue: "0.00",
-            category: defaultCategory ? new ApiCategorizationAsOption(defaultCategory) : null,
-            tags: [],
-            customerVendor: initialCustomerVendor
-          }
-        ]
-      }));
+      const newSplits = calculateAddSplit(localSplits);
+      setLocalSplits(newSplits);
       setSplitFormError(void 0);
     };
     const removeSplit = (index2) => {
-      const newSplits = rowState.splits.filter((_v, idx) => idx !== index2);
-      const splitTotal = newSplits.reduce((sum, split, index22) => {
-        const amount = index22 === 0 ? 0 : split.amount;
-        return sum + amount;
-      }, 0);
-      const remaining = bankTransaction.amount - splitTotal;
-      newSplits[0].amount = remaining;
-      newSplits[0].inputValue = centsToDollars(remaining);
-      updateRowState(__spreadProps(__spreadValues({}, rowState), {
-        splits: newSplits
-      }));
+      const newSplits = calculateRemoveSplit(localSplits, { totalAmount: bankTransaction.amount, index: index2 });
+      setLocalSplits(newSplits);
       setSplitFormError(void 0);
     };
-    const sanitizeNumberInput = (input) => {
-      let sanitized = input.replace(/[^0-9.]/g, "");
-      const parts = sanitized.split(".");
-      if (parts.length > 2) {
-        sanitized = parts[0] + "." + parts.slice(1).join("");
-      }
-      if (parts.length === 2) {
-        sanitized = parts[0] + "." + parts[1].slice(0, 2);
-      }
-      return sanitized;
-    };
-    const updateAmounts = (rowNumber) => (event) => {
-      const newDisplaying = sanitizeNumberInput(event.target.value);
-      const newAmount = Number(newDisplaying) * 100;
-      const splitTotal = rowState.splits.reduce((sum, split, index2) => {
-        const amount = index2 === 0 ? 0 : index2 === rowNumber ? newAmount : split.amount;
-        return sum + amount;
-      }, 0);
-      const remaining = bankTransaction.amount - splitTotal;
-      rowState.splits[rowNumber].amount = newAmount;
-      rowState.splits[rowNumber].inputValue = newDisplaying;
-      rowState.splits[0].amount = remaining;
-      rowState.splits[0].inputValue = centsToDollars(remaining);
-      updateRowState(__spreadValues({}, rowState));
+    const updateAmounts = (index2) => (value) => {
+      if (!value) return;
+      const newLocalSplits = calculateUpdatedAmounts(localSplits, { index: index2, newAmountInput: value, totalAmount: bankTransaction.amount });
+      setLocalSplits(newLocalSplits);
       setSplitFormError(void 0);
+      if (validateSplit(newLocalSplits)) {
+        setTransactionCategory(bankTransaction.id, new SplitAsOption(newLocalSplits));
+      }
     };
-    const onBlur = (event) => {
-      if (event.target.value === "") {
-        const [_, index2] = event.target.name.split("-");
-        rowState.splits[parseInt(index2)].inputValue = "0.00";
-        updateRowState(__spreadValues({}, rowState));
-        setSplitFormError(void 0);
+    const onBlur = () => {
+      if (!validateSplit(localSplits)) {
+        setSplitFormError("Amounts must be greater than $0.00");
+        return;
       }
+      setSplitFormError(void 0);
     };
     const onChangePurpose = (event) => {
-      setPurpose(
-        event.target.value === "match" ? "match" : "categorize"
-        /* categorize */
-      );
+      const newPurpose = event.target.value === "match" ? "match" : "categorize";
+      setPurpose(newPurpose);
+      if (newPurpose === "match") {
+        setTransactionCategory(bankTransaction.id, selectedMatch ? new SuggestedMatchAsOption(selectedMatch) : null);
+      } else if (newPurpose === "categorize" && validateSplit(localSplits)) {
+        setTransactionCategory(bankTransaction.id, new SplitAsOption(localSplits));
+      }
       setSplitFormError(void 0);
       setMatchFormError(void 0);
     };
-    const changeCategory = (index2, newValue) => {
-      if (newValue === null) return;
-      rowState.splits[index2].category = newValue;
-      updateRowState(__spreadValues({}, rowState));
+    const changeCategory = (index2, newCategory) => {
+      if (newCategory === null) return;
+      localSplits[index2].category = newCategory;
+      const newLocalSplits = [...localSplits];
+      setLocalSplits(newLocalSplits);
       setSplitFormError(void 0);
+      if (validateSplit(newLocalSplits)) {
+        setTransactionCategory(bankTransaction.id, new SplitAsOption(newLocalSplits));
+      }
     };
     const changeTags = (index2, newTags) => {
-      const oldTags = rowState.splits[index2].tags;
-      rowState.splits[index2].tags = newTags;
-      updateRowState(__spreadValues({}, rowState));
+      const oldTags = localSplits[index2].tags;
+      localSplits[index2].tags = newTags;
+      const newLocalSplits = [...localSplits];
+      setLocalSplits(newLocalSplits);
       setSplitFormError(void 0);
-      if (rowState.splits.length === 1) {
+      if (newLocalSplits.length === 1) {
         const addedTags = newTags.filter(
           (newTag) => !oldTags.some((oldTag) => oldTag.key === newTag.key && oldTag.value === newTag.value)
         );
@@ -13447,32 +13664,40 @@ const ExpandedBankTransactionRow = react.forwardRef(
           });
         });
       }
+      if (validateSplit(newLocalSplits)) {
+        setTransactionCategory(bankTransaction.id, new SplitAsOption(newLocalSplits));
+      }
     };
     const changeCustomerVendor = (index2, newCustomerVendor) => {
-      rowState.splits[index2].customerVendor = newCustomerVendor;
-      updateRowState(__spreadValues({}, rowState));
+      localSplits[index2].customerVendor = newCustomerVendor;
+      const newLocalSplits = [...localSplits];
+      setLocalSplits(newLocalSplits);
       setSplitFormError(void 0);
-      if (rowState.splits.length === 1) {
+      if (newLocalSplits.length === 1) {
         void setMetadataOnBankTransaction2({
           customer: (newCustomerVendor == null ? void 0 : newCustomerVendor.customerVendorType) === "CUSTOMER" ? newCustomerVendor : null,
           vendor: (newCustomerVendor == null ? void 0 : newCustomerVendor.customerVendorType) === "VENDOR" ? newCustomerVendor : null
         });
       }
+      if (validateSplit(newLocalSplits)) {
+        setTransactionCategory(bankTransaction.id, new SplitAsOption(newLocalSplits));
+      }
     };
     const save = () => __async(null, null, function* () {
+      var _a2;
       if (purpose === "match") {
-        if (!selectedMatchId) {
+        if (!selectedMatch) {
           setMatchFormError("Select an option to match the transaction");
           return;
-        } else if (selectedMatchId && selectedMatchId !== isAlreadyMatched(bankTransaction)) {
-          yield onMatchSubmit(selectedMatchId);
+        } else if (selectedMatch && selectedMatch.id !== ((_a2 = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a2.id)) {
+          yield onMatchSubmit(selectedMatch.id);
           return;
         }
         close2();
         return;
       }
-      if (!validateSplit(rowState)) {
-        if (rowState.splits.length > 1) {
+      if (!validateSplit(localSplits)) {
+        if (localSplits.length > 1) {
           setSplitFormError(
             "Use only positive amounts and select category for each entry"
           );
@@ -13483,19 +13708,19 @@ const ExpandedBankTransactionRow = react.forwardRef(
       }
       yield categorizeBankTransaction2(
         bankTransaction.id,
-        rowState.splits.length === 1 && (rowState == null ? void 0 : rowState.splits[0].category) ? {
+        localSplits.length === 1 && localSplits[0].category ? {
           type: "Category",
-          category: rowState == null ? void 0 : rowState.splits[0].category.classificationEncoded
+          category: localSplits[0].category.classificationEncoded
         } : {
           type: "Split",
-          entries: rowState.splits.map((split) => {
-            var _a2, _b2, _c2;
+          entries: localSplits.map((split) => {
+            var _a3, _b2, _c;
             return {
-              category: (_a2 = split.category) == null ? void 0 : _a2.classificationEncoded,
+              category: (_a3 = split.category) == null ? void 0 : _a3.classificationEncoded,
               amount: split.amount,
               tags: split.tags.map((tag) => makeTagKeyValueFromTag(tag)),
               customer_id: ((_b2 = split.customerVendor) == null ? void 0 : _b2.customerVendorType) === "CUSTOMER" ? split.customerVendor.id : null,
-              vendor_id: ((_c2 = split.customerVendor) == null ? void 0 : _c2.customerVendorType) === "VENDOR" ? split.customerVendor.id : null
+              vendor_id: ((_c = split.customerVendor) == null ? void 0 : _c.customerVendorType) === "VENDOR" ? split.customerVendor.id : null
             };
           })
         }
@@ -13520,7 +13745,7 @@ const ExpandedBankTransactionRow = react.forwardRef(
     });
     const bookkeepingStatus = useEffectiveBookkeepingStatus();
     const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
-    const effectiveSplits = categorizationEnabled ? rowState.splits : [];
+    const effectiveSplits = categorizationEnabled ? localSplits : [];
     const className = "Layer__expanded-bank-transaction-row";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -13568,11 +13793,11 @@ const ExpandedBankTransactionRow = react.forwardRef(
                         {
                           classNamePrefix: className,
                           bankTransaction,
-                          selectedMatchId,
+                          selectedMatchId: selectedMatch == null ? void 0 : selectedMatch.id,
                           readOnly: !categorizationEnabled,
-                          setSelectedMatchId: (id) => {
+                          setSelectedMatch: (suggestedMatch) => {
                             setMatchFormError(void 0);
-                            setSelectedMatchId(id);
+                            setSelectedMatch(suggestedMatch);
                           },
                           matchFormError
                         }
@@ -13594,18 +13819,16 @@ const ExpandedBankTransactionRow = react.forwardRef(
                             className: `${className}__table-cell--split-entry`,
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx(
-                                Input$1,
+                                AmountInput,
                                 {
-                                  type: "text",
                                   name: `split-${index2}${asListItem ? "-li" : ""}`,
                                   disabled: index2 === 0 || !categorizationEnabled,
                                   onChange: updateAmounts(index2),
-                                  value: split.inputValue,
+                                  value: convertFromCents(split.amount),
                                   onBlur,
+                                  className: `${className}__table-cell--split-entry__amount`,
                                   isInvalid: split.amount < 0,
-                                  inputMode: "numeric",
-                                  errorMessage: "Negative values are not allowed",
-                                  className: `${className}__table-cell--split-entry__amount`
+                                  errorMessage: "Amounts must be greater than $0.00"
                                 }
                               ),
                               /* @__PURE__ */ jsxRuntime.jsx(
@@ -13619,15 +13842,16 @@ const ExpandedBankTransactionRow = react.forwardRef(
                                   includeSuggestedMatches: false
                                 }
                               ),
-                              showTags && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__table-cell--split-entry__tags`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                              showTags && /* @__PURE__ */ jsxRuntime.jsx(
                                 TagDimensionsGroup,
                                 {
                                   value: split.tags,
                                   onChange: (tags) => changeTags(index2, tags),
                                   showLabels: false,
-                                  isReadOnly: !categorizationEnabled
+                                  isReadOnly: !categorizationEnabled,
+                                  className: `${className}__table-cell--split-entry__tags`
                                 }
-                              ) }),
+                              ),
                               showCustomerVendor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__customer", children: /* @__PURE__ */ jsxRuntime.jsx(
                                 CustomerVendorSelector,
                                 {
@@ -13892,8 +14116,8 @@ const getMonthNameFromNumber = (monthNumber) => {
   }
   return (_a = monthNames.at(monthNumber - 1)) != null ? _a : "";
 };
-const Clock = (_gb) => {
-  var _hb = _gb, { size = 18 } = _hb, props = __objRest(_hb, ["size"]);
+const Clock = (_mb) => {
+  var _nb = _mb, { size = 18 } = _nb, props = __objRest(_nb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -13986,9 +14210,9 @@ const BookkeepingStatus$1 = ({ status, text, monthNumber, iconOnly }) => {
     )
   ] }));
 };
-const BankTransactionProcessingInfo = () => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { offset: 12, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(BookkeepingStatus$1, { status: BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_BOOKKEEPER, text: "Processing" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", width: "md", children: "Our team will review and categorize this transaction. We'll reach out if we have any questions about it." })
+const BankTransactionProcessingInfo = () => /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { offset: 12, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(BookkeepingStatus$1, { status: BookkeepingPeriodStatus.IN_PROGRESS_AWAITING_BOOKKEEPER, text: "Processing" }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", width: "md", children: "Our team will review and categorize this transaction. We'll reach out if we have any questions about it." })
 ] });
 function useDelayedVisibility({
   delay,
@@ -14010,73 +14234,47 @@ function useDelayedVisibility({
   );
   return { isVisible };
 }
-function buildStore() {
-  return zustand.createStore((set) => ({
-    transactionCategories: /* @__PURE__ */ new Map(),
-    actions: {
-      setTransactionCategory: (id, category) => {
-        set((state) => {
-          const newMap = new Map(state.transactionCategories);
-          newMap.set(id, category);
-          return { transactionCategories: newMap };
-        });
-      },
-      setOnlyNewTransactionCategories: (transactionCategories) => {
-        set((state) => {
-          const newMap = new Map(state.transactionCategories);
-          let hasChanges = false;
-          transactionCategories.forEach(({ id, category }) => {
-            if (!newMap.has(id)) {
-              newMap.set(id, category);
-              hasChanges = true;
-            }
-          });
-          return hasChanges ? { transactionCategories: newMap } : state;
-        });
-      },
-      clearTransactionCategory: (id) => {
-        set((state) => {
-          const newMap = new Map(state.transactionCategories);
-          newMap.delete(id);
-          return { transactionCategories: newMap };
-        });
-      },
-      clearMultipleTransactionCategories: (ids) => {
-        set((state) => {
-          const newMap = new Map(state.transactionCategories);
-          ids.forEach((id) => newMap.delete(id));
-          return { transactionCategories: newMap };
-        });
-      },
-      clearAllTransactionCategories: () => {
-        set({ transactionCategories: /* @__PURE__ */ new Map() });
-      }
+const buildSplitCategorizationRequest = (selectedCategory) => {
+  return {
+    type: "Split",
+    entries: selectedCategory.original.map((split) => {
+      var _a, _b, _c;
+      return {
+        category: (_a = split.category) == null ? void 0 : _a.classificationEncoded,
+        amount: split.amount,
+        tags: split.tags.map((tag) => makeTagKeyValueFromTag(tag)),
+        customer_id: ((_b = split.customerVendor) == null ? void 0 : _b.customerVendorType) === "CUSTOMER" ? split.customerVendor.id : null,
+        vendor_id: ((_c = split.customerVendor) == null ? void 0 : _c.customerVendorType) === "VENDOR" ? split.customerVendor.id : null
+      };
+    })
+  };
+};
+const useSaveBankTransactionRow = () => {
+  const {
+    categorize: categorizeBankTransaction2,
+    match: matchBankTransaction2
+  } = useBankTransactionsContext();
+  const saveBankTransactionRow = react.useCallback((selectedCategory, bankTransaction) => __async(null, null, function* () {
+    if (!selectedCategory || isPlaceholderAsOption(selectedCategory)) {
+      return;
     }
-  }));
-}
-const BankTransactionsCategoryStoreContext = react.createContext(null);
-function useBankTransactionsCategoryStore() {
-  const store = react.useContext(BankTransactionsCategoryStoreContext);
-  if (!store) {
-    throw new Error("useBankTransactionsCategoryStore must be used within BankTransactionsCategoryStoreProvider");
-  }
-  return store;
-}
-function useBankTransactionsCategoryActions() {
-  const store = useBankTransactionsCategoryStore();
-  return zustand.useStore(store, (state) => state.actions);
-}
-function useGetAllBankTransactionsCategories() {
-  const store = useBankTransactionsCategoryStore();
-  const transactionCategories = zustand.useStore(store, (state) => state.transactionCategories);
-  return { transactionCategories };
-}
-function BankTransactionsCategoryStoreProvider({
-  children
-}) {
-  const [store] = react.useState(() => buildStore());
-  return /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsCategoryStoreContext.Provider, { value: store, children });
-}
+    if (isSuggestedMatchAsOption(selectedCategory)) {
+      return matchBankTransaction2(bankTransaction.id, selectedCategory.original.id);
+    }
+    if (isSplitAsOption(selectedCategory)) {
+      const splitCategorizationRequest = buildSplitCategorizationRequest(selectedCategory);
+      return categorizeBankTransaction2(bankTransaction.id, splitCategorizationRequest);
+    }
+    if (!selectedCategory.classificationEncoded) return;
+    return categorizeBankTransaction2(bankTransaction.id, {
+      type: "Category",
+      category: selectedCategory.classificationEncoded
+    });
+  }), [categorizeBankTransaction2, matchBankTransaction2]);
+  return react.useMemo(() => ({
+    saveBankTransactionRow
+  }), [saveBankTransactionRow]);
+};
 const extractDescriptionForSplit = (category) => {
   if (!category || !isSplitCategorizationEncoded(category)) {
     return "";
@@ -14102,34 +14300,22 @@ const BankTransactionRow = ({
   var _a, _b, _c, _d, _e, _f;
   const expandedRowRef = react.useRef(null);
   const [showRetry, setShowRetry] = react.useState(false);
-  const {
-    categorize: categorizeBankTransaction2,
-    match: matchBankTransaction2,
-    shouldHideAfterCategorize
-  } = useBankTransactionsContext();
-  const [selectedCategory, setSelectedCategory] = react.useState(
-    getDefaultSelectedCategoryForBankTransaction(bankTransaction)
-  );
+  const { shouldHideAfterCategorize } = useBankTransactionsContext();
   const [open, setOpen] = react.useState(false);
   const toggleOpen = () => {
     setShowRetry(false);
     setOpen(!open);
   };
+  const bookkeepingStatus = useEffectiveBookkeepingStatus();
+  const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
+  const categorized = isCategorized(bankTransaction);
+  const { isVisible } = useDelayedVisibility({ delay: index2 * 20, initialVisibility: Boolean(initialLoad) });
   const { select, deselect } = useBulkSelectionActions();
   const isSelected = useIdIsSelected();
   const isTransactionSelected = isSelected(bankTransaction.id);
   const { setTransactionCategory } = useBankTransactionsCategoryActions();
-  const openRow = {
-    onMouseDown: () => {
-      clickTimer = Date.now();
-    },
-    onMouseUp: () => {
-      if (Date.now() - clickTimer < 100 && !open) {
-        setShowRetry(false);
-        setOpen(true);
-      }
-    }
-  };
+  const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
+  const { saveBankTransactionRow } = useSaveBankTransactionRow();
   react.useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
@@ -14148,30 +14334,21 @@ const BankTransactionRow = ({
       (_a2 = expandedRowRef == null ? void 0 : expandedRowRef.current) == null ? void 0 : _a2.save();
       return;
     }
-    if (!selectedCategory || isPlaceholderAsOption(selectedCategory)) {
-      return;
-    }
-    if (isSuggestedMatchAsOption(selectedCategory)) {
-      yield matchBankTransaction2(bankTransaction.id, selectedCategory.original.id);
-      deselect(bankTransaction.id);
-      setOpen(false);
-      return;
-    }
-    if (isSplitAsOption(selectedCategory)) {
-      return;
-    }
-    if (!selectedCategory.classificationEncoded) return;
-    yield categorizeBankTransaction2(bankTransaction.id, {
-      type: "Category",
-      category: selectedCategory.classificationEncoded
-    });
+    yield saveBankTransactionRow(selectedCategory, bankTransaction);
     deselect(bankTransaction.id);
     setOpen(false);
   });
-  const bookkeepingStatus = useEffectiveBookkeepingStatus();
-  const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
-  const categorized = isCategorized(bankTransaction);
-  const { isVisible } = useDelayedVisibility({ delay: index2 * 20, initialVisibility: Boolean(initialLoad) });
+  const openRow = {
+    onMouseDown: () => {
+      clickTimer = Date.now();
+    },
+    onMouseUp: () => {
+      if (Date.now() - clickTimer < 100 && !open) {
+        setShowRetry(false);
+        setOpen(true);
+      }
+    }
+  };
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
   const rowClassName = classNames(
@@ -14213,7 +14390,7 @@ const BankTransactionRow = ({
         __spreadProps(__spreadValues({
           className: "Layer__table-cell Layer__bank-transactions__tx-col"
         }, openRow), {
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { children: (_a = bankTransaction.counterparty_name) != null ? _a : bankTransaction.description }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { withTooltip: true, children: (_a = bankTransaction.counterparty_name) != null ? _a : bankTransaction.description }) })
         })
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -14267,9 +14444,8 @@ const BankTransactionRow = ({
                   BankTransactionCategoryComboBox,
                   {
                     bankTransaction,
-                    selectedValue: selectedCategory,
+                    selectedValue: selectedCategory != null ? selectedCategory : null,
                     onSelectedValueChange: (selectedCategory2) => {
-                      setSelectedCategory(selectedCategory2);
                       setTransactionCategory(bankTransaction.id, selectedCategory2);
                       setShowRetry(false);
                     },
@@ -14439,28 +14615,29 @@ const BankTransactionListItem = ({
   stringOverrides,
   showDescriptions,
   showReceiptUploads,
-  showTooltips
+  showTooltips,
+  _showBulkSelection = false
 }) => {
   var _a, _b;
   const expandedRowRef = react.useRef(null);
   const [showRetry, setShowRetry] = react.useState(false);
-  const {
-    categorize: categorizeBankTransaction2,
-    match: matchBankTransaction2,
-    shouldHideAfterCategorize
-  } = useBankTransactionsContext();
-  const [selectedCategory, setSelectedCategory] = react.useState(
-    getDefaultSelectedCategoryForBankTransaction(bankTransaction)
-  );
-  const [open, setOpen] = react.useState(false);
-  const toggleOpen = () => {
+  const { shouldHideAfterCategorize } = useBankTransactionsContext();
+  const { saveBankTransactionRow } = useSaveBankTransactionRow();
+  const [openExpandedRow, setOpenExpandedRow] = react.useState(false);
+  const toggleExpandedRow = () => {
     setShowRetry(false);
-    setOpen(!open);
+    setOpenExpandedRow(!openExpandedRow);
   };
+  const { isDesktop } = useSizeClass();
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
-  const { isDesktop } = useSizeClass();
+  const categorized = isCategorized(bankTransaction);
   const { isVisible } = useDelayedVisibility({ delay: index2 * 80 });
+  const { select, deselect } = useBulkSelectionActions();
+  const isSelected = useIdIsSelected();
+  const isTransactionSelected = isSelected(bankTransaction.id);
+  const { setTransactionCategory } = useBankTransactionsCategoryActions();
+  const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
   react.useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
@@ -14475,33 +14652,20 @@ const BankTransactionListItem = ({
   }, [bankTransaction.recently_categorized]);
   const save = () => __async(null, null, function* () {
     var _a2;
-    if (open && (expandedRowRef == null ? void 0 : expandedRowRef.current)) {
+    if (openExpandedRow && (expandedRowRef == null ? void 0 : expandedRowRef.current)) {
       (_a2 = expandedRowRef == null ? void 0 : expandedRowRef.current) == null ? void 0 : _a2.save();
       return;
     }
-    if (!selectedCategory || isPlaceholderAsOption(selectedCategory)) {
-      return;
-    }
-    if (isSuggestedMatchAsOption(selectedCategory)) {
-      yield matchBankTransaction2(bankTransaction.id, selectedCategory.original.id);
-      return;
-    }
-    if (isSplitAsOption(selectedCategory)) {
-      return;
-    }
-    if (selectedCategory.classificationEncoded === null) return;
-    yield categorizeBankTransaction2(bankTransaction.id, {
-      type: "Category",
-      category: selectedCategory.classificationEncoded
-    });
+    yield saveBankTransactionRow(selectedCategory, bankTransaction);
+    deselect(bankTransaction.id);
+    setOpenExpandedRow(false);
   });
-  const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-list-item";
-  const openClassName = open ? `${className}--expanded` : "";
+  const openClassName = openExpandedRow ? `${className}--expanded` : "";
   const rowClassName = classNames(
     className,
     bankTransaction.recently_categorized && editable && shouldHideAfterCategorize() ? "Layer__bank-transaction-row--removing" : "",
-    open ? openClassName : "",
+    openExpandedRow ? openClassName : "",
     isVisible ? "show" : ""
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: rowClassName, children: [
@@ -14519,7 +14683,7 @@ const BankTransactionListItem = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          onClick: toggleOpen,
+          onClick: toggleExpandedRow,
           className: classNames(
             "Layer__bank-transaction-row__expand-button",
             !isDesktop && "Layer__bank-transaction-row__expand-button--mobile"
@@ -14527,14 +14691,27 @@ const BankTransactionListItem = ({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             ChevronDownFill,
             {
-              className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
+              className: `Layer__chevron ${openExpandedRow ? "Layer__chevron__up" : "Layer__chevron__down"}`
             }
           )
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${className}__body`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${className}__body__name`, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", withTooltip: TextUseTooltip.whenTruncated, children: (_b = bankTransaction.counterparty_name) != null ? _b : bankTransaction.description }) }),
+      _showBulkSelection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__checkbox`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          isSelected: isTransactionSelected,
+          onChange: (selected) => {
+            if (selected) {
+              select(bankTransaction.id);
+            } else {
+              deselect(bankTransaction.id);
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: `${className}__body__name`, children: /* @__PURE__ */ jsxRuntime.jsx(Span, { withTooltip: true, children: (_b = bankTransaction.counterparty_name) != null ? _b : bankTransaction.description }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -14549,8 +14726,8 @@ const BankTransactionListItem = ({
       {
         ref: expandedRowRef,
         bankTransaction,
-        isOpen: open,
-        close: () => setOpen(false),
+        isOpen: openExpandedRow,
+        close: () => setOpenExpandedRow(false),
         categorized,
         asListItem: true,
         submitBtnText: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
@@ -14565,9 +14742,9 @@ const BankTransactionListItem = ({
         BankTransactionCategoryComboBox,
         {
           bankTransaction,
-          selectedValue: selectedCategory,
+          selectedValue: selectedCategory != null ? selectedCategory : null,
           onSelectedValueChange: (selectedCategory2) => {
-            setSelectedCategory(selectedCategory2);
+            setTransactionCategory(bankTransaction.id, selectedCategory2);
             setShowRetry(false);
           },
           isLoading: bankTransaction.processing
@@ -14606,6 +14783,51 @@ const BankTransactionListItem = ({
     bankTransaction.error && showRetry ? /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
   ] });
 };
+const useBankTransactionsTableCheckboxState = ({ bankTransactions }) => {
+  const { selectedIds } = useSelectedIds();
+  const { selectMultiple, deselectMultiple } = useBulkSelectionActions();
+  const currentPageIds = react.useMemo(
+    () => {
+      var _a;
+      return (_a = bankTransactions == null ? void 0 : bankTransactions.map((tx) => tx.id)) != null ? _a : [];
+    },
+    [bankTransactions]
+  );
+  const selectedCount = react.useMemo(
+    () => currentPageIds.filter((id) => selectedIds.has(id)).length,
+    [currentPageIds, selectedIds]
+  );
+  const isAllSelected = selectedCount > 0 && selectedCount === currentPageIds.length;
+  const isPartiallySelected = selectedCount > 0 && selectedCount < currentPageIds.length;
+  const onHeaderCheckboxChange = react.useCallback((checked) => {
+    if (!checked || isPartiallySelected) {
+      deselectMultiple(currentPageIds);
+    } else {
+      selectMultiple(currentPageIds);
+    }
+  }, [
+    currentPageIds,
+    isPartiallySelected,
+    selectMultiple,
+    deselectMultiple
+  ]);
+  return react.useMemo(() => ({
+    isAllSelected,
+    isPartiallySelected,
+    onHeaderCheckboxChange
+  }), [isAllSelected, isPartiallySelected, onHeaderCheckboxChange]);
+};
+const useUpsertBankTransactionsDefaultCategories = (bankTransactions) => {
+  const { setOnlyNewTransactionCategories } = useBankTransactionsCategoryActions();
+  react.useEffect(() => {
+    if (!bankTransactions) return;
+    const defaultCategories = bankTransactions.map((transaction) => ({
+      id: transaction.id,
+      category: getDefaultSelectedCategoryForBankTransaction(transaction)
+    }));
+    setOnlyNewTransactionCategories(defaultCategories);
+  }, [bankTransactions, setOnlyNewTransactionCategories]);
+};
 const BankTransactionList = ({
   bankTransactions,
   editable,
@@ -14614,29 +14836,56 @@ const BankTransactionList = ({
   stringOverrides,
   showDescriptions,
   showReceiptUploads,
-  showTooltips
+  showTooltips,
+  _showBulkSelection = false
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "Layer__bank-transactions__list", children: bankTransactions == null ? void 0 : bankTransactions.map(
-    (bankTransaction, index2) => /* @__PURE__ */ jsxRuntime.jsx(
-      BankTransactionListItem,
+  const { isAllSelected, isPartiallySelected, onHeaderCheckboxChange } = useBankTransactionsTableCheckboxState({ bankTransactions });
+  useUpsertBankTransactionsDefaultCategories(bankTransactions);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    _showBulkSelection && /* @__PURE__ */ jsxRuntime.jsxs(
+      HStack,
       {
-        index: index2,
-        dateFormat: DATE_FORMAT$1,
-        bankTransaction,
-        editable,
-        removeTransaction,
-        containerWidth,
-        stringOverrides,
-        showDescriptions,
-        showReceiptUploads,
-        showTooltips
-      },
-      bankTransaction.id
-    )
-  ) });
+        gap: "md",
+        pi: "md",
+        pb: "md",
+        className: "Layer__bank-transactions__list-header",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              isSelected: isAllSelected,
+              isIndeterminate: isPartiallySelected,
+              onChange: onHeaderCheckboxChange,
+              "aria-label": "Select all transactions on this page"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", pbs: "3xs", children: "Select all" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "Layer__bank-transactions__list", children: bankTransactions == null ? void 0 : bankTransactions.map(
+      (bankTransaction, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+        BankTransactionListItem,
+        {
+          index: index2,
+          dateFormat: DATE_FORMAT$1,
+          bankTransaction,
+          editable,
+          removeTransaction,
+          containerWidth,
+          stringOverrides,
+          showDescriptions,
+          showReceiptUploads,
+          showTooltips,
+          _showBulkSelection
+        },
+        bankTransaction.id
+      )
+    ) })
+  ] });
 };
-const Paperclip = (_ib) => {
-  var _jb = _ib, { size = 20 } = _jb, props = __objRest(_jb, ["size"]);
+const Paperclip = (_ob) => {
+  var _pb = _ob, { size = 20 } = _pb, props = __objRest(_pb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -14744,8 +14993,8 @@ const getAssignedValue$1 = (bankTransaction) => {
   }
   return null;
 };
-const X = (_kb) => {
-  var _lb = _kb, { size = 18 } = _lb, props = __objRest(_lb, ["size"]);
+const X = (_qb) => {
+  var _rb = _qb, { size = 18 } = _rb, props = __objRest(_rb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14779,11 +15028,11 @@ const X = (_kb) => {
   );
 };
 const CLASS_NAME$7 = "Layer__MinimalSearchField";
-function MinimalSearchField(_mb) {
-  var _nb = _mb, {
+function MinimalSearchField(_sb) {
+  var _tb = _sb, {
     placeholder,
     isDisabled
-  } = _nb, restProps = __objRest(_nb, [
+  } = _tb, restProps = __objRest(_tb, [
     "placeholder",
     "isDisabled"
   ]);
@@ -14800,8 +15049,8 @@ function MinimalSearchField(_mb) {
 }
 const INPUT_GROUP_CLASS_NAME = "Layer__InputGroup";
 const InputGroup = react.forwardRef(
-  function InputGroup2(_ob, ref) {
-    var _pb = _ob, { actionCount, className, slots, children } = _pb, restProps = __objRest(_pb, ["actionCount", "className", "slots", "children"]);
+  function InputGroup2(_ub, ref) {
+    var _vb = _ub, { actionCount, className, slots, children } = _vb, restProps = __objRest(_vb, ["actionCount", "className", "slots", "children"]);
     const combinedClassName = classNames(INPUT_GROUP_CLASS_NAME, className);
     const dataProperties = toDataProperties({
       "action-count": actionCount
@@ -14817,8 +15066,8 @@ const InputGroup = react.forwardRef(
   }
 );
 const CLASS_NAME$6 = "Layer__SearchField";
-function SearchField(_qb) {
-  var _rb = _qb, { slot = "search", className, label, isDisabled } = _rb, restProps = __objRest(_rb, ["slot", "className", "label", "isDisabled"]);
+function SearchField(_wb) {
+  var _xb = _wb, { slot = "search", className, label, isDisabled } = _xb, restProps = __objRest(_xb, ["slot", "className", "label", "isDisabled"]);
   const combinedClassName = classNames(CLASS_NAME$6, className);
   return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { slot, className: combinedClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsx(VStack, { slot: "icon", align: "center", justify: "center", className: "Layer__SearchField__Icon", "data-disabled": isDisabled || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 14 }) }),
@@ -15187,11 +15436,11 @@ const MatchForm = ({
   showDescriptions,
   showCategorization
 }) => {
-  var _a, _b;
+  var _a;
   const receiptsRef = react.useRef(null);
   const { match: matchBankTransaction2, isLoading } = useBankTransactionsContext();
-  const [selectedMatchId, setSelectedMatchId] = react.useState(
-    (_b = isAlreadyMatched$1(bankTransaction)) != null ? _b : bankTransaction.suggested_matches && ((_a = bankTransaction.suggested_matches) == null ? void 0 : _a.length) > 0 ? bankTransaction.suggested_matches[0].id : void 0
+  const [selectedMatch, setSelectedMatch] = react.useState(
+    getBankTransactionMatchAsSuggestedMatch(bankTransaction)
   );
   const [formError, setFormError] = react.useState();
   const showRetry = Boolean(bankTransaction.error);
@@ -15206,13 +15455,14 @@ const MatchForm = ({
     yield matchBankTransaction2(bankTransaction.id, foundMatch.id, true);
   });
   const save = () => __async(null, null, function* () {
+    var _a2;
     if (!showCategorization) {
       return;
     }
-    if (!selectedMatchId) {
+    if (!selectedMatch) {
       setFormError("Select an option to match the transaction");
-    } else if (selectedMatchId && selectedMatchId !== isAlreadyMatched$1(bankTransaction)) {
-      yield onMatchSubmit(selectedMatchId);
+    } else if (selectedMatch && selectedMatch.id !== ((_a2 = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a2.id)) {
+      yield onMatchSubmit(selectedMatch.id);
     }
     return;
   });
@@ -15224,10 +15474,10 @@ const MatchForm = ({
         classNamePrefix: "Layer__bank-transaction-mobile-list-item",
         readOnly: !showCategorization,
         bankTransaction,
-        selectedMatchId,
-        setSelectedMatchId: (id) => {
+        selectedMatchId: selectedMatch == null ? void 0 : selectedMatch.id,
+        setSelectedMatch: (suggestedMatch) => {
           setFormError(void 0);
-          setSelectedMatchId(id);
+          setSelectedMatch(suggestedMatch);
         }
       }
     ),
@@ -15273,7 +15523,7 @@ const MatchForm = ({
         Button$1,
         {
           fullWidth: true,
-          disabled: !selectedMatchId || isLoading || bankTransaction.processing || selectedMatchId === isAlreadyMatched$1(bankTransaction),
+          disabled: !selectedMatch || isLoading || bankTransaction.processing || selectedMatch.id === ((_a = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a.id),
           onClick: () => {
             void save();
           },
@@ -15285,8 +15535,8 @@ const MatchForm = ({
     showRetry ? /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
   ] });
 };
-const ChevronDown = (_sb) => {
-  var _tb = _sb, { size = 18 } = _tb, props = __objRest(_tb, ["size"]);
+const ChevronDown = (_yb) => {
+  var _zb = _yb, { size = 18 } = _zb, props = __objRest(_zb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15384,7 +15634,6 @@ const SplitForm = ({
       const splitCustomerVendor = c.customer ? decodeCustomerVendor(__spreadProps(__spreadValues({}, c.customer), { customerVendorType: "CUSTOMER" })) : c.vendor ? decodeCustomerVendor(__spreadProps(__spreadValues({}, c.vendor), { customerVendorType: "VENDOR" })) : null;
       return {
         amount: c.amount || 0,
-        inputValue: centsToDollars(c.amount),
         category: new ApiCategorizationAsOption(c.category),
         tags: splitTags,
         customerVendor: splitCustomerVendor
@@ -15392,14 +15641,12 @@ const SplitForm = ({
     }) : [
       {
         amount: bankTransaction.amount,
-        inputValue: centsToDollars(bankTransaction.amount),
         category: defaultCategory ? new ApiCategorizationAsOption(defaultCategory) : null,
         tags: [],
         customerVendor: initialCustomerVendor
       },
       {
         amount: 0,
-        inputValue: "0.00",
         category: defaultCategory ? new ApiCategorizationAsOption(defaultCategory) : null,
         tags: [],
         customerVendor: initialCustomerVendor
@@ -15423,7 +15670,6 @@ const SplitForm = ({
     }, 0);
     const remaining = bankTransaction.amount - splitTotal;
     newSplits[0].amount = remaining;
-    newSplits[0].inputValue = centsToDollars(remaining);
     updateRowState(__spreadProps(__spreadValues({}, rowState), {
       splits: newSplits
     }));
@@ -15431,23 +15677,18 @@ const SplitForm = ({
   };
   const updateAmounts = (rowNumber) => (event) => {
     const newAmount = dollarsToCents(event.target.value) || 0;
-    const newDisplaying = event.target.value;
     const splitTotal = rowState.splits.reduce((sum, split, index2) => {
       const amount = index2 === 0 ? 0 : index2 === rowNumber ? newAmount : split.amount;
       return sum + amount;
     }, 0);
     const remaining = bankTransaction.amount - splitTotal;
     rowState.splits[rowNumber].amount = newAmount;
-    rowState.splits[rowNumber].inputValue = newDisplaying;
     rowState.splits[0].amount = remaining;
-    rowState.splits[0].inputValue = centsToDollars(remaining);
     updateRowState(__spreadValues({}, rowState));
     setFormError(void 0);
   };
   const onBlur = (event) => {
     if (event.target.value === "") {
-      const [_, index2] = event.target.name.split("-");
-      rowState.splits[parseInt(index2)].inputValue = "0.00";
       updateRowState(__spreadValues({}, rowState));
       setFormError(void 0);
     }
@@ -15463,7 +15704,6 @@ const SplitForm = ({
         ...rowState.splits,
         {
           amount: 0,
-          inputValue: "0.00",
           category: defaultCategory ? new ApiCategorizationAsOption(defaultCategory) : null,
           tags: [],
           customerVendor: initialCustomerVendor
@@ -15548,7 +15788,7 @@ const SplitForm = ({
                   ),
                   disabled: index2 === 0,
                   onChange: updateAmounts(index2),
-                  value: split.inputValue,
+                  value: convertFromCents(split.amount),
                   onBlur,
                   isInvalid: split.amount < 0,
                   errorMessage: "Negative values are not allowed",
@@ -16084,9 +16324,8 @@ const BankTransactionsTable = ({
   onRefresh
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
-  const { selectedIds } = useSelectedIds();
-  const { selectMultiple, deselectMultiple } = useBulkSelectionActions();
-  const { setOnlyNewTransactionCategories } = useBankTransactionsCategoryActions();
+  const { isAllSelected, isPartiallySelected, onHeaderCheckboxChange } = useBankTransactionsTableCheckboxState({ bankTransactions });
+  useUpsertBankTransactionsDefaultCategories(bankTransactions);
   const showReceiptColumn = (_a = showReceiptUploads && (bankTransactions == null ? void 0 : bankTransactions.some(
     (transaction) => {
       var _a2;
@@ -16097,39 +16336,6 @@ const BankTransactionsTable = ({
     () => toDataProperties({ "show-receipt-upload-column": showReceiptColumn }),
     [showReceiptColumn]
   );
-  const currentPageIds = react.useMemo(
-    () => {
-      var _a2;
-      return (_a2 = bankTransactions == null ? void 0 : bankTransactions.map((tx) => tx.id)) != null ? _a2 : [];
-    },
-    [bankTransactions]
-  );
-  const selectedCount = react.useMemo(
-    () => currentPageIds.filter((id) => selectedIds.has(id)).length,
-    [currentPageIds, selectedIds]
-  );
-  const isAllSelected = selectedCount > 0 && selectedCount === currentPageIds.length;
-  const isPartiallySelected = selectedCount > 0 && selectedCount < currentPageIds.length;
-  const handleHeaderCheckboxChange = react.useCallback((checked) => {
-    if (!checked || isPartiallySelected) {
-      deselectMultiple(currentPageIds);
-    } else {
-      selectMultiple(currentPageIds);
-    }
-  }, [
-    currentPageIds,
-    isPartiallySelected,
-    selectMultiple,
-    deselectMultiple
-  ]);
-  react.useEffect(() => {
-    if (!bankTransactions) return;
-    const defaultCategories = bankTransactions.map((transaction) => ({
-      id: transaction.id,
-      category: getDefaultSelectedCategoryForBankTransaction(transaction)
-    }));
-    setOnlyNewTransactionCategories(defaultCategories);
-  }, [bankTransactions, setOnlyNewTransactionCategories]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
     {
@@ -16142,7 +16348,7 @@ const BankTransactionsTable = ({
             {
               isSelected: isAllSelected,
               isIndeterminate: isPartiallySelected,
-              onChange: handleHeaderCheckboxChange,
+              onChange: onHeaderCheckboxChange,
               "aria-label": "Select all transactions on this page"
             }
           ) }) }),
@@ -16265,8 +16471,8 @@ const usePaginationRange = ({
   }, [totalCount, pageSize, siblingCount, currentPage]);
   return paginationRange;
 };
-const PaginationButton = (_ub) => {
-  var _vb = _ub, { children, isSelected } = _vb, buttonProps = __objRest(_vb, ["children", "isSelected"]);
+const PaginationButton = (_Ab) => {
+  var _Bb = _Ab, { children, isSelected } = _Bb, buttonProps = __objRest(_Bb, ["children", "isSelected"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     __spreadProps(__spreadValues({
@@ -16537,7 +16743,6 @@ function Wizard({
   const contextValue = react.useMemo(() => ({ next, previous, goToStep }), [next, previous, goToStep]);
   return /* @__PURE__ */ jsxRuntime.jsx(WizardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", children: [
     Header3,
-    /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
     currentStep,
     Footer
   ] }) });
@@ -16634,8 +16839,8 @@ const CreatableSelect = ({
     className
   );
   const DropdownIndicator = react.useCallback((props) => /* @__PURE__ */ jsxRuntime.jsx(Select$1.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownFill, {}) })), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !isInvalid || !errorMessage, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(
       BaseCreatableSelect,
       {
         inputId,
@@ -16660,7 +16865,7 @@ const CreatableSelect = ({
         createOptionPosition
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
 const notEmpty = (value) => {
@@ -16686,15 +16891,15 @@ function flattenValidationErrors(errors) {
 }
 const FORM_CLASS_NAME = "Layer__UI__Form";
 const Form = react.forwardRef(
-  function Form2(_wb, ref) {
-    var _xb = _wb, { children, className } = _xb, restProps = __objRest(_xb, ["children", "className"]);
+  function Form2(_Cb, ref) {
+    var _Db = _Cb, { children, className } = _Db, restProps = __objRest(_Db, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Form, __spreadProps(__spreadValues({}, restProps), { className: classNames(FORM_CLASS_NAME, className), ref, children }));
   }
 );
 const TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
 const TextField = react.forwardRef(
-  function TextField2(_yb, ref) {
-    var _zb = _yb, { children, inline, textarea, className } = _zb, restProps = __objRest(_zb, ["children", "inline", "textarea", "className"]);
+  function TextField2(_Eb, ref) {
+    var _Fb = _Eb, { children, inline, textarea, className } = _Fb, restProps = __objRest(_Fb, ["children", "inline", "textarea", "className"]);
     const dataProperties = toDataProperties({ inline, textarea });
     return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.TextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
   }
@@ -16751,8 +16956,8 @@ function BaseFormTextField({
 }
 const INPUT_CLASS_NAME = "Layer__UI__Input";
 const Input = react.forwardRef(
-  function Input2(_Ab, ref) {
-    var _Bb = _Ab, { inset, placement } = _Bb, restProps = __objRest(_Bb, ["inset", "placement"]);
+  function Input2(_Gb, ref) {
+    var _Hb = _Gb, { inset, placement } = _Hb, restProps = __objRest(_Hb, ["inset", "placement"]);
     const dataProperties = toDataProperties({ inset, placement });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Input,
@@ -16848,15 +17053,15 @@ const withForceUpdate = (value) => {
     writable: false
   });
 };
-function FormBigDecimalField(_Cb) {
-  var _Db = _Cb, {
+function FormBigDecimalField(_Ib) {
+  var _Jb = _Ib, {
     mode = "decimal",
     allowNegative = false,
     maxValue = mode === "percent" ? BIG_DECIMAL_ONE : DEFAULT_MAX_VALUE,
     minDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MIN_DECIMAL_PLACES,
     maxDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MAX_DECIMAL_PLACES,
     slots
-  } = _Db, restProps = __objRest(_Db, [
+  } = _Jb, restProps = __objRest(_Jb, [
     "mode",
     "allowNegative",
     "maxValue",
@@ -16968,8 +17173,8 @@ function FormCheckboxField({
 }
 const DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
 const DateField = react.forwardRef(
-  function DateField2(_Eb, ref) {
-    var _Fb = _Eb, { inline, className, isReadOnly } = _Fb, restProps = __objRest(_Fb, ["inline", "className", "isReadOnly"]);
+  function DateField2(_Kb, ref) {
+    var _Lb = _Kb, { inline, className, isReadOnly } = _Lb, restProps = __objRest(_Lb, ["inline", "className", "isReadOnly"]);
     const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateField,
@@ -16983,8 +17188,8 @@ const DateField = react.forwardRef(
 );
 const DATE_INPUT_CLASS_NAME = "Layer__UI__DateInput";
 const DateInput = react.forwardRef(
-  function DateInput2(_Gb, ref) {
-    var _Hb = _Gb, { inset } = _Hb, restProps = __objRest(_Hb, ["inset"]);
+  function DateInput2(_Mb, ref) {
+    var _Nb = _Mb, { inset } = _Nb, restProps = __objRest(_Nb, ["inset"]);
     const dataProperties = toDataProperties({ inset });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateInput,
@@ -16997,8 +17202,8 @@ const DateInput = react.forwardRef(
 );
 const DATE_SEGMENT_CLASS_NAME = "Layer__UI__DateSegment";
 const DateSegment = react.forwardRef(
-  function DateSegment2(_Ib, ref) {
-    var _Jb = _Ib, { isReadOnly } = _Jb, restProps = __objRest(_Jb, ["isReadOnly"]);
+  function DateSegment2(_Ob, ref) {
+    var _Pb = _Ob, { isReadOnly } = _Pb, restProps = __objRest(_Pb, ["isReadOnly"]);
     const dataProperties = toDataProperties({ interactive: !isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateSegment,
@@ -17076,8 +17281,8 @@ function FormDateField({
 }
 const TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 const TextArea = react.forwardRef(
-  function TextArea2(_Kb, ref) {
-    var _Lb = _Kb, { resize = "none" } = _Lb, restProps = __objRest(_Lb, ["resize"]);
+  function TextArea2(_Qb, ref) {
+    var _Rb = _Qb, { resize = "none" } = _Rb, restProps = __objRest(_Rb, ["resize"]);
     const dataProperties = toDataProperties({ resize });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,
@@ -18340,22 +18545,19 @@ const BulkActionsModule = ({ slots }) => {
   const { count } = useCountSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "space-between", align: "center", gap: "xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", gap: "sm", pi: "sm", className: "Layer__BulkActionsModule__SelectedItemsContainer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__BulkActionsModule__SelectedItems", children: /* @__PURE__ */ jsxRuntime.jsxs(Span, { children: [
-        count,
-        " selected ",
-        pluralize("item", count)
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__BulkActionsModule__Divider" }),
-      /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", pis: "xs", pie: "3xs", gap: "3xs", className: "Layer__BulkActionsModule__SelectedItemsContainer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: `${count} selected` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
-          variant: "text",
+          variant: "ghost",
+          icon: true,
+          inset: true,
           onClick: clearSelection,
           "aria-label": "Clear selected items",
-          children: "Clear"
+          children: /* @__PURE__ */ jsxRuntime.jsx(X, {})
         }
-      ) })
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(slots.BulkActions, {})
   ] });
@@ -18379,40 +18581,17 @@ const CategoryUpdateSchema = index.Schema.Union(
   SingleCategoryUpdateSchema,
   SplitCategoryUpdateSchema
 );
-const BULK_MATCH_OR_CATEGORIZE_TAG = "#bulk-match-or-categorize";
-const MatchTransactionRequestSchema = effect.Schema.Struct({
-  type: effect.Schema.Literal("match"),
-  suggestedMatchId: effect.pipe(
-    effect.Schema.propertySignature(effect.Schema.UUID),
-    effect.Schema.fromKey("suggested_match_id")
-  )
-});
+const BULK_CATEGORIZE_BANK_TRANSACTIONS_TAG_KEY = "#bulk-categorize-bank-transactions";
 const CategorizeTransactionRequestSchema$1 = effect.Schema.Struct({
-  type: effect.Schema.Literal("categorize"),
+  transactionId: effect.Schema.propertySignature(effect.Schema.UUID).pipe(
+    effect.Schema.fromKey("transaction_id")
+  ),
   categorization: CategoryUpdateSchema
 });
-const MatchOrCategorizeTransactionRequestSchema = effect.Schema.Union(
-  MatchTransactionRequestSchema,
-  CategorizeTransactionRequestSchema$1
-);
-const BulkMatchOrCategorizeRequestSchema = effect.Schema.Struct({
-  transactions: effect.Schema.Record({
-    key: effect.Schema.UUID,
-    value: MatchOrCategorizeTransactionRequestSchema
-  })
-});
-effect.Schema.Struct({
-  businessId: effect.Schema.String
+const BulkCategorizeRequestSchema = effect.Schema.Struct({
+  transactions: effect.Schema.Array(CategorizeTransactionRequestSchema$1)
 });
-const bulkMatchOrCategorize = post(
-  ({ businessId }) => {
-    const parameters = toDefinedSearchParameters({
-      categorization_source: "API_FROM_COMPONENT",
-      match_source: "API_CONFIRM_MATCH_FROM_COMPONENT"
-    });
-    return `/v1/businesses/${businessId}/bank-transactions/bulk-match-or-categorize?${parameters}`;
-  }
-);
+const bulkCategorize = post(({ businessId }) => `/v1/businesses/${businessId}/bank-transactions/bulk-categorize`);
 function buildKey$C({
   access_token: accessToken,
   apiUrl,
@@ -18423,30 +18602,24 @@ function buildKey$C({
       accessToken,
       apiUrl,
       businessId,
-      tags: [BULK_MATCH_OR_CATEGORIZE_TAG]
+      tags: [BULK_CATEGORIZE_BANK_TRANSACTIONS_TAG_KEY]
     };
   }
 }
-const useBulkMatchOrCategorize = () => {
+const useBulkCategorize = () => {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
-  const { selectedIds } = useSelectedIds();
-  const { transactionCategories } = useGetAllBankTransactionsCategories();
   const { forceReloadBankTransactions } = useBankTransactionsGlobalCacheActions();
-  const buildTransactionsPayload = react.useCallback(() => {
-    const transactions = buildBulkMatchOrCategorizePayload(selectedIds, transactionCategories);
-    return { transactions };
-  }, [selectedIds, transactionCategories]);
   const mutationResponse = useSWRMutation(
     () => buildKey$C(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
-    ({ accessToken, apiUrl, businessId: businessId2 }, { arg }) => bulkMatchOrCategorize(
+    ({ accessToken, apiUrl, businessId: businessId2 }, { arg }) => bulkCategorize(
       apiUrl,
       accessToken,
       {
         params: { businessId: businessId2 },
-        body: effect.Schema.encodeSync(BulkMatchOrCategorizeRequestSchema)(arg)
+        body: effect.Schema.encodeSync(BulkCategorizeRequestSchema)(arg)
       }
     ).then(({ data: data2 }) => data2),
     {
@@ -18454,19 +18627,16 @@ const useBulkMatchOrCategorize = () => {
       throwOnError: true
     }
   );
-  const { trigger: originalTrigger } = mutationResponse;
+  const originalTrigger = mutationResponse.trigger;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
       void forceReloadBankTransactions();
       return triggerResult;
     }),
-    [
-      originalTrigger,
-      forceReloadBankTransactions
-    ]
+    [originalTrigger, forceReloadBankTransactions]
   );
-  const proxiedResponse = new Proxy(mutationResponse, {
+  return new Proxy(mutationResponse, {
     get(target, prop) {
       if (prop === "trigger") {
         return stableProxiedTrigger;
@@ -18474,59 +18644,109 @@ const useBulkMatchOrCategorize = () => {
       return Reflect.get(target, prop);
     }
   });
-  return __spreadProps(__spreadValues({}, proxiedResponse), {
-    buildTransactionsPayload
-  });
 };
-const BankTransactionsConfirmAllButton = () => {
+var CategorizationMode = /* @__PURE__ */ ((CategorizationMode2) => {
+  CategorizationMode2["Categorize"] = "Categorize";
+  CategorizationMode2["Recategorize"] = "Recategorize";
+  return CategorizationMode2;
+})(CategorizationMode || {});
+const BankTransactionsCategorizeAllModal = ({ isOpen, onOpenChange, mode }) => {
   const { count } = useCountSelectedIds();
+  const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
-  const [isConfirmAllModalOpen, setIsConfirmAllModalOpen] = react.useState(false);
-  const { trigger, buildTransactionsPayload } = useBulkMatchOrCategorize();
-  const handleConfirmAllClick = react.useCallback(() => {
-    setIsConfirmAllModalOpen(true);
-  }, []);
+  const [selectedCategory, setSelectedCategory] = react.useState(null);
+  const { trigger } = useBulkCategorize();
+  const handleCategorizeModalClose = react.useCallback((isOpen2) => {
+    onOpenChange(isOpen2);
+    if (!isOpen2) {
+      setSelectedCategory(null);
+    }
+  }, [onOpenChange]);
   const handleConfirm = react.useCallback(() => __async(null, null, function* () {
-    const payload = buildTransactionsPayload();
-    yield trigger(payload);
+    if (!selectedCategory || selectedCategory.classification === null) {
+      return;
+    }
+    if (!isCategoryAsOption(selectedCategory) && !isApiCategorizationAsOption(selectedCategory)) {
+      return;
+    }
+    const transactionIds = Array.from(selectedIds);
+    const categorization = {
+      type: "Category",
+      category: selectedCategory.classification
+    };
+    yield trigger({
+      transactions: transactionIds.map((transactionId) => ({
+        transactionId,
+        categorization
+      }))
+    });
     clearSelection();
-  }), [buildTransactionsPayload, trigger, clearSelection]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "solid",
-        onClick: handleConfirmAllClick,
-        children: "Confirm all"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      BaseConfirmationModal,
-      {
-        isOpen: isConfirmAllModalOpen,
-        onOpenChange: setIsConfirmAllModalOpen,
-        title: "Confirm all suggestions?",
-        content: /* @__PURE__ */ jsxRuntime.jsx(Span, { children: `This action will confirm ${count} selected ${pluralize("transaction", count)}.` }),
-        onConfirm: handleConfirm,
-        confirmLabel: "Confirm All",
-        cancelLabel: "Cancel",
-        errorText: "Failed to confirm transactions",
-        closeOnConfirm: true
-      }
-    )
-  ] });
+  }), [selectedIds, selectedCategory, trigger, clearSelection]);
+  const categorySelectId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange: handleCategorizeModalClose,
+      title: mode === "Categorize" ? "Categorize all selected transactions?" : "Recategorize all selected transactions?",
+      content: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: categorySelectId, children: "Select category" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BankTransactionCategoryComboBox,
+            {
+              inputId: categorySelectId,
+              selectedValue: selectedCategory,
+              onSelectedValueChange: setSelectedCategory,
+              includeSuggestedMatches: false
+            }
+          )
+        ] }),
+        selectedCategory && isCategoryAsOption(selectedCategory) && /* @__PURE__ */ jsxRuntime.jsx(Span, { children: mode === "Categorize" ? `This will categorize ${count} selected ${pluralize("transaction", count)} as ${selectedCategory.original.displayName}.` : `This will recategorize ${count} selected ${pluralize("transaction", count)} as ${selectedCategory.original.displayName}.` })
+      ] }),
+      onConfirm: handleConfirm,
+      confirmLabel: mode === "Categorize" ? "Categorize All" : "Recategorize All",
+      cancelLabel: "Cancel",
+      confirmDisabled: !selectedCategory,
+      errorText: mode === "Categorize" ? "Failed to categorize transactions" : "Failed to recategorize transactions",
+      closeOnConfirm: true
+    }
+  );
 };
-const BULK_CATEGORIZE_BANK_TRANSACTIONS_TAG_KEY = "#bulk-categorize-bank-transactions";
+const BULK_MATCH_OR_CATEGORIZE_TAG = "#bulk-match-or-categorize";
+const MatchTransactionRequestSchema = effect.Schema.Struct({
+  type: effect.Schema.Literal("match"),
+  suggestedMatchId: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.UUID),
+    effect.Schema.fromKey("suggested_match_id")
+  )
+});
 const CategorizeTransactionRequestSchema = effect.Schema.Struct({
-  transactionId: effect.Schema.propertySignature(effect.Schema.UUID).pipe(
-    effect.Schema.fromKey("transaction_id")
-  ),
+  type: effect.Schema.Literal("categorize"),
   categorization: CategoryUpdateSchema
 });
-const BulkCategorizeRequestSchema = effect.Schema.Struct({
-  transactions: effect.Schema.Array(CategorizeTransactionRequestSchema)
+const MatchOrCategorizeTransactionRequestSchema = effect.Schema.Union(
+  MatchTransactionRequestSchema,
+  CategorizeTransactionRequestSchema
+);
+const BulkMatchOrCategorizeRequestSchema = effect.Schema.Struct({
+  transactions: effect.Schema.Record({
+    key: effect.Schema.UUID,
+    value: MatchOrCategorizeTransactionRequestSchema
+  })
 });
-const bulkCategorize = post(({ businessId }) => `/v1/businesses/${businessId}/bank-transactions/bulk-categorize`);
+effect.Schema.Struct({
+  businessId: effect.Schema.String
+});
+const bulkMatchOrCategorize = post(
+  ({ businessId }) => {
+    const parameters = toDefinedSearchParameters({
+      categorization_source: "API_FROM_COMPONENT",
+      match_source: "API_CONFIRM_MATCH_FROM_COMPONENT"
+    });
+    return `/v1/businesses/${businessId}/bank-transactions/bulk-match-or-categorize?${parameters}`;
+  }
+);
 function buildKey$B({
   access_token: accessToken,
   apiUrl,
@@ -18537,24 +18757,30 @@ function buildKey$B({
       accessToken,
       apiUrl,
       businessId,
-      tags: [BULK_CATEGORIZE_BANK_TRANSACTIONS_TAG_KEY]
+      tags: [BULK_MATCH_OR_CATEGORIZE_TAG]
     };
   }
 }
-const useBulkCategorize = () => {
+const useBulkMatchOrCategorize = () => {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
+  const { selectedIds } = useSelectedIds();
+  const { transactionCategories } = useGetAllBankTransactionsCategories();
   const { forceReloadBankTransactions } = useBankTransactionsGlobalCacheActions();
+  const buildTransactionsPayload = react.useCallback(() => {
+    const transactions = buildBulkMatchOrCategorizePayload(selectedIds, transactionCategories);
+    return { transactions };
+  }, [selectedIds, transactionCategories]);
   const mutationResponse = useSWRMutation(
     () => buildKey$B(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
-    ({ accessToken, apiUrl, businessId: businessId2 }, { arg }) => bulkCategorize(
+    ({ accessToken, apiUrl, businessId: businessId2 }, { arg }) => bulkMatchOrCategorize(
       apiUrl,
       accessToken,
       {
         params: { businessId: businessId2 },
-        body: effect.Schema.encodeSync(BulkCategorizeRequestSchema)(arg)
+        body: effect.Schema.encodeSync(BulkMatchOrCategorizeRequestSchema)(arg)
       }
     ).then(({ data: data2 }) => data2),
     {
@@ -18562,16 +18788,19 @@ const useBulkCategorize = () => {
       throwOnError: true
     }
   );
-  const originalTrigger = mutationResponse.trigger;
+  const { trigger: originalTrigger } = mutationResponse;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
       void forceReloadBankTransactions();
       return triggerResult;
     }),
-    [originalTrigger, forceReloadBankTransactions]
+    [
+      originalTrigger,
+      forceReloadBankTransactions
+    ]
   );
-  return new Proxy(mutationResponse, {
+  const proxiedResponse = new Proxy(mutationResponse, {
     get(target, prop) {
       if (prop === "trigger") {
         return stableProxiedTrigger;
@@ -18579,137 +18808,33 @@ const useBulkCategorize = () => {
       return Reflect.get(target, prop);
     }
   });
+  return __spreadProps(__spreadValues({}, proxiedResponse), {
+    buildTransactionsPayload
+  });
 };
-const BankTransactionsCategorizeAllButton = () => {
+const BankTransactionsConfirmAllModal = ({ isOpen, onOpenChange }) => {
   const { count } = useCountSelectedIds();
-  const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
-  const [isCategorizeAllModalOpen, setIsCategorizeAllModalOpen] = react.useState(false);
-  const [selectedCategory, setSelectedCategory] = react.useState(null);
-  const { trigger } = useBulkCategorize();
-  const handleCategorizeAllClick = react.useCallback(() => {
-    setIsCategorizeAllModalOpen(true);
-  }, []);
-  const handleCategorizeModalClose = react.useCallback((isOpen) => {
-    setIsCategorizeAllModalOpen(isOpen);
-    if (!isOpen) {
-      setSelectedCategory(null);
-    }
-  }, []);
+  const { trigger, buildTransactionsPayload } = useBulkMatchOrCategorize();
   const handleConfirm = react.useCallback(() => __async(null, null, function* () {
-    if (!selectedCategory || selectedCategory.classification === null) {
-      return;
-    }
-    if (!isCategoryAsOption(selectedCategory) && !isApiCategorizationAsOption(selectedCategory)) {
-      return;
-    }
-    const transactionIds = Array.from(selectedIds);
-    const categorization = {
-      type: "Category",
-      category: selectedCategory.classification
-    };
-    yield trigger({
-      transactions: transactionIds.map((transactionId) => ({
-        transactionId,
-        categorization
-      }))
-    });
+    const payload = buildTransactionsPayload();
+    yield trigger(payload);
     clearSelection();
-  }), [selectedIds, selectedCategory, trigger, clearSelection]);
-  const categorySelectId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "outlined",
-        onClick: handleCategorizeAllClick,
-        children: "Set category"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      BaseConfirmationModal,
-      {
-        isOpen: isCategorizeAllModalOpen,
-        onOpenChange: handleCategorizeModalClose,
-        title: "Categorize all selected transactions?",
-        content: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: categorySelectId, children: "Select category" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              BankTransactionCategoryComboBox,
-              {
-                inputId: categorySelectId,
-                selectedValue: selectedCategory,
-                onSelectedValueChange: setSelectedCategory,
-                includeSuggestedMatches: false
-              }
-            )
-          ] }),
-          selectedCategory && isCategoryAsOption(selectedCategory) && /* @__PURE__ */ jsxRuntime.jsx(Span, { children: `This action will categorize ${count} selected transactions as ${selectedCategory.original.displayName}.` })
-        ] }),
-        onConfirm: handleConfirm,
-        confirmLabel: "Categorize All",
-        cancelLabel: "Cancel",
-        confirmDisabled: !selectedCategory,
-        errorText: "Failed to categorize transactions",
-        closeOnConfirm: true
-      }
-    )
-  ] });
-};
-const BankTransactionsRecategorizeAllButton = () => {
-  const { count } = useCountSelectedIds();
-  const [isRecategorizeAllModalOpen, setIsRecategorizeAllModalOpen] = react.useState(false);
-  const [selectedCategory, setSelectedCategory] = react.useState(null);
-  const handleRecategorizeAllClick = react.useCallback(() => {
-    setIsRecategorizeAllModalOpen(true);
-  }, []);
-  const handleRecategorizeModalClose = react.useCallback((isOpen) => {
-    setIsRecategorizeAllModalOpen(isOpen);
-    if (!isOpen) {
-      setSelectedCategory(null);
+  }), [buildTransactionsPayload, trigger, clearSelection]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Confirm all suggestions?",
+      content: /* @__PURE__ */ jsxRuntime.jsx(Span, { children: `This will confirm ${count} selected ${pluralize("transaction", count)}.` }),
+      onConfirm: handleConfirm,
+      confirmLabel: "Confirm All",
+      cancelLabel: "Cancel",
+      errorText: "Failed to confirm transactions",
+      closeOnConfirm: true
     }
-  }, []);
-  const categorySelectId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "outlined",
-        onClick: handleRecategorizeAllClick,
-        children: "Re-categorize all"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      BaseConfirmationModal,
-      {
-        isOpen: isRecategorizeAllModalOpen,
-        onOpenChange: handleRecategorizeModalClose,
-        title: "Recategorize all selected transactions?",
-        content: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: categorySelectId, children: "Select category" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              BankTransactionCategoryComboBox,
-              {
-                inputId: categorySelectId,
-                selectedValue: selectedCategory,
-                onSelectedValueChange: setSelectedCategory,
-                includeSuggestedMatches: false
-              }
-            )
-          ] }),
-          selectedCategory && isCategoryAsOption(selectedCategory) && /* @__PURE__ */ jsxRuntime.jsx(Span, { children: `This action will recategorize ${count} selected transactions as ${selectedCategory.original.displayName}.` })
-        ] }),
-        onConfirm: () => {
-        },
-        confirmLabel: "Recategorize All",
-        cancelLabel: "Cancel",
-        confirmDisabled: !selectedCategory,
-        closeOnConfirm: true
-      }
-    )
-  ] });
+  );
 };
 const BULK_UNCATEGORIZE_BANK_TRANSACTIONS_TAG_KEY = "#bulk-uncategorize-bank-transactions";
 const BulkUncategorizeRequestSchema = effect.Schema.Struct({
@@ -18771,53 +18896,94 @@ const useBulkUncategorize = () => {
     }
   });
 };
-const BankTransactionsUncategorizeAllButton = () => {
+const BankTransactionsUncategorizeAllModal = ({ isOpen, onOpenChange }) => {
   const { count } = useCountSelectedIds();
   const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
-  const [isUnconfirmAllModalOpen, setIsUnconfirmAllModalOpen] = react.useState(false);
   const { trigger } = useBulkUncategorize();
-  const handleUnconfirmAllClick = react.useCallback(() => {
-    setIsUnconfirmAllModalOpen(true);
-  }, []);
   const handleConfirm = react.useCallback(() => __async(null, null, function* () {
     const transactionIds = Array.from(selectedIds);
     yield trigger({ transactionIds });
     clearSelection();
   }), [selectedIds, trigger, clearSelection]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Uncategorize all selected transactions?",
+      content: /* @__PURE__ */ jsxRuntime.jsx(Span, { children: `This will uncategorize ${count} selected ${pluralize("transaction", count)}.` }),
+      onConfirm: handleConfirm,
+      confirmLabel: "Uncategorize All",
+      cancelLabel: "Cancel",
+      errorText: "Failed to uncategorize transactions"
+    }
+  );
+};
+const BankTransactionsBulkActions = () => {
+  const { display } = useBankTransactionsContext();
+  const [categorizeModalOpen, setCategorizeModalOpen] = react.useState(false);
+  const [confirmModalOpen, setConfirmModalOpen] = react.useState(false);
+  const [recategorizeModalOpen, setRecategorizeModalOpen] = react.useState(false);
+  const [uncategorizeModalOpen, setUncategorizeModalOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", gap: "xs", children: display === DisplayState.review ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
-        variant: "solid",
-        onClick: handleUnconfirmAllClick,
-        children: "Uncategorize all"
+        variant: "outlined",
+        onClick: () => setCategorizeModalOpen(true),
+        children: "Categorize"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      BaseConfirmationModal,
+      BankTransactionsCategorizeAllModal,
+      {
+        isOpen: categorizeModalOpen,
+        onOpenChange: setCategorizeModalOpen,
+        mode: CategorizationMode.Categorize
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "solid", onClick: () => setConfirmModalOpen(true), children: "Confirm" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsConfirmAllModal,
       {
-        isOpen: isUnconfirmAllModalOpen,
-        onOpenChange: setIsUnconfirmAllModalOpen,
-        title: "Uncategorize all selected transactions?",
-        content: /* @__PURE__ */ jsxRuntime.jsx(Span, { children: `This action will uncategorize ${count} selected ${pluralize("transaction", count)}.` }),
-        onConfirm: handleConfirm,
-        confirmLabel: "Uncategorize All",
-        cancelLabel: "Cancel",
-        errorText: "Failed to uncategorize transactions"
+        isOpen: confirmModalOpen,
+        onOpenChange: setConfirmModalOpen
       }
     )
-  ] });
-};
-const BankTransactionsBulkActions = () => {
-  const { display } = useBankTransactionsContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(HStack, { pis: "3xl", align: "center", gap: "sm", children: display === DisplayState.review ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsCategorizeAllButton, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsConfirmAllButton, {})
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsRecategorizeAllButton, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsUncategorizeAllButton, {})
-  ] }) });
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "outlined",
+        onClick: () => setRecategorizeModalOpen(true),
+        children: "Recategorize"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsCategorizeAllModal,
+      {
+        isOpen: recategorizeModalOpen,
+        onOpenChange: setRecategorizeModalOpen,
+        mode: CategorizationMode.Recategorize
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "solid",
+        onClick: () => setUncategorizeModalOpen(true),
+        children: "Uncategorize"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsUncategorizeAllModal,
+      {
+        isOpen: uncategorizeModalOpen,
+        onOpenChange: setUncategorizeModalOpen
+      }
+    )
+  ] }) }) });
 };
 function TransactionsSearch({ slot, isDisabled }) {
   const { filters, setFilters } = useBankTransactionsFiltersContext();
@@ -18994,8 +19160,8 @@ const BankTransactionsHeader = ({
     }
   );
 };
-const Inbox = (_Mb) => {
-  var _Nb = _Mb, { size = 18 } = _Nb, props = __objRest(_Nb, ["size"]);
+const Inbox = (_Sb) => {
+  var _Tb = _Sb, { size = 18 } = _Tb, props = __objRest(_Tb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -19542,8 +19708,8 @@ function RuleUpdatesPromptStep({ ruleSuggestion, close: close2 }) {
 const CSS_PREFIX$1 = "Layer__UI__Table";
 const getClassName = (component, additionalClassNames, withHidden) => classNames(`${CSS_PREFIX$1}-${component}`, withHidden && `${CSS_PREFIX$1}-${component}--hidden`, additionalClassNames);
 const Table$1 = react.forwardRef(
-  (_Ob, ref) => {
-    var _Pb = _Ob, { children, className } = _Pb, restProps = __objRest(_Pb, ["children", "className"]);
+  (_Ub, ref) => {
+    var _Vb = _Ub, { children, className } = _Vb, restProps = __objRest(_Vb, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Table,
       __spreadProps(__spreadValues({
@@ -19556,8 +19722,8 @@ const Table$1 = react.forwardRef(
   }
 );
 Table$1.displayName = "Table";
-const TableHeaderInner = (_Qb, ref) => {
-  var _Rb = _Qb, { children, className, hideHeader } = _Rb, restProps = __objRest(_Rb, ["children", "className", "hideHeader"]);
+const TableHeaderInner = (_Wb, ref) => {
+  var _Xb = _Wb, { children, className, hideHeader } = _Xb, restProps = __objRest(_Xb, ["children", "className", "hideHeader"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableHeader,
     __spreadProps(__spreadValues({
@@ -19570,8 +19736,8 @@ const TableHeaderInner = (_Qb, ref) => {
 };
 const TableHeader = react.forwardRef(TableHeaderInner);
 TableHeader.displayName = "TableHeader";
-const TableBodyInner = (_Sb, ref) => {
-  var _Tb = _Sb, { children, className } = _Tb, restProps = __objRest(_Tb, ["children", "className"]);
+const TableBodyInner = (_Yb, ref) => {
+  var _Zb = _Yb, { children, className } = _Zb, restProps = __objRest(_Zb, ["children", "className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableBody,
     __spreadProps(__spreadValues({
@@ -19584,8 +19750,8 @@ const TableBodyInner = (_Sb, ref) => {
 };
 const TableBody$1 = react.forwardRef(TableBodyInner);
 TableBody$1.displayName = "TableBody";
-const RowInner = (_Ub, ref) => {
-  var _Vb = _Ub, { children, className, depth = 0 } = _Vb, restProps = __objRest(_Vb, ["children", "className", "depth"]);
+const RowInner = (__b, ref) => {
+  var _$b = __b, { children, className, depth = 0 } = _$b, restProps = __objRest(_$b, ["children", "className", "depth"]);
   const dataProperties = toDataProperties({ depth });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Row,
@@ -19600,8 +19766,8 @@ const RowInner = (_Ub, ref) => {
 const Row = react.forwardRef(RowInner);
 Row.displayName = "Row";
 const Column = react.forwardRef(
-  (_Wb, ref) => {
-    var _Xb = _Wb, { children, className, textAlign = "left" } = _Xb, restProps = __objRest(_Xb, ["children", "className", "textAlign"]);
+  (_ac, ref) => {
+    var _bc = _ac, { children, className, textAlign = "left" } = _bc, restProps = __objRest(_bc, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Column,
@@ -19616,8 +19782,8 @@ const Column = react.forwardRef(
 );
 Column.displayName = "Column";
 const Cell = react.forwardRef(
-  (_Yb, ref) => {
-    var _Zb = _Yb, { children, className } = _Zb, restProps = __objRest(_Zb, ["children", "className"]);
+  (_cc, ref) => {
+    var _dc = _cc, { children, className } = _dc, restProps = __objRest(_dc, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Cell,
       __spreadProps(__spreadValues({
@@ -19791,13 +19957,7 @@ const AffectedTransactionsTable = ({
     ]: {
       id: "Description",
       header: "Description",
-      cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(
-        Span,
-        {
-          ellipsis: true,
-          children: row.counterpartyName || row.description || "-"
-        }
-      ),
+      cell: (row) => /* @__PURE__ */ jsxRuntime.jsx(Span, { withTooltip: true, children: row.counterpartyName || row.description || "-" }),
       isRowHeader: true
     },
     [
@@ -20265,8 +20425,8 @@ const CategorizationRulesDrawer = () => {
   ) });
 };
 const COMPONENT_NAME$a = "bank-transactions";
-const BankTransactions = (__b) => {
-  var _$b = __b, {
+const BankTransactions = (_ec) => {
+  var _fc = _ec, {
     onError,
     showTags = false,
     showCustomerVendor = false,
@@ -20275,7 +20435,7 @@ const BankTransactions = (__b) => {
     mode,
     renderInAppLink,
     _showBulkSelection = false
-  } = _$b, props = __objRest(_$b, [
+  } = _fc, props = __objRest(_fc, [
     "onError",
     "showTags",
     "showCustomerVendor",
@@ -20514,7 +20674,8 @@ const BankTransactionsTableView = ({
               stringOverrides: stringOverrides == null ? void 0 : stringOverrides.bankTransactionCTAs,
               showDescriptions,
               showReceiptUploads,
-              showTooltips
+              showTooltips,
+              _showBulkSelection
             }
           )
         ] }) : null,
@@ -20559,8 +20720,8 @@ const BankTransactionsTableView = ({
     }
   );
 };
-const QuickbooksIcon = (_ac) => {
-  var _bc = _ac, { size = 24 } = _bc, props = __objRest(_bc, ["size"]);
+const QuickbooksIcon = (_gc) => {
+  var _hc = _gc, { size = 24 } = _hc, props = __objRest(_hc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -20841,8 +21002,8 @@ function QuickbooksContextProvider({ children }) {
   const quickbooksContextData = useQuickbooks();
   return /* @__PURE__ */ jsxRuntime.jsx(QuickbooksContext.Provider, { value: quickbooksContextData, children });
 }
-const Cog = (_cc) => {
-  var _dc = _cc, { size = 12 } = _dc, props = __objRest(_dc, ["size"]);
+const Cog = (_ic) => {
+  var _jc = _ic, { size = 12 } = _jc, props = __objRest(_jc, ["size"]);
   const id = react.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -21488,8 +21649,8 @@ const useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     refetch
   };
 };
-const BarChart2 = (_ec) => {
-  var _fc = _ec, { size = 12 } = _fc, props = __objRest(_fc, ["size"]);
+const BarChart2 = (_kc) => {
+  var _lc = _kc, { size = 12 } = _lc, props = __objRest(_lc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -22426,8 +22587,8 @@ const TASKS_CHARTS_COLORS = {
   done: "#3B9C63",
   pending: "#DFA000"
 };
-const SortArrows = (_gc) => {
-  var _hc = _gc, { size = 13 } = _hc, props = __objRest(_hc, ["size"]);
+const SortArrows = (_mc) => {
+  var _nc = _mc, { size = 13 } = _nc, props = __objRest(_nc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -23804,7 +23965,7 @@ const ProfitAndLossDetailReport = ({
         Text,
         {
           as: "span",
-          withTooltip: TextUseTooltip.whenTruncated,
+          withDeprecatedTooltip: TextUseTooltip.whenTruncated,
           ellipsis: true,
           children: row.account.name || "-"
         }
@@ -23822,7 +23983,7 @@ const ProfitAndLossDetailReport = ({
           Text,
           {
             as: "span",
-            withTooltip: TextUseTooltip.whenTruncated,
+            withDeprecatedTooltip: TextUseTooltip.whenTruncated,
             ellipsis: true,
             children: ((_a = row.source) == null ? void 0 : _a.displayDescription) || row.account.accountSubtype.displayName || "-"
           }
@@ -25378,10 +25539,10 @@ function Internal_ProfitAndLossSummaries({
     unstable_AdditionalListItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesListItem, { children: item }, index2))
   ] }) });
 }
-function ProfitAndLossSummaries(_ic) {
-  var _jc = _ic, {
+function ProfitAndLossSummaries(_oc) {
+  var _pc = _oc, {
     onTransactionsToReviewClick
-  } = _jc, restProps = __objRest(_jc, [
+  } = _pc, restProps = __objRest(_pc, [
     "onTransactionsToReviewClick"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -25417,8 +25578,8 @@ const ProfitAndLossWithoutReportsModeProvider = ({
 const ProfitAndLossWithReportsModeProvider = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ReportsModeStoreProvider, { initialModes: { ProfitAndLoss: "monthPicker" }, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossWithoutReportsModeProvider, __spreadValues({}, props)) });
 };
-const ProfitAndLoss = (_kc) => {
-  var _lc = _kc, { withReportsModeProvider = true } = _lc, restProps = __objRest(_lc, ["withReportsModeProvider"]);
+const ProfitAndLoss = (_qc) => {
+  var _rc = _qc, { withReportsModeProvider = true } = _rc, restProps = __objRest(_rc, ["withReportsModeProvider"]);
   if (withReportsModeProvider) return /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossWithReportsModeProvider, __spreadValues({}, restProps));
   return /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossWithoutReportsModeProvider, __spreadValues({}, restProps));
 };
@@ -27226,8 +27387,8 @@ const useLedgerAccounts = () => {
     fetchMore
   };
 };
-const Plus = (_mc) => {
-  var _nc = _mc, { size = 14 } = _nc, props = __objRest(_nc, ["size"]);
+const Plus = (_sc) => {
+  var _tc = _sc, { size = 14 } = _tc, props = __objRest(_tc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -27526,8 +27687,8 @@ const ChartOfAccountsSidebar = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ChartOfAccountsForm, { stringOverrides });
 };
-const Edit2 = (_oc) => {
-  var _pc = _oc, { size = 18 } = _pc, props = __objRest(_pc, ["size"]);
+const Edit2 = (_uc) => {
+  var _vc = _uc, { size = 18 } = _vc, props = __objRest(_vc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -30257,8 +30418,8 @@ const TasksHeader = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__tasks-header", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, children: tasksHeader }) });
 };
-const SmileIcon = (_qc) => {
-  var _rc = _qc, { size = 12 } = _rc, props = __objRest(_rc, ["size"]);
+const SmileIcon = (_wc) => {
+  var _xc = _wc, { size = 12 } = _xc, props = __objRest(_xc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -31217,8 +31378,8 @@ const useBookkeepingYearsStatus = () => {
     isLoading
   };
 };
-const ArrowRightCircle = (_sc) => {
-  var _tc = _sc, { size = 18 } = _tc, props = __objRest(_tc, ["size"]);
+const ArrowRightCircle = (_yc) => {
+  var _zc = _yc, { size = 18 } = _zc, props = __objRest(_zc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -31347,8 +31508,8 @@ const Tab = ({
   badge
 }) => {
   if (disabled) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "Layer__tabs-option", "data-checked": checked, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "Layer__tabs-option", "data-checked": checked, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -31367,7 +31528,7 @@ const Tab = ({
           badge
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", children: disabledMessage })
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "Layer__tabs-option", "data-checked": checked, children: [
@@ -32547,8 +32708,8 @@ const ProgressSteps = ({ steps, currentStep }) => {
     );
   }) });
 };
-const Document = (_uc) => {
-  var _vc = _uc, { size = 20 } = _vc, props = __objRest(_vc, ["size"]);
+const Document = (_Ac) => {
+  var _Bc = _Ac, { size = 20 } = _Bc, props = __objRest(_Bc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -32653,8 +32814,8 @@ const Document = (_uc) => {
     })
   );
 };
-const TrendingUp = (_wc) => {
-  var _xc = _wc, { size = 20 } = _xc, props = __objRest(_xc, ["size"]);
+const TrendingUp = (_Cc) => {
+  var _Dc = _Cc, { size = 20 } = _Dc, props = __objRest(_Dc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -33248,12 +33409,12 @@ const USStateSelect = ({ value, onChange }) => {
     }
   );
 };
-const PhoneInput = (_yc) => {
-  var _zc = _yc, {
+const PhoneInput = (_Ec) => {
+  var _Fc = _Ec, {
     value,
     onChange,
     placeholder = "Phone number"
-  } = _zc, props = __objRest(_zc, [
+  } = _Fc, props = __objRest(_Fc, [
     "value",
     "onChange",
     "placeholder"
@@ -33850,8 +34011,8 @@ const PlatformOnboarding = ({ onComplete }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__platform-onboarding-layout__footer", children: renderStepFooter() })
   ] }) });
 };
-const CoffeeIcon = (_Ac) => {
-  var _Bc = _Ac, { size = 11 } = _Bc, props = __objRest(_Bc, ["size"]);
+const CoffeeIcon = (_Gc) => {
+  var _Hc = _Gc, { size = 11 } = _Hc, props = __objRest(_Hc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -34133,8 +34294,8 @@ const getTimezoneDisplay = (date2) => {
 };
 const LINK_CLASS_NAME = "Layer__UI__Link";
 const Link = react.forwardRef(
-  function Link2(_Cc, ref) {
-    var _Dc = _Cc, {
+  function Link2(_Ic, ref) {
+    var _Jc = _Ic, {
       children,
       size = "md",
       ellipsis,
@@ -34143,7 +34304,7 @@ const Link = react.forwardRef(
       href,
       target,
       rel
-    } = _Dc, restProps = __objRest(_Dc, [
+    } = _Jc, restProps = __objRest(_Jc, [
       "children",
       "size",
       "ellipsis",
@@ -34241,8 +34402,7 @@ const BookkeepingOverview = ({
   showTitle = true,
   onClickReconnectAccounts,
   stringOverrides,
-  slotProps,
-  _showBookACall
+  slotProps
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const [pnlToggle, setPnlToggle] = react.useState("expenses");
@@ -34254,7 +34414,7 @@ const BookkeepingOverview = ({
   };
   const { data: callBookings, isError, isLoading, isValidating } = useCallBookings(1);
   const callBooking = (_d = (_c = callBookings == null ? void 0 : callBookings[0]) == null ? void 0 : _c.data[0]) != null ? _d : null;
-  const callBookingVisible = _showBookACall && callBooking && !isLoading && !isValidating && !isError;
+  const callBookingVisible = callBooking && !isLoading && !isValidating && !isError;
   return /* @__PURE__ */ jsxRuntime.jsxs(ProfitAndLoss, { asContainer: false, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       View,
@@ -35726,19 +35886,19 @@ const VendorsProvider = ({ children }) => {
   const vendors = useVendors();
   return /* @__PURE__ */ jsxRuntime.jsx(VendorsContext.Provider, { value: vendors, children });
 };
-const SelectVendor = (_Ec) => {
-  var _Fc = _Ec, { withContext = true } = _Fc, props = __objRest(_Fc, ["withContext"]);
+const SelectVendor = (_Kc) => {
+  var _Lc = _Kc, { withContext = true } = _Lc, props = __objRest(_Lc, ["withContext"]);
   if (withContext) {
     return /* @__PURE__ */ jsxRuntime.jsx(VendorsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props)) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props));
 };
-const SelectVendorContent = (_Gc) => {
-  var _Hc = _Gc, {
+const SelectVendorContent = (_Mc) => {
+  var _Nc = _Mc, {
     value,
     onChange,
     placeholder = "Select vendor"
-  } = _Hc, props = __objRest(_Hc, [
+  } = _Nc, props = __objRest(_Nc, [
     "value",
     "onChange",
     "placeholder"
@@ -36695,8 +36855,8 @@ const BillsTableWithPanel = ({
     }
   );
 };
-const Bills = (_Ic) => {
-  var _Jc = _Ic, { context = true } = _Jc, props = __objRest(_Jc, ["context"]);
+const Bills = (_Oc) => {
+  var _Pc = _Oc, { context = true } = _Pc, props = __objRest(_Pc, ["context"]);
   if (context) {
     return /* @__PURE__ */ jsxRuntime.jsx(BillsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BillsContent, __spreadValues({}, props)) });
   }
@@ -36895,13 +37055,13 @@ const UnifiedReportSchema = effect.Schema.Struct({
   )
 });
 const UNIFIED_REPORT_TAG_KEY = "#unified-report";
-function buildKey$9(_Kc) {
-  var _Lc = _Kc, {
+function buildKey$9(_Qc) {
+  var _Rc = _Qc, {
     access_token: accessToken,
     apiUrl,
     businessId,
     report
-  } = _Lc, dateParams = __objRest(_Lc, [
+  } = _Rc, dateParams = __objRest(_Rc, [
     "access_token",
     "apiUrl",
     "businessId",
@@ -36917,8 +37077,8 @@ function buildKey$9(_Kc) {
     }, dateParams);
   }
 }
-const getUnifiedReport = get((_Mc) => {
-  var _Nc = _Mc, { businessId, report } = _Nc, dateParams = __objRest(_Nc, ["businessId", "report"]);
+const getUnifiedReport = get((_Sc) => {
+  var _Tc = _Sc, { businessId, report } = _Tc, dateParams = __objRest(_Tc, ["businessId", "report"]);
   const parameters = toDefinedSearchParameters(__spreadValues({}, dateParams));
   return `/v1/businesses/${businessId}/reports/unified/${report}?${parameters}`;
 });
@@ -36947,8 +37107,8 @@ class UnifiedReportSWRResponse {
     return this.swrResponse.mutate;
   }
 }
-function useUnifiedReport(_Oc) {
-  var _Pc = _Oc, { report } = _Pc, dateParams = __objRest(_Pc, ["report"]);
+function useUnifiedReport(_Uc) {
+  var _Vc = _Uc, { report } = _Vc, dateParams = __objRest(_Vc, ["report"]);
   const { data: auth } = useAuth();
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
@@ -37230,8 +37390,8 @@ const DateSelectionComboBox = () => {
 };
 const CALENDAR_CLASS_NAME = "Layer__UI__Calendar";
 const Calendar = react.forwardRef(
-  function Calendar2(_Qc, ref) {
-    var _Rc = _Qc, { className, isReadOnly } = _Rc, restProps = __objRest(_Rc, ["className", "isReadOnly"]);
+  function Calendar2(_Wc, ref) {
+    var _Xc = _Wc, { className, isReadOnly } = _Xc, restProps = __objRest(_Xc, ["className", "isReadOnly"]);
     const dataProperties = toDataProperties({ readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Calendar,
@@ -37245,8 +37405,8 @@ const Calendar = react.forwardRef(
 );
 const CALENDAR_GRID_CLASS_NAME = "Layer__UI__CalendarGrid";
 const CalendarGrid = react.forwardRef(
-  function CalendarGrid2(_Sc, ref) {
-    var _Tc = _Sc, { className } = _Tc, restProps = __objRest(_Tc, ["className"]);
+  function CalendarGrid2(_Yc, ref) {
+    var _Zc = _Yc, { className } = _Zc, restProps = __objRest(_Zc, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGrid,
       __spreadProps(__spreadValues({}, restProps), {
@@ -37258,8 +37418,8 @@ const CalendarGrid = react.forwardRef(
 );
 const CALENDAR_GRID_BODY_CLASS_NAME = "Layer__UI__CalendarGridBody";
 const CalendarGridBody = react.forwardRef(
-  function CalendarGridBody2(_Uc, ref) {
-    var _Vc = _Uc, { className } = _Vc, restProps = __objRest(_Vc, ["className"]);
+  function CalendarGridBody2(__c, ref) {
+    var _$c = __c, { className } = _$c, restProps = __objRest(_$c, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridBody,
       __spreadProps(__spreadValues({}, restProps), {
@@ -37271,8 +37431,8 @@ const CalendarGridBody = react.forwardRef(
 );
 const CALENDAR_CELL_CLASS_NAME = "Layer__UI__CalendarCell";
 const CalendarCell = react.forwardRef(
-  function CalendarCell2(_Wc, ref) {
-    var _Xc = _Wc, { className } = _Xc, restProps = __objRest(_Xc, ["className"]);
+  function CalendarCell2(_ad, ref) {
+    var _bd = _ad, { className } = _bd, restProps = __objRest(_bd, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarCell,
       __spreadProps(__spreadValues({}, restProps), {
@@ -37284,8 +37444,8 @@ const CalendarCell = react.forwardRef(
 );
 const CALENDAR_GRID_HEADER_CLASS_NAME = "Layer__UI__CalendarGridHeader";
 const CalendarGridHeader = react.forwardRef(
-  function CalendarGridHeader2(_Yc, ref) {
-    var _Zc = _Yc, { className } = _Zc, restProps = __objRest(_Zc, ["className"]);
+  function CalendarGridHeader2(_cd, ref) {
+    var _dd = _cd, { className } = _dd, restProps = __objRest(_dd, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridHeader,
       __spreadProps(__spreadValues({}, restProps), {
@@ -37297,8 +37457,8 @@ const CalendarGridHeader = react.forwardRef(
 );
 const CALENDAR_HEADER_CELL_CLASS_NAME = "Layer__UI__CalendarHeaderCell";
 const CalendarHeaderCell = react.forwardRef(
-  function CalendarHeaderCell2(__c, ref) {
-    var _$c = __c, { className } = _$c, restProps = __objRest(_$c, ["className"]);
+  function CalendarHeaderCell2(_ed, ref) {
+    var _fd = _ed, { className } = _fd, restProps = __objRest(_fd, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarHeaderCell,
       __spreadProps(__spreadValues({}, restProps), {
@@ -37347,9 +37507,9 @@ const DatePicker = ({
   onChange
 }) => {
   const additionalAriaProps = !showLabel && { "aria-label": label };
-  const errorTriangle = react.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { offset: 12, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { size: 18 }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { className: "Layer__tooltip", width: "md", children: errorText })
+  const errorTriangle = react.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { offset: 12, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { size: 18 }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", width: "md", children: errorText })
   ] }), [errorText]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     DatePicker$1,
@@ -37778,11 +37938,11 @@ const ProfitAndLossView = (props) => {
   const containerRef = react.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: COMPONENT_NAME$1, ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLoss, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossPanel, __spreadValues({ containerRef }, props)) }) });
 };
-const ProfitAndLossPanel = (_ad) => {
-  var _bd = _ad, {
+const ProfitAndLossPanel = (_gd) => {
+  var _hd = _gd, {
     containerRef,
     stringOverrides
-  } = _bd, props = __objRest(_bd, [
+  } = _hd, props = __objRest(_hd, [
     "containerRef",
     "stringOverrides"
   ]);
@@ -38394,8 +38554,8 @@ function useInvoicesGlobalCacheActions() {
   );
   return { patchInvoiceByKey, patchInvoiceWithTransformation, forceReloadInvoices };
 }
-const ChevronRightFill = (_cd) => {
-  var _dd = _cd, { size = 18 } = _dd, props = __objRest(_dd, ["size"]);
+const ChevronRightFill = (_id) => {
+  var _jd = _id, { size = 18 } = _jd, props = __objRest(_jd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -41147,8 +41307,8 @@ const getClassnameForSubComponent = (className, suffix) => {
 };
 const METER_CLASS_NAME = "Layer__Meter";
 const Meter = react.forwardRef(
-  function Meter2(_ed, ref) {
-    var _fd = _ed, { className, label, meterOnly } = _fd, restProps = __objRest(_fd, ["className", "label", "meterOnly"]);
+  function Meter2(_kd, ref) {
+    var _ld = _kd, { className, label, meterOnly } = _ld, restProps = __objRest(_ld, ["className", "label", "meterOnly"]);
     return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Meter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: classNames(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, children: [
       !meterOnly && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { slot: "label", children: label }),
@@ -41692,14 +41852,14 @@ const BusinessProvider = ({
     }
   );
 };
-const LayerProvider = (_gd) => {
-  var _hd = _gd, {
+const LayerProvider = (_md) => {
+  var _nd = _md, {
     appId,
     appSecret,
     businessAccessToken,
     environment,
     usePlaidSandbox
-  } = _hd, restProps = __objRest(_hd, [
+  } = _nd, restProps = __objRest(_nd, [
     "appId",
     "appSecret",
     "businessAccessToken",