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

package/dist/cjs/index.cjs

@@ -69,6 +69,7 @@ const useSWRMutation = require("swr/mutation");
 const reactAriaComponents = require("react-aria-components");
 const useResizeObserver = require("@react-hook/resize-observer");
 const lucideReact = require("lucide-react");
+const react$2 = require("motion/react");
 const CurrencyInput = require("react-currency-input-field");
 const Select$1 = require("react-select");
 const uuid = require("uuid");
@@ -110,7 +111,7 @@ const LinkedAccountsContext = react.createContext({
   setAccountsToAddOpeningBalanceInModal: () => {
   }
 });
-const version = "0.1.114-alpha";
+const version = "0.1.114-alpha.2";
 const pkg = {
   version
 };
@@ -1766,25 +1767,17 @@ function clampToPresentOrPast(date2, cutoff = dateFns.endOfDay(/* @__PURE__ */ n
   return dateFns.min([date2, cutoff]);
 }
 const RANGE_MODE_LOOKUP = {
-  dayPicker: {
+  date: {
     getStartDate: ({ startDate }) => dateFns.startOfMonth(startDate),
     getEndDate: ({ endDate }) => clampToPresentOrPast(dateFns.endOfDay(endDate))
   },
-  dayRangePicker: {
+  full: {
     getStartDate: ({ startDate }) => startDate,
     getEndDate: ({ endDate }) => clampToPresentOrPast(dateFns.endOfDay(endDate))
   },
-  monthPicker: {
+  month: {
     getStartDate: ({ startDate }) => dateFns.startOfMonth(startDate),
     getEndDate: ({ endDate }) => clampToPresentOrPast(dateFns.endOfMonth(endDate))
-  },
-  monthRangePicker: {
-    getStartDate: ({ startDate }) => dateFns.startOfMonth(startDate),
-    getEndDate: ({ endDate }) => clampToPresentOrPast(dateFns.endOfMonth(endDate))
-  },
-  yearPicker: {
-    getStartDate: ({ startDate }) => dateFns.startOfYear(startDate),
-    getEndDate: ({ endDate }) => clampToPresentOrPast(dateFns.endOfYear(endDate))
   }
 };
 function withCorrectedRange(fn) {
@@ -1804,28 +1797,18 @@ function buildStore$2() {
       return next;
     };
     const setDate = ({ date: date2 }) => {
-      const s = RANGE_MODE_LOOKUP.dayPicker.getStartDate({ startDate: date2 });
-      const e = RANGE_MODE_LOOKUP.dayPicker.getEndDate({ endDate: date2 });
+      const s = RANGE_MODE_LOOKUP.date.getStartDate({ startDate: date2 });
+      const e = RANGE_MODE_LOOKUP.date.getEndDate({ endDate: date2 });
       return apply2({ 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 apply2({ 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 apply2({ 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 apply2({ 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 apply2({ 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 = zustand.useStore(store, ({ actions: { setDateRange: setDateRange2 } }) => setDateRange2);
   const setMonth = zustand.useStore(store, ({ actions: { setMonth: setMonth2 } }) => setMonth2);
-  const setMonthRange = zustand.useStore(store, ({ actions: { setMonthRange: setMonthRange2 } }) => setMonthRange2);
-  const setYear = zustand.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: dateFns.startOfMonth(/* @__PURE__ */ new Date()),
     endDate: dateFns.endOfMonth(/* @__PURE__ */ new Date())
@@ -6209,7 +6182,7 @@ const ProfitAndLossReportSchema = effect.Schema.Struct({
   expenses: LineItemSchema,
   taxes: LineItemSchema,
   customLineItems: effect.pipe(
-    effect.Schema.propertySignature(effect.Schema.NullOr(LineItemSchema)),
+    effect.Schema.propertySignature(effect.Schema.NullishOr(effect.Schema.Array(LineItemSchema))),
     effect.Schema.fromKey("custom_line_items")
   ),
   otherOutflows: effect.pipe(
@@ -7332,6 +7305,10 @@ const getBankTransactionMatchAsSuggestedMatch = (bankTransaction) => {
   }
   return void 0;
 };
+const getBankTransactionFirstSuggestedMatch = (bankTransaction) => {
+  var _a, _b;
+  return (_b = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) != null ? _b : (_a = bankTransaction == null ? void 0 : bankTransaction.suggested_matches) == null ? void 0 : _a[0];
+};
 const IconButton = (_y) => {
   var _z = _y, {
     className,
@@ -9011,11 +8988,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__ */ jsxRuntime.jsx(react$2.AnimatePresence, __spreadProps(__spreadValues({}, slotProps.AnimatePresence), { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+    react$2.motion.div,
+    __spreadProps(__spreadValues({
+      initial: config.initial,
+      animate: config.animate,
+      exit: config.exit,
+      transition: config.transition
+    }, props), {
+      children
+    })
+  ) }));
+};
 const BASE_MODAL_OVERLAY_CLASS_NAME = "Layer__ModalOverlay";
 const MODAL_OVERLAY_CLASS_NAME = `Layer__Portal ${BASE_MODAL_OVERLAY_CLASS_NAME}`;
 const ModalOverlay = react.forwardRef(
-  (_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__ */ jsxRuntime.jsx(
       reactAriaComponents.ModalOverlay,
@@ -9042,8 +9067,8 @@ const InternalModal = react.forwardRef(({ children, flexBlock, flexInline, size,
 InternalModal.displayName = "Modal";
 const DIALOG_CLASS_NAME = "Layer__Dialog";
 const Dialog = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.Dialog,
@@ -9081,11 +9106,25 @@ function Drawer({
   isDismissable = false,
   role
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen, onOpenChange, variant, isDismissable, children: /* @__PURE__ */ jsxRuntime.jsx(InternalModal, { flexBlock, flexInline, size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, variant, children }) }) });
+  const isMobileDrawer = variant === "mobile-drawer";
+  const shouldUseFadeOverlay = variant === "drawer" || isMobileDrawer;
+  const modalContent = /* @__PURE__ */ jsxRuntime.jsx(InternalModal, { flexBlock, flexInline, size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, variant, children }) });
+  const wrappedModalContent = isMobileDrawer ? /* @__PURE__ */ jsxRuntime.jsx(
+    AnimatedContent,
+    {
+      variant: "slideUp",
+      isOpen,
+      className: "Layer__ModalContentSlideUpMotionContent",
+      slotProps: { AnimatePresence: { initial: true } },
+      children: modalContent
+    }
+  ) : modalContent;
+  const overlayContent = shouldUseFadeOverlay ? /* @__PURE__ */ jsxRuntime.jsx(AnimatedContent, { variant: "fade", isOpen, className: "Layer__ModalContentFadeMotionContent", children: wrappedModalContent }) : wrappedModalContent;
+  return /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, { isOpen, onOpenChange, variant, isDismissable, children: overlayContent });
 }
 const HEADING_CLASS_NAME = "Layer__UI__Heading";
-const Heading = react.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 = react.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__ */ jsxRuntime.jsx(
     reactAriaComponents.Heading,
@@ -9112,21 +9151,25 @@ function ButtonSpinner({ size }) {
 function ButtonTransparentContent({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: BUTTON_CLASS_NAMES.TRANSPARENT_CONTENT, children });
 }
-const Button = react.forwardRef((_ja, ref) => {
-  var _ka = _ja, {
+const Button = react.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({
@@ -9134,7 +9177,9 @@ const Button = react.forwardRef((_ja, ref) => {
     icon,
     inset,
     size,
-    variant
+    variant,
+    "full-width": fullWidth,
+    flex
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Button,
@@ -9491,8 +9536,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 = react.useMemo(() => toDataProperties({
     size,
     variant,
@@ -9510,8 +9555,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__ */ jsxRuntime.jsx("div", { className: "Layer__checkbox-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { disabled: !tooltip, children: [
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, __spreadValues({}, props)) }),
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: tooltip })
@@ -9856,8 +9901,8 @@ const isDateAllowedToBrowse = (date2, business) => {
   }
   return dateFns.differenceInCalendarMonths(dateFns.startOfMonth(date2), 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__ */ jsxRuntime.jsx(Text, __spreadProps(__spreadValues({}, props), { status: "error", className }));
 };
 const InputGroup$1 = ({
@@ -9896,8 +9941,8 @@ const transformCurrencyValue = (rawValue) => {
   }
   return cleaned;
 };
-const AmountInput = (_ra) => {
-  var _sa = _ra, {
+const AmountInput = (_ta) => {
+  var _ua = _ta, {
     onChange,
     className,
     leftText,
@@ -9905,7 +9950,7 @@ const AmountInput = (_ra) => {
     isInvalid,
     badge,
     placeholder = "$0.00"
-  } = _sa, props = __objRest(_sa, [
+  } = _ua, props = __objRest(_ua, [
     "onChange",
     "className",
     "leftText",
@@ -9950,8 +9995,8 @@ const AmountInput = (_ra) => {
     /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: errorMessage })
   ] });
 };
-const ChevronLeft = (_ta) => {
-  var props = __objRest(_ta, []);
+const ChevronLeft = (_va) => {
+  var props = __objRest(_va, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -9975,8 +10020,8 @@ const ChevronLeft = (_ta) => {
 };
 const CALENDAR_CLASS_NAME = "Layer__UI__Calendar";
 const Calendar = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.Calendar,
@@ -9990,8 +10035,8 @@ const Calendar = react.forwardRef(
 );
 const CALENDAR_GRID_CLASS_NAME = "Layer__UI__CalendarGrid";
 const CalendarGrid = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGrid,
       __spreadProps(__spreadValues({}, restProps), {
@@ -10003,8 +10048,8 @@ const CalendarGrid = react.forwardRef(
 );
 const CALENDAR_GRID_BODY_CLASS_NAME = "Layer__UI__CalendarGridBody";
 const CalendarGridBody = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridBody,
       __spreadProps(__spreadValues({}, restProps), {
@@ -10016,8 +10061,8 @@ const CalendarGridBody = react.forwardRef(
 );
 const CALENDAR_CELL_CLASS_NAME = "Layer__UI__CalendarCell";
 const CalendarCell = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarCell,
@@ -10030,8 +10075,8 @@ const CalendarCell = react.forwardRef(
 );
 const CALENDAR_GRID_HEADER_CLASS_NAME = "Layer__UI__CalendarGridHeader";
 const CalendarGridHeader = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarGridHeader,
       __spreadProps(__spreadValues({}, restProps), {
@@ -10043,8 +10088,8 @@ const CalendarGridHeader = react.forwardRef(
 );
 const CALENDAR_HEADER_CELL_CLASS_NAME = "Layer__UI__CalendarHeaderCell";
 const CalendarHeaderCell = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.CalendarHeaderCell,
@@ -10070,8 +10115,8 @@ const DateCalendar = ({ minDate, maxDate, variant }) => {
 };
 const DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
 const DateField = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.DateField,
@@ -10085,8 +10130,8 @@ const DateField = react.forwardRef(
 );
 const DATE_INPUT_CLASS_NAME = "Layer__UI__DateInput";
 const DateInput = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.DateInput,
@@ -10099,8 +10144,8 @@ const DateInput = react.forwardRef(
 );
 const DATE_SEGMENT_CLASS_NAME = "Layer__UI__DateSegment";
 const DateSegment = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.DateSegment,
@@ -10126,8 +10171,8 @@ const DatePicker$1 = react.forwardRef(
 const POPOVER_CLASS_NAME = "Layer__Popover";
 const POPOVER_CLASS_NAMES = `Layer__Portal ${POPOVER_CLASS_NAME}`;
 const Popover = react.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__ */ jsxRuntime.jsx(
       reactAriaComponents.Popover,
@@ -10141,7 +10186,6 @@ const Popover = react.forwardRef(
 const DATE_FORMAT$1 = "LLL d, yyyy";
 const DATE_FORMAT_SHORT = "M/d/yyyy";
 const DATE_FORMAT_WITH_TIME_READABLE = "LLLL do, yyyy 'at' h:mm a";
-const MONTH_DAY_FORMAT = "LLL d";
 const TIME_FORMAT = "p";
 const BREAKPOINTS = {
   TABLET: 760,
@@ -10202,8 +10246,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__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -10227,8 +10271,8 @@ const ChevronDown = (_Oa) => {
 };
 const INPUT_GROUP_CLASS_NAME = "Layer__InputGroup";
 const InputGroup = react.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
@@ -10245,15 +10289,15 @@ const InputGroup = react.forwardRef(
 );
 const FORM_CLASS_NAME = "Layer__UI__Form";
 const Form = react.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__ */ jsxRuntime.jsx(reactAriaComponents.Form, __spreadProps(__spreadValues({}, restProps), { className: classNames(FORM_CLASS_NAME, className), ref, children }));
   }
 );
 const TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
 const TextField = react.forwardRef(
-  function TextField2(_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__ */ jsxRuntime.jsx(reactAriaComponents.TextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
   }
@@ -10942,8 +10986,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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -10968,8 +11012,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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -11029,13 +11073,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",
@@ -11055,19 +11099,19 @@ const Input$1 = (__a) => {
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -11132,8 +11176,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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -11184,8 +11228,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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -11440,8 +11484,8 @@ const ReceiptsProvider = ({
   const contextData = useReceipts({ bankTransaction, isActive });
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -11483,8 +11527,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__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -11637,8 +11681,8 @@ const openReceiptInNewTab = (url, index2) => (e) => {
       `);
   }
 };
-const BankTransactionReceiptsWithProvider = react.forwardRef((_mb, ref) => {
-  var _nb = _mb, { bankTransaction, isActive } = _nb, props = __objRest(_nb, ["bankTransaction", "isActive"]);
+const BankTransactionReceiptsWithProvider = react.forwardRef((_ob, ref) => {
+  var _pb = _ob, { bankTransaction, isActive } = _pb, props = __objRest(_pb, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })) });
 });
 BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
@@ -11690,8 +11734,8 @@ const BankTransactionReceipts = react.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__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -11887,8 +11931,8 @@ function buildCustomMenuPortal() {
     );
   };
 }
-function ComboBox(_qb) {
-  var _rb = _qb, {
+function ComboBox(_sb) {
+  var _tb = _sb, {
     className,
     selectedValue,
     onSelectedValueChange,
@@ -11906,7 +11950,7 @@ function ComboBox(_qb) {
     isClearable = true,
     isReadOnly = false,
     displayDisabledAsSelected
-  } = _rb, ariaProps = __objRest(_rb, [
+  } = _tb, ariaProps = __objRest(_tb, [
     "className",
     "selectedValue",
     "onSelectedValueChange",
@@ -13103,8 +13147,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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -13182,7 +13226,7 @@ const MatchBadge = ({
   }
   return;
 };
-const MatchForm$1 = ({
+const MatchForm = ({
   classNamePrefix,
   bankTransaction,
   selectedMatchId,
@@ -13535,12 +13579,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"
@@ -13682,9 +13726,7 @@ const BankTransactionMemo = ({ bankTransactionId }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       InputGroup$1,
       {
-        className: "Layer__bank-transaction-memo-input-group",
         name: "memo",
-        label: "Description",
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Textarea,
           {
@@ -13866,9 +13908,9 @@ function BankTransactionFormFields({
   if (!showTags && !showCustomerVendor && !showDescriptions) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pi: "md", pbe: "lg", gap: "md", className: "Layer__bank-transaction-form-fields", children: [
-    showCustomerVendor && !hideCustomerVendor ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionCustomerVendorSelector, { bankTransaction }) : null,
-    showTags && !hideTags ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", children: [
+    showCustomerVendor && !hideCustomerVendor && /* @__PURE__ */ jsxRuntime.jsx(BankTransactionCustomerVendorSelector, { bankTransaction }),
+    showTags && !hideTags && /* @__PURE__ */ jsxRuntime.jsx(
       TagDimensionsGroup,
       {
         value: selectedTags,
@@ -13876,8 +13918,11 @@ function BankTransactionFormFields({
         showLabels: true,
         isReadOnly
       }
-    ) : null,
-    showDescriptions ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id }) : null
+    ),
+    showDescriptions && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", children: "Description" }),
+      /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id })
+    ] })
   ] });
 }
 var CategorizationType = /* @__PURE__ */ ((CategorizationType2) => {
@@ -14073,23 +14118,21 @@ const DateTime = ({
 };
 const CLASS_NAME$8 = "Layer__MoneyText";
 const MoneySpan = react.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,
-      negative: amount < 0,
-      size
+      "positive": amount >= 0,
+      "negative": amount < 0,
+      size,
+      "display-plus-sign": displayPlusSign
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(CLASS_NAME$8, className), ref, children: [
-      displayPlusSign && "+",
-      centsToDollars(Math.abs(amount))
-    ] }));
+    return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames(CLASS_NAME$8, className), ref, children: centsToDollars(Math.abs(amount)) }));
   }
 );
 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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -14220,21 +14263,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__ */ jsxRuntime.jsx(HStack, { gap: "xs", align: "center", className, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", className, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: BadgeSize.SMALL, icon: /* @__PURE__ */ jsxRuntime.jsx(MinimizeTwo, { size: 11 }), children: type === "transfer" ? "Transfer" : "Match" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, size: (_b = (_a = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _a.size) != null ? _b : "md", children: label })
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", className, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: BadgeSize.SMALL, icon: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { size: 11 }), children: "Split" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, size: (_d = (_c = slotProps == null ? void 0 : slotProps.Label) == null ? void 0 : _c.size) != null ? _d : "md", children: label })
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(HStack, { gap: "xs", align: "center", className, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: BadgeSize.SMALL, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers2Icon, { size: 11 }), children: "Category" }),
+    /* @__PURE__ */ jsxRuntime.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;
@@ -14688,9 +14737,9 @@ const ExpandedBankTransactionRow = react.forwardRef(
     submitBtnText = "Save",
     containerWidth,
     showDescriptions,
-    showReceiptUploads
+    showReceiptUploads,
+    showLeftPadding = true
   }, ref) => {
-    var _a, _b;
     const {
       categorize: categorizeBankTransaction2,
       match: matchBankTransaction2
@@ -14708,7 +14757,7 @@ const ExpandedBankTransactionRow = react.forwardRef(
       /* categorize */
     );
     const [selectedMatch, setSelectedMatch] = react.useState(
-      (_b = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) != null ? _b : (_a = bankTransaction == null ? void 0 : bankTransaction.suggested_matches) == null ? void 0 : _a[0]
+      getBankTransactionFirstSuggestedMatch(bankTransaction)
     );
     const [matchFormError, setMatchFormError] = react.useState();
     const bodyRef = react.useRef(null);
@@ -14770,14 +14819,14 @@ const ExpandedBankTransactionRow = react.forwardRef(
         });
       }
     };
-    const save = () => __async(null, null, function* () {
-      var _a2;
+    const save = () => {
+      var _a;
       if (purpose === "match") {
         if (!selectedMatch) {
           setMatchFormError("Select an option to match the transaction");
           return;
-        } else if (selectedMatch && selectedMatch.id !== ((_a2 = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a2.id)) {
-          yield onMatchSubmit(selectedMatch.id);
+        } else if (selectedMatch && selectedMatch.id !== ((_a = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a.id)) {
+          void onMatchSubmit(selectedMatch.id);
           return;
         }
         close2();
@@ -14785,19 +14834,19 @@ const ExpandedBankTransactionRow = react.forwardRef(
       }
       if (!isValid) return;
       const categorizationRequest = buildCategorizeBankTransactionPayloadForSplit(localSplits);
-      yield categorizeBankTransaction2(
+      void categorizeBankTransaction2(
         bankTransaction.id,
         categorizationRequest
       );
       deselect(bankTransaction.id);
       close2();
-    });
+    };
     react.useImperativeHandle(ref, () => ({
       save
     }));
     const onMatchSubmit = (matchId) => __async(null, null, function* () {
-      var _a2;
-      const foundMatch = (_a2 = bankTransaction.suggested_matches) == null ? void 0 : _a2.find(
+      var _a;
+      const foundMatch = (_a = bankTransaction.suggested_matches) == null ? void 0 : _a.find(
         (x) => x.id === matchId
       );
       if (!foundMatch) {
@@ -14815,228 +14864,227 @@ const ExpandedBankTransactionRow = react.forwardRef(
       "span",
       {
         className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
-        children: !isOpen ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${className}__wrapper`, ref: bodyRef, children: [
-          categorizationEnabled ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__content-toggle`, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: `${className}__content`,
-              id: `expanded-${bankTransaction.id}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__content-panels`, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: classNames(
-                        `${className}__match`,
-                        `${className}__content-panel`,
-                        purpose === "match" ? `${className}__content-panel--active` : ""
-                      ),
-                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__content-panel-container`, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        MatchForm$1,
-                        {
-                          classNamePrefix: className,
-                          bankTransaction,
-                          selectedMatchId: selectedMatch == null ? void 0 : selectedMatch.id,
-                          readOnly: !categorizationEnabled,
-                          setSelectedMatch: (suggestedMatch) => {
-                            setMatchFormError(void 0);
-                            setSelectedMatch(suggestedMatch);
-                          },
-                          matchFormError
-                        }
-                      ) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: classNames(
-                        `${className}__splits`,
-                        `${className}__content-panel`,
-                        purpose === "categorize" ? `${className}__content-panel--active` : ""
-                      ),
-                      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__content-panel-container`, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__splits-inputs`, children: effectiveSplits.map((split, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
-                          "div",
+        children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${className}__wrapper`, ref: bodyRef, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pis: showLeftPadding ? "md" : void 0, pbs: "sm", children: [
+            categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsx(HStack, { pi: "md", pbe: "md", pbs: "3xs", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: `${className}__content`,
+                id: `expanded-${bankTransaction.id}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__content-panels`, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          `${className}__match`,
+                          `${className}__content-panel`,
+                          purpose === "match" ? `${className}__content-panel--active` : ""
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__content-panel-container`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          MatchForm,
                           {
-                            className: `${className}__table-cell--split-entry`,
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                AmountInput,
-                                {
-                                  name: `split-${index2}${asListItem ? "-li" : ""}`,
-                                  disabled: index2 === 0 || !categorizationEnabled,
-                                  onChange: updateSplitAmount(index2),
-                                  value: getInputValueForSplitAtIndex(index2, split),
-                                  onBlur: onBlurSplitAmount,
-                                  className: `${className}__table-cell--split-entry__amount`,
-                                  isInvalid: split.amount < 0
-                                }
-                              ),
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                BankTransactionCategoryComboBox,
-                                {
-                                  bankTransaction,
-                                  selectedValue: split.category,
-                                  onSelectedValueChange: (value) => {
-                                    changeCategoryForSplitAtIndex(index2, value);
-                                  },
-                                  isLoading: bankTransaction.processing,
-                                  isDisabled: !categorizationEnabled,
-                                  includeSuggestedMatches: false
-                                }
-                              ),
-                              showTags && /* @__PURE__ */ jsxRuntime.jsx(
-                                TagDimensionsGroup,
-                                {
-                                  value: split.tags,
-                                  onChange: (tags) => changeTags(index2, tags),
-                                  showLabels: false,
-                                  isReadOnly: !categorizationEnabled,
-                                  className: `${className}__table-cell--split-entry__tags`
-                                }
-                              ),
-                              showCustomerVendor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__customer", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                CustomerVendorSelector,
-                                {
-                                  selectedCustomerVendor: split.customerVendor,
-                                  onSelectedCustomerVendorChange: (customerVendor) => changeCustomerVendor(index2, customerVendor),
-                                  placeholder: "Set customer or vendor",
-                                  isReadOnly: !categorizationEnabled,
-                                  showLabel: false
-                                }
-                              ) }),
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__button", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                Button,
-                                {
-                                  onPress: () => removeSplit(index2),
-                                  variant: "outlined",
-                                  icon: true,
-                                  isDisabled: index2 == 0,
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(Trash, { size: 18 })
-                                }
-                              ) })
-                            ]
-                          },
-                          `split-${index2}`
-                        )) }),
-                        splitFormError && /* @__PURE__ */ jsxRuntime.jsx(HStack, { pb: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: splitFormError }) }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__total-and-btns`, children: [
-                          effectiveSplits.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                            Input$1,
-                            {
-                              disabled: true,
-                              leftText: "Total",
-                              inputMode: "numeric",
-                              value: `$${centsToDollars(
-                                effectiveSplits.reduce(
-                                  (x, { amount }) => x + amount,
-                                  0
-                                )
-                              )}`
-                            }
-                          ),
-                          categorizationEnabled ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__splits-buttons`, children: effectiveSplits.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
-                            TextButton,
-                            {
-                              onClick: addSplit,
-                              children: "Add new split"
-                            }
-                          ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                            Button,
+                            classNamePrefix: className,
+                            bankTransaction,
+                            selectedMatchId: selectedMatch == null ? void 0 : selectedMatch.id,
+                            readOnly: !categorizationEnabled,
+                            setSelectedMatch: (suggestedMatch) => {
+                              setMatchFormError(void 0);
+                              setSelectedMatch(suggestedMatch);
+                            },
+                            matchFormError
+                          }
+                        ) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: classNames(
+                          `${className}__splits`,
+                          `${className}__content-panel`,
+                          purpose === "categorize" ? `${className}__content-panel--active` : ""
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__content-panel-container`, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__splits-inputs`, children: effectiveSplits.map((split, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
+                            "div",
                             {
-                              onClick: addSplit,
-                              variant: "outlined",
+                              className: `${className}__table-cell--split-entry`,
                               children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(ScissorsFullOpen, { size: 14 }),
-                                "Split"
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  AmountInput,
+                                  {
+                                    name: `split-${index2}${asListItem ? "-li" : ""}`,
+                                    disabled: index2 === 0 || !categorizationEnabled,
+                                    onChange: updateSplitAmount(index2),
+                                    value: getInputValueForSplitAtIndex(index2, split),
+                                    onBlur: onBlurSplitAmount,
+                                    className: `${className}__table-cell--split-entry__amount`,
+                                    isInvalid: split.amount < 0
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  BankTransactionCategoryComboBox,
+                                  {
+                                    bankTransaction,
+                                    selectedValue: split.category,
+                                    onSelectedValueChange: (value) => {
+                                      changeCategoryForSplitAtIndex(index2, value);
+                                    },
+                                    isLoading: bankTransaction.processing,
+                                    isDisabled: !categorizationEnabled,
+                                    includeSuggestedMatches: false
+                                  }
+                                ),
+                                showTags && /* @__PURE__ */ jsxRuntime.jsx(
+                                  TagDimensionsGroup,
+                                  {
+                                    value: split.tags,
+                                    onChange: (tags) => changeTags(index2, tags),
+                                    showLabels: false,
+                                    isReadOnly: !categorizationEnabled,
+                                    className: `${className}__table-cell--split-entry__tags`
+                                  }
+                                ),
+                                showCustomerVendor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__customer", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  CustomerVendorSelector,
+                                  {
+                                    selectedCustomerVendor: split.customerVendor,
+                                    onSelectedCustomerVendorChange: (customerVendor) => changeCustomerVendor(index2, customerVendor),
+                                    placeholder: "Set customer or vendor",
+                                    isReadOnly: !categorizationEnabled,
+                                    showLabel: false
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__expanded-bank-transaction-row__table-cell--split-entry__button", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  Button,
+                                  {
+                                    onPress: () => removeSplit(index2),
+                                    variant: "outlined",
+                                    icon: true,
+                                    isDisabled: index2 == 0,
+                                    children: /* @__PURE__ */ jsxRuntime.jsx(Trash, { size: 18 })
+                                  }
+                                ) })
                               ]
-                            }
-                          ) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+                            },
+                            `split-${index2}`
+                          )) }),
+                          splitFormError && /* @__PURE__ */ jsxRuntime.jsx(HStack, { pb: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: splitFormError }) }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__total-and-btns`, children: [
+                            effectiveSplits.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                              Input$1,
+                              {
+                                disabled: true,
+                                leftText: "Total",
+                                inputMode: "numeric",
+                                value: `$${centsToDollars(
+                                  effectiveSplits.reduce(
+                                    (x, { amount }) => x + amount,
+                                    0
+                                  )
+                                )}`
+                              }
+                            ),
+                            categorizationEnabled ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__splits-buttons`, children: effectiveSplits.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+                              TextButton,
+                              {
+                                onClick: addSplit,
+                                children: "Add new split"
+                              }
+                            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+                              Button,
+                              {
+                                onClick: addSplit,
+                                variant: "outlined",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(ScissorsFullOpen, { size: 14 }),
+                                  "Split"
+                                ]
+                              }
+                            ) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+                          ] })
                         ] })
-                      ] })
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  BankTransactionFormFields,
-                  {
-                    bankTransaction,
-                    showDescriptions,
-                    hideTags: purpose === "categorize",
-                    hideCustomerVendor: purpose === "categorize"
-                    /* categorize */
-                  }
-                ),
-                showReceiptUploads && /* @__PURE__ */ jsxRuntime.jsx(
-                  BankTransactionReceiptsWithProvider,
-                  {
-                    bankTransaction,
-                    isActive: isOpen,
-                    classNamePrefix: className,
-                    floatingActions: !asListItem
-                  }
-                ),
-                asListItem && categorizationEnabled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__submit-btn`, children: [
-                  bankTransaction.error ? /* @__PURE__ */ jsxRuntime.jsxs(
-                    Text,
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "md", className: "Layer__ExpandedBankTransactionRow__Description", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    BankTransactionFormFields,
                     {
-                      as: "span",
-                      size: TextSize.md,
-                      className: "Layer__unsaved-info",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Unsaved" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(AlertCircle, { size: 12 })
-                      ]
+                      bankTransaction,
+                      showDescriptions,
+                      hideTags: purpose === "categorize",
+                      hideCustomerVendor: purpose === "categorize"
+                      /* categorize */
                     }
-                  ) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    SubmitButton,
+                  ) }),
+                  showReceiptUploads && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            APIErrorNotifications,
-            {
-              bankTransaction,
-              containerWidth
-            }
-          )
+                  ),
+                  asListItem && categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__submit-btn`, children: [
+                    bankTransaction.error && /* @__PURE__ */ jsxRuntime.jsxs(
+                      Text,
+                      {
+                        as: "span",
+                        size: TextSize.md,
+                        className: "Layer__unsaved-info",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Unsaved" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(AlertCircle, { size: 12 })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SubmitButton,
+                      {
+                        onClick: save,
+                        className: "Layer__bank-transaction__submit-btn",
+                        processing: bankTransaction.processing,
+                        active: true,
+                        action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                        children: submitBtnText
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              APIErrorNotifications,
+              {
+                bankTransaction,
+                containerWidth
+              }
+            )
+          ] }) })
         ] })
       }
     );
@@ -15163,8 +15211,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__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -15447,10 +15495,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__ */ jsxRuntime.jsxs("span", { className: "Layer__table-cell-content", children: [
-            isCredit(bankTransaction) ? "+$" : " $",
-            centsToDollars(bankTransaction.amount)
-          ] })
+          children: /* @__PURE__ */ jsxRuntime.jsx(VStack, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+            MoneySpan,
+            {
+              amount: bankTransaction.amount,
+              displayPlusSign: isCredit(bankTransaction),
+              className: "Layer__table-cell-content"
+            }
+          ) })
         })
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15471,7 +15523,7 @@ const BankTransactionRow = ({
             `${className}__actions-cell--${open ? "open" : "close"}`
           ),
           children: open ? /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pie: "md", gap: "md", justify: "end", className: "Layer__bank-transaction-row__category-open", children: [
-            bankTransaction.error ? /* @__PURE__ */ jsxRuntime.jsxs(
+            bankTransaction.error && /* @__PURE__ */ jsxRuntime.jsxs(
               Text,
               {
                 as: "span",
@@ -15482,8 +15534,8 @@ const BankTransactionRow = ({
                   /* @__PURE__ */ jsxRuntime.jsx(AlertCircle, { size: 12 })
                 ]
               }
-            ) : null,
-            categorizationEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+            ),
+            categorizationEnabled && /* @__PURE__ */ jsxRuntime.jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -15497,8 +15549,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__ */ jsxRuntime.jsx(VStack, { children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }) : null,
+            ),
+            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
@@ -15514,26 +15566,36 @@ const BankTransactionRow = ({
               }
             )
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", className: "Layer__bank-transaction-row__category-hstack", children: [
-            categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(
-              BankTransactionCategoryComboBox,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AnimatedContent,
               {
-                bankTransaction,
-                selectedValue: selectedCategory != null ? selectedCategory : null,
-                onSelectedValueChange: (selectedCategory2) => {
-                  setTransactionCategory(bankTransaction.id, selectedCategory2);
-                  setShowRetry(false);
-                },
-                isLoading: bankTransaction.processing
-              }
-            ) : null,
-            categorized ? /* @__PURE__ */ jsxRuntime.jsx(
+                variant: "fade",
+                isOpen: categorizationEnabled && !categorized,
+                className: "Layer__BankTransactionRow__CategoryComboBoxMotionContent",
+                slotProps: { AnimatePresence: { mode: "wait" } },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  BankTransactionCategoryComboBox,
+                  {
+                    bankTransaction,
+                    selectedValue: selectedCategory != null ? selectedCategory : null,
+                    onSelectedValueChange: (selectedCategory2) => {
+                      setTransactionCategory(bankTransaction.id, selectedCategory2);
+                      setShowRetry(false);
+                    },
+                    isLoading: bankTransaction.processing
+                  }
+                )
+              },
+              "category-combobox"
+            ),
+            categorized && /* @__PURE__ */ jsxRuntime.jsx(
               BankTransactionsCategorizedSelectedValue,
               {
                 bankTransaction,
                 className: "Layer__bank-transaction-row__category"
               }
-            ) : null,
-            categorizationEnabled && !categorized && showRetry ? /* @__PURE__ */ jsxRuntime.jsx(
+            ),
+            categorizationEnabled && !categorized && showRetry && /* @__PURE__ */ jsxRuntime.jsx(
               RetryButton,
               {
                 onClick: () => {
@@ -15546,8 +15608,8 @@ const BankTransactionRow = ({
                 error: "Approval failed. Check connection and retry in few seconds.",
                 children: "Retry"
               }
-            ) : null,
-            !categorized && categorizationEnabled && !showRetry ? /* @__PURE__ */ jsxRuntime.jsx(
+            ),
+            !categorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsxRuntime.jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -15561,8 +15623,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__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }) : null,
+            ),
+            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
@@ -15581,7 +15643,7 @@ const BankTransactionRow = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "Layer__bank-transaction-row__expanded-td", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: "Layer__bank-transaction-row__expanded-td", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedContent, { variant: "expand", isOpen: open, children: /* @__PURE__ */ jsxRuntime.jsx(
       ExpandedBankTransactionRow,
       {
         ref: expandedRowRef,
@@ -15594,7 +15656,7 @@ const BankTransactionRow = ({
         showReceiptUploads,
         showTooltips
       }
-    ) }) })
+    ) }, `expanded-${bankTransaction.id}`) }) })
   ] });
 };
 const BankTransactionsCategorizedSelectedValue = (props) => {
@@ -15621,6 +15683,40 @@ const normalizeFromBankTransaction = (bankTransaction) => {
     label: (_e = (_d = bankTransaction.category) == null ? void 0 : _d.display_name) != null ? _e : ""
   };
 };
