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

package/dist/cjs/index.cjs

@@ -110,7 +110,7 @@ const LinkedAccountsContext = react.createContext({
   setAccountsToAddOpeningBalanceInModal: () => {
   }
 });
-const version = "0.1.114-alpha";
+const version = "0.1.114-alpha.1";
 const pkg = {
   version
 };
@@ -6209,7 +6209,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 +7332,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,
@@ -10141,7 +10145,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,
@@ -13182,7 +13185,7 @@ const MatchBadge = ({
   }
   return;
 };
-const MatchForm$1 = ({
+const MatchForm = ({
   classNamePrefix,
   bankTransaction,
   selectedMatchId,
@@ -14077,14 +14080,12 @@ const MoneySpan = react.forwardRef(
     var _xb = _wb, { amount, bold, size, displayPlusSign, className } = _xb, restProps = __objRest(_xb, ["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";
@@ -14690,7 +14691,6 @@ const ExpandedBankTransactionRow = react.forwardRef(
     showDescriptions,
     showReceiptUploads
   }, ref) => {
-    var _a, _b;
     const {
       categorize: categorizeBankTransaction2,
       match: matchBankTransaction2
@@ -14708,7 +14708,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);
@@ -14771,12 +14771,12 @@ const ExpandedBankTransactionRow = react.forwardRef(
       }
     };
     const save = () => __async(null, null, function* () {
-      var _a2;
+      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)) {
+        } else if (selectedMatch && selectedMatch.id !== ((_a = getBankTransactionMatchAsSuggestedMatch(bankTransaction)) == null ? void 0 : _a.id)) {
           yield onMatchSubmit(selectedMatch.id);
           return;
         }
@@ -14796,8 +14796,8 @@ const ExpandedBankTransactionRow = react.forwardRef(
       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) {
@@ -14853,7 +14853,7 @@ const ExpandedBankTransactionRow = react.forwardRef(
                         purpose === "match" ? `${className}__content-panel--active` : ""
                       ),
                       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className}__content-panel-container`, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        MatchForm$1,
+                        MatchForm,
                         {
                           classNamePrefix: className,
                           bankTransaction,
@@ -15447,10 +15447,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(
+            MoneySpan,
+            {
+              amount: bankTransaction.amount,
+              displayPlusSign: isCredit(bankTransaction),
+              className: "Layer__table-cell-content"
+            }
+          )
         })
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15621,6 +15625,39 @@ const normalizeFromBankTransaction = (bankTransaction) => {
     label: (_e = (_d = bankTransaction.category) == null ? void 0 : _d.display_name) != null ? _e : ""
   };
 };
+const DATE_FORMAT = "LLL d";
+const BankTransactionsAmountDate = ({ amount, date: 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 BankTransactionsListItem = ({
   index: index2,
   dateFormat,
@@ -15729,11 +15766,14 @@ const BankTransactionsListItem = ({
         /* @__PURE__ */ jsxRuntime.jsx(Span, { withTooltip: true, children: (_b = bankTransaction.counterparty_name) != null ? _b : bankTransaction.description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        MoneySpan,
+        BankTransactionsAmountDate,
         {
-          className: `Layer__bank-transaction-list-item__amount-${isCredit(bankTransaction) ? "credit" : "debit"}`,
           amount: bankTransaction.amount,
-          displayPlusSign: isCredit(bankTransaction)
+          date: bankTransaction.date,
+          slotProps: {
+            MoneySpan: { size: "md", displayPlusSign: isCredit(bankTransaction) },
+            DateTime: { size: "sm" }
+          }
         }
       )
     ] }),
@@ -15766,8 +15806,7 @@ const BankTransactionsListItem = ({
           },
           isLoading: bankTransaction.processing
         }
-      ) : null,
-      categorized ? /* @__PURE__ */ jsxRuntime.jsx(
+      ) : categorized ? /* @__PURE__ */ jsxRuntime.jsx(
         BankTransactionsCategorizedSelectedValue,
         {
           bankTransaction
@@ -15912,53 +15951,76 @@ 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 BankTransactionsMobileListItemCategory = ({
+  bankTransaction
+}) => {
+  const categorized = isCategorized(bankTransaction);
+  const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
+  if (categorized) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsCategorizedSelectedValue,
+      {
+        bankTransaction,
+        className: "Layer__bankTransactionsMobileListItemCategory",
+        slotProps: { Label: { size: "sm" } }
+      }
+    );
+  }
+  return selectedCategory ? /* @__PURE__ */ jsxRuntime.jsx(
+    BankTransactionsUncategorizedSelectedValue,
+    {
+      selectedValue: selectedCategory != null ? selectedCategory : null,
+      className: "Layer__bankTransactionsMobileListItemCategory",
+      slotProps: { Label: { size: "sm" } }
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, className: "Layer__bankTransactionsMobileListItemCategory", size: "sm", children: "No category selected" });
 };
-const Paperclip = (_Gb) => {
-  var _Hb = _Gb, { size = 20 } = _Hb, props = __objRest(_Hb, ["size"]);
+const Paperclip = (_Cb) => {
+  var _Db = _Cb, { size = 20 } = _Db, props = __objRest(_Db, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -16053,8 +16115,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 = (_Eb) => {
+  var _Fb = _Eb, { size = 18 } = _Fb, props = __objRest(_Fb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -16088,11 +16150,11 @@ const X = (_Ib) => {
   );
 };
 const CLASS_NAME$7 = "Layer__MinimalSearchField";
-function MinimalSearchField(_Kb) {
-  var _Lb = _Kb, {
+function MinimalSearchField(_Gb) {
+  var _Hb = _Gb, {
     placeholder,
     isDisabled
-  } = _Lb, restProps = __objRest(_Lb, [
+  } = _Hb, restProps = __objRest(_Hb, [
     "placeholder",
     "isDisabled"
   ]);
@@ -16108,8 +16170,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(_Ib) {
+  var _Jb = _Ib, { slot = "search", className, label, isDisabled } = _Jb, restProps = __objRest(_Jb, ["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 +16188,7 @@ function SearchField(_Mb) {
 const isGroup = (item) => {
   return "categories" in item;
 };
-const BusinessCategories = ({
+const BankTransactionsMobileListBusinessCategories = ({
   select,
   selectedId,
   showTooltips
@@ -16201,7 +16263,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 +16274,7 @@ const CategorySelectDrawer = ({
     }
   ) });
 };
-const BusinessForm$1 = ({
+const BankTransactionsMobileListBusinessForm = ({
   bankTransaction,
   showCategorization,
   showDescriptions,
@@ -16388,7 +16450,7 @@ const isAlreadyAssigned = (bankTransaction) => {
     )
   );
 };
-const PersonalForm = ({
+const BankTransactionsMobileListPersonalForm = ({
   bankTransaction,
   showReceiptUploads,
   showDescriptions,
@@ -16464,92 +16526,89 @@ const PersonalForm = ({
           fullWidth: true,
           disabled: alreadyAssigned || isLoading || bankTransaction.processing,
           onClick: save,
-          children: isLoading || bankTransaction.processing ? "Saving..." : alreadyAssigned ? "Saved as Personal" : "Categorize as Personal"
+          children: isLoading || bankTransaction.processing ? "Confirming..." : alreadyAssigned ? "Confirmed" : "Confirm"
         }
       ) : null
     ] }),
     bankTransaction.error && showRetry ? /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
   ] });
 };
+const MatchFormMobileItem = ({ match, bankTransaction, inAppLink }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.GridListItem,
+    {
+      id: match.id,
+      textValue: match.details.description,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", pis: "md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            slot: "selection",
+            variant: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Span, { ellipsis: true, pbs: "sm", 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" }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(HStack, { children: 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 +16618,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);
@@ -16585,12 +16644,11 @@ const MatchForm = ({
     }
     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, { pi: "md", 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,
@@ -16697,7 +16755,7 @@ const CategorySelectDrawerWithTrigger = ({
     )
   ] });
 };
-const SplitForm = ({
+const BankTransactionsMobileListSplitForm = ({
   bankTransaction,
   showTooltips,
   showCategorization,
@@ -16843,14 +16901,14 @@ const SplitForm = ({
           fullWidth: true,
           onClick: () => void save(),
           disabled: isLoading || bankTransaction.processing,
-          children: isLoading || bankTransaction.processing ? "Saving..." : "Save"
+          children: isLoading || bankTransaction.processing ? "Confirming..." : "Confirm"
         }
       )
     ] }),
     bankTransaction.error && showRetry ? /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: "Approval failed. Check connection and retry in few seconds." }) : null
   ] });
 };
-const SplitAndMatchForm = ({
+const BankTransactionsMobileListSplitAndMatchForm = ({
   bankTransaction,
   showTooltips,
   showReceiptUploads,
@@ -16864,7 +16922,7 @@ const SplitAndMatchForm = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transaction-mobile-list-item__split-and-match-form", children: [
     formType === "categorize" && /* @__PURE__ */ jsxRuntime.jsx(
-      SplitForm,
+      BankTransactionsMobileListSplitForm,
       {
         bankTransaction,
         showTooltips,
@@ -16874,7 +16932,7 @@ const SplitAndMatchForm = ({
       }
     ),
     formType === "match" && /* @__PURE__ */ jsxRuntime.jsx(
-      MatchForm,
+      BankTransactionsMobileListMatchForm,
       {
         bankTransaction,
         showReceiptUploads,
@@ -16892,7 +16950,7 @@ const SplitAndMatchForm = ({
     ), children: "or find match" }) }) : null
   ] });
 };
-const BankTransactionMobileForms = ({
+const BankTransactionsMobileForms = ({
   purpose,
   bankTransaction,
   showTooltips,
@@ -16905,7 +16963,7 @@ const BankTransactionMobileForms = ({
     switch (purpose) {
       case Purpose.business:
         return /* @__PURE__ */ jsxRuntime.jsx(
-          BusinessForm$1,
+          BankTransactionsMobileListBusinessForm,
           {
             bankTransaction,
             showCategorization,
@@ -16916,7 +16974,7 @@ const BankTransactionMobileForms = ({
         );
       case Purpose.personal:
         return /* @__PURE__ */ jsxRuntime.jsx(
-          PersonalForm,
+          BankTransactionsMobileListPersonalForm,
           {
             bankTransaction,
             showReceiptUploads,
@@ -16926,7 +16984,7 @@ const BankTransactionMobileForms = ({
         );
       case Purpose.more:
         return /* @__PURE__ */ jsxRuntime.jsx(
-          SplitAndMatchForm,
+          BankTransactionsMobileListSplitAndMatchForm,
           {
             bankTransaction,
             showCategorization,
@@ -16941,73 +16999,67 @@ const BankTransactionMobileForms = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__bank-transaction-mobile-list-item__form-container", 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.jsx("div", { className: "Layer__bank-transaction-mobile-list-item__expanded-row", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { pb: "md", justify: "space-between", align: "center", children: [
+    showCategorization ? /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", justify: "space-between", children: /* @__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,
+    ) }) : null,
+    /* @__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 +17067,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 +17102,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 +17133,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 +17149,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 +17177,6 @@ const BankTransactionsMobileListItem = ({
       }, 300);
     }
   }, [bankTransaction.recently_categorized]);
-  const onChangePurpose = (event) => setPurpose(event.target.value);
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const { select, deselect } = useBulkSelectionActions();
@@ -17153,169 +17188,95 @@ 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(
+            BankTransactionsMobileListItemCategory,
+            {
+              bankTransaction
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      BankTransactionsMobileListItemExpandedRow,
+      {
+        bankTransaction,
+        showCategorization: categorizationEnabled,
+        showDescriptions,
+        showReceiptUploads,
+        showTooltips
       }
     )
-  ] });
+  ] }) });
 };
 const SWITCH_CLASS_NAME = "Layer__Switch";
-const Switch = react.forwardRef((_Ob, ref) => {
-  var _Pb = _Ob, {
+const Switch = react.forwardRef((_Kb, ref) => {
+  var _Lb = _Kb, {
     children
-  } = _Pb, props = __objRest(_Pb, [
+  } = _Lb, props = __objRest(_Lb, [
     "children"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17691,8 +17652,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 = (_Mb) => {
+  var _Nb = _Mb, { children, isSelected } = _Nb, buttonProps = __objRest(_Nb, ["children", "isSelected"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     __spreadProps(__spreadValues({
@@ -18239,8 +18200,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(_Ob, ref) {
+    var _Pb = _Ob, { inset, placement } = _Pb, restProps = __objRest(_Pb, ["inset", "placement"]);
     const dataProperties = toDataProperties({ inset, placement });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Input,
@@ -18336,15 +18297,15 @@ const withForceUpdate = (value) => {
     writable: false
   });
 };
-function FormBigDecimalField(_Ub) {
-  var _Vb = _Ub, {
+function FormBigDecimalField(_Qb) {
+  var _Rb = _Qb, {
     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, [
+  } = _Rb, restProps = __objRest(_Rb, [
     "mode",
     "allowNegative",
     "maxValue",
@@ -18509,8 +18470,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(_Sb, ref) {
+    var _Tb = _Sb, { resize = "none" } = _Tb, restProps = __objRest(_Tb, ["resize"]);
     const dataProperties = toDataProperties({ resize });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,
@@ -18792,6 +18753,40 @@ const CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
     }
   );
 };
+const CloseIcon = (_Ub) => {
+  var _Vb = _Ub, { size = 12 } = _Vb, props = __objRest(_Vb, ["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;
@@ -20581,8 +20576,8 @@ const BankTransactionsHeader = ({
     }
   );
 };
-const Inbox = (_Yb) => {
-  var _Zb = _Yb, { size = 18 } = _Zb, props = __objRest(_Zb, ["size"]);
+const Inbox = (_Wb) => {
+  var _Xb = _Wb, { size = 18 } = _Xb, props = __objRest(_Xb, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -21129,8 +21124,8 @@ function RuleUpdatesPromptStep({ ruleSuggestion, close: close2 }) {
 const CSS_PREFIX$1 = "Layer__UI__Table";
 const getClassName = (component, additionalClassNames, withHidden) => classNames(`${CSS_PREFIX$1}-${component}`, withHidden && `${CSS_PREFIX$1}-${component}--hidden`, additionalClassNames);
 const Table$1 = react.forwardRef(
-  (__b, ref) => {
-    var _$b = __b, { children, className } = _$b, restProps = __objRest(_$b, ["children", "className"]);
+  (_Yb, ref) => {
+    var _Zb = _Yb, { children, className } = _Zb, restProps = __objRest(_Zb, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Table,
       __spreadProps(__spreadValues({
@@ -21143,8 +21138,8 @@ const Table$1 = react.forwardRef(
   }
 );
 Table$1.displayName = "Table";
-const TableHeaderInner = (_ac, ref) => {
-  var _bc = _ac, { children, className, hideHeader } = _bc, restProps = __objRest(_bc, ["children", "className", "hideHeader"]);
+const TableHeaderInner = (__b, ref) => {
+  var _$b = __b, { children, className, hideHeader } = _$b, restProps = __objRest(_$b, ["children", "className", "hideHeader"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableHeader,
     __spreadProps(__spreadValues({
@@ -21157,8 +21152,8 @@ const TableHeaderInner = (_ac, ref) => {
 };
 const TableHeader = react.forwardRef(TableHeaderInner);
 TableHeader.displayName = "TableHeader";
-const TableBodyInner = (_cc, ref) => {
-  var _dc = _cc, { children, className } = _dc, restProps = __objRest(_dc, ["children", "className"]);
+const TableBodyInner = (_ac, ref) => {
+  var _bc = _ac, { children, className } = _bc, restProps = __objRest(_bc, ["children", "className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.TableBody,
     __spreadProps(__spreadValues({
@@ -21171,8 +21166,8 @@ const TableBodyInner = (_cc, ref) => {
 };
 const TableBody$1 = react.forwardRef(TableBodyInner);
 TableBody$1.displayName = "TableBody";
-const RowInner = (_ec, ref) => {
-  var _fc = _ec, { children, className, depth = 0 } = _fc, restProps = __objRest(_fc, ["children", "className", "depth"]);
+const RowInner = (_cc, ref) => {
+  var _dc = _cc, { children, className, depth = 0 } = _dc, restProps = __objRest(_dc, ["children", "className", "depth"]);
   const dataProperties = toDataProperties({ depth });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Row,
@@ -21187,8 +21182,8 @@ const RowInner = (_ec, ref) => {
 const Row = react.forwardRef(RowInner);
 Row.displayName = "Row";
 const Column = react.forwardRef(
-  (_gc, ref) => {
-    var _hc = _gc, { children, className, textAlign = "left" } = _hc, restProps = __objRest(_hc, ["children", "className", "textAlign"]);
+  (_ec, ref) => {
+    var _fc = _ec, { children, className, textAlign = "left" } = _fc, restProps = __objRest(_fc, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Column,
@@ -21203,8 +21198,8 @@ const Column = react.forwardRef(
 );
 Column.displayName = "Column";
 const Cell = react.forwardRef(
-  (_ic, ref) => {
-    var _jc = _ic, { children, className } = _jc, restProps = __objRest(_jc, ["children", "className"]);
+  (_gc, ref) => {
+    var _hc = _gc, { children, className } = _hc, restProps = __objRest(_hc, ["children", "className"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.Cell,
       __spreadProps(__spreadValues({
@@ -21497,8 +21492,8 @@ const SuggestedCategorizationRuleUpdatesDrawer = ({
     /* @__PURE__ */ jsxRuntime.jsx(SuggestedCategorizationRuleUpdates, { ruleSuggestion, close: close2 })
   ] }) });
 };
-const BackArrow = (_kc) => {
-  var _lc = _kc, { size = 18 } = _lc, props = __objRest(_lc, ["size"]);
+const BackArrow = (_ic) => {
+  var _jc = _ic, { size = 18 } = _jc, props = __objRest(_jc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     __spreadProps(__spreadValues({
@@ -21869,8 +21864,8 @@ const CategorizationRulesDrawer = () => {
   ) });
 };
 const COMPONENT_NAME$a = "bank-transactions";
-const BankTransactions = (_mc) => {
-  var _nc = _mc, {
+const BankTransactions = (_kc) => {
+  var _lc = _kc, {
     onError,
     showTags = false,
     showCustomerVendor = false,
@@ -21878,7 +21873,7 @@ const BankTransactions = (_mc) => {
     applyGlobalDateRange = false,
     mode,
     renderInAppLink
-  } = _nc, props = __objRest(_nc, [
+  } = _lc, props = __objRest(_lc, [
     "onError",
     "showTags",
     "showCustomerVendor",
@@ -22165,8 +22160,8 @@ const BankTransactionsTableView = ({
     }
   );
 };
-const QuickbooksIcon = (_oc) => {
-  var _pc = _oc, { size = 24 } = _pc, props = __objRest(_pc, ["size"]);
+const QuickbooksIcon = (_mc) => {
+  var _nc = _mc, { size = 24 } = _nc, props = __objRest(_nc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -22447,8 +22442,8 @@ function QuickbooksContextProvider({ children }) {
   const quickbooksContextData = useQuickbooks();
   return /* @__PURE__ */ jsxRuntime.jsx(QuickbooksContext.Provider, { value: quickbooksContextData, children });
 }
-const Cog = (_qc) => {
-  var _rc = _qc, { size = 12 } = _rc, props = __objRest(_rc, ["size"]);
+const Cog = (_oc) => {
+  var _pc = _oc, { size = 12 } = _pc, props = __objRest(_pc, ["size"]);
   const id = react.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -22568,12 +22563,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";
   }
@@ -23085,8 +23080,8 @@ const useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     refetch
   };
 };
-const BarChart2 = (_sc) => {
-  var _tc = _sc, { size = 12 } = _tc, props = __objRest(_tc, ["size"]);
+const BarChart2 = (_qc) => {
+  var _rc = _qc, { size = 12 } = _rc, props = __objRest(_rc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -23878,11 +23873,11 @@ const ProfitAndLossChart = ({
     isSyncing && !hasNonZeroData ? /* @__PURE__ */ jsxRuntime.jsx(ChartStateCard, {}) : null
   ] });
 };
-const BackButton = (_uc) => {
-  var _vc = _uc, {
+const BackButton = (_sc) => {
+  var _tc = _sc, {
     className,
     textOnly = false
-  } = _vc, props = __objRest(_vc, [
+  } = _tc, props = __objRest(_tc, [
     "className",
     "textOnly"
   ]);
@@ -23907,8 +23902,8 @@ const TASKS_CHARTS_COLORS = {
   done: "#3B9C63",
   pending: "#DFA000"
 };
-const SortArrows = (_wc) => {
-  var _xc = _wc, { size = 13 } = _xc, props = __objRest(_xc, ["size"]);
+const SortArrows = (_uc) => {
+  var _vc = _uc, { size = 13 } = _vc, props = __objRest(_vc, ["size"]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     __spreadProps(__spreadValues({
@@ -24679,6 +24674,17 @@ const Header = react.forwardRef(
   }
 );
 Header.displayName = "Header";
+const CloseButton = (_wc) => {
+  var _xc = _wc, {
+    className,
+    textOnly = false
+  } = _xc, props = __objRest(_xc, [
+    "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,
@@ -25469,7 +25475,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 +25492,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") })
       ] })
     ] }),
@@ -26236,8 +26242,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 +26254,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,25 +26268,24 @@ 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 = ({
@@ -26338,7 +26343,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 +26356,20 @@ 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, 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
         )
@@ -26602,13 +26607,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) => {
@@ -36207,7 +36214,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 +36329,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: [