@layerfi/components 0.1.114-alpha.1 → 0.1.114-alpha.2

package/dist/esm/index.mjs

@@ -53,7 +53,7 @@ var __async = (__this, __arguments, generator) => {
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useState, useEffect, forwardRef, isValidElement, cloneElement, useRef, useCallback, useLayoutEffect, useImperativeHandle, useId, createElement, Component, Children, Fragment as Fragment$1, useReducer } from "react";
 import { usePlaidLink } from "react-plaid-link";
-import { formatISO, differenceInDays, endOfDay, startOfMonth, endOfMonth, startOfYear, min, endOfYear, max, isWithinInterval, parseISO, differenceInCalendarMonths, format, isValid, subMonths, getYear, getMonth, subYears, sub, differenceInMonths, add, startOfDay, endOfToday, isEqual, addYears, subQuarters, addQuarters, endOfQuarter, startOfQuarter, addMonths, set, startOfToday, endOfYesterday, formatDate as formatDate$1 } from "date-fns";
+import { formatISO, differenceInDays, endOfDay, startOfMonth, endOfMonth, min, max, isWithinInterval, parseISO, differenceInCalendarMonths, format, startOfYear, isValid, subMonths, getYear, getMonth, subYears, differenceInCalendarYears, sub, differenceInMonths, add, startOfDay, endOfToday, isEqual, addYears, endOfYear, subQuarters, addQuarters, endOfQuarter, startOfQuarter, addMonths, set, startOfToday, endOfYesterday, formatDate as formatDate$1 } from "date-fns";
 import { fromDate, getLocalTimeZone, CalendarDate, ZonedDateTime, toCalendarDate, today } from "@internationalized/date";
 import useSWR, { useSWRConfig, SWRConfig } from "swr";
 import { createStore, useStore } from "zustand";
@@ -65,10 +65,11 @@ import { Schema, pipe, BigDecimal, Option, Effect } from "effect";
 import useSWRInfinite from "swr/infinite";
 import { debounce, uniqBy, merge, uniqueId } from "lodash-es";
 import useSWRMutation from "swr/mutation";
-import { Button as Button$2, Menu as Menu$1, MenuItem as MenuItem$2, Header as Header$3, Label as Label$1, Text as Text$1, MenuTrigger, Popover as Popover$1, ModalOverlay as ModalOverlay$1, Modal as Modal$1, Dialog as Dialog$1, Heading as Heading$2, Checkbox as Checkbox$1, Calendar as Calendar$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarCell as CalendarCell$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, DateField as DateField$1, DateInput as DateInput$1, DateSegment as DateSegment$1, DatePicker as DatePicker$2, Group, Form as Form$1, TextField as TextField$1, FieldError as FieldError$1, SearchField as SearchField$1, Input as Input$2, GridListItem, GridList, Switch as Switch$1, TextArea as TextArea$1, DialogTrigger, Table as Table$2, Column as Column$1, Cell as Cell$1, TableHeader as TableHeader$1, TableBody as TableBody$2, Row as Row$1, Link as Link$3, Meter as Meter$1 } from "react-aria-components";
+import { Button as Button$2, Menu as Menu$1, MenuItem as MenuItem$2, Header as Header$3, Label as Label$1, Text as Text$1, MenuTrigger, Popover as Popover$1, ModalOverlay as ModalOverlay$1, Modal as Modal$1, Dialog as Dialog$1, Heading as Heading$2, Checkbox as Checkbox$1, Calendar as Calendar$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarCell as CalendarCell$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, DateField as DateField$1, DateInput as DateInput$1, DateSegment as DateSegment$1, DatePicker as DatePicker$2, Group, Form as Form$1, TextField as TextField$1, FieldError as FieldError$1, GridListItem, GridList, SearchField as SearchField$1, Input as Input$2, Switch as Switch$1, TextArea as TextArea$1, DialogTrigger, Table as Table$2, Column as Column$1, Cell as Cell$1, TableHeader as TableHeader$1, TableBody as TableBody$2, Row as Row$1, Link as Link$3, Meter as Meter$1 } from "react-aria-components";
 import useResizeObserver from "@react-hook/resize-observer";
 import { mergeRefs } from "react-merge-refs";
-import { UploadCloud as UploadCloud$1, LoaderCircle, X as X$1, Minus, Check as Check$1, TriangleAlert, ChevronDown as ChevronDown$1, Search, ChevronLeft as ChevronLeft$1, FileSpreadsheet, FileDownIcon, CopyIcon, RefreshCcw as RefreshCcw$1, ChevronRight as ChevronRight$1, MenuIcon, PencilRuler, SearchX, Trash2, CheckIcon, AlertCircle as AlertCircle$1, List, AlertTriangle, Save as Save$1, Calendar as Calendar$2, Download, Users, Milestone, Video, Clock as Clock$1, Link as Link$4, Plus as Plus$1, HandCoins, Trash as Trash$1, Menu as Menu$2, Send } from "lucide-react";
+import { UploadCloud as UploadCloud$1, LoaderCircle, X as X$1, Minus, Check as Check$1, TriangleAlert, ChevronDown as ChevronDown$1, Layers2Icon, Search, ChevronLeft as ChevronLeft$1, FileSpreadsheet, FileDownIcon, CopyIcon, RefreshCcw as RefreshCcw$1, ChevronRight as ChevronRight$1, MenuIcon, PencilRuler, SearchX, Trash2, CheckIcon, AlertCircle as AlertCircle$1, List, AlertTriangle, Save as Save$1, Calendar as Calendar$2, Download, Users, Milestone, Video, Clock as Clock$1, Link as Link$4, Plus as Plus$1, HandCoins, Trash as Trash$1, Menu as Menu$2, Send } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import CurrencyInput from "react-currency-input-field";
 import Select$1, { components } from "react-select";
 import { v4 } from "uuid";
@@ -110,7 +111,7 @@ const LinkedAccountsContext = createContext({
   setAccountsToAddOpeningBalanceInModal: () => {
   }
 });
-const version = "0.1.114-alpha.1";
+const version = "0.1.114-alpha.2";
 const pkg = {
   version
 };