+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__ */ jsxRuntime.jsx(
+      BankTransactionsCategorizedSelectedValue,
+      {
+        bankTransaction,
+        className,
+        slotProps: { Label: { size: "sm" } }
+      }
+    );
+  }
+  return selectedCategory ? /* @__PURE__ */ jsxRuntime.jsx(
+    BankTransactionsUncategorizedSelectedValue,
+    {
+      selectedValue: selectedCategory != null ? selectedCategory : null,
+      className,
+      slotProps: { Label: { size: "sm" } }
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    BankTransactionsBaseSelectedValue,
+    {
+      type: "placeholder",
+      label: "No category selected",
+      className,
+      slotProps: { Label: { size: "sm" } }
+    }
+  );
+};
 const BankTransactionsListItem = ({
   index: index2,
   dateFormat,
@@ -15675,6 +15771,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",
@@ -15731,14 +15830,14 @@ const BankTransactionsListItem = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         MoneySpan,
         {
-          className: `Layer__bank-transaction-list-item__amount-${isCredit(bankTransaction) ? "credit" : "debit"}`,
           amount: bankTransaction.amount,
-          displayPlusSign: isCredit(bankTransaction)
+          displayPlusSign: isCredit(bankTransaction),
+          size: "md"
         }
       )
     ] }),
