@layerfi/components 0.1.114-alpha.3 → 0.1.114-alpha.5

package/dist/cjs/index.cjs

@@ -71,12 +71,12 @@ const lucideReact = require("lucide-react");
 const pluralize = require("pluralize");
 const useResizeObserver = require("@react-hook/resize-observer");
 const Select$1 = require("react-select");
-const react$2 = require("motion/react");
 const reactDropzone = require("react-dropzone");
 const reactForm = require("@tanstack/react-form");
 const BaseCreatableSelect = require("react-select/creatable");
 const reactTable = require("@tanstack/react-table");
 const reactVirtual = require("@tanstack/react-virtual");
+const react$2 = require("motion/react");
 const CurrencyInput = require("react-currency-input-field");
 const uuid = require("uuid");
 const recharts = require("recharts");
@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.114-alpha.3";
+const version = "0.1.114-alpha.5";
 const pkg = {
   version
 };
@@ -6344,7 +6344,7 @@ const useAugmentedBankTransactions = (params) => {
       }
     }).finally(() => {
       var _a2;
-      (_a2 = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a2.call(eventCallbacks, bankTransactionId);
+      (_a2 = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a2.call(eventCallbacks);
     });
   });
   const { trigger: matchBankTransaction2 } = useMatchBankTransaction({
@@ -6403,7 +6403,7 @@ const useAugmentedBankTransactions = (params) => {
       }
     }).finally(() => {
       var _a2;
-      (_a2 = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a2.call(eventCallbacks, bankTransactionId);
+      (_a2 = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a2.call(eventCallbacks);
     });
   });
   const shouldHideAfterCategorize = () => {
@@ -8236,7 +8236,7 @@ function BulkSelectionStoreProvider({
   const [store] = react.useState(() => buildStore());
   return /* @__PURE__ */ jsxRuntime.jsx(BulkSelectionStoreContext.Provider, { value: store, children });
 }
-const CLASS_NAME$d = "Layer__Stack";
+const CLASS_NAME$c = "Layer__Stack";
 const Stack = react.forwardRef(
   function Stack2(_H, ref) {
     var _I = _H, {
@@ -8289,7 +8289,7 @@ const Stack = react.forwardRef(
       __spreadProps(__spreadValues(__spreadValues({
         ref
       }, restProps), dataProperties), {
-        className: classNames(CLASS_NAME$d, className),
+        className: classNames(CLASS_NAME$c, className),
         children
       })
     );
@@ -8413,9 +8413,9 @@ function useDebounce(fn) {
   }, []);
   return debouncedCallback;
 }
-const CLASS_NAME$c = "Layer__LoadingSpinner";
+const CLASS_NAME$b = "Layer__LoadingSpinner";
 function LoadingSpinner({ size }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: CLASS_NAME$c, size });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: CLASS_NAME$b, size });
 }
 function withRenderProp(renderProp, callback) {
   if (typeof renderProp === "function") {
@@ -8529,7 +8529,7 @@ function buildKey$T({
 }
 const useBulkCategorize = () => {
   const { data } = useAuth();
-  const { businessId } = useLayerContext();
+  const { businessId, eventCallbacks } = useLayerContext();
   const { forceReloadBankTransactions } = useBankTransactionsGlobalCacheActions();
   const mutationResponse = useSWRMutation(
     () => buildKey$T(__spreadProps(__spreadValues({}, data), {
@@ -8551,11 +8551,13 @@ const useBulkCategorize = () => {
   const originalTrigger = mutationResponse.trigger;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
+      var _a;
       const triggerResult = yield originalTrigger(...triggerParameters);
       void forceReloadBankTransactions();
+      (_a = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a.call(eventCallbacks);
       return triggerResult;
     }),
-    [originalTrigger, forceReloadBankTransactions]
+    [originalTrigger, forceReloadBankTransactions, eventCallbacks]
   );
   return new Proxy(mutationResponse, {
     get(target, prop) {
@@ -9181,18 +9183,16 @@ const centsToDollars = (cents = NaN) => isNaN(cents) ? "-.--" : formatter.format
 function centsToDollarsWithoutCommas(cents = 0) {
   return centsToDollars(cents).replaceAll(",", "");
 }
-const CLASS_NAME$b = "Layer__MoneyText";
+const CLASS_NAME$a = "Layer__MoneySpan";
 const MoneySpan = react.forwardRef(
   (_V, ref) => {
-    var _W = _V, { amount, bold, size, displayPlusSign, className } = _W, restProps = __objRest(_W, ["amount", "bold", "size", "displayPlusSign", "className"]);
+    var _W = _V, { amount, displayPlusSign, className } = _W, restProps = __objRest(_W, ["amount", "displayPlusSign", "className"]);
     const dataProperties = toDataProperties({
-      bold,
       "positive": amount >= 0,
       "negative": amount < 0,
-      size,
       "display-plus-sign": displayPlusSign
     });
-    return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(CLASS_NAME$b, className), ref, children: centsToDollars(Math.abs(amount)) }));
+    return /* @__PURE__ */ jsxRuntime.jsx(Span, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(CLASS_NAME$a, className), ref, children: centsToDollars(Math.abs(amount)) }));
   }
 );
 MoneySpan.displayName = "MoneySpan";
@@ -9613,7 +9613,7 @@ const BankTransactionCategoryComboBoxOption = ({ option, fallback }) => {
         /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", variant: "placeholder", children: option.label }),
         inAppLink
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { size: "sm", bold: true, amount: option.original.details.amount })
+      /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { size: "sm", weight: "bold", amount: option.original.details.amount })
     ] });
   }
   return fallback;
@@ -9689,59 +9689,11 @@ const BankTransactionCategoryComboBox = ({
     }
   );
 };
-const variants = {
-  fade: {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-    transition: { duration: 0.3, ease: [0, 0, 0.58, 1] }
-  },
-  slideUp: {
-    initial: { y: "100%" },
-    animate: { y: 0 },
-    exit: { y: "100%" },
-    transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] }
-  },
-  expand: {
-    initial: { height: 0, opacity: 0 },
-    animate: { height: "auto", opacity: 1 },
-    exit: { height: 0, opacity: 0 },
-    transition: {
-      height: { duration: 0.25, ease: [0.4, 0, 0.2, 1] },
-      opacity: { duration: 0.15, ease: [0, 0, 0.58, 1] }
-    }
-  }
-};
-const AnimatedPresenceDiv = (_$) => {
-  var _aa = _$, {
-    children,
-    variant,
-    isOpen,
-    slotProps = { AnimatePresence: { initial: false } }
-  } = _aa, props = __objRest(_aa, [
-    "children",
-    "variant",
-    "isOpen",
-    "slotProps"
-  ]);
-  const config = variants[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(react$2.AnimatePresence, __spreadProps(__spreadValues({}, slotProps.AnimatePresence), { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-    react$2.motion.div,
-    __spreadProps(__spreadValues({
-      initial: config.initial,
-      animate: config.animate,
-      exit: config.exit,
-      transition: config.transition
-    }, props), {
-      children
-    })
-  ) }));
-};
 const BASE_MODAL_OVERLAY_CLASS_NAME = "Layer__ModalOverlay";
 const MODAL_OVERLAY_CLASS_NAME = `Layer__Portal ${BASE_MODAL_OVERLAY_CLASS_NAME}`;
 const ModalOverlay = react.forwardRef(
-  (_ba, ref) => {
-    var _ca = _ba, { variant } = _ca, restProps = __objRest(_ca, ["variant"]);
+  (_$, ref) => {
+    var _aa = _$, { variant } = _aa, restProps = __objRest(_aa, ["variant"]);
     const dataProperties = toDataProperties({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.ModalOverlay,
@@ -9768,8 +9720,8 @@ const InternalModal = react.forwardRef(({ children, flexBlock, flexInline, size,
 InternalModal.displayName = "Modal";
 const DIALOG_CLASS_NAME = "Layer__Dialog";
 const Dialog = react.forwardRef(
-  (_da, ref) => {
-    var _ea = _da, { variant = "center" } = _ea, restProps = __objRest(_ea, ["variant"]);
+  (_ba, ref) => {
+    var _ca = _ba, { variant = "center" } = _ca, restProps = __objRest(_ca, ["variant"]);
     const dataProperties = toDataProperties({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Dialog,
@@ -9807,25 +9759,11 @@ function Drawer({
   isDismissable = false,
   role
 }) {
-  const isMobileDrawer = variant === "mobile-drawer";
-  const shouldUseFadeOverlay = variant === "drawer" || isMobileDrawer;
-  const modalContent = /* @__PURE__ */ jsxRuntime.jsx(InternalModal, { flexBlock, flexInline, size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, variant, children }) });
-  const wrappedModalContent = isMobileDrawer ? /* @__PURE__ */ jsxRuntime.jsx(
-    AnimatedPresenceDiv,
-    {
-      variant: "slideUp",
-      isOpen,
-      className: "Layer__ModalContentSlideUpMotionContent",
-      slotProps: { AnimatePresence: { initial: true } },
-      children: modalContent
-    }
-  ) : modalContent;
-  const overlayContent = shouldUseFadeOverlay ? /* @__PURE__ */ jsxRuntime.jsx(AnimatedPresenceDiv, { variant: "fade", isOpen, className: "Layer__ModalContentFadeMotionContent", children: wrappedModalContent }) : wrappedModalContent;
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen, onOpenChange, variant, isDismissable, children: overlayContent });
+  return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen, onOpenChange, variant, isDismissable, children: /* @__PURE__ */ jsxRuntime.jsx(InternalModal, { flexBlock, flexInline, size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, variant, children }) }) });
 }
 const HEADING_CLASS_NAME = "Layer__UI__Heading";
-const Heading$1 = react.forwardRef((_fa, ref) => {
-  var _ga = _fa, { align, pie, pbe, size, variant, weight, ellipsis, className } = _ga, restProps = __objRest(_ga, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
+const Heading$1 = react.forwardRef((_da, ref) => {
+  var _ea = _da, { align, pie, pbe, size, variant, weight, ellipsis, className } = _ea, restProps = __objRest(_ea, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
   const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight, ellipsis });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Heading,
@@ -9896,8 +9834,8 @@ const MODAL_ACTIONS_CLASS_NAME = "Layer__ModalActions";
 function ModalActions({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: MODAL_ACTIONS_CLASS_NAME, children });
 }
-const AlertCircle = (_ha) => {
-  var _ia = _ha, { size = 18 } = _ia, props = __objRest(_ia, ["size"]);
+const AlertCircle = (_fa) => {
+  var _ga = _fa, { size = 18 } = _ga, props = __objRest(_ga, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -9939,8 +9877,8 @@ const AlertCircle = (_ha) => {
     })
   );
 };
-const Save = (_ja) => {
-  var _ka = _ja, { size = 18 } = _ka, props = __objRest(_ka, ["size"]);
+const Save = (_ha) => {
+  var _ia = _ha, { size = 18 } = _ia, props = __objRest(_ia, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -9982,14 +9920,14 @@ const Save = (_ja) => {
     })
   );
 };
-const RetryButton = (_la) => {
-  var _ma = _la, {
+const RetryButton = (_ja) => {
+  var _ka = _ja, {
     className,
     processing,
     disabled,
     error,
     children
-  } = _ma, props = __objRest(_ma, [
+  } = _ka, props = __objRest(_ka, [
     "className",
     "processing",
     "disabled",
@@ -10046,8 +9984,8 @@ const buildRightIcon = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Save, { size: 16 });
 };
-const SubmitButton = (_na) => {
-  var _oa = _na, {
+const SubmitButton = (_la) => {
+  var _ma = _la, {
     active,
     className,
     processing,
@@ -10059,7 +9997,7 @@ const SubmitButton = (_na) => {
     variant = ButtonVariant.primary,
     withRetry,
     iconAsPrimary = true
-  } = _oa, props = __objRest(_oa, [
+  } = _ma, props = __objRest(_ma, [
     "active",
     "className",
     "processing",
@@ -10164,12 +10102,323 @@ function BaseConfirmationModal({
     ] });
   } });
 }
+const ChevronDown = (_na) => {
+  var _oa = _na, { size = 18 } = _oa, props = __objRest(_oa, ["size"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    __spreadProps(__spreadValues({
+      viewBox: "0 0 18 18",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      width: size,
+      height: size,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M4.5 6.75L9 11.25L13.5 6.75",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    })
+  );
+};
+const ActionableList = ({
+  options: options2,
+  onClick,
+  selectedId,
+  showDescriptions = false,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classNames("Layer__actionable-list", className), children: options2.map((x, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      role: "button",
+      onClick: () => onClick(x),
+      className: classNames(
+        x.secondary && "Layer__actionable-list-item--secondary",
+        x.asLink && "Layer__actionable-list-item--as-link",
+        selectedId === x.id && "Layer__actionable-list__item--selected"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__actionable-list__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, children: x.label }),
+          /* TODO: Replace 'See all categories' with something more generic */
+          showDescriptions && x.description && x.label !== "See all categories" && /* @__PURE__ */ jsxRuntime.jsx(
+            Text,
+            {
+              className: "Layer__actionable-list__content-description",
+              size: TextSize.sm,
+              children: x.description
+            }
+          )
+        ] }),
+        !x.asLink && selectedId && selectedId === x.id ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__actionable-list__select Layer__actionable-list__select--selected", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Check,
+          {
+            size: 14,
+            className: "Layer__actionable-list__selected-icon"
+          }
+        ) }) : null,
+        !x.asLink && (!selectedId || selectedId !== x.id) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__actionable-list__select" }) : null,
+        x.asLink && /* @__PURE__ */ jsxRuntime.jsx(
+          ChevronRight,
+          {
+            size: 16,
+            className: "Layer__actionable-list__link-icon"
+          }
+        )
+      ]
+    },
+    `actionable-list-item-${idx}`
+  )) });
+};
+function getLeafCategories(category) {
+  if (!category.subCategories || category.subCategories.length === 0) {
+    return [category];
+  }
+  return category.subCategories.flatMap((subCategory) => getLeafCategories(subCategory));
+}
+const flattenCategories = (categories) => {
+  return categories.flatMap((category) => {
+    const subCategories = category.subCategories;
+    if (!subCategories || subCategories.length === 0) {
+      return [new CategoryAsOption(category)];
+    }
+    const leafCategories = getLeafCategories(category);
+    if (subCategories.every((subCategory) => !subCategory.subCategories || subCategory.subCategories.length === 0)) {
+      return [{
+        label: category.displayName,
+        id: "id" in category ? category.id : category.stableName,
+        categories: leafCategories.map((cat) => new CategoryAsOption(cat))
+      }];
+    }
+    return leafCategories.map((cat) => new CategoryAsOption(cat));
+  });
+};
+const INPUT_GROUP_CLASS_NAME = "Layer__InputGroup";
+const InputGroup$1 = react.forwardRef(
+  function InputGroup2(_pa, ref) {
+    var _qa = _pa, { actionCount, className, slots, children } = _qa, restProps = __objRest(_qa, ["actionCount", "className", "slots", "children"]);
+    const combinedClassName = classNames(INPUT_GROUP_CLASS_NAME, className);
+    const dataProperties = toDataProperties({
+      "action-count": actionCount
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Group,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: combinedClassName,
+        ref,
+        children
+      })
+    );
+  }
+);
+const X = (_ra) => {
+  var _sa = _ra, { size = 18 } = _sa, props = __objRest(_sa, ["size"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 18 18",
+      fill: "none"
+    }, props), {
+      width: size,
+      height: size,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M13.5 4.5L4.5 13.5",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M4.5 4.5L13.5 13.5",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
+const CLASS_NAME$9 = "Layer__MinimalSearchField";
+function MinimalSearchField(_ta) {
+  var _ua = _ta, {
+    placeholder,
+    isDisabled
+  } = _ua, restProps = __objRest(_ua, [
+    "placeholder",
+    "isDisabled"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.SearchField, __spreadProps(__spreadValues({}, restProps), { isDisabled, className: CLASS_NAME$9, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Input,
+      {
+        slot: "input",
+        placeholder
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { slot: "clear-button", inset: true, icon: true, variant: "ghost", "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntime.jsx(X, {}) })
+  ] }));
+}
+const CLASS_NAME$8 = "Layer__SearchField";
+function SearchField(_va) {
+  var _wa = _va, { slot = "search", className, label, isDisabled } = _wa, restProps = __objRest(_wa, ["slot", "className", "label", "isDisabled"]);
+  const combinedClassName = classNames(CLASS_NAME$8, className);
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { 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 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MinimalSearchField,
+      __spreadProps(__spreadValues({}, restProps), {
+        placeholder: label,
+        "aria-label": label,
+        isDisabled
+      })
+    )
+  ] });
+}
+const isGroup = (item) => {
+  return "categories" in item;
+};
+const BankTransactionsMobileListBusinessCategories = ({
+  select,
+  selectedId,
+  showTooltips
+}) => {
+  const { data: categories } = useCategories();
+  const [query, setQuery] = react.useState("");
+  const categoryOptions = react.useMemo(
+    () => flattenCategories(
+      (categories != null ? categories : []).filter((category) => category.type != "ExclusionNested")
+    ),
+    [categories]
+  );
+  const [optionsToShow, setOptionsToShow] = react.useState(categoryOptions);
+  const [selectedGroup, setSelectedGroup] = react.useState();
+  const filteredOptions = react.useMemo(() => {
+    let options2 = optionsToShow;
+    if (query) {
+      const lower = query.toLowerCase();
+      options2 = options2.flatMap((opt) => {
+        if (isGroup(opt)) {
+          return opt.categories.filter(
+            (cat) => cat.label.toLowerCase().includes(lower)
+          );
+        }
+        return opt.label.toLowerCase().includes(lower) ? [opt] : [];
+      });
+    }
+    return options2.sort((a, b) => a.label.localeCompare(b.label)).map((opt) => {
+      var _a;
+      return isGroup(opt) ? { label: opt.label, id: opt.id, value: opt, asLink: true } : { label: opt.label, id: opt.value, description: (_a = opt.original.description) != null ? _a : void 0, value: opt };
+    });
+  }, [optionsToShow, query]);
+  const onCategorySelect = (item) => {
+    if (isGroup(item.value)) {
+      setOptionsToShow(item.value.categories);
+      setSelectedGroup(item.value.label);
+      setQuery("");
+      return;
+    }
+    select(item.value);
+  };
+  const clearSelectedGroup = react.useCallback(() => {
+    setOptionsToShow(categoryOptions);
+    setSelectedGroup(void 0);
+    setQuery("");
+  }, [categoryOptions]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: "Layer__bank-transaction-mobile-list-item__categories_list-container", pbs: "lg", gap: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pis: "sm", pie: "sm", gap: "md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HStack, { pis: "xs", children: selectedGroup ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "text", onClick: clearSelectedGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 18 }),
+        /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "sm", weight: "bold", align: "center", children: selectedGroup })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "sm", weight: "bold", children: "Select category" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SearchField, { value: query, onChange: setQuery, label: "Search categories..." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ActionableList,
+      {
+        options: filteredOptions,
+        onClick: onCategorySelect,
+        selectedId,
+        showDescriptions: showTooltips,
+        className: "Layer__bank-transaction-mobile-list-item__categories_list"
+      }
+    )
+  ] });
+};
+const CategorySelectDrawer = ({
+  onSelect,
+  selectedId,
+  showTooltips,
+  isOpen,
+  onOpenChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen, onOpenChange, variant: "mobile-drawer", isDismissable: true, children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+    BankTransactionsMobileListBusinessCategories,
+    {
+      select: (option) => {
+        onSelect(option);
+        close2();
+      },
+      selectedId,
+      showTooltips
+    }
+  ) });
+};
+const CategorySelectDrawerWithTrigger = ({ value, onChange, showTooltips }) => {
+  var _a;
+  const [isDrawerOpen, setIsDrawerOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { fluid: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        flex: true,
+        fullWidth: true,
+        "aria-label": "Select category",
+        onClick: () => {
+          setIsDrawerOpen(true);
+        },
+        variant: "outlined",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { children: (_a = value == null ? void 0 : value.label) != null ? _a : "Select..." }),
+          /* @__PURE__ */ jsxRuntime.jsx(Spacer, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 16 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CategorySelectDrawer,
+      {
+        onSelect: onChange,
+        selectedId: value == null ? void 0 : value.value,
+        showTooltips,
+        isOpen: isDrawerOpen,
+        onOpenChange: setIsDrawerOpen
+      }
+    )
+  ] });
+};
 var CategorizationMode = /* @__PURE__ */ ((CategorizationMode2) => {
   CategorizationMode2["Categorize"] = "Categorize";
   CategorizationMode2["Recategorize"] = "Recategorize";
   return CategorizationMode2;
 })(CategorizationMode || {});