@@ -1766,25 +1767,17 @@ function clampToPresentOrPast(date, cutoff = endOfDay(/* @__PURE__ */ new Date()
   return min([date, cutoff]);
 }
 const RANGE_MODE_LOOKUP = {
-  dayPicker: {
+  date: {
     getStartDate: ({ startDate }) => startOfMonth(startDate),
     getEndDate: ({ endDate }) => clampToPresentOrPast(endOfDay(endDate))
   },
-  dayRangePicker: {
+  full: {
     getStartDate: ({ startDate }) => startDate,
     getEndDate: ({ endDate }) => clampToPresentOrPast(endOfDay(endDate))
   },
-  monthPicker: {
+  month: {
     getStartDate: ({ startDate }) => startOfMonth(startDate),
     getEndDate: ({ endDate }) => clampToPresentOrPast(endOfMonth(endDate))
-  },
-  monthRangePicker: {
-    getStartDate: ({ startDate }) => startOfMonth(startDate),
-    getEndDate: ({ endDate }) => clampToPresentOrPast(endOfMonth(endDate))
-  },
-  yearPicker: {
-    getStartDate: ({ startDate }) => startOfYear(startDate),
-    getEndDate: ({ endDate }) => clampToPresentOrPast(endOfYear(endDate))
   }
 };
 function withCorrectedRange(fn) {
@@ -1804,28 +1797,18 @@ function buildStore$2() {
       return next;
     };
     const setDate = ({ date }) => {
-      const s = RANGE_MODE_LOOKUP.dayPicker.getStartDate({ startDate: date });
-      const e = RANGE_MODE_LOOKUP.dayPicker.getEndDate({ endDate: date });
+      const s = RANGE_MODE_LOOKUP.date.getStartDate({ startDate: date });
+      const e = RANGE_MODE_LOOKUP.date.getEndDate({ endDate: date });
       return apply({ startDate: s, endDate: e });
     };
     const setDateRange = withCorrectedRange(({ startDate, endDate }) => {
-      const s = RANGE_MODE_LOOKUP.dayRangePicker.getStartDate({ startDate });
-      const e = RANGE_MODE_LOOKUP.dayRangePicker.getEndDate({ endDate });
+      const s = RANGE_MODE_LOOKUP.full.getStartDate({ startDate });
+      const e = RANGE_MODE_LOOKUP.full.getEndDate({ endDate });
       return apply({ startDate: s, endDate: e });
     });
     const setMonth = ({ startDate }) => {
-      const s = RANGE_MODE_LOOKUP.monthPicker.getStartDate({ startDate });
-      const e = RANGE_MODE_LOOKUP.monthPicker.getEndDate({ endDate: startDate });
-      return apply({ startDate: s, endDate: e });
-    };
-    const setMonthRange = withCorrectedRange(({ startDate, endDate }) => {
-      const s = RANGE_MODE_LOOKUP.monthRangePicker.getStartDate({ startDate });
-      const e = RANGE_MODE_LOOKUP.monthRangePicker.getEndDate({ endDate });
-      return apply({ startDate: s, endDate: e });
-    });
-    const setYear = ({ startDate }) => {
-      const s = RANGE_MODE_LOOKUP.yearPicker.getStartDate({ startDate });
-      const e = RANGE_MODE_LOOKUP.yearPicker.getEndDate({ endDate: startDate });
+      const s = RANGE_MODE_LOOKUP.month.getStartDate({ startDate });
+      const e = RANGE_MODE_LOOKUP.month.getEndDate({ endDate: startDate });
       return apply({ startDate: s, endDate: e });
     };
     const setRangeWithExplicitDisplayMode = ({
@@ -1834,16 +1817,12 @@ function buildStore$2() {
       displayMode
     }) => {
       switch (displayMode) {
-        case "dayPicker":
+        case "date":
           return setDate({ date: endDate });
-        case "dayRangePicker":
+        case "full":
           return setDateRange({ startDate, endDate });
-        case "monthPicker":
+        case "month":
           return setMonth({ startDate });
-        case "monthRangePicker":
-          return setMonthRange({ startDate, endDate });
-        case "yearPicker":
-          return setYear({ startDate });
         default:
           unsafeAssertUnreachable({
             message: "Invalid `displayMode`"
@@ -1858,8 +1837,6 @@ function buildStore$2() {
         setRangeWithExplicitDisplayMode,
         setDateRange,
         setMonth,
-        setMonthRange,
-        setYear,
         setMonthByPeriod: ({ monthNumber, yearNumber }) => {
           const effectiveMonthNumber = Math.min(Math.max(monthNumber, 1), 12);
           return setMonth({ startDate: new Date(yearNumber, effectiveMonthNumber - 1, 1) });
@@ -1906,14 +1883,10 @@ function useGlobalDateRangeActions() {
   );
   const setDateRange = useStore(store, ({ actions: { setDateRange: setDateRange2 } }) => setDateRange2);
   const setMonth = useStore(store, ({ actions: { setMonth: setMonth2 } }) => setMonth2);
-  const setMonthRange = useStore(store, ({ actions: { setMonthRange: setMonthRange2 } }) => setMonthRange2);
-  const setYear = useStore(store, ({ actions: { setYear: setYear2 } }) => setYear2);
   return {
     setRangeWithExplicitDisplayMode,
     setDateRange,
-    setMonth,
-    setMonthRange,
-    setYear
+    setMonth
   };
 }
 function useGlobalDatePeriodAlignedActions() {
@@ -1929,7 +1902,7 @@ function GlobalDateStoreProvider({
 }
 const useBankTransactionsFilters = (params) => {
   const dateFilterMode = (params == null ? void 0 : params.applyGlobalDateRange) ? BankTransactionsDateFilterMode.GlobalDateRange : (params == null ? void 0 : params.monthlyView) ? BankTransactionsDateFilterMode.MonthlyView : void 0;
-  const globalDateRange = useGlobalDateRange({ displayMode: "monthPicker" });
+  const globalDateRange = useGlobalDateRange({ displayMode: "full" });
   const defaultDateRange = {
     startDate: startOfMonth(/* @__PURE__ */ new Date()),
     endDate: endOfMonth(/* @__PURE__ */ new Date())
@@ -7539,11 +7512,59 @@ const SubmitButton = (_ba) => {
     })
   );
 };
+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 AnimatedContent = (_da) => {
+  var _ea = _da, {
+    children,
+    variant,
+    isOpen,
+    slotProps = { AnimatePresence: { initial: false } }
+  } = _ea, props = __objRest(_ea, [
+    "children",
+    "variant",
+    "isOpen",
+    "slotProps"
+  ]);
+  const config = variants[variant];
+  return /* @__PURE__ */ jsx(AnimatePresence, __spreadProps(__spreadValues({}, slotProps.AnimatePresence), { children: isOpen && /* @__PURE__ */ jsx(
+    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 = forwardRef(
-  (_da, ref) => {
-    var _ea = _da, { variant } = _ea, restProps = __objRest(_ea, ["variant"]);
+  (_fa, ref) => {
+    var _ga = _fa, { variant } = _ga, restProps = __objRest(_ga, ["variant"]);
     const dataProperties = toDataProperties({ variant });
     return /* @__PURE__ */ jsx(
       ModalOverlay$1,
@@ -7570,8 +7591,8 @@ const InternalModal = forwardRef(({ children, flexBlock, flexInline, size, varia
 InternalModal.displayName = "Modal";
 const DIALOG_CLASS_NAME = "Layer__Dialog";
 const Dialog = forwardRef(
-  (_fa, ref) => {
-    var _ga = _fa, { variant = "center" } = _ga, restProps = __objRest(_ga, ["variant"]);
+  (_ha, ref) => {
+    var _ia = _ha, { variant = "center" } = _ia, restProps = __objRest(_ia, ["variant"]);
     const dataProperties = toDataProperties({ variant });
     return /* @__PURE__ */ jsx(
       Dialog$1,
@@ -7609,11 +7630,25 @@ function Drawer({
   isDismissable = false,
   role
 }) {
-  return /* @__PURE__ */ jsx(ModalOverlay, { isOpen, onOpenChange, variant, isDismissable, children: /* @__PURE__ */ jsx(InternalModal, { flexBlock, flexInline, size, variant, children: /* @__PURE__ */ jsx(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, variant, children }) }) });
+  const isMobileDrawer = variant === "mobile-drawer";
+  const shouldUseFadeOverlay = variant === "drawer" || isMobileDrawer;
+  const modalContent = /* @__PURE__ */ jsx(InternalModal, { flexBlock, flexInline, size, variant, children: /* @__PURE__ */ jsx(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, variant, children }) });
+  const wrappedModalContent = isMobileDrawer ? /* @__PURE__ */ jsx(
+    AnimatedContent,
+    {
+      variant: "slideUp",
+      isOpen,
+      className: "Layer__ModalContentSlideUpMotionContent",
+      slotProps: { AnimatePresence: { initial: true } },
+      children: modalContent
+    }
+  ) : modalContent;
+  const overlayContent = shouldUseFadeOverlay ? /* @__PURE__ */ jsx(AnimatedContent, { variant: "fade", isOpen, className: "Layer__ModalContentFadeMotionContent", children: wrappedModalContent }) : wrappedModalContent;
+  return /* @__PURE__ */ jsx(ModalOverlay, { isOpen, onOpenChange, variant, isDismissable, children: overlayContent });
 }
 const HEADING_CLASS_NAME = "Layer__UI__Heading";
-const Heading = forwardRef((_ha, ref) => {
-  var _ia = _ha, { align, pie, pbe, size, variant, weight, ellipsis, className } = _ia, restProps = __objRest(_ia, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
+const Heading = forwardRef((_ja, ref) => {
+  var _ka = _ja, { align, pie, pbe, size, variant, weight, ellipsis, className } = _ka, restProps = __objRest(_ka, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
   const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight, ellipsis });
   return /* @__PURE__ */ jsx(
     Heading$2,
@@ -7640,21 +7675,25 @@ function ButtonSpinner({ size }) {
 function ButtonTransparentContent({ children }) {
   return /* @__PURE__ */ jsx("span", { className: BUTTON_CLASS_NAMES.TRANSPARENT_CONTENT, children });
 }
-const Button = forwardRef((_ja, ref) => {
-  var _ka = _ja, {
+const Button = forwardRef((_la, ref) => {
+  var _ma = _la, {
     children,
     ellipsis,
     icon,
     inset,
     size = "md",
-    variant = "solid"
-  } = _ka, restProps = __objRest(_ka, [
+    variant = "solid",
+    fullWidth = false,
+    flex = false
+  } = _ma, restProps = __objRest(_ma, [
     "children",
     "ellipsis",
     "icon",
     "inset",
     "size",
-    "variant"
+    "variant",
+    "fullWidth",
+    "flex"
   ]);
   const { isPending = false } = restProps;
   const dataProperties = toDataProperties({
@@ -7662,7 +7701,9 @@ const Button = forwardRef((_ja, ref) => {
     icon,
     inset,
     size,
-    variant
+    variant,
+    "full-width": fullWidth,
+    flex
   });
   return /* @__PURE__ */ jsx(
     Button$2,
@@ -8019,8 +8060,8 @@ const CHECK_SIZE = {
   md: 14,
   lg: 16
 };
-function Checkbox(_la) {
-  var _ma = _la, { children, className, variant = "default", size = "sm", isIndeterminate } = _ma, props = __objRest(_ma, ["children", "className", "variant", "size", "isIndeterminate"]);
+function Checkbox(_na) {
+  var _oa = _na, { children, className, variant = "default", size = "sm", isIndeterminate } = _oa, props = __objRest(_oa, ["children", "className", "variant", "size", "isIndeterminate"]);
   const dataProperties = useMemo(() => toDataProperties({
     size,
     variant,
@@ -8038,8 +8079,8 @@ function Checkbox(_la) {
     })
   );
 }
-function CheckboxWithTooltip(_na) {
-  var _oa = _na, { tooltip } = _oa, props = __objRest(_oa, ["tooltip"]);
+function CheckboxWithTooltip(_pa) {
+  var _qa = _pa, { tooltip } = _qa, props = __objRest(_qa, ["tooltip"]);
   return /* @__PURE__ */ jsx("div", { className: "Layer__checkbox-wrapper", children: /* @__PURE__ */ jsxs(DeprecatedTooltip, { disabled: !tooltip, children: [
     /* @__PURE__ */ jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsx(Checkbox, __spreadValues({}, props)) }),
     /* @__PURE__ */ jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: tooltip })
@@ -8384,8 +8425,8 @@ const isDateAllowedToBrowse = (date, business) => {
   }
   return differenceInCalendarMonths(startOfMonth(date), activationDate) >= 0;
 };
-const ErrorText = (_pa) => {
-  var _qa = _pa, { className } = _qa, props = __objRest(_qa, ["className"]);
+const ErrorText = (_ra) => {
+  var _sa = _ra, { className } = _sa, props = __objRest(_sa, ["className"]);
   return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, props), { status: "error", className }));
 };
 const InputGroup$1 = ({
@@ -8424,8 +8465,8 @@ const transformCurrencyValue = (rawValue) => {
   }
   return cleaned;
 };
-const AmountInput = (_ra) => {
-  var _sa = _ra, {
+const AmountInput = (_ta) => {
+  var _ua = _ta, {
     onChange,
     className,
     leftText,
@@ -8433,7 +8474,7 @@ const AmountInput = (_ra) => {
     isInvalid,
     badge,
     placeholder = "$0.00"
-  } = _sa, props = __objRest(_sa, [
+  } = _ua, props = __objRest(_ua, [
     "onChange",
     "className",
     "leftText",
@@ -8478,8 +8519,8 @@ const AmountInput = (_ra) => {
     /* @__PURE__ */ jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
-const ChevronLeft = (_ta) => {
-  var props = __objRest(_ta, []);
+const ChevronLeft = (_va) => {
+  var props = __objRest(_va, []);
   return /* @__PURE__ */ jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -8503,8 +8544,8 @@ const ChevronLeft = (_ta) => {
 };
 const CALENDAR_CLASS_NAME = "Layer__UI__Calendar";
 const Calendar = forwardRef(
-  function Calendar2(_ua, ref) {
-    var _va = _ua, { className, isReadOnly } = _va, restProps = __objRest(_va, ["className", "isReadOnly"]);
+  function Calendar2(_wa, ref) {
+    var _xa = _wa, { className, isReadOnly } = _xa, restProps = __objRest(_xa, ["className", "isReadOnly"]);
     const dataProperties = toDataProperties({ readonly: isReadOnly });
     return /* @__PURE__ */ jsx(
       Calendar$1,
@@ -8518,8 +8559,8 @@ const Calendar = forwardRef(
 );
 const CALENDAR_GRID_CLASS_NAME = "Layer__UI__CalendarGrid";
 const CalendarGrid = forwardRef(
-  function CalendarGrid2(_wa, ref) {
-    var _xa = _wa, { className } = _xa, restProps = __objRest(_xa, ["className"]);
+  function CalendarGrid2(_ya, ref) {
+    var _za = _ya, { className } = _za, restProps = __objRest(_za, ["className"]);
     return /* @__PURE__ */ jsx(
       CalendarGrid$1,
       __spreadProps(__spreadValues({}, restProps), {
@@ -8531,8 +8572,8 @@ const CalendarGrid = forwardRef(
 );
 const CALENDAR_GRID_BODY_CLASS_NAME = "Layer__UI__CalendarGridBody";
 const CalendarGridBody = forwardRef(
-  function CalendarGridBody2(_ya, ref) {
-    var _za = _ya, { className } = _za, restProps = __objRest(_za, ["className"]);
+  function CalendarGridBody2(_Aa, ref) {
+    var _Ba = _Aa, { className } = _Ba, restProps = __objRest(_Ba, ["className"]);
     return /* @__PURE__ */ jsx(
       CalendarGridBody$1,
       __spreadProps(__spreadValues({}, restProps), {
@@ -8544,8 +8585,8 @@ const CalendarGridBody = forwardRef(
 );
 const CALENDAR_CELL_CLASS_NAME = "Layer__UI__CalendarCell";
 const CalendarCell = forwardRef(
-  function CalendarCell2(_Aa, ref) {
-    var _Ba = _Aa, { className, size = "sm" } = _Ba, restProps = __objRest(_Ba, ["className", "size"]);
+  function CalendarCell2(_Ca, ref) {
+    var _Da = _Ca, { className, size = "sm" } = _Da, restProps = __objRest(_Da, ["className", "size"]);
     const dataProperties = toDataProperties({ size });
     return /* @__PURE__ */ jsx(
       CalendarCell$1,
@@ -8558,8 +8599,8 @@ const CalendarCell = forwardRef(
 );
 const CALENDAR_GRID_HEADER_CLASS_NAME = "Layer__UI__CalendarGridHeader";
 const CalendarGridHeader = forwardRef(
-  function CalendarGridHeader2(_Ca, ref) {
-    var _Da = _Ca, { className } = _Da, restProps = __objRest(_Da, ["className"]);
+  function CalendarGridHeader2(_Ea, ref) {
+    var _Fa = _Ea, { className } = _Fa, restProps = __objRest(_Fa, ["className"]);
     return /* @__PURE__ */ jsx(
       CalendarGridHeader$1,
       __spreadProps(__spreadValues({}, restProps), {
@@ -8571,8 +8612,8 @@ const CalendarGridHeader = forwardRef(
 );
 const CALENDAR_HEADER_CELL_CLASS_NAME = "Layer__UI__CalendarHeaderCell";
 const CalendarHeaderCell = forwardRef(
-  function CalendarHeaderCell2(_Ea, ref) {
-    var _Fa = _Ea, { className, size = "sm" } = _Fa, restProps = __objRest(_Fa, ["className", "size"]);
+  function CalendarHeaderCell2(_Ga, ref) {
+    var _Ha = _Ga, { className, size = "sm" } = _Ha, restProps = __objRest(_Ha, ["className", "size"]);
     const dataProperties = toDataProperties({ size });
     return /* @__PURE__ */ jsx(
       CalendarHeaderCell$1,
@@ -8598,8 +8639,8 @@ const DateCalendar = ({ minDate, maxDate, variant }) => {
 };
 const DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
 const DateField = forwardRef(
-  function DateField2(_Ga, ref) {
-    var _Ha = _Ga, { inline, className, isReadOnly } = _Ha, restProps = __objRest(_Ha, ["inline", "className", "isReadOnly"]);
+  function DateField2(_Ia, ref) {
+    var _Ja = _Ia, { inline, className, isReadOnly } = _Ja, restProps = __objRest(_Ja, ["inline", "className", "isReadOnly"]);
     const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
     return /* @__PURE__ */ jsx(
       DateField$1,
@@ -8613,8 +8654,8 @@ const DateField = forwardRef(
 );
 const DATE_INPUT_CLASS_NAME = "Layer__UI__DateInput";
 const DateInput = forwardRef(
-  function DateInput2(_Ia, ref) {
-    var _Ja = _Ia, { inset, pointerEvents } = _Ja, restProps = __objRest(_Ja, ["inset", "pointerEvents"]);
+  function DateInput2(_Ka, ref) {
+    var _La = _Ka, { inset, pointerEvents } = _La, restProps = __objRest(_La, ["inset", "pointerEvents"]);
     const dataProperties = toDataProperties({ inset, "pointer-events": pointerEvents });
     return /* @__PURE__ */ jsx(
       DateInput$1,
@@ -8627,8 +8668,8 @@ const DateInput = forwardRef(
 );
 const DATE_SEGMENT_CLASS_NAME = "Layer__UI__DateSegment";
 const DateSegment = forwardRef(
-  function DateSegment2(_Ka, ref) {
-    var _La = _Ka, { isReadOnly } = _La, restProps = __objRest(_La, ["isReadOnly"]);
+  function DateSegment2(_Ma, ref) {
+    var _Na = _Ma, { isReadOnly } = _Na, restProps = __objRest(_Na, ["isReadOnly"]);
     const dataProperties = toDataProperties({ interactive: !isReadOnly });
     return /* @__PURE__ */ jsx(
       DateSegment$1,
@@ -8654,8 +8695,8 @@ const DatePicker$1 = forwardRef(
 const POPOVER_CLASS_NAME = "Layer__Popover";
 const POPOVER_CLASS_NAMES = `Layer__Portal ${POPOVER_CLASS_NAME}`;
 const Popover = forwardRef(
-  function Popover2(_Ma, ref) {
-    var _Na = _Ma, { flexInline = false } = _Na, restProps = __objRest(_Na, ["flexInline"]);
+  function Popover2(_Oa, ref) {
+    var _Pa = _Oa, { flexInline = false } = _Pa, restProps = __objRest(_Pa, ["flexInline"]);
     const dataProperties = toDataProperties({ "flex-inline": flexInline });
     return /* @__PURE__ */ jsx(
       Popover$1,
@@ -8729,8 +8770,8 @@ function ResponsivePopover({ children, triggerRef }) {
     }
   );
 }
-const ChevronDown = (_Oa) => {
-  var _Pa = _Oa, { size = 18 } = _Pa, props = __objRest(_Pa, ["size"]);
+const ChevronDown = (_Qa) => {
+  var _Ra = _Qa, { size = 18 } = _Ra, props = __objRest(_Ra, ["size"]);
   return /* @__PURE__ */ jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -8754,8 +8795,8 @@ const ChevronDown = (_Oa) => {
 };
 const INPUT_GROUP_CLASS_NAME = "Layer__InputGroup";
 const InputGroup = forwardRef(
-  function InputGroup2(_Qa, ref) {
-    var _Ra = _Qa, { actionCount, className, slots, children } = _Ra, restProps = __objRest(_Ra, ["actionCount", "className", "slots", "children"]);
+  function InputGroup2(_Sa, ref) {
+    var _Ta = _Sa, { actionCount, className, slots, children } = _Ta, restProps = __objRest(_Ta, ["actionCount", "className", "slots", "children"]);
     const combinedClassName = classNames(INPUT_GROUP_CLASS_NAME, className);
     const dataProperties = toDataProperties({
       "action-count": actionCount
@@ -8772,15 +8813,15 @@ const InputGroup = forwardRef(
 );
 const FORM_CLASS_NAME = "Layer__UI__Form";
 const Form = forwardRef(
-  function Form2(_Sa, ref) {
-    var _Ta = _Sa, { children, className } = _Ta, restProps = __objRest(_Ta, ["children", "className"]);
+  function Form2(_Ua, ref) {
+    var _Va = _Ua, { children, className } = _Va, restProps = __objRest(_Va, ["children", "className"]);
     return /* @__PURE__ */ jsx(Form$1, __spreadProps(__spreadValues({}, restProps), { className: classNames(FORM_CLASS_NAME, className), ref, children }));
   }
 );
 const TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
 const TextField = forwardRef(
-  function TextField2(_Ua, ref) {
-    var _Va = _Ua, { children, inline, textarea, className } = _Va, restProps = __objRest(_Va, ["children", "inline", "textarea", "className"]);
+  function TextField2(_Wa, ref) {
+    var _Xa = _Wa, { children, inline, textarea, className } = _Xa, restProps = __objRest(_Xa, ["children", "inline", "textarea", "className"]);
     const dataProperties = toDataProperties({ inline, textarea });
     return /* @__PURE__ */ jsx(TextField$1, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
   }
@@ -9469,8 +9510,8 @@ const useIsVisible = (ref) => {
   }, [ref]);
   return isIntersecting;
 };
-const ChevronDownFill = (_Wa) => {
-  var _Xa = _Wa, { size = 18 } = _Xa, props = __objRest(_Xa, ["size"]);
+const ChevronDownFill = (_Ya) => {
+  var _Za = _Ya, { size = 18 } = _Za, props = __objRest(_Za, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -9495,8 +9536,8 @@ const ChevronDownFill = (_Wa) => {
     })
   );
 };
-const File = (_Ya) => {
-  var _Za = _Ya, { size = 12 } = _Za, props = __objRest(_Za, ["size"]);
+const File = (__a) => {
+  var _$a = __a, { size = 12 } = _$a, props = __objRest(_$a, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -9556,13 +9597,13 @@ const File = (_Ya) => {
     })
   );
 };
-const Input$1 = (__a) => {
-  var _$a = __a, {
+const Input$1 = (_ab) => {
+  var _bb = _ab, {
     className,
     isInvalid,
     errorMessage,
     leftText
-  } = _$a, props = __objRest(_$a, [
+  } = _bb, props = __objRest(_bb, [
     "className",
     "isInvalid",
     "errorMessage",
@@ -9582,19 +9623,19 @@ const Input$1 = (__a) => {
     /* @__PURE__ */ jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
-const TextButton = (_ab) => {
-  var _bb = _ab, {
+const TextButton = (_cb) => {
+  var _db = _cb, {
     className,
     children
-  } = _bb, props = __objRest(_bb, [
+  } = _db, props = __objRest(_db, [
     "className",
     "children"
   ]);
   const baseClassName2 = classNames("Layer__text-btn", className);
   return /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({}, props), { className: baseClassName2, children }));
 };
-const ScissorsFullOpen = (_cb) => {
-  var _db = _cb, { size = 12 } = _db, props = __objRest(_db, ["size"]);
+const ScissorsFullOpen = (_eb) => {
+  var _fb = _eb, { size = 12 } = _fb, props = __objRest(_fb, ["size"]);
   return /* @__PURE__ */ jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -9659,8 +9700,8 @@ const ScissorsFullOpen = (_cb) => {
     })
   );
 };
-const Trash = (_eb) => {
-  var _fb = _eb, { size = 18 } = _fb, props = __objRest(_fb, ["size"]);
+const Trash = (_gb) => {
+  var _hb = _gb, { size = 18 } = _hb, props = __objRest(_hb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -9711,8 +9752,8 @@ const Trash = (_eb) => {
     })
   );
 };
-const UploadCloud = (_gb) => {
-  var _hb = _gb, { size = 18 } = _hb, props = __objRest(_hb, ["size"]);
+const UploadCloud = (_ib) => {
+  var _jb = _ib, { size = 18 } = _jb, props = __objRest(_jb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -9967,8 +10008,8 @@ const ReceiptsProvider = ({
   const contextData = useReceipts({ bankTransaction, isActive });
   return /* @__PURE__ */ jsx(ReceiptsContext.Provider, { value: contextData, children });
 };
-const DownloadCloud = (_ib) => {
-  var _jb = _ib, { size = 18 } = _jb, props = __objRest(_jb, ["size"]);
+const DownloadCloud = (_kb) => {
+  var _lb = _kb, { size = 18 } = _lb, props = __objRest(_lb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -10010,8 +10051,8 @@ const DownloadCloud = (_ib) => {
     })
   );
 };
-const Eye = (_kb) => {
-  var _lb = _kb, { size = 18 } = _lb, props = __objRest(_lb, ["size"]);
+const Eye = (_mb) => {
+  var _nb = _mb, { size = 18 } = _nb, props = __objRest(_nb, ["size"]);
   return /* @__PURE__ */ jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -10164,8 +10205,8 @@ const openReceiptInNewTab = (url, index) => (e) => {
       `);
   }
 };
-const BankTransactionReceiptsWithProvider = forwardRef((_mb, ref) => {
-  var _nb = _mb, { bankTransaction, isActive } = _nb, props = __objRest(_nb, ["bankTransaction", "isActive"]);
+const BankTransactionReceiptsWithProvider = forwardRef((_ob, ref) => {
+  var _pb = _ob, { bankTransaction, isActive } = _pb, props = __objRest(_pb, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ jsx(ReceiptsProvider, { bankTransaction, isActive, children: /* @__PURE__ */ jsx(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })) });
 });
 BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
@@ -10217,8 +10258,8 @@ const BankTransactionReceipts = forwardRef(
 );
 BankTransactionReceipts.displayName = "BankTransactionReceipts";
 const PORTAL_CLASS_NAME = "Layer__Portal";
-const Check = (_ob) => {
-  var _pb = _ob, { size = 18 } = _pb, props = __objRest(_pb, ["size"]);
+const Check = (_qb) => {
+  var _rb = _qb, { size = 18 } = _rb, props = __objRest(_rb, ["size"]);
   return /* @__PURE__ */ jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -10414,8 +10455,8 @@ function buildCustomMenuPortal() {
     );
   };
 }
-function ComboBox(_qb) {
-  var _rb = _qb, {
+function ComboBox(_sb) {
+  var _tb = _sb, {
     className,
     selectedValue,
     onSelectedValueChange,
@@ -10433,7 +10474,7 @@ function ComboBox(_qb) {
     isClearable = true,
     isReadOnly = false,
     displayDisabledAsSelected
-  } = _rb, ariaProps = __objRest(_rb, [
+  } = _tb, ariaProps = __objRest(_tb, [
     "className",
     "selectedValue",
     "onSelectedValueChange",
@@ -11630,8 +11671,8 @@ function isCategorizationEnabledForStatus(status) {
     }
   }
 }
-const MinimizeTwo = (_sb) => {
-  var _tb = _sb, { size = 18 } = _tb, props = __objRest(_tb, ["size"]);
+const MinimizeTwo = (_ub) => {
+  var _vb = _ub, { size = 18 } = _vb, props = __objRest(_vb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -12062,12 +12103,12 @@ const Notification = ({
     }
   );
 };
-const Textarea = (_ub) => {
-  var _vb = _ub, {
+const Textarea = (_wb) => {
+  var _xb = _wb, {
     className,
     isInvalid,
     errorMessage
-  } = _vb, props = __objRest(_vb, [
+  } = _xb, props = __objRest(_xb, [
     "className",
     "isInvalid",
     "errorMessage"
@@ -12209,9 +12250,7 @@ const BankTransactionMemo = ({ bankTransactionId }) => {
     return /* @__PURE__ */ jsx(
       InputGroup$1,
       {
-        className: "Layer__bank-transaction-memo-input-group",
         name: "memo",
-        label: "Description",
         children: /* @__PURE__ */ jsx(
           Textarea,
           {
@@ -12393,9 +12432,9 @@ function BankTransactionFormFields({
   if (!showTags && !showCustomerVendor && !showDescriptions) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(VStack, { pi: "md", pbe: "lg", gap: "md", className: "Layer__bank-transaction-form-fields", children: [
-    showCustomerVendor && !hideCustomerVendor ? /* @__PURE__ */ jsx(BankTransactionCustomerVendorSelector, { bankTransaction }) : null,
-    showTags && !hideTags ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(VStack, { gap: "md", children: [
+    showCustomerVendor && !hideCustomerVendor && /* @__PURE__ */ jsx(BankTransactionCustomerVendorSelector, { bankTransaction }),
+    showTags && !hideTags && /* @__PURE__ */ jsx(
       TagDimensionsGroup,
       {
         value: selectedTags,
@@ -12403,8 +12442,11 @@ function BankTransactionFormFields({
         showLabels: true,
         isReadOnly
       }
-    ) : null,
-    showDescriptions ? /* @__PURE__ */ jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id }) : null
+    ),
+    showDescriptions && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(Span, { size: "sm", weight: "bold", children: "Description" }),
+      /* @__PURE__ */ jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id })
+    ] })
   ] });
 }
 var CategorizationType = /* @__PURE__ */ ((CategorizationType2) => {
@@ -12600,8 +12642,8 @@ const DateTime = ({
 };
 const CLASS_NAME$8 = "Layer__MoneyText";
 const MoneySpan = forwardRef(
-  (_wb, ref) => {
-    var _xb = _wb, { amount, bold, size, displayPlusSign, className } = _xb, restProps = __objRest(_xb, ["amount", "bold", "size", "displayPlusSign", "className"]);
+  (_yb, ref) => {
+    var _zb = _yb, { amount, bold, size, displayPlusSign, className } = _zb, restProps = __objRest(_zb, ["amount", "bold", "size", "displayPlusSign", "className"]);
     const dataProperties = toDataProperties({
       bold,
       "positive": amount >= 0,
@@ -12613,8 +12655,8 @@ const MoneySpan = forwardRef(
   }
 );
 MoneySpan.displayName = "MoneySpan";
-const Scissors = (_yb) => {
-  var _zb = _yb, { size = 11 } = _zb, props = __objRest(_zb, ["size"]);
+const Scissors = (_Ab) => {
+  var _Bb = _Ab, { size = 11 } = _Bb, props = __objRest(_Bb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -12745,21 +12787,27 @@ const Scissors = (_yb) => {
   );
 };
 const BankTransactionsBaseSelectedValue = (props) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { type, className, label, slotProps } = props;
+  if (type === "placeholder") {
+    return /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", className, children: /* @__PURE__ */ jsx(Span, { ellipsis: true, size: (_b = (_a = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _a.size) != null ? _b : "md", children: label }) });
+  }
   if (type === "match" || type === "transfer") {
     return /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className, children: [
       /* @__PURE__ */ jsx(Badge, { size: BadgeSize.SMALL, icon: /* @__PURE__ */ jsx(MinimizeTwo, { size: 11 }), children: type === "transfer" ? "Transfer" : "Match" }),
-      /* @__PURE__ */ jsx(Span, { ellipsis: true, size: (_b = (_a = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _a.size) != null ? _b : "md", children: label })
+      /* @__PURE__ */ jsx(Span, { ellipsis: true, size: (_d = (_c = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _c.size) != null ? _d : "md", children: label })
     ] });
   }
   if (type === "split") {
     return /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className, children: [
       /* @__PURE__ */ jsx(Badge, { size: BadgeSize.SMALL, icon: /* @__PURE__ */ jsx(Scissors, { size: 11 }), children: "Split" }),
-      /* @__PURE__ */ jsx(Span, { ellipsis: true, size: (_d = (_c = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _c.size) != null ? _d : "md", children: label })
+      /* @__PURE__ */ jsx(Span, { ellipsis: true, size: (_f = (_e = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _e.size) != null ? _f : "md", children: label })
     ] });
   }
-  return /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", className, children: /* @__PURE__ */ jsx(Span, { ellipsis: true, size: (_f = (_e = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _e.size) != null ? _f : "md", children: label }) });
+  return /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className, children: [
+    /* @__PURE__ */ jsx(Badge, { size: BadgeSize.SMALL, icon: /* @__PURE__ */ jsx(Layers2Icon, { size: 11 }), children: "Category" }),
+    /* @__PURE__ */ jsx(Span, { ellipsis: true, size: (_h = (_g = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _g.size) != null ? _h : "md", children: label })
+  ] });
 };
 const BankTransactionsUncategorizedSelectedValue = (props) => {
   const { selectedValue, className, slotProps } = props;
@@ -13213,7 +13261,8 @@ const ExpandedBankTransactionRow = forwardRef(
     submitBtnText = "Save",
     containerWidth,
     showDescriptions,
-    showReceiptUploads
+    showReceiptUploads,
+    showLeftPadding = true
   }, ref) => {
     const {
       categorize: categorizeBankTransaction2,
@@ -13294,14 +13343,14 @@ const ExpandedBankTransactionRow = forwardRef(
         });
       }
     };
-    const save = () => __async(null, null, function* () {
+    const save = () => {
       var _a;
       if (purpose === "match") {
         if (!selectedMatch) {
           setMatchFormError("Select an option to match the transaction");
           return;
         } else if (selectedMatch && selectedMatch.id !== ((_a = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a.id)) {
-          yield onMatchSubmit(selectedMatch.id);
+          void onMatchSubmit(selectedMatch.id);
           return;
         }
         close2();
@@ -13309,13 +13358,13 @@ const ExpandedBankTransactionRow = forwardRef(
       }
       if (!isValid2) return;
       const categorizationRequest = buildCategorizeBankTransactionPayloadForSplit(localSplits);
-      yield categorizeBankTransaction2(
+      void categorizeBankTransaction2(
         bankTransaction.id,
         categorizationRequest
       );
       deselect(bankTransaction.id);
       close2();
-    });
+    };
     useImperativeHandle(ref, () => ({
       save
     }));
@@ -13339,228 +13388,227 @@ const ExpandedBankTransactionRow = forwardRef(
       "span",
       {
         className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
-        children: !isOpen ? null : /* @__PURE__ */ jsxs("span", { className: `${className}__wrapper`, ref: bodyRef, children: [
-          categorizationEnabled ? /* @__PURE__ */ jsx("div", { className: `${className}__content-toggle`, children: /* @__PURE__ */ jsx(
-            Toggle,
-            {
-              name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
-              size: ToggleSize.small,
-              options: [
-                {
-                  value: "categorize",
-                  label: "Categorize"
-                },
-                {
-                  value: "match",
-                  label: "Match",
-                  disabled: !hasMatch(bankTransaction),
-                  disabledMessage: "We could not find matching transactions"
-                }
-              ],
-              selected: purpose,
-              onChange: onChangePurpose
-            }
-          ) }) : /* @__PURE__ */ jsx(Fragment, {}),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: `${className}__content`,
-              id: `expanded-${bankTransaction.id}`,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: `${className}__content-panels`, children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classNames(
-                        `${className}__match`,
-                        `${className}__content-panel`,
-                        purpose === "match" ? `${className}__content-panel--active` : ""
-                      ),
-                      children: /* @__PURE__ */ jsx("div", { className: `${className}__content-panel-container`, children: /* @__PURE__ */ jsx(
-                        MatchForm,
-                        {
-                          classNamePrefix: className,
-                          bankTransaction,
-                          selectedMatchId: selectedMatch == null ? void 0 : selectedMatch.id,
-                          readOnly: !categorizationEnabled,
-                          setSelectedMatch: (suggestedMatch) => {
-                            setMatchFormError(void 0);
-                            setSelectedMatch(suggestedMatch);
-                          },
-                          matchFormError
-                        }
-                      ) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classNames(
-                        `${className}__splits`,
-                        `${className}__content-panel`,
-                        purpose === "categorize" ? `${className}__content-panel--active` : ""
-                      ),
-                      children: /* @__PURE__ */ jsxs("div", { className: `${className}__content-panel-container`, children: [
-                        /* @__PURE__ */ jsx("div", { className: `${className}__splits-inputs`, children: effectiveSplits.map((split, index) => /* @__PURE__ */ jsxs(
-                          "div",
+        children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx("span", { className: `${className}__wrapper`, ref: bodyRef, children: /* @__PURE__ */ jsxs(VStack, { pis: showLeftPadding ? "md" : void 0, pbs: "sm", children: [
+            categorizationEnabled && /* @__PURE__ */ jsx(HStack, { pi: "md", pbe: "md", pbs: "3xs", children: /* @__PURE__ */ jsx(
+              Toggle,
+              {
+                name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
+                size: ToggleSize.small,
+                options: [
+                  {
+                    value: "categorize",
+                    label: "Categorize"
+                  },
+                  {
+                    value: "match",
+                    label: "Match",
+                    disabled: !hasMatch(bankTransaction),
+                    disabledMessage: "We could not find matching transactions"
+                  }
+                ],
+                selected: purpose,
+                onChange: onChangePurpose
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${className}__content`,
+                id: `expanded-${bankTransaction.id}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: `${className}__content-panels`, children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          `${className}__match`,
+                          `${className}__content-panel`,
+                          purpose === "match" ? `${className}__content-panel--active` : ""
+                        ),
+                        children: /* @__PURE__ */ jsx("div", { className: `${className}__content-panel-container`, children: /* @__PURE__ */ jsx(
+                          MatchForm,
                           {
-                            className: `${className}__table-cell--split-entry`,
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                AmountInput,
-                                {
-                                  name: `split-${index}${asListItem ? "-li" : ""}`,
-                                  disabled: index === 0 || !categorizationEnabled,
-                                  onChange: updateSplitAmount(index),
-                                  value: getInputValueForSplitAtIndex(index, split),
-                                  onBlur: onBlurSplitAmount,
-                                  className: `${className}__table-cell--split-entry__amount`,
-                                  isInvalid: split.amount < 0
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                BankTransactionCategoryComboBox,
-                                {
-                                  bankTransaction,
-                                  selectedValue: split.category,
-                                  onSelectedValueChange: (value) => {
-                                    changeCategoryForSplitAtIndex(index, value);
-                                  },
-                                  isLoading: bankTransaction.processing,
-                                  isDisabled: !categorizationEnabled,
-                                  includeSuggestedMatches: false
-                                }
-                              ),
-                              showTags && /* @__PURE__ */ jsx(
-                                TagDimensionsGroup,
-                                {
-                                  value: split.tags,
-                                  onChange: (tags) => changeTags(index, tags),
-                                  showLabels: false,
-                                  isReadOnly: !categorizationEnabled,
-                                  className: `${className}__table-cell--split-entry__tags`
-                                }
-                              ),
-                              showCustomerVendor && /* @__PURE__ */ jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__customer", children: /* @__PURE__ */ jsx(
-                                CustomerVendorSelector,
-                                {
-                                  selectedCustomerVendor: split.customerVendor,
-                                  onSelectedCustomerVendorChange: (customerVendor) => changeCustomerVendor(index, customerVendor),
-                                  placeholder: "Set customer or vendor",
-                                  isReadOnly: !categorizationEnabled,
-                                  showLabel: false
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__button", children: /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  onPress: () => removeSplit(index),
-                                  variant: "outlined",
-                                  icon: true,
-                                  isDisabled: index == 0,
-                                  children: /* @__PURE__ */ jsx(Trash, { size: 18 })
-                                }
-                              ) })
-                            ]
-                          },
-                          `split-${index}`
-                        )) }),
-                        splitFormError && /* @__PURE__ */ jsx(HStack, { pb: "sm", children: /* @__PURE__ */ jsx(ErrorText, { children: splitFormError }) }),
-                        /* @__PURE__ */ jsxs("div", { className: `${className}__total-and-btns`, children: [
-                          effectiveSplits.length > 1 && /* @__PURE__ */ jsx(
-                            Input$1,
-                            {
-                              disabled: true,
-                              leftText: "Total",
-                              inputMode: "numeric",
-                              value: `$${centsToDollars(
-                                effectiveSplits.reduce(
-                                  (x, { amount }) => x + amount,
-                                  0
-                                )
-                              )}`
-                            }
-                          ),
-                          categorizationEnabled ? /* @__PURE__ */ jsx("div", { className: `${className}__splits-buttons`, children: effectiveSplits.length > 1 ? /* @__PURE__ */ jsx(
-                            TextButton,
-                            {
-                              onClick: addSplit,
-                              children: "Add new split"
-                            }
-                          ) : /* @__PURE__ */ jsxs(
-                            Button,
+                            classNamePrefix: className,
+                            bankTransaction,
+                            selectedMatchId: selectedMatch == null ? void 0 : selectedMatch.id,
+                            readOnly: !categorizationEnabled,
+                            setSelectedMatch: (suggestedMatch) => {
+                              setMatchFormError(void 0);
+                              setSelectedMatch(suggestedMatch);
+                            },
+                            matchFormError
+                          }
+                        ) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          `${className}__splits`,
+                          `${className}__content-panel`,
+                          purpose === "categorize" ? `${className}__content-panel--active` : ""
+                        ),
+                        children: /* @__PURE__ */ jsxs("div", { className: `${className}__content-panel-container`, children: [
+                          /* @__PURE__ */ jsx("div", { className: `${className}__splits-inputs`, children: effectiveSplits.map((split, index) => /* @__PURE__ */ jsxs(
+                            "div",
                             {
-                              onClick: addSplit,
-                              variant: "outlined",
+                              className: `${className}__table-cell--split-entry`,
                               children: [
-                                /* @__PURE__ */ jsx(ScissorsFullOpen, { size: 14 }),
-                                "Split"
+                                /* @__PURE__ */ jsx(
+                                  AmountInput,
+                                  {
+                                    name: `split-${index}${asListItem ? "-li" : ""}`,
+                                    disabled: index === 0 || !categorizationEnabled,
+                                    onChange: updateSplitAmount(index),
+                                    value: getInputValueForSplitAtIndex(index, split),
+                                    onBlur: onBlurSplitAmount,
+                                    className: `${className}__table-cell--split-entry__amount`,
+                                    isInvalid: split.amount < 0
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  BankTransactionCategoryComboBox,
+                                  {
+                                    bankTransaction,
+                                    selectedValue: split.category,
+                                    onSelectedValueChange: (value) => {
+                                      changeCategoryForSplitAtIndex(index, value);
+                                    },
+                                    isLoading: bankTransaction.processing,
+                                    isDisabled: !categorizationEnabled,
+                                    includeSuggestedMatches: false
+                                  }
+                                ),
+                                showTags && /* @__PURE__ */ jsx(
+                                  TagDimensionsGroup,
+                                  {
+                                    value: split.tags,
+                                    onChange: (tags) => changeTags(index, tags),
+                                    showLabels: false,
+                                    isReadOnly: !categorizationEnabled,
+                                    className: `${className}__table-cell--split-entry__tags`
+                                  }
+                                ),
+                                showCustomerVendor && /* @__PURE__ */ jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__customer", children: /* @__PURE__ */ jsx(
+                                  CustomerVendorSelector,
+                                  {
+                                    selectedCustomerVendor: split.customerVendor,
+                                    onSelectedCustomerVendorChange: (customerVendor) => changeCustomerVendor(index, customerVendor),
+                                    placeholder: "Set customer or vendor",
+                                    isReadOnly: !categorizationEnabled,
+                                    showLabel: false
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__button", children: /* @__PURE__ */ jsx(
+                                  Button,
+                                  {
+                                    onPress: () => removeSplit(index),
+                                    variant: "outlined",
+                                    icon: true,
+                                    isDisabled: index == 0,
+                                    children: /* @__PURE__ */ jsx(Trash, { size: 18 })
+                                  }
+                                ) })
                               ]
-                            }
-                          ) }) : /* @__PURE__ */ jsx(Fragment, {})
+                            },
+                            `split-${index}`
+                          )) }),
+                          splitFormError && /* @__PURE__ */ jsx(HStack, { pb: "sm", children: /* @__PURE__ */ jsx(ErrorText, { children: splitFormError }) }),
+                          /* @__PURE__ */ jsxs("div", { className: `${className}__total-and-btns`, children: [
+                            effectiveSplits.length > 1 && /* @__PURE__ */ jsx(
+                              Input$1,
+                              {
+                                disabled: true,
+                                leftText: "Total",
+                                inputMode: "numeric",
+                                value: `$${centsToDollars(
+                                  effectiveSplits.reduce(
+                                    (x, { amount }) => x + amount,
+                                    0
+                                  )
+                                )}`
+                              }
+                            ),
+                            categorizationEnabled ? /* @__PURE__ */ jsx("div", { className: `${className}__splits-buttons`, children: effectiveSplits.length > 1 ? /* @__PURE__ */ jsx(
+                              TextButton,
+                              {
+                                onClick: addSplit,
+                                children: "Add new split"
+                              }
+                            ) : /* @__PURE__ */ jsxs(
+                              Button,
+                              {
+                                onClick: addSplit,
+                                variant: "outlined",
+                                children: [
+                                  /* @__PURE__ */ jsx(ScissorsFullOpen, { size: 14 }),
+                                  "Split"
+                                ]
+                              }
+                            ) }) : /* @__PURE__ */ jsx(Fragment, {})
+                          ] })
                         ] })
-                      ] })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(
-                  BankTransactionFormFields,
-                  {
-                    bankTransaction,
-                    showDescriptions,
-                    hideTags: purpose === "categorize",
-                    hideCustomerVendor: purpose === "categorize"
-                    /* categorize */
-                  }
-                ),
-                showReceiptUploads && /* @__PURE__ */ jsx(
-                  BankTransactionReceiptsWithProvider,
-                  {
-                    bankTransaction,
-                    isActive: isOpen,
-                    classNamePrefix: className,
-                    floatingActions: !asListItem
-                  }
-                ),
-                asListItem && categorizationEnabled ? /* @__PURE__ */ jsxs("div", { className: `${className}__submit-btn`, children: [
-                  bankTransaction.error ? /* @__PURE__ */ jsxs(
-                    Text,
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(VStack, { pis: "md", className: "Layer__ExpandedBankTransactionRow__Description", children: /* @__PURE__ */ jsx(
+                    BankTransactionFormFields,
                     {
-                      as: "span",
-                      size: TextSize.md,
-                      className: "Layer__unsaved-info",
-                      children: [
-                        /* @__PURE__ */ jsx("span", { children: "Unsaved" }),
-                        /* @__PURE__ */ jsx(AlertCircle, { size: 12 })
-                      ]
+                      bankTransaction,
+                      showDescriptions,
+                      hideTags: purpose === "categorize",
+                      hideCustomerVendor: purpose === "categorize"
+                      /* categorize */
                     }
-                  ) : null,
-                  /* @__PURE__ */ jsx(
-                    SubmitButton,
+                  ) }),
+                  showReceiptUploads && /* @__PURE__ */ jsx(
+                    BankTransactionReceiptsWithProvider,
                     {
-                      onClick: () => {
-                        if (!bankTransaction.processing) {
-                          void save();
-                        }
-                      },
-                      className: "Layer__bank-transaction__submit-btn",
-                      processing: bankTransaction.processing,
-                      active: true,
-                      action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
-                      children: submitBtnText
+                      bankTransaction,
+                      isActive: isOpen,
+                      classNamePrefix: className,
+                      floatingActions: !asListItem
                     }
-                  )
-                ] }) : null
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            APIErrorNotifications,
-            {
-              bankTransaction,
-              containerWidth
-            }
-          )
+                  ),
+                  asListItem && categorizationEnabled && /* @__PURE__ */ jsxs("div", { className: `${className}__submit-btn`, children: [
+                    bankTransaction.error && /* @__PURE__ */ jsxs(
+                      Text,
+                      {
+                        as: "span",
+                        size: TextSize.md,
+                        className: "Layer__unsaved-info",
+                        children: [
+                          /* @__PURE__ */ jsx("span", { children: "Unsaved" }),
+                          /* @__PURE__ */ jsx(AlertCircle, { size: 12 })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      SubmitButton,
+                      {
+                        onClick: save,
+                        className: "Layer__bank-transaction__submit-btn",
+                        processing: bankTransaction.processing,
+                        active: true,
+                        action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                        children: submitBtnText
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              APIErrorNotifications,
+              {
+                bankTransaction,
+                containerWidth
+              }
+            )
+          ] }) })
         ] })
       }
     );
@@ -13687,8 +13735,8 @@ const getMonthNameFromNumber = (monthNumber) => {
   }
   return (_a = monthNames.at(monthNumber - 1)) != null ? _a : "";
 };
-const Clock = (_Ab) => {
-  var _Bb = _Ab, { size = 18 } = _Bb, props = __objRest(_Bb, ["size"]);
+const Clock = (_Cb) => {
+  var _Db = _Cb, { size = 18 } = _Db, props = __objRest(_Db, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -13971,14 +14019,14 @@ const BankTransactionRow = ({
         __spreadProps(__spreadValues(__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), {
-          children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(VStack, { align: "end", children: /* @__PURE__ */ jsx(
             MoneySpan,
             {
               amount: bankTransaction.amount,
               displayPlusSign: isCredit(bankTransaction),
               className: "Layer__table-cell-content"
             }
-          )
+          ) })
         })
       ),
       /* @__PURE__ */ jsx(
@@ -13999,7 +14047,7 @@ const BankTransactionRow = ({
             `${className}__actions-cell--${open ? "open" : "close"}`
           ),
           children: open ? /* @__PURE__ */ jsxs(HStack, { pie: "md", gap: "md", justify: "end", className: "Layer__bank-transaction-row__category-open", children: [
-            bankTransaction.error ? /* @__PURE__ */ jsxs(
+            bankTransaction.error && /* @__PURE__ */ jsxs(
               Text,
               {
                 as: "span",
@@ -14010,8 +14058,8 @@ const BankTransactionRow = ({
                   /* @__PURE__ */ jsx(AlertCircle, { size: 12 })
                 ]
               }
-            ) : null,
-            categorizationEnabled ? /* @__PURE__ */ jsx(
+            ),
+            categorizationEnabled && /* @__PURE__ */ jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -14025,8 +14073,8 @@ const BankTransactionRow = ({
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
-            ) : null,
-            !categorizationEnabled && !categorized ? /* @__PURE__ */ jsx(VStack, { children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }) : null,
+            ),
+            !categorizationEnabled && !categorized && /* @__PURE__ */ jsx(VStack, { children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -14042,26 +14090,36 @@ const BankTransactionRow = ({
               }
             )
           ] }) : /* @__PURE__ */ jsxs(HStack, { pi: "md", gap: "md", className: "Layer__bank-transaction-row__category-hstack", children: [
-            categorizationEnabled && !categorized ? /* @__PURE__ */ jsx(
-              BankTransactionCategoryComboBox,
+            /* @__PURE__ */ jsx(
+              AnimatedContent,
               {
-                bankTransaction,
-                selectedValue: selectedCategory != null ? selectedCategory : null,
-                onSelectedValueChange: (selectedCategory2) => {
-                  setTransactionCategory(bankTransaction.id, selectedCategory2);
-                  setShowRetry(false);
-                },
-                isLoading: bankTransaction.processing
-              }
-            ) : null,
-            categorized ? /* @__PURE__ */ jsx(
+                variant: "fade",
+                isOpen: categorizationEnabled && !categorized,
+                className: "Layer__BankTransactionRow__CategoryComboBoxMotionContent",
+                slotProps: { AnimatePresence: { mode: "wait" } },
+                children: /* @__PURE__ */ jsx(
+                  BankTransactionCategoryComboBox,
+                  {
+                    bankTransaction,
+                    selectedValue: selectedCategory != null ? selectedCategory : null,
+                    onSelectedValueChange: (selectedCategory2) => {
+                      setTransactionCategory(bankTransaction.id, selectedCategory2);
+                      setShowRetry(false);
+                    },
+                    isLoading: bankTransaction.processing
+                  }
+                )
+              },
+              "category-combobox"
+            ),
+            categorized && /* @__PURE__ */ jsx(
               BankTransactionsCategorizedSelectedValue,
               {
                 bankTransaction,
                 className: "Layer__bank-transaction-row__category"
               }
-            ) : null,
-            categorizationEnabled && !categorized && showRetry ? /* @__PURE__ */ jsx(
+            ),
+            categorizationEnabled && !categorized && showRetry && /* @__PURE__ */ jsx(
               RetryButton,
               {
                 onClick: () => {
@@ -14074,8 +14132,8 @@ const BankTransactionRow = ({
                 error: "Approval failed. Check connection and retry in few seconds.",
                 children: "Retry"
               }
-            ) : null,
-            !categorized && categorizationEnabled && !showRetry ? /* @__PURE__ */ jsx(
+            ),
+            !categorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -14089,8 +14147,8 @@ const BankTransactionRow = ({
                 action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
-            ) : null,
-            !categorizationEnabled && !categorized ? /* @__PURE__ */ jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }) : null,
+            ),
+            !categorizationEnabled && !categorized && /* @__PURE__ */ jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -14109,7 +14167,7 @@ const BankTransactionRow = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, className: "Layer__bank-transaction-row__expanded-td", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, className: "Layer__bank-transaction-row__expanded-td", children: /* @__PURE__ */ jsx(AnimatedContent, { variant: "expand", isOpen: open, children: /* @__PURE__ */ jsx(
       ExpandedBankTransactionRow,
       {
         ref: expandedRowRef,
@@ -14122,7 +14180,7 @@ const BankTransactionRow = ({
         showReceiptUploads,
         showTooltips
       }
-    ) }) })
+    ) }, `expanded-${bankTransaction.id}`) }) })
   ] });
 };
 const BankTransactionsCategorizedSelectedValue = (props) => {
@@ -14149,36 +14207,37 @@ const normalizeFromBankTransaction = (bankTransaction) => {
     label: (_e = (_d = bankTransaction.category) == null ? void 0 : _d.display_name) != null ? _e : ""
   };
 };
-const DATE_FORMAT = "LLL d";
-const BankTransactionsAmountDate = ({ amount, date, slotProps }) => {
-  return /* @__PURE__ */ jsxs(
-    VStack,
+const BankTransactionsListItemCategory = ({
+  bankTransaction,
+  mobile = false
+}) => {
+  const className = mobile ? "Layer__bankTransactionsListItemCategory__Mobile" : "Layer__bankTransactionsListItemCategory__List";
+  const categorized = isCategorized(bankTransaction);
+  const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
+  if (categorized) {
+    return /* @__PURE__ */ jsx(
+      BankTransactionsCategorizedSelectedValue,
+      {
+        bankTransaction,
+        className,
+        slotProps: { Label: { size: "sm" } }
+      }
+    );
+  }
+  return selectedCategory ? /* @__PURE__ */ jsx(
+    BankTransactionsUncategorizedSelectedValue,
     {
-      align: "end",
-      gap: "3xs",
-      pb: "sm",
-      children: [
-        /* @__PURE__ */ jsx(HStack, { children: /* @__PURE__ */ jsx(
-          MoneySpan,
-          __spreadValues({
-            amount
-          }, slotProps == null ? void 0 : slotProps.MoneySpan)
-        ) }),
-        /* @__PURE__ */ jsx(
-          DateTime,
-          {
-            value: date,
-            dateFormat: DATE_FORMAT,
-            onlyDate: true,
-            slotProps: {
-              Date: __spreadValues({
-                variant: "subtle",
-                size: "sm"
-              }, slotProps == null ? void 0 : slotProps.DateTime)
-            }
-          }
-        )
-      ]
+      selectedValue: selectedCategory != null ? selectedCategory : null,
+      className,
+      slotProps: { Label: { size: "sm" } }
+    }
+  ) : /* @__PURE__ */ jsx(
+    BankTransactionsBaseSelectedValue,
+    {
+      type: "placeholder",
+      label: "No category selected",
+      className,
+      slotProps: { Label: { size: "sm" } }
     }
   );
 };
@@ -14236,6 +14295,9 @@ const BankTransactionsListItem = ({
     deselect(bankTransaction.id);
     setOpenExpandedRow(false);
   });
+  const handleSave = () => {
+    void save();
+  };
   const openClassName = openExpandedRow ? "Layer__bank-transaction-list-item--expanded" : "";
   const rowClassName = classNames(
     "Layer__bank-transaction-list-item",
@@ -14290,19 +14352,16 @@ const BankTransactionsListItem = ({
         /* @__PURE__ */ jsx(Span, { withTooltip: true, children: (_b = bankTransaction.counterparty_name) != null ? _b : bankTransaction.description })
       ] }),
       /* @__PURE__ */ jsx(
-        BankTransactionsAmountDate,
+        MoneySpan,
         {
           amount: bankTransaction.amount,
-          date: bankTransaction.date,
-          slotProps: {
-            MoneySpan: { size: "md", displayPlusSign: isCredit(bankTransaction) },
-            DateTime: { size: "sm" }
-          }
+          displayPlusSign: isCredit(bankTransaction),
+          size: "md"
         }
       )
     ] }),
-    !categorizationEnabled && !categorized ? /* @__PURE__ */ jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }) : null,
-    /* @__PURE__ */ jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", children: /* @__PURE__ */ jsx(
+    !categorizationEnabled && !categorized && /* @__PURE__ */ jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsx(BankTransactionsProcessingInfo, {}) }),
+    /* @__PURE__ */ jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", children: /* @__PURE__ */ jsx(AnimatedContent, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsx(
       ExpandedBankTransactionRow,
       {
         ref: expandedRowRef,
@@ -14315,11 +14374,12 @@ const BankTransactionsListItem = ({
         containerWidth,
         showDescriptions,
         showReceiptUploads,
-        showTooltips
+        showTooltips,
+        showLeftPadding: false
       }
-    ) }),
-    /* @__PURE__ */ jsxs("span", { className: "Layer__bank-transaction-list-item__base-row", children: [
-      categorizationEnabled && !categorized ? /* @__PURE__ */ jsx(
+    ) }, `expanded-${bankTransaction.id}`) }),
+    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
+      /* @__PURE__ */ jsx(
         BankTransactionCategoryComboBox,
         {
           bankTransaction,
@@ -14330,47 +14390,36 @@ const BankTransactionsListItem = ({
           },
           isLoading: bankTransaction.processing
         }
-      ) : categorized ? /* @__PURE__ */ jsx(
-        BankTransactionsCategorizedSelectedValue,
-        {
-          bankTransaction
-        }
-      ) : selectedCategory ? /* @__PURE__ */ jsx(
-        BankTransactionsUncategorizedSelectedValue,
-        {
-          selectedValue: selectedCategory
-        }
-      ) : null,
-      categorizationEnabled && !categorized && !showRetry ? /* @__PURE__ */ jsx(
+      ),
+      !showRetry && /* @__PURE__ */ jsx(
         SubmitButton,
         {
-          onClick: () => {
-            if (!bankTransaction.processing) {
-              void save();
-            }
-          },
+          disabled: bankTransaction.processing,
+          onClick: handleSave,
           className: "Layer__bank-transaction__submit-btn",
           processing: bankTransaction.processing,
           action: !categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
           children: !categorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
         }
-      ) : null,
-      categorizationEnabled && !categorized && showRetry ? /* @__PURE__ */ jsx(
+      ),
+      showRetry && /* @__PURE__ */ jsx(
         RetryButton,
         {
-          onClick: () => {
-            if (!bankTransaction.processing) {
-              void save();
-            }
-          },
+          onClick: handleSave,
           className: "Layer__bank-transaction__retry-btn",
           processing: bankTransaction.processing,
           error: "Approval failed. Check connection and retry in few seconds.",
           children: "Retry"
         }
-      ) : null
+      )
     ] }),
-    bankTransaction.error && showRetry ? /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
+    !openExpandedRow && categorizationEnabled && categorized && /* @__PURE__ */ jsx(
+      BankTransactionsListItemCategory,
+      {
+        bankTransaction
+      }
+    ),
+    bankTransaction.error && showRetry && /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." })
   ] });
 };
 const useBankTransactionsTableCheckboxState = ({ bankTransactions }) => {
@@ -14519,32 +14568,8 @@ const BankTransactionsMobileListItemCheckbox = ({
     }
   ) });
 };
-const BankTransactionsMobileListItemCategory = ({
-  bankTransaction
-}) => {
-  const categorized = isCategorized(bankTransaction);
-  const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
-  if (categorized) {
-    return /* @__PURE__ */ jsx(
-      BankTransactionsCategorizedSelectedValue,
-      {
-        bankTransaction,
-        className: "Layer__bankTransactionsMobileListItemCategory",
-        slotProps: { Label: { size: "sm" } }
-      }
-    );
-  }
-  return selectedCategory ? /* @__PURE__ */ jsx(
-    BankTransactionsUncategorizedSelectedValue,
-    {
-      selectedValue: selectedCategory != null ? selectedCategory : null,
-      className: "Layer__bankTransactionsMobileListItemCategory",
-      slotProps: { Label: { size: "sm" } }
-    }
-  ) : /* @__PURE__ */ jsx(Span, { ellipsis: true, className: "Layer__bankTransactionsMobileListItemCategory", size: "sm", children: "No category selected" });
-};
-const Paperclip = (_Cb) => {
-  var _Db = _Cb, { size = 20 } = _Db, props = __objRest(_Db, ["size"]);
+const Paperclip = (_Eb) => {
+  var _Fb = _Eb, { size = 20 } = _Fb, props = __objRest(_Fb, ["size"]);
   return /* @__PURE__ */ jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -14566,6 +14591,73 @@ const Paperclip = (_Cb) => {
     })
   );
 };
+const BusinessFormMobileItem = ({
+  option
+}) => {
+  const value = option.value.value;
+  const label = option.value.label;
+  return /* @__PURE__ */ jsx(
+    GridListItem,
+    {
+      id: value,
+      textValue: label,
+      className: "Layer__BusinessFormMobileItem",
+      children: /* @__PURE__ */ jsxs(HStack, { gap: "md", pi: "md", pb: "sm", children: [
+        !option.asLink && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            slot: "selection",
+            variant: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(Span, { size: "sm", children: label }),
+        option.asLink && /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            size: 16,
+            className: "Layer__BusinessFormMobileItem__link-icon"
+          }
+        )
+      ] })
+    },
+    value
+  );
+};
+const BusinessFormMobile = ({
+  options: options2,
+  selectedId,
+  onSelect,
+  readOnly
+}) => {
+  const handleSelectionChange = useCallback((keys) => {
+    if (readOnly) return;
+    const selectedKey = [...keys][0];
+    const selectedOption = options2.find((opt) => opt.value.value === selectedKey);
+    if (selectedOption) {
+      onSelect(selectedOption);
+    }
+  }, [options2, onSelect, readOnly]);
+  return /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Span, { size: "sm", weight: "bold", children: "Select category" }),
+    /* @__PURE__ */ jsx(
+      GridList,
+      {
+        "aria-label": "Select a category",
+        selectionMode: "single",
+        selectedKeys: selectedId ? /* @__PURE__ */ new Set([selectedId]) : /* @__PURE__ */ new Set(),
+        onSelectionChange: handleSelectionChange,
+        className: "Layer__BusinessFormMobile",
+        children: options2.map((option) => /* @__PURE__ */ jsx(
+          BusinessFormMobileItem,
+          {
+            option
+          },
+          option.value.value
+        ))
+      }
+    )
+  ] });
+};
 const ActionableList = ({
   options: options2,
   onClick,
@@ -14639,8 +14731,8 @@ const flattenCategories = (categories) => {
     return leafCategories.map((cat) => new CategoryAsOption(cat));
   });
 };
-const X = (_Eb) => {
-  var _Fb = _Eb, { size = 18 } = _Fb, props = __objRest(_Fb, ["size"]);
+const X = (_Gb) => {
+  var _Hb = _Gb, { size = 18 } = _Hb, props = __objRest(_Hb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14674,11 +14766,11 @@ const X = (_Eb) => {
   );
 };
 const CLASS_NAME$7 = "Layer__MinimalSearchField";
-function MinimalSearchField(_Gb) {
-  var _Hb = _Gb, {
+function MinimalSearchField(_Ib) {
+  var _Jb = _Ib, {
     placeholder,
     isDisabled
-  } = _Hb, restProps = __objRest(_Hb, [
+  } = _Jb, restProps = __objRest(_Jb, [
     "placeholder",
     "isDisabled"
   ]);
@@ -14694,8 +14786,8 @@ function MinimalSearchField(_Gb) {
   ] }));
 }
 const CLASS_NAME$6 = "Layer__SearchField";
-function SearchField(_Ib) {
-  var _Jb = _Ib, { slot = "search", className, label, isDisabled } = _Jb, restProps = __objRest(_Jb, ["slot", "className", "label", "isDisabled"]);
+function SearchField(_Kb) {
+  var _Lb = _Kb, { slot = "search", className, label, isDisabled } = _Lb, restProps = __objRest(_Lb, ["slot", "className", "label", "isDisabled"]);
   const combinedClassName = classNames(CLASS_NAME$6, className);
   return /* @__PURE__ */ jsxs(InputGroup, { slot, className: combinedClassName, children: [
     /* @__PURE__ */ jsx(VStack, { slot: "icon", align: "center", justify: "center", className: "Layer__SearchField__Icon", "data-disabled": isDisabled || void 0, children: /* @__PURE__ */ jsx(Search, { size: 14 }) }),
@@ -14798,6 +14890,10 @@ const CategorySelectDrawer = ({
     }
   ) });
 };
+const SELECT_CATEGORY_VALUE = "SELECT_CATEGORY";
+const isSelectCategoryOption = (value) => {
+  return isPlaceholderAsOption(value) && value.value === SELECT_CATEGORY_VALUE;
+};
 const BankTransactionsMobileListBusinessForm = ({
   bankTransaction,
   showCategorization,
@@ -14807,6 +14903,17 @@ const BankTransactionsMobileListBusinessForm = ({
 }) => {
   const receiptsRef = useRef(null);
   const { categorize: categorizeBankTransaction2, isLoading } = useBankTransactionsContext();
+  const [sessionCategories, setSessionCategories] = useState(() => {
+    var _a;
+    const initialMap = /* @__PURE__ */ new Map();
+    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);
+        initialMap.set(opt.value, opt);
+      });
+    }
+    return initialMap;
+  });
   const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
   const { setTransactionCategory } = useBankTransactionsCategoryActions();
   const [showRetry, setShowRetry] = useState(false);
@@ -14817,42 +14924,26 @@ const BankTransactionsMobileListBusinessForm = ({
     }
   }, [bankTransaction.error]);
   const options2 = useMemo(() => {
-    var _a;
-    const options22 = ((_a = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a.type) === CategorizationType.ASK_FROM_SUGGESTIONS ? bankTransaction.categorization_flow.suggestions.map((x) => {
-      var _a2;
-      const opt = new ApiCategorizationAsOption(x);
-      return {
-        label: opt.label,
-        id: opt.value,
-        description: (_a2 = x.description) != null ? _a2 : void 0,
-        value: opt
-      };
-    }) : [];
-    if (selectedCategory && !options22.find((x) => x.id === selectedCategory.value)) {
-      options22.unshift({
-        label: selectedCategory.label,
-        id: selectedCategory.value,
-        value: selectedCategory
-      });
-    }
-    if (options22.length) {
-      options22.push({
-        label: "See all categories",
-        id: "SELECT_CATEGORY",
-        value: {
-          type: "SELECT_CATEGORY"
-        },
-        secondary: true,
-        asLink: true
-      });
-    }
+    const options22 = Array.from(sessionCategories.values()).map((category) => ({
+      value: category
+    }));
+    options22.push({
+      value: new PlaceholderAsOption({
+        label: "Show all categories",
+        value: "SELECT_CATEGORY"
+      }),
+      asLink: true
+    });
     return options22;
-  }, [bankTransaction, selectedCategory]);
+  }, [sessionCategories]);
   const onCategorySelect = (category) => {
-    if ("type" in category.value && category.value.type === "SELECT_CATEGORY") {
+    if (isSelectCategoryOption(category.value)) {
       setIsDrawerOpen(true);
     } else {
       const option = category.value;
+      if (!isPlaceholderAsOption(option)) {
+        setSessionCategories((prev) => new Map(prev).set(option.value, option));
+      }
       if (selectedCategory && option.value === selectedCategory.value) {
         setTransactionCategory(bankTransaction.id, null);
       } else {
@@ -14875,22 +14966,28 @@ const BankTransactionsMobileListBusinessForm = ({
       true
     );
   };
+  const onDrawerSelect = useCallback((category) => {
+    if (!category) return;
+    setSessionCategories((prev) => new Map(prev).set(category.value, category));
+    setTransactionCategory(bankTransaction.id, category);
+  }, [bankTransaction.id, setTransactionCategory]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__business-form", children: [
-      showCategorization ? /* @__PURE__ */ jsx(
-        ActionableList,
+    /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+      showCategorization && /* @__PURE__ */ jsx(
+        BusinessFormMobile,
         {
           options: options2,
-          onClick: onCategorySelect,
-          selectedId: selectedCategory == null ? void 0 : selectedCategory.value,
-          showDescriptions: showTooltips
+          onSelect: onCategorySelect,
+          selectedId: selectedCategory == null ? void 0 : selectedCategory.value
         }
-      ) : null,
+      ),
       /* @__PURE__ */ jsx(
         BankTransactionFormFields,
         {
           bankTransaction,
-          showDescriptions
+          showDescriptions,
+          hideCustomerVendor: true,
+          hideTags: true
         }
       ),
       /* @__PURE__ */ jsx(
@@ -14911,7 +15008,7 @@ const BankTransactionsMobileListBusinessForm = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+      /* @__PURE__ */ jsxs(HStack, { gap: "md", children: [
         showReceiptUploads && /* @__PURE__ */ jsx(
           FileInput,
           {
@@ -14924,33 +15021,22 @@ const BankTransactionsMobileListBusinessForm = ({
             icon: /* @__PURE__ */ jsx(Paperclip, {})
           }
         ),
-        options2.length === 0 ? /* @__PURE__ */ jsx(
-          Button$1,
-          {
-            onClick: () => {
-              setIsDrawerOpen(true);
-            },
-            fullWidth: true,
-            variant: ButtonVariant.secondary,
-            children: "Select category"
-          }
-        ) : null,
-        showCategorization && options2.length > 0 ? /* @__PURE__ */ jsx(
-          Button$1,
+        showCategorization && sessionCategories.size > 0 && /* @__PURE__ */ jsx(
+          Button,
           {
             onClick: save,
-            disabled: !selectedCategory || isLoading || bankTransaction.processing,
             fullWidth: true,
-            children: isLoading || bankTransaction.processing ? "Confirming..." : "Confirm"
+            isDisabled: !selectedCategory || isLoading || bankTransaction.processing,
+            children: bankTransaction.processing || isLoading ? "Confirming..." : "Confirm"
           }
-        ) : null
+        )
       ] }),
       bankTransaction.error && showRetry ? /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
     ] }),
     /* @__PURE__ */ jsx(
       CategorySelectDrawer,
       {
-        onSelect: (category) => setTransactionCategory(bankTransaction.id, category),
+        onSelect: onDrawerSelect,
         selectedId: selectedCategory == null ? void 0 : selectedCategory.value,
         showTooltips,
         isOpen: isDrawerOpen,
@@ -15005,12 +15091,14 @@ const BankTransactionsMobileListPersonalForm = ({
     );
   };
   const alreadyAssigned = isAlreadyAssigned(bankTransaction);
-  return /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__personal-form", children: [
+  return /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
     /* @__PURE__ */ jsx(
       BankTransactionFormFields,
       {
         bankTransaction,
-        showDescriptions
+        showDescriptions,
+        hideCustomerVendor: true,
+        hideTags: true
       }
     ),
     /* @__PURE__ */ jsx(
@@ -15031,7 +15119,7 @@ const BankTransactionsMobileListPersonalForm = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "md", children: [
       showReceiptUploads && /* @__PURE__ */ jsx(
         FileInput,
         {
@@ -15044,34 +15132,70 @@ const BankTransactionsMobileListPersonalForm = ({
           icon: /* @__PURE__ */ jsx(Paperclip, {})
         }
       ),
-      showCategorization ? /* @__PURE__ */ jsx(
-        Button$1,
+      showCategorization && /* @__PURE__ */ jsx(
+        Button,
         {
           fullWidth: true,
-          disabled: alreadyAssigned || isLoading || bankTransaction.processing,
           onClick: save,
-          children: isLoading || bankTransaction.processing ? "Confirming..." : alreadyAssigned ? "Confirmed" : "Confirm"
+          isDisabled: alreadyAssigned || isLoading || bankTransaction.processing,
+          children: bankTransaction.processing || isLoading ? "Confirming..." : alreadyAssigned ? "Confirmed" : "Mark as Personal"
         }
-      ) : null
+      )
     ] }),
     bankTransaction.error && showRetry ? /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
   ] });
 };
+const DATE_FORMAT = "LLL d";
+const BankTransactionsAmountDate = ({ amount, date, slotProps }) => {
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      align: "end",
+      gap: "3xs",
+      pb: "sm",
+      children: [
+        /* @__PURE__ */ jsx(HStack, { children: /* @__PURE__ */ jsx(
+          MoneySpan,
+          __spreadValues({
+            amount
+          }, slotProps == null ? void 0 : slotProps.MoneySpan)
+        ) }),
+        /* @__PURE__ */ jsx(
+          DateTime,
+          {
+            value: date,
+            dateFormat: DATE_FORMAT,
+            onlyDate: true,
+            slotProps: {
+              Date: __spreadValues({
+                variant: "subtle",
+                size: "sm"
+              }, slotProps == null ? void 0 : slotProps.DateTime)
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 const MatchFormMobileItem = ({ match, bankTransaction, inAppLink }) => {
   return /* @__PURE__ */ jsx(
     GridListItem,
     {
       id: match.id,
       textValue: match.details.description,
-      children: /* @__PURE__ */ jsxs(HStack, { gap: "md", pis: "md", children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            slot: "selection",
-            variant: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(Span, { ellipsis: true, pbs: "sm", size: "sm", children: match.details.description }),
+      children: /* @__PURE__ */ jsxs(HStack, { pi: "md", gap: "md", justify: "space-between", children: [
+        /* @__PURE__ */ jsxs(HStack, { align: "center", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              slot: "selection",
+              variant: "round",
+              className: "Layer__MatchFormMobileItem__Checkbox"
+            }
+          ),
+          /* @__PURE__ */ jsx(Span, { size: "sm", children: match.details.description })
+        ] }),
         /* @__PURE__ */ jsx(
           BankTransactionsAmountDate,
           {
@@ -15083,7 +15207,7 @@ const MatchFormMobileItem = ({ match, bankTransaction, inAppLink }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx(HStack, { children: inAppLink })
+        inAppLink
       ] })
     },
     match.id
@@ -15156,19 +15280,20 @@ const BankTransactionsMobileListMatchForm = ({
     }
     yield matchBankTransaction2(bankTransaction.id, foundMatch.id, true);
   });
-  const save = () => __async(null, null, function* () {
+  const save = () => {
     var _a2;
     if (!showCategorization) {
       return;
     }
     if (!selectedMatch) {
       setFormError("Select an option to match the transaction");
-    } else if (selectedMatch && selectedMatch.id !== ((_a2 = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a2.id)) {
-      yield onMatchSubmit(selectedMatch.id);
+    }
+    if (selectedMatch && selectedMatch.id !== ((_a2 = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a2.id)) {
+      void onMatchSubmit(selectedMatch.id);
     }
     return;
-  });
-  return /* @__PURE__ */ jsxs(VStack, { pi: "md", children: [
+  };
+  return /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
     /* @__PURE__ */ jsx(Span, { size: "sm", weight: "bold", children: "Find Match" }),
     /* @__PURE__ */ jsx(
       MatchFormMobile,
@@ -15186,28 +15311,21 @@ const BankTransactionsMobileListMatchForm = ({
       BankTransactionFormFields,
       {
         bankTransaction,
-        showDescriptions
+        showDescriptions,
+        hideCustomerVendor: true,
+        hideTags: true
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
+    showReceiptUploads && /* @__PURE__ */ jsx(
+      BankTransactionReceipts,
       {
-        className: classNames(
-          "Layer__bank-transaction-mobile-list-item__receipts",
-          hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
-        ),
-        children: showReceiptUploads && /* @__PURE__ */ jsx(
-          BankTransactionReceipts,
-          {
-            ref: receiptsRef,
-            floatingActions: false,
-            hideUploadButtons: true,
-            label: "Receipts"
-          }
-        )
+        ref: receiptsRef,
+        floatingActions: false,
+        hideUploadButtons: true,
+        label: "Receipts"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "md", children: [
       showReceiptUploads && /* @__PURE__ */ jsx(
         FileInput,
         {
@@ -15221,49 +15339,37 @@ const BankTransactionsMobileListMatchForm = ({
         }
       ),
       showCategorization && /* @__PURE__ */ jsx(
-        Button$1,
+        Button,
         {
           fullWidth: true,
-          disabled: !selectedMatch || isLoading || bankTransaction.processing || selectedMatch.id === ((_a = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a.id),
-          onClick: () => {
-            void save();
-          },
+          isDisabled: !selectedMatch || isLoading || bankTransaction.processing || selectedMatch.id === ((_a = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a.id),
+          onClick: save,
           children: isLoading || bankTransaction.processing ? "Saving..." : "Approve match"
         }
       )
     ] }),
     formError && /* @__PURE__ */ jsx(ErrorText, { children: formError }),
-    showRetry ? /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
+    showRetry && /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." })
   ] });
 };
-const CategorySelectDrawerWithTrigger = ({
-  value,
-  onChange,
-  showTooltips
-}) => {
+const CategorySelectDrawerWithTrigger = ({ value, onChange, showTooltips }) => {
   var _a;
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(HStack, { fluid: true, children: [
     /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
+        flex: true,
+        fullWidth: true,
         "aria-label": "Select category",
-        className: classNames(
-          "Layer__category-menu__drawer-btn",
-          value && "Layer__category-menu__drawer-btn--selected"
-        ),
         onClick: () => {
           setIsDrawerOpen(true);
         },
+        variant: "outlined",
         children: [
-          (_a = value == null ? void 0 : value.label) != null ? _a : "Select...",
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              size: 16,
-              className: "Layer__category-menu__drawer-btn__arrow"
-            }
-          )
+          /* @__PURE__ */ jsx(Span, { children: (_a = value == null ? void 0 : value.label) != null ? _a : "Select..." }),
+          /* @__PURE__ */ jsx(Spacer, {}),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
         ]
       }
     ),
@@ -15308,84 +15414,90 @@ const BankTransactionsMobileListSplitForm = ({
     bankTransaction,
     selectedCategory
   });
+  const effectiveSplits = showCategorization ? localSplits : [];
+  const addSplitButtonText = effectiveSplits.length > 1 ? "Add new split" : "Split";
   useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const save = () => __async(null, null, function* () {
+  const save = () => {
     if (!isValid2) return;
     const categorizationRequest = buildCategorizeBankTransactionPayloadForSplit(localSplits);
-    yield categorizeBankTransaction2(
+    void categorizeBankTransaction2(
       bankTransaction.id,
       categorizationRequest
     );
     deselect(bankTransaction.id);
     close();
-  });
-  return /* @__PURE__ */ jsxs("div", { children: [
-    showCategorization ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  };
+  const handleCategoryChange = useCallback((index) => (value) => {
+    changeCategoryForSplitAtIndex(index, value);
+  }, [changeCategoryForSplitAtIndex]);
+  return /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+    showCategorization && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
       /* @__PURE__ */ jsx(Text, { weight: TextWeight.bold, size: TextSize.sm, children: "Split transaction" }),
-      /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transactions__table-cell__header", children: [
-        /* @__PURE__ */ jsx(Text, { size: TextSize.sm, children: "Category" }),
-        /* @__PURE__ */ jsx(Text, { size: TextSize.sm, children: "Amount" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transactions__splits-inputs", children: [
-        localSplits.map((split, index) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "Layer__bank-transactions__table-cell--split-entry",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "Layer__bank-transactions__table-cell--split-entry__right-col", children: /* @__PURE__ */ jsx(
-                CategorySelectDrawerWithTrigger,
-                {
-                  value: split.category,
-                  onChange: (value) => changeCategoryForSplitAtIndex(index, value),
-                  showTooltips
-                }
-              ) }),
-              /* @__PURE__ */ jsx(
-                AmountInput,
-                {
-                  name: `split-${index}`,
-                  disabled: index === 0 || !showCategorization,
-                  onChange: updateSplitAmount(index),
-                  value: getInputValueForSplitAtIndex(index, split),
-                  onBlur: onBlurSplitAmount,
-                  isInvalid: split.amount < 0
-                }
-              ),
-              index > 0 && /* @__PURE__ */ jsx(
-                Button$1,
-                {
-                  className: "Layer__bank-transactions__table-cell--split-entry__merge-btn",
-                  onClick: () => removeSplit(index),
-                  rightIcon: /* @__PURE__ */ jsx(Trash, { size: 16 }),
-                  variant: ButtonVariant.secondary,
-                  iconOnly: true
-                }
-              )
-            ]
-          },
-          `split-${index}`
-        )),
-        /* @__PURE__ */ jsx(
-          TextButton,
-          {
-            onClick: addSplit,
-            disabled: isLoading,
-            className: "Layer__add-new-split",
-            children: "Add new split"
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx(VStack, { gap: "sm", children: localSplits.map((split, index) => /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          gap: "xs",
+          align: "center",
+          justify: "space-between",
+          children: [
+            /* @__PURE__ */ jsx(
+              CategorySelectDrawerWithTrigger,
+              {
+                value: split.category,
+                onChange: handleCategoryChange(index),
+                showTooltips
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AmountInput,
+              {
+                name: `split-${index}`,
+                disabled: index === 0 || !showCategorization,
+                onChange: updateSplitAmount(index),
+                value: getInputValueForSplitAtIndex(index, split),
+                onBlur: onBlurSplitAmount,
+                isInvalid: split.amount < 0,
+                className: "Layer__BankTransactionsMobileSplitForm__AmountInput"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => removeSplit(index),
+                variant: "outlined",
+                icon: true,
+                isDisabled: index == 0,
+                children: /* @__PURE__ */ jsx(Trash, { size: 16 })
+              }
+            )
+          ]
+        },
+        `split-${index}`
+      )) }),
+      /* @__PURE__ */ jsx(HStack, { justify: "end", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: addSplit,
+          variant: "outlined",
+          children: [
+            /* @__PURE__ */ jsx(Scissors, { size: 14 }),
+            addSplitButtonText
+          ]
+        }
+      ) }),
       splitFormError && /* @__PURE__ */ jsx(HStack, { pbe: "sm", children: /* @__PURE__ */ jsx(ErrorText, { children: splitFormError }) })
-    ] }) : null,
+    ] }),
     /* @__PURE__ */ jsx(
       BankTransactionFormFields,
       {
         bankTransaction,
-        showDescriptions
+        showDescriptions,
+        hideCustomerVendor: true,
+        hideTags: true
       }
     ),
     /* @__PURE__ */ jsx(
@@ -15406,7 +15518,7 @@ const BankTransactionsMobileListSplitForm = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "md", children: [
       showReceiptUploads && /* @__PURE__ */ jsx(
         FileInput,
         {
@@ -15420,16 +15532,16 @@ const BankTransactionsMobileListSplitForm = ({
         }
       ),
       showCategorization && /* @__PURE__ */ jsx(
-        Button$1,
+        Button,
         {
           fullWidth: true,
-          onClick: () => void save(),
-          disabled: isLoading || bankTransaction.processing,
-          children: isLoading || bankTransaction.processing ? "Confirming..." : "Confirm"
+          onClick: save,
+          isDisabled: isLoading || bankTransaction.processing || !isValid2,
+          children: bankTransaction.processing || isLoading ? "Confirming..." : "Confirm"
         }
       )
     ] }),
-    bankTransaction.error && showRetry ? /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
+    bankTransaction.error && showRetry && /* @__PURE__ */ jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." })
   ] });
 };
 const BankTransactionsMobileListSplitAndMatchForm = ({
@@ -15444,7 +15556,7 @@ const BankTransactionsMobileListSplitAndMatchForm = ({
     bankTransaction.category ? "categorize" : anyMatch ? "match" : "categorize"
     /* categorize */
   );
-  return /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     formType === "categorize" && /* @__PURE__ */ jsx(
       BankTransactionsMobileListSplitForm,
       {
@@ -15464,14 +15576,13 @@ const BankTransactionsMobileListSplitAndMatchForm = ({
         showCategorization
       }
     ),
-    showCategorization && anyMatch && formType === "match" ? /* @__PURE__ */ jsx("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns", children: /* @__PURE__ */ jsx(TextButton, { onClick: () => setFormType(
+    showCategorization && anyMatch && (formType === "match" ? /* @__PURE__ */ jsx(TextButton, { onClick: () => setFormType(
       "categorize"
       /* categorize */
-    ), children: "or split transaction" }) }) : null,
-    showCategorization && anyMatch && formType === "categorize" ? /* @__PURE__ */ jsx("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns", children: /* @__PURE__ */ jsx(TextButton, { onClick: () => setFormType(
+    ), children: "or split transaction" }) : /* @__PURE__ */ jsx(TextButton, { onClick: () => setFormType(
       "match"
       /* match */
-    ), children: "or find match" }) }) : null
+    ), children: "or find match" }))
   ] });
 };
 const BankTransactionsMobileForms = ({
@@ -15521,7 +15632,7 @@ const BankTransactionsMobileForms = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: /* @__PURE__ */ jsx("div", { className: "Layer__bank-transaction-mobile-list-item__form-container", children: getContent() }) });
+  return /* @__PURE__ */ jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: getContent() });
 };
 const PURPOSE_TOGGLE_OPTIONS = [
   {
@@ -15549,8 +15660,8 @@ const BankTransactionsMobileListItemExpandedRow = ({
 }) => {
   const [purpose, setPurpose] = useState(getInitialPurpose(bankTransaction));
   const onChangePurpose = (event) => setPurpose(event.target.value);
-  return /* @__PURE__ */ jsx("div", { className: "Layer__bank-transaction-mobile-list-item__expanded-row", children: /* @__PURE__ */ jsxs(VStack, { pb: "md", justify: "space-between", align: "center", children: [
-    showCategorization ? /* @__PURE__ */ jsx(HStack, { align: "center", justify: "space-between", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(VStack, { pi: "md", gap: "md", pbe: "md", children: [
+    showCategorization && /* @__PURE__ */ jsx(
       Toggle,
       {
         name: `purpose-${bankTransaction.id}`,
@@ -15559,7 +15670,7 @@ const BankTransactionsMobileListItemExpandedRow = ({
         selected: purpose,
         onChange: onChangePurpose
       }
-    ) }) : null,
+    ),
     /* @__PURE__ */ jsx(
       BankTransactionsMobileForms,
       {
@@ -15571,7 +15682,7 @@ const BankTransactionsMobileListItemExpandedRow = ({
         showTooltips
       }
     )
-  ] }) });
+  ] });
 };
 const getInitialPurpose = (bankTransaction) => {
   if (bankTransaction.category) {
@@ -15701,6 +15812,11 @@ const BankTransactionsMobileListItem = ({
       }, 300);
     }
   }, [bankTransaction.recently_categorized]);
+  useEffect(() => {
+    if (bulkActionsEnabled) {
+      close2();
+    }
+  }, [bulkActionsEnabled]);
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const { select, deselect } = useBulkSelectionActions();
@@ -15776,15 +15892,16 @@ const BankTransactionsMobileListItem = ({
             }
           ),
           !open && /* @__PURE__ */ jsx(
-            BankTransactionsMobileListItemCategory,
+            BankTransactionsListItemCategory,
             {
-              bankTransaction
+              bankTransaction,
+              mobile: true
             }
           )
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatedContent, { variant: "expand", isOpen: open, children: /* @__PURE__ */ jsx(
       BankTransactionsMobileListItemExpandedRow,
       {
         bankTransaction,
@@ -15793,14 +15910,14 @@ const BankTransactionsMobileListItem = ({
         showReceiptUploads,
         showTooltips
       }
-    )
+    ) }, `expanded-${bankTransaction.id}`)
   ] }) });
 };
 const SWITCH_CLASS_NAME = "Layer__Switch";
-const Switch = forwardRef((_Kb, ref) => {
-  var _Lb = _Kb, {
+const Switch = forwardRef((_Mb, ref) => {
+  var _Nb = _Mb, {
     children
-  } = _Lb, props = __objRest(_Lb, [
+  } = _Nb, props = __objRest(_Nb, [
     "children"
   ]);
   return /* @__PURE__ */ jsx(
@@ -16176,8 +16293,8 @@ const usePaginationRange = ({
   }, [totalCount, pageSize, siblingCount, currentPage]);
   return paginationRange;
 };
-const PaginationButton = (_Mb) => {
-  var _Nb = _Mb, { children, isSelected } = _Nb, buttonProps = __objRest(_Nb, ["children", "isSelected"]);
+const PaginationButton = (_Ob) => {
+  var _Pb = _Ob, { children, isSelected } = _Pb, buttonProps = __objRest(_Pb, ["children", "isSelected"]);
   return /* @__PURE__ */ jsx(
     Button,
     __spreadProps(__spreadValues({
@@ -16724,8 +16841,8 @@ function BaseFormTextField({
 }
 const INPUT_CLASS_NAME = "Layer__UI__Input";
 const Input = forwardRef(
-  function Input2(_Ob, ref) {
-    var _Pb = _Ob, { inset, placement } = _Pb, restProps = __objRest(_Pb, ["inset", "placement"]);
+  function Input2(_Qb, ref) {
+    var _Rb = _Qb, { inset, placement } = _Rb, restProps = __objRest(_Rb, ["inset", "placement"]);
     const dataProperties = toDataProperties({ inset, placement });
     return /* @__PURE__ */ jsx(
       Input$2,
@@ -16821,15 +16938,15 @@ const withForceUpdate = (value) => {
     writable: false
   });
 };
-function FormBigDecimalField(_Qb) {
-  var _Rb = _Qb, {
+function FormBigDecimalField(_Sb) {
+  var _Tb = _Sb, {
     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
-  } = _Rb, restProps = __objRest(_Rb, [
+  } = _Tb, restProps = __objRest(_Tb, [
     "mode",
     "allowNegative",
     "maxValue",
@@ -16994,8 +17111,8 @@ function FormDateField({
 }
 const TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 const TextArea = forwardRef(
-  function TextArea2(_Sb, ref) {
-    var _Tb = _Sb, { resize = "none" } = _Tb, restProps = __objRest(_Tb, ["resize"]);
+  function TextArea2(_Ub, ref) {
+    var _Vb = _Ub, { resize = "none" } = _Vb, restProps = __objRest(_Vb, ["resize"]);
     const dataProperties = toDataProperties({ resize });
     return /* @__PURE__ */ jsx(
       TextArea$1,
@@ -17277,8 +17394,8 @@ const CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
     }
   );
 };
-const CloseIcon = (_Ub) => {
-  var _Vb = _Ub, { size = 12 } = _Vb, props = __objRest(_Vb, ["size"]);
+const CloseIcon = (_Wb) => {
+  var _Xb = _Wb, { size = 12 } = _Xb, props = __objRest(_Xb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -19100,8 +19217,8 @@ const BankTransactionsHeader = ({
     }
   );
 };
-const Inbox = (_Wb) => {
-  var _Xb = _Wb, { size = 18 } = _Xb, props = __objRest(_Xb, ["size"]);
+const Inbox = (_Yb) => {
+  var _Zb = _Yb, { size = 18 } = _Zb, props = __objRest(_Zb, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -19590,6 +19707,7 @@ function useRejectCategorizationRulesUpdateSuggestion() {
 function RuleUpdatesPromptStep({ ruleSuggestion, close: close2 }) {
   const { next } = useWizard();
   const { addToast } = useLayerContext();
+  const { isMobile } = useSizeClass();
   const [dontAskAgain, setDontAskAgain] = useState(false);
   const { trigger: rejectRuleSuggestion, isMutating } = useRejectCategorizationRulesUpdateSuggestion();
   const handleRejectRuleSuggestion = useCallback(() => {
@@ -19607,7 +19725,7 @@ function RuleUpdatesPromptStep({ ruleSuggestion, close: close2 }) {
       }
     }))();
   }, [addToast, close2, dontAskAgain, rejectRuleSuggestion, ruleSuggestion.newRule.createdBySuggestionId]);
-  return /* @__PURE__ */ jsxs(VStack, { gap: "3xl", children: [
+  return /* @__PURE__ */ jsxs(VStack, { gap: isMobile ? "md" : "3xl", children: [
     /* @__PURE__ */ jsx(Span, { size: "md", children: ruleSuggestion.suggestionPrompt }),
     /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "end", children: [
       /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "end", align: "end", children: [
@@ -19648,8 +19766,8 @@ function RuleUpdatesPromptStep({ ruleSuggestion, close: close2 }) {
 const CSS_PREFIX$1 = "Layer__UI__Table";
 const getClassName = (component, additionalClassNames, withHidden) => classNames(`${CSS_PREFIX$1}-${component}`, withHidden && `${CSS_PREFIX$1}-${component}--hidden`, additionalClassNames);
 const Table$1 = forwardRef(
-  (_Yb, ref) => {
-    var _Zb = _Yb, { children, className } = _Zb, restProps = __objRest(_Zb, ["children", "className"]);
+  (__b, ref) => {
+    var _$b = __b, { children, className } = _$b, restProps = __objRest(_$b, ["children", "className"]);
     return /* @__PURE__ */ jsx(
       Table$2,
       __spreadProps(__spreadValues({
@@ -19662,8 +19780,8 @@ const Table$1 = forwardRef(
   }
 );
 Table$1.displayName = "Table";
-const TableHeaderInner = (__b, ref) => {
-  var _$b = __b, { children, className, hideHeader } = _$b, restProps = __objRest(_$b, ["children", "className", "hideHeader"]);
+const TableHeaderInner = (_ac, ref) => {
+  var _bc = _ac, { children, className, hideHeader } = _bc, restProps = __objRest(_bc, ["children", "className", "hideHeader"]);
   return /* @__PURE__ */ jsx(
     TableHeader$1,
     __spreadProps(__spreadValues({
@@ -19676,8 +19794,8 @@ const TableHeaderInner = (__b, ref) => {
 };
 const TableHeader = forwardRef(TableHeaderInner);
 TableHeader.displayName = "TableHeader";
-const TableBodyInner = (_ac, ref) => {
-  var _bc = _ac, { children, className } = _bc, restProps = __objRest(_bc, ["children", "className"]);
+const TableBodyInner = (_cc, ref) => {
+  var _dc = _cc, { children, className } = _dc, restProps = __objRest(_dc, ["children", "className"]);
   return /* @__PURE__ */ jsx(
     TableBody$2,
     __spreadProps(__spreadValues({
@@ -19690,8 +19808,8 @@ const TableBodyInner = (_ac, ref) => {
 };
 const TableBody$1 = forwardRef(TableBodyInner);
 TableBody$1.displayName = "TableBody";
-const RowInner = (_cc, ref) => {
-  var _dc = _cc, { children, className, depth = 0 } = _dc, restProps = __objRest(_dc, ["children", "className", "depth"]);
+const RowInner = (_ec, ref) => {
+  var _fc = _ec, { children, className, depth = 0 } = _fc, restProps = __objRest(_fc, ["children", "className", "depth"]);
   const dataProperties = toDataProperties({ depth });
   return /* @__PURE__ */ jsx(
     Row$1,
@@ -19706,8 +19824,8 @@ const RowInner = (_cc, ref) => {
 const Row = forwardRef(RowInner);
 Row.displayName = "Row";
 const Column = forwardRef(
-  (_ec, ref) => {
-    var _fc = _ec, { children, className, textAlign = "left" } = _fc, restProps = __objRest(_fc, ["children", "className", "textAlign"]);
+  (_gc, ref) => {
+    var _hc = _gc, { children, className, textAlign = "left" } = _hc, restProps = __objRest(_hc, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
     return /* @__PURE__ */ jsx(
       Column$1,
@@ -19722,8 +19840,8 @@ const Column = forwardRef(
 );
 Column.displayName = "Column";
 const Cell = forwardRef(
-  (_gc, ref) => {
-    var _hc = _gc, { children, className } = _hc, restProps = __objRest(_hc, ["children", "className"]);
+  (_ic, ref) => {
+    var _jc = _ic, { children, className } = _jc, restProps = __objRest(_jc, ["children", "className"]);
     return /* @__PURE__ */ jsx(
       Cell$1,
       __spreadProps(__spreadValues({
@@ -20016,8 +20134,8 @@ const SuggestedCategorizationRuleUpdatesDrawer = ({
     /* @__PURE__ */ jsx(SuggestedCategorizationRuleUpdates, { ruleSuggestion, close: close2 })
   ] }) });
 };
-const BackArrow = (_ic) => {
-  var _jc = _ic, { size = 18 } = _jc, props = __objRest(_jc, ["size"]);
+const BackArrow = (_kc) => {
+  var _lc = _kc, { size = 18 } = _lc, props = __objRest(_lc, ["size"]);
   return /* @__PURE__ */ jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -20388,8 +20506,8 @@ const CategorizationRulesDrawer = () => {
   ) });
 };
 const COMPONENT_NAME$a = "bank-transactions";
-const BankTransactions = (_kc) => {
-  var _lc = _kc, {
+const BankTransactions = (_mc) => {
+  var _nc = _mc, {
     onError,
     showTags = false,
     showCustomerVendor = false,
@@ -20397,7 +20515,7 @@ const BankTransactions = (_kc) => {
     applyGlobalDateRange = false,
     mode,
     renderInAppLink
-  } = _lc, props = __objRest(_lc, [
+  } = _nc, props = __objRest(_nc, [
     "onError",
     "showTags",
     "showCustomerVendor",
@@ -20684,8 +20802,8 @@ const BankTransactionsTableView = ({
     }
   );
 };
-const QuickbooksIcon = (_mc) => {
-  var _nc = _mc, { size = 24 } = _nc, props = __objRest(_nc, ["size"]);
+const QuickbooksIcon = (_oc) => {
+  var _pc = _oc, { size = 24 } = _pc, props = __objRest(_pc, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -20966,8 +21084,8 @@ function QuickbooksContextProvider({ children }) {
   const quickbooksContextData = useQuickbooks();
   return /* @__PURE__ */ jsx(QuickbooksContext.Provider, { value: quickbooksContextData, children });
 }
-const Cog = (_oc) => {
-  var _pc = _oc, { size = 12 } = _pc, props = __objRest(_pc, ["size"]);
+const Cog = (_qc) => {
+  var _rc = _qc, { size = 12 } = _rc, props = __objRest(_rc, ["size"]);
   const id = useId();
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -21107,69 +21225,10 @@ const applyShare = (items, total) => {
     });
   });
 };
-var ReportKey = /* @__PURE__ */ ((ReportKey2) => {
-  ReportKey2["ProfitAndLoss"] = "ProfitAndLoss";
-  ReportKey2["BalanceSheet"] = "BalanceSheet";
-  ReportKey2["StatementOfCashFlows"] = "StatementOfCashFlows";
-  return ReportKey2;
-})(ReportKey || {});
-const defaultModeByReport = {
-  [
-    "ProfitAndLoss"
-    /* ProfitAndLoss */
-  ]: "monthPicker",
-  // This one should never change, but is included for completeness
-  [
-    "BalanceSheet"
-    /* BalanceSheet */
-  ]: "dayPicker",
-  [
-    "StatementOfCashFlows"
-    /* StatementOfCashFlows */
-  ]: "monthPicker"
-};
-const ReportsModeStoreContext = createContext(
-  createStore(() => ({
-    resetPnLModeToDefaultOnMount: true,
-    modeByReport: {},
-    actions: {
-      setModeForReport: () => {
-      }
-    }
-  }))
-);
-function useReportMode(report) {
-  const store = useContext(ReportsModeStoreContext);
-  return useStore(store, (state) => state.modeByReport[report]);
-}
-function useReportModeWithFallback(report, fallback) {
-  const mode = useReportMode(report);
-  return mode != null ? mode : fallback;
-}
-function ReportsModeStoreProvider({
-  children,
-  initialModes,
-  resetPnLModeToDefaultOnMount = true
-}) {
-  const [store] = useState(
-    () => createStore((set2) => ({
-      modeByReport: __spreadValues(__spreadValues({}, defaultModeByReport), initialModes),
-      resetPnLModeToDefaultOnMount,
-      actions: {
-        setModeForReport: (report, mode) => set2((state) => ({
-          modeByReport: __spreadProps(__spreadValues({}, state.modeByReport), {
-            [report]: mode
-          })
-        }))
-      }
-    }))
-  );
-  return /* @__PURE__ */ jsx(ReportsModeStoreContext.Provider, { value: store, children });
-}
 const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
   var _a;
-  const rangeDisplayMode = useReportModeWithFallback(ReportKey.ProfitAndLoss, "monthPicker");
-  const dateRange = useGlobalDateRange({ displayMode: rangeDisplayMode });
+  const [displayMode, setDisplayMode] = useState("month");
+  const dateRange = useGlobalDateRange({ displayMode });
   const [filters, setFilters] = useState({
     expenses: void 0,
     revenue: void 0
@@ -21293,7 +21352,9 @@ const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
     tagFilter,
     dateRange,
     selectedLineItem,
-    setSelectedLineItem
+    setSelectedLineItem,
+    setDisplayMode,
+    displayMode
   };
 };
 function range(start, end) {
@@ -21302,12 +21363,56 @@ function range(start, end) {
 function isArrayWithAtLeastOne(list) {
   return list.length > 0;
 }
-function getArrayWithAtLeastOneOrFallback(list, fallback) {
-  if (list.length === 0) {
-    return fallback;
+var DateGroupBy = /* @__PURE__ */ ((DateGroupBy2) => {
+  DateGroupBy2["AllTime"] = "AllTime";
+  DateGroupBy2["Month"] = "Month";
+  DateGroupBy2["Year"] = "Year";
+  return DateGroupBy2;
+})(DateGroupBy || {});
+const DateGroupByOptionConfig = {
+  [
+    "AllTime"
+    /* AllTime */
+  ]: {
+    label: "All time",
+    value: "AllTime"
+    /* AllTime */
+  },
+  [
+    "Month"
+    /* Month */
+  ]: {
+    label: "Compare by month",
+    value: "Month"
+    /* Month */
+  },
+  [
+    "Year"
+    /* Year */
+  ]: {
+    label: "Compare by year",
+    value: "Year"
+    /* Year */
   }
-  return list;
-}
+};
+const options$3 = Object.values(DateGroupByOptionConfig);
+const DateGroupByComboBox = ({ value, onValueChange }) => {
+  const selectedOption = value ? DateGroupByOptionConfig[value] : null;
+  const onSelectedValueChange = useCallback((option) => {
+    onValueChange((option == null ? void 0 : option.value) || null);
+  }, [onValueChange]);
+  return /* @__PURE__ */ jsx(
+    ComboBox,
+    {
+      className: "Layer__DateGroupByComboBox",
+      options: options$3,
+      onSelectedValueChange,
+      selectedValue: selectedOption,
+      isSearchable: false,
+      isClearable: false
+    }
+  );
+};
 function prepareFiltersBody(compareOptions) {
   const noneFilters = compareOptions.filter(
     ({ tagFilterConfig: { tagFilters: tagFilters2 } }) => tagFilters2 === "None"
@@ -21347,9 +21452,9 @@ function prepareFiltersBody(compareOptions) {
   return isArrayWithAtLeastOne(allFilters) ? allFilters : void 0;
 }
 function preparePeriodsBodyForMonths(dateRange, comparePeriods) {
-  const adjustedStartDate = startOfMonth(dateRange.startDate);
+  const adjustedEndDate = startOfMonth(dateRange.endDate);
   const rawPeriods = range(0, comparePeriods).map((index) => {
-    const currentPeriod = subMonths(adjustedStartDate, index);
+    const currentPeriod = subMonths(adjustedEndDate, index);
     return {
       year: getYear(currentPeriod),
       month: getMonth(currentPeriod) + 1
@@ -21370,9 +21475,9 @@ function preparePeriodsBodyForMonths(dateRange, comparePeriods) {
   };
 }
 function preparePeriodsBodyForYears(dateRange, comparePeriods) {
-  const adjustedStartDate = startOfYear(dateRange.startDate);
+  const adjustedEndDate = startOfYear(dateRange.endDate);
   const rawPeriods = range(0, comparePeriods).map((index) => {
-    const currentPeriod = subYears(adjustedStartDate, index);
+    const currentPeriod = subYears(adjustedEndDate, index);
     return {
       year: getYear(currentPeriod)
     };
@@ -21397,17 +21502,51 @@ function preparePeriodsBodyForDateRange(dateRange) {
     }]
   };
 }
-function preparePeriodsBody(dateRange, comparePeriods, rangeDisplayMode) {
-  switch (rangeDisplayMode) {
-    case "yearPicker":
+function preparePeriodsBody(dateRange, comparePeriods, comparisonPeriodMode) {
+  switch (comparisonPeriodMode) {
+    case DateGroupBy.Year:
       return preparePeriodsBodyForYears(dateRange, comparePeriods);
-    case "monthPicker":
+    case DateGroupBy.Month:
       return preparePeriodsBodyForMonths(dateRange, comparePeriods);
+    case DateGroupBy.AllTime:
     default:
       return preparePeriodsBodyForDateRange(dateRange);
   }
 }
-const COMPARE_MODES_SUPPORTING_MULTI_PERIOD = ["monthPicker", "yearPicker"];
+const ProfitAndLossContext = createContext({
+  data: void 0,
+  filteredDataRevenue: [],
+  filteredTotalRevenue: void 0,
+  filteredDataExpenses: [],
+  filteredTotalExpenses: void 0,
+  isLoading: true,
+  isValidating: false,
+  isError: false,
+  dateRange: {
+    startDate: startOfMonth(/* @__PURE__ */ new Date()),
+    endDate: endOfMonth(/* @__PURE__ */ new Date())
+  },
+  refetch: () => {
+  },
+  sidebarScope: void 0,
+  setSidebarScope: () => {
+  },
+  sortBy: () => {
+  },
+  setFilterTypes: () => {
+  },
+  filters: {
+    expenses: void 0,
+    revenue: void 0
+  },
+  tagFilter: void 0,
+  selectedLineItem: null,
+  setSelectedLineItem: () => {
+  },
+  setDisplayMode: () => {
+  },
+  displayMode: "month"
+});
 const isNotOnlyNoneTag = (compareOptions) => {
   return Boolean(
     compareOptions == null ? void 0 : compareOptions.some((option) => option.tagFilterConfig.tagFilters !== "None")
@@ -21436,16 +21575,24 @@ function useProfitAndLossComparison({
   reportingBasis,
   comparisonConfig
 }) {
-  var _a, _b;
-  const [comparePeriods, setComparePeriods] = useState((_a = comparisonConfig == null ? void 0 : comparisonConfig.defaultPeriods) != null ? _a : 1);
+  var _a;
+  const [comparisonPeriodMode, setComparisonPeriodMode] = useState(DateGroupBy.AllTime);
+  const { displayMode } = useContext(ProfitAndLossContext);
+  const { startDate, endDate } = useGlobalDateRange({ displayMode: "month" });
+  const comparePeriods = useMemo(() => {
+    if (!comparisonPeriodMode || comparisonPeriodMode === DateGroupBy.AllTime) {
+      return 1;
+    }
+    if (comparisonPeriodMode === DateGroupBy.Year) {
+      return Math.abs(differenceInCalendarYears(endDate, startDate)) + 1;
+    }
+    return Math.abs(differenceInCalendarMonths(endDate, startDate)) + 1;
+  }, [comparisonPeriodMode, endDate, startDate]);
   const [selectedCompareOptions, setSelectedCompareOptionsState] = useState(
     (comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter) ? [comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter] : []
   );
-  const rangeDisplayMode = useReportModeWithFallback(ReportKey.ProfitAndLoss, "monthPicker");
-  const dateRange = useGlobalDateRange({ displayMode: rangeDisplayMode });
-  const isPeriodsSelectEnabled = COMPARE_MODES_SUPPORTING_MULTI_PERIOD.includes(rangeDisplayMode);
-  const effectiveComparePeriods = isPeriodsSelectEnabled ? comparePeriods : 1;
-  const compareModeActive = useMemo(() => effectiveComparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [effectiveComparePeriods, selectedCompareOptions]);
+  const dateRange = useGlobalDateRange({ displayMode });
+  const compareModeActive = useMemo(() => comparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [comparePeriods, selectedCompareOptions]);
   const setSelectedCompareOptions = (values) => {
     const options2 = values.map(
       (option) => comparisonConfig == null ? void 0 : comparisonConfig.tagComparisonOptions.find(
@@ -21461,7 +21608,7 @@ function useProfitAndLossComparison({
   const { businessId } = useLayerContext();
   const { apiUrl } = useEnvironment();
   const { data: auth } = useAuth();
-  const periods = preparePeriodsBody(dateRange, effectiveComparePeriods, rangeDisplayMode);
+  const periods = preparePeriodsBody(dateRange, comparePeriods, comparisonPeriodMode);
   const tagFilters = prepareFiltersBody(selectedCompareOptions);
   const queryKey = buildKey$v(__spreadProps(__spreadValues({}, auth), {
     businessId,
@@ -21487,7 +21634,7 @@ function useProfitAndLossComparison({
     })
   );
   const getProfitAndLossComparisonCsv = (dateRange2, moneyFormat) => {
-    const periods2 = preparePeriodsBody(dateRange2, effectiveComparePeriods, rangeDisplayMode);
+    const periods2 = preparePeriodsBody(dateRange2, comparePeriods, comparisonPeriodMode);
     const tagFilters2 = prepareFiltersBody(selectedCompareOptions);
     return Layer.profitAndLossComparisonCsv(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: {
@@ -21505,15 +21652,15 @@ function useProfitAndLossComparison({
     data: data == null ? void 0 : data.pnls,
     isLoading,
     isValidating,
-    isPeriodsSelectEnabled,
     compareModeActive,
-    comparePeriods: effectiveComparePeriods,
-    setComparePeriods,
-    compareOptions: (_b = comparisonConfig == null ? void 0 : comparisonConfig.tagComparisonOptions) != null ? _b : [],
+    comparePeriods,
+    compareOptions: (_a = comparisonConfig == null ? void 0 : comparisonConfig.tagComparisonOptions) != null ? _a : [],
     selectedCompareOptions,
     setSelectedCompareOptions,
     getProfitAndLossComparisonCsv,
-    comparisonConfig
+    comparisonConfig,
+    comparisonPeriodMode,
+    setComparisonPeriodMode
   };
 }
 const getYearMonthKey = (y, m) => {
@@ -21604,8 +21751,8 @@ const useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     refetch
   };
 };
-const BarChart2 = (_qc) => {
-  var _rc = _qc, { size = 12 } = _rc, props = __objRest(_rc, ["size"]);
+const BarChart2 = (_sc) => {
+  var _tc = _sc, { size = 12 } = _tc, props = __objRest(_tc, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21773,10 +21920,8 @@ const ProfitAndLossChart = ({
   const [compactView, setCompactView] = useState(false);
   const barSize = compactView ? 10 : 20;
   const { getColor, business } = useLayerContext();
-  const rangeDisplayMode = useReportModeWithFallback(ReportKey.ProfitAndLoss, "monthPicker");
-  const dateRange = useGlobalDateRange({ displayMode: rangeDisplayMode });
+  const dateRange = useGlobalDateRange({ displayMode: "month" });
   const { setMonth } = useGlobalDateRangeActions();
-  const showIndicator = rangeDisplayMode === "monthPicker";
   const [customCursorSize, setCustomCursorSize] = useState({
     width: 0,
     height: 0,
@@ -22272,7 +22417,7 @@ const ProfitAndLossChart = ({
                   xAxisId: "revenue",
                   stackId: "revenue",
                   children: [
-                    showIndicator ? /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(
                       LabelList,
                       {
                         content: /* @__PURE__ */ jsx(
@@ -22283,7 +22428,7 @@ const ProfitAndLossChart = ({
                           }
                         )
                       }
-                    ) : null,
+                    ),
                     dataOrPlaceholderData.map((entry) => {
                       return /* @__PURE__ */ jsx(
                         Cell$2,
@@ -22397,11 +22542,11 @@ const ProfitAndLossChart = ({
     isSyncing && !hasNonZeroData ? /* @__PURE__ */ jsx(ChartStateCard, {}) : null
   ] });
 };
-const BackButton = (_sc) => {
-  var _tc = _sc, {
+const BackButton = (_uc) => {
+  var _vc = _uc, {
     className,
     textOnly = false
-  } = _tc, props = __objRest(_tc, [
+  } = _vc, props = __objRest(_vc, [
     "className",
     "textOnly"
   ]);
@@ -22426,8 +22571,8 @@ const TASKS_CHARTS_COLORS = {
   done: "#3B9C63",
   pending: "#DFA000"
 };
-const SortArrows = (_uc) => {
-  var _vc = _uc, { size = 13 } = _vc, props = __objRest(_vc, ["size"]);
+const SortArrows = (_wc) => {
+  var _xc = _wc, { size = 13 } = _xc, props = __objRest(_xc, ["size"]);
   return /* @__PURE__ */ jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -23198,11 +23343,11 @@ const Header = forwardRef(
   }
 );
 Header.displayName = "Header";
-const CloseButton = (_wc) => {
-  var _xc = _wc, {
+const CloseButton = (_yc) => {
+  var _zc = _yc, {
     className,
     textOnly = false
-  } = _xc, props = __objRest(_xc, [
+  } = _zc, props = __objRest(_zc, [
     "className",
     "textOnly"
   ]);
@@ -23687,37 +23832,6 @@ const DetailReportBreadcrumb = ({
     subtitle && /* @__PURE__ */ jsx(Span, { size: "sm", variant: "subtle", children: subtitle })
   ] }) }) });
 };
-const ProfitAndLossContext = createContext({
-  data: void 0,
-  filteredDataRevenue: [],
-  filteredTotalRevenue: void 0,
-  filteredDataExpenses: [],
-  filteredTotalExpenses: void 0,
-  isLoading: true,
-  isValidating: false,
-  isError: false,
-  dateRange: {
-    startDate: startOfMonth(/* @__PURE__ */ new Date()),
-    endDate: endOfMonth(/* @__PURE__ */ new Date())
-  },
-  refetch: () => {
-  },
-  sidebarScope: void 0,
-  setSidebarScope: () => {
-  },
-  sortBy: () => {
-  },
-  setFilterTypes: () => {
-  },
-  filters: {
-    expenses: void 0,
-    revenue: void 0
-  },
-  tagFilter: void 0,
-  selectedLineItem: null,
-  setSelectedLineItem: () => {
-  }
-});
 const COMPONENT_NAME$8 = "ProfitAndLossDetailReport";
 const ErrorState = () => /* @__PURE__ */ jsx(
   DataState,
@@ -24098,11 +24212,8 @@ const ProfitAndLossComparisonContext = createContext({
   data: void 0,
   isLoading: true,
   isValidating: false,
-  isPeriodsSelectEnabled: true,
   compareModeActive: false,
   comparePeriods: 0,
-  setComparePeriods: () => {
-  },
   compareOptions: [],
   selectedCompareOptions: [],
   setSelectedCompareOptions: function() {
@@ -24111,7 +24222,10 @@ const ProfitAndLossComparisonContext = createContext({
   getProfitAndLossComparisonCsv: function() {
     throw new Error("Function not implemented.");
   },
-  comparisonConfig: void 0
+  comparisonConfig: void 0,
+  comparisonPeriodMode: null,
+  setComparisonPeriodMode: () => {
+  }
 });
 const ProfitAndLossFullReportDownloadButton = ({
   stringOverrides,
@@ -24443,7 +24557,7 @@ const options$2 = Object.values(dateSelectionOptionConfig).filter((opt) => opt.v
 const DateSelectionComboBox = () => {
   const [lastPreset, setLastPreset] = useState(null);
   const { business } = useLayerContext();
-  const dateRange = useGlobalDateRange({ displayMode: "dayRangePicker" });
+  const dateRange = useGlobalDateRange({ displayMode: "full" });
   const { setDateRange } = useGlobalDateRangeActions();
   const selectedPreset = presetForDateRange(dateRange, lastPreset, getActivationDate(business));
   const selectedOption = dateSelectionOptionConfig[selectedPreset != null ? selectedPreset : DatePreset.Custom];
@@ -24467,7 +24581,7 @@ const DateSelectionComboBox = () => {
   );
 };
 const DateRangeSelection = ({ minDate, maxDate }) => {
-  const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ displayMode: "dayRangePicker" });
+  const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ displayMode: "full" });
   const { setDateRange: setGlobalDateRange } = useGlobalDateRangeActions();
   const { value } = useSizeClass();
   const {
@@ -24739,26 +24853,32 @@ const useTableExpandRow = () => {
     toggleAllRows
   };
 };
-const generateComparisonPeriods = (startDate, numberOfPeriods, rangeDisplayMode) => {
-  switch (rangeDisplayMode) {
-    case "yearPicker":
-      return generateComparisonYears(startDate, numberOfPeriods);
+const generateComparisonPeriods = (params) => {
+  switch (params.mode) {
+    case DateGroupBy.Year:
+      return generateComparisonYears(params.endDate, params.numberOfPeriods);
+    case DateGroupBy.Month:
+      return generateComparisonMonths(params.endDate, params.numberOfPeriods);
     default:
-      return generateComparisonMonths(startDate, numberOfPeriods);
+      return generateComparisonDateRange(params.startDate, params.endDate);
   }
 };
-const generateComparisonMonths = (startDate, numberOfMonths) => {
+const generateComparisonMonths = (endDate, numberOfMonths) => {
   return Array.from({ length: numberOfMonths }, (_, index) => {
-    const currentMonth = subMonths(startDate, numberOfMonths - index - 1);
-    return { date: currentMonth, label: format(currentMonth, "MMM") };
+    const currentMonth = subMonths(endDate, numberOfMonths - index - 1);
+    return { date: currentMonth, label: format(currentMonth, "MMM yyyy") };
   });
 };
-const generateComparisonYears = (startDate, numberOfYears) => {
+const generateComparisonYears = (endDate, numberOfYears) => {
   return Array.from({ length: numberOfYears }, (_, index) => {
-    const currentMonth = subYears(startDate, numberOfYears - index - 1);
+    const currentMonth = subYears(endDate, numberOfYears - index - 1);
     return { date: currentMonth, label: format(currentMonth, "yyyy") };
   });
 };
+const generateComparisonDateRange = (startDate, endDate) => {
+  const label = `${format(startDate, DATE_FORMAT$1)} - ${format(endDate, DATE_FORMAT$1)}`;
+  return [{ date: startDate, endDate, label }];
+};
 const getComparisonValue = (name, depth, cellData) => {
   if (depth === 0) {
     if (typeof cellData === "string" || typeof cellData === "number") {
@@ -24815,30 +24935,24 @@ const mergeComparisonLineItemsAtDepth = (lineItems) => {
 const ProfitAndLossCompareTable = ({
   stringOverrides
 }) => {
+  const { dateRange, displayMode } = useContext(ProfitAndLossContext);
   const {
     data: comparisonData,
     isLoading,
     comparePeriods,
-    selectedCompareOptions
+    selectedCompareOptions,
+    comparisonPeriodMode
   } = useContext(ProfitAndLossComparisonContext);
   const { isOpen, setIsOpen } = useTableExpandRow();
   const { data: bookkeepingPeriods } = useBookkeepingPeriods();
-  const rangeDisplayMode = useReportModeWithFallback(ReportKey.ProfitAndLoss, "monthPicker");
-  const dateRange = useGlobalDateRange({ displayMode: rangeDisplayMode });
   useEffect(() => {
     setIsOpen(["income", "cost_of_goods_sold", "expenses"]);
   }, []);
   if (isLoading || comparisonData === void 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classNames("Layer__profit-and-loss-table__loader-container"),
-        children: /* @__PURE__ */ jsx(Loader, {})
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { className: "Layer__profit-and-loss-table__loader-container", children: /* @__PURE__ */ jsx(Loader, {}) });
   }
   const getBookkeepingPeriodStatus = (date) => {
-    if (!bookkeepingPeriods || rangeDisplayMode !== "monthPicker") {
+    if (!bookkeepingPeriods || displayMode !== "month") {
       return;
     }
     const currentMonth = date.getMonth() + 1;
@@ -24880,7 +24994,16 @@ const ProfitAndLossCompareTable = ({
           variant: expandable ? "expandable" : "default",
           handleExpand: () => setIsOpen(rowKey),
           children: [
-            /* @__PURE__ */ jsx(TableCell, { primary: true, withExpandIcon: expandable, children: lineItem ? lineItem.display_name : rowDisplayName }),
+            /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                primary: true,
+                withExpandIcon: expandable,
+                nowrap: true,
+                className: "Layer__profit-and-loss-compare-table__sticky-cell",
+                children: lineItem ? lineItem.display_name : rowDisplayName
+              }
+            ),
             rowData.map((cell, i) => /* @__PURE__ */ jsx(TableCell, { isCurrency: true, children: getComparisonValue(
               lineItem ? lineItem.display_name : rowDisplayName,
               depth,
@@ -24902,7 +25025,13 @@ const ProfitAndLossCompareTable = ({
   };
   return /* @__PURE__ */ jsxs(Table, { borderCollapse: "collapse", bottomSpacing: false, children: [
     /* @__PURE__ */ jsx(TableHead, { children: selectedCompareOptions && selectedCompareOptions.length > 1 && /* @__PURE__ */ jsxs(TableRow, { rowKey: "", children: [
-      /* @__PURE__ */ jsx(TableCell, { isHeaderCell: true }),
+      /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          isHeaderCell: true,
+          className: "Layer__profit-and-loss-compare-table__sticky-cell"
+        }
+      ),
       selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsx(TableCell, { primary: true, isHeaderCell: true, children: option.displayName }, option.displayName + "-" + i),
         comparePeriods && Array.from({ length: comparePeriods - 1 }, (_, index) => /* @__PURE__ */ jsx(TableCell, { isHeaderCell: true }, option.displayName + "-" + index))
@@ -24910,20 +25039,24 @@ const ProfitAndLossCompareTable = ({
     ] }) }),
     /* @__PURE__ */ jsxs(TableBody, { children: [
       comparePeriods && /* @__PURE__ */ jsxs(TableRow, { rowKey: "", children: [
-        /* @__PURE__ */ jsx(TableCell, { isHeaderCell: true }),
-        selectedCompareOptions && selectedCompareOptions.length > 0 ? selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsx(Fragment$1, { children: generateComparisonPeriods(
-          dateRange.startDate,
-          comparePeriods,
-          rangeDisplayMode
-        ).map((month, index) => /* @__PURE__ */ jsx(TableCell, { isHeaderCell: true, children: /* @__PURE__ */ jsxs(HStack, { gap: "2xs", children: [
+        /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            isHeaderCell: true,
+            className: "Layer__profit-and-loss-compare-table__sticky-cell"
+          }
+        ),
+        selectedCompareOptions && selectedCompareOptions.length > 0 ? selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsx(Fragment$1, { children: generateComparisonPeriods(__spreadValues({
+          numberOfPeriods: comparePeriods,
+          mode: comparisonPeriodMode
+        }, dateRange)).map((month, index) => /* @__PURE__ */ jsx(TableCell, { isHeaderCell: true, children: /* @__PURE__ */ jsxs(HStack, { gap: "2xs", children: [
           month.label,
           " ",
           getBookkeepingPeriodStatus(month.date)
-        ] }) }, option.displayName + "-" + index)) }, option.displayName + "-" + i)) : /* @__PURE__ */ jsx(Fragment$1, { children: generateComparisonPeriods(
-          dateRange.startDate,
-          comparePeriods,
-          rangeDisplayMode
-        ).map((month, index) => /* @__PURE__ */ jsx(TableCell, { isHeaderCell: true, children: month.label }, "total-" + index + "-cell")) }, "total-1")
+        ] }) }, option.displayName + "-" + index)) }, option.displayName + "-" + i)) : /* @__PURE__ */ jsx(Fragment$1, { children: generateComparisonPeriods(__spreadValues({
+          numberOfPeriods: comparePeriods,
+          mode: comparisonPeriodMode
+        }, dateRange)).map((month, index) => /* @__PURE__ */ jsx(TableCell, { isHeaderCell: true, children: month.label }, "total-" + index + "-cell")) }, "total-1")
       ] }),
       renderRow("income", 0, "Income"),
       renderRow("cost_of_goods_sold", 0, "Cost of Goods Sold"),
@@ -25201,44 +25334,16 @@ const selectStyles = {
     });
   }
 };
-function buildCompareOptions(rangeDisplayMode) {
-  switch (rangeDisplayMode) {
-    case "monthPicker":
-      return [
-        { value: 1, label: "This month" },
-        { value: 2, label: "Last 2 months" },
-        { value: 3, label: "Last 3 months" }
-      ];
-    case "yearPicker":
-      return [
-        { value: 1, label: "This year" },
-        { value: 2, label: "Last 2 years" },
-        { value: 3, label: "Last 3 years" }
-      ];
-    default:
-      return [
-        { value: 1, label: "This period" },
-        { value: 2, label: "Last 2 periods" },
-        { value: 3, label: "Last 3 periods" }
-      ];
-  }
-}
 const ProfitAndLossCompareOptions = () => {
   const {
-    setComparePeriods,
     setSelectedCompareOptions,
-    isPeriodsSelectEnabled,
-    comparePeriods,
     compareOptions,
     selectedCompareOptions,
-    comparisonConfig
+    comparisonConfig,
+    comparisonPeriodMode,
+    setComparisonPeriodMode
   } = useContext(ProfitAndLossComparisonContext);
-  const rangeDisplayMode = useReportModeWithFallback(ReportKey.ProfitAndLoss, "monthPicker");
-  const periods = useMemo(
-    () => comparePeriods !== 0 ? comparePeriods : 1,
-    [comparePeriods]
-  );
-  const timeComparisonOptions = buildCompareOptions(rangeDisplayMode);
+  const { displayMode } = useContext(ProfitAndLossContext);
   const tagComparisonSelectOptions = compareOptions.map(
     (tagComparisonOption) => {
       return {
@@ -25250,19 +25355,8 @@ const ProfitAndLossCompareOptions = () => {
   if (!comparisonConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: "Layer__compare__options", children: [
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        options: timeComparisonOptions,
-        onChange: (e) => setComparePeriods(e && e.value ? e.value : 1),
-        value: timeComparisonOptions.find(
-          (option) => option.value === periods
-        ),
-        placeholder: rangeDisplayMode === "yearPicker" ? "Compare years" : "Compare months",
-        disabled: !isPeriodsSelectEnabled
-      }
-    ),
+  return /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
+    displayMode === "full" && /* @__PURE__ */ jsx(DateGroupByComboBox, { value: comparisonPeriodMode, onValueChange: setComparisonPeriodMode }),
     /* @__PURE__ */ jsx(
       MultiSelect,
       {
@@ -25279,7 +25373,8 @@ const ProfitAndLossCompareOptions = () => {
           };
         }),
         placeholder: "Select views",
-        styles: selectStyles
+        styles: selectStyles,
+        className: "Layer__ProfitAndLoss__TagMultiSelect"
       }
     )
   ] });
@@ -25293,8 +25388,11 @@ const ProfitAndLossReport = ({
   hideHeader
 }) => {
   var _a;
-  const { selectedLineItem, setSelectedLineItem } = useContext(ProfitAndLossContext);
+  const { selectedLineItem, setSelectedLineItem, setDisplayMode } = useContext(ProfitAndLossContext);
   const { comparisonConfig } = useContext(ProfitAndLossComparisonContext);
+  useEffect(() => {
+    setDisplayMode(dateSelectionMode);
+  }, [dateSelectionMode, setDisplayMode]);
   const breadcrumbIndexMap = useMemo(() => {
     if (!selectedLineItem) return {};
     return selectedLineItem.breadcrumbPath.reduce((acc, item, index) => {
@@ -25417,13 +25515,13 @@ function toMiniChartData({
 function ProfitAndLossSummariesMiniChart({
   data,
   chartColorsList,
-  variants
+  variants: variants2
 }) {
   const typeColorMapping = mapTypesToColors(data, chartColorsList);
   let chartDimension = 52;
   let innerRadius = 10;
   let outerRadius = 16;
-  switch (variants == null ? void 0 : variants.size) {
+  switch (variants2 == null ? void 0 : variants2.size) {
     case "sm":
       chartDimension = 52;
       innerRadius = 10;
@@ -25467,10 +25565,10 @@ function ProfitAndLossSummariesMiniChart({
   ) });
 }
 function ProfitAndLossSummariesHeading({
-  variants,
+  variants: variants2,
   children
 }) {
-  const { size = "2xs" } = variants != null ? variants : {};
+  const { size = "2xs" } = variants2 != null ? variants2 : {};
   return /* @__PURE__ */ jsx(Heading, { level: 3, size, slot: "heading", children });
 }
 const CLASS_NAME$3 = "Layer__ProfitAndLossSummariesSummary";
@@ -25481,14 +25579,14 @@ function ProfitAndLossSummariesSummary({
   amount,
   isLoading,
   slots,
-  variants
+  variants: variants2
 }) {
   const { Chart } = slots != null ? slots : {};
-  const { size = "2xs" } = variants != null ? variants : {};
+  const { size = "2xs" } = variants2 != null ? variants2 : {};
   const dataProperties = toDataProperties({ size });
   return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: CLASS_NAME$3 }, dataProperties), { children: [
     Chart ? /* @__PURE__ */ jsx("div", { className: CHART_AREA_CLASS_NAME, children: Chart }) : /* @__PURE__ */ jsx("div", { className: CHART_AREA_EMPTY_FRAME_CLASS_NAME }),
-    /* @__PURE__ */ jsx(ProfitAndLossSummariesHeading, { variants, children: label }),
+    /* @__PURE__ */ jsx(ProfitAndLossSummariesHeading, { variants: variants2, children: label }),
     isLoading ? /* @__PURE__ */ jsx(SkeletonLoader, { height: "20px" }) : /* @__PURE__ */ jsx(MoneySpan, { slot: "amount", amount, size: "lg", bold: true })
   ] }));
 }
@@ -25497,10 +25595,10 @@ function TransactionsToReview({
   onClick,
   usePnlDateRange,
   tagFilter = void 0,
-  variants
+  variants: variants2
 }) {
   var _a;
-  const { size = "sm" } = variants != null ? variants : {};
+  const { size = "sm" } = variants2 != null ? variants2 : {};
   const { dateRange: contextDateRange } = useContext(ProfitAndLossContext);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
   const currentDate = useMemo(() => dateRange ? dateRange.startDate : startOfMonth(/* @__PURE__ */ new Date()), [dateRange]);
@@ -25574,7 +25672,7 @@ function TransactionsToReview({
   }
   return /* @__PURE__ */ jsxs("div", { onClick, className: CLASS_NAME$2, children: [
     /* @__PURE__ */ jsxs(VStack, { gap: verticalGap, align: "start", children: [
-      /* @__PURE__ */ jsx(ProfitAndLossSummariesHeading, { variants, children: "Transactions to review" }),
+      /* @__PURE__ */ jsx(ProfitAndLossSummariesHeading, { variants: variants2, children: "Transactions to review" }),
       transactionsToReviewBadge
     ] }),
     /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(ChevronRight, {}), withBorder: true, onClick })
@@ -25588,7 +25686,7 @@ function Internal_ProfitAndLossSummaries({
   stringOverrides,
   chartColorsList,
   slots,
-  variants
+  variants: variants2
 }) {
   var _a, _b, _c, _d;
   const {
@@ -25625,11 +25723,11 @@ function Internal_ProfitAndLossSummaries({
                 {
                   data: revenueChartData,
                   chartColorsList,
-                  variants
+                  variants: variants2
                 }
               )
             },
-            variants
+            variants: variants2
           }
         )
       }
@@ -25651,11 +25749,11 @@ function Internal_ProfitAndLossSummaries({
                 {
                   data: expensesChartData,
                   chartColorsList,
-                  variants
+                  variants: variants2
                 }
               )
             },
-            variants
+            variants: variants2
           }
         )
       }
@@ -25665,17 +25763,17 @@ function Internal_ProfitAndLossSummaries({
       {
         label: (stringOverrides == null ? void 0 : stringOverrides.netProfitLabel) || "Net Profit",
         amount: (_d = data == null ? void 0 : data.netProfit) != null ? _d : 0,
-        variants,
+        variants: variants2,
         isLoading
       }
     ) }),
     unstable_AdditionalListItems.map((item, index) => /* @__PURE__ */ jsx(ProfitAndLossSummariesListItem, { children: item }, index))
   ] }) });
 }
-function ProfitAndLossSummaries(_yc) {
-  var _zc = _yc, {
+function ProfitAndLossSummaries(_Ac) {
+  var _Bc = _Ac, {
     onTransactionsToReviewClick
-  } = _zc, restProps = __objRest(_zc, [
+  } = _Bc, restProps = __objRest(_Bc, [
     "onTransactionsToReviewClick"
   ]);
   return /* @__PURE__ */ jsx(
@@ -25697,7 +25795,7 @@ function ProfitAndLossSummaries(_yc) {
     })
   );
 }
-const ProfitAndLossWithoutReportsModeProvider = ({
+const ProfitAndLoss = ({
   children,
   tagFilter,
   comparisonConfig,
@@ -25708,14 +25806,6 @@ const ProfitAndLossWithoutReportsModeProvider = ({
   const comparisonContextData = useProfitAndLossComparison({ comparisonConfig, reportingBasis });
   return /* @__PURE__ */ jsx(ProfitAndLossContext.Provider, { value: contextData, children: /* @__PURE__ */ jsx(ProfitAndLossComparisonContext.Provider, { value: comparisonContextData, children: asContainer ? /* @__PURE__ */ jsx(Container, { name: "profit-and-loss", children }) : children }) });
 };
-const ProfitAndLossWithReportsModeProvider = (props) => {
-  return /* @__PURE__ */ jsx(ReportsModeStoreProvider, { initialModes: { ProfitAndLoss: "monthPicker" }, children: /* @__PURE__ */ jsx(ProfitAndLossWithoutReportsModeProvider, __spreadValues({}, props)) });
-};
-const ProfitAndLoss = (_Ac) => {
-  var _Bc = _Ac, { withReportsModeProvider = true } = _Bc, restProps = __objRest(_Bc, ["withReportsModeProvider"]);
-  if (withReportsModeProvider) return /* @__PURE__ */ jsx(ProfitAndLossWithReportsModeProvider, __spreadValues({}, restProps));
-  return /* @__PURE__ */ jsx(ProfitAndLossWithoutReportsModeProvider, __spreadValues({}, restProps));
-};
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
@@ -26120,9 +26210,6 @@ const CombinedDateSelection = ({ mode }) => {
   return /* @__PURE__ */ jsx(DateSelection, {});
 };
 const COMPONENT_NAME$7 = "balance-sheet";
-const StandaloneBalanceSheet = (props) => {
-  return /* @__PURE__ */ jsx(ReportsModeStoreProvider, { initialModes: { BalanceSheet: "dayPicker" }, children: /* @__PURE__ */ jsx(BalanceSheet, __spreadValues({}, props)) });
-};
 const BalanceSheet = (props) => {
   return /* @__PURE__ */ jsx(
     BalanceSheetView,
@@ -26445,27 +26532,7 @@ function useStatementOfCashFlow({
     )().then(({ data }) => data)
   );
 }
-const DEFAULT_ALLOWED_PICKER_MODES = ["monthPicker"];
-const getAllowedDateRangePickerModes = ({
-  allowedDatePickerModes,
-  defaultDatePickerMode
-}) => getArrayWithAtLeastOneOrFallback(
-  allowedDatePickerModes != null ? allowedDatePickerModes : defaultDatePickerMode ? [defaultDatePickerMode] : [],
-  DEFAULT_ALLOWED_PICKER_MODES
-);
-const getInitialDateRangePickerMode = ({
-  allowedDatePickerModes,
-  defaultDatePickerMode
-}) => {
-  const allowedDateRangePickerModes = getAllowedDateRangePickerModes({ allowedDatePickerModes, defaultDatePickerMode });
-  const initialRangeDisplayMode = defaultDatePickerMode && allowedDateRangePickerModes.includes(defaultDatePickerMode) ? defaultDatePickerMode : allowedDateRangePickerModes[0];
-  return initialRangeDisplayMode;
-};
 const COMPONENT_NAME$6 = "statement-of-cash-flow";
-const StandaloneStatementOfCashFlow = (props) => {
-  const initialModeForStatementOfCashFlows = getInitialDateRangePickerMode(props);
-  return /* @__PURE__ */ jsx(ReportsModeStoreProvider, { initialModes: { StatementOfCashFlows: initialModeForStatementOfCashFlows }, children: /* @__PURE__ */ jsx(StatementOfCashFlow, __spreadValues({}, props)) });
-};
 const StatementOfCashFlow = (props) => {
   return /* @__PURE__ */ jsx(StatementOfCashFlowView, __spreadValues({}, props));
 };
@@ -26473,8 +26540,7 @@ const StatementOfCashFlowView = ({
   stringOverrides,
   dateSelectionMode = "full"
 }) => {
-  const displayMode = useReportModeWithFallback(ReportKey.StatementOfCashFlows, "monthPicker");
-  const dateRange = useGlobalDateRange({ displayMode });
+  const dateRange = useGlobalDateRange({ displayMode: dateSelectionMode });
   const { data, isLoading } = useStatementOfCashFlow(dateRange);
   const { view, containerRef } = useElementViewSize();
   return /* @__PURE__ */ jsx(TableProvider, { children: /* @__PURE__ */ jsx(
@@ -27164,7 +27230,7 @@ const useChartOfAccounts = ({ withDates = false } = {}) => {
   const { businessId } = useLayerContext();
   const { apiUrl } = useEnvironment();
   const { data: auth } = useAuth();
-  const { startDate, endDate } = useGlobalDateRange({ displayMode: "monthPicker" });
+  const { startDate, endDate } = useGlobalDateRange({ displayMode: "month" });
   const [form, setForm] = useState();
   const [sendingForm, setSendingForm] = useState(false);
   const [apiError, setApiError] = useState(void 0);
@@ -35077,7 +35143,7 @@ const ProjectProfitabilityView = ({
   valueOptions,
   showTitle,
   stringOverrides,
-  datePickerMode = "monthPicker",
+  dateSelectionMode = "month",
   csvMoneyFormat = "DOLLAR_STRING"
 }) => {
   const [activeTab, setActiveTab] = useState("overview");
@@ -35170,7 +35236,7 @@ const ProjectProfitabilityView = ({
             ProfitAndLoss.Report,
             {
               stringOverrides,
-              datePickerMode,
+              dateSelectionMode,
               csvMoneyFormat
             }
           ) })
@@ -37344,7 +37410,7 @@ function useUnifiedReportDateVariant() {
 function useUnifiedReportWithDateParams() {
   const store = useContext(UnifiedReportStoreContext);
   const { date: effectiveDate } = useGlobalDate();
-  const { startDate, endDate } = useGlobalDateRange({ displayMode: "dayRangePicker" });
+  const { startDate, endDate } = useGlobalDateRange({ displayMode: "full" });
   const report = useStore(store, (state) => state.report);
   const dateVariant = reportToDateVariantMap[report];
   switch (dateVariant) {
@@ -37613,13 +37679,6 @@ const Reports = ({
   const { view, containerRef } = useElementViewSize();
   const options2 = getOptions(enabledReports);
   const defaultTitle2 = enabledReports.length > 1 ? "Reports" : (_a = options2.find((option) => option.value === enabledReports[0])) == null ? void 0 : _a.label;
-  const initialModeForProfitAndLoss = profitAndLossConfig ? getInitialDateRangePickerMode(profitAndLossConfig) : "monthPicker";
-  const initialModeForStatementOfCashFlows = statementOfCashFlowConfig ? getInitialDateRangePickerMode(statementOfCashFlowConfig) : "monthPicker";
-  const initialModes = {
-    [ReportKey.ProfitAndLoss]: initialModeForProfitAndLoss,
-    [ReportKey.BalanceSheet]: "dayPicker",
-    [ReportKey.StatementOfCashFlows]: initialModeForStatementOfCashFlows
-  };
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -37635,7 +37694,7 @@ const Reports = ({
             onChange: (opt) => setActiveTab(opt.target.value)
           }
         ) }),
-        /* @__PURE__ */ jsx(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsx(ReportsModeStoreProvider, { initialModes, resetPnLModeToDefaultOnMount: false, children: /* @__PURE__ */ jsx(ProfitAndLoss, { asContainer: false, comparisonConfig, withReportsModeProvider: false, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsx(ProfitAndLoss, { asContainer: false, comparisonConfig, children: /* @__PURE__ */ jsx(
           ReportsPanel,
           {
             openReport: activeTab,
@@ -37645,7 +37704,7 @@ const Reports = ({
             view,
             renderInAppLink
           }
-        ) }) }) })
+        ) }) })
       ]
     }
   );
@@ -41457,7 +41516,7 @@ const BusinessProvider = ({
     hasBeenTouched,
     resetCaches
   } = useDataSync();
-  const globalDateRange = useGlobalDateRange({ displayMode: "dayRangePicker" });
+  const globalDateRange = useGlobalDateRange({ displayMode: "full" });
   const { setDateRange } = useGlobalDateRangeActions();
   const dateRange = useMemo(() => ({
     range: globalDateRange,
@@ -41622,7 +41681,7 @@ const LayerProvider = (_od) => {
 };
 export {
   AccountingOverview,
-  StandaloneBalanceSheet as BalanceSheet,
+  BalanceSheet,
   BankTransactions,
   BankTransactionsWithLinkedAccounts,
   BookkeepingOverview,
@@ -41645,7 +41704,7 @@ export {
   ProfitAndLossView,
   ProjectProfitabilityView,
   Reports,
-  StandaloneStatementOfCashFlow as StatementOfCashFlow,
+  StatementOfCashFlow,
   Tasks,
   unstable_BillsView,
   UnifiedReport as unstable_UnifiedReports,