-    !categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", children: /* @__PURE__ */ jsxRuntime.jsx(
+    !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedContent, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsxRuntime.jsx(
       ExpandedBankTransactionRow,
       {
         ref: expandedRowRef,
@@ -15751,11 +15850,12 @@ const BankTransactionsListItem = ({
         containerWidth,
         showDescriptions,
         showReceiptUploads,
-        showTooltips
+        showTooltips,
+        showLeftPadding: false
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__bank-transaction-list-item__base-row", children: [
-      categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(
+    ) }, `expanded-${bankTransaction.id}`) }),
+    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         BankTransactionCategoryComboBox,
         {
           bankTransaction,
@@ -15766,48 +15866,36 @@ const BankTransactionsListItem = ({
           },
           isLoading: bankTransaction.processing
         }
-      ) : null,
-      categorized ? /* @__PURE__ */ jsxRuntime.jsx(
-        BankTransactionsCategorizedSelectedValue,
-        {
-          bankTransaction
-        }
-      ) : selectedCategory ? /* @__PURE__ */ jsxRuntime.jsx(
-        BankTransactionsUncategorizedSelectedValue,
-        {
-          selectedValue: selectedCategory
-        }
-      ) : null,
-      categorizationEnabled && !categorized && !showRetry ? /* @__PURE__ */ jsxRuntime.jsx(
+      ),
+      !showRetry && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      ),
+      showRetry && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
+    !openExpandedRow && categorizationEnabled && categorized && /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsListItemCategory,
+      {
+        bankTransaction
+      }
+    ),
+    bankTransaction.error && showRetry && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." })
   ] });
 };
 const useBankTransactionsTableCheckboxState = ({ bankTransactions }) => {
@@ -15912,53 +16000,52 @@ const BankTransactionsList = ({
     ) })
   ] });
 };
-const CloseIcon = (_Cb) => {
-  var _Db = _Cb, { size = 12 } = _Db, props = __objRest(_Db, ["size"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    __spreadProps(__spreadValues({
-      viewBox: "0 0 12 12",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props), {
-      width: size,
-      height: size,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M8.75 3.25L3.25 8.75",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M3.25 3.25L8.75 8.75",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    })
-  );
+const useTransactionToOpen = () => {
+  const [transactionIdToOpen, setTransactionIdToOpen] = react.useState(void 0);
+  const clearTransactionIdToOpen = react.useCallback(() => setTransactionIdToOpen(void 0), []);
+  return {
+    transactionIdToOpen,
+    setTransactionIdToOpen,
+    clearTransactionIdToOpen
+  };
 };
-const CloseButton = (_Eb) => {
-  var _Fb = _Eb, {
-    className,
-    textOnly = false
-  } = _Fb, props = __objRest(_Fb, [
-    "className",
-    "textOnly"
-  ]);
-  const baseClassName2 = classNames("Layer__btn", "Layer__back-btn", className);
-  return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, props), { className: baseClassName2, children: textOnly ? "Back" : /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16 }) }));
+const TransactionToOpenContext = react.createContext({
+  transactionIdToOpen: void 0,
+  setTransactionIdToOpen: () => void 0,
+  clearTransactionIdToOpen: () => void 0
+});
+const BankTransactionsMobileListItemCheckbox = ({
+  bulkActionsEnabled,
+  bankTransaction,
+  checkboxContainerRef
+}) => {
+  const internalRef = react.useRef(null);
+  const ref = checkboxContainerRef || internalRef;
+  const bookkeepingStatus = useEffectiveBookkeepingStatus();
+  const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
+  const { select, deselect } = useBulkSelectionActions();
+  const isSelected = useIdIsSelected();
+  const isTransactionSelected = isSelected(bankTransaction.id);
+  if (!categorizationEnabled || !bulkActionsEnabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(VStack, { align: "start", pis: "md", pie: "2xs", ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Checkbox,
+    {
+      size: "md",
+      isSelected: isTransactionSelected,
+      onChange: (selected) => {
+        if (selected) {
+          select(bankTransaction.id);
+        } else {
+          deselect(bankTransaction.id);
+        }
+      }
+    }
+  ) });
 };
-const Paperclip = (_Gb) => {
-  var _Hb = _Gb, { size = 20 } = _Hb, props = __objRest(_Hb, ["size"]);
+const Paperclip = (_Eb) => {
+  var _Fb = _Eb, { size = 20 } = _Fb, props = __objRest(_Fb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -15980,6 +16067,73 @@ const Paperclip = (_Gb) => {
     })
   );
 };