-const BankTransactionsCategorizeAllModal = ({ isOpen, onOpenChange, mode }) => {
+const BankTransactionsCategorizeAllModal = ({
+  isOpen,
+  onOpenChange,
+  mode,
+  useCategorySelectDrawer = false
+}) => {
   const { count } = useCountSelectedIds();
   const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
@@ -10211,7 +10460,15 @@ const BankTransactionsCategorizeAllModal = ({ isOpen, onOpenChange, mode }) => {
       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(
+          useCategorySelectDrawer ? /* @__PURE__ */ jsxRuntime.jsx(
+            CategorySelectDrawerWithTrigger,
+            {
+              "aria-labelledby": categorySelectId,
+              value: selectedCategory,
+              onChange: setSelectedCategory,
+              showTooltips: false
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
             BankTransactionCategoryComboBox,
             {
               inputId: categorySelectId,
@@ -10282,7 +10539,7 @@ function buildKey$R({
 }
 const useBulkMatchOrCategorize = () => {
   const { data } = useAuth();
-  const { businessId } = useLayerContext();
+  const { businessId, eventCallbacks } = useLayerContext();
   const { selectedIds } = useSelectedIds();
   const { transactionCategories } = useGetAllBankTransactionsCategories();
   const { forceReloadBankTransactions } = useBankTransactionsGlobalCacheActions();
@@ -10310,14 +10567,13 @@ const useBulkMatchOrCategorize = () => {
   const { trigger: originalTrigger } = mutationResponse;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
+      var _a;
       const triggerResult = yield originalTrigger(...triggerParameters);
       void forceReloadBankTransactions();
+      (_a = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a.call(eventCallbacks);
       return triggerResult;
     }),
-    [
-      originalTrigger,
-      forceReloadBankTransactions
-    ]
+    [originalTrigger, forceReloadBankTransactions, eventCallbacks]
   );
   const proxiedResponse = new Proxy(mutationResponse, {
     get(target, prop) {
@@ -10378,7 +10634,7 @@ function buildKey$Q({
 }
 const useBulkUncategorize = () => {
   const { data } = useAuth();
-  const { businessId } = useLayerContext();
+  const { businessId, eventCallbacks } = useLayerContext();
   const { forceReloadBankTransactions } = useBankTransactionsGlobalCacheActions();
   const mutationResponse = useSWRMutation(
     () => buildKey$Q(__spreadProps(__spreadValues({}, data), {
@@ -10400,11 +10656,13 @@ const useBulkUncategorize = () => {
   const originalTrigger = mutationResponse.trigger;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
+      var _a;
       const triggerResult = yield originalTrigger(...triggerParameters);
       void forceReloadBankTransactions();
+      (_a = eventCallbacks == null ? void 0 : eventCallbacks.onTransactionCategorized) == null ? void 0 : _a.call(eventCallbacks);
       return triggerResult;
     }),
-    [originalTrigger, forceReloadBankTransactions]
+    [originalTrigger, forceReloadBankTransactions, eventCallbacks]
   );
   return new Proxy(mutationResponse, {
     get(target, prop) {
@@ -10439,7 +10697,7 @@ const BankTransactionsUncategorizeAllModal = ({ isOpen, onOpenChange }) => {
     }
   );
 };
-const BankTransactionsBulkActions = () => {
+const BankTransactionsBulkActions = ({ useCategorySelectDrawer = false }) => {
   const { display } = useBankTransactionsContext();
   const [categorizeModalOpen, setCategorizeModalOpen] = react.useState(false);
   const [confirmModalOpen, setConfirmModalOpen] = react.useState(false);
@@ -10459,7 +10717,8 @@ const BankTransactionsBulkActions = () => {
       {
         isOpen: categorizeModalOpen,
         onOpenChange: setCategorizeModalOpen,
-        mode: CategorizationMode.Categorize
+        mode: CategorizationMode.Categorize,
+        useCategorySelectDrawer
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "solid", onClick: () => setConfirmModalOpen(true), children: "Confirm" }),
@@ -10484,7 +10743,8 @@ const BankTransactionsBulkActions = () => {
       {
         isOpen: recategorizeModalOpen,
         onOpenChange: setRecategorizeModalOpen,
-        mode: CategorizationMode.Recategorize
+        mode: CategorizationMode.Recategorize,
+        useCategorySelectDrawer
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -10504,8 +10764,8 @@ const BankTransactionsBulkActions = () => {
     )
   ] }) }) });
 };
-const UploadCloud = (_pa) => {
-  var _qa = _pa, { size = 18 } = _qa, props = __objRest(_qa, ["size"]);
+const UploadCloud = (_xa) => {
+  var _ya = _xa, { size = 18 } = _ya, props = __objRest(_ya, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -10887,8 +11147,8 @@ const CopyTemplateHeadersButtonGroup = ({ headers, className }) => {
     key
   )) });
 };
-const CloseIcon = (_ra) => {
-  var _sa = _ra, { size = 12 } = _sa, props = __objRest(_sa, ["size"]);
+const CloseIcon = (_za) => {
+  var _Aa = _za, { size = 12 } = _Aa, props = __objRest(_Aa, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -11159,15 +11419,15 @@ function useCreateCustomAccount() {
 }
 const FORM_CLASS_NAME = "Layer__UI__Form";
 const Form = react.forwardRef(
-  function Form2(_ta, ref) {
-    var _ua = _ta, { children, className } = _ua, restProps = __objRest(_ua, ["children", "className"]);
+  function Form2(_Ba, ref) {
+    var _Ca = _Ba, { children, className } = _Ca, restProps = __objRest(_Ca, ["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(_va, ref) {
-    var _wa = _va, { children, inline, textarea, className } = _wa, restProps = __objRest(_wa, ["children", "inline", "textarea", "className"]);
+  function TextField2(_Da, ref) {
+    var _Ea = _Da, { children, inline, textarea, className } = _Ea, restProps = __objRest(_Ea, ["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) }));
   }
@@ -11297,8 +11557,8 @@ function formatBigDecimalToString(value, options2 = {
 }
 const INPUT_CLASS_NAME = "Layer__UI__Input";
 const Input$1 = react.forwardRef(
-  function Input2(_xa, ref) {
-    var _ya = _xa, { inset, placement } = _ya, restProps = __objRest(_ya, ["inset", "placement"]);
+  function Input2(_Fa, ref) {
+    var _Ga = _Fa, { inset, placement } = _Ga, restProps = __objRest(_Ga, ["inset", "placement"]);
     const dataProperties = toDataProperties({ inset, placement });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Input,
@@ -11309,24 +11569,6 @@ const Input$1 = react.forwardRef(
     );
   }
 );
-const INPUT_GROUP_CLASS_NAME = "Layer__InputGroup";
-const InputGroup$1 = react.forwardRef(
-  function InputGroup2(_za, ref) {
-    var _Aa = _za, { actionCount, className, slots, children } = _Aa, restProps = __objRest(_Aa, ["actionCount", "className", "slots", "children"]);
-    const combinedClassName = classNames(INPUT_GROUP_CLASS_NAME, className);
-    const dataProperties = toDataProperties({
-      "action-count": actionCount
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.Group,
-      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
-        className: combinedClassName,
-        ref,
-        children
-      })
-    );
-  }
-);
 const DEFAULT_MAX_VALUE = effect.BigDecimal.fromBigInt(BigInt(1e7));
 const DEFAULT_MIN_DECIMAL_PLACES = 0;
 const DEFAULT_MAX_DECIMAL_PLACES = 3;
@@ -11339,21 +11581,23 @@ const withForceUpdate = (value) => {
     writable: false
   });
 };
-function FormBigDecimalField(_Ba) {
-  var _Ca = _Ba, {
+function FormBigDecimalField(_Ha) {
+  var _Ia = _Ha, {
     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
-  } = _Ca, restProps = __objRest(_Ca, [
+    slots,
+    placeholder
+  } = _Ia, restProps = __objRest(_Ia, [
     "mode",
     "allowNegative",
     "maxValue",
     "minDecimalPlaces",
     "maxDecimalPlaces",
-    "slots"
+    "slots",
+    "placeholder"
   ]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
@@ -11413,20 +11657,21 @@ function FormBigDecimalField(_Ba) {
         onChange: onInputChange,
         onBlur: onInputBlur,
         onBeforeInput,
-        onPaste
+        onPaste,
+        placeholder
       }
     ),
     (slots == null ? void 0 : slots.badge) && /* @__PURE__ */ jsxRuntime.jsx(HStack, { children: slots.badge })
   ] }) }));
 }
-const CLASS_NAME$a = "Layer__Checkbox";
+const CLASS_NAME$7 = "Layer__Checkbox";
 const CHECK_SIZE = {
   sm: 12,
   md: 14,
   lg: 16
 };
-function Checkbox(_Da) {
-  var _Ea = _Da, { children, className, variant = "default", size = "sm", isIndeterminate } = _Ea, props = __objRest(_Ea, ["children", "className", "variant", "size", "isIndeterminate"]);
+function Checkbox(_Ja) {
+  var _Ka = _Ja, { children, className, variant = "default", size = "sm", isIndeterminate } = _Ka, props = __objRest(_Ka, ["children", "className", "variant", "size", "isIndeterminate"]);
   const dataProperties = react.useMemo(() => toDataProperties({
     size,
     variant,
@@ -11436,7 +11681,7 @@ function Checkbox(_Da) {
     reactAriaComponents.Checkbox,
     __spreadProps(__spreadValues(__spreadValues({}, dataProperties), props), {
       isIndeterminate,
-      className: classNames(CLASS_NAME$a, className),
+      className: classNames(CLASS_NAME$7, className),
       children: withRenderProp(children, (node) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "checkbox", children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: CHECK_SIZE[size] }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: CHECK_SIZE[size] }) }),
         node
@@ -11444,8 +11689,8 @@ function Checkbox(_Da) {
     })
   );
 }
-function CheckboxWithTooltip(_Fa) {
-  var _Ga = _Fa, { tooltip } = _Ga, props = __objRest(_Ga, ["tooltip"]);
+function CheckboxWithTooltip(_La) {
+  var _Ma = _La, { tooltip } = _Ma, props = __objRest(_Ma, ["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 })
@@ -11491,8 +11736,8 @@ function FormCheckboxField({
 }
 const DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
 const DateField = react.forwardRef(
-  function DateField2(_Ha, ref) {
-    var _Ia = _Ha, { inline, className, isReadOnly } = _Ia, restProps = __objRest(_Ia, ["inline", "className", "isReadOnly"]);
+  function DateField2(_Na, ref) {
+    var _Oa = _Na, { inline, className, isReadOnly } = _Oa, restProps = __objRest(_Oa, ["inline", "className", "isReadOnly"]);
     const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateField,
@@ -11506,8 +11751,8 @@ const DateField = react.forwardRef(
 );
 const DATE_INPUT_CLASS_NAME = "Layer__UI__DateInput";
 const DateInput = react.forwardRef(
-  function DateInput2(_Ja, ref) {
-    var _Ka = _Ja, { inset, pointerEvents } = _Ka, restProps = __objRest(_Ka, ["inset", "pointerEvents"]);
+  function DateInput2(_Pa, ref) {
+    var _Qa = _Pa, { inset, pointerEvents } = _Qa, restProps = __objRest(_Qa, ["inset", "pointerEvents"]);
     const dataProperties = toDataProperties({ inset, "pointer-events": pointerEvents });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateInput,
@@ -11520,8 +11765,8 @@ const DateInput = react.forwardRef(
 );
 const DATE_SEGMENT_CLASS_NAME = "Layer__UI__DateSegment";
 const DateSegment = react.forwardRef(
-  function DateSegment2(_La, ref) {
-    var _Ma = _La, { isReadOnly } = _Ma, restProps = __objRest(_Ma, ["isReadOnly"]);
+  function DateSegment2(_Ra, ref) {
+    var _Sa = _Ra, { isReadOnly } = _Sa, restProps = __objRest(_Sa, ["isReadOnly"]);
     const dataProperties = toDataProperties({ interactive: !isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.DateSegment,
@@ -11602,8 +11847,8 @@ function FormDateField({
 }
 const NUMBER_FIELD_CLASS_NAME = "Layer__UI__NumberField";
 const NumberField = react.forwardRef(
-  function NumberField2(_Na, ref) {
-    var _Oa = _Na, { inline, className, isReadOnly } = _Oa, restProps = __objRest(_Oa, ["inline", "className", "isReadOnly"]);
+  function NumberField2(_Ta, ref) {
+    var _Ua = _Ta, { inline, className, isReadOnly } = _Ua, restProps = __objRest(_Ua, ["inline", "className", "isReadOnly"]);
     const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.NumberField,
@@ -11625,7 +11870,8 @@ function FormNumberField({
   showFieldError = true,
   isReadOnly = false,
   minValue,
-  maxValue
+  maxValue,
+  placeholder
 }) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
@@ -11663,7 +11909,7 @@ function FormNumberField({
             children: label
           })
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(InputGroup$1, { slot: "input", children: /* @__PURE__ */ jsxRuntime.jsx(Input$1, { inset: true }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(InputGroup$1, { slot: "input", children: /* @__PURE__ */ jsxRuntime.jsx(Input$1, { inset: true, placeholder }) }),
         shouldShowErrorMessage && /* @__PURE__ */ jsxRuntime.jsx(FieldError, { children: errorMessage })
       ]
     })
@@ -11671,8 +11917,8 @@ function FormNumberField({
 }
 const TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 const TextArea = react.forwardRef(
-  function TextArea2(_Pa, ref) {
-    var _Qa = _Pa, { resize = "none" } = _Qa, restProps = __objRest(_Qa, ["resize"]);
+  function TextArea2(_Va, ref) {
+    var _Wa = _Va, { resize = "none" } = _Wa, restProps = __objRest(_Wa, ["resize"]);
     const dataProperties = toDataProperties({ resize });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,
@@ -11683,7 +11929,8 @@ const TextArea = react.forwardRef(
     );
   }
 );
-function FormTextAreaField(props) {
+function FormTextAreaField(_Xa) {
+  var _Ya = _Xa, { placeholder } = _Ya, props = __objRest(_Ya, ["placeholder"]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
@@ -11698,11 +11945,13 @@ function FormTextAreaField(props) {
       name,
       value,
       onChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      placeholder
     }
   ) }));
 }
-function FormTextField(props) {
+function FormTextField(_Za) {
+  var __a = _Za, { placeholder } = __a, props = __objRest(__a, ["placeholder"]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
@@ -11717,6 +11966,7 @@ function FormTextField(props) {
       value,
       onChange,
       onBlur: handleBlur,
+      placeholder,
       inset: true
     }
   ) }) }));
@@ -11789,13 +12039,13 @@ const useCustomAccountForm = ({ onSuccess }) => {
   const isFormValid = reactForm.useStore(form.store, (state) => state.isValid);
   return { form, submitError, isFormValid };
 };
-const Input = (_Ra) => {
-  var _Sa = _Ra, {
+const Input = (_$a) => {
+  var _ab = _$a, {
     className,
     isInvalid,
     errorMessage,
     leftText
-  } = _Sa, props = __objRest(_Sa, [
+  } = _ab, props = __objRest(_ab, [
     "className",
     "isInvalid",
     "errorMessage",
@@ -11841,8 +12091,8 @@ const InputGroup = ({
     children
   ] });
 };
-const ChevronDownFill = (_Ta) => {
-  var _Ua = _Ta, { size = 18 } = _Ua, props = __objRest(_Ua, ["size"]);
+const ChevronDownFill = (_bb) => {
+  var _cb = _bb, { size = 18 } = _cb, props = __objRest(_cb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -11911,8 +12161,8 @@ const Select = ({
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
-const ErrorText = (_Va) => {
-  var _Wa = _Va, { className } = _Wa, props = __objRest(_Wa, ["className"]);
+const ErrorText = (_db) => {
+  var _eb = _db, { className } = _eb, props = __objRest(_eb, ["className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(Text, __spreadProps(__spreadValues({}, props), { status: "error", className }));
 };
 const accountTypeOptions = [
@@ -12745,44 +12995,10 @@ const BankTransactionsHeaderMenu = ({ actions, isDisabled }) => {
     isModalOpen && /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsUploadModal, { isOpen: true, onOpenChange: setIsModalOpen })
   ] });
 };
-const CLASS_NAME$9 = "Layer__BankTransactionsActions";
+const CLASS_NAME$6 = "Layer__BankTransactionsActions";
 function BankTransactionsActions({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME$9, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: CLASS_NAME$6, children });
 }
-const X = (_Xa) => {
-  var _Ya = _Xa, { size = 18 } = _Ya, props = __objRest(_Ya, ["size"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 18 18",
-      fill: "none"
-    }, props), {
-      width: size,
-      height: size,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M13.5 4.5L4.5 13.5",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M4.5 4.5L13.5 13.5",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    })
-  );
-};
 const BulkActionsModule = ({ slots }) => {
   const { count } = useCountSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
@@ -12804,8 +13020,8 @@ const BulkActionsModule = ({ slots }) => {
     /* @__PURE__ */ jsxRuntime.jsx(slots.BulkActions, {})
   ] });
 };
-const DownloadCloud = (_Za) => {
-  var __a = _Za, { size = 18 } = __a, props = __objRest(__a, ["size"]);
+const DownloadCloud = (_fb) => {
+  var _gb = _fb, { size = 18 } = _gb, props = __objRest(_gb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -12929,29 +13145,6 @@ function useSizeClass() {
     isDesktop: sizeClass === "desktop"
   };
 }
-const ChevronDown = (_$a) => {
-  var _ab = _$a, { size = 18 } = _ab, props = __objRest(_ab, ["size"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    __spreadProps(__spreadValues({
-      viewBox: "0 0 18 18",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props), {
-      width: size,
-      height: size,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M4.5 6.75L9 11.25L13.5 6.75",
-          stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    })
-  );
-};
 const MONTHS = [
   "January",
   "February",
@@ -13080,8 +13273,8 @@ function MonthCalendar({
 const POPOVER_CLASS_NAME = "Layer__Popover";
 const POPOVER_CLASS_NAMES = `Layer__Portal ${POPOVER_CLASS_NAME}`;
 const Popover = react.forwardRef(
-  function Popover2(_bb, ref) {
-    var _cb = _bb, { flexInline = false } = _cb, restProps = __objRest(_cb, ["flexInline"]);
+  function Popover2(_hb, ref) {
+    var _ib = _hb, { flexInline = false } = _ib, restProps = __objRest(_ib, ["flexInline"]);
     const dataProperties = toDataProperties({ "flex-inline": flexInline });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Popover,
@@ -13151,42 +13344,6 @@ const MonthPicker = ({
     ) }) })
   ] });
 };
-const CLASS_NAME$8 = "Layer__MinimalSearchField";
-function MinimalSearchField(_db) {
-  var _eb = _db, {
-    placeholder,
-    isDisabled
-  } = _eb, restProps = __objRest(_eb, [
-    "placeholder",
-    "isDisabled"
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.SearchField, __spreadProps(__spreadValues({}, restProps), { isDisabled, className: CLASS_NAME$8, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactAriaComponents.Input,
-      {
-        slot: "input",
-        placeholder
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { slot: "clear-button", inset: true, icon: true, variant: "ghost", "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntime.jsx(X, {}) })
-  ] }));
-}
-const CLASS_NAME$7 = "Layer__SearchField";
-function SearchField(_fb) {
-  var _gb = _fb, { slot = "search", className, label, isDisabled } = _gb, restProps = __objRest(_gb, ["slot", "className", "label", "isDisabled"]);
-  const combinedClassName = classNames(CLASS_NAME$7, className);
-  return /* @__PURE__ */ jsxRuntime.jsxs(InputGroup$1, { 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 }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      MinimalSearchField,
-      __spreadProps(__spreadValues({}, restProps), {
-        placeholder: label,
-        "aria-label": label,
-        isDisabled
-      })
-    )
-  ] });
-}
 const SmallLoader = ({ size = 28 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -13429,7 +13586,7 @@ function useInvisibleDownload() {
   }, []);
   return { invisibleDownloadRef, triggerInvisibleDownload };
 }
-const CLASS_NAME$6 = "Layer__InvisibleDownload";
+const CLASS_NAME$5 = "Layer__InvisibleDownload";
 const InvisibleDownload = react.forwardRef((_props, ref) => {
   const internalRef = react.useRef(null);
   react.useImperativeHandle(ref, () => ({
@@ -13448,7 +13605,7 @@ const InvisibleDownload = react.forwardRef((_props, ref) => {
   const handleContainClick = react.useCallback((event) => {
     event.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { download: true, className: CLASS_NAME$6, ref: internalRef, onClick: handleContainClick });
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { download: true, className: CLASS_NAME$5, ref: internalRef, onClick: handleContainClick });
 });
 InvisibleDownload.displayName = "InvisibleDownload";
 function TransactionsSearch({ slot, isDisabled }) {
@@ -13595,6 +13752,9 @@ const BankTransactionsHeader = ({
     }
     return actions;
   }, [withUploadMenu, showCategorizationRules]);
+  const BulkActionsModuleSlot = react.useCallback(() => {
+    return /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsBulkActions, { useCategorySelectDrawer: listView && mobileComponent === "mobileList" });
+  }, [listView, mobileComponent]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Header$1,
     {
@@ -13610,7 +13770,7 @@ const BankTransactionsHeader = ({
           showBulkActions ? /* @__PURE__ */ jsxRuntime.jsx(
             BulkActionsModule,
             {
-              slots: { BulkActions: BankTransactionsBulkActions }
+              slots: { BulkActions: BulkActionsModuleSlot }
             }
           ) : /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
             collapseHeader && headerTopRow,
@@ -13645,8 +13805,8 @@ const BankTransactionsHeader = ({
     }
   );
 };
-const Inbox = (_hb) => {
-  var _ib = _hb, { size = 18 } = _ib, props = __objRest(_ib, ["size"]);
+const Inbox = (_jb) => {
+  var _kb = _jb, { size = 18 } = _kb, props = __objRest(_kb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14128,8 +14288,8 @@ function asMutable(a) {
 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(
-  (_jb, ref) => {
-    var _kb = _jb, { children, className } = _kb, restProps = __objRest(_kb, ["children", "className"]);
+  (_lb, ref) => {
+    var _mb = _lb, { children, className } = _mb, restProps = __objRest(_mb, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Table,
       __spreadProps(__spreadValues({
@@ -14142,8 +14302,8 @@ const Table$1 = react.forwardRef(
   }
 );
 Table$1.displayName = "Table";
-const TableHeaderInner = (_lb, ref) => {
-  var _mb = _lb, { children, className, hideHeader } = _mb, restProps = __objRest(_mb, ["children", "className", "hideHeader"]);
+const TableHeaderInner = (_nb, ref) => {
+  var _ob = _nb, { children, className, hideHeader } = _ob, restProps = __objRest(_ob, ["children", "className", "hideHeader"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableHeader,
     __spreadProps(__spreadValues({
@@ -14156,8 +14316,8 @@ const TableHeaderInner = (_lb, ref) => {
 };
 const TableHeader = react.forwardRef(TableHeaderInner);
 TableHeader.displayName = "TableHeader";
-const TableBodyInner = (_nb, ref) => {
-  var _ob = _nb, { children, className } = _ob, restProps = __objRest(_ob, ["children", "className"]);
+const TableBodyInner = (_pb, ref) => {
+  var _qb = _pb, { children, className } = _qb, restProps = __objRest(_qb, ["children", "className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableBody,
     __spreadProps(__spreadValues({
@@ -14170,8 +14330,8 @@ const TableBodyInner = (_nb, ref) => {
 };
 const TableBody$1 = react.forwardRef(TableBodyInner);
 TableBody$1.displayName = "TableBody";
-const RowInner = (_pb, ref) => {
-  var _qb = _pb, { children, className, depth = 0 } = _qb, restProps = __objRest(_qb, ["children", "className", "depth"]);
+const RowInner = (_rb, ref) => {
+  var _sb = _rb, { children, className, depth = 0 } = _sb, restProps = __objRest(_sb, ["children", "className", "depth"]);
   const dataProperties = toDataProperties({ depth });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Row,
@@ -14186,8 +14346,8 @@ const RowInner = (_pb, ref) => {
 const Row = react.forwardRef(RowInner);
 Row.displayName = "Row";
 const Column = react.forwardRef(
-  (_rb, ref) => {
-    var _sb = _rb, { children, className, textAlign = "left" } = _sb, restProps = __objRest(_sb, ["children", "className", "textAlign"]);
+  (_tb, ref) => {
+    var _ub = _tb, { children, className, textAlign = "left" } = _ub, restProps = __objRest(_ub, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Column,
@@ -14202,8 +14362,8 @@ const Column = react.forwardRef(
 );
 Column.displayName = "Column";
 const Cell = react.forwardRef(
-  (_tb, ref) => {
-    var _ub = _tb, { children, className } = _ub, restProps = __objRest(_ub, ["children", "className"]);
+  (_vb, ref) => {
+    var _wb = _vb, { children, className } = _wb, restProps = __objRest(_wb, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Cell,
       __spreadProps(__spreadValues({
@@ -14580,8 +14740,8 @@ function useDelayedVisibility({
   );
   return { isVisible };
 }
-const File = (_vb) => {
-  var _wb = _vb, { size = 12 } = _wb, props = __objRest(_wb, ["size"]);
+const File = (_xb) => {
+  var _yb = _xb, { size = 12 } = _yb, props = __objRest(_yb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14641,6 +14801,57 @@ const File = (_vb) => {
     })
   );
 };
+const variants = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.3, ease: [0, 0, 0.58, 1] }
+  },
+  slideUp: {
+    initial: { y: "100%" },
+    animate: { y: 0 },
+    exit: { y: "100%" },
+    transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] }
+  },
+  expand: {
+    initial: { height: 0, opacity: 0 },
+    animate: { height: "auto", opacity: 1 },
+    exit: { height: 0, opacity: 0 },
+    transition: {
+      height: { duration: 0.25, ease: [0.4, 0, 0.2, 1] },
+      opacity: { duration: 0.15, ease: [0, 0, 0.58, 1] }
+    }
+  }
+};
+const AnimatedPresenceDiv = (_zb) => {
+  var _Ab = _zb, {
+    children,
+    variant,
+    isOpen,
+    slotProps = { AnimatePresence: { initial: false } },
+    key
+  } = _Ab, props = __objRest(_Ab, [
+    "children",
+    "variant",
+    "isOpen",
+    "slotProps",
+    "key"
+  ]);
+  const config = variants[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(react$2.AnimatePresence, __spreadProps(__spreadValues({}, slotProps.AnimatePresence), { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+    react$2.motion.div,
+    __spreadProps(__spreadValues({
+      initial: config.initial,
+      animate: config.animate,
+      exit: config.exit,
+      transition: config.transition
+    }, props), {
+      children
+    }),
+    key
+  ) }));
+};
 function isActiveBookkeepingStatus(status) {
   return status === BookkeepingStatus$2.ACTIVE || status === BookkeepingStatus$2.ONBOARDING;
 }
@@ -14740,29 +14951,8 @@ function useBookkeepingPeriods() {
     }
   });
 }
-const monthNames = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-const getMonthNameFromNumber = (monthNumber) => {
-  var _a;
-  if (monthNumber < 1 || monthNumber > 12) {
-    return "";
-  }
-  return (_a = monthNames.at(monthNumber - 1)) != null ? _a : "";
-};
-const Clock = (_xb) => {
-  var _yb = _xb, { size = 18 } = _yb, props = __objRest(_yb, ["size"]);
+const Clock = (_Bb) => {
+  var _Cb = _Bb, { size = 18 } = _Cb, props = __objRest(_Cb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14787,6 +14977,27 @@ const Clock = (_xb) => {
     })
   );
 };
+const monthNames = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+const getMonthNameFromNumber = (monthNumber) => {
+  var _a;
+  if (monthNumber < 1 || monthNumber > 12) {
+    return "";
+  }
+  return (_a = monthNames.at(monthNumber - 1)) != null ? _a : "";
+};
 function getBookkeepingStatusConfig({
   status,
   monthNumber,
@@ -14855,10 +15066,24 @@ const BookkeepingStatus$1 = ({ status, text, monthNumber, iconOnly }) => {
     )
   ] }));
 };
-const BankTransactionsProcessingInfo = () => /* @__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." })
-] });
+const BankTransactionsProcessingInfo = ({ showAsBadge = false }) => {
+  const tooltipContent = "Our team will review and categorize this transaction. We'll reach out if we have any questions about it.";
+  if (showAsBadge) {
+    return /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", align: "center", fluid: true, className: "Layer__BankTransactionsProcessingInfo", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Badge,
+      {
+        size: BadgeSize.SMALL,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Clock, { size: 11 }),
+        variant: BadgeVariant.INFO,
+        children: "Processing"
+      }
+    ) });
+  }
+  return /* @__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: tooltipContent })
+  ] });
+};
 const isSplitsValid = (localSplits) => {
   return validateSplit(localSplits).reduce((acc, splitError) => acc && splitError === void 0, true);
 };
@@ -15053,8 +15278,8 @@ const useSplitsForm = ({
     saveLocalSplitsToCategoryStore
   };
 };
-const ScissorsFullOpen = (_zb) => {
-  var _Ab = _zb, { size = 12 } = _Ab, props = __objRest(_Ab, ["size"]);
+const ScissorsFullOpen = (_Db) => {
+  var _Eb = _Db, { size = 12 } = _Eb, props = __objRest(_Eb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15119,8 +15344,8 @@ const ScissorsFullOpen = (_zb) => {
     })
   );
 };
-const Trash = (_Bb) => {
-  var _Cb = _Bb, { size = 18 } = _Cb, props = __objRest(_Cb, ["size"]);
+const Trash = (_Fb) => {
+  var _Gb = _Fb, { size = 18 } = _Gb, props = __objRest(_Gb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -15315,8 +15540,8 @@ const ReceiptsProvider = ({
   const contextData = useReceipts({ bankTransaction, isActive });
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsContext.Provider, { value: contextData, children });
 };
-const Eye = (_Db) => {
-  var _Eb = _Db, { size = 18 } = _Eb, props = __objRest(_Eb, ["size"]);
+const Eye = (_Hb) => {
+  var _Ib = _Hb, { size = 18 } = _Ib, props = __objRest(_Ib, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15452,11 +15677,11 @@ const FileThumb = ({
     }
   );
 };
-const TextButton = (_Fb) => {
-  var _Gb = _Fb, {
+const TextButton = (_Jb) => {
+  var _Kb = _Jb, {
     className,
     children
-  } = _Gb, props = __objRest(_Gb, [
+  } = _Kb, props = __objRest(_Kb, [
     "className",
     "children"
   ]);
@@ -15540,8 +15765,8 @@ const openReceiptInNewTab = (url, index2) => (e) => {
       `);
   }
 };
-const BankTransactionReceiptsWithProvider = react.forwardRef((_Hb, ref) => {
-  var _Ib = _Hb, { bankTransaction, isActive } = _Ib, props = __objRest(_Ib, ["bankTransaction", "isActive"]);
+const BankTransactionReceiptsWithProvider = react.forwardRef((_Lb, ref) => {
+  var _Mb = _Lb, { bankTransaction, isActive } = _Mb, props = __objRest(_Mb, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })) });
 });
 BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
@@ -15708,8 +15933,8 @@ const transformCurrencyValue = (rawValue) => {
   }
   return cleaned;
 };
-const AmountInput = (_Jb) => {
-  var _Kb = _Jb, {
+const AmountInput = (_Nb) => {
+  var _Ob = _Nb, {
     onChange,
     className,
     leftText,
@@ -15717,7 +15942,7 @@ const AmountInput = (_Jb) => {
     isInvalid,
     badge,
     placeholder = "$0.00"
-  } = _Kb, props = __objRest(_Kb, [
+  } = _Ob, props = __objRest(_Ob, [
     "onChange",
     "className",
     "leftText",
@@ -15993,12 +16218,12 @@ const useBankTransactionMemo = ({ bankTransactionId }) => {
   });
   return form;
 };
-const Textarea = (_Lb) => {
-  var _Mb = _Lb, {
+const Textarea = (_Pb) => {
+  var _Qb = _Pb, {
     className,
     isInvalid,
     errorMessage
-  } = _Mb, props = __objRest(_Mb, [
+  } = _Qb, props = __objRest(_Qb, [
     "className",
     "isInvalid",
     "errorMessage"
@@ -17550,7 +17775,6 @@ const extractDescriptionForSplit = (category) => {
   }
   return category.entries.map((c) => c.category.display_name).join(", ");
 };
-let clickTimer = Date.now();
 const BankTransactionRow = ({
   index: index2,
   editable,
@@ -17570,10 +17794,10 @@ const BankTransactionRow = ({
   const [showRetry, setShowRetry] = react.useState(false);
   const { shouldHideAfterCategorize } = useBankTransactionsContext();
   const [open, setOpen] = react.useState(false);
-  const toggleOpen = () => {
+  const toggleOpen = react.useCallback(() => {
     setShowRetry(false);
     setOpen(!open);
-  };
+  }, [open]);
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const categorized = isCategorized(bankTransaction);
@@ -17606,16 +17830,12 @@ const BankTransactionRow = ({
     deselect(bankTransaction.id);
     setOpen(false);
   });
-  const openRow = {
-    onMouseDown: () => {
-      clickTimer = Date.now();
-    },
-    onMouseUp: () => {
-      if (Date.now() - clickTimer < 100 && !open) {
-        setShowRetry(false);
-        setOpen(true);
-      }
-    }
+  const handleRowClick = () => {
+    setShowRetry(false);
+    toggleOpen();
+  };
+  const preventRowExpansion = (e) => {
+    e.stopPropagation();
   };
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
@@ -17632,8 +17852,8 @@ const BankTransactionRow = ({
   );
   const colSpan = categorizationEnabled ? 7 : 6;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: rowClassName, children: [
-      categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell Layer__bank-transactions__checkbox-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: rowClassName, onClick: handleRowClick, children: [
+      categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "Layer__table-cell Layer__bank-transactions__checkbox-col", onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: /* @__PURE__ */ jsxRuntime.jsx(
         Checkbox,
         {
           isSelected: isTransactionSelected,
@@ -17648,25 +17868,22 @@ const BankTransactionRow = ({
       ) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "td",
-        __spreadProps(__spreadValues({
-          className: "Layer__table-cell Layer__bank-transaction-table__date-col"
-        }, openRow), {
+        {
+          className: "Layer__table-cell Layer__bank-transaction-table__date-col",
           children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { children: dateFns.format(dateFns.parseISO(bankTransaction.date), dateFormat) }) })
-        })
+        }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "td",
-        __spreadProps(__spreadValues({
-          className: "Layer__table-cell Layer__bank-transactions__tx-col"
-        }, openRow), {
+        {
+          className: "Layer__table-cell Layer__bank-transactions__tx-col",
           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(
         "td",
-        __spreadProps(__spreadValues({
-          className: "Layer__table-cell Layer__bank-transactions__account-col"
-        }, openRow), {
+        {
+          className: "Layer__table-cell Layer__bank-transactions__account-col",
           children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__table-cell-content", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { align: "start", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Span, { ellipsis: true, children: [
               bankTransaction.account_name,
@@ -17674,13 +17891,13 @@ const BankTransactionRow = ({
             ] }),
             ((_b = bankTransaction.account_institution) == null ? void 0 : _b.name) && /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, variant: "subtle", size: "sm", children: bankTransaction.account_institution.name })
           ] }) })
-        })
+        }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "td",
-        __spreadProps(__spreadValues(__spreadValues({
+        __spreadProps(__spreadValues({
           className: `Layer__table-cell Layer__table-cell__amount-col Layer__bank-transactions__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
-        }, openRow), showReceiptDataProperties), {
+        }, showReceiptDataProperties), {
           children: /* @__PURE__ */ jsxRuntime.jsx(VStack, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
             MoneySpan,
             {
@@ -17708,6 +17925,7 @@ const BankTransactionRow = ({
             `${className}__actions-cell`,
             `${className}__actions-cell--${open ? "open" : "close"}`
           ),
+          onClick: preventRowExpansion,
           children: open ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pie: "md", gap: "md", justify: "end", className: "Layer__bank-transaction-row__category-open", children: [
             bankTransaction.error && /* @__PURE__ */ jsxRuntime.jsxs(
               Text,
@@ -17733,6 +17951,7 @@ const BankTransactionRow = ({
                 processing: bankTransaction.processing,
                 active: open,
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                disabled: selectedCategory === null,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
@@ -17806,6 +18025,7 @@ const BankTransactionRow = ({
                 className: "Layer__bank-transaction__submit-btn",
                 processing: bankTransaction.processing,
                 active: open,
+                disabled: selectedCategory === null,
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
@@ -17971,6 +18191,9 @@ const BankTransactionsListItem = ({
   const handleSave = () => {
     void save();
   };
+  const preventRowExpansion = (e) => {
+    e.stopPropagation();
+  };
   const openClassName = openExpandedRow ? "Layer__bank-transaction-list-item--expanded" : "";
   const rowClassName = classNames(
     "Layer__bank-transaction-list-item",
@@ -17978,7 +18201,7 @@ const BankTransactionsListItem = ({
     openExpandedRow ? openClassName : "",
     isVisible ? "show" : ""
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: rowClassName, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: rowClassName, onClick: toggleExpandedRow, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__bank-transaction-list-item__heading", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-list-item__heading__main", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, size: "sm", children: dateFns.format(dateFns.parseISO(bankTransaction.date), dateFormat) }),
@@ -18009,7 +18232,7 @@ const BankTransactionsListItem = ({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "Layer__bank-transaction-list-item__body", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "Layer__bank-transaction-list-item__body__name", children: [
-        categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transaction-list-item__checkbox", children: /* @__PURE__ */ jsxRuntime.jsx(
+        categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transaction-list-item__checkbox", onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
             isSelected: isTransactionSelected,
@@ -18034,7 +18257,7 @@ const BankTransactionsListItem = ({
       )
     ] }),
     !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedPresenceDiv, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedPresenceDiv, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsxRuntime.jsx(
       ExpandedBankTransactionRow,
       {
         ref: expandedRowRef,
@@ -18051,7 +18274,7 @@ const BankTransactionsListItem = ({
         variant: "list"
       }
     ) }, `expanded-${bankTransaction.id}`) }),
-    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
+    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         BankTransactionCategoryComboBox,
         {
@@ -18077,7 +18300,7 @@ const BankTransactionsListItem = ({
           children: showRetry ? "Retry" : !categorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
         }
       )
-    ] }),
+    ] }) }),
     !openExpandedRow && categorized && /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionsListItemCategory,
       {
@@ -18145,10 +18368,10 @@ const BankTransactionsList = ({
   ] });
 };
 const SWITCH_CLASS_NAME = "Layer__Switch";
-const Switch = react.forwardRef((_Nb, ref) => {
-  var _Ob = _Nb, {
+const Switch = react.forwardRef((_Rb, ref) => {
+  var _Sb = _Rb, {
     children
-  } = _Ob, props = __objRest(_Ob, [
+  } = _Sb, props = __objRest(_Sb, [
     "children"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18287,8 +18510,8 @@ const BankTransactionsMobileListItemCheckbox = ({
     }
   ) });
 };
-const Paperclip = (_Pb) => {
-  var _Qb = _Pb, { size = 20 } = _Qb, props = __objRest(_Qb, ["size"]);
+const Paperclip = (_Tb) => {
+  var _Ub = _Tb, { size = 20 } = _Ub, props = __objRest(_Ub, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -18377,168 +18600,6 @@ const BusinessFormMobile = ({
     )
   ] });
 };
-const ActionableList = ({
-  options: options2,
-  onClick,
-  selectedId,
-  showDescriptions = false,
-  className
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: classNames("Layer__actionable-list", className), children: options2.map((x, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "li",
-    {
-      role: "button",
-      onClick: () => onClick(x),
-      className: classNames(
-        x.secondary && "Layer__actionable-list-item--secondary",
-        x.asLink && "Layer__actionable-list-item--as-link",
-        selectedId === x.id && "Layer__actionable-list__item--selected"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__actionable-list__content", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, children: x.label }),
-          /* TODO: Replace 'See all categories' with something more generic */
-          showDescriptions && x.description && x.label !== "See all categories" && /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
-            {
-              className: "Layer__actionable-list__content-description",
-              size: TextSize.sm,
-              children: x.description
-            }
-          )
-        ] }),
-        !x.asLink && selectedId && selectedId === x.id ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__actionable-list__select Layer__actionable-list__select--selected", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Check,
-          {
-            size: 14,
-            className: "Layer__actionable-list__selected-icon"
-          }
-        ) }) : null,
-        !x.asLink && (!selectedId || selectedId !== x.id) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__actionable-list__select" }) : null,
-        x.asLink && /* @__PURE__ */ jsxRuntime.jsx(
-          ChevronRight,
-          {
-            size: 16,
-            className: "Layer__actionable-list__link-icon"
-          }
-        )
-      ]
-    },
-    `actionable-list-item-${idx}`
-  )) });
-};
-function getLeafCategories(category) {
-  if (!category.subCategories || category.subCategories.length === 0) {
-    return [category];
-  }
-  return category.subCategories.flatMap((subCategory) => getLeafCategories(subCategory));
-}
-const flattenCategories = (categories) => {
-  return categories.flatMap((category) => {
-    const subCategories = category.subCategories;
-    if (!subCategories || subCategories.length === 0) {
-      return [new CategoryAsOption(category)];
-    }
-    const leafCategories = getLeafCategories(category);
-    if (subCategories.every((subCategory) => !subCategory.subCategories || subCategory.subCategories.length === 0)) {
-      return [{
-        label: category.displayName,
-        id: "id" in category ? category.id : category.stableName,
-        categories: leafCategories.map((cat) => new CategoryAsOption(cat))
-      }];
-    }
-    return leafCategories.map((cat) => new CategoryAsOption(cat));
-  });
-};
-const isGroup = (item) => {
-  return "categories" in item;
-};
-const BankTransactionsMobileListBusinessCategories = ({
-  select,
-  selectedId,
-  showTooltips
-}) => {
-  const { data: categories } = useCategories();
-  const [query, setQuery] = react.useState("");
-  const categoryOptions = react.useMemo(
-    () => flattenCategories(
-      (categories != null ? categories : []).filter((category) => category.type != "ExclusionNested")
-    ),
-    [categories]
-  );
-  const [optionsToShow, setOptionsToShow] = react.useState(categoryOptions);
-  const [selectedGroup, setSelectedGroup] = react.useState();
-  const filteredOptions = react.useMemo(() => {
-    let options2 = optionsToShow;
-    if (query) {
-      const lower = query.toLowerCase();
-      options2 = options2.flatMap((opt) => {
-        if (isGroup(opt)) {
-          return opt.categories.filter(
-            (cat) => cat.label.toLowerCase().includes(lower)
-          );
-        }
-        return opt.label.toLowerCase().includes(lower) ? [opt] : [];
-      });
-    }
-    return options2.sort((a, b) => a.label.localeCompare(b.label)).map((opt) => {
-      var _a;
-      return isGroup(opt) ? { label: opt.label, id: opt.id, value: opt, asLink: true } : { label: opt.label, id: opt.value, description: (_a = opt.original.description) != null ? _a : void 0, value: opt };
-    });
-  }, [optionsToShow, query]);
-  const onCategorySelect = (item) => {
-    if (isGroup(item.value)) {
-      setOptionsToShow(item.value.categories);
-      setSelectedGroup(item.value.label);
-      setQuery("");
-      return;
-    }
-    select(item.value);
-  };
-  const clearSelectedGroup = react.useCallback(() => {
-    setOptionsToShow(categoryOptions);
-    setSelectedGroup(void 0);
-    setQuery("");
-  }, [categoryOptions]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: "Layer__bank-transaction-mobile-list-item__categories_list-container", pbs: "lg", gap: "md", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pis: "sm", pie: "sm", gap: "md", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(HStack, { pis: "xs", children: selectedGroup ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "text", onClick: clearSelectedGroup, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 18 }),
-        /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "sm", weight: "bold", align: "center", children: selectedGroup })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "sm", weight: "bold", children: "Select category" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SearchField, { value: query, onChange: setQuery, label: "Search categories..." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ActionableList,
-      {
-        options: filteredOptions,
-        onClick: onCategorySelect,
-        selectedId,
-        showDescriptions: showTooltips,
-        className: "Layer__bank-transaction-mobile-list-item__categories_list"
-      }
-    )
-  ] });
-};
-const CategorySelectDrawer = ({
-  onSelect,
-  selectedId,
-  showTooltips,
-  isOpen,
-  onOpenChange
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen, onOpenChange, variant: "mobile-drawer", isDismissable: true, children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsx(
-    BankTransactionsMobileListBusinessCategories,
-    {
-      select: (option) => {
-        onSelect(option);
-        close2();
-      },
-      selectedId,
-      showTooltips
-    }
-  ) });
-};
 const SELECT_CATEGORY_VALUE = "SELECT_CATEGORY";
 const isSelectCategoryOption = (value) => {
   return isPlaceholderAsOption(value) && value.value === SELECT_CATEGORY_VALUE;
@@ -18555,6 +18616,10 @@ const BankTransactionsMobileListBusinessForm = ({
   const [sessionCategories, setSessionCategories] = react.useState(() => {
     var _a;
     const initialMap = /* @__PURE__ */ new Map();
+    if (bankTransaction.category) {
+      const existingCategory = convertApiCategorizationToCategoryOrSplitAsOption(bankTransaction.category);
+      initialMap.set(existingCategory.value, existingCategory);
+    }
     if (((_a = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a.type) === CategorizationType.ASK_FROM_SUGGESTIONS) {
       bankTransaction.categorization_flow.suggestions.forEach((suggestion) => {
         const opt = new ApiCategorizationAsOption(suggestion);
@@ -18823,7 +18888,7 @@ const MatchFormMobileItem = ({ match, bankTransaction, inAppLink }) => {
             }
           }
         ),
-        inAppLink
+        inAppLink && /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", children: inAppLink }) })
       ] })
     },
     match.id
@@ -18968,39 +19033,6 @@ const BankTransactionsMobileListMatchForm = ({
     showRetry && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." })
   ] });
 };
-const CategorySelectDrawerWithTrigger = ({ value, onChange, showTooltips }) => {
-  var _a;
-  const [isDrawerOpen, setIsDrawerOpen] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { fluid: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        flex: true,
-        fullWidth: true,
-        "aria-label": "Select category",
-        onClick: () => {
-          setIsDrawerOpen(true);
-        },
-        variant: "outlined",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Span, { children: (_a = value == null ? void 0 : value.label) != null ? _a : "Select..." }),
-          /* @__PURE__ */ jsxRuntime.jsx(Spacer, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 16 })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      CategorySelectDrawer,
-      {
-        onSelect: onChange,
-        selectedId: value == null ? void 0 : value.value,
-        showTooltips,
-        isOpen: isDrawerOpen,
-        onOpenChange: setIsDrawerOpen
-      }
-    )
-  ] });
-};
 const BankTransactionsMobileListSplitForm = ({
   bankTransaction,
   showTooltips,
@@ -19250,6 +19282,37 @@ const BankTransactionsMobileForms = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: getContent() });
 };
+const NewToggleOption = ({
+  label,
+  value
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.ToggleButton, { id: value, className: "Layer__NewToggleOption", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectionIndicator, { className: "Layer__NewToggleOption-SelectionIndicator" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__NewToggle-Option-Content", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label }) })
+  ] });
+};
+const NewToggle = ({
+  options: options2,
+  selectedKey,
+  onSelectionChange
+}) => {
+  const selectedKeys = selectedKey !== void 0 ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ToggleButtonGroup,
+    {
+      className: "Layer__NewToggle",
+      selectionMode: "single",
+      selectedKeys,
+      onSelectionChange: (keys2) => {
+        const selectedKeysArray = Array.from(keys2);
+        if (selectedKeysArray.length > 0 && onSelectionChange) {
+          onSelectionChange(selectedKeysArray[0]);
+        }
+      },
+      children: options2.map((option) => /* @__PURE__ */ jsxRuntime.jsx(NewToggleOption, __spreadValues({}, option), option.value))
+    }
+  );
+};
 const PURPOSE_TOGGLE_OPTIONS = [
   {
     value: "business",
@@ -19269,27 +19332,27 @@ const PURPOSE_TOGGLE_OPTIONS = [
 ];
 const BankTransactionsMobileListItemExpandedRow = ({
   bankTransaction,
+  isOpen,
   showCategorization,
   showDescriptions,
   showReceiptUploads,
   showTooltips
 }) => {
   const [purpose, setPurpose] = react.useState(getInitialPurpose(bankTransaction));
-  const onChangePurpose = (event) => setPurpose(event.target.value);
+  const onChangePurpose = (key) => setPurpose(key);
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pi: "md", gap: "md", pbe: "md", children: [
     showCategorization && /* @__PURE__ */ jsxRuntime.jsx(
-      Toggle,
+      NewToggle,
       {
-        name: `purpose-${bankTransaction.id}`,
-        size: ToggleSize.medium,
         options: PURPOSE_TOGGLE_OPTIONS,
-        selected: purpose,
-        onChange: onChangePurpose
+        selectedKey: purpose,
+        onSelectionChange: onChangePurpose
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionsMobileForms,
       {
+        isOpen,
         purpose,
         bankTransaction,
         showCategorization,
@@ -19332,20 +19395,15 @@ var Purpose = /* @__PURE__ */ ((Purpose2) => {
   Purpose2["more"] = "more";
   return Purpose2;
 })(Purpose || {});
-const getAssignedValue = (bankTransaction, renderInAppLink) => {
-  var _a, _b, _c, _d;
-  if (bankTransaction.categorization_status === CategorizationStatus.SPLIT) {
-    return extractDescriptionForSplit(bankTransaction.category);
-  }
-  if (bankTransaction.categorization_status === CategorizationStatus.MATCHED) {
-    if (renderInAppLink && ((_a = bankTransaction.match) == null ? void 0 : _a.details)) {
-      const matchDetails = bankTransaction.match.details ? decodeMatchDetails(bankTransaction.match.details) : void 0;
-      const inAppLink = matchDetails ? renderInAppLink(convertMatchDetailsToLinkingMetadata(matchDetails)) : void 0;
-      if (inAppLink) return inAppLink;
+const getInAppLink = (bankTransaction, renderInAppLink) => {
+  var _a;
+  if (bankTransaction.categorization_status === CategorizationStatus.MATCHED && renderInAppLink && ((_a = bankTransaction.match) == null ? void 0 : _a.details)) {
+    const matchDetails = decodeMatchDetails(bankTransaction.match.details);
+    if (matchDetails) {
+      return renderInAppLink(convertMatchDetailsToLinkingMetadata(matchDetails));
     }
-    return (_c = (_b = bankTransaction.match) == null ? void 0 : _b.details) == null ? void 0 : _c.description;
   }
-  return (_d = bankTransaction.category) == null ? void 0 : _d.display_name;
+  return null;
 };
 const BankTransactionsMobileListItem = ({
   index: index2,
@@ -19453,6 +19511,12 @@ const BankTransactionsMobileListItem = ({
   const isSelected = useIdIsSelected();
   const isTransactionSelected = isSelected(bankTransaction.id);
   const { renderInAppLink } = useInAppLinkContext();
+  const inAppLink = react.useMemo(() => {
+    if (!categorized) {
+      return null;
+    }
+    return getInAppLink(bankTransaction, renderInAppLink);
+  }, [categorized, bankTransaction, renderInAppLink]);
   const { isVisible } = useDelayedVisibility({ delay: index2 * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
@@ -19471,9 +19535,8 @@ const BankTransactionsMobileListItem = ({
           /* @__PURE__ */ jsxRuntime.jsxs(
             HStack,
             {
-              gap: "lg",
+              gap: "sm",
               justify: "space-between",
-              align: "center",
               pie: "md",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", overflow: "hidden", children: [
@@ -19490,12 +19553,12 @@ const BankTransactionsMobileListItem = ({
                     {
                       align: "start",
                       gap: "3xs",
-                      className: "Layer__bankTransactionsMobileListItem__headingContentLeft",
+                      className: "Layer__BankTransactionsMobileListItem__HeadingContentLeft",
                       pi: "md",
                       pb: "sm",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: (_b = bankTransaction.counterparty_name) != null ? _b : bankTransaction.description }),
-                        /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__bankTransactionsMobileListItem__categorizedValue", children: categorized && bankTransaction.categorization_status ? getAssignedValue(bankTransaction, renderInAppLink) : null }),
+                        inAppLink && /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__BankTransactionsMobileListItem__CategorizedValue", children: inAppLink }),
                         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "2xs", align: "center", children: [
                           /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", ellipsis: true, children: fullAccountName }),
                           hasReceipts(bankTransaction) ? /* @__PURE__ */ jsxRuntime.jsx(File, { size: 12 }) : null
@@ -19520,7 +19583,7 @@ const BankTransactionsMobileListItem = ({
               ]
             }
           ),
-          !open && (!categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          !open && (!categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsxRuntime.jsx(
             BankTransactionsListItemCategory,
             {
               bankTransaction,
@@ -19534,6 +19597,7 @@ const BankTransactionsMobileListItem = ({
       BankTransactionsMobileListItemExpandedRow,
       {
         bankTransaction,
+        isOpen: open,
         showCategorization: categorizationEnabled,
         showDescriptions,
         showReceiptUploads,
@@ -19554,6 +19618,7 @@ const BankTransactionsMobileList = ({
   const transactionToOpenContextData = useTransactionToOpen();
   const [bulkActionsEnabled, setBulkActionsEnabled] = react.useState(false);
   const { clearSelection } = useBulkSelectionActions();
+  useUpsertBankTransactionsDefaultCategories(bankTransactions);
   react.useEffect(() => {
     if (!bulkActionsEnabled) {
       clearSelection();
@@ -19724,6 +19789,7 @@ const BankTransactionsTable = ({
             SyncingComponent,
             {
               title: "Syncing historical account data",
+              timeSync: 5,
               onRefresh: () => onRefresh && onRefresh()
             }
           ) }) }) : null
@@ -19732,8 +19798,8 @@ const BankTransactionsTable = ({
     }
   );
 };
-const BackArrow = (_Rb) => {
-  var _Sb = _Rb, { size = 18 } = _Sb, props = __objRest(_Sb, ["size"]);
+const BackArrow = (_Vb) => {
+  var _Wb = _Vb, { size = 18 } = _Wb, props = __objRest(_Wb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -19901,8 +19967,8 @@ const usePaginationRange = ({
   }, [totalCount, pageSize, siblingCount, currentPage]);
   return paginationRange;
 };
-const ChevronLeft = (_Tb) => {
-  var props = __objRest(_Tb, []);
+const ChevronLeft = (_Xb) => {
+  var props = __objRest(_Xb, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -19924,8 +19990,8 @@ const ChevronLeft = (_Tb) => {
     })
   );
 };
-const PaginationButton = (_Ub) => {
-  var _Vb = _Ub, { children, isSelected } = _Vb, buttonProps = __objRest(_Vb, ["children", "isSelected"]);
+const PaginationButton = (_Yb) => {
+  var _Zb = _Yb, { children, isSelected } = _Zb, buttonProps = __objRest(_Zb, ["children", "isSelected"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     __spreadProps(__spreadValues({
@@ -20354,8 +20420,8 @@ function usePreloadTagDimensions(parameters) {
   useTagDimensions(parameters);
 }
 const COMPONENT_NAME$c = "bank-transactions";
-const BankTransactions = (_Wb) => {
-  var _Xb = _Wb, {
+const BankTransactions = (__b) => {
+  var _$b = __b, {
     onError,
     showTags = false,
     showCustomerVendor = false,
@@ -20363,7 +20429,7 @@ const BankTransactions = (_Wb) => {
     applyGlobalDateRange = false,
     mode,
     renderInAppLink
-  } = _Xb, props = __objRest(_Xb, [
+  } = _$b, props = __objRest(_$b, [
     "onError",
     "showTags",
     "showCustomerVendor",
@@ -20593,7 +20659,7 @@ const BankTransactionsTableView = ({
             }
           )
         ] }),
-        !isLoadingWithoutData && listView && mobileComponent !== "mobileList" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transactions__list-wrapper", children: [
+        !isLoadingWithoutData && listView && mobileComponent !== "mobileList" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transactions__list-wrapper", children: [
           rulesSuggestionModal,
           /* @__PURE__ */ jsxRuntime.jsx(
             BankTransactionsList,
@@ -20608,8 +20674,8 @@ const BankTransactionsTableView = ({
               showTooltips
             }
           )
-        ] }) : null,
-        !isLoadingWithoutData && listView && mobileComponent === "mobileList" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        ] }),
+        !isLoadingWithoutData && listView && mobileComponent === "mobileList" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             BankTransactionsMobileList,
             {
@@ -20622,9 +20688,9 @@ const BankTransactionsTableView = ({
             }
           ),
           rulesSuggestionDrawer
-        ] }) : null,
-        listView && isLoadingWithoutData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transactions__list-loader", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : null,
-        !isSyncing || listView ? /* @__PURE__ */ jsxRuntime.jsx(
+        ] }),
+        listView && isLoadingWithoutData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transactions__list-loader", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }),
+        (!isSyncing || listView) && /* @__PURE__ */ jsxRuntime.jsx(
           BankTransactionsTableEmptyStates,
           {
             hasVisibleTransactions: ((_a = bankTransactions == null ? void 0 : bankTransactions.length) != null ? _a : 0) > 0,
@@ -20633,7 +20699,7 @@ const BankTransactionsTableView = ({
             isFiltered: Boolean(filters == null ? void 0 : filters.query),
             isLoadingWithoutData
           }
-        ) : null,
+        ),
         !isMonthlyViewMode && /* @__PURE__ */ jsxRuntime.jsx(HStack, { justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
           Pagination,
           {
@@ -20728,8 +20794,8 @@ function QuickbooksContextProvider({ children }) {
   const quickbooksContextData = useQuickbooks();
   return /* @__PURE__ */ jsxRuntime.jsx(QuickbooksContext.Provider, { value: quickbooksContextData, children });
 }
-const Cog = (_Yb) => {
-  var _Zb = _Yb, { size = 12 } = _Zb, props = __objRest(_Zb, ["size"]);
+const Cog = (_ac) => {
+  var _bc = _ac, { size = 12 } = _bc, props = __objRest(_bc, ["size"]);
   const id = react.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -20750,8 +20816,8 @@ const Cog = (_Yb) => {
     })
   );
 };
-const QuickbooksIcon = (__b) => {
-  var _$b = __b, { size = 24 } = _$b, props = __objRest(_$b, ["size"]);
+const QuickbooksIcon = (_cc) => {
+  var _dc = _cc, { size = 24 } = _dc, props = __objRest(_dc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -20910,8 +20976,8 @@ function IntegrationsQuickbooksUnlinkConfirmationModal({ isOpen, onOpenChange })
     }
   );
 }
-const MoreVertical = (_ac) => {
-  var _bc = _ac, { size = 18 } = _bc, props = __objRest(_bc, ["size"]);
+const MoreVertical = (_ec) => {
+  var _fc = _ec, { size = 18 } = _fc, props = __objRest(_fc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21140,8 +21206,8 @@ const IntegrationsComponent = ({
     (quickbooksConnectionStatus == null ? void 0 : quickbooksConnectionStatus.is_connected) && /* @__PURE__ */ jsxRuntime.jsx(IntegrationsContent, {})
   ] });
 };
-const PlusIcon = (_cc) => {
-  var _dc = _cc, { size = 14 } = _dc, props = __objRest(_dc, ["size"]);
+const PlusIcon = (_gc) => {
+  var _hc = _gc, { size = 14 } = _hc, props = __objRest(_hc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21183,8 +21249,8 @@ const PlusIcon = (_cc) => {
     })
   );
 };
-const InstitutionIcon = (_ec) => {
-  var _fc = _ec, { size = 18 } = _fc, props = __objRest(_fc, ["size"]);
+const InstitutionIcon = (_ic) => {
+  var _jc = _ic, { size = 18 } = _jc, props = __objRest(_jc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21491,10 +21557,10 @@ const InstitutionIcon = (_ec) => {
     })
   );
 };
-const CLASS_NAME$5 = "Layer__BasicLinkedAccountContainer";
+const CLASS_NAME$4 = "Layer__BasicLinkedAccountContainer";
 function BasicLinkedAccountContainer({ children, isSelected }) {
   const dataProperties = toDataProperties({ selected: isSelected });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, dataProperties), { className: CLASS_NAME$5, children }));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, dataProperties), { className: CLASS_NAME$4, children }));
 }
 function BasicLinkedAccountLogo({ account }) {
   var _a, _b, _c;
@@ -21802,8 +21868,8 @@ const MenuItem = react.forwardRef(
 );
 const PILL_CLASS_NAME = "Layer__Pill";
 const Pill = react.forwardRef(
-  function Pill2(_gc, ref) {
-    var _hc = _gc, { children, status } = _hc, restProps = __objRest(_hc, ["children", "status"]);
+  function Pill2(_kc, ref) {
+    var _lc = _kc, { children, status } = _lc, restProps = __objRest(_lc, ["children", "status"]);
     const dataProperties = toDataProperties({ status });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Button,
@@ -22166,8 +22232,8 @@ const LinkedAccountsContent = ({
 };
 const CALENDAR_CLASS_NAME = "Layer__UI__Calendar";
 const Calendar = react.forwardRef(
-  function Calendar2(_ic, ref) {
-    var _jc = _ic, { className, isReadOnly } = _jc, restProps = __objRest(_jc, ["className", "isReadOnly"]);
+  function Calendar2(_mc, ref) {
+    var _nc = _mc, { className, isReadOnly } = _nc, restProps = __objRest(_nc, ["className", "isReadOnly"]);
     const dataProperties = toDataProperties({ readonly: isReadOnly });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Calendar,
@@ -22181,8 +22247,8 @@ const Calendar = react.forwardRef(
 );
 const CALENDAR_GRID_CLASS_NAME = "Layer__UI__CalendarGrid";
 const CalendarGrid = react.forwardRef(
-  function CalendarGrid2(_kc, ref) {
-    var _lc = _kc, { className } = _lc, restProps = __objRest(_lc, ["className"]);
+  function CalendarGrid2(_oc, ref) {
+    var _pc = _oc, { className } = _pc, restProps = __objRest(_pc, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGrid,
       __spreadProps(__spreadValues({}, restProps), {
@@ -22194,8 +22260,8 @@ const CalendarGrid = react.forwardRef(
 );
 const CALENDAR_GRID_BODY_CLASS_NAME = "Layer__UI__CalendarGridBody";
 const CalendarGridBody = react.forwardRef(
-  function CalendarGridBody2(_mc, ref) {
-    var _nc = _mc, { className } = _nc, restProps = __objRest(_nc, ["className"]);
+  function CalendarGridBody2(_qc, ref) {
+    var _rc = _qc, { className } = _rc, restProps = __objRest(_rc, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridBody,
       __spreadProps(__spreadValues({}, restProps), {
@@ -22207,8 +22273,8 @@ const CalendarGridBody = react.forwardRef(
 );
 const CALENDAR_CELL_CLASS_NAME = "Layer__UI__CalendarCell";
 const CalendarCell = react.forwardRef(
-  function CalendarCell2(_oc, ref) {
-    var _pc = _oc, { className, size = "sm" } = _pc, restProps = __objRest(_pc, ["className", "size"]);
+  function CalendarCell2(_sc, ref) {
+    var _tc = _sc, { className, size = "sm" } = _tc, restProps = __objRest(_tc, ["className", "size"]);
     const dataProperties = toDataProperties({ size });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarCell,
@@ -22221,8 +22287,8 @@ const CalendarCell = react.forwardRef(
 );
 const CALENDAR_GRID_HEADER_CLASS_NAME = "Layer__UI__CalendarGridHeader";
 const CalendarGridHeader = react.forwardRef(
-  function CalendarGridHeader2(_qc, ref) {
-    var _rc = _qc, { className } = _rc, restProps = __objRest(_rc, ["className"]);
+  function CalendarGridHeader2(_uc, ref) {
+    var _vc = _uc, { className } = _vc, restProps = __objRest(_vc, ["className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridHeader,
       __spreadProps(__spreadValues({}, restProps), {
@@ -22234,8 +22300,8 @@ const CalendarGridHeader = react.forwardRef(
 );
 const CALENDAR_HEADER_CELL_CLASS_NAME = "Layer__UI__CalendarHeaderCell";
 const CalendarHeaderCell = react.forwardRef(
-  function CalendarHeaderCell2(_sc, ref) {
-    var _tc = _sc, { className, size = "sm" } = _tc, restProps = __objRest(_tc, ["className", "size"]);
+  function CalendarHeaderCell2(_wc, ref) {
+    var _xc = _wc, { className, size = "sm" } = _xc, restProps = __objRest(_xc, ["className", "size"]);
     const dataProperties = toDataProperties({ size });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarHeaderCell,
@@ -22368,7 +22434,7 @@ const useDatePickerState = ({ date: date2, setDate, minDate = null, maxDate = nu
     maxDateZdt
   }), [errorText, isInvalid, localDate, onBlur, onChange, maxDateZdt, minDateZdt]);
 };
-const CLASS_NAME$4 = "Layer__caobfb";
+const CLASS_NAME$3 = "Layer__caobfb";
 const AccountFormBox = ({
   account,
   value,
@@ -22401,8 +22467,8 @@ const AccountFormBox = ({
       onChange(__spreadProps(__spreadValues({}, value), { isDateInvalid }));
     }
   }, [isDateInvalid, onChange, value]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, dataProps), { className: CLASS_NAME$4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$4}__icon-col`, children: ((_a = account.institution) == null ? void 0 : _a.logo) != void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({}, dataProps), { className: CLASS_NAME$3, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$3}__icon-col`, children: ((_a = account.institution) == null ? void 0 : _a.logo) != void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         width: 32,
@@ -22411,13 +22477,13 @@ const AccountFormBox = ({
         alt: ((_b = account.institution) == null ? void 0 : _b.name) ? (_c = account.institution) == null ? void 0 : _c.name : account.external_account_name
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(InstitutionIcon, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col__details`, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col__name`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col__details`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col__name`, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
-              className: `${CLASS_NAME$4}__details-col__name__institution-name`,
+              className: `${CLASS_NAME$3}__details-col__name__institution-name`,
               size: TextSize.sm,
               children: (_d = account.institution) == null ? void 0 : _d.name
             }
@@ -22425,7 +22491,7 @@ const AccountFormBox = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             Text,
             {
-              className: `${CLASS_NAME$4}__details-col__name__account-name`,
+              className: `${CLASS_NAME$3}__details-col__name__account-name`,
               size: TextSize.sm,
               children: account.external_account_name
             }
@@ -22436,7 +22502,7 @@ const AccountFormBox = ({
           account.mask
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$4}__details-col__inputs`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${CLASS_NAME$3}__details-col__inputs`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { label: "Opening date", children: /* @__PURE__ */ jsxRuntime.jsx(
           DatePicker,
           {
@@ -22465,7 +22531,7 @@ const AccountFormBox = ({
       ] }),
       errors.includes("API_ERROR") && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "An error occurred while saving data. You will have an opportunity to try again later." })
     ] }),
-    !disableConfirmExclude && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$4}__confirm-col`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    !disableConfirmExclude && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$3}__confirm-col`, children: /* @__PURE__ */ jsxRuntime.jsx(
       Checkbox,
       {
         size: "lg",
@@ -22474,7 +22540,7 @@ const AccountFormBox = ({
         "aria-label": "Confirm Account Inclusion"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$4}__success-banner`, children: /* @__PURE__ */ jsxRuntime.jsx(CheckCircle, { size: 36 }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${CLASS_NAME$3}__success-banner`, children: /* @__PURE__ */ jsxRuntime.jsx(CheckCircle, { size: 36 }) })
   ] }));
 };
 function buildKey$z({
@@ -23350,8 +23416,8 @@ const useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     refetch
   };
 };
-const BarChart2 = (_uc) => {
-  var _vc = _uc, { size = 12 } = _vc, props = __objRest(_vc, ["size"]);
+const BarChart2 = (_yc) => {
+  var _zc = _yc, { size = 12 } = _zc, props = __objRest(_zc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -24141,11 +24207,11 @@ const ProfitAndLossChart = ({
     isSyncing && !hasNonZeroData ? /* @__PURE__ */ jsxRuntime.jsx(ChartStateCard, {}) : null
   ] });
 };
-const BackButton = (_wc) => {
-  var _xc = _wc, {
+const BackButton = (_Ac) => {
+  var _Bc = _Ac, {
     className,
     textOnly = false
-  } = _xc, props = __objRest(_xc, [
+  } = _Bc, props = __objRest(_Bc, [
     "className",
     "textOnly"
   ]);
@@ -24193,8 +24259,8 @@ const TASKS_CHARTS_COLORS = {
   done: "#3B9C63",
   pending: "#DFA000"
 };
-const SortArrows = (_yc) => {
-  var _zc = _yc, { size = 13 } = _zc, props = __objRest(_zc, ["size"]);
+const SortArrows = (_Cc) => {
+  var _Dc = _Cc, { size = 13 } = _Dc, props = __objRest(_Dc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -24859,11 +24925,11 @@ const LedgerAccountsContext = react.createContext({
   fetchMore: () => {
   }
 });
-const CloseButton = (_Ac) => {
-  var _Bc = _Ac, {
+const CloseButton = (_Ec) => {
+  var _Fc = _Ec, {
     className,
     textOnly = false
-  } = _Bc, props = __objRest(_Bc, [
+  } = _Fc, props = __objRest(_Fc, [
     "className",
     "textOnly"
   ]);
@@ -25601,7 +25667,7 @@ const ProfitAndLossDetailReport = ({
     ),
     rowsWithRunningBalance.lines.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pb: "sm", align: "center", className: "Layer__profit-and-loss-detail-report__total-row", children: [
       /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "Layer__profit-and-loss-detail-report__total-label", children: /* @__PURE__ */ jsxRuntime.jsx(Label, { weight: "bold", size: "md", children: "Total" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "Layer__profit-and-loss-detail-report__total-amount", children: /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { bold: true, size: "md", amount: rowsWithRunningBalance.total }) })
+      /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "Layer__profit-and-loss-detail-report__total-amount", children: /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { weight: "bold", size: "md", amount: rowsWithRunningBalance.total }) })
     ] })
   ] }) });
 };
@@ -26758,7 +26824,7 @@ const ProfitAndLossTableComponent = ({
                   {
                     variant: "text",
                     onPress: () => onLineItemClick(lineItem.name, currentBreadcrumbs),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { bold: true, amount: (_a = lineItem.value) != null ? _a : 0 })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { amount: (_a = lineItem.value) != null ? _a : 0, weight: "bold" })
                   }
                 )
               }
@@ -27040,6 +27106,19 @@ const ProfitAndLossReport = ({
     }
   ) }) });
 };
+function calculatePercentageChange(current, previous) {
+  if (current >= 0 && previous < 0 || current < 0 && previous >= 0) {
+    return null;
+  }
+  if (previous === 0) {
+    return current === 0 ? null : 100;
+  }
+  return (current - previous) / Math.abs(previous) * 100;
+}
+function formatPercentageChange(value) {
+  if (value === null) return "";
+  return `${Math.abs(value).toFixed(0)}%`;
+}
 const LIST_ITEM_CLASS_NAME = "Layer__ProfitAndLossSummariesListItem";
 function ProfitAndLossSummariesListItem({
   children,
@@ -27151,24 +27230,49 @@ function ProfitAndLossSummariesHeading({
   const { size = "2xs" } = variants2 != null ? variants2 : {};
   return /* @__PURE__ */ jsxRuntime.jsx(Heading$1, { level: 3, size, slot: "heading", children });
 }
-const CLASS_NAME$3 = "Layer__ProfitAndLossSummariesSummary";
 const CHART_AREA_CLASS_NAME = "Layer__ProfitAndLossSummariesSummaryChartArea";
-const CHART_AREA_EMPTY_FRAME_CLASS_NAME = "Layer__ProfitAndLossSummariesSummaryChartAreaEmptyFrame";
 function ProfitAndLossSummariesSummary({
   label,
   amount,
   isLoading,
+  percentChange,
+  comparisonMonth,
+  isExpense = false,
   slots,
   variants: variants2
 }) {
   const { Chart } = slots != null ? slots : {};
-  const { size = "2xs" } = variants2 != null ? variants2 : {};
-  const dataProperties = toDataProperties({ size });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({ className: CLASS_NAME$3 }, dataProperties), { children: [
-    Chart ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: CHART_AREA_CLASS_NAME, children: Chart }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: CHART_AREA_EMPTY_FRAME_CLASS_NAME }),
-    /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesHeading, { variants: variants2, children: label }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader, { height: "20px" }) : /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { slot: "amount", amount, size: "lg", bold: true })
-  ] }));
+  const showPercentChange = percentChange !== void 0 && percentChange !== null && comparisonMonth;
+  const isGoodChange = showPercentChange && (isExpense ? percentChange < 0 : percentChange >= 0);
+  const arrow = showPercentChange && percentChange >= 0 ? "↑" : "↓";
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [
+    Chart && /* @__PURE__ */ jsxRuntime.jsx(
+      HStack,
+      {
+        align: "center",
+        justify: "center",
+        className: CHART_AREA_CLASS_NAME,
+        children: Chart
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", fluid: true, pi: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", fluid: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesHeading, { variants: variants2, children: label }),
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader, { height: "20px" }) : /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { slot: "amount", amount, size: "lg", weight: "bold" })
+      ] }),
+      showPercentChange && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", align: "end", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "3xs", align: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", weight: "bold", status: isGoodChange ? "success" : void 0, children: arrow }),
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", weight: "normal", status: isGoodChange ? "success" : void 0, children: formatPercentageChange(percentChange != null ? percentChange : null) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Span, { size: "xs", variant: "subtle", noWrap: true, children: [
+          "vs.",
+          " ",
+          comparisonMonth || ""
+        ] })
+      ] })
+    ] })
+  ] });
 }
 const CLASS_NAME$2 = "Layer__TransactionsToReview";
 function TransactionsToReview({
@@ -27275,6 +27379,14 @@ function Internal_ProfitAndLossSummaries({
     setSidebarScope,
     sidebarScope
   } = react.useContext(ProfitAndLossContext);
+  const { startDate, endDate: _endDate } = useGlobalDateRange({ displayMode: "month" });
+  const previousMonthStart = dateFns.sub(startDate, { months: 1 });
+  const { data: previousData } = useProfitAndLossSummaries({
+    startYear: previousMonthStart.getFullYear(),
+    startMonth: previousMonthStart.getMonth() + 1,
+    endYear: previousMonthStart.getFullYear(),
+    endMonth: previousMonthStart.getMonth() + 1
+  });
   const { revenueChartData, expensesChartData } = react.useMemo(
     () => ({
       revenueChartData: toMiniChartData({ scope: "revenue", data }),
@@ -27282,7 +27394,35 @@ function Internal_ProfitAndLossSummaries({
     }),
     [data]
   );
-  const effectiveData = data != null ? data : { income: { value: 0 }, netProfit: 0 };
+  const effectiveData = react.useMemo(
+    () => data != null ? data : { income: { value: 0 }, netProfit: 0 },
+    [data]
+  );
+  const comparisonData = react.useMemo(() => {
+    var _a2, _b2, _c2, _d2, _e, _f, _g;
+    const previousMonthData = (_a2 = previousData == null ? void 0 : previousData.months) == null ? void 0 : _a2[0];
+    if (!previousMonthData) {
+      return null;
+    }
+    const currentRevenue = (_b2 = effectiveData.income.value) != null ? _b2 : 0;
+    const previousRevenue = (_c2 = previousMonthData.income) != null ? _c2 : 0;
+    const currentExpenses = ((_d2 = effectiveData.income.value) != null ? _d2 : 0) - effectiveData.netProfit;
+    const previousExpenses = (_e = previousMonthData.totalExpenses) != null ? _e : 0;
+    const currentNetProfit = (_f = effectiveData.netProfit) != null ? _f : 0;
+    const previousNetProfit = (_g = previousMonthData.netProfit) != null ? _g : 0;
+    return {
+      revenuePercentChange: calculatePercentageChange(currentRevenue, previousRevenue),
+      expensesPercentChange: calculatePercentageChange(currentExpenses, previousExpenses),
+      netProfitPercentChange: calculatePercentageChange(currentNetProfit, previousNetProfit),
+      comparisonMonth: dateFns.format(previousMonthStart, "MMM")
+    };
+  }, [previousData, effectiveData, previousMonthStart]);
+  const {
+    revenuePercentChange = null,
+    expensesPercentChange = null,
+    netProfitPercentChange = null,
+    comparisonMonth = null
+  } = comparisonData != null ? comparisonData : {};
   const { unstable_AdditionalListItems = [] } = slots != null ? slots : {};
   const listItemCount = unstable_AdditionalListItems.length + 3;
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: SECTION_CLASS_NAMES, children: /* @__PURE__ */ jsxRuntime.jsxs(ProfitAndLossSummariesList, { itemCount: listItemCount, children: [
@@ -27297,6 +27437,8 @@ function Internal_ProfitAndLossSummaries({
             label: (stringOverrides == null ? void 0 : stringOverrides.revenueLabel) || revenueLabel || "Revenue",
             amount: (_a = effectiveData.income.value) != null ? _a : 0,
             isLoading,
+            percentChange: revenuePercentChange,
+            comparisonMonth: comparisonMonth != null ? comparisonMonth : void 0,
             slots: {
               Chart: /* @__PURE__ */ jsxRuntime.jsx(
                 ProfitAndLossSummariesMiniChart,
@@ -27323,6 +27465,9 @@ function Internal_ProfitAndLossSummaries({
             label: (stringOverrides == null ? void 0 : stringOverrides.expensesLabel) || "Expenses",
             amount: ((_c = (_b = effectiveData == null ? void 0 : effectiveData.income) == null ? void 0 : _b.value) != null ? _c : 0) - effectiveData.netProfit,
             isLoading,
+            percentChange: expensesPercentChange,
+            comparisonMonth: comparisonMonth != null ? comparisonMonth : void 0,
+            isExpense: true,
             slots: {
               Chart: /* @__PURE__ */ jsxRuntime.jsx(
                 ProfitAndLossSummariesMiniChart,
@@ -27344,16 +27489,18 @@ function Internal_ProfitAndLossSummaries({
         label: (stringOverrides == null ? void 0 : stringOverrides.netProfitLabel) || "Net Profit",
         amount: (_d = data == null ? void 0 : data.netProfit) != null ? _d : 0,
         variants: variants2,
-        isLoading
+        isLoading,
+        percentChange: netProfitPercentChange,
+        comparisonMonth: comparisonMonth != null ? comparisonMonth : void 0
       }
     ) }),
     unstable_AdditionalListItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesListItem, { children: item }, index2))
   ] }) });
 }
-function ProfitAndLossSummaries(_Cc) {
-  var _Dc = _Cc, {
+function ProfitAndLossSummaries(_Gc) {
+  var _Hc = _Gc, {
     onTransactionsToReviewClick
-  } = _Dc, restProps = __objRest(_Dc, [
+  } = _Hc, restProps = __objRest(_Hc, [
     "onTransactionsToReviewClick"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -27553,8 +27700,8 @@ function BalanceSheetDownloadButton({
     /* @__PURE__ */ jsxRuntime.jsx(InvisibleDownload, { ref: invisibleDownloadRef })
   ] });
 }
-const Collapse = (_Ec) => {
-  var props = __objRest(_Ec, []);
+const Collapse = (_Ic) => {
+  var props = __objRest(_Ic, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -27587,8 +27734,8 @@ const Collapse = (_Ec) => {
     })
   );
 };
-const Expand = (_Fc) => {
-  var props = __objRest(_Fc, []);
+const Expand = (_Jc) => {
+  var props = __objRest(_Jc, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -29236,8 +29383,8 @@ const ChartOfAccountsContext = react.createContext(
     }
   }
 );
-const Plus = (_Gc) => {
-  var _Hc = _Gc, { size = 14 } = _Hc, props = __objRest(_Hc, ["size"]);
+const Plus = (_Kc) => {
+  var _Lc = _Kc, { size = 14 } = _Lc, props = __objRest(_Lc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -29604,8 +29751,8 @@ var LedgerAccountNodeType = /* @__PURE__ */ ((LedgerAccountNodeType2) => {
   LedgerAccountNodeType2["Parent"] = "Parent";
   return LedgerAccountNodeType2;
 })(LedgerAccountNodeType || {});
-const Edit2 = (_Ic) => {
-  var _Jc = _Ic, { size = 18 } = _Jc, props = __objRest(_Jc, ["size"]);
+const Edit2 = (_Mc) => {
+  var _Nc = _Mc, { size = 18 } = _Nc, props = __objRest(_Nc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -32286,8 +32433,8 @@ function usePaginatedList(list, pageSize) {
     reset
   };
 }
-const SmileIcon = (_Kc) => {
-  var _Lc = _Kc, { size = 12 } = _Lc, props = __objRest(_Lc, ["size"]);
+const SmileIcon = (_Oc) => {
+  var _Pc = _Oc, { size = 12 } = _Pc, props = __objRest(_Pc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -33132,8 +33279,8 @@ const useBookkeepingYearsStatus = () => {
     isLoading
   };
 };
-const ArrowRightCircle = (_Mc) => {
-  var _Nc = _Mc, { size = 18 } = _Nc, props = __objRest(_Nc, ["size"]);
+const ArrowRightCircle = (_Qc) => {
+  var _Rc = _Qc, { size = 18 } = _Rc, props = __objRest(_Rc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35181,12 +35328,12 @@ const FormSection = ({ children, title }) => {
     children
   ] });
 };
-const PhoneInput = (_Oc) => {
-  var _Pc = _Oc, {
+const PhoneInput = (_Sc) => {
+  var _Tc = _Sc, {
     value,
     onChange,
     placeholder = "Phone number"
-  } = _Pc, props = __objRest(_Pc, [
+  } = _Tc, props = __objRest(_Tc, [
     "value",
     "onChange",
     "placeholder"
@@ -35478,8 +35625,8 @@ const SummaryStep = ({ onNext, title = defaultTitle$1, description = defaultDesc
     /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: onNext, children: nextBtnText })
   ] });
 };
-const Document = (_Qc) => {
-  var _Rc = _Qc, { size = 20 } = _Rc, props = __objRest(_Rc, ["size"]);
+const Document = (_Uc) => {
+  var _Vc = _Uc, { size = 20 } = _Vc, props = __objRest(_Vc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35584,8 +35731,8 @@ const Document = (_Qc) => {
     })
   );
 };
-const TrendingUp = (_Sc) => {
-  var _Tc = _Sc, { size = 20 } = _Tc, props = __objRest(_Tc, ["size"]);
+const TrendingUp = (_Wc) => {
+  var _Xc = _Wc, { size = 20 } = _Xc, props = __objRest(_Xc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35842,8 +35989,8 @@ const PlatformOnboarding = ({ onComplete }) => {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__platform-onboarding-layout__footer", children: renderStepFooter() })
   ] }) });
 };
-const CoffeeIcon = (_Uc) => {
-  var _Vc = _Uc, { size = 11 } = _Vc, props = __objRest(_Vc, ["size"]);
+const CoffeeIcon = (_Yc) => {
+  var _Zc = _Yc, { size = 11 } = _Zc, props = __objRest(_Zc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -35914,8 +36061,8 @@ const CoffeeIcon = (_Uc) => {
     })
   );
 };
-const Link$1 = (_Wc) => {
-  var _Xc = _Wc, {
+const Link$1 = (__c) => {
+  var _$c = __c, {
     className,
     children,
     variant = ButtonVariant.primary,
@@ -35925,7 +36072,7 @@ const Link$1 = (_Wc) => {
     iconAsPrimary = false,
     justify = "center",
     fullWidth
-  } = _Xc, props = __objRest(_Xc, [
+  } = _$c, props = __objRest(_$c, [
     "className",
     "children",
     "variant",
@@ -36017,8 +36164,8 @@ const BookkeepingUpsellBar = ({
     onClick ? /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: ButtonVariant.secondary, onClick, children: "Schedule a demo" }) : href ? /* @__PURE__ */ jsxRuntime.jsx(Link$1, { href, target: "_blank", variant: ButtonVariant.secondary, children: "Schedule a demo" }) : null
   ] });
 };
-const ChevronRightFill = (_Yc) => {
-  var _Zc = _Yc, { size = 18 } = _Zc, props = __objRest(_Zc, ["size"]);
+const ChevronRightFill = (_ad) => {
+  var _bd = _ad, { size = 18 } = _bd, props = __objRest(_bd, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -39300,8 +39447,8 @@ const getClassnameForSubComponent = (className, suffix) => {
 };
 const METER_CLASS_NAME = "Layer__Meter";
 const Meter = react.forwardRef(
-  function Meter2(__c, ref) {
-    var _$c = __c, { className, label, meterOnly } = _$c, restProps = __objRest(_$c, ["className", "label", "meterOnly"]);
+  function Meter2(_cd, ref) {
+    var _dd = _cd, { className, label, meterOnly } = _dd, restProps = __objRest(_dd, ["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 }),
@@ -39416,11 +39563,11 @@ const ProfitAndLossView = (props) => {
   const containerRef = react.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { name: COMPONENT_NAME$3, ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLoss, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossPanel, __spreadValues({ containerRef }, props)) }) });
 };
-const ProfitAndLossPanel = (_ad) => {
-  var _bd = _ad, {
+const ProfitAndLossPanel = (_ed) => {
+  var _fd = _ed, {
     containerRef,
     stringOverrides
-  } = _bd, props = __objRest(_bd, [
+  } = _fd, props = __objRest(_fd, [
     "containerRef",
     "stringOverrides"
   ]);
@@ -39683,13 +39830,13 @@ function ExpandableDataTable({
   );
 }
 const UNIFIED_REPORT_TAG_KEY = "#unified-report";
-function buildKey$7(_cd) {
-  var _dd = _cd, {
+function buildKey$7(_gd) {
+  var _hd = _gd, {
     access_token: accessToken,
     apiUrl,
     businessId,
     report
-  } = _dd, dateParams = __objRest(_dd, [
+  } = _hd, dateParams = __objRest(_hd, [
     "access_token",
     "apiUrl",
     "businessId",
@@ -39705,8 +39852,8 @@ function buildKey$7(_cd) {
     }, dateParams);
   }
 }
-const getUnifiedReport = get$1((_ed) => {
-  var _fd = _ed, { businessId, report } = _fd, dateParams = __objRest(_fd, ["businessId", "report"]);
+const getUnifiedReport = get$1((_id) => {
+  var _jd = _id, { businessId, report } = _jd, dateParams = __objRest(_jd, ["businessId", "report"]);
   const parameters = toDefinedSearchParameters(__spreadValues({}, dateParams));
   return `/v1/businesses/${businessId}/reports/unified/${report}?${parameters}`;
 });
@@ -39735,8 +39882,8 @@ class UnifiedReportSWRResponse {
     return this.swrResponse.mutate;
   }
 }
-function useUnifiedReport(_gd) {
-  var _hd = _gd, { report } = _hd, dateParams = __objRest(_hd, ["report"]);
+function useUnifiedReport(_kd) {
+  var _ld = _kd, { report } = _ld, dateParams = __objRest(_ld, ["report"]);
   const { data: auth } = useAuth();
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
@@ -41266,19 +41413,19 @@ const VendorsProvider = ({ children }) => {
   const vendors = useVendors();
   return /* @__PURE__ */ jsxRuntime.jsx(VendorsContext.Provider, { value: vendors, children });
 };
-const SelectVendor = (_id) => {
-  var _jd = _id, { withContext = true } = _jd, props = __objRest(_jd, ["withContext"]);
+const SelectVendor = (_md) => {
+  var _nd = _md, { withContext = true } = _nd, props = __objRest(_nd, ["withContext"]);
   if (withContext) {
     return /* @__PURE__ */ jsxRuntime.jsx(VendorsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props)) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(SelectVendorContent, __spreadValues({}, props));
 };
-const SelectVendorContent = (_kd) => {
-  var _ld = _kd, {
+const SelectVendorContent = (_od) => {
+  var _pd = _od, {
     value,
     onChange,
     placeholder = "Select vendor"
-  } = _ld, props = __objRest(_ld, [
+  } = _pd, props = __objRest(_pd, [
     "value",
     "onChange",
     "placeholder"
@@ -42045,8 +42192,8 @@ const BillsTableWithPanel = ({
     }
   );
 };
-const Bills = (_md) => {
-  var _nd = _md, { context = true } = _nd, props = __objRest(_nd, ["context"]);
+const Bills = (_qd) => {
+  var _rd = _qd, { context = true } = _rd, props = __objRest(_rd, ["context"]);
   if (context) {
     return /* @__PURE__ */ jsxRuntime.jsx(BillsProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BillsContent, __spreadValues({}, props)) });
   }
@@ -42104,8 +42251,8 @@ const getTimezoneDisplay = (date2) => {
 };
 const LINK_CLASS_NAME = "Layer__UI__Link";
 const Link = react.forwardRef(
-  function Link2(_od, ref) {
-    var _pd = _od, {
+  function Link2(_sd, ref) {
+    var _td = _sd, {
       children,
       size = "md",
       ellipsis,
@@ -42114,7 +42261,7 @@ const Link = react.forwardRef(
       href,
       target,
       rel
-    } = _pd, restProps = __objRest(_pd, [
+    } = _td, restProps = __objRest(_td, [
       "children",
       "size",
       "ellipsis",
@@ -42617,8 +42764,10 @@ const VehicleSchema = effect.Schema.Struct({
     effect.Schema.propertySignature(effect.Schema.NullishOr(effect.Schema.String)),
     effect.Schema.fromKey("external_id")
   ),
-  make: effect.Schema.String,
-  model: effect.Schema.String,
+  makeAndModel: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("make_and_model")
+  ),
   year: effect.Schema.Number,
   licensePlate: effect.pipe(
     effect.Schema.propertySignature(effect.Schema.NullishOr(effect.Schema.String)),
@@ -42640,16 +42789,17 @@ const VehicleSchema = effect.Schema.Struct({
   )
 });
 effect.Schema.Struct({
-  make: effect.Schema.String,
-  model: effect.Schema.String,
+  makeAndModel: effect.Schema.String,
   year: effect.Schema.Number,
   licensePlate: effect.Schema.String,
   vin: effect.Schema.String,
   description: effect.Schema.String
 });
 const UpsertVehicleSchema = effect.Schema.Struct({
-  make: effect.Schema.String,
-  model: effect.Schema.String,
+  makeAndModel: effect.pipe(
+    effect.Schema.propertySignature(effect.Schema.String),
+    effect.Schema.fromKey("make_and_model")
+  ),
   year: effect.Schema.Number,
   licensePlate: effect.pipe(
     effect.Schema.propertySignature(effect.Schema.NullishOr(effect.Schema.String)),
@@ -42891,9 +43041,6 @@ const getTripFormDefaultValues = (trip) => {
 const validateTripForm = ({ trip }) => {
   const { vehicle, tripDate, distance, purpose } = trip;
   const errors = [];
-  if (vehicle === null) {
-    errors.push({ vehicle: "Vehicle is a required field." });
-  }
   if (tripDate === null) {
     errors.push({ tripDate: "Trip date is a required field." });
   }
@@ -42906,6 +43053,9 @@ const validateTripForm = ({ trip }) => {
   if (!purpose) {
     errors.push({ purpose: "Purpose is a required field." });
   }
+  if (vehicle === null) {
+    errors.push({ vehicle: "Vehicle is a required field." });
+  }
   return errors.length > 0 ? errors : null;
 };
 const convertTripFormToUpsertTrip = (form) => {
@@ -43204,8 +43354,7 @@ const useTripForm = (props) => {
   );
 };
 const formatDistance = (distance) => {
-  const distanceNum = parseFloat(effect.BigDecimal.unsafeToNumber(distance).toString());
-  return `${distanceNum.toFixed(1)} mi`;
+  return `${effect.BigDecimal.format(distance)} mi`;
 };
 const getPurposeLabel = (purpose) => {
   var _a;
@@ -43318,7 +43467,7 @@ function useListVehicles() {
   );
   return new ListVehiclesSWRResponse(response);
 }
-const getVehicleDisplayName = (vehicle) => [vehicle.year, vehicle.make, vehicle.model].join(" ");
+const getVehicleDisplayName = (vehicle) => `${vehicle.year} ${vehicle.makeAndModel}`;
 class VehicleAsOption {
   constructor(vehicle) {
     __publicField(this, "internalVehicle");
@@ -43433,33 +43582,88 @@ const TripForm = (props) => {
         ) });
       }
     } }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: "vehicle", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
-      VehicleSelector,
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "tripDate", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormDateField,
       {
-        selectedVehicle: field.state.value,
-        onSelectedVehicleChange: field.handleChange,
+        label: "Trip date",
+        inline: true,
         isReadOnly,
+        className: `${TRIP_FORM_FIELD_CSS_PREFIX}__TripDate`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "distance", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormBigDecimalField,
+      {
+        label: "Distance (miles)",
         inline: true,
-        containerClassName: `${TRIP_FORM_FIELD_CSS_PREFIX}__Vehicle`
+        isReadOnly,
+        maxDecimalPlaces: 2,
+        placeholder: "Enter distance",
+        className: `${TRIP_FORM_FIELD_CSS_PREFIX}__Distance`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "startAddress", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormTextField,
+      {
+        label: "Start address",
+        inline: true,
+        isReadOnly,
+        placeholder: "Enter address",
+        className: `${TRIP_FORM_FIELD_CSS_PREFIX}__StartAddress`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "endAddress", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormTextField,
+      {
+        label: "End address",
+        inline: true,
+        isReadOnly,
+        placeholder: "Enter address",
+        className: `${TRIP_FORM_FIELD_CSS_PREFIX}__EndAddress`
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "tripDate", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormDateField, { label: "Trip date", inline: true, className: `${TRIP_FORM_FIELD_CSS_PREFIX}__TripDate`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "distance", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormBigDecimalField, { label: "Distance (miles)", inline: true, className: `${TRIP_FORM_FIELD_CSS_PREFIX}__Distance`, isReadOnly, maxDecimalPlaces: 1 }) }),
     /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: "purpose", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
       TripPurposeComboBox,
       {
-        className: `${TRIP_FORM_FIELD_CSS_PREFIX}__Purpose`,
         value: field.state.value,
         onValueChange: (value) => field.handleChange(value != null ? value : TripPurpose.Unreviewed),
-        isReadOnly
+        isReadOnly,
+        className: `${TRIP_FORM_FIELD_CSS_PREFIX}__Purpose`
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "startAddress", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextField, { label: "Start address", inline: true, className: `${TRIP_FORM_FIELD_CSS_PREFIX}__StartAddress`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "endAddress", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextField, { label: "End address", inline: true, className: `${TRIP_FORM_FIELD_CSS_PREFIX}__EndAddress`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "description", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextAreaField, { label: "Description", inline: true, className: `${TRIP_FORM_FIELD_CSS_PREFIX}__Description`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(VStack, { justify: "end", className: `${TRIP_FORM_CSS_PREFIX}__Submit`, children: /* @__PURE__ */ jsxRuntime.jsx(form.Subscribe, { selector: (state) => [state.canSubmit, state.isSubmitting], children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", isDisabled: !canSubmit, isPending: isSubmitting, onPress: () => {
-      void form.handleSubmit();
-    }, children: "Save Trip" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "description", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormTextAreaField,
+      {
+        label: "Description",
+        inline: true,
+        isReadOnly,
+        placeholder: "Add description",
+        className: `${TRIP_FORM_FIELD_CSS_PREFIX}__Description`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: "vehicle", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      VehicleSelector,
+      {
+        selectedVehicle: field.state.value,
+        onSelectedVehicleChange: field.handleChange,
+        isReadOnly,
+        inline: true,
+        placeholder: "Add vehicle",
+        containerClassName: `${TRIP_FORM_FIELD_CSS_PREFIX}__Vehicle`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(VStack, { justify: "end", className: `${TRIP_FORM_CSS_PREFIX}__Submit`, children: /* @__PURE__ */ jsxRuntime.jsx(form.Subscribe, { selector: (state) => [state.canSubmit, state.isSubmitting], children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "submit",
+        isDisabled: !canSubmit,
+        isPending: isSubmitting,
+        onPress: () => {
+          void form.handleSubmit();
+        },
+        children: "Save Trip"
+      }
+    ) }) })
   ] });
 };
 const TripsTableHeaderMenu = () => {
@@ -43691,32 +43895,40 @@ const TripsTable = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen: isTripDrawerOpen, onOpenChange: setIsTripDrawerOpen, "aria-label": selectedTrip ? "Trip details" : "Record trip", children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pb: "lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(VStack, { pi: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
-        ModalTitleWithClose,
-        {
-          heading: /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "md", children: selectedTrip ? "Trip details" : "Record trip" }),
-          onClose: close2
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        TripForm,
-        {
-          trip: selectedTrip != null ? selectedTrip : void 0,
-          onSuccess: () => {
-            setSelectedTrip(null);
-            close2();
-          }
-        }
-      )
-    ] }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Drawer,
+      {
+        isOpen: isTripDrawerOpen,
+        onOpenChange: setIsTripDrawerOpen,
+        isDismissable: true,
+        "aria-label": selectedTrip ? "Trip details" : "Record trip",
+        children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pb: "lg", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(VStack, { pi: "md", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ModalTitleWithClose,
+            {
+              heading: /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "md", children: selectedTrip ? "Trip details" : "Record trip" }),
+              onClose: close2
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TripForm,
+            {
+              trip: selectedTrip != null ? selectedTrip : void 0,
+              onSuccess: () => {
+                setSelectedTrip(null);
+                close2();
+              }
+            }
+          )
+        ] })
+      }
+    )
   ] });
 };
 const getVehicleFormDefaultValues = (vehicle) => {
   if (vehicle) {
     return {
-      make: vehicle.make,
-      model: vehicle.model,
+      makeAndModel: vehicle.makeAndModel,
       year: vehicle.year,
       licensePlate: vehicle.licensePlate || "",
       vin: vehicle.vin || "",
@@ -43724,33 +43936,31 @@ const getVehicleFormDefaultValues = (vehicle) => {
     };
   }
   return {
-    make: "",
-    model: "",
-    year: (/* @__PURE__ */ new Date()).getFullYear(),
+    makeAndModel: "",
+    year: Number.NaN,
     licensePlate: "",
     vin: "",
     description: ""
   };
 };
 const validateVehicleForm = ({ vehicle }) => {
-  const { make, model, year } = vehicle;
+  const { makeAndModel, year } = vehicle;
   const errors = [];
-  if (!make.trim()) {
-    errors.push({ make: "Make is a required field." });
+  if (!makeAndModel.trim()) {
+    errors.push({ makeAndModel: "Make and model is a required field." });
   }
-  if (!model.trim()) {
-    errors.push({ model: "Model is a required field." });
+  if (Number.isNaN(year)) {
+    errors.push({ year: "Year is a required field." });
   }
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  if (year < 1900 || year > currentYear + 1) {
+  if (!Number.isNaN(year) && (year < 1900 || year > currentYear + 1)) {
     errors.push({ year: `Year must be between 1900 and ${currentYear + 1}.` });
   }
   return errors.length > 0 ? errors : null;
 };
 const convertVehicleFormToUpsertVehicle = (form) => {
   return {
-    make: form.make.trim(),
-    model: form.model.trim(),
+    makeAndModel: form.makeAndModel.trim(),
     year: form.year,
     licensePlate: form.licensePlate.trim() || null,
     vin: form.vin.trim() || null,
@@ -43940,20 +44150,73 @@ const VehicleForm = (props) => {
         ) });
       }
     } }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "make", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextField, { label: "Make", inline: true, className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Make`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "model", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextField, { label: "Model", inline: true, className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Model`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "year", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormNumberField, { maxValue: 9999, label: "Year", inline: true, className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Year`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "licensePlate", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextField, { label: "License plate", inline: true, className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__LicensePlate`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "vin", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextField, { label: "VIN", inline: true, className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Vin`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "description", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(field.FormTextAreaField, { label: "Description", inline: true, className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Description`, isReadOnly }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(VStack, { justify: "end", className: `${VEHICLE_FORM_CSS_PREFIX}__Submit`, children: /* @__PURE__ */ jsxRuntime.jsx(form.Subscribe, { selector: (state) => [state.canSubmit, state.isSubmitting], children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", isDisabled: !canSubmit, isPending: isSubmitting, onPress: () => {
-      void form.handleSubmit();
-    }, children: "Save Vehicle" }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "makeAndModel", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormTextField,
+      {
+        label: "Make and model",
+        inline: true,
+        isReadOnly,
+        placeholder: "Enter vehicle make and model",
+        className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__MakeAndModel`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "year", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormNumberField,
+      {
+        maxValue: 9999,
+        label: "Year",
+        inline: true,
+        isReadOnly,
+        placeholder: "Enter vehicle year",
+        className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Year`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "licensePlate", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormTextField,
+      {
+        label: "License plate",
+        inline: true,
+        isReadOnly,
+        placeholder: "Enter license plate",
+        className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__LicensePlate`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "vin", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormTextField,
+      {
+        label: "VIN",
+        inline: true,
+        isReadOnly,
+        placeholder: "Enter VIN",
+        className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Vin`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.AppField, { name: "description", children: (field) => /* @__PURE__ */ jsxRuntime.jsx(
+      field.FormTextAreaField,
+      {
+        label: "Description",
+        inline: true,
+        isReadOnly,
+        placeholder: "Add description",
+        className: `${VEHICLE_FORM_FIELD_CSS_PREFIX}__Description`
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(VStack, { justify: "end", className: `${VEHICLE_FORM_CSS_PREFIX}__Submit`, children: /* @__PURE__ */ jsxRuntime.jsx(form.Subscribe, { selector: (state) => [state.canSubmit, state.isSubmitting], children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "submit",
+        isDisabled: !canSubmit,
+        isPending: isSubmitting,
+        onPress: () => {
+          void form.handleSubmit();
+        },
+        children: "Save Vehicle"
+      }
+    ) }) })
   ] });
 };
 const VEHICLE_CARD_FIELDS = [
-  { label: "Make", key: "make" },
-  { label: "Model", key: "model" },
+  { label: "Make and model", key: "makeAndModel" },
   { label: "Year", key: "year" },
   { label: "License plate", key: "licensePlate" },
   { label: "VIN", key: "vin" },
@@ -44535,6 +44798,20 @@ const BusinessProvider = ({
 }) => {
   errorHandler.setOnError(onError);
   const colors = buildColorsPalette(theme);
+  const eventCallbacksRef = react.useRef(eventCallbacks);
+  react.useEffect(() => {
+    eventCallbacksRef.current = eventCallbacks;
+  }, [eventCallbacks]);
+  const stableEventCallbacks = react.useMemo(() => ({
+    onTransactionCategorized: () => {
+      var _a, _b;
+      (_b = (_a = eventCallbacksRef.current) == null ? void 0 : _a.onTransactionCategorized) == null ? void 0 : _b.call(_a);
+    },
+    onTransactionsFetched: () => {
+      var _a, _b;
+      (_b = (_a = eventCallbacksRef.current) == null ? void 0 : _a.onTransactionsFetched) == null ? void 0 : _b.call(_a);
+    }
+  }), []);
   const [state, dispatch] = react.useReducer(reducer, {
     businessId,
     business: void 0,
@@ -44679,7 +44956,7 @@ const BusinessProvider = ({
         readTimestamps,
         expireDataCaches: resetCaches,
         hasBeenTouched,
-        eventCallbacks,
+        eventCallbacks: stableEventCallbacks,
         accountingConfiguration,
         dateRange
       }),
@@ -44690,14 +44967,14 @@ const BusinessProvider = ({
     }
   );
 };
-const LayerProvider = (_qd) => {
-  var _rd = _qd, {
+const LayerProvider = (_ud) => {
+  var _vd = _ud, {
     appId,
     appSecret,
     businessAccessToken,
     environment,
     usePlaidSandbox
-  } = _rd, restProps = __objRest(_rd, [
+  } = _vd, restProps = __objRest(_vd, [
     "appId",
     "appSecret",
     "businessAccessToken",