+const BusinessFormMobileItem = ({
+  option
+}) => {
+  const value = option.value.value;
+  const label = option.value.label;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.GridListItem,
+    {
+      id: value,
+      textValue: label,
+      className: "Layer__BusinessFormMobileItem",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", pi: "md", pb: "sm", children: [
+        !option.asLink && /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            slot: "selection",
+            variant: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", children: label }),
+        option.asLink && /* @__PURE__ */ jsxRuntime.jsx(
+          ChevronRight,
+          {
+            size: 16,
+            className: "Layer__BusinessFormMobileItem__link-icon"
+          }
+        )
+      ] })
+    },
+    value
+  );
+};
+const BusinessFormMobile = ({
+  options: options2,
+  selectedId,
+  onSelect,
+  readOnly
+}) => {
+  const handleSelectionChange = react.useCallback((keys2) => {
+    if (readOnly) return;
+    const selectedKey = [...keys2][0];
+    const selectedOption = options2.find((opt) => opt.value.value === selectedKey);
+    if (selectedOption) {
+      onSelect(selectedOption);
+    }
+  }, [options2, onSelect, readOnly]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", children: "Select category" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.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__ */ jsxRuntime.jsx(
+          BusinessFormMobileItem,
+          {
+            option
+          },
+          option.value.value
+        ))
+      }
+    )
+  ] });
+};
 const ActionableList = ({
   options: options2,
   onClick,
@@ -16053,8 +16207,8 @@ const flattenCategories = (categories) => {
     return leafCategories.map((cat) => new CategoryAsOption(cat));
   });
 };
-const X = (_Ib) => {
-  var _Jb = _Ib, { size = 18 } = _Jb, props = __objRest(_Jb, ["size"]);
+const X = (_Gb) => {
+  var _Hb = _Gb, { size = 18 } = _Hb, props = __objRest(_Hb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -16088,11 +16242,11 @@ const X = (_Ib) => {
   );
 };
 const CLASS_NAME$7 = "Layer__MinimalSearchField";
-function MinimalSearchField(_Kb) {
-  var _Lb = _Kb, {
+function MinimalSearchField(_Ib) {
+  var _Jb = _Ib, {
     placeholder,
     isDisabled
-  } = _Lb, restProps = __objRest(_Lb, [
+  } = _Jb, restProps = __objRest(_Jb, [
     "placeholder",
     "isDisabled"
   ]);
@@ -16108,8 +16262,8 @@ function MinimalSearchField(_Kb) {
   ] }));
 }
 const CLASS_NAME$6 = "Layer__SearchField";
-function SearchField(_Mb) {
-  var _Nb = _Mb, { slot = "search", className, label, isDisabled } = _Nb, restProps = __objRest(_Nb, ["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__ */ jsxRuntime.jsxs(InputGroup, { slot, className: combinedClassName, children: [
     /* @__PURE__ */ jsxRuntime.jsx(VStack, { slot: "icon", align: "center", justify: "center", className: "Layer__SearchField__Icon", "data-disabled": isDisabled || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 14 }) }),
@@ -16126,7 +16280,7 @@ function SearchField(_Mb) {
 const isGroup = (item) => {
   return "categories" in item;
 };
-const BusinessCategories = ({
+const BankTransactionsMobileListBusinessCategories = ({
   select,
   selectedId,
   showTooltips
@@ -16201,7 +16355,7 @@ const CategorySelectDrawer = ({
   onOpenChange
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Drawer, { isOpen, onOpenChange, variant: "mobile-drawer", isDismissable: true, children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsx(
-    BusinessCategories,
+    BankTransactionsMobileListBusinessCategories,
     {
       select: (option) => {
         onSelect(option);
@@ -16212,7 +16366,11 @@ const CategorySelectDrawer = ({
     }
   ) });
 };
-const BusinessForm$1 = ({
+const SELECT_CATEGORY_VALUE = "SELECT_CATEGORY";
+const isSelectCategoryOption = (value) => {
+  return isPlaceholderAsOption(value) && value.value === SELECT_CATEGORY_VALUE;
+};
+const BankTransactionsMobileListBusinessForm = ({
   bankTransaction,
   showCategorization,
   showDescriptions,
@@ -16221,6 +16379,17 @@ const BusinessForm$1 = ({
 }) => {
   const receiptsRef = react.useRef(null);
   const { categorize: categorizeBankTransaction2, isLoading } = useBankTransactionsContext();
+  const [sessionCategories, setSessionCategories] = react.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] = react.useState(false);
@@ -16231,42 +16400,26 @@ const BusinessForm$1 = ({
     }
   }, [bankTransaction.error]);
   const options2 = react.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 {
@@ -16289,22 +16442,28 @@ const BusinessForm$1 = ({
       true
     );
   };
+  const onDrawerSelect = react.useCallback((category) => {
+    if (!category) return;
+    setSessionCategories((prev) => new Map(prev).set(category.value, category));
+    setTransactionCategory(bankTransaction.id, category);
+  }, [bankTransaction.id, setTransactionCategory]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__business-form", children: [
-      showCategorization ? /* @__PURE__ */ jsxRuntime.jsx(
-        ActionableList,
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+      showCategorization && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         BankTransactionFormFields,
         {
           bankTransaction,
-          showDescriptions
+          showDescriptions,
+          hideCustomerVendor: true,
+          hideTags: true
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -16325,7 +16484,7 @@ const BusinessForm$1 = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", children: [
         showReceiptUploads && /* @__PURE__ */ jsxRuntime.jsx(
           FileInput,
           {
@@ -16338,33 +16497,22 @@ const BusinessForm$1 = ({
             icon: /* @__PURE__ */ jsxRuntime.jsx(Paperclip, {})
           }
         ),
-        options2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-          Button$1,
-          {
-            onClick: () => {
-              setIsDrawerOpen(true);
-            },
-            fullWidth: true,
-            variant: ButtonVariant.secondary,
-            children: "Select category"
-          }
-        ) : null,
-        showCategorization && options2.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-          Button$1,
+        showCategorization && sessionCategories.size > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       CategorySelectDrawer,
       {
-        onSelect: (category) => setTransactionCategory(bankTransaction.id, category),
+        onSelect: onDrawerSelect,
         selectedId: selectedCategory == null ? void 0 : selectedCategory.value,
         showTooltips,
         isOpen: isDrawerOpen,
@@ -16388,7 +16536,7 @@ const isAlreadyAssigned = (bankTransaction) => {
     )
   );
 };
-const PersonalForm = ({
+const BankTransactionsMobileListPersonalForm = ({
   bankTransaction,
   showReceiptUploads,
   showDescriptions,
@@ -16419,12 +16567,14 @@ const PersonalForm = ({
     );
   };
   const alreadyAssigned = isAlreadyAssigned(bankTransaction);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__personal-form", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionFormFields,
       {
         bankTransaction,
-        showDescriptions
+        showDescriptions,
+        hideCustomerVendor: true,
+        hideTags: true
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -16445,7 +16595,7 @@ const PersonalForm = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", children: [
       showReceiptUploads && /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
@@ -16458,98 +16608,131 @@ const PersonalForm = ({
           icon: /* @__PURE__ */ jsxRuntime.jsx(Paperclip, {})
         }
       ),
-      showCategorization ? /* @__PURE__ */ jsxRuntime.jsx(
-        Button$1,
+      showCategorization && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
         {
           fullWidth: true,
-          disabled: alreadyAssigned || isLoading || bankTransaction.processing,
           onClick: save,
-          children: isLoading || bankTransaction.processing ? "Saving..." : alreadyAssigned ? "Saved as Personal" : "Categorize as Personal"
+          isDisabled: alreadyAssigned || isLoading || bankTransaction.processing,
+          children: bankTransaction.processing || isLoading ? "Confirming..." : alreadyAssigned ? "Confirmed" : "Mark as Personal"
         }
-      ) : null
+      )
     ] }),
     bankTransaction.error && showRetry ? /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
   ] });
 };
+const DATE_FORMAT = "LLL d";
+const BankTransactionsAmountDate = ({ amount, date: date2, slotProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    VStack,
+    {
+      align: "end",
+      gap: "3xs",
+      pb: "sm",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(HStack, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          MoneySpan,
+          __spreadValues({
+            amount
+          }, slotProps == null ? void 0 : slotProps.MoneySpan)
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DateTime,
+          {
+            value: date2,
+            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__ */ jsxRuntime.jsx(
+    reactAriaComponents.GridListItem,
+    {
+      id: match.id,
+      textValue: match.details.description,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", justify: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              slot: "selection",
+              variant: "round",
+              className: "Layer__MatchFormMobileItem__Checkbox"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", children: match.details.description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BankTransactionsAmountDate,
+          {
+            amount: match.details.amount,
+            date: match.details.date,
+            slotProps: {
+              MoneySpan: { size: "sm", displayPlusSign: isCredit(bankTransaction) },
+              DateTime: { size: "xs" }
+            }
+          }
+        ),
+        inAppLink
+      ] })
+    },
+    match.id
+  );
+};
 const MatchFormMobile = ({
-  classNamePrefix,
   bankTransaction,
   selectedMatchId,
   setSelectedMatch,
   matchFormError,
   readOnly
 }) => {
-  var _a;
   const { renderInAppLink } = useInAppLinkContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classNamePrefix}__match-list`, children: [
-    (_a = bankTransaction.suggested_matches) == null ? void 0 : _a.map((match, idx) => {
-      const matchDetails = match.details ? decodeMatchDetails(match.details) : void 0;
-      const inAppLink = renderInAppLink && matchDetails ? renderInAppLink(convertMatchDetailsToLinkingMetadata(matchDetails)) : null;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: classNames(
-            `${classNamePrefix}__match-item`,
-            match.id === selectedMatchId ? `${classNamePrefix}__match-item--selected` : ""
-          ),
-          onClick: () => {
-            if (readOnly) {
-              return;
-            }
-            setSelectedMatch(match);
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classNamePrefix}__match-item__col-details`, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classNamePrefix}__match-item__heading`, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Text,
-                  {
-                    className: `${classNamePrefix}__match-item__name`,
-                    as: "span",
-                    children: match.details.description
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  Text,
-                  {
-                    className: `${classNamePrefix}__match-item__amount`,
-                    as: "span",
-                    children: [
-                      "$",
-                      centsToDollars(match.details.amount)
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classNamePrefix}__match-item__details`, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(HStack, { children: inAppLink }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Text,
-                  {
-                    className: `${classNamePrefix}__match-item__date`,
-                    size: TextSize.sm,
-                    as: "span",
-                    children: dateFns.format(dateFns.parseISO(match.details.date), MONTH_DAY_FORMAT)
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classNamePrefix}__match-item__col-status`, children: selectedMatchId && selectedMatchId === match.id ? /* @__PURE__ */ jsxRuntime.jsx(
-              Check,
-              {
-                size: 16,
-                className: `${classNamePrefix}__match-item__selected-icon`
-              }
-            ) : null })
-          ]
-        },
-        idx
-      );
-    }),
-    matchFormError && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: matchFormError })
-  ] });
+  const suggestedMatches = bankTransaction.suggested_matches;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.GridList,
+    {
+      "aria-label": "Select a match",
+      selectionMode: "single",
+      selectedKeys: selectedMatchId ? /* @__PURE__ */ new Set([selectedMatchId]) : /* @__PURE__ */ new Set(),
+      onSelectionChange: (keys2) => {
+        if (readOnly) return;
+        const selectedKey = [...keys2][0];
+        const selectedMatch = suggestedMatches == null ? void 0 : suggestedMatches.find((m) => m.id === selectedKey);
+        if (selectedMatch) {
+          setSelectedMatch(selectedMatch);
+        }
+      },
+      className: "Layer__MatchFormMobile",
+      children: [
+        suggestedMatches == null ? void 0 : suggestedMatches.map((match) => {
+          const matchDetails = match.details ? decodeMatchDetails(match.details) : void 0;
+          const inAppLink = renderInAppLink && matchDetails ? renderInAppLink(convertMatchDetailsToLinkingMetadata(matchDetails)) : null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            MatchFormMobileItem,
+            {
+              match,
+              bankTransaction,
+              inAppLink
+            },
+            match.id
+          );
+        }),
+        matchFormError && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: matchFormError })
+      ]
+    }
+  );
 };
-const MatchForm = ({
+const BankTransactionsMobileListMatchForm = ({
   bankTransaction,
   showReceiptUploads,
   showDescriptions,
@@ -16559,7 +16742,7 @@ const MatchForm = ({
   const receiptsRef = react.useRef(null);
   const { match: matchBankTransaction2, isLoading } = useBankTransactionsContext();
   const [selectedMatch, setSelectedMatch] = react.useState(
-    getBankTransactionMatchAsSuggestedMatch(bankTransaction)
+    getBankTransactionFirstSuggestedMatch(bankTransaction)
   );
   const [formError, setFormError] = react.useState();
   const showRetry = Boolean(bankTransaction.error);
@@ -16573,24 +16756,24 @@ const MatchForm = ({
     }
     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__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: TextWeight.bold, size: TextSize.sm, children: "Find match" }),
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", children: "Find Match" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       MatchFormMobile,
       {
-        classNamePrefix: "Layer__bank-transaction-mobile-list-item",
         readOnly: !showCategorization,
         bankTransaction,
         selectedMatchId: selectedMatch == null ? void 0 : selectedMatch.id,
@@ -16604,28 +16787,21 @@ const MatchForm = ({
       BankTransactionFormFields,
       {
         bankTransaction,
-        showDescriptions
+        showDescriptions,
+        hideCustomerVendor: true,
+        hideTags: true
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+    showReceiptUploads && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          BankTransactionReceipts,
-          {
-            ref: receiptsRef,
-            floatingActions: false,
-            hideUploadButtons: true,
-            label: "Receipts"
-          }
-        )
+        ref: receiptsRef,
+        floatingActions: false,
+        hideUploadButtons: true,
+        label: "Receipts"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", children: [
       showReceiptUploads && /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
@@ -16639,49 +16815,37 @@ const MatchForm = ({
         }
       ),
       showCategorization && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ErrorText, { children: formError }),
-    showRetry ? /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
+    showRetry && /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { fluid: true, children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            ChevronDown,
-            {
-              size: 16,
-              className: "Layer__category-menu__drawer-btn__arrow"
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { children: (_a = value == null ? void 0 : value.label) != null ? _a : "Select..." }),
+          /* @__PURE__ */ jsxRuntime.jsx(Spacer, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 16 })
         ]
       }
     ),
@@ -16697,7 +16861,7 @@ const CategorySelectDrawerWithTrigger = ({
     )
   ] });
 };
-const SplitForm = ({
+const BankTransactionsMobileListSplitForm = ({
   bankTransaction,
   showTooltips,
   showCategorization,
@@ -16726,84 +16890,90 @@ const SplitForm = ({
     bankTransaction,
     selectedCategory
   });
+  const effectiveSplits = showCategorization ? localSplits : [];
+  const addSplitButtonText = effectiveSplits.length > 1 ? "Add new split" : "Split";
   react.useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const save = () => __async(null, null, function* () {
+  const save = () => {
     if (!isValid) return;
     const categorizationRequest = buildCategorizeBankTransactionPayloadForSplit(localSplits);
-    yield categorizeBankTransaction2(
+    void categorizeBankTransaction2(
       bankTransaction.id,
       categorizationRequest
     );
     deselect(bankTransaction.id);
     close();
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    showCategorization ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  };
+  const handleCategoryChange = react.useCallback((index2) => (value) => {
+    changeCategoryForSplitAtIndex(index2, value);
+  }, [changeCategoryForSplitAtIndex]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+    showCategorization && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { weight: TextWeight.bold, size: TextSize.sm, children: "Split transaction" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transactions__table-cell__header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, children: "Category" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, children: "Amount" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transactions__splits-inputs", children: [
-        localSplits.map((split, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "Layer__bank-transactions__table-cell--split-entry",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transactions__table-cell--split-entry__right-col", children: /* @__PURE__ */ jsxRuntime.jsx(
-                CategorySelectDrawerWithTrigger,
-                {
-                  value: split.category,
-                  onChange: (value) => changeCategoryForSplitAtIndex(index2, value),
-                  showTooltips
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AmountInput,
-                {
-                  name: `split-${index2}`,
-                  disabled: index2 === 0 || !showCategorization,
-                  onChange: updateSplitAmount(index2),
-                  value: getInputValueForSplitAtIndex(index2, split),
-                  onBlur: onBlurSplitAmount,
-                  isInvalid: split.amount < 0
-                }
-              ),
-              index2 > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                Button$1,
-                {
-                  className: "Layer__bank-transactions__table-cell--split-entry__merge-btn",
-                  onClick: () => removeSplit(index2),
-                  rightIcon: /* @__PURE__ */ jsxRuntime.jsx(Trash, { size: 16 }),
-                  variant: ButtonVariant.secondary,
-                  iconOnly: true
-                }
-              )
-            ]
-          },
-          `split-${index2}`
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TextButton,
-          {
-            onClick: addSplit,
-            disabled: isLoading,
-            className: "Layer__add-new-split",
-            children: "Add new split"
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", children: localSplits.map((split, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
+        HStack,
+        {
+          gap: "xs",
+          align: "center",
+          justify: "space-between",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CategorySelectDrawerWithTrigger,
+              {
+                value: split.category,
+                onChange: handleCategoryChange(index2),
+                showTooltips
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AmountInput,
+              {
+                name: `split-${index2}`,
+                disabled: index2 === 0 || !showCategorization,
+                onChange: updateSplitAmount(index2),
+                value: getInputValueForSplitAtIndex(index2, split),
+                onBlur: onBlurSplitAmount,
+                isInvalid: split.amount < 0,
+                className: "Layer__BankTransactionsMobileSplitForm__AmountInput"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                onClick: () => removeSplit(index2),
+                variant: "outlined",
+                icon: true,
+                isDisabled: index2 == 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(Trash, { size: 16 })
+              }
+            )
+          ]
+        },
+        `split-${index2}`
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx(HStack, { justify: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          onClick: addSplit,
+          variant: "outlined",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Scissors, { size: 14 }),
+            addSplitButtonText
+          ]
+        }
+      ) }),
       splitFormError && /* @__PURE__ */ jsxRuntime.jsx(HStack, { pbe: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: splitFormError }) })
-    ] }) : null,
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionFormFields,
       {
         bankTransaction,
-        showDescriptions
+        showDescriptions,
+        hideCustomerVendor: true,
+        hideTags: true
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -16824,7 +16994,7 @@ const SplitForm = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__actions", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", children: [
       showReceiptUploads && /* @__PURE__ */ jsxRuntime.jsx(
         FileInput,
         {
@@ -16838,19 +17008,19 @@ const SplitForm = ({
         }
       ),
       showCategorization && /* @__PURE__ */ jsxRuntime.jsx(
-        Button$1,
+        Button,
         {
           fullWidth: true,
-          onClick: () => void save(),
-          disabled: isLoading || bankTransaction.processing,
-          children: isLoading || bankTransaction.processing ? "Saving..." : "Save"
+          onClick: save,
+          isDisabled: isLoading || bankTransaction.processing || !isValid,
+          children: bankTransaction.processing || isLoading ? "Confirming..." : "Confirm"
         }
       )
     ] }),
-    bankTransaction.error && showRetry ? /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
+    bankTransaction.error && showRetry && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." })
   ] });
 };
-const SplitAndMatchForm = ({
+const BankTransactionsMobileListSplitAndMatchForm = ({
   bankTransaction,
   showTooltips,
   showReceiptUploads,
@@ -16862,9 +17032,9 @@ const SplitAndMatchForm = ({
     bankTransaction.category ? "categorize" : anyMatch ? "match" : "categorize"
     /* categorize */
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     formType === "categorize" && /* @__PURE__ */ jsxRuntime.jsx(
-      SplitForm,
+      BankTransactionsMobileListSplitForm,
       {
         bankTransaction,
         showTooltips,
@@ -16874,7 +17044,7 @@ const SplitAndMatchForm = ({
       }
     ),
     formType === "match" && /* @__PURE__ */ jsxRuntime.jsx(
-      MatchForm,
+      BankTransactionsMobileListMatchForm,
       {
         bankTransaction,
         showReceiptUploads,
@@ -16882,17 +17052,16 @@ const SplitAndMatchForm = ({
         showCategorization
       }
     ),
-    showCategorization && anyMatch && formType === "match" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns", children: /* @__PURE__ */ jsxRuntime.jsx(TextButton, { onClick: () => setFormType(
+    showCategorization && anyMatch && (formType === "match" ? /* @__PURE__ */ jsxRuntime.jsx(TextButton, { onClick: () => setFormType(
       "categorize"
       /* categorize */
-    ), children: "or split transaction" }) }) : null,
-    showCategorization && anyMatch && formType === "categorize" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transaction-mobile-list-item__switch-form-btns", children: /* @__PURE__ */ jsxRuntime.jsx(TextButton, { onClick: () => setFormType(
+    ), children: "or split transaction" }) : /* @__PURE__ */ jsxRuntime.jsx(TextButton, { onClick: () => setFormType(
       "match"
       /* match */
-    ), children: "or find match" }) }) : null
+    ), children: "or find match" }))
   ] });
 };
-const BankTransactionMobileForms = ({
+const BankTransactionsMobileForms = ({
   purpose,
   bankTransaction,
   showTooltips,
@@ -16905,7 +17074,7 @@ const BankTransactionMobileForms = ({
     switch (purpose) {
       case Purpose.business:
         return /* @__PURE__ */ jsxRuntime.jsx(
-          BusinessForm$1,
+          BankTransactionsMobileListBusinessForm,
           {
             bankTransaction,
             showCategorization,
@@ -16916,7 +17085,7 @@ const BankTransactionMobileForms = ({
         );
       case Purpose.personal:
         return /* @__PURE__ */ jsxRuntime.jsx(
-          PersonalForm,
+          BankTransactionsMobileListPersonalForm,
           {
             bankTransaction,
             showReceiptUploads,
@@ -16926,7 +17095,7 @@ const BankTransactionMobileForms = ({
         );
       case Purpose.more:
         return /* @__PURE__ */ jsxRuntime.jsx(
-          SplitAndMatchForm,
+          BankTransactionsMobileListSplitAndMatchForm,
           {
             bankTransaction,
             showCategorization,
@@ -16939,75 +17108,69 @@ const BankTransactionMobileForms = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transaction-mobile-list-item__form-container", children: getContent() }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: getContent() });
 };
-const useTransactionToOpen = () => {
-  const [transactionIdToOpen, setTransactionIdToOpen] = react.useState(void 0);
-  const clearTransactionIdToOpen = react.useCallback(() => setTransactionIdToOpen(void 0), []);
-  return {
-    transactionIdToOpen,
-    setTransactionIdToOpen,
-    clearTransactionIdToOpen
-  };
-};
-const TransactionToOpenContext = react.createContext({
-  transactionIdToOpen: void 0,
-  setTransactionIdToOpen: () => void 0,
-  clearTransactionIdToOpen: () => void 0
-});
-const BankTransactionsMobileListItemCheckbox = ({
-  bulkActionsEnabled,
+const PURPOSE_TOGGLE_OPTIONS = [
+  {
+    value: "business",
+    label: "Business",
+    style: { minWidth: 84 }
+  },
+  {
+    value: "personal",
+    label: "Personal",
+    style: { minWidth: 84 }
+  },
+  {
+    value: "more",
+    label: "More",
+    style: { minWidth: 84 }
+  }
+];
+const BankTransactionsMobileListItemExpandedRow = ({
   bankTransaction,
-  checkboxContainerRef
+  showCategorization,
+  showDescriptions,
+  showReceiptUploads,
+  showTooltips
 }) => {
-  const internalRef = react.useRef(null);
-  const ref = checkboxContainerRef || internalRef;
-  const bookkeepingStatus = useEffectiveBookkeepingStatus();
-  const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
-  const { select, deselect } = useBulkSelectionActions();
-  const isSelected = useIdIsSelected();
-  const isTransactionSelected = isSelected(bankTransaction.id);
-  if (!categorizationEnabled || !bulkActionsEnabled) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(VStack, { align: "start", pis: "md", pie: "2xs", ref, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Checkbox,
-    {
-      size: "md",
-      isSelected: isTransactionSelected,
-      onChange: (selected) => {
-        if (selected) {
-          select(bankTransaction.id);
-        } else {
-          deselect(bankTransaction.id);
-        }
+  const [purpose, setPurpose] = react.useState(getInitialPurpose(bankTransaction));
+  const onChangePurpose = (event) => setPurpose(event.target.value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pi: "md", gap: "md", pbe: "md", children: [
+    showCategorization && /* @__PURE__ */ jsxRuntime.jsx(
+      Toggle,
+      {
+        name: `purpose-${bankTransaction.id}`,
+        size: ToggleSize.medium,
+        options: PURPOSE_TOGGLE_OPTIONS,
+        selected: purpose,
+        onChange: onChangePurpose
       }
-    }
-  ) });
-};
-const BankTransactionsMobileListItemCategory = ({
-  bankTransaction
-}) => {
-  const categorized = isCategorized(bankTransaction);
-  const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
-  if (categorized) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BankTransactionsCategorizedSelectedValue,
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsMobileForms,
       {
+        purpose,
         bankTransaction,
-        className: "Layer__bankTransactionsMobileListItemCategory",
-        slotProps: { Label: { size: "sm" } }
+        showCategorization,
+        showDescriptions,
+        showReceiptUploads,
+        showTooltips
       }
-    );
-  }
-  return selectedCategory ? /* @__PURE__ */ jsxRuntime.jsx(
-    BankTransactionsUncategorizedSelectedValue,
-    {
-      selectedValue: selectedCategory != null ? selectedCategory : null,
-      className: "Layer__bankTransactionsMobileListItemCategory",
-      slotProps: { Label: { size: "sm" } }
+    )
+  ] });
+};
+const getInitialPurpose = (bankTransaction) => {
+  if (bankTransaction.category) {
+    if (bankTransaction.category.type === "Exclusion") {
+      return Purpose.personal;
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, className: "Layer__bankTransactionsMobileListItemCategory", size: "sm", children: "No category selected" });
+    if (bankTransaction.categorization_status === CategorizationStatus.SPLIT) {
+      return Purpose.more;
+    }
+    return Purpose.business;
+  }
+  return hasMatch(bankTransaction) ? Purpose.more : Purpose.business;
 };
 var Purpose = /* @__PURE__ */ ((Purpose2) => {
   Purpose2["business"] = "business";
@@ -17015,7 +17178,6 @@ var Purpose = /* @__PURE__ */ ((Purpose2) => {
   Purpose2["more"] = "more";
   return Purpose2;
 })(Purpose || {});
-const DATE_FORMAT = "LLL d";
 const getAssignedValue = (bankTransaction, renderInAppLink) => {
   var _a, _b, _c, _d;
   if (bankTransaction.categorization_status === CategorizationStatus.SPLIT) {
@@ -17051,21 +17213,8 @@ const BankTransactionsMobileListItem = ({
   } = react.useContext(TransactionToOpenContext);
   const { shouldHideAfterCategorize } = useBankTransactionsContext();
   const categorized = isCategorized(bankTransaction);
-  const formRowRef = useElementSize(
-    (_a2, _b2, { height: height2 }) => setHeight(height2)
-  );
-  const headingRowRef = useElementSize((_a2, _b2, { height: height2 }) => {
-    setHeadingHeight(height2);
-  });
   const itemRef = react.useRef(null);
-  const [removeAnim, setRemoveAnim] = react.useState(false);
-  const [purpose, setPurpose] = react.useState(
-    bankTransaction.category ? bankTransaction.category.type === "Exclusion" ? "personal" : bankTransaction.categorization_status === CategorizationStatus.SPLIT ? "more" : "business" : hasMatch(bankTransaction) ? "more" : "business"
-    /* business */
-  );
   const [open, setOpen] = react.useState(isFirstItem);
-  const [height, setHeight] = react.useState(0);
-  const [headingHeight, setHeadingHeight] = react.useState(63);
   const openNext = () => {
     if (editable && itemRef.current && itemRef.current.nextSibling) {
       const txId = itemRef.current.nextSibling.getAttribute(
@@ -17095,10 +17244,12 @@ const BankTransactionsMobileListItem = ({
     }
   }, [bankTransaction.id, clearTransactionIdToOpen, transactionIdToOpen]);
   react.useEffect(() => {
-    if (!removeAnim && bankTransaction.recently_categorized) {
+    if (bankTransaction.recently_categorized) {
       if (editable && shouldHideAfterCategorize()) {
-        setRemoveAnim(true);
-        openNext();
+        setTimeout(() => {
+          removeTransaction(bankTransaction);
+          openNext();
+        }, 300);
       } else {
         close2();
       }
@@ -17109,14 +17260,10 @@ const BankTransactionsMobileListItem = ({
     bankTransaction.match
   ]);
   const toggleOpen = () => {
-    if (open) {
-      setHeight(0);
-    }
     setOpen(!open);
   };
   const close2 = () => {
     setOpen(false);
-    setHeight(0);
   };
   const checkboxContainerRef = react.useRef(null);
   const handleRowClick = (event) => {
@@ -17141,7 +17288,11 @@ const BankTransactionsMobileListItem = ({
       }, 300);
     }
   }, [bankTransaction.recently_categorized]);
-  const onChangePurpose = (event) => setPurpose(event.target.value);
+  react.useEffect(() => {
+    if (bulkActionsEnabled) {
+      close2();
+    }
+  }, [bulkActionsEnabled]);
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const { select, deselect } = useBulkSelectionActions();
@@ -17153,169 +17304,96 @@ const BankTransactionsMobileListItem = ({
   const openClassName = open ? `${className}--expanded` : "";
   const rowClassName = classNames(
     className,
-    removeAnim ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
     isVisible ? "show" : ""
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ref: itemRef, className: rowClassName, "data-item": bankTransaction.id, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { ref: itemRef, className: rowClassName, "data-item": bankTransaction.id, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         onClick: handleRowClick,
         role: "button",
-        style: {
-          height: headingHeight
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          VStack,
-          {
-            ref: headingRowRef,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                HStack,
-                {
-                  gap: "md",
-                  justify: "space-between",
-                  align: "center",
-                  pie: "md",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        BankTransactionsMobileListItemCheckbox,
-                        {
-                          bulkActionsEnabled,
-                          bankTransaction,
-                          checkboxContainerRef
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        VStack,
-                        {
-                          align: "start",
-                          gap: "3xs",
-                          className: "Layer__bankTransactionsMobileListItem__headingContentLeft",
-                          pi: "md",
-                          pb: "sm",
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: (_b = bankTransaction.counterparty_name) != null ? _b : bankTransaction.description }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__bankTransactionsMobileListItem__categorizedValue", children: categorized && bankTransaction.categorization_status ? getAssignedValue(bankTransaction, renderInAppLink) : null }),
-                            /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "2xs", align: "center", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", ellipsis: true, children: fullAccountName }),
-                              hasReceipts(bankTransaction) ? /* @__PURE__ */ jsxRuntime.jsx(File, { size: 12 }) : null
-                            ] }),
-                            !categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) : null
-                          ]
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      VStack,
-                      {
-                        align: "end",
-                        gap: "3xs",
-                        pb: "sm",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", children: isCredit(bankTransaction) ? "+" : "" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              MoneySpan,
-                              {
-                                amount: bankTransaction.amount
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            DateTime,
-                            {
-                              value: bankTransaction.date,
-                              dateFormat: DATE_FORMAT,
-                              onlyDate: true,
-                              slotProps: {
-                                Date: { size: "sm", variant: "subtle" }
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                BankTransactionsMobileListItemCategory,
-                {
-                  bankTransaction
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `${className}__expanded-row`,
-        style: { height: !open || removeAnim ? 0 : height },
-        children: open && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: `${className}__expanded-row__content`,
-            ref: formRowRef,
-            children: [
-              categorizationEnabled ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className}__toggle-row`, children: [
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            HStack,
+            {
+              gap: "md",
+              justify: "space-between",
+              align: "center",
+              pie: "md",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    BankTransactionsMobileListItemCheckbox,
+                    {
+                      bulkActionsEnabled,
+                      bankTransaction,
+                      checkboxContainerRef
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    VStack,
+                    {
+                      align: "start",
+                      gap: "3xs",
+                      className: "Layer__bankTransactionsMobileListItem__headingContentLeft",
+                      pi: "md",
+                      pb: "sm",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, children: (_b = bankTransaction.counterparty_name) != null ? _b : bankTransaction.description }),
+                        /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__bankTransactionsMobileListItem__categorizedValue", children: categorized && bankTransaction.categorization_status ? getAssignedValue(bankTransaction, renderInAppLink) : null }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "2xs", align: "center", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", ellipsis: true, children: fullAccountName }),
+                          hasReceipts(bankTransaction) ? /* @__PURE__ */ jsxRuntime.jsx(File, { size: 12 }) : null
+                        ] }),
+                        !categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) : null
+                      ]
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  Toggle,
+                  BankTransactionsAmountDate,
                   {
-                    name: `purpose-${bankTransaction.id}`,
-                    size: ToggleSize.xsmall,
-                    options: [
-                      {
-                        value: "business",
-                        label: "Business",
-                        style: { minWidth: 84 }
-                      },
-                      {
-                        value: "personal",
-                        label: "Personal",
-                        style: { minWidth: 84 }
-                      },
-                      {
-                        value: "more",
-                        label: "More",
-                        style: { minWidth: 84 }
+                    amount: bankTransaction.amount,
+                    date: bankTransaction.date,
+                    slotProps: {
+                      MoneySpan: {
+                        size: "md",
+                        displayPlusSign: isCredit(bankTransaction)
                       }
-                    ],
-                    selected: purpose,
-                    onChange: onChangePurpose
+                    }
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: () => close2() })
-              ] }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                BankTransactionMobileForms,
-                {
-                  isOpen: open,
-                  purpose,
-                  bankTransaction,
-                  showCategorization: categorizationEnabled,
-                  showDescriptions,
-                  showReceiptUploads,
-                  showTooltips
-                }
-              )
-            ]
-          }
-        )
+                )
+              ]
+            }
+          ),
+          !open && /* @__PURE__ */ jsxRuntime.jsx(
+            BankTransactionsListItemCategory,
+            {
+              bankTransaction,
+              mobile: true
+            }
+          )
+        ]
       }
-    )
-  ] });
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AnimatedContent, { variant: "expand", isOpen: open, children: /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsMobileListItemExpandedRow,
+      {
+        bankTransaction,
+        showCategorization: categorizationEnabled,
+        showDescriptions,
+        showReceiptUploads,
+        showTooltips
+      }
+    ) }, `expanded-${bankTransaction.id}`)
+  ] }) });
 };
 const SWITCH_CLASS_NAME = "Layer__Switch";
-const Switch = react.forwardRef((_Ob, ref) => {
-  var _Pb = _Ob, {
+const Switch = react.forwardRef((_Mb, ref) => {
+  var _Nb = _Mb, {
     children
-  } = _Pb, props = __objRest(_Pb, [
+  } = _Nb, props = __objRest(_Nb, [
     "children"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17691,8 +17769,8 @@ const usePaginationRange = ({
   }, [totalCount, pageSize, siblingCount, currentPage]);
   return paginationRange;
 };
-const PaginationButton = (_Qb) => {
-  var _Rb = _Qb, { children, isSelected } = _Rb, buttonProps = __objRest(_Rb, ["children", "isSelected"]);
+const PaginationButton = (_Ob) => {
+  var _Pb = _Ob, { children, isSelected } = _Pb, buttonProps = __objRest(_Pb, ["children", "isSelected"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     __spreadProps(__spreadValues({
@@ -18239,8 +18317,8 @@ function BaseFormTextField({
 }
 const INPUT_CLASS_NAME = "Layer__UI__Input";
 const Input = react.forwardRef(
-  function Input2(_Sb, ref) {
-    var _Tb = _Sb, { inset, placement } = _Tb, restProps = __objRest(_Tb, ["inset", "placement"]);
+  function Input2(_Qb, ref) {
+    var _Rb = _Qb, { inset, placement } = _Rb, restProps = __objRest(_Rb, ["inset", "placement"]);
     const dataProperties = toDataProperties({ inset, placement });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Input,
@@ -18336,15 +18414,15 @@ const withForceUpdate = (value) => {
     writable: false
   });
 };
-function FormBigDecimalField(_Ub) {
-  var _Vb = _Ub, {
+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
-  } = _Vb, restProps = __objRest(_Vb, [
+  } = _Tb, restProps = __objRest(_Tb, [
     "mode",
     "allowNegative",
     "maxValue",
@@ -18509,8 +18587,8 @@ function FormDateField({
 }
 const TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 const TextArea = react.forwardRef(
-  function TextArea2(_Wb, ref) {
-    var _Xb = _Wb, { resize = "none" } = _Xb, restProps = __objRest(_Xb, ["resize"]);
+  function TextArea2(_Ub, ref) {
+    var _Vb = _Ub, { resize = "none" } = _Vb, restProps = __objRest(_Vb, ["resize"]);
     const dataProperties = toDataProperties({ resize });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,
@@ -18792,6 +18870,40 @@ const CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
     }
   );
 };
+const CloseIcon = (_Wb) => {
+  var _Xb = _Wb, { size = 12 } = _Xb, props = __objRest(_Xb, ["size"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    __spreadProps(__spreadValues({
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      width: size,
+      height: size,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M8.75 3.25L3.25 8.75",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3.25 3.25L8.75 8.75",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    })
+  );
+};
 const VALID_EXTENSIONS = [".csv"];
 const VALID_FILE_TYPES = ["text/csv", "text/plain", "application/vnd.ms-excel"];
 const MAX_FILE_SIZE = 2 * 1024 * 1024;
@@ -21071,6 +21183,7 @@ function useRejectCategorizationRulesUpdateSuggestion() {
 function RuleUpdatesPromptStep({ ruleSuggestion, close: close2 }) {
   const { next } = useWizard();
   const { addToast } = useLayerContext();
+  const { isMobile } = useSizeClass();
   const [dontAskAgain, setDontAskAgain] = react.useState(false);
   const { trigger: rejectRuleSuggestion, isMutating } = useRejectCategorizationRulesUpdateSuggestion();
   const handleRejectRuleSuggestion = react.useCallback(() => {
@@ -21088,7 +21201,7 @@ function RuleUpdatesPromptStep({ ruleSuggestion, close: close2 }) {
       }
     }))();
   }, [addToast, close2, dontAskAgain, rejectRuleSuggestion, ruleSuggestion.newRule.createdBySuggestionId]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xl", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: isMobile ? "md" : "3xl", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", children: ruleSuggestion.suggestionPrompt }),
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "end", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", justify: "end", align: "end", children: [
@@ -22568,12 +22681,12 @@ const collectRevenueItems = (data) => {
   }
   return revenueItems;
 };
-const humanizeTitle = (sidebarView) => {
+const humanizeTitle = (sidebarView, overrides) => {
   switch (sidebarView) {
     case "expenses":
-      return "Expenses";
+      return (overrides == null ? void 0 : overrides.expenseChartHeader) || "Expenses";
     case "revenue":
-      return "Revenue";
+      return (overrides == null ? void 0 : overrides.revenueChartHeader) || "Revenue";
     default:
       return "Profit & Loss";
   }
@@ -22588,69 +22701,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 = react.createContext(
-  zustand.createStore(() => ({
-    resetPnLModeToDefaultOnMount: true,
-    modeByReport: {},
-    actions: {
-      setModeForReport: () => {
-      }
-    }
-  }))
-);
-function useReportMode(report) {
-  const store = react.useContext(ReportsModeStoreContext);
-  return zustand.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] = react.useState(
-    () => zustand.createStore((set) => ({
-      modeByReport: __spreadValues(__spreadValues({}, defaultModeByReport), initialModes),
-      resetPnLModeToDefaultOnMount,
-      actions: {
-        setModeForReport: (report, mode) => set((state) => ({
-          modeByReport: __spreadProps(__spreadValues({}, state.modeByReport), {
-            [report]: mode
-          })
-        }))
-      }
-    }))
-  );
-  return /* @__PURE__ */ jsxRuntime.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] = react.useState("month");
+  const dateRange = useGlobalDateRange({ displayMode });
   const [filters, setFilters] = react.useState({
     expenses: void 0,
     revenue: void 0
@@ -22774,7 +22828,9 @@ const useProfitAndLoss = ({ tagFilter, reportingBasis }) => {
     tagFilter,
     dateRange,
     selectedLineItem,
-    setSelectedLineItem
+    setSelectedLineItem,
+    setDisplayMode,
+    displayMode
   };
 };
 function range(start, end) {
@@ -22783,12 +22839,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 = react.useCallback((option) => {
+    onValueChange((option == null ? void 0 : option.value) || null);
+  }, [onValueChange]);
+  return /* @__PURE__ */ jsxRuntime.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"
@@ -22828,9 +22928,9 @@ function prepareFiltersBody(compareOptions) {
   return isArrayWithAtLeastOne(allFilters) ? allFilters : void 0;
 }
 function preparePeriodsBodyForMonths(dateRange, comparePeriods) {
-  const adjustedStartDate = dateFns.startOfMonth(dateRange.startDate);
+  const adjustedEndDate = dateFns.startOfMonth(dateRange.endDate);
   const rawPeriods = range(0, comparePeriods).map((index2) => {
-    const currentPeriod = dateFns.subMonths(adjustedStartDate, index2);
+    const currentPeriod = dateFns.subMonths(adjustedEndDate, index2);
     return {
       year: dateFns.getYear(currentPeriod),
       month: dateFns.getMonth(currentPeriod) + 1
@@ -22851,9 +22951,9 @@ function preparePeriodsBodyForMonths(dateRange, comparePeriods) {
   };
 }
 function preparePeriodsBodyForYears(dateRange, comparePeriods) {
-  const adjustedStartDate = dateFns.startOfYear(dateRange.startDate);
+  const adjustedEndDate = dateFns.startOfYear(dateRange.endDate);
   const rawPeriods = range(0, comparePeriods).map((index2) => {
-    const currentPeriod = dateFns.subYears(adjustedStartDate, index2);
+    const currentPeriod = dateFns.subYears(adjustedEndDate, index2);
     return {
       year: dateFns.getYear(currentPeriod)
     };
@@ -22878,17 +22978,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 = react.createContext({
+  data: void 0,
+  filteredDataRevenue: [],
+  filteredTotalRevenue: void 0,
+  filteredDataExpenses: [],
+  filteredTotalExpenses: void 0,
+  isLoading: true,
+  isValidating: false,
+  isError: false,
+  dateRange: {
+    startDate: dateFns.startOfMonth(/* @__PURE__ */ new Date()),
+    endDate: dateFns.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")
@@ -22917,16 +23051,24 @@ function useProfitAndLossComparison({
   reportingBasis,
   comparisonConfig
 }) {
-  var _a, _b;
-  const [comparePeriods, setComparePeriods] = react.useState((_a = comparisonConfig == null ? void 0 : comparisonConfig.defaultPeriods) != null ? _a : 1);
+  var _a;
+  const [comparisonPeriodMode, setComparisonPeriodMode] = react.useState(DateGroupBy.AllTime);
+  const { displayMode } = react.useContext(ProfitAndLossContext);
+  const { startDate, endDate } = useGlobalDateRange({ displayMode: "month" });
+  const comparePeriods = react.useMemo(() => {
+    if (!comparisonPeriodMode || comparisonPeriodMode === DateGroupBy.AllTime) {
+      return 1;
+    }
+    if (comparisonPeriodMode === DateGroupBy.Year) {
+      return Math.abs(dateFns.differenceInCalendarYears(endDate, startDate)) + 1;
+    }
+    return Math.abs(dateFns.differenceInCalendarMonths(endDate, startDate)) + 1;
+  }, [comparisonPeriodMode, endDate, startDate]);
   const [selectedCompareOptions, setSelectedCompareOptionsState] = react.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 = react.useMemo(() => effectiveComparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [effectiveComparePeriods, selectedCompareOptions]);
+  const dateRange = useGlobalDateRange({ displayMode });
+  const compareModeActive = react.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(
@@ -22942,7 +23084,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,
@@ -22968,7 +23110,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: {
@@ -22986,15 +23128,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) => {
@@ -23254,10 +23396,8 @@ const ProfitAndLossChart = ({
   const [compactView, setCompactView] = react.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] = react.useState({
     width: 0,
     height: 0,
@@ -23753,7 +23893,7 @@ const ProfitAndLossChart = ({
                   xAxisId: "revenue",
                   stackId: "revenue",
                   children: [
-                    showIndicator ? /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       recharts.LabelList,
                       {
                         content: /* @__PURE__ */ jsxRuntime.jsx(
@@ -23764,7 +23904,7 @@ const ProfitAndLossChart = ({
                           }
                         )
                       }
-                    ) : null,
+                    ),
                     dataOrPlaceholderData.map((entry) => {
                       return /* @__PURE__ */ jsxRuntime.jsx(
                         recharts.Cell,
@@ -24679,6 +24819,17 @@ const Header = react.forwardRef(
   }
 );
 Header.displayName = "Header";
+const CloseButton = (_yc) => {
+  var _zc = _yc, {
+    className,
+    textOnly = false
+  } = _zc, props = __objRest(_zc, [
+    "className",
+    "textOnly"
+  ]);
+  const baseClassName2 = classNames("Layer__btn", "Layer__back-btn", className);
+  return /* @__PURE__ */ jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, props), { className: baseClassName2, children: textOnly ? "Back" : /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: 16 }) }));
+};
 const LedgerAccountsContext = react.createContext({
   data: void 0,
   entryData: void 0,
@@ -25157,37 +25308,6 @@ const DetailReportBreadcrumb = ({
     subtitle && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", variant: "subtle", children: subtitle })
   ] }) }) });
 };
-const ProfitAndLossContext = react.createContext({
-  data: void 0,
-  filteredDataRevenue: [],
-  filteredTotalRevenue: void 0,
-  filteredDataExpenses: [],
-  filteredTotalExpenses: void 0,
-  isLoading: true,
-  isValidating: false,
-  isError: false,
-  dateRange: {
-    startDate: dateFns.startOfMonth(/* @__PURE__ */ new Date()),
-    endDate: dateFns.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__ */ jsxRuntime.jsx(
   DataState,
@@ -25469,7 +25589,7 @@ const ProfitAndLossDetailedCharts = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__profit-and-loss-detailed-charts", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "Layer__profit-and-loss-detailed-charts__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__head", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope, stringOverrides == null ? void 0 : stringOverrides.detailedChartStringOverrides) }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, className: "date", children: dateFns.format(dateRange.startDate, "LLLL, y") }),
         showDatePicker && /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, {})
       ] }),
@@ -25486,7 +25606,7 @@ const ProfitAndLossDetailedCharts = ({
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet", children: [
       !hideClose && /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onClick: () => setSidebarScope(void 0) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__profit-and-loss-detailed-charts__head", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.lg, weight: TextWeight.bold, className: "title", children: humanizeTitle(theScope, stringOverrides == null ? void 0 : stringOverrides.detailedChartStringOverrides) }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { size: TextSize.sm, className: "date", children: dateFns.format(dateRange.startDate, "LLLL, y") })
       ] })
     ] }),
@@ -25568,11 +25688,8 @@ const ProfitAndLossComparisonContext = react.createContext({
   data: void 0,
   isLoading: true,
   isValidating: false,
-  isPeriodsSelectEnabled: true,
   compareModeActive: false,
   comparePeriods: 0,
-  setComparePeriods: () => {
-  },
   compareOptions: [],
   selectedCompareOptions: [],
   setSelectedCompareOptions: function() {
@@ -25581,7 +25698,10 @@ const ProfitAndLossComparisonContext = react.createContext({
   getProfitAndLossComparisonCsv: function() {
     throw new Error("Function not implemented.");
   },
-  comparisonConfig: void 0
+  comparisonConfig: void 0,
+  comparisonPeriodMode: null,
+  setComparisonPeriodMode: () => {
+  }
 });
 const ProfitAndLossFullReportDownloadButton = ({
   stringOverrides,
@@ -25913,7 +26033,7 @@ const options$2 = Object.values(dateSelectionOptionConfig).filter((opt) => opt.v
 const DateSelectionComboBox = () => {
   const [lastPreset, setLastPreset] = react.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];
@@ -25937,7 +26057,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 {
@@ -26209,26 +26329,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 }, (_, index2) => {
-    const currentMonth = dateFns.subMonths(startDate, numberOfMonths - index2 - 1);
-    return { date: currentMonth, label: dateFns.format(currentMonth, "MMM") };
+    const currentMonth = dateFns.subMonths(endDate, numberOfMonths - index2 - 1);
+    return { date: currentMonth, label: dateFns.format(currentMonth, "MMM yyyy") };
   });
 };
-const generateComparisonYears = (startDate, numberOfYears) => {
+const generateComparisonYears = (endDate, numberOfYears) => {
   return Array.from({ length: numberOfYears }, (_, index2) => {
-    const currentMonth = dateFns.subYears(startDate, numberOfYears - index2 - 1);
+    const currentMonth = dateFns.subYears(endDate, numberOfYears - index2 - 1);
     return { date: currentMonth, label: dateFns.format(currentMonth, "yyyy") };
   });
 };
+const generateComparisonDateRange = (startDate, endDate) => {
+  const label = `${dateFns.format(startDate, DATE_FORMAT$1)} - ${dateFns.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") {
@@ -26236,8 +26362,8 @@ const getComparisonValue = (name, depth, cellData) => {
     } else {
       return (cellData == null ? void 0 : cellData.value) !== void 0 ? cellData.value : "";
     }
-  } else if (typeof cellData === "object" && cellData !== null && "lineItems" in cellData) {
-    for (const item of cellData.lineItems || []) {
+  } else if (typeof cellData === "object" && cellData !== null && "line_items" in cellData) {
+    for (const item of cellData.line_items || []) {
       const result = getComparisonLineItemValue(item, name, depth);
       if (result !== "") {
         return result;
@@ -26248,11 +26374,11 @@ const getComparisonValue = (name, depth, cellData) => {
 };
 const getComparisonLineItemValue = (lineItem, name, depth) => {
   if (depth === 1) {
-    if (lineItem.displayName === name) {
+    if (lineItem.display_name === name) {
       return lineItem.value !== void 0 ? lineItem.value : "";
     }
-  } else if (lineItem.lineItems && lineItem.lineItems.length > 0) {
-    for (const childLineItem of lineItem.lineItems) {
+  } else if (lineItem.line_items && lineItem.line_items.length > 0) {
+    for (const childLineItem of lineItem.line_items) {
       const result = getComparisonLineItemValue(childLineItem, name, depth - 1);
       if (result !== "") {
         return result;
@@ -26262,54 +26388,47 @@ const getComparisonLineItemValue = (lineItem, name, depth) => {
   return "";
 };
 const mergeComparisonLineItemsAtDepth = (lineItems) => {
+  var _a, _b, _c;
   const map = /* @__PURE__ */ new Map();
-  const mergeItems = (items) => {
-    items.forEach((item) => {
-      if (!map.has(item.displayName)) {
-        map.set(item.displayName, __spreadProps(__spreadValues({}, item), { lineItems: [] }));
-      }
-      const existingItem = map.get(item.displayName);
-      if (item.lineItems) {
-        existingItem.lineItems = mergeComparisonLineItemsAtDepth([
-          ...existingItem.lineItems || [],
-          ...item.lineItems
-        ]);
-      }
-      if (item.value !== void 0) {
-        map.set(item.displayName, __spreadProps(__spreadValues({}, existingItem), { value: item.value }));
-      }
-    });
-  };
-  mergeItems(lineItems);
+  for (const item of lineItems) {
+    const key = item.display_name;
+    const existing = (_b = map.get(key)) != null ? _b : __spreadProps(__spreadValues({}, item), { line_items: (_a = item.line_items) != null ? _a : [] });
+    let next = existing;
+    if (item.line_items && item.line_items.length > 0) {
+      const mergedChildren = mergeComparisonLineItemsAtDepth([
+        ...(_c = existing.line_items) != null ? _c : [],
+        ...item.line_items
+      ]);
+      next = __spreadProps(__spreadValues({}, next), { line_items: mergedChildren });
+    }
+    if (item.value !== void 0) {
+      next = __spreadProps(__spreadValues({}, next), { value: item.value });
+    }
+    map.set(key, next);
+  }
   return Array.from(map.values());
 };
 const ProfitAndLossCompareTable = ({
   stringOverrides
 }) => {
+  const { dateRange, displayMode } = react.useContext(ProfitAndLossContext);
   const {
     data: comparisonData,
     isLoading,
     comparePeriods,
-    selectedCompareOptions
+    selectedCompareOptions,
+    comparisonPeriodMode
   } = react.useContext(ProfitAndLossComparisonContext);
   const { isOpen, setIsOpen } = useTableExpandRow();
   const { data: bookkeepingPeriods } = useBookkeepingPeriods();
-  const rangeDisplayMode = useReportModeWithFallback(ReportKey.ProfitAndLoss, "monthPicker");
-  const dateRange = useGlobalDateRange({ displayMode: rangeDisplayMode });
   react.useEffect(() => {
     setIsOpen(["income", "cost_of_goods_sold", "expenses"]);
   }, []);
   if (isLoading || comparisonData === void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: classNames("Layer__profit-and-loss-table__loader-container"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {})
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__profit-and-loss-table__loader-container", children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) });
   }
   const getBookkeepingPeriodStatus = (date2) => {
-    if (!bookkeepingPeriods || rangeDisplayMode !== "monthPicker") {
+    if (!bookkeepingPeriods || displayMode !== "month") {
       return;
     }
     const currentMonth = date2.getMonth() + 1;
@@ -26338,7 +26457,7 @@ const ProfitAndLossCompareTable = ({
       )[0];
       lineItem = "display_name" in mergedLineItems ? mergedLineItems : void 0;
     }
-    const expandable = (lineItem == null ? void 0 : lineItem.lineItems) && lineItem.lineItems.length > 0 ? true : false;
+    const expandable = (lineItem == null ? void 0 : lineItem.line_items) && lineItem.line_items.length > 0 ? true : false;
     const expanded = expandable ? isOpen(rowKey) : true;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -26351,20 +26470,29 @@ const ProfitAndLossCompareTable = ({
           variant: expandable ? "expandable" : "default",
           handleExpand: () => setIsOpen(rowKey),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TableCell, { primary: true, withExpandIcon: expandable, children: lineItem ? lineItem.displayName : rowDisplayName }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TableCell, { isCurrency: true, children: getComparisonValue(
-              lineItem ? lineItem.displayName : rowDisplayName,
+              lineItem ? lineItem.display_name : rowDisplayName,
               depth,
               cell
             ) }, "compare-value" + i))
           ]
         }
       ),
-      expanded && (lineItem == null ? void 0 : lineItem.lineItems) ? lineItem.lineItems.map(
+      expanded && (lineItem == null ? void 0 : lineItem.line_items) ? lineItem.line_items.map(
         (child) => renderRow(
-          child.displayName,
+          child.display_name,
           depth + 1,
-          child.displayName,
+          child.display_name,
           child,
           rowData
         )
@@ -26373,7 +26501,13 @@ const ProfitAndLossCompareTable = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Table, { borderCollapse: "collapse", bottomSpacing: false, children: [
     /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: selectedCompareOptions && selectedCompareOptions.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { rowKey: "", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableCell, { isHeaderCell: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TableCell,
+        {
+          isHeaderCell: true,
+          className: "Layer__profit-and-loss-compare-table__sticky-cell"
+        }
+      ),
       selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { primary: true, isHeaderCell: true, children: option.displayName }, option.displayName + "-" + i),
         comparePeriods && Array.from({ length: comparePeriods - 1 }, (_, index2) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { isHeaderCell: true }, option.displayName + "-" + index2))
@@ -26381,20 +26515,24 @@ const ProfitAndLossCompareTable = ({
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(TableBody, { children: [
       comparePeriods && /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { rowKey: "", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { isHeaderCell: true }),
-        selectedCompareOptions && selectedCompareOptions.length > 0 ? selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: generateComparisonPeriods(
-          dateRange.startDate,
-          comparePeriods,
-          rangeDisplayMode
-        ).map((month, index2) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { isHeaderCell: true, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "2xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TableCell,
+          {
+            isHeaderCell: true,
+            className: "Layer__profit-and-loss-compare-table__sticky-cell"
+          }
+        ),
+        selectedCompareOptions && selectedCompareOptions.length > 0 ? selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: generateComparisonPeriods(__spreadValues({
+          numberOfPeriods: comparePeriods,
+          mode: comparisonPeriodMode
+        }, dateRange)).map((month, index2) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { isHeaderCell: true, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "2xs", children: [
           month.label,
           " ",
           getBookkeepingPeriodStatus(month.date)
-        ] }) }, option.displayName + "-" + index2)) }, option.displayName + "-" + i)) : /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: generateComparisonPeriods(
-          dateRange.startDate,
-          comparePeriods,
-          rangeDisplayMode
-        ).map((month, index2) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { isHeaderCell: true, children: month.label }, "total-" + index2 + "-cell")) }, "total-1")
+        ] }) }, option.displayName + "-" + index2)) }, option.displayName + "-" + i)) : /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: generateComparisonPeriods(__spreadValues({
+          numberOfPeriods: comparePeriods,
+          mode: comparisonPeriodMode
+        }, dateRange)).map((month, index2) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { isHeaderCell: true, children: month.label }, "total-" + index2 + "-cell")) }, "total-1")
       ] }),
       renderRow("income", 0, "Income"),
       renderRow("cost_of_goods_sold", 0, "Cost of Goods Sold"),
@@ -26602,13 +26740,15 @@ const ProfitAndLossTableComponent = ({
       rowKey: "other_outflows",
       rowIndex: 8
     }),
-    data.customLineItems && renderLineItem({
-      lineItem: data.customLineItems,
-      depth: 0,
-      rowKey: "other_activity",
-      rowIndex: 9,
-      showValue: false
-    })
+    data.customLineItems && data.customLineItems.map(
+      (customLineItem, index2) => renderLineItem({
+        lineItem: customLineItem,
+        depth: 0,
+        rowKey: `custom_line_item_${index2}`,
+        rowIndex: 9 + index2,
+        showValue: false
+      })
+    )
   ] }) });
 };
 const ProfitAndLossTableWithProvider = (props) => {
@@ -26670,44 +26810,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
   } = react.useContext(ProfitAndLossComparisonContext);
-  const rangeDisplayMode = useReportModeWithFallback(ReportKey.ProfitAndLoss, "monthPicker");
-  const periods = react.useMemo(
-    () => comparePeriods !== 0 ? comparePeriods : 1,
-    [comparePeriods]
-  );
-  const timeComparisonOptions = buildCompareOptions(rangeDisplayMode);
+  const { displayMode } = react.useContext(ProfitAndLossContext);
   const tagComparisonSelectOptions = compareOptions.map(
     (tagComparisonOption) => {
       return {
@@ -26719,19 +26831,8 @@ const ProfitAndLossCompareOptions = () => {
   if (!comparisonConfig) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__compare__options", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
+    displayMode === "full" && /* @__PURE__ */ jsxRuntime.jsx(DateGroupByComboBox, { value: comparisonPeriodMode, onValueChange: setComparisonPeriodMode }),
     /* @__PURE__ */ jsxRuntime.jsx(
       MultiSelect,
       {
@@ -26748,7 +26849,8 @@ const ProfitAndLossCompareOptions = () => {
           };
         }),
         placeholder: "Select views",
-        styles: selectStyles
+        styles: selectStyles,
+        className: "Layer__ProfitAndLoss__TagMultiSelect"
       }
     )
   ] });
@@ -26762,8 +26864,11 @@ const ProfitAndLossReport = ({
   hideHeader
 }) => {
   var _a;
-  const { selectedLineItem, setSelectedLineItem } = react.useContext(ProfitAndLossContext);
+  const { selectedLineItem, setSelectedLineItem, setDisplayMode } = react.useContext(ProfitAndLossContext);
   const { comparisonConfig } = react.useContext(ProfitAndLossComparisonContext);
+  react.useEffect(() => {
+    setDisplayMode(dateSelectionMode);
+  }, [dateSelectionMode, setDisplayMode]);
   const breadcrumbIndexMap = react.useMemo(() => {
     if (!selectedLineItem) return {};
     return selectedLineItem.breadcrumbPath.reduce((acc, item, index2) => {
@@ -26886,13 +26991,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;
@@ -26936,10 +27041,10 @@ function ProfitAndLossSummariesMiniChart({
   ) });
 }
 function ProfitAndLossSummariesHeading({
-  variants,
+  variants: variants2,
   children
 }) {
-  const { size = "2xs" } = variants != null ? variants : {};
+  const { size = "2xs" } = variants2 != null ? variants2 : {};
   return /* @__PURE__ */ jsxRuntime.jsx(Heading, { level: 3, size, slot: "heading", children });
 }
 const CLASS_NAME$3 = "Layer__ProfitAndLossSummariesSummary";
@@ -26950,14 +27055,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__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({ className: CLASS_NAME$3 }, dataProperties), { children: [
     Chart ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: CHART_AREA_CLASS_NAME, children: Chart }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: CHART_AREA_EMPTY_FRAME_CLASS_NAME }),
-    /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesHeading, { variants, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesHeading, { variants: variants2, children: label }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader, { height: "20px" }) : /* @__PURE__ */ jsxRuntime.jsx(MoneySpan, { slot: "amount", amount, size: "lg", bold: true })
   ] }));
 }
@@ -26966,10 +27071,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 } = react.useContext(ProfitAndLossContext);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
   const currentDate = react.useMemo(() => dateRange ? dateRange.startDate : dateFns.startOfMonth(/* @__PURE__ */ new Date()), [dateRange]);
@@ -27043,7 +27148,7 @@ function TransactionsToReview({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick, className: CLASS_NAME$2, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: verticalGap, align: "start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesHeading, { variants, children: "Transactions to review" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesHeading, { variants: variants2, children: "Transactions to review" }),
       transactionsToReviewBadge
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(IconButton, { icon: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {}), withBorder: true, onClick })
@@ -27057,7 +27162,7 @@ function Internal_ProfitAndLossSummaries({
   stringOverrides,
   chartColorsList,
   slots,
-  variants
+  variants: variants2
 }) {
   var _a, _b, _c, _d;
   const {
@@ -27094,11 +27199,11 @@ function Internal_ProfitAndLossSummaries({
                 {
                   data: revenueChartData,
                   chartColorsList,
-                  variants
+                  variants: variants2
                 }
               )
             },
-            variants
+            variants: variants2
           }
         )
       }
@@ -27120,11 +27225,11 @@ function Internal_ProfitAndLossSummaries({
                 {
                   data: expensesChartData,
                   chartColorsList,
-                  variants
+                  variants: variants2
                 }
               )
             },
-            variants
+            variants: variants2
           }
         )
       }
@@ -27134,17 +27239,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, index2) => /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossSummariesListItem, { children: item }, index2))
   ] }) });
 }
-function ProfitAndLossSummaries(_yc) {
-  var _zc = _yc, {
+function ProfitAndLossSummaries(_Ac) {
+  var _Bc = _Ac, {
     onTransactionsToReviewClick
-  } = _zc, restProps = __objRest(_zc, [
+  } = _Bc, restProps = __objRest(_Bc, [
     "onTransactionsToReviewClick"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -27166,7 +27271,7 @@ function ProfitAndLossSummaries(_yc) {
     })
   );
 }
-const ProfitAndLossWithoutReportsModeProvider = ({
+const ProfitAndLoss = ({
   children,
   tagFilter,
   comparisonConfig,
@@ -27177,14 +27282,6 @@ const ProfitAndLossWithoutReportsModeProvider = ({
   const comparisonContextData = useProfitAndLossComparison({ comparisonConfig, reportingBasis });
   return /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossContext.Provider, { value: contextData, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossComparisonContext.Provider, { value: comparisonContextData, children: asContainer ? /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "profit-and-loss", children }) : children }) });
 };
-const ProfitAndLossWithReportsModeProvider = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ReportsModeStoreProvider, { initialModes: { ProfitAndLoss: "monthPicker" }, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossWithoutReportsModeProvider, __spreadValues({}, props)) });
-};
-const ProfitAndLoss = (_Ac) => {
-  var _Bc = _Ac, { withReportsModeProvider = true } = _Bc, restProps = __objRest(_Bc, ["withReportsModeProvider"]);
-  if (withReportsModeProvider) return /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossWithReportsModeProvider, __spreadValues({}, restProps));
-  return /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossWithoutReportsModeProvider, __spreadValues({}, restProps));
-};
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
@@ -27589,9 +27686,6 @@ const CombinedDateSelection = ({ mode }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(DateSelection, {});
 };
 const COMPONENT_NAME$7 = "balance-sheet";
-const StandaloneBalanceSheet = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ReportsModeStoreProvider, { initialModes: { BalanceSheet: "dayPicker" }, children: /* @__PURE__ */ jsxRuntime.jsx(BalanceSheet, __spreadValues({}, props)) });
-};
 const BalanceSheet = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BalanceSheetView,
@@ -27914,27 +28008,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__ */ jsxRuntime.jsx(ReportsModeStoreProvider, { initialModes: { StatementOfCashFlows: initialModeForStatementOfCashFlows }, children: /* @__PURE__ */ jsxRuntime.jsx(StatementOfCashFlow, __spreadValues({}, props)) });
-};
 const StatementOfCashFlow = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(StatementOfCashFlowView, __spreadValues({}, props));
 };
@@ -27942,8 +28016,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__ */ jsxRuntime.jsx(TableProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -28633,7 +28706,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] = react.useState();
   const [sendingForm, setSendingForm] = react.useState(false);
   const [apiError, setApiError] = react.useState(void 0);
@@ -36207,7 +36280,8 @@ const BookkeepingOverview = ({
                       {
                         text: ((_e = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _e.header) || "Profit & Loss",
                         withDatePicker: true,
-                        withStatus: true
+                        withStatus: true,
+                        dateSelectionMode: "month"
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(BookkeepingProfitAndLossSummariesContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -36321,7 +36395,7 @@ const AccountingOverview = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         View,
         {
-          title,
+          title: (stringOverrides == null ? void 0 : stringOverrides.title) || title,
           showHeader: showTitle,
           header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(GlobalMonthPicker, {}) }) }) }),
           children: [
@@ -36545,7 +36619,7 @@ const ProjectProfitabilityView = ({
   valueOptions,
   showTitle,
   stringOverrides,
-  datePickerMode = "monthPicker",
+  dateSelectionMode = "month",
   csvMoneyFormat = "DOLLAR_STRING"
 }) => {
   const [activeTab, setActiveTab] = react.useState("overview");
@@ -36638,7 +36712,7 @@ const ProjectProfitabilityView = ({
             ProfitAndLoss.Report,
             {
               stringOverrides,
-              datePickerMode,
+              dateSelectionMode,
               csvMoneyFormat
             }
           ) })
@@ -38812,7 +38886,7 @@ function useUnifiedReportDateVariant() {
 function useUnifiedReportWithDateParams() {
   const store = react.useContext(UnifiedReportStoreContext);
   const { date: effectiveDate } = useGlobalDate();
-  const { startDate, endDate } = useGlobalDateRange({ displayMode: "dayRangePicker" });
+  const { startDate, endDate } = useGlobalDateRange({ displayMode: "full" });
   const report = zustand.useStore(store, (state) => state.report);
   const dateVariant = reportToDateVariantMap[report];
   switch (dateVariant) {
@@ -39081,13 +39155,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__ */ jsxRuntime.jsxs(
     View,
     {
@@ -39103,7 +39170,7 @@ const Reports = ({
             onChange: (opt) => setActiveTab(opt.target.value)
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ReportsModeStoreProvider, { initialModes, resetPnLModeToDefaultOnMount: false, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLoss, { asContainer: false, comparisonConfig, withReportsModeProvider: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLoss, { asContainer: false, comparisonConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
           ReportsPanel,
           {
             openReport: activeTab,
@@ -39113,7 +39180,7 @@ const Reports = ({
             view,
             renderInAppLink
           }
-        ) }) }) })
+        ) }) })
       ]
     }
   );
@@ -42925,7 +42992,7 @@ const BusinessProvider = ({
     hasBeenTouched,
     resetCaches
   } = useDataSync();
-  const globalDateRange = useGlobalDateRange({ displayMode: "dayRangePicker" });
+  const globalDateRange = useGlobalDateRange({ displayMode: "full" });
   const { setDateRange } = useGlobalDateRangeActions();
   const dateRange = react.useMemo(() => ({
     range: globalDateRange,
@@ -43089,7 +43156,7 @@ const LayerProvider = (_od) => {
   ) }) });
 };
 exports.AccountingOverview = AccountingOverview;
-exports.BalanceSheet = StandaloneBalanceSheet;
+exports.BalanceSheet = BalanceSheet;
 exports.BankTransactions = BankTransactions;
 exports.BankTransactionsWithLinkedAccounts = BankTransactionsWithLinkedAccounts;
 exports.BookkeepingOverview = BookkeepingOverview;
@@ -43112,7 +43179,7 @@ exports.ProfitAndLoss = ProfitAndLoss;
 exports.ProfitAndLossView = ProfitAndLossView;
 exports.ProjectProfitabilityView = ProjectProfitabilityView;
 exports.Reports = Reports;
-exports.StatementOfCashFlow = StandaloneStatementOfCashFlow;
+exports.StatementOfCashFlow = StatementOfCashFlow;
 exports.Tasks = Tasks;
 exports.unstable_BillsView = unstable_BillsView;
 exports.unstable_UnifiedReports = UnifiedReport;