@layerfi/components 0.1.107-alpha.2 → 0.1.108-alpha

package/dist/esm/index.mjs

@@ -5570,7 +5570,7 @@ import { useState as useState3 } from "react";
 import { useReducer, useEffect } from "react";
 
 // package.json
-var version = "0.1.107-alpha.2";
+var version = "0.1.108-alpha";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -5943,14 +5943,11 @@ import { differenceInDays, formatISO as formatISO2 } from "date-fns";
 import { ZonedDateTime } from "@internationalized/date";
 var toLocalDateString = (date) => formatISO2(date.valueOf(), { representation: "date" });
 function getDueDifference(dueDate) {
-  const today = /* @__PURE__ */ new Date();
-  today.setHours(0, 0, 0, 0);
+  const today3 = /* @__PURE__ */ new Date();
+  today3.setHours(0, 0, 0, 0);
   const normalizedDue = new Date(dueDate);
   normalizedDue.setHours(0, 0, 0, 0);
-  return differenceInDays(normalizedDue, today);
-}
-function isZonedDateTime(val) {
-  return val instanceof ZonedDateTime;
+  return differenceInDays(normalizedDue, today3);
 }
 
 // src/api/layer/profit_and_loss.ts
@@ -6478,10 +6475,10 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 var InAppLinkContext = createContext4({});
 var useInAppLinkContext = () => useContext4(InAppLinkContext);
 var InAppLinkProvider = ({
-  convertToInAppLink,
+  renderInAppLink,
   children
 }) => {
-  return /* @__PURE__ */ jsx4(InAppLinkContext.Provider, { value: { convertToInAppLink }, children });
+  return /* @__PURE__ */ jsx4(InAppLinkContext.Provider, { value: { renderInAppLink }, children });
 };
 
 // src/schemas/customer.ts
@@ -6616,7 +6613,7 @@ var TransactionLedgerEntrySourceSchema = Schema3.Struct({
     Schema3.fromKey("transaction_id")
   ),
   externalId: pipe3(
-    Schema3.propertySignature(Schema3.String),
+    Schema3.propertySignature(Schema3.NullOr(Schema3.String)),
     Schema3.fromKey("external_id")
   ),
   accountName: pipe3(
@@ -6626,7 +6623,7 @@ var TransactionLedgerEntrySourceSchema = Schema3.Struct({
   date: Schema3.String,
   amount: Schema3.Number,
   direction: Schema3.Enums(Direction),
-  counterparty: Schema3.optional(Schema3.String),
+  counterparty: Schema3.optional(Schema3.NullOr(Schema3.String)),
   description: Schema3.optional(Schema3.String),
   memo: Schema3.optional(Schema3.NullOr(Schema3.String)),
   metadata: Schema3.optional(Schema3.NullOr(Schema3.Unknown)),
@@ -6650,7 +6647,7 @@ var InvoiceLedgerEntrySourceSchema = Schema3.Struct({
     Schema3.fromKey("invoice_id")
   ),
   externalId: pipe3(
-    Schema3.propertySignature(Schema3.String),
+    Schema3.propertySignature(Schema3.NullOr(Schema3.String)),
     Schema3.fromKey("external_id")
   ),
   invoiceNumber: pipe3(
@@ -6658,7 +6655,7 @@ var InvoiceLedgerEntrySourceSchema = Schema3.Struct({
     Schema3.fromKey("invoice_number")
   ),
   recipientName: pipe3(
-    Schema3.propertySignature(Schema3.String),
+    Schema3.propertySignature(Schema3.NullOr(Schema3.String)),
     Schema3.fromKey("recipient_name")
   ),
   customerDescription: pipe3(
@@ -6714,7 +6711,7 @@ var InvoicePaymentLedgerEntrySourceSchema = Schema3.Struct({
   ),
   type: Schema3.Literal("Invoice_Payment_Ledger_Entry_Source"),
   externalId: pipe3(
-    Schema3.propertySignature(Schema3.String),
+    Schema3.propertySignature(Schema3.NullOr(Schema3.String)),
     Schema3.fromKey("external_id")
   ),
   invoiceId: pipe3(
@@ -6864,7 +6861,7 @@ var PayoutLedgerEntrySourceSchema = Schema3.Struct({
     Schema3.fromKey("payout_id")
   ),
   externalId: pipe3(
-    Schema3.propertySignature(Schema3.String),
+    Schema3.propertySignature(Schema3.NullOr(Schema3.String)),
     Schema3.fromKey("external_id")
   ),
   paidOutAmount: pipe3(
@@ -13404,30 +13401,32 @@ var Spacer = () => /* @__PURE__ */ jsx68("div", { className: "Layer__Spacer" });
 
 // src/components/BaseConfirmationModal/BaseConfirmationModal.tsx
 import { useCallback as useCallback10, useState as useState13 } from "react";
-import { jsx as jsx69, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx69, jsxs as jsxs35 } from "react/jsx-runtime";
 function BaseConfirmationModal({
   isOpen,
   onOpenChange,
   title,
   description,
+  content,
   onConfirm,
   confirmLabel = "Confirm",
   retryLabel = "Retry",
   cancelLabel = "Cancel",
-  errorText
+  errorText,
+  closeOnConfirm = true
 }) {
   const [isProcessing, setIsProcessing] = useState13(false);
   const [error, setError] = useState13(null);
   const onClickConfirm = useCallback10((close2) => {
     setIsProcessing(true);
     void Promise.resolve(onConfirm()).then(() => {
-      close2();
+      if (closeOnConfirm) close2();
     }).catch((e) => {
       setError(e);
     }).finally(() => {
       setIsProcessing(false);
     });
-  }, [onConfirm]);
+  }, [closeOnConfirm, onConfirm]);
   const getErrorMessage = (error2, errorText2) => {
     var _a;
     if (error2 === null) return null;
@@ -13436,32 +13435,31 @@ function BaseConfirmationModal({
   };
   return /* @__PURE__ */ jsx69(Modal, { flexBlock: true, isOpen, onOpenChange, role: "alertdialog", children: ({ close: close2 }) => {
     var _a;
-    return /* @__PURE__ */ jsxs35(VStack, { gap: "2xs", children: [
-      /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsxs35(Fragment6, { children: [
+      /* @__PURE__ */ jsx69(VStack, { pbe: "2xs", children: /* @__PURE__ */ jsx69(
         ModalTitleWithClose,
         {
           heading: /* @__PURE__ */ jsx69(ModalHeading, { size: "lg", children: title }),
           onClose: close2
         }
-      ),
-      /* @__PURE__ */ jsxs35(VStack, { children: [
-        /* @__PURE__ */ jsx69(ModalDescription, { children: description }),
-        /* @__PURE__ */ jsx69(ModalActions, { children: /* @__PURE__ */ jsxs35(HStack, { gap: "md", children: [
-          /* @__PURE__ */ jsx69(Spacer, {}),
-          /* @__PURE__ */ jsx69(Button, { variant: "secondary" /* secondary */, onClick: close2, children: cancelLabel }),
-          /* @__PURE__ */ jsx69(
-            SubmitButton,
-            {
-              onClick: () => onClickConfirm(close2),
-              processing: isProcessing,
-              error: (_a = getErrorMessage(error, errorText)) != null ? _a : "",
-              withRetry: true,
-              noIcon: !isProcessing,
-              children: error ? retryLabel : confirmLabel
-            }
-          )
-        ] }) })
-      ] })
+      ) }),
+      description && /* @__PURE__ */ jsx69(ModalDescription, { children: description }),
+      content && /* @__PURE__ */ jsx69(ModalContent, { children: content }),
+      /* @__PURE__ */ jsx69(ModalActions, { children: /* @__PURE__ */ jsxs35(HStack, { gap: "md", children: [
+        /* @__PURE__ */ jsx69(Spacer, {}),
+        /* @__PURE__ */ jsx69(Button, { variant: "secondary" /* secondary */, onClick: close2, children: cancelLabel }),
+        /* @__PURE__ */ jsx69(
+          SubmitButton,
+          {
+            onClick: () => onClickConfirm(close2),
+            processing: isProcessing,
+            error: (_a = getErrorMessage(error, errorText)) != null ? _a : "",
+            withRetry: true,
+            noIcon: !isProcessing,
+            children: error ? retryLabel : confirmLabel
+          }
+        )
+      ] }) })
     ] });
   } });
 }
@@ -13692,7 +13690,7 @@ import { Check } from "lucide-react";
 import { useMemo as useMemo13 } from "react";
 import { Checkbox as ReactAriaCheckbox } from "react-aria-components";
 import classNames24 from "classnames";
-import { Fragment as Fragment6, jsx as jsx73, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx73, jsxs as jsxs37 } from "react/jsx-runtime";
 var CLASS_NAME3 = "Layer__Checkbox";
 function Checkbox(_a) {
   var _b = _a, { children, className, variant = "default", size = "md" } = _b, props = __objRest(_b, ["children", "className", "variant", "size"]);
@@ -13705,7 +13703,7 @@ function Checkbox(_a) {
     ReactAriaCheckbox,
     __spreadProps(__spreadValues(__spreadValues({}, dataProperties), props), {
       className: classNames24(CLASS_NAME3, className),
-      children: withRenderProp(children, (node) => /* @__PURE__ */ jsxs37(Fragment6, { children: [
+      children: withRenderProp(children, (node) => /* @__PURE__ */ jsxs37(Fragment7, { children: [
         /* @__PURE__ */ jsx73("div", { slot: "checkbox", children: /* @__PURE__ */ jsx73(Check, { size: size === "lg" ? 16 : 12 }) }),
         node
       ] }))
@@ -13857,7 +13855,7 @@ function useConfirmAndExcludeMultiple({ onSuccess }) {
 }
 
 // src/components/LinkedAccounts/ConfirmationModal/LinkedAccountsConfirmationModal.tsx
-import { Fragment as Fragment7, jsx as jsx76, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx76, jsxs as jsxs40 } from "react/jsx-runtime";
 function getButtonLabel({ totalCount, confirmedCount }) {
   if (confirmedCount === totalCount) {
     return totalCount > 1 ? "Confirm All Accounts" : "Confirm Account";
@@ -13941,7 +13939,7 @@ function LinkedAccountsConfirmationModalContent({ onClose }) {
     }
   });
   const { descriptionLabel, buttonLabel } = getFormComponentLabels(formState);
-  return /* @__PURE__ */ jsxs40(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment8, { children: [
     /* @__PURE__ */ jsx76(
       ModalTitleWithClose,
       {
@@ -13972,7 +13970,7 @@ function LinkedAccountsConfirmationModalContent({ onClose }) {
         }
       }
     ) }),
-    /* @__PURE__ */ jsx76(ModalActions, { children: /* @__PURE__ */ jsx76(VStack, { gap: "md", children: hasError ? /* @__PURE__ */ jsxs40(Fragment7, { children: [
+    /* @__PURE__ */ jsx76(ModalActions, { children: /* @__PURE__ */ jsx76(VStack, { gap: "md", children: hasError ? /* @__PURE__ */ jsxs40(Fragment8, { children: [
       /* @__PURE__ */ jsx76(P, { size: "sm", children: "An error occurred while confirming accounts. You will have an opportunity to try again later." }),
       /* @__PURE__ */ jsx76(P, { size: "sm", children: "No data will be synced until you confirm." }),
       /* @__PURE__ */ jsx76(Button2, { onPress: close, children: "Close" })
@@ -13998,7 +13996,7 @@ function LinkedAccountsConfirmationModal() {
 }
 
 // src/components/LinkedAccounts/LinkedAccountsContent.tsx
-import { Fragment as Fragment8, jsx as jsx77, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx77, jsxs as jsxs41 } from "react/jsx-runtime";
 var LinkedAccountsContent = ({
   asWidget,
   showLedgerBalance,
@@ -14013,7 +14011,7 @@ var LinkedAccountsContent = ({
     showUnlinkItem && "--show-unlink-item",
     showBreakConnection && "--show-break-connection"
   );
-  return /* @__PURE__ */ jsxs41(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs41(Fragment9, { children: [
     /* @__PURE__ */ jsxs41("div", { className: "Layer__linked-accounts__list", children: [
       data == null ? void 0 : data.map((account, index) => /* @__PURE__ */ jsx77(
         LinkedAccountItemThumb,
@@ -14201,7 +14199,7 @@ var UploadCloud2 = (_a) => {
 var UploadCloud_default = UploadCloud2;
 
 // src/components/Input/FileInput.tsx
-import { Fragment as Fragment9, jsx as jsx81, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx81, jsxs as jsxs45 } from "react/jsx-runtime";
 var FileInput = ({
   text = "Upload",
   onUpload,
@@ -14224,7 +14222,7 @@ var FileInput = ({
     }
   };
   if (secondary) {
-    return /* @__PURE__ */ jsxs45(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs45(Fragment10, { children: [
       /* @__PURE__ */ jsx81(TextButton, { onClick, disabled, children: text }),
       /* @__PURE__ */ jsx81(
         "input",
@@ -14238,7 +14236,7 @@ var FileInput = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs45(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment10, { children: [
     /* @__PURE__ */ jsx81(
       Button,
       {
@@ -14554,7 +14552,7 @@ import {
   subQuarters,
   subYears
 } from "date-fns";
-import { Fragment as Fragment10, jsx as jsx88 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx88 } from "react/jsx-runtime";
 var DatePickerOptions = ({
   customDateRanges = [
     {
@@ -14605,7 +14603,7 @@ var DatePickerOptions = ({
   );
   optionsComponents.push(...customOptionComponents);
   if (optionsComponents.length === 0) {
-    return /* @__PURE__ */ jsx88(Fragment10, {});
+    return /* @__PURE__ */ jsx88(Fragment11, {});
   }
   return /* @__PURE__ */ jsx88("div", { className: "Layer__datepicker__popper__custom-footer", children: optionsComponents });
 };
@@ -14613,7 +14611,7 @@ var DatePickerOptions = ({
 // src/components/DatePicker/DatePicker.tsx
 import classNames32 from "classnames";
 import { endOfDay as endOfDay2, endOfMonth as endOfMonth4, endOfYear as endOfYear3, getYear } from "date-fns";
-import { Fragment as Fragment11, jsx as jsx89, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx89, jsxs as jsxs51 } from "react/jsx-runtime";
 var ReactDatePicker = RDP.default.default || RDP.default || RDP;
 var isRangeMode = (displayMode) => displayMode === "dayRangePicker" || displayMode === "monthRangePicker";
 var showNavigationArrows = (navigateArrows, isDesktop) => {
@@ -14915,7 +14913,7 @@ var DatePicker = (_a) => {
         ]
       })
     ),
-    showNavigationArrows(navigateArrows, isDesktop) && /* @__PURE__ */ jsxs51(Fragment11, { children: [
+    showNavigationArrows(navigateArrows, isDesktop) && /* @__PURE__ */ jsxs51(Fragment12, { children: [
       /* @__PURE__ */ jsxs51(
         Button,
         {
@@ -16054,7 +16052,7 @@ var flattenOptionGroups = (options3) => {
   return options3.flatMap(
     (opt) => {
       var _a;
-      return ((_a = opt.value) == null ? void 0 : _a.type) === "GROUP" && Array.isArray(opt.value.items) ? flattenOptionGroups(opt.value.items) : [opt];
+      return ((_a = opt.value) == null ? void 0 : _a.type) === "GROUP" && Array.isArray(opt.value.items) ? [opt, ...flattenOptionGroups(opt.value.items)] : [opt];
     }
   );
 };
@@ -16168,18 +16166,21 @@ var BusinessCategories = ({
   const [optionsToShow, setOptionsToShow] = useState20(categoryOptions);
   const [selectedGroup, setSelectedGroup] = useState20();
   const filteredOptions = useMemo18(() => {
-    const sortedOptions = optionsToShow.sort((a, b) => a.label.localeCompare(b.label));
-    if (!query) return sortedOptions;
-    const lower = query.toLowerCase();
-    const flattenedOptions = flattenOptionGroups(sortedOptions);
-    return flattenedOptions.filter(
-      (opt) => opt.label.toLowerCase().includes(lower)
-    );
+    let options3 = optionsToShow;
+    if (query) {
+      const lower = query.toLowerCase();
+      const flattenedOptions = flattenOptionGroups(options3);
+      options3 = flattenedOptions.filter(
+        (opt) => opt.label.toLowerCase().includes(lower)
+      );
+    }
+    return options3.sort((a, b) => a.label.localeCompare(b.label));
   }, [optionsToShow, query]);
   const onCategorySelect = (v) => {
     if (v.value.type === "GROUP" && v.value.items) {
       setOptionsToShow(v.value.items);
       setSelectedGroup(v.label);
+      setQuery("");
       return;
     }
     select(v);
@@ -16187,13 +16188,14 @@ var BusinessCategories = ({
   const clearSelectedGroup = useCallback13(() => {
     setOptionsToShow(categoryOptions);
     setSelectedGroup(void 0);
+    setQuery("");
   }, [categoryOptions]);
   return /* @__PURE__ */ jsxs63(VStack, { className: "Layer__bank-transaction-mobile-list-item__categories_list-container", pbs: "lg", gap: "md", children: [
     /* @__PURE__ */ jsxs63(VStack, { pis: "sm", pie: "sm", gap: "md", children: [
       /* @__PURE__ */ jsx103(HStack, { pis: "xs", children: selectedGroup ? /* @__PURE__ */ jsxs63(Button2, { variant: "text", onClick: clearSelectedGroup, children: [
         /* @__PURE__ */ jsx103(ChevronLeft2, { size: 18 }),
-        /* @__PURE__ */ jsx103(Span, { size: "lg", weight: "bold", align: "center", children: selectedGroup })
-      ] }) : /* @__PURE__ */ jsx103(Span, { size: "lg", weight: "bold", children: "Select category" }) }),
+        /* @__PURE__ */ jsx103(ModalHeading, { size: "sm", weight: "bold", align: "center", children: selectedGroup })
+      ] }) : /* @__PURE__ */ jsx103(ModalHeading, { size: "sm", weight: "bold", children: "Select category" }) }),
       /* @__PURE__ */ jsx103(SearchField, { value: query, onChange: setQuery, label: "Search categories..." })
     ] }),
     /* @__PURE__ */ jsx103(
@@ -16453,7 +16455,7 @@ var convertMatchDetailsToLinkingMetadata = (matchDetails) => {
 
 // src/components/CategorySelect/CategorySelect.tsx
 import { useCallback as useCallback14, useState as useState21 } from "react";
-import { Fragment as Fragment12, jsx as jsx105, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx105, jsxs as jsxs64 } from "react/jsx-runtime";
 var mapCategoryToOption2 = (category) => {
   var _a, _b;
   return {
@@ -16515,7 +16517,7 @@ var Option2 = (props) => {
     return null;
   }
   if (props.data.type === "match") {
-    const inAppLink = props.convertToInAppLink && props.data.payload.details ? props.convertToInAppLink(convertMatchDetailsToLinkingMetadata(props.data.payload.details)) : null;
+    const inAppLink = props.renderInAppLink && props.data.payload.details ? props.renderInAppLink(convertMatchDetailsToLinkingMetadata(props.data.payload.details)) : null;
     return /* @__PURE__ */ jsxs64(
       components3.Option,
       __spreadProps(__spreadValues({}, props), {
@@ -16604,7 +16606,7 @@ var CategorySelect = ({
 }) => {
   var _a, _b, _c, _d;
   const { data: categories } = useCategories();
-  const { convertToInAppLink } = useInAppLinkContext();
+  const { renderInAppLink } = useInAppLinkContext();
   const [isDrawerOpen, setIsDrawerOpen] = useState21(false);
   const onSelect = useCallback14((option) => {
     if (option.value.payload) {
@@ -16651,7 +16653,7 @@ var CategorySelect = ({
   const selected = value ? value : !excludeMatches && (matchOptions == null ? void 0 : matchOptions.length) === 1 && matchOptions[0].options.length === 1 ? matchOptions[0].options[0] : void 0;
   const placeholder = (matchOptions == null ? void 0 : matchOptions.length) === 1 && matchOptions[0].options.length > 1 ? `${matchOptions[0].options.length} possible matches...` : "Categorize or match...";
   if (asDrawer) {
-    return /* @__PURE__ */ jsxs64(Fragment12, { children: [
+    return /* @__PURE__ */ jsxs64(Fragment13, { children: [
       /* @__PURE__ */ jsxs64(
         "button",
         {
@@ -16715,7 +16717,7 @@ var CategorySelect = ({
       components: {
         DropdownIndicator,
         GroupHeading,
-        Option: (optionProps) => /* @__PURE__ */ jsx105(Option2, __spreadProps(__spreadValues({}, optionProps), { showTooltips, convertToInAppLink }))
+        Option: (optionProps) => /* @__PURE__ */ jsx105(Option2, __spreadProps(__spreadValues({}, optionProps), { showTooltips, renderInAppLink }))
       },
       isDisabled: disabled,
       isOptionDisabled: (option) => {
@@ -17384,7 +17386,7 @@ var MatchForm = ({
 }) => {
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
-  const { convertToInAppLink } = useInAppLinkContext();
+  const { renderInAppLink } = useInAppLinkContext();
   const {
     suggested_matches: suggestedMatches = [],
     match
@@ -17400,12 +17402,12 @@ var MatchForm = ({
       /* @__PURE__ */ jsx114("div", { className: `${classNamePrefix}__match-table__date`, children: "Date" }),
       /* @__PURE__ */ jsx114("div", { className: `${classNamePrefix}__match-table__desc`, children: "Description" }),
       /* @__PURE__ */ jsx114("div", { className: `${classNamePrefix}__match-table__amount`, children: "Amount" }),
-      convertToInAppLink && /* @__PURE__ */ jsx114("div", { className: `${classNamePrefix}__match-table__link`, children: "Link" }),
+      renderInAppLink && /* @__PURE__ */ jsx114("div", { className: `${classNamePrefix}__match-table__link`, children: "Link" }),
       match && /* @__PURE__ */ jsx114("div", { className: `${classNamePrefix}__match-table__status` })
     ] }),
     effectiveSuggestedMatches.map((suggestedMatch) => {
       var _a;
-      const inAppLink = convertToInAppLink ? convertToInAppLink(convertMatchDetailsToLinkingMetadata(suggestedMatch.details)) : null;
+      const inAppLink = renderInAppLink ? renderInAppLink(convertMatchDetailsToLinkingMetadata(suggestedMatch.details)) : null;
       return /* @__PURE__ */ jsxs71(
         "div",
         {
@@ -17499,10 +17501,10 @@ var MatchFormMobile = ({
   readOnly
 }) => {
   var _a;
-  const { convertToInAppLink } = useInAppLinkContext();
+  const { renderInAppLink } = useInAppLinkContext();
   return /* @__PURE__ */ jsxs72("div", { className: `${classNamePrefix}__match-list`, children: [
     (_a = bankTransaction.suggested_matches) == null ? void 0 : _a.map((match, idx) => {
-      const inAppLink = convertToInAppLink ? convertToInAppLink(convertMatchDetailsToLinkingMetadata(match.details)) : null;
+      const inAppLink = renderInAppLink ? renderInAppLink(convertMatchDetailsToLinkingMetadata(match.details)) : null;
       return /* @__PURE__ */ jsxs72(
         "div",
         {
@@ -18558,6 +18560,7 @@ function ComboBox(_a) {
         options: options3 != null ? options3 : groups,
         onInputChange: onInputValueChange,
         escapeClearsValue: true,
+        menuPortalTarget: document.body,
         placeholder,
         unstyled: true,
         className,
@@ -18579,6 +18582,10 @@ function ComboBox(_a) {
           menuList: () => COMBO_BOX_CLASS_NAMES.MENU_LIST,
           group: () => COMBO_BOX_CLASS_NAMES.GROUP
         },
+        styles: {
+          // Ensure the menu portal appears stacked above modals
+          menuPortal: (base) => __spreadProps(__spreadValues({}, base), { zIndex: 101 })
+        },
         components: {
           GroupHeading: CustomGroupHeadingRef.current,
           Option: CustomComboBoxOption,
@@ -19789,7 +19796,7 @@ function BankTransactionFormFields({
 }
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-import { Fragment as Fragment13, jsx as jsx130, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx130, jsxs as jsxs80 } from "react/jsx-runtime";
 var isAlreadyMatched2 = (bankTransaction) => {
   var _a;
   if (bankTransaction == null ? void 0 : bankTransaction.match) {
@@ -20016,7 +20023,7 @@ var ExpandedBankTransactionRow = forwardRef15(
               selected: purpose,
               onChange: onChangePurpose
             }
-          ) }) : /* @__PURE__ */ jsx130(Fragment13, {}),
+          ) }) : /* @__PURE__ */ jsx130(Fragment14, {}),
           /* @__PURE__ */ jsxs80(
             "div",
             {
@@ -20141,7 +20148,7 @@ var ExpandedBankTransactionRow = forwardRef15(
                               variant: "secondary" /* secondary */,
                               children: "Split"
                             }
-                          ) }) : /* @__PURE__ */ jsx130(Fragment13, {})
+                          ) }) : /* @__PURE__ */ jsx130(Fragment14, {})
                         ] })
                       ] })
                     }
@@ -20506,7 +20513,7 @@ function useDelayedVisibility({
 }
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import { Fragment as Fragment14, jsx as jsx137, jsxs as jsxs85 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx137, jsxs as jsxs85 } from "react/jsx-runtime";
 var extractDescriptionForSplit = (category) => {
   if (!category || !category.entries) {
     return "";
@@ -20619,7 +20626,7 @@ var BankTransactionRow = ({
     () => toDataProperties({ "show-receipt-upload-column": showReceiptUploadColumn }),
     [showReceiptUploadColumn]
   );
-  return /* @__PURE__ */ jsxs85(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs85(Fragment15, { children: [
     /* @__PURE__ */ jsxs85("tr", { className: rowClassName, children: [
       /* @__PURE__ */ jsx137(
         "td",
@@ -20712,7 +20719,7 @@ var BankTransactionRow = ({
                   }
                 ) : null,
                 categorized && !open2 ? /* @__PURE__ */ jsxs85(Text, { as: "span", className: `${className}__category-text`, children: [
-                  bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ jsxs85(Fragment14, { children: [
+                  bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ jsxs85(Fragment15, { children: [
                     /* @__PURE__ */ jsx137(
                       Badge,
                       {
@@ -20729,7 +20736,7 @@ var BankTransactionRow = ({
                     ),
                     /* @__PURE__ */ jsx137("span", { className: `${className}__category-text__text`, children: extractDescriptionForSplit(bankTransaction.category) })
                   ] }),
-                  (bankTransaction == null ? void 0 : bankTransaction.categorization_status) === "MATCHED" /* MATCHED */ && (bankTransaction == null ? void 0 : bankTransaction.match) && /* @__PURE__ */ jsxs85(Fragment14, { children: [
+                  (bankTransaction == null ? void 0 : bankTransaction.categorization_status) === "MATCHED" /* MATCHED */ && (bankTransaction == null ? void 0 : bankTransaction.match) && /* @__PURE__ */ jsxs85(Fragment15, { children: [
                     /* @__PURE__ */ jsx137(
                       MatchBadge,
                       {
@@ -20826,11 +20833,11 @@ var BankTransactionRow = ({
 
 // src/components/BankTransactionList/Assignment.tsx
 import { parseISO as parseISO10, format as formatTime7 } from "date-fns";
-import { Fragment as Fragment15, jsx as jsx138, jsxs as jsxs86 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx138, jsxs as jsxs86 } from "react/jsx-runtime";
 var Assignment = ({ bankTransaction }) => {
   var _a, _b, _c, _d;
   if (bankTransaction.match && bankTransaction.categorization_status === "MATCHED" /* MATCHED */) {
-    return /* @__PURE__ */ jsxs86(Fragment15, { children: [
+    return /* @__PURE__ */ jsxs86(Fragment16, { children: [
       /* @__PURE__ */ jsx138(
         MatchBadge,
         {
@@ -20847,7 +20854,7 @@ var Assignment = ({ bankTransaction }) => {
     ] });
   }
   if (bankTransaction.categorization_status === "SPLIT" /* SPLIT */) {
-    return /* @__PURE__ */ jsxs86(Fragment15, { children: [
+    return /* @__PURE__ */ jsxs86(Fragment16, { children: [
       /* @__PURE__ */ jsx138(
         Badge,
         {
@@ -21110,7 +21117,7 @@ var Paperclip_default = Paperclip;
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
 import classNames44 from "classnames";
-import { Fragment as Fragment16, jsx as jsx142, jsxs as jsxs88 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx142, jsxs as jsxs88 } from "react/jsx-runtime";
 var BusinessForm = ({
   bankTransaction,
   showCategorization,
@@ -21184,7 +21191,7 @@ var BusinessForm = ({
       true
     );
   };
-  return /* @__PURE__ */ jsxs88(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment17, { children: [
     /* @__PURE__ */ jsxs88("div", { className: "Layer__bank-transaction-mobile-list-item__business-form", children: [
       showCategorization ? /* @__PURE__ */ jsx142(
         ActionableList,
@@ -21489,7 +21496,7 @@ var MatchForm2 = ({
 // src/components/BankTransactionMobileList/SplitForm.tsx
 import { useEffect as useEffect18, useRef as useRef18, useState as useState34 } from "react";
 import classNames47 from "classnames";
-import { Fragment as Fragment17, jsx as jsx145, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx145, jsxs as jsxs91 } from "react/jsx-runtime";
 var SplitForm = ({
   bankTransaction,
   showTooltips,
@@ -21630,7 +21637,7 @@ var SplitForm = ({
     );
   });
   return /* @__PURE__ */ jsxs91("div", { children: [
-    showCategorization ? /* @__PURE__ */ jsxs91(Fragment17, { children: [
+    showCategorization ? /* @__PURE__ */ jsxs91(Fragment18, { children: [
       /* @__PURE__ */ jsx145(Text, { weight: "bold" /* bold */, size: "sm" /* sm */, children: "Split transaction" }),
       /* @__PURE__ */ jsxs91("div", { className: "Layer__bank-transactions__table-cell__header", children: [
         /* @__PURE__ */ jsx145(Text, { size: "sm" /* sm */, children: "Category" }),
@@ -21864,14 +21871,14 @@ import classNames48 from "classnames";
 import { parseISO as parseISO12, format as formatTime9 } from "date-fns";
 import { jsx as jsx148, jsxs as jsxs93 } from "react/jsx-runtime";
 var DATE_FORMAT2 = "LLL d";
-var getAssignedValue2 = (bankTransaction, convertToInAppLink) => {
+var getAssignedValue2 = (bankTransaction, renderInAppLink) => {
   var _a, _b, _c, _d;
   if (bankTransaction.categorization_status === "SPLIT" /* SPLIT */) {
     return extractDescriptionForSplit(bankTransaction.category);
   }
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */) {
-    if (convertToInAppLink && ((_a = bankTransaction.match) == null ? void 0 : _a.details)) {
-      const inAppLink = convertToInAppLink(convertMatchDetailsToLinkingMetadata(bankTransaction.match.details));
+    if (renderInAppLink && ((_a = bankTransaction.match) == null ? void 0 : _a.details)) {
+      const inAppLink = renderInAppLink(convertMatchDetailsToLinkingMetadata(bankTransaction.match.details));
       if (inAppLink) return inAppLink;
     }
     return (_c = (_b = bankTransaction.match) == null ? void 0 : _b.details) == null ? void 0 : _c.description;
@@ -21896,7 +21903,7 @@ var BankTransactionMobileListItem = ({
     clearTransactionIdToOpen
   } = useContext20(TransactionToOpenContext);
   const { shouldHideAfterCategorize } = useBankTransactionsContext();
-  const { convertToInAppLink } = useInAppLinkContext();
+  const { renderInAppLink } = useInAppLinkContext();
   const formRowRef = useElementSize(
     (_a2, _b, { height: height2 }) => setHeight(height2)
   );
@@ -21983,7 +21990,7 @@ var BankTransactionMobileListItem = ({
           /* @__PURE__ */ jsxs93("div", { className: `${className}__heading__main`, children: [
             /* @__PURE__ */ jsx148(Text, { as: "span", className: `${className}__heading__tx-name`, children: (_a = bankTransaction.counterparty_name) != null ? _a : bankTransaction.description }),
             /* @__PURE__ */ jsxs93(Text, { as: "span", className: `${className}__heading__account-name`, children: [
-              categorized && bankTransaction.categorization_status ? getAssignedValue2(bankTransaction, convertToInAppLink) : null,
+              categorized && bankTransaction.categorization_status ? getAssignedValue2(bankTransaction, renderInAppLink) : null,
               /* @__PURE__ */ jsx148("span", { children: !categorized && bankTransaction.account_name }),
               hasReceipts(bankTransaction) ? /* @__PURE__ */ jsx148(File_default, { size: 12 }) : null
             ] }),
@@ -22631,18 +22638,39 @@ var InvisibleDownload_default = InvisibleDownload;
 import { useState as useState45 } from "react";
 
 // src/components/ui/DropdownMenu/DropdownMenu.tsx
-import { Menu as Menu3, MenuItem as AriaMenuItem, MenuTrigger as MenuTrigger2, Popover as Popover2, Separator as AriaSeparator, Header as Header4, Dialog as Dialog2 } from "react-aria-components";
+import { createContext as createContext15, useContext as useContext21 } from "react";
+import { Menu as AriaMenu, MenuItem as AriaMenuItem, MenuTrigger as MenuTrigger2, Popover as Popover2, Dialog as Dialog2 } from "react-aria-components";
 import { jsx as jsx160, jsxs as jsxs98 } from "react/jsx-runtime";
-var Heading3 = ({ children }) => /* @__PURE__ */ jsx160(Header4, { children: /* @__PURE__ */ jsx160(Text, { size: "sm" /* sm */, weight: "bold" /* bold */, className: "Layer__dropdown-menu__menu-item__heading", children }) });
-var MenuItem3 = ({ children, onClick, isDisabled }) => /* @__PURE__ */ jsx160(AriaMenuItem, { onAction: onClick, isDisabled, className: "Layer__dropdown-menu__menu-item", children });
-var MenuList = ({ children }) => /* @__PURE__ */ jsx160(Menu3, { className: "Layer__dropdown-menu__menu-list", children });
-var DropdownMenu = ({ children, ariaLabel, slots, slotProps }) => {
+var DropdownMenuContext = createContext15({});
+var useDropdownMenu = () => useContext21(DropdownMenuContext);
+var DropdownMenuProvider = DropdownMenuContext.Provider;
+var MenuItem3 = ({ children, onClick, isDisabled }) => {
+  const { variant } = useDropdownMenu();
+  const dataProps = toDataProperties({ variant });
+  return /* @__PURE__ */ jsx160(
+    AriaMenuItem,
+    __spreadProps(__spreadValues({
+      onAction: onClick,
+      isDisabled,
+      className: "Layer__UI__DropdownMenu__MenuItem"
+    }, dataProps), {
+      children
+    })
+  );
+};
+var MenuList = ({ children }) => {
+  const { variant } = useDropdownMenu();
+  const dataProps = toDataProperties({ variant });
+  return /* @__PURE__ */ jsx160(AriaMenu, __spreadProps(__spreadValues({ className: "Layer__UI__DropdownMenu__Menu" }, dataProps), { children }));
+};
+var DropdownMenu = ({ children, ariaLabel, variant, slots, slotProps }) => {
   var _a;
   const { Trigger } = slots;
   const width = (_a = slotProps == null ? void 0 : slotProps.Dialog) == null ? void 0 : _a.width;
+  const dataProps = toDataProperties({ variant });
   return /* @__PURE__ */ jsxs98(MenuTrigger2, { children: [
     /* @__PURE__ */ jsx160(Trigger, { "aria-label": "Menu" }),
-    /* @__PURE__ */ jsx160(Popover2, { placement: "bottom right", className: "Layer__dropdown-menu__popover Layer__variables", children: /* @__PURE__ */ jsx160(Dialog2, { className: "Layer__dropdown-menu__menu", "aria-label": ariaLabel, style: { width }, children }) })
+    /* @__PURE__ */ jsx160(Popover2, { placement: "bottom right", className: "Layer__UI__DropdownMenu__Popover Layer__variables", children: /* @__PURE__ */ jsx160(Dialog2, __spreadProps(__spreadValues({ className: "Layer__UI__DropdownMenu__Dialog", "aria-label": ariaLabel, style: { width } }, dataProps), { children: /* @__PURE__ */ jsx160(DropdownMenuProvider, { value: { variant }, children }) })) })
   ] });
 };
 
@@ -22655,9 +22683,9 @@ import { useCallback as useCallback38, useState as useState44 } from "react";
 // src/components/Wizard/Wizard.tsx
 import {
   Children,
-  createContext as createContext15,
+  createContext as createContext16,
   useCallback as useCallback26,
-  useContext as useContext21,
+  useContext as useContext22,
   useMemo as useMemo34,
   useState as useState38
 } from "react";
@@ -22695,7 +22723,7 @@ function useWizardStep({
   const currentStep = steps.at(effectiveStepIndex);
   return { currentStep, next, previous, goToStep };
 }
-var WizardContext = createContext15({
+var WizardContext = createContext16({
   next: () => __async(null, null, function* () {
   }),
   previous: () => {
@@ -22704,10 +22732,10 @@ var WizardContext = createContext15({
   }
 });
 function useWizard() {
-  return useContext21(WizardContext);
+  return useContext22(WizardContext);
 }
 function Wizard({
-  Header: Header6,
+  Header: Header5,
   Footer,
   onComplete,
   onStepChange,
@@ -22721,7 +22749,7 @@ function Wizard({
   });
   const contextValue = useMemo34(() => ({ next, previous, goToStep }), [next, previous, goToStep]);
   return /* @__PURE__ */ jsxs99(WizardContext.Provider, { value: contextValue, children: [
-    Header6,
+    Header5,
     currentStep,
     Footer
   ] });
@@ -23297,8 +23325,7 @@ function FormDateField({
     setLocalDate(value);
   }, [value]);
   const onBlur = useCallback29(() => {
-    const nextDate = isZonedDateTime(localDate) ? localDate : null;
-    handleChange(nextDate);
+    handleChange(localDate);
     handleBlur();
   }, [handleBlur, handleChange, localDate]);
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
@@ -23539,7 +23566,7 @@ var useCustomAccountForm = ({ onSuccess }) => {
 };
 
 // src/components/CustomAccountForm/CustomAccountForm.tsx
-import { Fragment as Fragment18, jsx as jsx173, jsxs as jsxs103 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx173, jsxs as jsxs103 } from "react/jsx-runtime";
 var accountTypeOptions = [
   { value: "CHECKING" /* CHECKING */, label: "Checking" },
   { value: "SAVINGS" /* SAVINGS */, label: "Savings" },
@@ -23569,7 +23596,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
             validators: {
               onSubmit: ({ value }) => notEmpty(value) ? void 0 : "Account name is required"
             },
-            children: (field) => /* @__PURE__ */ jsx173(Fragment18, { children: /* @__PURE__ */ jsx173(InputGroup, { name: "account_name", label: "Account name", className: "Layer__custom-account-form__field", children: /* @__PURE__ */ jsx173(
+            children: (field) => /* @__PURE__ */ jsx173(Fragment19, { children: /* @__PURE__ */ jsx173(InputGroup, { name: "account_name", label: "Account name", className: "Layer__custom-account-form__field", children: /* @__PURE__ */ jsx173(
               Input,
               {
                 className: "Layer__custom-account-form__input",
@@ -23590,7 +23617,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
             validators: {
               onSubmit: ({ value }) => notEmpty(value) ? void 0 : "Institution name is required"
             },
-            children: (field) => /* @__PURE__ */ jsx173(Fragment18, { children: /* @__PURE__ */ jsx173(InputGroup, { name: "institution_name", label: "Institution name", className: "Layer__custom-account-form__field", children: /* @__PURE__ */ jsx173(
+            children: (field) => /* @__PURE__ */ jsx173(Fragment19, { children: /* @__PURE__ */ jsx173(InputGroup, { name: "institution_name", label: "Institution name", className: "Layer__custom-account-form__field", children: /* @__PURE__ */ jsx173(
               Input,
               {
                 className: "Layer__custom-account-form__input",
@@ -23611,7 +23638,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
             validators: {
               onSubmit: ({ value }) => notEmpty(value) ? void 0 : "Account type is required"
             },
-            children: (field) => /* @__PURE__ */ jsx173(Fragment18, { children: /* @__PURE__ */ jsx173(InputGroup, { name: "account_type", label: "Account type", className: "Layer__custom-account-form__field", children: /* @__PURE__ */ jsx173(
+            children: (field) => /* @__PURE__ */ jsx173(Fragment19, { children: /* @__PURE__ */ jsx173(InputGroup, { name: "account_type", label: "Account type", className: "Layer__custom-account-form__field", children: /* @__PURE__ */ jsx173(
               Select,
               {
                 className: "Layer__custom-account-form__input",
@@ -23926,7 +23953,7 @@ var templateExampleTransactions = [
 ];
 
 // src/components/UploadTransactions/UploadTransactionsUploadCsvStep.tsx
-import { Fragment as Fragment19, jsx as jsx178, jsxs as jsxs105 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx178, jsxs as jsxs105 } from "react/jsx-runtime";
 var formatCreateLabel = (inputValue) => {
   return inputValue ? `Create "${inputValue}"` : "Create account";
 };
@@ -24029,7 +24056,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
         onCancel: () => onSelectAccount(null),
         onSuccess: onCreateAccountSuccess
       }
-    ) }) : /* @__PURE__ */ jsxs105(Fragment19, { children: [
+    ) }) : /* @__PURE__ */ jsxs105(Fragment20, { children: [
       /* @__PURE__ */ jsx178(CsvUpload, { file: selectedFile, onFileSelected, replaceDropTarget: true }),
       /* @__PURE__ */ jsx178(Separator, {}),
       /* @__PURE__ */ jsxs105(VStack, { gap: "xs", className: "Layer__upload-transactions__template-section", children: [
@@ -24505,9 +24532,9 @@ function UploadTransactions({ onComplete }) {
 }
 
 // src/components/BankTransactions/BankTransactionsUploadModal/BankTransactionsUploadModal.tsx
-import { Fragment as Fragment20, jsx as jsx183, jsxs as jsxs110 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx183, jsxs as jsxs110 } from "react/jsx-runtime";
 function BankTransactionsUploadModalContent({ onClose }) {
-  return /* @__PURE__ */ jsxs110(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs110(Fragment21, { children: [
     /* @__PURE__ */ jsx183(ModalCloseButton, { onClose, positionAbsolute: true }),
     /* @__PURE__ */ jsx183(UploadTransactions, { onComplete: onClose })
   ] });
@@ -24517,11 +24544,11 @@ function BankTransactionsUploadModal({ isOpen, onOpenChange }) {
 }
 
 // src/components/BankTransactions/BankTransactionsUploadMenu.tsx
-import { Fragment as Fragment21, jsx as jsx184, jsxs as jsxs111 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx184, jsxs as jsxs111 } from "react/jsx-runtime";
 var MenuTriggerButton = () => /* @__PURE__ */ jsx184(Button2, { variant: "outlined", icon: true, children: /* @__PURE__ */ jsx184(UploadCloud_default, { size: 12 }) });
 var BankTransactionsUploadMenu = () => {
   const [isModalOpen, setIsModalOpen] = useState45(false);
-  return /* @__PURE__ */ jsxs111(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs111(Fragment22, { children: [
     /* @__PURE__ */ jsxs111(
       DropdownMenu,
       {
@@ -24531,10 +24558,10 @@ var BankTransactionsUploadMenu = () => {
           Dialog: { width: "18rem" }
         },
         children: [
-          /* @__PURE__ */ jsx184(Heading3, { children: "Choose how to upload transactions" }),
+          /* @__PURE__ */ jsx184(Heading2, { weight: "bold", size: "2xs", children: "Choose how to upload transactions" }),
           /* @__PURE__ */ jsx184(MenuList, { children: /* @__PURE__ */ jsxs111(MenuItem3, { onClick: () => setIsModalOpen(true), children: [
             /* @__PURE__ */ jsx184(VStack, { className: "Layer__bank-transactions__header-menu__upload-transactions-icon", children: /* @__PURE__ */ jsx184(UploadCloud_default, { size: 16 }) }),
-            /* @__PURE__ */ jsx184(Text, { size: "sm" /* sm */, children: "Upload transactions manually" }),
+            /* @__PURE__ */ jsx184(Span, { size: "sm", children: "Upload transactions manually" }),
             /* @__PURE__ */ jsx184(Spacer, {}),
             /* @__PURE__ */ jsx184(ChevronRight2, { size: 12 })
           ] }, "upload-txns") })
@@ -24546,7 +24573,7 @@ var BankTransactionsUploadMenu = () => {
 };
 
 // src/components/BankTransactions/BankTransactionsHeader.tsx
-import { Fragment as Fragment22, jsx as jsx185, jsxs as jsxs112 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx185, jsxs as jsxs112 } from "react/jsx-runtime";
 function TransactionsSearch({ slot }) {
   const { filters, setFilters } = useBankTransactionsContext();
   const [localSearch, setLocalSearch] = useState46(() => {
@@ -24584,7 +24611,7 @@ var DownloadButton2 = ({
       }
     });
   };
-  return /* @__PURE__ */ jsxs112(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs112(Fragment23, { children: [
     /* @__PURE__ */ jsx185(
       DownloadButton,
       {
@@ -24807,7 +24834,7 @@ var BankTransactions = (_a) => {
     monthlyView = false,
     applyGlobalDateRange = false,
     mode,
-    convertToInAppLink
+    renderInAppLink
   } = _b, props = __objRest(_b, [
     "onError",
     "showTags",
@@ -24815,13 +24842,13 @@ var BankTransactions = (_a) => {
     "monthlyView",
     "applyGlobalDateRange",
     "mode",
-    "convertToInAppLink"
+    "renderInAppLink"
   ]);
   usePreloadTagDimensions({ isEnabled: showTags });
   usePreloadCustomers({ isEnabled: showCustomerVendor });
   usePreloadVendors({ isEnabled: showCustomerVendor });
   const contextData = useAugmentedBankTransactions({ monthlyView, applyGlobalDateRange });
-  return /* @__PURE__ */ jsx188(ErrorBoundary, { onError, children: /* @__PURE__ */ jsx188(BankTransactionsContext.Provider, { value: contextData, children: /* @__PURE__ */ jsx188(LegacyModeProvider, { overrideMode: mode, children: /* @__PURE__ */ jsx188(BankTransactionTagVisibilityProvider, { showTags, children: /* @__PURE__ */ jsx188(BankTransactionCustomerVendorVisibilityProvider, { showCustomerVendor, children: /* @__PURE__ */ jsx188(InAppLinkProvider, { convertToInAppLink, children: /* @__PURE__ */ jsx188(BankTransactionsContent, __spreadValues({}, props)) }) }) }) }) }) });
+  return /* @__PURE__ */ jsx188(ErrorBoundary, { onError, children: /* @__PURE__ */ jsx188(BankTransactionsContext.Provider, { value: contextData, children: /* @__PURE__ */ jsx188(LegacyModeProvider, { overrideMode: mode, children: /* @__PURE__ */ jsx188(BankTransactionTagVisibilityProvider, { showTags, children: /* @__PURE__ */ jsx188(BankTransactionCustomerVendorVisibilityProvider, { showCustomerVendor, children: /* @__PURE__ */ jsx188(InAppLinkProvider, { renderInAppLink, children: /* @__PURE__ */ jsx188(BankTransactionsContent, __spreadValues({}, props)) }) }) }) }) }) });
 };
 var BankTransactionsContent = ({
   asWidget = false,
@@ -25039,13 +25066,13 @@ var BankTransactionsContent = ({
 };
 
 // src/components/Integrations/Integrations.tsx
-import { useContext as useContext27 } from "react";
+import { useContext as useContext28 } from "react";
 
 // src/components/Integrations/IntegrationsContent.tsx
-import { useContext as useContext25 } from "react";
+import { useContext as useContext26 } from "react";
 
 // src/components/Integrations/IntegrationsQuickbooksItemThumb/IntegrationsQuickbooksItemThumb.tsx
-import { useCallback as useCallback40, useContext as useContext24, useMemo as useMemo40, useState as useState48 } from "react";
+import { useCallback as useCallback40, useContext as useContext25, useMemo as useMemo40, useState as useState48 } from "react";
 
 // src/icons/QuickbooksIcon.tsx
 import { jsx as jsx189, jsxs as jsxs115 } from "react/jsx-runtime";
@@ -25094,8 +25121,8 @@ var Card = ({ children, className }) => {
 };
 
 // src/contexts/QuickbooksContext/QuickbooksContext.tsx
-import { createContext as createContext16 } from "react";
-var QuickbooksContext = createContext16({
+import { createContext as createContext17 } from "react";
+var QuickbooksContext = createContext17({
   linkQuickbooks: () => Promise.reject(new Error("QuickbooksContext used without Provider")),
   unlinkQuickbooks: () => Promise.reject(new Error("QuickbooksContext used without Provider")),
   syncFromQuickbooks: () => {
@@ -25105,7 +25132,7 @@ var QuickbooksContext = createContext16({
 });
 
 // src/components/Integrations/IntegrationsQuickbooksItemThumb/IntegrationsQuickbooksItemThumbFooter.tsx
-import { useContext as useContext22 } from "react";
+import { useContext as useContext23 } from "react";
 import { format, isValid } from "date-fns";
 
 // src/components/Integrations/IntegrationsQuickbooksItemThumb/utils.ts
@@ -25163,7 +25190,7 @@ var getFooterConfig = (quickbooksUiState, lastSyncedAt) => {
   }
 };
 var IntegrationsQuickbooksItemThumbFooter = ({ quickbooksUiState }) => {
-  const { quickbooksConnectionStatus } = useContext22(QuickbooksContext);
+  const { quickbooksConnectionStatus } = useContext23(QuickbooksContext);
   if (!quickbooksConnectionStatus) return null;
   const { title, description, badgeVariant } = getFooterConfig(quickbooksUiState, quickbooksConnectionStatus.last_synced_at);
   return /* @__PURE__ */ jsxs117(HStack, { className: "loadingbar", children: [
@@ -25180,10 +25207,10 @@ var IntegrationsQuickbooksItemThumbFooter = ({ quickbooksUiState }) => {
 import { AlertCircle as AlertCircle2, CheckIcon } from "lucide-react";
 
 // src/components/Integrations/IntegrationsQuickbooksItemThumb/IntegrationsQuickbooksUnlinkConfirmationModal.tsx
-import { useContext as useContext23 } from "react";
+import { useContext as useContext24 } from "react";
 import { jsx as jsx193 } from "react/jsx-runtime";
 function IntegrationsQuickbooksUnlinkConfirmationModal({ isOpen, onOpenChange }) {
-  const { unlinkQuickbooks } = useContext23(QuickbooksContext);
+  const { unlinkQuickbooks } = useContext24(QuickbooksContext);
   return /* @__PURE__ */ jsx193(
     BaseConfirmationModal,
     {
@@ -25235,7 +25262,7 @@ var getBadgeConfig = (quickbooksUiState, hasSynced) => {
   }
 };
 var IntegrationsQuickbooksItemThumb = () => {
-  const { quickbooksConnectionStatus, syncFromQuickbooks: syncFromQuickbooks2 } = useContext24(QuickbooksContext);
+  const { quickbooksConnectionStatus, syncFromQuickbooks: syncFromQuickbooks2 } = useContext25(QuickbooksContext);
   const [hasSynced, setHasSynced] = useState48(false);
   const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState48(false);
   const onSync = useCallback40(() => {
@@ -25284,7 +25311,7 @@ var IntegrationsQuickbooksItemThumb = () => {
 // src/components/Integrations/IntegrationsContent.tsx
 import { jsx as jsx195 } from "react/jsx-runtime";
 var IntegrationsContent = () => {
-  const { quickbooksConnectionStatus } = useContext25(QuickbooksContext);
+  const { quickbooksConnectionStatus } = useContext26(QuickbooksContext);
   return /* @__PURE__ */ jsx195("div", { className: "Layer__linked-accounts__list", children: (quickbooksConnectionStatus == null ? void 0 : quickbooksConnectionStatus.is_connected) && /* @__PURE__ */ jsx195(IntegrationsQuickbooksItemThumb, {}) });
 };
 
@@ -25361,7 +25388,7 @@ function QuickbooksContextProvider({ children }) {
 }
 
 // src/components/Integrations/IntegrationsConnectMenu/IntegrationsConnectMenu.tsx
-import { useCallback as useCallback42, useContext as useContext26, useState as useState50 } from "react";
+import { useCallback as useCallback42, useContext as useContext27, useState as useState50 } from "react";
 
 // src/icons/Cog.tsx
 import { useId as useId4 } from "react";
@@ -25398,7 +25425,7 @@ var MenuTriggerButton2 = () => /* @__PURE__ */ jsxs120(Button2, { variant: "outl
 ] });
 var IntegrationsConnectMenu = () => {
   const { addToast } = useLayerContext();
-  const { quickbooksConnectionStatus, linkQuickbooks } = useContext26(QuickbooksContext);
+  const { quickbooksConnectionStatus, linkQuickbooks } = useContext27(QuickbooksContext);
   const quickbooksIsConnected = quickbooksConnectionStatus == null ? void 0 : quickbooksConnectionStatus.is_connected;
   const [isLinkQuickbooksError, setIsLinkQuickbooksError] = useState50(false);
   const initiateQuickbooksOAuth = useCallback42(() => {
@@ -25416,15 +25443,15 @@ var IntegrationsConnectMenu = () => {
       slots: { Trigger: MenuTriggerButton2 },
       slotProps: { Dialog: { width: 280 } },
       children: [
-        /* @__PURE__ */ jsx198(Heading3, { children: "Integrations" }),
+        /* @__PURE__ */ jsx198(Heading2, { size: "2xs", weight: "bold", children: "Integrations" }),
         /* @__PURE__ */ jsx198(MenuList, { children: quickbooksIsConnected ? /* @__PURE__ */ jsxs120(MenuItem3, { isDisabled: true, children: [
           /* @__PURE__ */ jsx198(QuickbooksIcon_default, { size: 20 }),
-          /* @__PURE__ */ jsx198(Text, { size: "sm" /* sm */, children: "QuickBooks connected" }),
+          /* @__PURE__ */ jsx198(Span, { size: "sm", children: "QuickBooks connected" }),
           /* @__PURE__ */ jsx198(Spacer, {}),
           /* @__PURE__ */ jsx198(Check_default, { size: 16 })
         ] }, "quickbooks-connected") : /* @__PURE__ */ jsxs120(MenuItem3, { onClick: initiateQuickbooksOAuth, children: [
           /* @__PURE__ */ jsx198(QuickbooksIcon_default, { size: 20 }),
-          /* @__PURE__ */ jsx198(Text, __spreadProps(__spreadValues({}, isLinkQuickbooksError && { status: "error" }), { size: "sm" /* sm */, children: isLinkQuickbooksError ? "Retry Connect QuickBooks" : "Connect QuickBooks" })),
+          /* @__PURE__ */ jsx198(Span, __spreadProps(__spreadValues({}, isLinkQuickbooksError && { status: "error" }), { size: "sm", children: isLinkQuickbooksError ? "Retry Connect QuickBooks" : "Connect QuickBooks" })),
           /* @__PURE__ */ jsx198(Spacer, {}),
           /* @__PURE__ */ jsx198(Link_default, { size: 12 })
         ] }, "connect-quickbooks") })
@@ -25442,7 +25469,7 @@ var Integrations = (props) => {
 var IntegrationsComponent = ({
   stringOverrides
 }) => {
-  const { quickbooksConnectionStatus } = useContext27(QuickbooksContext);
+  const { quickbooksConnectionStatus } = useContext28(QuickbooksContext);
   const isLoading = quickbooksConnectionStatus === void 0;
   return /* @__PURE__ */ jsxs121(Container, { name: COMPONENT_NAME3, children: [
     /* @__PURE__ */ jsxs121(Header, { className: "Layer__linked-accounts__header", children: [
@@ -25469,11 +25496,11 @@ var IntegrationsComponent = ({
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import { createContext as createContext21 } from "react";
+import { createContext as createContext22 } from "react";
 
 // src/contexts/ProfitAndLossComparisonContext/ProfitAndLossComparisonContext.tsx
-import { createContext as createContext17 } from "react";
-var PNLComparisonContext = createContext17({
+import { createContext as createContext18 } from "react";
+var PNLComparisonContext = createContext18({
   data: void 0,
   isLoading: true,
   isValidating: false,
@@ -25546,7 +25573,7 @@ var applyShare = (items, total) => {
 };
 
 // src/providers/ReportsModeStoreProvider/ReportsModeStoreProvider.tsx
-import { useState as useState51, createContext as createContext18, useContext as useContext28 } from "react";
+import { useState as useState51, createContext as createContext19, useContext as useContext29 } from "react";
 import { createStore as createStore3, useStore as useStore4 } from "zustand";
 import { jsx as jsx200 } from "react/jsx-runtime";
 var defaultModeByReport = {
@@ -25555,7 +25582,7 @@ var defaultModeByReport = {
   ["BalanceSheet" /* BalanceSheet */]: "dayPicker",
   ["StatementOfCashFlows" /* StatementOfCashFlows */]: "monthPicker"
 };
-var ReportsModeStoreContext = createContext18(
+var ReportsModeStoreContext = createContext19(
   createStore3(() => ({
     resetPnLModeToDefaultOnMount: true,
     modeByReport: {},
@@ -25566,15 +25593,15 @@ var ReportsModeStoreContext = createContext18(
   }))
 );
 function useReportModeStore() {
-  const store = useContext28(ReportsModeStoreContext);
+  const store = useContext29(ReportsModeStoreContext);
   return useStore4(store);
 }
 function useReportMode(report) {
-  const store = useContext28(ReportsModeStoreContext);
+  const store = useContext29(ReportsModeStoreContext);
   return useStore4(store, (state) => state.modeByReport[report]);
 }
 function useReportModeActions() {
-  const store = useContext28(ReportsModeStoreContext);
+  const store = useContext29(ReportsModeStoreContext);
   const setModeForReport = useStore4(store, (s) => s.actions.setModeForReport);
   return { setModeForReport };
 }
@@ -26210,8 +26237,8 @@ var getChartWindow = ({
   currentYear,
   currentMonth
 }) => {
-  const today = startOfMonth8(Date.now());
-  const yearAgo = sub2(today, { months: 11 });
+  const today3 = startOfMonth8(Date.now());
+  const yearAgo = sub2(today3, { months: 11 });
   const current = startOfMonth8(new Date(currentYear, currentMonth - 1, 1));
   if (differenceInMonths(startOfMonth8(chartWindow.start), current) < 0 && differenceInMonths(startOfMonth8(chartWindow.end), current) > 1) {
     return chartWindow;
@@ -26222,13 +26249,13 @@ var getChartWindow = ({
       end: endOfMonth6(add(current, { months: 11 }))
     };
   }
-  if (differenceInMonths(endOfMonth6(chartWindow.end), endOfMonth6(current)) === 1 && differenceInMonths(today, current) >= 1) {
+  if (differenceInMonths(endOfMonth6(chartWindow.end), endOfMonth6(current)) === 1 && differenceInMonths(today3, current) >= 1) {
     return {
       start: startOfMonth8(sub2(current, { months: 10 })),
       end: endOfMonth6(add(current, { months: 2 }))
     };
   }
-  if (differenceInMonths(current, startOfMonth8(chartWindow.end)) === 0 && differenceInMonths(current, startOfMonth8(today)) > 0) {
+  if (differenceInMonths(current, startOfMonth8(chartWindow.end)) === 0 && differenceInMonths(current, startOfMonth8(today3)) > 0) {
     return {
       start: startOfMonth8(sub2(current, { months: 11 })),
       end: endOfMonth6(add(current, { months: 1 }))
@@ -26237,7 +26264,7 @@ var getChartWindow = ({
   if (current >= yearAgo) {
     return {
       start: startOfMonth8(yearAgo),
-      end: endOfMonth6(today)
+      end: endOfMonth6(today3)
     };
   }
   if (Number(current) > Number(chartWindow.end)) {
@@ -26378,9 +26405,9 @@ var ProfitAndLossChart = ({
     var _a;
     if (isLoading || !hasNonZeroData) {
       const loadingData = [];
-      const today = Date.now();
+      const today3 = Date.now();
       for (let i = 11; i >= 0; i--) {
-        const currentDate = sub2(today, { months: i });
+        const currentDate = sub2(today3, { months: i });
         loadingData.push({
           name: format3(currentDate, compactView ? "LLLLL" : "LLL"),
           revenue: 0,
@@ -26905,7 +26932,7 @@ var ProfitAndLossChart = ({
 };
 
 // src/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions.tsx
-import { useContext as useContext29, useMemo as useMemo45 } from "react";
+import { useContext as useContext30, useMemo as useMemo45 } from "react";
 import { jsx as jsx205, jsxs as jsxs125 } from "react/jsx-runtime";
 var selectStyles = {
   valueContainer: (styles) => {
@@ -26945,7 +26972,7 @@ var ProfitAndLossCompareOptions = () => {
     compareOptions,
     selectedCompareOptions,
     comparisonConfig
-  } = useContext29(ProfitAndLoss2.ComparisonContext);
+  } = useContext30(ProfitAndLoss2.ComparisonContext);
   const rangeDisplayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
   const periods = useMemo45(
     () => comparePeriods !== 0 ? comparePeriods : 1,
@@ -27138,7 +27165,7 @@ var ProfitAndLossDatePicker = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-import { useContext as useContext30, useState as useState56 } from "react";
+import { useContext as useContext31, useState as useState56 } from "react";
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
 import { useMemo as useMemo47 } from "react";
@@ -27801,7 +27828,7 @@ var ProfitAndLossDetailedCharts = ({
     sidebarScope,
     setSidebarScope,
     setFilterTypes
-  } = useContext30(ProfitAndLoss2.Context);
+  } = useContext31(ProfitAndLoss2.Context);
   const theScope = scope ? scope : sidebarScope;
   const data = theScope === "revenue" ? filteredDataRevenue : filteredDataExpenses;
   const total = theScope === "revenue" ? filteredTotalRevenue : filteredTotalExpenses;
@@ -27874,7 +27901,7 @@ var ProfitAndLossDetailedCharts = ({
 };
 
 // src/components/ProfitAndLossDownloadButton/ProfitAndLossDownloadButton.tsx
-import { useContext as useContext31, useState as useState57 } from "react";
+import { useContext as useContext32, useState as useState57 } from "react";
 import { jsx as jsx213 } from "react/jsx-runtime";
 var ProfitAndLossDownloadButton = ({
   stringOverrides,
@@ -27882,8 +27909,8 @@ var ProfitAndLossDownloadButton = ({
   moneyFormat,
   view
 }) => {
-  const { dateRange, tagFilter } = useContext31(ProfitAndLoss2.Context);
-  const { getProfitAndLossComparisonCsv } = useContext31(
+  const { dateRange, tagFilter } = useContext32(ProfitAndLoss2.Context);
+  const { getProfitAndLossComparisonCsv } = useContext32(
     ProfitAndLoss2.ComparisonContext
   );
   const { businessId } = useLayerContext();
@@ -27991,7 +28018,7 @@ var ProfitAndLossHeader = ({
 };
 
 // src/components/ProfitAndLossReport/ProfitAndLossReport.tsx
-import { useCallback as useCallback49, useContext as useContext35, useMemo as useMemo53, useState as useState60 } from "react";
+import { useCallback as useCallback49, useContext as useContext36, useMemo as useMemo53, useState as useState60 } from "react";
 
 // src/components/Header/Header.tsx
 import {
@@ -27999,7 +28026,7 @@ import {
 } from "react";
 import classNames66 from "classnames";
 import { jsx as jsx216 } from "react/jsx-runtime";
-var Header5 = forwardRef22(
+var Header4 = forwardRef22(
   ({ className, children, style, sticky, asHeader, rounded }, ref) => {
     const baseClassName = classNames66(
       "Layer__header",
@@ -28021,7 +28048,7 @@ var Header5 = forwardRef22(
     );
   }
 );
-Header5.displayName = "Header";
+Header4.displayName = "Header";
 
 // src/components/Header/HeaderRow.tsx
 import classNames67 from "classnames";
@@ -28040,7 +28067,7 @@ var HeaderCol = ({ className, children, style, noPadding = false }) => {
 };
 
 // src/components/ProfitAndLossDetailLinesDownloadButton/ProfitAndLossDetailLinesDownloadButton.tsx
-import { useContext as useContext32 } from "react";
+import { useContext as useContext33 } from "react";
 
 // src/hooks/useProfitAndLoss/useProfitAndLossDetailLinesExport.ts
 import useSWRMutation13 from "swr/mutation";
@@ -28137,13 +28164,13 @@ function useProfitAndLossDetailLinesExport({
 }
 
 // src/components/ProfitAndLossDetailLinesDownloadButton/ProfitAndLossDetailLinesDownloadButton.tsx
-import { Fragment as Fragment23, jsx as jsx219, jsxs as jsxs132 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx219, jsxs as jsxs132 } from "react/jsx-runtime";
 function ProfitAndLossDetailLinesDownloadButton({
   pnlStructureLineItemName,
   iconOnly
 }) {
   const { businessId } = useLayerContext();
-  const { tagFilter, dateRange } = useContext32(ProfitAndLoss2.Context);
+  const { tagFilter, dateRange } = useContext33(ProfitAndLoss2.Context);
   const { invisibleDownloadRef, triggerInvisibleDownload } = useInvisibleDownload();
   const { trigger, isMutating, error } = useProfitAndLossDetailLinesExport({
     businessId,
@@ -28157,7 +28184,7 @@ function ProfitAndLossDetailLinesDownloadButton({
       }
     }
   });
-  return /* @__PURE__ */ jsxs132(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs132(Fragment24, { children: [
     /* @__PURE__ */ jsx219(
       DownloadButton,
       {
@@ -28285,14 +28312,14 @@ var View = forwardRef23(
 View.displayName = "View";
 
 // src/components/ProfitAndLossDetailReport/ProfitAndLossDetailReport.tsx
-import { useContext as useContext34, useState as useState59, useMemo as useMemo52, useCallback as useCallback48 } from "react";
+import { useContext as useContext35, useState as useState59, useMemo as useMemo52, useCallback as useCallback48 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import { useContext as useContext33, useMemo as useMemo50 } from "react";
+import { useContext as useContext34, useMemo as useMemo50 } from "react";
 
 // src/contexts/LedgerAccountsContext/LedgerAccountsContext.tsx
-import { createContext as createContext19 } from "react";
-var LedgerAccountsContext = createContext19({
+import { createContext as createContext20 } from "react";
+var LedgerAccountsContext = createContext20({
   data: void 0,
   entryData: void 0,
   isLoading: false,
@@ -28476,7 +28503,7 @@ var TableHead = ({ children }) => {
 
 // src/components/TableRow/TableRow.tsx
 import classNames74 from "classnames";
-import { Fragment as Fragment24, jsx as jsx229, jsxs as jsxs140 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx229, jsxs as jsxs140 } from "react/jsx-runtime";
 var TableRow = ({
   rowKey,
   children,
@@ -28506,7 +28533,7 @@ var TableRow = ({
     selected && "Layer__table-row--selected",
     !isHeadRow && expandable && (isExpanded ? "Layer__table-row--expanded" : "Layer__table-row--collapsed")
   ]);
-  return /* @__PURE__ */ jsxs140(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs140(Fragment25, { children: [
     withDivider && withDividerPosition === "top" && /* @__PURE__ */ jsx229("tr", { className: "Layer__table-empty-row", children: /* @__PURE__ */ jsx229("td", { colSpan: Array.isArray(children) ? children.length : 1 }) }),
     /* @__PURE__ */ jsx229(
       "tr",
@@ -28543,7 +28570,7 @@ var Table = ({
 };
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import { Fragment as Fragment25, jsx as jsx231, jsxs as jsxs141 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx231, jsxs as jsxs141 } from "react/jsx-runtime";
 var SourceDetailView = ({
   source,
   stringOverrides
@@ -28551,7 +28578,7 @@ var SourceDetailView = ({
   var _a, _b;
   switch (source.type) {
     case "Transaction_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(
           DetailsListItem,
           {
@@ -28578,7 +28605,7 @@ var SourceDetailView = ({
       ] });
     }
     case "Invoice_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(
           DetailsListItem,
           {
@@ -28598,7 +28625,7 @@ var SourceDetailView = ({
       ] });
     }
     case "Manual_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.memoLabel) || "Memo", children: source.memo }),
         /* @__PURE__ */ jsx231(
           DetailsListItem,
@@ -28610,7 +28637,7 @@ var SourceDetailView = ({
       ] });
     }
     case "Invoice_Payment_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(
           DetailsListItem,
           {
@@ -28622,7 +28649,7 @@ var SourceDetailView = ({
       ] });
     }
     case "Refund_Allocation_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.amount) }),
         /* @__PURE__ */ jsx231(
           DetailsListItem,
@@ -28634,7 +28661,7 @@ var SourceDetailView = ({
       ] });
     }
     case "Refund_Payment_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.refundedToCustomerAmount) }),
         /* @__PURE__ */ jsx231(
           DetailsListItem,
@@ -28655,7 +28682,7 @@ var SourceDetailView = ({
       );
     }
     case "Payout_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.paidOutAmount) }),
         /* @__PURE__ */ jsx231(
           DetailsListItem,
@@ -28667,7 +28694,7 @@ var SourceDetailView = ({
       ] });
     }
     case "Quickbooks_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(
           DetailsListItem,
           {
@@ -28679,7 +28706,7 @@ var SourceDetailView = ({
       ] });
     }
     case "Invoice_Write_Off_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(
           DetailsListItem,
           {
@@ -28699,19 +28726,19 @@ var SourceDetailView = ({
       ] });
     }
     case "Vendor_Refund_Allocation_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.amount) }),
         /* @__PURE__ */ jsx231(DetailsListItem, { label: "Vendor Description", children: source.vendorDescription })
       ] });
     }
     case "Vendor_Refund_Payment_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: "Refunded Amount", children: convertCentsToCurrency(source.refundedByVendorAmount) }),
         /* @__PURE__ */ jsx231(DetailsListItem, { label: "Vendor Description", children: source.vendorDescription })
       ] });
     }
     case "Vendor_Payout_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.paidOutAmount) }),
         /* @__PURE__ */ jsx231(
           DetailsListItem,
@@ -28730,7 +28757,7 @@ var SourceDetailView = ({
       return /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.amount) });
     }
     case "Bill_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: "Bill Number", children: source.billNumber }),
         /* @__PURE__ */ jsx231(DetailsListItem, { label: "Vendor Description", children: source.vendorDescription }),
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.dateLabel) || "Date", children: /* @__PURE__ */ jsx231(DateTime, { value: source.date }) }),
@@ -28738,21 +28765,21 @@ var SourceDetailView = ({
       ] });
     }
     case "Bill_Payment_Ledger_Entry_Source": {
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: "Bill Number", children: source.billNumber }),
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.amount) })
       ] });
     }
     case "Vendor_Credit_Ledger_Entry_Source": {
       const vendorDisplayName = (_a = source.vendor.individualName) != null ? _a : source.vendor.companyName;
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.amount) }),
         vendorDisplayName && /* @__PURE__ */ jsx231(DetailsListItem, { label: "Vendor", children: vendorDisplayName })
       ] });
     }
     case "Customer_Credit_Ledger_Entry_Source": {
       const customerDisplayName = (_b = source.customer.individualName) != null ? _b : source.customer.companyName;
-      return /* @__PURE__ */ jsxs141(Fragment25, { children: [
+      return /* @__PURE__ */ jsxs141(Fragment26, { children: [
         /* @__PURE__ */ jsx231(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount", children: convertCentsToCurrency(source.amount) }),
         customerDisplayName && /* @__PURE__ */ jsx231(DetailsListItem, { label: "Customer", children: customerDisplayName })
       ] });
@@ -28765,8 +28792,8 @@ var LedgerAccountEntryDetails = ({
   stringOverrides
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
-  const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext33(LedgerAccountsContext);
-  const { convertToInAppLink } = useInAppLinkContext();
+  const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext34(LedgerAccountsContext);
+  const { renderInAppLink } = useInAppLinkContext();
   const { totalDebit, totalCredit } = useMemo50(() => {
     var _a2;
     let totalDebit2 = 0;
@@ -28787,14 +28814,14 @@ var LedgerAccountEntryDetails = ({
     var _a2, _b2;
     const badgeContent = (_a2 = ledgerEntrySource == null ? void 0 : ledgerEntrySource.entityName) != null ? _a2 : entryData == null ? void 0 : entryData.entry_type;
     const defaultBadge = /* @__PURE__ */ jsx231(Badge, { children: badgeContent });
-    if (!convertToInAppLink || !ledgerEntrySource) {
+    if (!renderInAppLink || !ledgerEntrySource) {
       return defaultBadge;
     }
     const linkingMetadata = convertLedgerEntrySourceToLinkingMetadata(ledgerEntrySource);
-    return (_b2 = convertToInAppLink(linkingMetadata)) != null ? _b2 : defaultBadge;
-  }, [convertToInAppLink, entryData == null ? void 0 : entryData.entry_type, ledgerEntrySource]);
+    return (_b2 = renderInAppLink(linkingMetadata)) != null ? _b2 : defaultBadge;
+  }, [renderInAppLink, entryData == null ? void 0 : entryData.entry_type, ledgerEntrySource]);
   return /* @__PURE__ */ jsxs141("div", { className: "Layer__ledger-account__entry-details", children: [
-    /* @__PURE__ */ jsx231(Header5, { className: "Layer__ledger-account__entry-details__header", children: /* @__PURE__ */ jsxs141(HeaderRow, { children: [
+    /* @__PURE__ */ jsx231(Header4, { className: "Layer__ledger-account__entry-details__header", children: /* @__PURE__ */ jsxs141(HeaderRow, { children: [
       /* @__PURE__ */ jsxs141(HeaderCol, { className: "Layer__hidden-lg Layer__hidden-xl", children: [
         /* @__PURE__ */ jsx231(BackButton, { onClick: closeSelectedEntry }),
         /* @__PURE__ */ jsx231(Heading, { size: "secondary" /* secondary */, children: (stringOverrides == null ? void 0 : stringOverrides.title) || "Transaction details" })
@@ -29158,11 +29185,11 @@ var VirtualizedDataTable = ({
 // src/components/BaseDetailView/BaseDetailView.tsx
 import { jsx as jsx234, jsxs as jsxs143 } from "react/jsx-runtime";
 var BaseDetailView = ({ name, onGoBack, slots, children, borderless = false }) => {
-  const { Header: Header6, BackIcon } = slots;
+  const { Header: Header5, BackIcon } = slots;
   return /* @__PURE__ */ jsxs143(Container, { name, className: "Layer__BaseDetailView", transparentBg: borderless, children: [
     /* @__PURE__ */ jsxs143(HStack, { align: "center", gap: "md", className: "Layer__BaseDetailView__Header", children: [
       /* @__PURE__ */ jsx234(Button2, { variant: "outlined", icon: true, onPress: onGoBack, children: BackIcon ? /* @__PURE__ */ jsx234(BackIcon, {}) : /* @__PURE__ */ jsx234(BackArrow_default, {}) }),
-      /* @__PURE__ */ jsx234(Header6, {})
+      /* @__PURE__ */ jsx234(Header5, {})
     ] }),
     children
   ] });
@@ -29241,8 +29268,19 @@ var ProfitAndLossDetailReport = ({
   stringOverrides
 }) => {
   const { businessId } = useLayerContext();
-  const { tagFilter, dateRange } = useContext34(ProfitAndLoss2.Context);
+  const { tagFilter, dateRange } = useContext35(ProfitAndLoss2.Context);
   const [selectedSource, setSelectedSource] = useState59(null);
+  const { renderInAppLink } = useInAppLinkContext();
+  const badgeOrInAppLink = useMemo52(() => {
+    var _a;
+    if (!selectedSource) return void 0;
+    const defaultBadge = /* @__PURE__ */ jsx237(Badge, { children: selectedSource.entityName });
+    if (!renderInAppLink) {
+      return defaultBadge;
+    }
+    const linkingMetadata = convertLedgerEntrySourceToLinkingMetadata(selectedSource);
+    return (_a = renderInAppLink(linkingMetadata)) != null ? _a : defaultBadge;
+  }, [renderInAppLink, selectedSource]);
   const dynamicBreadcrumbs = useMemo52(() => {
     return breadcrumbPath || [{ name: lineItemName, display_name: lineItemName }];
   }, [breadcrumbPath, lineItemName]);
@@ -29345,7 +29383,7 @@ var ProfitAndLossDetailReport = ({
       }
     }
   }), [stringOverrides, handleSourceClick]);
-  const Header6 = useCallback48(() => {
+  const Header5 = useCallback48(() => {
     return /* @__PURE__ */ jsx237(
       DetailReportBreadcrumb,
       {
@@ -29356,18 +29394,18 @@ var ProfitAndLossDetailReport = ({
     );
   }, [dynamicBreadcrumbs, dateRange, onBreadcrumbClick]);
   if (selectedSource) {
-    return /* @__PURE__ */ jsx237(BaseDetailView, { slots: { Header: Header6 }, name: "Profit And Loss Detail Report", onGoBack: handleBackToList, borderless: true, children: /* @__PURE__ */ jsx237(VStack, { pi: "md", children: /* @__PURE__ */ jsxs145(
+    return /* @__PURE__ */ jsx237(BaseDetailView, { slots: { Header: Header5 }, name: "Profit And Loss Detail Report", onGoBack: handleBackToList, borderless: true, children: /* @__PURE__ */ jsx237(VStack, { pi: "md", children: /* @__PURE__ */ jsxs145(
       DetailsList,
       {
         title: (stringOverrides == null ? void 0 : stringOverrides.sourceDetailsTitle) || "Transaction source",
         children: [
-          /* @__PURE__ */ jsx237(DetailsListItem, { label: "Source", children: /* @__PURE__ */ jsx237(Badge, { children: selectedSource.entityName }) }),
+          /* @__PURE__ */ jsx237(DetailsListItem, { label: "Source", children: badgeOrInAppLink }),
           /* @__PURE__ */ jsx237(SourceDetailView, { source: selectedSource })
         ]
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx237(BaseDetailView, { slots: { Header: Header6 }, name: "Profit And Loss Detail Report", onGoBack: onClose, borderless: true, children: /* @__PURE__ */ jsxs145(VStack, { className: "Layer__ProfitAndLossDetailReport", children: [
+  return /* @__PURE__ */ jsx237(BaseDetailView, { slots: { Header: Header5 }, name: "Profit And Loss Detail Report", onGoBack: onClose, borderless: true, children: /* @__PURE__ */ jsxs145(VStack, { className: "Layer__ProfitAndLossDetailReport", children: [
     /* @__PURE__ */ jsx237(
       VirtualizedDataTable,
       {
@@ -29392,7 +29430,7 @@ var ProfitAndLossDetailReport = ({
 };
 
 // src/components/ProfitAndLossReport/ProfitAndLossReport.tsx
-import { Fragment as Fragment26, jsx as jsx238, jsxs as jsxs146 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx238, jsxs as jsxs146 } from "react/jsx-runtime";
 var ProfitAndLossReport = ({
   stringOverrides,
   allowedDatePickerModes,
@@ -29400,10 +29438,11 @@ var ProfitAndLossReport = ({
   defaultDatePickerMode,
   customDateRanges,
   csvMoneyFormat,
-  view
+  view,
+  renderInAppLink
 }) => {
   var _a;
-  const { comparisonConfig } = useContext35(ProfitAndLoss2.ComparisonContext);
+  const { comparisonConfig } = useContext36(ProfitAndLoss2.ComparisonContext);
   const [selectedLineItem, setSelectedLineItem] = useState60(null);
   const breadcrumbIndexMap = useMemo53(() => {
     if (!selectedLineItem) return {};
@@ -29428,13 +29467,13 @@ var ProfitAndLossReport = ({
   const handleCloseDetailReport = useCallback49(() => {
     setSelectedLineItem(null);
   }, []);
-  return /* @__PURE__ */ jsx238(
+  return /* @__PURE__ */ jsx238(InAppLinkProvider, { renderInAppLink, children: /* @__PURE__ */ jsx238(
     View,
     {
       type: "panel",
-      header: /* @__PURE__ */ jsxs146(Header5, { children: [
+      header: /* @__PURE__ */ jsxs146(Header4, { children: [
         /* @__PURE__ */ jsxs146(HeaderRow, { children: [
-          /* @__PURE__ */ jsx238(HeaderCol, { children: /* @__PURE__ */ jsxs146(Fragment26, { children: [
+          /* @__PURE__ */ jsx238(HeaderCol, { children: /* @__PURE__ */ jsxs146(Fragment27, { children: [
             /* @__PURE__ */ jsx238(
               ProfitAndLoss2.DatePicker,
               {
@@ -29481,11 +29520,11 @@ var ProfitAndLossReport = ({
         }
       )
     }
-  );
+  ) });
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import { useContext as useContext37, useMemo as useMemo56 } from "react";
+import { useContext as useContext38, useMemo as useMemo56 } from "react";
 
 // src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesList.tsx
 import { useMemo as useMemo54 } from "react";
@@ -29632,7 +29671,7 @@ function ProfitAndLossSummariesSummary({
 }
 
 // src/views/AccountingOverview/internal/TransactionsToReview.tsx
-import { useContext as useContext36, useMemo as useMemo55 } from "react";
+import { useContext as useContext37, useMemo as useMemo55 } from "react";
 import { getMonth as getMonth2, getYear as getYear3, startOfMonth as startOfMonth9 } from "date-fns";
 import { jsx as jsx243, jsxs as jsxs148 } from "react/jsx-runtime";
 var CLASS_NAME13 = "Layer__TransactionsToReview";
@@ -29643,7 +29682,7 @@ function TransactionsToReview({
   variants
 }) {
   const { size = "sm" } = variants != null ? variants : {};
-  const { dateRange: contextDateRange } = useContext36(ProfitAndLoss2.Context);
+  const { dateRange: contextDateRange } = useContext37(ProfitAndLoss2.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
   const { data, isLoading, isError, refetch } = useProfitAndLossLTM({
     currentDate: dateRange ? dateRange.startDate : startOfMonth9(/* @__PURE__ */ new Date()),
@@ -29736,7 +29775,7 @@ function Internal_ProfitAndLossSummaries({
     isLoading,
     setSidebarScope,
     sidebarScope
-  } = useContext37(ProfitAndLoss2.Context);
+  } = useContext38(ProfitAndLoss2.Context);
   const { revenueChartData, expensesChartData } = useMemo56(
     () => ({
       revenueChartData: toMiniChartData({ scope: "revenue", data }),
@@ -29839,10 +29878,10 @@ function ProfitAndLossSummaries(_a) {
 }
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
-import { useContext as useContext41 } from "react";
+import { useContext as useContext42 } from "react";
 
 // src/contexts/TableContext/TableContext.tsx
-import { createContext as createContext20, useState as useState61 } from "react";
+import { createContext as createContext21, useState as useState61 } from "react";
 import { jsx as jsx245 } from "react/jsx-runtime";
 var defaultValue = {
   expandedRows: [],
@@ -29854,7 +29893,7 @@ var defaultValue = {
   setExpandedAllRows: () => {
   }
 };
-var TableContext = createContext20(defaultValue);
+var TableContext = createContext21(defaultValue);
 var TableProvider = ({ children }) => {
   const [expandedRows, setExpandedRowsState] = useState61([]);
   const [expandedAllRows, setExpandedAllRows] = useState61(false);
@@ -29883,10 +29922,10 @@ var TableProvider = ({ children }) => {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
-import { Fragment as Fragment27, useContext as useContext39, useEffect as useEffect28, useMemo as useMemo57 } from "react";
+import { Fragment as Fragment28, useContext as useContext40, useEffect as useEffect28, useMemo as useMemo57 } from "react";
 
 // src/hooks/useTableExpandRow/useTableExpandRow.tsx
-import { useContext as useContext38 } from "react";
+import { useContext as useContext39 } from "react";
 var useTableExpandRow = () => {
   const {
     expandedAllRows,
@@ -29894,7 +29933,7 @@ var useTableExpandRow = () => {
     expandAllRows,
     expandedRows,
     setExpandedRows
-  } = useContext38(TableContext);
+  } = useContext39(TableContext);
   const toggleAllRows = () => {
     if (expandedAllRows) {
       setIsOpen([]);
@@ -30000,7 +30039,7 @@ var mergeComparisonLineItemsAtDepth = (lineItems) => {
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
 import classNames78 from "classnames";
-import { Fragment as Fragment28, jsx as jsx246, jsxs as jsxs150 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx246, jsxs as jsxs150 } from "react/jsx-runtime";
 var ProfitAndLossCompareTable = ({
   stringOverrides
 }) => {
@@ -30009,7 +30048,7 @@ var ProfitAndLossCompareTable = ({
     isLoading,
     comparePeriods,
     selectedCompareOptions
-  } = useContext39(ProfitAndLoss2.ComparisonContext);
+  } = useContext40(ProfitAndLoss2.ComparisonContext);
   const { isOpen, setIsOpen } = useTableExpandRow();
   const { data: bookkeepingPeriods } = useBookkeepingPeriods();
   const rangeDisplayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
@@ -30050,7 +30089,7 @@ var ProfitAndLossCompareTable = ({
         }
       });
       if (rowData.length === 0) {
-        return /* @__PURE__ */ jsx246(Fragment28, {});
+        return /* @__PURE__ */ jsx246(Fragment29, {});
       }
       const mergedLineItems = mergeComparisonLineItemsAtDepth(
         rowData
@@ -30059,7 +30098,7 @@ var ProfitAndLossCompareTable = ({
     }
     const expandable = (lineItem == null ? void 0 : lineItem.lineItems) && lineItem.lineItems.length > 0 ? true : false;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ jsxs150(Fragment27, { children: [
+    return /* @__PURE__ */ jsxs150(Fragment28, { children: [
       /* @__PURE__ */ jsxs150(
         TableRow,
         {
@@ -30093,7 +30132,7 @@ var ProfitAndLossCompareTable = ({
   return /* @__PURE__ */ jsxs150(Table, { borderCollapse: "collapse", bottomSpacing: false, children: [
     /* @__PURE__ */ jsx246(TableHead, { children: selectedCompareOptions && selectedCompareOptions.length > 1 && /* @__PURE__ */ jsxs150(TableRow, { rowKey: "", children: [
       /* @__PURE__ */ jsx246(TableCell, { isHeaderCell: true }),
-      selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsxs150(Fragment27, { children: [
+      selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsxs150(Fragment28, { children: [
         /* @__PURE__ */ jsx246(TableCell, { primary: true, isHeaderCell: true, children: option.displayName }, option.displayName + "-" + i),
         comparePeriods && Array.from({ length: comparePeriods - 1 }, (_, index) => /* @__PURE__ */ jsx246(TableCell, { isHeaderCell: true }, option.displayName + "-" + index))
       ] }, option.displayName + "-" + i))
@@ -30101,7 +30140,7 @@ var ProfitAndLossCompareTable = ({
     /* @__PURE__ */ jsxs150(TableBody, { children: [
       comparePeriods && /* @__PURE__ */ jsxs150(TableRow, { rowKey: "", children: [
         /* @__PURE__ */ jsx246(TableCell, { isHeaderCell: true }),
-        selectedCompareOptions && selectedCompareOptions.length > 0 ? selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsx246(Fragment27, { children: generateComparisonPeriods(
+        selectedCompareOptions && selectedCompareOptions.length > 0 ? selectedCompareOptions.map((option, i) => /* @__PURE__ */ jsx246(Fragment28, { children: generateComparisonPeriods(
           dateRange.startDate,
           comparePeriods,
           rangeDisplayMode
@@ -30109,7 +30148,7 @@ var ProfitAndLossCompareTable = ({
           month.label,
           " ",
           getBookkeepingPeriodStatus(month.date)
-        ] }) }, option.displayName + "-" + index)) }, option.displayName + "-" + i)) : /* @__PURE__ */ jsx246(Fragment27, { children: generateComparisonPeriods(
+        ] }) }, option.displayName + "-" + index)) }, option.displayName + "-" + i)) : /* @__PURE__ */ jsx246(Fragment28, { children: generateComparisonPeriods(
           dateRange.startDate,
           comparePeriods,
           rangeDisplayMode
@@ -30141,7 +30180,7 @@ var ProfitAndLossCompareTable = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
-import { Fragment as Fragment29, useContext as useContext40, useEffect as useEffect29 } from "react";
+import { Fragment as Fragment30, useContext as useContext41, useEffect as useEffect29 } from "react";
 import classNames79 from "classnames";
 import { jsx as jsx247, jsxs as jsxs151 } from "react/jsx-runtime";
 var ProfitAndLossTableComponent = ({
@@ -30149,7 +30188,7 @@ var ProfitAndLossTableComponent = ({
   stringOverrides,
   onLineItemClick
 }) => {
-  const { data, isLoading } = useContext40(ProfitAndLoss2.Context);
+  const { data, isLoading } = useContext41(ProfitAndLoss2.Context);
   const { isOpen, setIsOpen } = useTableExpandRow();
   useEffect29(() => {
     setIsOpen(["income", "cost_of_goods_sold", "expenses", "other_activity"]);
@@ -30182,7 +30221,7 @@ var ProfitAndLossTableComponent = ({
       ...parentBreadcrumbs,
       { name: lineItem.name, display_name: lineItem.displayName }
     ];
-    return /* @__PURE__ */ jsxs151(Fragment29, { children: [
+    return /* @__PURE__ */ jsxs151(Fragment30, { children: [
       /* @__PURE__ */ jsxs151(
         TableRow,
         {
@@ -30318,14 +30357,14 @@ var ProfitAndLossTableComponent = ({
 // src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
 import { jsx as jsx248 } from "react/jsx-runtime";
 var ProfitAndLossTableWithProvider = (props) => {
-  const { compareModeActive } = useContext41(ProfitAndLoss2.ComparisonContext);
+  const { compareModeActive } = useContext42(ProfitAndLoss2.ComparisonContext);
   return /* @__PURE__ */ jsx248(TableProvider, { children: compareModeActive ? /* @__PURE__ */ jsx248("div", { className: "Layer__compare__table__wrapper", children: /* @__PURE__ */ jsx248(ProfitAndLossCompareTable, __spreadValues({}, props)) }) : /* @__PURE__ */ jsx248(ProfitAndLossTableComponent, __spreadValues({}, props)) });
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 import { endOfMonth as endOfMonth7, startOfMonth as startOfMonth10 } from "date-fns";
 import { jsx as jsx249 } from "react/jsx-runtime";
-var PNLContext = createContext21({
+var PNLContext = createContext22({
   data: void 0,
   filteredDataRevenue: [],
   filteredTotalRevenue: void 0,
@@ -30504,7 +30543,7 @@ var BalanceSheetExpandAllButton = ({
 };
 
 // src/components/BalanceSheetTable/BalanceSheetTable.tsx
-import { Fragment as Fragment30, useEffect as useEffect30 } from "react";
+import { Fragment as Fragment31, useEffect as useEffect30 } from "react";
 import { jsx as jsx252, jsxs as jsxs152 } from "react/jsx-runtime";
 var BalanceSheetTable = ({
   data,
@@ -30528,7 +30567,7 @@ var BalanceSheetTable = ({
     if (expandable) {
       allRowKeys.push(rowKey);
     }
-    return /* @__PURE__ */ jsxs152(Fragment30, { children: [
+    return /* @__PURE__ */ jsxs152(Fragment31, { children: [
       /* @__PURE__ */ jsxs152(
         TableRow,
         {
@@ -30579,7 +30618,7 @@ var BalanceSheetTable = ({
       /* @__PURE__ */ jsx252(TableCell, { isHeaderCell: true, children: (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type" }),
       /* @__PURE__ */ jsx252(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */, children: (stringOverrides == null ? void 0 : stringOverrides.totalColumnHeader) || "Total" })
     ] }) }),
-    /* @__PURE__ */ jsx252(TableBody, { children: config.map((row, idx) => /* @__PURE__ */ jsx252(Fragment30, { children: data[row.lineItem] && renderLineItem(
+    /* @__PURE__ */ jsx252(TableBody, { children: config.map((row, idx) => /* @__PURE__ */ jsx252(Fragment31, { children: data[row.lineItem] && renderLineItem(
       data[row.lineItem],
       0,
       row.lineItem,
@@ -30653,7 +30692,7 @@ function useBalanceSheetDownload({
 }
 
 // src/components/BalanceSheet/download/BalanceSheetDownloadButton.tsx
-import { Fragment as Fragment31, jsx as jsx253, jsxs as jsxs153 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx253, jsxs as jsxs153 } from "react/jsx-runtime";
 function BalanceSheetDownloadButton({
   effectiveDate,
   iconOnly
@@ -30663,7 +30702,7 @@ function BalanceSheetDownloadButton({
     effectiveDate,
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
-  return /* @__PURE__ */ jsxs153(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs153(Fragment32, { children: [
     /* @__PURE__ */ jsx253(
       DownloadButton,
       {
@@ -30710,7 +30749,7 @@ var BalanceSheetView = ({
       {
         type: "panel",
         ref: containerRef,
-        header: /* @__PURE__ */ jsx254(Header5, { children: /* @__PURE__ */ jsxs154(HeaderRow, { children: [
+        header: /* @__PURE__ */ jsx254(Header4, { children: /* @__PURE__ */ jsxs154(HeaderRow, { children: [
           /* @__PURE__ */ jsx254(HeaderCol, { children: /* @__PURE__ */ jsx254(BalanceSheetDatePicker, {}) }),
           withExpandAllButton && /* @__PURE__ */ jsx254(HeaderCol, { children: /* @__PURE__ */ jsx254(BalanceSheetExpandAllButton, { view }) })
         ] }) }),
@@ -30730,7 +30769,7 @@ var BalanceSheetView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsx254(Header5, { children: /* @__PURE__ */ jsxs154(HeaderRow, { children: [
+      header: /* @__PURE__ */ jsx254(Header4, { children: /* @__PURE__ */ jsxs154(HeaderRow, { children: [
         /* @__PURE__ */ jsx254(HeaderCol, { children: /* @__PURE__ */ jsx254(BalanceSheetDatePicker, {}) }),
         /* @__PURE__ */ jsxs154(HeaderCol, { children: [
           withExpandAllButton && /* @__PURE__ */ jsx254(BalanceSheetExpandAllButton, { view }),
@@ -30756,7 +30795,7 @@ var BalanceSheetView = ({
 };
 
 // src/components/StatementOfCashFlowTable/StatementOfCashFlowTable.tsx
-import { Fragment as Fragment32 } from "react";
+import { Fragment as Fragment33 } from "react";
 import { jsx as jsx255, jsxs as jsxs155 } from "react/jsx-runtime";
 var StatementOfCashFlowTable = ({
   data,
@@ -30767,7 +30806,7 @@ var StatementOfCashFlowTable = ({
   const renderLineItem = (lineItem, depth = 0, rowKey, rowIndex) => {
     const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ jsxs155(Fragment32, { children: [
+    return /* @__PURE__ */ jsxs155(Fragment33, { children: [
       /* @__PURE__ */ jsxs155(
         TableRow,
         {
@@ -30819,7 +30858,7 @@ var StatementOfCashFlowTable = ({
     ] }) }),
     /* @__PURE__ */ jsx255(TableBody, { children: config.map((row, idx) => {
       if (row.type === "line_item") {
-        return /* @__PURE__ */ jsx255(Fragment32, { children: data[row.lineItem] && renderLineItem(
+        return /* @__PURE__ */ jsx255(Fragment33, { children: data[row.lineItem] && renderLineItem(
           data[row.lineItem],
           0,
           row.lineItem ? row.lineItem : "",
@@ -30945,7 +30984,7 @@ function useCashflowStatementDownload({
 }
 
 // src/components/StatementOfCashFlow/download/CashflowStatementDownloadButton.tsx
-import { Fragment as Fragment33, jsx as jsx256, jsxs as jsxs156 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx256, jsxs as jsxs156 } from "react/jsx-runtime";
 function CashflowStatementDownloadButton({
   startDate,
   endDate,
@@ -30957,7 +30996,7 @@ function CashflowStatementDownloadButton({
     endDate,
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
-  return /* @__PURE__ */ jsxs156(Fragment33, { children: [
+  return /* @__PURE__ */ jsxs156(Fragment34, { children: [
     /* @__PURE__ */ jsx256(
       DownloadButton,
       {
@@ -31088,7 +31127,7 @@ var StatementOfCashFlowView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsx258(Header5, { children: /* @__PURE__ */ jsxs157(HeaderRow, { children: [
+      header: /* @__PURE__ */ jsx258(Header4, { children: /* @__PURE__ */ jsxs157(HeaderRow, { children: [
         /* @__PURE__ */ jsx258(HeaderCol, { children: /* @__PURE__ */ jsx258(
           StatementOfCashFlowDatePicker,
           {
@@ -31119,12 +31158,12 @@ var StatementOfCashFlowView = ({
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import { useContext as useContext48 } from "react";
+import { useContext as useContext49 } from "react";
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
-import { createContext as createContext22 } from "react";
+import { createContext as createContext23 } from "react";
 import { endOfMonth as endOfMonth9, startOfMonth as startOfMonth12 } from "date-fns";
-var ChartOfAccountsContext = createContext22(
+var ChartOfAccountsContext = createContext23(
   {
     data: void 0,
     isLoading: false,
@@ -32088,7 +32127,7 @@ var useLedgerAccounts = (showReversalEntries = false) => {
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTableWithPanel.tsx
-import { useContext as useContext45, useState as useState66 } from "react";
+import { useContext as useContext46, useState as useState66 } from "react";
 
 // src/icons/Plus.tsx
 import { jsx as jsx259, jsxs as jsxs158 } from "react/jsx-runtime";
@@ -32129,11 +32168,11 @@ var Plus = (_a) => {
 var Plus_default = Plus;
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
-import { useContext as useContext42 } from "react";
+import { useContext as useContext43 } from "react";
 import { endOfMonth as endOfMonth11, startOfMonth as startOfMonth14 } from "date-fns";
 import { jsx as jsx260 } from "react/jsx-runtime";
 var ChartOfAccountsDatePicker = () => {
-  const { changeDateRange, dateRange } = useContext42(ChartOfAccountsContext);
+  const { changeDateRange, dateRange } = useContext43(ChartOfAccountsContext);
   return /* @__PURE__ */ jsx260(
     DatePicker,
     {
@@ -32152,7 +32191,7 @@ var ChartOfAccountsDatePicker = () => {
 };
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import { useContext as useContext43, useMemo as useMemo61 } from "react";
+import { useContext as useContext44, useMemo as useMemo61 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
 import { useMemo as useMemo60 } from "react";
@@ -32183,7 +32222,7 @@ var ChartOfAccountsForm = ({
     submitForm,
     sendingForm,
     apiError
-  } = useContext43(ChartOfAccountsContext);
+  } = useContext44(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
   const entry = useMemo61(() => {
     if ((form == null ? void 0 : form.action) === "edit" && form.accountId) {
@@ -32205,7 +32244,7 @@ var ChartOfAccountsForm = ({
         submitForm();
       },
       children: [
-        /* @__PURE__ */ jsx261(Header5, { className: "Layer__chart-of-accounts__sidebar__header", children: /* @__PURE__ */ jsxs159(HeaderRow, { children: [
+        /* @__PURE__ */ jsx261(Header4, { className: "Layer__chart-of-accounts__sidebar__header", children: /* @__PURE__ */ jsxs159(HeaderRow, { children: [
           /* @__PURE__ */ jsx261(HeaderCol, { children: /* @__PURE__ */ jsx261(Heading, { size: "secondary" /* secondary */, className: "title", children: (form == null ? void 0 : form.action) === "edit" ? (stringOverrides == null ? void 0 : stringOverrides.editModeHeader) || "Edit Account" : (stringOverrides == null ? void 0 : stringOverrides.createModeHeader) || "Add New Account" }) }),
           /* @__PURE__ */ jsxs159(HeaderCol, { className: "actions", children: [
             /* @__PURE__ */ jsx261(
@@ -32398,7 +32437,7 @@ var ChartOfAccountsSidebar = ({
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import { Fragment as Fragment34, useContext as useContext44, useEffect as useEffect33, useMemo as useMemo62, useState as useState65 } from "react";
+import { Fragment as Fragment35, useContext as useContext45, useEffect as useEffect33, useMemo as useMemo62, useState as useState65 } from "react";
 
 // src/icons/Edit2.tsx
 import { jsx as jsx263 } from "react/jsx-runtime";
@@ -32577,7 +32616,7 @@ var getMatchedTextIndices = ({
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import { Fragment as Fragment35, jsx as jsx264, jsxs as jsxs160 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx264, jsxs as jsxs160 } from "react/jsx-runtime";
 var highlightMatch = ({ text, query, isMatching }) => {
   const matchedTextIndices = getMatchedTextIndices({ text, query, isMatching });
   if (matchedTextIndices === null) {
@@ -32618,8 +32657,8 @@ var ChartOfAccountsTableContent = ({
   expandAll,
   templateAccountsEditable
 }) => {
-  const { setSelectedAccount } = useContext44(LedgerAccountsContext);
-  const { editAccount, deleteAccount } = useContext44(ChartOfAccountsContext);
+  const { setSelectedAccount } = useContext45(LedgerAccountsContext);
+  const { editAccount, deleteAccount } = useContext45(ChartOfAccountsContext);
   const [toggledKeys, setToggledKeys] = useState65({});
   const [accountToDelete, setAccountToDelete] = useState65(null);
   const sortedAccounts = useMemo62(() => sortAccountsRecursive(data.accounts), [data.accounts]);
@@ -32703,7 +32742,7 @@ var ChartOfAccountsTableContent = ({
       e.stopPropagation();
       setAccountToDelete(account);
     };
-    return /* @__PURE__ */ jsxs160(Fragment34, { children: [
+    return /* @__PURE__ */ jsxs160(Fragment35, { children: [
       /* @__PURE__ */ jsxs160(
         TableRow,
         {
@@ -32799,7 +32838,7 @@ var ChartOfAccountsTableContent = ({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs160(Fragment35, { children: [
+  return /* @__PURE__ */ jsxs160(Fragment36, { children: [
     /* @__PURE__ */ jsxs160(Table, { componentName: "chart-of-accounts", children: [
       /* @__PURE__ */ jsxs160("colgroup", { children: [
         /* @__PURE__ */ jsx264("col", { className: "Layer__chart-of-accounts--name" }),
@@ -32899,7 +32938,7 @@ function useAccountBalancesDownload({
 }
 
 // src/components/ChartOfAccounts/download/AccountBalancesDownloadButton.tsx
-import { Fragment as Fragment36, jsx as jsx265, jsxs as jsxs161 } from "react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx265, jsxs as jsxs161 } from "react/jsx-runtime";
 function AccountBalancesDownloadButton({
   startCutoff,
   endCutoff,
@@ -32911,7 +32950,7 @@ function AccountBalancesDownloadButton({
     endCutoff,
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
-  return /* @__PURE__ */ jsxs161(Fragment36, { children: [
+  return /* @__PURE__ */ jsxs161(Fragment37, { children: [
     /* @__PURE__ */ jsx265(
       DownloadButton,
       {
@@ -32942,7 +32981,7 @@ var ChartOfAccountsTableWithPanel = ({
   stringOverrides,
   templateAccountsEditable
 }) => {
-  const { data, isLoading, addAccount, error, isValidating, refetch, form } = useContext45(ChartOfAccountsContext);
+  const { data, isLoading, addAccount, error, isValidating, refetch, form } = useContext46(ChartOfAccountsContext);
   const [expandAll, setExpandAll] = useState66();
   const { inputValue, searchQuery, handleInputChange } = useDebouncedSearchInput({ initialInputState: "" });
   return /* @__PURE__ */ jsxs162(
@@ -32958,7 +32997,7 @@ var ChartOfAccountsTableWithPanel = ({
       sidebarIsOpen: Boolean(form),
       parentRef: containerRef,
       children: [
-        /* @__PURE__ */ jsx266(Header5, { className: `Layer__${COMPONENT_NAME7}__header`, asHeader: true, rounded: true, children: /* @__PURE__ */ jsx266(HeaderRow, { children: /* @__PURE__ */ jsx266(HeaderCol, { children: /* @__PURE__ */ jsx266(
+        /* @__PURE__ */ jsx266(Header4, { className: `Layer__${COMPONENT_NAME7}__header`, asHeader: true, rounded: true, children: /* @__PURE__ */ jsx266(HeaderRow, { children: /* @__PURE__ */ jsx266(HeaderCol, { children: /* @__PURE__ */ jsx266(
           Heading,
           {
             className: `Layer__${COMPONENT_NAME7}__title`,
@@ -32966,7 +33005,7 @@ var ChartOfAccountsTableWithPanel = ({
             children: (stringOverrides == null ? void 0 : stringOverrides.headerText) || "Chart of Accounts"
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx266(Header5, { className: `Layer__${COMPONENT_NAME7}__header`, sticky: true, children: /* @__PURE__ */ jsxs162(HeaderRow, { children: [
+        /* @__PURE__ */ jsx266(Header4, { className: `Layer__${COMPONENT_NAME7}__header`, sticky: true, children: /* @__PURE__ */ jsxs162(HeaderRow, { children: [
           /* @__PURE__ */ jsx266(HeaderCol, { children: /* @__PURE__ */ jsx266(
             Heading,
             {
@@ -33037,13 +33076,13 @@ var ChartOfAccountsTableWithPanel = ({
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
 import {
-  useContext as useContext47,
+  useContext as useContext48,
   useMemo as useMemo64,
   useState as useState67
 } from "react";
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import { useContext as useContext46, useMemo as useMemo63 } from "react";
+import { useContext as useContext47, useMemo as useMemo63 } from "react";
 import classNames80 from "classnames";
 import { parseISO as parseISO14, format as formatTime11 } from "date-fns";
 import { jsx as jsx267, jsxs as jsxs163 } from "react/jsx-runtime";
@@ -33054,7 +33093,7 @@ var LedgerAccountRow = ({
   nodeType
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext46(LedgerAccountsContext);
+  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext47(LedgerAccountsContext);
   const ledgerEntrySource = useMemo63(() => {
     return row.source ? decodeLedgerEntrySource(row.source) : void 0;
   }, [row.source]);
@@ -33178,7 +33217,7 @@ var LedgerAccountRow = ({
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
 import classNames81 from "classnames";
-import { Fragment as Fragment37, jsx as jsx268, jsxs as jsxs164 } from "react/jsx-runtime";
+import { Fragment as Fragment38, jsx as jsx268, jsxs as jsxs164 } from "react/jsx-runtime";
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
@@ -33199,7 +33238,7 @@ var LedgerAccount = ({
     refetch,
     hasMore,
     fetchMore
-  } = useContext47(LedgerAccountsContext);
+  } = useContext48(LedgerAccountsContext);
   const baseClassName = classNames81(
     "Layer__ledger-account__index",
     selectedAccount && "open"
@@ -33239,7 +33278,7 @@ var LedgerAccount = ({
       parentRef: containerRef,
       className: "Layer__ledger-account__panel",
       children: /* @__PURE__ */ jsxs164("div", { className: baseClassName, children: [
-        /* @__PURE__ */ jsx268(Header5, { className: "Layer__ledger-account__header", children: /* @__PURE__ */ jsx268(HeaderRow, { children: /* @__PURE__ */ jsxs164(HeaderCol, { children: [
+        /* @__PURE__ */ jsx268(Header4, { className: "Layer__ledger-account__header", children: /* @__PURE__ */ jsx268(HeaderRow, { children: /* @__PURE__ */ jsxs164(HeaderCol, { children: [
           /* @__PURE__ */ jsx268(BackButton, { onClick: close2 }),
           /* @__PURE__ */ jsxs164("div", { className: "Layer__ledger-account__title-container", children: [
             /* @__PURE__ */ jsx268(
@@ -33276,13 +33315,13 @@ var LedgerAccount = ({
         /* @__PURE__ */ jsxs164("table", { className: "Layer__table Layer__table--hover-effect Layer__ledger-account-table", children: [
           /* @__PURE__ */ jsx268("thead", { children: /* @__PURE__ */ jsxs164("tr", { children: [
             view !== "desktop" && /* @__PURE__ */ jsx268("th", {}),
-            view === "desktop" && /* @__PURE__ */ jsxs164(Fragment37, { children: [
+            view === "desktop" && /* @__PURE__ */ jsxs164(Fragment38, { children: [
               /* @__PURE__ */ jsx268("th", { className: "Layer__table-header", children: ((_b = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _b.dateColumnHeader) || "Date" }),
               /* @__PURE__ */ jsx268("th", { className: "Layer__table-header", children: ((_c = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _c.journalIdColumnHeader) || "Journal ID #" }),
               /* @__PURE__ */ jsx268("th", { className: "Layer__table-header", children: ((_d = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _d.sourceColumnHeader) || "Source" }),
               nodeType !== "Leaf" /* Leaf */ && /* @__PURE__ */ jsx268("th", { className: "Layer__table-header", children: ((_e = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _e.accountColumnHeader) || "Account" })
             ] }),
-            view !== "mobile" && /* @__PURE__ */ jsxs164(Fragment37, { children: [
+            view !== "mobile" && /* @__PURE__ */ jsxs164(Fragment38, { children: [
               /* @__PURE__ */ jsx268("th", { className: "Layer__table-header Layer__table-cell--amount", children: ((_f = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _f.debitColumnHeader) || "Debit" }),
               /* @__PURE__ */ jsx268("th", { className: "Layer__table-header Layer__table-cell--amount", children: ((_g = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _g.creditColumnHeader) || "Credit" }),
               /* @__PURE__ */ jsx268("th", { className: "Layer__table-header Layer__table-cell--amount", children: ((_h = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _h.runningBalanceColumnHeader) || "Running balance" })
@@ -33344,7 +33383,7 @@ var ChartOfAccounts2 = (props) => {
   const ledgerAccountsContextData = useLedgerAccounts(
     (_a = props.showReversalEntries) != null ? _a : false
   );
-  return /* @__PURE__ */ jsx269(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData, children: /* @__PURE__ */ jsx269(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData, children: /* @__PURE__ */ jsx269(InAppLinkProvider, { convertToInAppLink: props.getInAppLink, children: /* @__PURE__ */ jsx269(ChartOfAccountsContent, __spreadValues({}, props)) }) }) });
+  return /* @__PURE__ */ jsx269(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData, children: /* @__PURE__ */ jsx269(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData, children: /* @__PURE__ */ jsx269(InAppLinkProvider, { renderInAppLink: props.renderInAppLink, children: /* @__PURE__ */ jsx269(ChartOfAccountsContent, __spreadValues({}, props)) }) }) });
 };
 var ChartOfAccountsContent = ({
   asWidget,
@@ -33354,7 +33393,7 @@ var ChartOfAccountsContent = ({
   templateAccountsEditable,
   showAddAccountButton
 }) => {
-  const { selectedAccount } = useContext48(LedgerAccountsContext);
+  const { selectedAccount } = useContext49(LedgerAccountsContext);
   const { view, containerRef } = useElementViewSize();
   return /* @__PURE__ */ jsx269(Container, { name: "chart-of-accounts", ref: containerRef, asWidget, children: selectedAccount ? /* @__PURE__ */ jsx269(
     LedgerAccount,
@@ -33379,8 +33418,8 @@ var ChartOfAccountsContent = ({
 };
 
 // src/contexts/JournalContext/JournalContext.tsx
-import { createContext as createContext23 } from "react";
-var JournalContext = createContext23({
+import { createContext as createContext24 } from "react";
+var JournalContext = createContext24({
   refetch: () => {
   },
   setSelectedEntryId: () => {
@@ -33791,13 +33830,13 @@ var useJournal = () => {
 };
 
 // src/components/JournalTable/JournalTableWithPanel.tsx
-import { useContext as useContext54, useMemo as useMemo69, useState as useState70 } from "react";
+import { useContext as useContext55, useMemo as useMemo69, useState as useState70 } from "react";
 
 // src/components/JournalSidebar/JournalSidebar.tsx
-import { useContext as useContext52 } from "react";
+import { useContext as useContext53 } from "react";
 
 // src/components/JournalEntryDetails/JournalEntryDetails.tsx
-import { useContext as useContext49, useMemo as useMemo67, useState as useState69 } from "react";
+import { useContext as useContext50, useMemo as useMemo67, useState as useState69 } from "react";
 import { jsx as jsx270, jsxs as jsxs165 } from "react/jsx-runtime";
 var JournalEntryDetails = () => {
   var _a, _b;
@@ -33809,8 +33848,8 @@ var JournalEntryDetails = () => {
     selectedEntryId,
     reverseEntry,
     refetch
-  } = useContext49(JournalContext);
-  const { convertToInAppLink } = useInAppLinkContext();
+  } = useContext50(JournalContext);
+  const { renderInAppLink } = useInAppLinkContext();
   const [reverseEntryProcessing, setReverseEntryProcessing] = useState69(false);
   const [reverseEntryError, setReverseEntryError] = useState69();
   const entry = useMemo67(() => {
@@ -33826,12 +33865,12 @@ var JournalEntryDetails = () => {
     var _a2, _b2;
     const badgeContent = (_a2 = ledgerEntrySource == null ? void 0 : ledgerEntrySource.entityName) != null ? _a2 : entry == null ? void 0 : entry.entry_type;
     const defaultBadge = /* @__PURE__ */ jsx270(Badge, { children: badgeContent });
-    if (!convertToInAppLink || !ledgerEntrySource) {
+    if (!renderInAppLink || !ledgerEntrySource) {
       return defaultBadge;
     }
     const linkingMetadata = convertLedgerEntrySourceToLinkingMetadata(ledgerEntrySource);
-    return (_b2 = convertToInAppLink(linkingMetadata)) != null ? _b2 : defaultBadge;
-  }, [convertToInAppLink, entry == null ? void 0 : entry.entry_type, ledgerEntrySource]);
+    return (_b2 = renderInAppLink(linkingMetadata)) != null ? _b2 : defaultBadge;
+  }, [renderInAppLink, entry == null ? void 0 : entry.entry_type, ledgerEntrySource]);
   const sortedLineItems = useMemo67(
     () => {
       var _a2;
@@ -33857,7 +33896,7 @@ var JournalEntryDetails = () => {
     }
   });
   return /* @__PURE__ */ jsxs165("div", { className: "Layer__journal__entry-details", children: [
-    /* @__PURE__ */ jsx270(Header5, { className: "Layer__journal__entry-details__mobile-header", children: /* @__PURE__ */ jsxs165(HeaderRow, { children: [
+    /* @__PURE__ */ jsx270(Header4, { className: "Layer__journal__entry-details__mobile-header", children: /* @__PURE__ */ jsxs165(HeaderRow, { children: [
       /* @__PURE__ */ jsxs165(HeaderCol, { className: "Layer__hidden-lg Layer__hidden-xl", children: [
         /* @__PURE__ */ jsx270(BackButton, { onClick: closeSelectedEntry }),
         /* @__PURE__ */ jsx270(Heading, { size: "secondary" /* secondary */, children: "Transaction details" })
@@ -34013,11 +34052,11 @@ var JournalEntryDetails = () => {
 };
 
 // src/components/JournalForm/JournalForm.tsx
-import { useContext as useContext51 } from "react";
+import { useContext as useContext52 } from "react";
 
 // src/components/JournalForm/JournalFormEntryLines.tsx
-import { useContext as useContext50, useMemo as useMemo68 } from "react";
-import { Fragment as Fragment38, jsx as jsx271, jsxs as jsxs166 } from "react/jsx-runtime";
+import { useContext as useContext51, useMemo as useMemo68 } from "react";
+import { Fragment as Fragment39, jsx as jsx271, jsxs as jsxs166 } from "react/jsx-runtime";
 function recursiveFlattenCategories(accounts) {
   const flattenedResult = accounts.flatMap((a) => {
     var _a;
@@ -34037,7 +34076,7 @@ var JournalFormEntryLines = ({
   config
 }) => {
   const { data: categories } = useCategories({ mode: "ALL" });
-  const { form } = useContext50(JournalContext);
+  const { form } = useContext51(JournalContext);
   const { flattenedCategories, parentOptions } = useMemo68(() => {
     const flattenedCategories2 = recursiveFlattenCategories(categories != null ? categories : []);
     const parentOptions2 = [...flattenedCategories2].sort((a, b) => a.display_name.localeCompare(b.display_name)).map((account) => {
@@ -34119,7 +34158,7 @@ var JournalFormEntryLines = ({
       ]
     );
   };
-  return /* @__PURE__ */ jsx271(Fragment38, { children: ["DEBIT", "CREDIT"].map((direction, idx) => {
+  return /* @__PURE__ */ jsx271(Fragment39, { children: ["DEBIT", "CREDIT"].map((direction, idx) => {
     return /* @__PURE__ */ jsxs166(
       "div",
       {
@@ -34250,7 +34289,7 @@ var JournalForm = ({
     changeFormData,
     addEntryLine,
     removeEntryLine
-  } = useContext51(JournalContext);
+  } = useContext52(JournalContext);
   return /* @__PURE__ */ jsxs167(
     "form",
     {
@@ -34260,7 +34299,7 @@ var JournalForm = ({
         submitForm();
       },
       children: [
-        /* @__PURE__ */ jsx272(Header5, { className: "Layer__journal__sidebar__header", children: /* @__PURE__ */ jsxs167(HeaderRow, { children: [
+        /* @__PURE__ */ jsx272(Header4, { className: "Layer__journal__sidebar__header", children: /* @__PURE__ */ jsxs167(HeaderRow, { children: [
           /* @__PURE__ */ jsx272(HeaderCol, { children: /* @__PURE__ */ jsx272(Heading, { size: "secondary" /* secondary */, className: "title", children: (_a = stringOverrides == null ? void 0 : stringOverrides.header) != null ? _a : "Add New Entry" }) }),
           /* @__PURE__ */ jsxs167(HeaderCol, { className: "actions", children: [
             /* @__PURE__ */ jsx272(
@@ -34398,7 +34437,7 @@ var JournalSidebar = ({
   config,
   stringOverrides
 }) => {
-  const { selectedEntryId } = useContext52(JournalContext);
+  const { selectedEntryId } = useContext53(JournalContext);
   if (selectedEntryId !== "new") {
     return /* @__PURE__ */ jsx273(JournalEntryDetails, {});
   }
@@ -34406,7 +34445,7 @@ var JournalSidebar = ({
 };
 
 // src/components/JournalTable/JournalTable.tsx
-import { Fragment as Fragment39, useContext as useContext53, useLayoutEffect as useLayoutEffect4 } from "react";
+import { Fragment as Fragment40, useContext as useContext54, useLayoutEffect as useLayoutEffect4 } from "react";
 import { parseISO as parseISO15, format as formatTime12 } from "date-fns";
 import { jsx as jsx274, jsxs as jsxs168 } from "react/jsx-runtime";
 var accountName = (row) => {
@@ -34434,7 +34473,7 @@ var JournalTableContent = ({
   data,
   stringOverrides
 }) => {
-  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext53(JournalContext);
+  const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext54(JournalContext);
   const { isOpen, setIsOpen } = useTableExpandRow();
   useLayoutEffect4(() => {
     if (data.length > 0) {
@@ -34444,7 +34483,7 @@ var JournalTableContent = ({
   const renderJournalRow = (row, index, rowKey, depth) => {
     const expandable = !!row.line_items && row.line_items.length > 0;
     const expanded = !expandable || isOpen(rowKey);
-    return /* @__PURE__ */ jsxs168(Fragment39, { children: [
+    return /* @__PURE__ */ jsxs168(Fragment40, { children: [
       /* @__PURE__ */ jsxs168(
         TableRow,
         {
@@ -34580,7 +34619,7 @@ function useJournalEntriesDownload({
 }
 
 // src/components/Journal/download/JournalEntriesDownloadButton.tsx
-import { Fragment as Fragment40, jsx as jsx275, jsxs as jsxs169 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx275, jsxs as jsxs169 } from "react/jsx-runtime";
 function JournalEntriesDownloadButton({
   startCutoff,
   endCutoff,
@@ -34592,7 +34631,7 @@ function JournalEntriesDownloadButton({
     endCutoff,
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
-  return /* @__PURE__ */ jsxs169(Fragment40, { children: [
+  return /* @__PURE__ */ jsxs169(Fragment41, { children: [
     /* @__PURE__ */ jsx275(
       DownloadButton,
       {
@@ -34631,7 +34670,7 @@ var JournalTableWithPanel = ({
     addEntry,
     hasMore,
     fetchMore
-  } = useContext54(JournalContext);
+  } = useContext55(JournalContext);
   const data = useMemo69(
     () => {
       if (!rawData) return void 0;
@@ -34660,7 +34699,7 @@ var JournalTableWithPanel = ({
       parentRef: containerRef,
       children: [
         /* @__PURE__ */ jsx276(
-          Header5,
+          Header4,
           {
             className: `Layer__${COMPONENT_NAME8}__header`,
             asHeader: true,
@@ -34676,7 +34715,7 @@ var JournalTableWithPanel = ({
             ) }) })
           }
         ),
-        /* @__PURE__ */ jsx276(Header5, { children: /* @__PURE__ */ jsxs170(HeaderRow, { children: [
+        /* @__PURE__ */ jsx276(Header4, { children: /* @__PURE__ */ jsxs170(HeaderRow, { children: [
           /* @__PURE__ */ jsx276(HeaderCol, { children: /* @__PURE__ */ jsx276(
             Heading,
             {
@@ -34750,7 +34789,7 @@ var JOURNAL_CONFIG = {
 var Journal = (props) => {
   const JournalContextData = useJournal();
   const AccountsContextData = useChartOfAccounts();
-  return /* @__PURE__ */ jsx277(ChartOfAccountsContext.Provider, { value: AccountsContextData, children: /* @__PURE__ */ jsx277(JournalContext.Provider, { value: JournalContextData, children: /* @__PURE__ */ jsx277(InAppLinkProvider, { convertToInAppLink: props.convertToInAppLink, children: /* @__PURE__ */ jsx277(JournalContent, __spreadValues({}, props)) }) }) });
+  return /* @__PURE__ */ jsx277(ChartOfAccountsContext.Provider, { value: AccountsContextData, children: /* @__PURE__ */ jsx277(JournalContext.Provider, { value: JournalContextData, children: /* @__PURE__ */ jsx277(InAppLinkProvider, { renderInAppLink: props.renderInAppLink, children: /* @__PURE__ */ jsx277(JournalContent, __spreadValues({}, props)) }) }) });
 };
 var JournalContent = ({
   asWidget,
@@ -35159,7 +35198,7 @@ function useUpdateTaskUploadDescription() {
 }
 
 // src/components/Tasks/TasksListItem.tsx
-import { Fragment as Fragment41, jsx as jsx281, jsxs as jsxs172 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx281, jsxs as jsxs172 } from "react/jsx-runtime";
 var TasksListItem = ({
   task,
   defaultOpen
@@ -35215,7 +35254,7 @@ var TasksListItem = ({
             }
           );
         } else {
-          return /* @__PURE__ */ jsxs172(Fragment41, { children: [
+          return /* @__PURE__ */ jsxs172(Fragment42, { children: [
             /* @__PURE__ */ jsx281(
               Button,
               {
@@ -35440,7 +35479,7 @@ function usePaginatedList(list, pageSize) {
 }
 
 // src/components/Tasks/TasksList.tsx
-import { Fragment as Fragment42, jsx as jsx284, jsxs as jsxs175 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx284, jsxs as jsxs175 } from "react/jsx-runtime";
 var TasksEmptyState = () => /* @__PURE__ */ jsxs175("div", { className: "Layer__tasks-empty-state", children: [
   /* @__PURE__ */ jsx284("div", { className: "Layer__tasks-icon", children: /* @__PURE__ */ jsx284(SmileIcon_default, {}) }),
   /* @__PURE__ */ jsxs175(Text, { size: "sm" /* sm */, children: [
@@ -35480,7 +35519,7 @@ function TasksList({ pageSize = 8, mobile }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx284("div", { className: "Layer__tasks-list", children: sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ jsxs175(Fragment42, { children: [
+  return /* @__PURE__ */ jsx284("div", { className: "Layer__tasks-list", children: sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ jsxs175(Fragment43, { children: [
     pageItems.map((task, index) => /* @__PURE__ */ jsx284(
       TasksListItem,
       {
@@ -35517,7 +35556,7 @@ var BookkeepingStatusDescription = ({ monthNumber, status, incompleteTasksCount
 };
 
 // src/components/Tasks/TasksPending.tsx
-import { Fragment as Fragment43, jsx as jsx286, jsxs as jsxs176 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx286, jsxs as jsxs176 } from "react/jsx-runtime";
 var TasksPending = () => {
   var _a, _b, _c, _d;
   const { date } = useGlobalDate();
@@ -35579,7 +35618,7 @@ var TasksPending = () => {
         ) })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx286("div", { className: "Layer__tasks-pending-main", children: activePeriod && /* @__PURE__ */ jsxs176(Fragment43, { children: [
+    /* @__PURE__ */ jsx286("div", { className: "Layer__tasks-pending-main", children: activePeriod && /* @__PURE__ */ jsxs176(Fragment44, { children: [
       /* @__PURE__ */ jsx286(BookkeepingStatus2, { status: activePeriod.status, monthNumber: activePeriod.month }),
       /* @__PURE__ */ jsx286(
         BookkeepingStatusDescription,
@@ -36139,7 +36178,7 @@ function TasksEmptyContainer({ children }) {
 }
 
 // src/components/Tasks/Tasks.tsx
-import { Fragment as Fragment44, jsx as jsx296, jsxs as jsxs183 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx296, jsxs as jsxs183 } from "react/jsx-runtime";
 function Tasks({
   mobile = false,
   tasksHeader,
@@ -36172,7 +36211,7 @@ function Tasks({
               /* @__PURE__ */ jsx296(Heading2, { size: "xs", level: 4, children: "Not Enrolled in Bookkeeping" }),
               /* @__PURE__ */ jsx296(P, { children: "If you believe this is an error, please contact support." })
             ] }) }),
-            children: () => /* @__PURE__ */ jsxs183(Fragment44, { children: [
+            children: () => /* @__PURE__ */ jsxs183(Fragment45, { children: [
               /* @__PURE__ */ jsx296(TasksYearsTabs, {}),
               /* @__PURE__ */ jsx296(TasksMonthSelector, {}),
               /* @__PURE__ */ jsx296(TasksPending, {}),
@@ -36186,10 +36225,10 @@ function Tasks({
 }
 
 // src/components/PlatformOnboarding/LinkAccounts.tsx
-import { useContext as useContext57 } from "react";
+import { useContext as useContext58 } from "react";
 
 // src/components/PlatformOnboarding/Steps/LinkAccountsConfirmationStep.tsx
-import { useContext as useContext55 } from "react";
+import { useContext as useContext56 } from "react";
 import { useForm as useForm3 } from "@tanstack/react-form";
 
 // src/components/PlatformOnboarding/Container/LinkAccountsListContainer.tsx
@@ -36225,7 +36264,7 @@ function LinkAccountsConfirmationStep() {
     data: linkedAccounts,
     loadingStatus: linkedAccountsLoadingStatus,
     refetchAccounts
-  } = useContext55(LinkedAccountsContext);
+  } = useContext56(LinkedAccountsContext);
   const effectiveLinkedAccounts = linkedAccounts ? getAccountsNeedingConfirmation(linkedAccounts) : [];
   const { trigger } = useConfirmAndExcludeMultiple({ onSuccess: refetchAccounts });
   const { previous, next } = useWizard();
@@ -36298,9 +36337,9 @@ function LinkAccountsConfirmationStep() {
 }
 
 // src/components/PlatformOnboarding/Steps/LinkAccountsLinkStep.tsx
-import { useContext as useContext56 } from "react";
+import { useContext as useContext57 } from "react";
 import pluralize5 from "pluralize";
-import { Fragment as Fragment45, jsx as jsx299, jsxs as jsxs185 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx299, jsxs as jsxs185 } from "react/jsx-runtime";
 function LinkAccountsLinkStep() {
   const {
     data,
@@ -36308,10 +36347,10 @@ function LinkAccountsLinkStep() {
     error,
     refetchAccounts,
     addConnection
-  } = useContext56(LinkedAccountsContext);
+  } = useContext57(LinkedAccountsContext);
   const { next } = useWizard();
   const effectiveAccounts = data != null ? data : [];
-  return /* @__PURE__ */ jsxs185(Fragment45, { children: [
+  return /* @__PURE__ */ jsxs185(Fragment46, { children: [
     /* @__PURE__ */ jsx299(
       ConditionalList,
       {
@@ -36371,7 +36410,7 @@ function LinkAccountsLinkStep() {
         children: ({ item: account }) => /* @__PURE__ */ jsx299(BasicLinkedAccountContainer, { isSelected: true, children: /* @__PURE__ */ jsx299(BasicLinkedAccountContent, { account }) }, account.id)
       }
     ),
-    effectiveAccounts.length > 0 ? /* @__PURE__ */ jsxs185(Fragment45, { children: [
+    effectiveAccounts.length > 0 ? /* @__PURE__ */ jsxs185(Fragment46, { children: [
       /* @__PURE__ */ jsx299(Separator, { mbs: "lg", mbe: "lg" }),
       /* @__PURE__ */ jsx299(HStack, { justify: "start", gap: "sm", children: /* @__PURE__ */ jsx299(Button, { onClick: () => {
         void next();
@@ -36388,7 +36427,7 @@ function LinkAccounts(props) {
 function LinkAccountsContent({
   onComplete
 }) {
-  const { data: linkedAccounts, loadingStatus } = useContext57(LinkedAccountsContext);
+  const { data: linkedAccounts, loadingStatus } = useContext58(LinkedAccountsContext);
   const linkedAccountsNeedingConfirmation = linkedAccounts ? getAccountsNeedingConfirmation(linkedAccounts) : [];
   const hideConfirmationStep = loadingStatus === "complete" && linkedAccountsNeedingConfirmation.length === 0;
   return /* @__PURE__ */ jsx300("section", { className: "Layer__link-accounts Layer__component", children: /* @__PURE__ */ jsxs186(
@@ -36595,7 +36634,7 @@ var TrendingUp = (_a) => {
 var TrendingUp_default = TrendingUp;
 
 // src/components/PlatformOnboarding/Steps/WelcomeStep.tsx
-import { Fragment as Fragment46, jsx as jsx304, jsxs as jsxs190 } from "react/jsx-runtime";
+import { Fragment as Fragment47, jsx as jsx304, jsxs as jsxs190 } from "react/jsx-runtime";
 var defaultTitle = "Welcome";
 var defaultDescription = "Welcome to the platform onboarding process";
 var WelcomeStep = ({ onNext, title = defaultTitle, description, stepsEnabled }) => {
@@ -36616,7 +36655,7 @@ var WelcomeStep = ({ onNext, title = defaultTitle, description, stepsEnabled })
     }
     return defaultDescription;
   };
-  return /* @__PURE__ */ jsxs190(Fragment46, { children: [
+  return /* @__PURE__ */ jsxs190(Fragment47, { children: [
     /* @__PURE__ */ jsxs190("div", { className: "Layer__platform-onboarding__welcome", children: [
       /* @__PURE__ */ jsx304(Heading, { className: "Layer__platform-onboarding__heading", align: "left", children: title }),
       /* @__PURE__ */ jsx304(Text, { status: "disabled", children: buildDescription() })
@@ -36693,12 +36732,12 @@ var WelcomeStepFooter = () => {
 };
 
 // src/components/PlatformOnboarding/Steps/SummaryStep.tsx
-import { Fragment as Fragment47, jsx as jsx305, jsxs as jsxs191 } from "react/jsx-runtime";
+import { Fragment as Fragment48, jsx as jsx305, jsxs as jsxs191 } from "react/jsx-runtime";
 var defaultTitle2 = "You\u2019re all set!";
 var defaultDescription2 = "We\u2019re syncing your accounts. This process may take a while to complete.";
 var defaultNextBtnText = "Go to dashboard";
 var SummaryStep = ({ onNext, title = defaultTitle2, description = defaultDescription2, nextBtnText = defaultNextBtnText }) => {
-  return /* @__PURE__ */ jsxs191(Fragment47, { children: [
+  return /* @__PURE__ */ jsxs191(Fragment48, { children: [
     /* @__PURE__ */ jsxs191("div", { className: "Layer__platform-onboarding__summary", children: [
       /* @__PURE__ */ jsx305(Heading, { className: "Layer__platform-onboarding__heading", align: "left", children: title }),
       /* @__PURE__ */ jsx305(Text, { status: "disabled", children: description })
@@ -37213,7 +37252,7 @@ var PhoneInput = (_a) => {
 
 // src/components/BusinessForm/BusinessForm.tsx
 import { isPossiblePhoneNumber } from "libphonenumber-js";
-import { Fragment as Fragment48, jsx as jsx310, jsxs as jsxs193 } from "react/jsx-runtime";
+import { Fragment as Fragment49, jsx as jsx310, jsxs as jsxs193 } from "react/jsx-runtime";
 var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
   var _a;
   const { form, submitError, isFormValid } = useBusinessForm({ onSuccess });
@@ -37237,7 +37276,7 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
                 validators: {
                   onSubmit: ({ value }) => notEmpty(value) ? void 0 : "Full name is required"
                 },
-                children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "full_name", label: "Full name", children: /* @__PURE__ */ jsx310(
+                children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "full_name", label: "Full name", children: /* @__PURE__ */ jsx310(
                   Input,
                   {
                     name: "full_name",
@@ -37250,7 +37289,7 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
                 ) }) })
               }
             ),
-            /* @__PURE__ */ jsx310(form.Field, { name: "preferred_name", children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "preferred_name", label: "Preferred name", children: /* @__PURE__ */ jsx310(
+            /* @__PURE__ */ jsx310(form.Field, { name: "preferred_name", children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "preferred_name", label: "Preferred name", children: /* @__PURE__ */ jsx310(
               Input,
               {
                 name: "preferred_name",
@@ -37267,7 +37306,7 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
               validators: {
                 onSubmit: ({ value }) => validateEmailFormat(value, true) ? void 0 : "Email is invalid"
               },
-              children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(
+              children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(
                 InputGroup,
                 {
                   name: "email",
@@ -37294,7 +37333,7 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
               validators: {
                 onSubmit: ({ value }) => isPossiblePhoneNumber(value != null ? value : "", "US") ? void 0 : "Phone number is invalid"
               },
-              children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(
+              children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(
                 InputGroup,
                 {
                   name: "phone_number",
@@ -37321,7 +37360,7 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
               validators: {
                 onBlur: ({ value }) => notEmpty(value) ? void 0 : "Company name is required"
               },
-              children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "legal_name", label: "Company", children: /* @__PURE__ */ jsx310(
+              children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "legal_name", label: "Company", children: /* @__PURE__ */ jsx310(
                 Input,
                 {
                   name: "legal_name",
@@ -37334,7 +37373,7 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
               ) }) })
             }
           ),
-          /* @__PURE__ */ jsx310(form.Field, { name: "dba", children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "dba", label: "DBA (optional)", children: /* @__PURE__ */ jsx310(
+          /* @__PURE__ */ jsx310(form.Field, { name: "dba", children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "dba", label: "DBA (optional)", children: /* @__PURE__ */ jsx310(
             Input,
             {
               name: "dba",
@@ -37345,7 +37384,7 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
               errorMessage: field.state.meta.errors.join(", ")
             }
           ) }) }) }),
-          /* @__PURE__ */ jsx310(form.Field, { name: "entity_type", children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "entity_type", label: "Entity type", children: /* @__PURE__ */ jsx310(
+          /* @__PURE__ */ jsx310(form.Field, { name: "entity_type", children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "entity_type", label: "Entity type", children: /* @__PURE__ */ jsx310(
             BusinessTypeSelect,
             {
               value: field.state.value,
@@ -37353,14 +37392,14 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
             }
           ) }) }) }),
           /* @__PURE__ */ jsxs193("div", { className: "Layer__business-form__state-tin-fields", children: [
-            /* @__PURE__ */ jsx310(form.Field, { name: "us_state", children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "us_state", label: "State", className: "Layer__business-form__state", children: /* @__PURE__ */ jsx310(
+            /* @__PURE__ */ jsx310(form.Field, { name: "us_state", children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "us_state", label: "State", className: "Layer__business-form__state", children: /* @__PURE__ */ jsx310(
               USStateSelect,
               {
                 value: field.state.value,
                 onChange: (option) => field.handleChange(option.value)
               }
             ) }) }) }),
-            /* @__PURE__ */ jsx310(form.Field, { name: "tin", children: (field) => /* @__PURE__ */ jsx310(Fragment48, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "tin", label: "Tax ID number (optional)", children: /* @__PURE__ */ jsx310(
+            /* @__PURE__ */ jsx310(form.Field, { name: "tin", children: (field) => /* @__PURE__ */ jsx310(Fragment49, { children: /* @__PURE__ */ jsx310(InputGroup, { name: "tin", label: "Tax ID number (optional)", children: /* @__PURE__ */ jsx310(
               Input,
               {
                 name: "tin",
@@ -37391,10 +37430,10 @@ var BusinessForm2 = ({ stringOverrides, onSuccess }) => {
 };
 
 // src/components/PlatformOnboarding/Steps/BusinessInfoStep.tsx
-import { Fragment as Fragment49, jsx as jsx311, jsxs as jsxs194 } from "react/jsx-runtime";
+import { Fragment as Fragment50, jsx as jsx311, jsxs as jsxs194 } from "react/jsx-runtime";
 var defaultTitle3 = "We\u2019ll use this information to contact you whenever we have questions on your books.";
 var BusinessInfoStep = ({ title = defaultTitle3, onNext }) => {
-  return /* @__PURE__ */ jsxs194(Fragment49, { children: [
+  return /* @__PURE__ */ jsxs194(Fragment50, { children: [
     /* @__PURE__ */ jsx311(Heading2, { children: title }),
     /* @__PURE__ */ jsx311(BusinessForm2, { onSuccess: onNext })
   ] });
@@ -37821,7 +37860,7 @@ var AccountingOverview = ({
         {
           title,
           showHeader: showTitle,
-          header: /* @__PURE__ */ jsx317(Header5, { children: /* @__PURE__ */ jsx317(HeaderRow, { children: /* @__PURE__ */ jsx317(HeaderCol, { children: /* @__PURE__ */ jsx317(ProfitAndLoss2.DatePicker, {}) }) }) }),
+          header: /* @__PURE__ */ jsx317(Header4, { children: /* @__PURE__ */ jsx317(HeaderRow, { children: /* @__PURE__ */ jsx317(HeaderCol, { children: /* @__PURE__ */ jsx317(ProfitAndLoss2.DatePicker, {}) }) }) }),
           children: [
             enableOnboarding && /* @__PURE__ */ jsx317(
               Onboarding,
@@ -37943,7 +37982,7 @@ var BankTransactionsWithLinkedAccounts = ({
   showUploadOptions = false,
   mobileComponent,
   stringOverrides,
-  convertToInAppLink
+  renderInAppLink
 }) => {
   return /* @__PURE__ */ jsxs200(
     View,
@@ -37974,7 +38013,7 @@ var BankTransactionsWithLinkedAccounts = ({
             mobileComponent,
             mode,
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.bankTransactions,
-            convertToInAppLink
+            renderInAppLink
           }
         )
       ]
@@ -37991,7 +38030,7 @@ var GeneralLedgerView = ({
   showTitle = true,
   stringOverrides,
   chartOfAccountsOptions,
-  convertToInAppLink
+  renderInAppLink
 }) => {
   const [activeTab, setActiveTab] = useState79("chartOfAccounts");
   return /* @__PURE__ */ jsx319(ProfitAndLoss2, { asContainer: false, children: /* @__PURE__ */ jsxs201(
@@ -38027,13 +38066,13 @@ var GeneralLedgerView = ({
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.chartOfAccounts,
             templateAccountsEditable: chartOfAccountsOptions == null ? void 0 : chartOfAccountsOptions.templateAccountsEditable,
             showReversalEntries: chartOfAccountsOptions == null ? void 0 : chartOfAccountsOptions.showReversalEntries,
-            getInAppLink: convertToInAppLink
+            renderInAppLink
           }
         ) : /* @__PURE__ */ jsx319(
           Journal,
           {
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.journal,
-            convertToInAppLink
+            renderInAppLink
           }
         )
       ]
@@ -38044,7 +38083,7 @@ var GeneralLedgerView = ({
 // src/views/ProjectProfitability/ProjectProfitability.tsx
 import { useState as useState80 } from "react";
 import Select5 from "react-select";
-import { Fragment as Fragment50, jsx as jsx320, jsxs as jsxs202 } from "react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx320, jsxs as jsxs202 } from "react/jsx-runtime";
 var ProjectProfitabilityView = ({
   valueOptions,
   showTitle,
@@ -38117,7 +38156,7 @@ var ProjectProfitabilityView = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx320(Container, { name: "project", children: /* @__PURE__ */ jsxs202(Fragment50, { children: [
+        /* @__PURE__ */ jsx320(Container, { name: "project", children: /* @__PURE__ */ jsxs202(Fragment51, { children: [
           activeTab === "overview" && /* @__PURE__ */ jsx320(
             AccountingOverview,
             {
@@ -38153,7 +38192,7 @@ var ProjectProfitabilityView = ({
 };
 
 // src/contexts/BillsContext.tsx
-import { createContext as createContext24, useContext as useContext58 } from "react";
+import { createContext as createContext25, useContext as useContext59 } from "react";
 
 // src/hooks/useBills.tsx
 import { useMemo as useMemo76, useState as useState81 } from "react";
@@ -38545,7 +38584,7 @@ var useBillsRecordPayment = ({ refetchAllBills }) => {
 // src/contexts/BillsContext.tsx
 import { endOfMonth as endOfMonth13, startOfMonth as startOfMonth16 } from "date-fns";
 import { jsx as jsx321 } from "react/jsx-runtime";
-var BillsContext = createContext24({
+var BillsContext = createContext25({
   data: [],
   paginatedData: [],
   currentPage: 1,
@@ -38576,7 +38615,7 @@ var BillsContext = createContext24({
   refetch: () => {
   }
 });
-var BillsRecordPaymentContext = createContext24({
+var BillsRecordPaymentContext = createContext25({
   billsToPay: [],
   setBill: () => {
   },
@@ -38620,8 +38659,8 @@ var BillsRecordPaymentContext = createContext24({
   isLoading: false,
   apiError: void 0
 });
-var useBillsContext = () => useContext58(BillsContext);
-var useBillsRecordPaymentContext = () => useContext58(BillsRecordPaymentContext);
+var useBillsContext = () => useContext59(BillsContext);
+var useBillsRecordPaymentContext = () => useContext59(BillsRecordPaymentContext);
 var BillsProvider = ({ children }) => {
   const bills = useBills();
   return /* @__PURE__ */ jsx321(BillsContext.Provider, { value: bills, children: /* @__PURE__ */ jsx321(BillContextWithRecordPayment, { children }) });
@@ -38883,7 +38922,7 @@ var useUnpaidBillsByVendor = ({ vendorId }) => {
 };
 
 // src/components/Bills/BillsRecordPayment.tsx
-import { Fragment as Fragment51, jsx as jsx324, jsxs as jsxs204 } from "react/jsx-runtime";
+import { Fragment as Fragment52, jsx as jsx324, jsxs as jsxs204 } from "react/jsx-runtime";
 var buildLabel = (bill, amount) => {
   var _a, _b;
   const amountNumber = amount !== void 0 ? Number(amount) : 0;
@@ -39082,7 +39121,7 @@ var BillsRecordPayment = ({
           /* @__PURE__ */ jsx324(Text, { size: "md" /* md */, children: "Total" }),
           /* @__PURE__ */ jsx324(Text, { size: "md" /* md */, children: convertNumberToCurrency(totalAmount) })
         ] }),
-        /* @__PURE__ */ jsx324("div", { className: "Layer__bills__record-payment__submit-container", children: apiError ? /* @__PURE__ */ jsxs204(Fragment51, { children: [
+        /* @__PURE__ */ jsx324("div", { className: "Layer__bills__record-payment__submit-container", children: apiError ? /* @__PURE__ */ jsxs204(Fragment52, { children: [
           /* @__PURE__ */ jsx324(
             RetryButton,
             {
@@ -39115,7 +39154,7 @@ var BillsSidebar = () => {
 };
 
 // src/contexts/VendorsContext.tsx
-import { createContext as createContext25, useContext as useContext59 } from "react";
+import { createContext as createContext26, useContext as useContext60 } from "react";
 
 // src/hooks/useVendors.ts
 import useSWR21 from "swr";
@@ -39140,10 +39179,10 @@ var useVendors = () => {
 
 // src/contexts/VendorsContext.tsx
 import { jsx as jsx326 } from "react/jsx-runtime";
-var VendorsContext = createContext25({
+var VendorsContext = createContext26({
   data: []
 });
-var useVendorsContext = () => useContext59(VendorsContext);
+var useVendorsContext = () => useContext60(VendorsContext);
 var VendorsProvider = ({ children }) => {
   const vendors = useVendors();
   return /* @__PURE__ */ jsx326(VendorsContext.Provider, { value: vendors, children });
@@ -39257,8 +39296,8 @@ function buildDifference(due_at) {
   if (isNaN(d)) {
     return { text: "" };
   }
-  const today = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
-  const daysDiff = differenceInDays2(today, d);
+  const today3 = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
+  const daysDiff = differenceInDays2(today3, d);
   if (daysDiff === 0) {
     return {
       text: "Due today",
@@ -39351,7 +39390,7 @@ var BillSummary = ({ bill }) => {
 };
 
 // src/components/Bills/BillsDetails.tsx
-import { Fragment as Fragment52, jsx as jsx331, jsxs as jsxs207 } from "react/jsx-runtime";
+import { Fragment as Fragment53, jsx as jsx331, jsxs as jsxs207 } from "react/jsx-runtime";
 var flattenCategories3 = (categories) => {
   return categories.reduce((acc, category) => {
     var _a;
@@ -39394,7 +39433,7 @@ var BillsDetails = ({
       className: "Layer__bills-account__index",
       floating: true,
       children: [
-        /* @__PURE__ */ jsx331(Header5, { className: "Layer__bills-account__header", children: /* @__PURE__ */ jsx331(HeaderRow, { children: /* @__PURE__ */ jsxs207(HeaderCol, { children: [
+        /* @__PURE__ */ jsx331(Header4, { className: "Layer__bills-account__header", children: /* @__PURE__ */ jsx331(HeaderRow, { children: /* @__PURE__ */ jsxs207(HeaderCol, { children: [
           /* @__PURE__ */ jsx331(BackButton, { onClick: () => closeBillDetails() }),
           /* @__PURE__ */ jsxs207("div", { className: "Layer__bills-account__title-container", children: [
             /* @__PURE__ */ jsx331(
@@ -39474,7 +39513,7 @@ var BillsDetails = ({
                     validators: { onSubmit: ({ value }) => value ? void 0 : "Vendor is required" },
                     children: (field) => {
                       var _a, _b, _c;
-                      return /* @__PURE__ */ jsxs207(Fragment52, { children: [
+                      return /* @__PURE__ */ jsxs207(Fragment53, { children: [
                         /* @__PURE__ */ jsx331(InputGroup, { inline: true, label: "Vendor", children: /* @__PURE__ */ jsx331(
                           SelectVendor,
                           {
@@ -39672,7 +39711,7 @@ var BillsDetails = ({
 import { useMemo as useMemo82 } from "react";
 
 // src/components/Bills/BillsTable.tsx
-import { Fragment as Fragment53 } from "react";
+import { Fragment as Fragment54 } from "react";
 
 // src/components/DueStatus/DueStatus.tsx
 import { useMemo as useMemo81 } from "react";
@@ -39736,8 +39775,8 @@ var getDiff = (refDate) => {
   if (isNaN(d)) {
     return null;
   }
-  const today = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
-  return differenceInDays3(today, d);
+  const today3 = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0);
+  return differenceInDays3(today3, d);
 };
 var DueStatus = ({ dueDate, paidAt, size = "md" }) => {
   const date = useMemo81(() => {
@@ -39836,7 +39875,7 @@ var BillsTableContent = ({
       "Layer__bills-table__actions-col",
       status === "PAID" ? "Layer__bills-table__actions-col--narrow" : ""
     );
-    return /* @__PURE__ */ jsx334(Fragment53, { children: /* @__PURE__ */ jsxs209(TableRow, { rowKey: rowKey + "-" + index, variant: "main", children: [
+    return /* @__PURE__ */ jsx334(Fragment54, { children: /* @__PURE__ */ jsxs209(TableRow, { rowKey: rowKey + "-" + index, variant: "main", children: [
       /* @__PURE__ */ jsxs209(TableCell, { primary: true, nowrap: true, className: "Layer__bills-table__vendor-col", children: [
         bulkSelectionActive && status === "UNPAID" && /* @__PURE__ */ jsx334(
           CheckboxWithTooltip,
@@ -39903,7 +39942,7 @@ var BillsTableContent = ({
 
 // src/components/Bills/BillsList.tsx
 import classNames91 from "classnames";
-import { Fragment as Fragment54, jsx as jsx335, jsxs as jsxs210 } from "react/jsx-runtime";
+import { Fragment as Fragment55, jsx as jsx335, jsxs as jsxs210 } from "react/jsx-runtime";
 var BillsList = ({
   stringOverrides
 }) => {
@@ -40025,8 +40064,8 @@ var BillsListItem = ({
     ] })
   ] }));
 };
-var BillAmount = ({ bill }) => /* @__PURE__ */ jsxs210(Fragment54, { children: [
-  bill.outstanding_balance !== 0 ? /* @__PURE__ */ jsxs210(Fragment54, { children: [
+var BillAmount = ({ bill }) => /* @__PURE__ */ jsxs210(Fragment55, { children: [
+  bill.outstanding_balance !== 0 ? /* @__PURE__ */ jsxs210(Fragment55, { children: [
     /* @__PURE__ */ jsx335(Text, { as: "span", status: "disabled", children: convertCentsToCurrency(bill.outstanding_balance) }),
     /* @__PURE__ */ jsx335("span", { className: "Layer__bills-list-item__separator" })
   ] }) : null,
@@ -40034,7 +40073,7 @@ var BillAmount = ({ bill }) => /* @__PURE__ */ jsxs210(Fragment54, { children: [
 ] });
 
 // src/components/Bills/BillsTableWithPanel.tsx
-import { Fragment as Fragment55, jsx as jsx336, jsxs as jsxs211 } from "react/jsx-runtime";
+import { Fragment as Fragment56, jsx as jsx336, jsxs as jsxs211 } from "react/jsx-runtime";
 var COMPONENT_NAME9 = "bills";
 var BillsTableWithPanel = ({
   containerRef,
@@ -40083,7 +40122,7 @@ var BillsTableWithPanel = ({
       parentRef: containerRef,
       children: [
         /* @__PURE__ */ jsxs211(
-          Header5,
+          Header4,
           {
             className: `Layer__${COMPONENT_NAME9}__header`,
             asHeader: true,
@@ -40115,7 +40154,7 @@ var BillsTableWithPanel = ({
                 }
               ) }) }),
               status === "UNPAID" && /* @__PURE__ */ jsxs211(HeaderRow, { direction: isMobile ? "col" : "row", children: [
-                /* @__PURE__ */ jsx336(HeaderCol, { noPadding: true, children: bulkSelectionActive ? /* @__PURE__ */ jsxs211(Fragment55, { children: [
+                /* @__PURE__ */ jsx336(HeaderCol, { noPadding: true, children: bulkSelectionActive ? /* @__PURE__ */ jsxs211(Fragment56, { children: [
                   /* @__PURE__ */ jsx336(
                     SelectVendor,
                     {
@@ -40267,7 +40306,7 @@ var BillsViewContent = ({
 
 // src/views/Reports/Reports.tsx
 import { useState as useState84 } from "react";
-import { Fragment as Fragment56, jsx as jsx340, jsxs as jsxs212 } from "react/jsx-runtime";
+import { Fragment as Fragment57, jsx as jsx340, jsxs as jsxs212 } from "react/jsx-runtime";
 var getOptions = (enabledReports) => {
   return [
     enabledReports.includes("profitAndLoss") ? {
@@ -40291,7 +40330,8 @@ var Reports = ({
   enabledReports = ["profitAndLoss", "balanceSheet", "statementOfCashFlow"],
   comparisonConfig,
   profitAndLossConfig,
-  statementOfCashFlowConfig
+  statementOfCashFlowConfig,
+  renderInAppLink
 }) => {
   var _a;
   const [activeTab, setActiveTab] = useState84(enabledReports[0]);
@@ -40327,7 +40367,8 @@ var Reports = ({
             stringOverrides,
             profitAndLossConfig,
             statementOfCashFlowConfig,
-            view
+            view,
+            renderInAppLink
           }
         ) }) }) })
       ]
@@ -40339,14 +40380,16 @@ var ReportsPanel = ({
   stringOverrides,
   profitAndLossConfig,
   statementOfCashFlowConfig,
-  view
+  view,
+  renderInAppLink
 }) => {
-  return /* @__PURE__ */ jsxs212(Fragment56, { children: [
+  return /* @__PURE__ */ jsxs212(Fragment57, { children: [
     openReport === "profitAndLoss" && /* @__PURE__ */ jsx340(
       ProfitAndLossReport,
       __spreadValues({
         stringOverrides,
-        view
+        view,
+        renderInAppLink
       }, profitAndLossConfig)
     ),
     openReport === "balanceSheet" && /* @__PURE__ */ jsx340(BalanceSheet, { stringOverrides: stringOverrides == null ? void 0 : stringOverrides.balanceSheet }),
@@ -40360,8 +40403,8 @@ var ReportsPanel = ({
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import { useContext as useContext60, useRef as useRef29 } from "react";
-import { Fragment as Fragment57, jsx as jsx341, jsxs as jsxs213 } from "react/jsx-runtime";
+import { useContext as useContext61, useRef as useRef29 } from "react";
+import { Fragment as Fragment58, jsx as jsx341, jsxs as jsxs213 } from "react/jsx-runtime";
 var COMPONENT_NAME10 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
   const containerRef = useRef29(null);
@@ -40375,7 +40418,7 @@ var ProfitAndLossPanel = (_a) => {
     "containerRef",
     "stringOverrides"
   ]);
-  const { sidebarScope } = useContext60(ProfitAndLoss2.Context);
+  const { sidebarScope } = useContext61(ProfitAndLoss2.Context);
   return /* @__PURE__ */ jsxs213(
     Panel,
     {
@@ -40406,7 +40449,7 @@ var Components = ({
   hideTable = false,
   stringOverrides
 }) => {
-  const { isError, isLoading, isValidating, refetch } = useContext60(
+  const { isError, isLoading, isValidating, refetch } = useContext61(
     ProfitAndLoss2.Context
   );
   if (!isLoading && isError) {
@@ -40421,7 +40464,7 @@ var Components = ({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs213(Fragment57, { children: [
+  return /* @__PURE__ */ jsxs213(Fragment58, { children: [
     !hideChart && /* @__PURE__ */ jsxs213("div", { className: `Layer__${COMPONENT_NAME10}__chart_with_summaries`, children: [
       /* @__PURE__ */ jsxs213(
         "div",
@@ -40457,7 +40500,7 @@ var Components = ({
 };
 
 // src/providers/InvoiceStore/InvoiceStoreProvider.tsx
-import { useState as useState86, createContext as createContext26, useContext as useContext61, useMemo as useMemo86 } from "react";
+import { useState as useState86, createContext as createContext27, useContext as useContext62, useMemo as useMemo86 } from "react";
 import { createStore as createStore4, useStore as useStore7 } from "zustand";
 
 // src/components/Invoices/InvoiceTable/InvoiceTable.tsx
@@ -40601,6 +40644,7 @@ var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["PartiallyWrittenOff"] = "PARTIALLY_WRITTEN_OFF";
   InvoiceStatus3["PartiallyPaid"] = "PARTIALLY_PAID";
   InvoiceStatus3["Sent"] = "SENT";
+  InvoiceStatus3["Refunded"] = "REFUNDED";
   return InvoiceStatus3;
 })(InvoiceStatus || {});
 var InvoiceStatusSchema = Schema19.Enums(InvoiceStatus);
@@ -40727,8 +40771,7 @@ var UpsertInvoiceLineItemSchema = Schema19.Struct({
     Schema19.fromKey("unit_price")
   ),
   quantity: Schema19.BigDecimal,
-  salesTaxes: pipe11(
-    Schema19.propertySignature(Schema19.UndefinedOr(Schema19.Array(UpsertInvoiceTaxLineItemSchema))),
+  salesTaxes: Schema19.optional(Schema19.Array(UpsertInvoiceTaxLineItemSchema)).pipe(
     Schema19.fromKey("sales_taxes")
   )
 });
@@ -40741,21 +40784,19 @@ var UpsertInvoiceSchema = Schema19.Struct({
     Schema19.propertySignature(Schema19.Date),
     Schema19.fromKey("due_at")
   ),
-  invoiceNumber: pipe11(
-    Schema19.propertySignature(Schema19.UndefinedOr(Schema19.String)),
+  invoiceNumber: Schema19.optional(Schema19.String).pipe(
     Schema19.fromKey("invoice_number")
   ),
   customerId: pipe11(
     Schema19.propertySignature(Schema19.UUID),
     Schema19.fromKey("customer_id")
   ),
-  memo: Schema19.NullOr(Schema19.String),
+  memo: Schema19.optional(Schema19.String),
   lineItems: pipe11(
     Schema19.propertySignature(Schema19.Array(UpsertInvoiceLineItemSchema)),
     Schema19.fromKey("line_items")
   ),
-  additionalDiscount: pipe11(
-    Schema19.propertySignature(Schema19.UndefinedOr(Schema19.Number)),
+  additionalDiscount: Schema19.optional(Schema19.Number).pipe(
     Schema19.fromKey("additional_discount")
   )
 });
@@ -40816,7 +40857,8 @@ var InvoiceSummaryStatsResponseSchema = Schema19.Struct({
 var UpsertDedicatedInvoicePaymentSchema = Schema19.Struct({
   amount: Schema19.Number,
   method: PaymentMethodSchema,
-  paidAt: Schema19.optional(Schema19.Date).pipe(
+  paidAt: pipe11(
+    Schema19.propertySignature(Schema19.Date),
     Schema19.fromKey("paid_at")
   ),
   referenceNumber: Schema19.optional(Schema19.String).pipe(
@@ -40827,7 +40869,7 @@ var UpsertDedicatedInvoicePaymentSchema = Schema19.Struct({
 var DedicatedInvoicePaymentFormSchema = Schema19.Struct({
   amount: Schema19.BigDecimal,
   method: Schema19.NullOr(PaymentMethodSchema),
-  paidAt: ZonedDateTimeFromSelf,
+  paidAt: Schema19.NullOr(ZonedDateTimeFromSelf),
   referenceNumber: Schema19.String,
   memo: Schema19.String
 });
@@ -41209,6 +41251,9 @@ var getDueStatusConfig = (invoice, { inline }) => {
     case "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */: {
       return { text: "Partially Written Off" };
     }
+    case "REFUNDED" /* Refunded */: {
+      return { text: "Refunded" };
+    }
     case "PAID" /* Paid */: {
       return {
         text: "Paid",
@@ -41274,6 +41319,7 @@ var InvoiceStatusOptionConfig = {
   ["Sent" /* Sent */]: { label: "Sent", value: "Sent" /* Sent */ },
   ["Paid" /* Paid */]: { label: "Paid", value: "Paid" /* Paid */ },
   ["Voided" /* Voided */]: { label: "Voided", value: "Voided" /* Voided */ },
+  ["Refunded" /* Refunded */]: { label: "Refunded", value: "Refunded" /* Refunded */ },
   ["Written Off" /* WrittenOff */]: { label: "Written Off", value: "Written Off" /* WrittenOff */ }
 };
 var ALL_OPTION = InvoiceStatusOptionConfig["All" /* All */];
@@ -41285,6 +41331,7 @@ var AmountCell = ({ invoice }) => {
     case "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */:
     case "WRITTEN_OFF" /* WrittenOff */:
     case "VOIDED" /* Voided */:
+    case "REFUNDED" /* Refunded */:
     case "SENT" /* Sent */: {
       return /* @__PURE__ */ jsx348(VStack, { children: /* @__PURE__ */ jsx348(Span, { align: "right", children: totalAmount }) });
     }
@@ -41360,6 +41407,8 @@ var getListInvoiceParams = ({ status }) => {
       return { status: ["WRITTEN_OFF" /* WrittenOff */, "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */] };
     case "Voided" /* Voided */:
       return { status: ["VOIDED" /* Voided */] };
+    case "Refunded" /* Refunded */:
+      return { status: ["REFUNDED" /* Refunded */] };
     default:
       unsafeAssertUnreachable({
         value: statusFilter,
@@ -41669,7 +41718,7 @@ var useUpsertInvoice = (props) => {
 
 // src/providers/InvoiceStore/InvoiceStoreProvider.tsx
 import { jsx as jsx349 } from "react/jsx-runtime";
-var InvoiceStoreContext = createContext26(
+var InvoiceStoreContext = createContext27(
   createStore4(() => ({
     routeState: { route: "Table" /* Table */ },
     tableQuery: { status: ALL_OPTION },
@@ -41689,7 +41738,7 @@ var isInvoiceDetail = (routeState) => {
   return routeState.route === "Detail" /* Detail */;
 };
 function useInvoiceRouteState() {
-  const store = useContext61(InvoiceStoreContext);
+  const store = useContext62(InvoiceStoreContext);
   return useStore7(store, (state) => state.routeState);
 }
 function useInvoiceDetail() {
@@ -41699,13 +41748,13 @@ function useInvoiceDetail() {
   return invoiceDetail;
 }
 function useInvoiceTableQuery() {
-  const store = useContext61(InvoiceStoreContext);
+  const store = useContext62(InvoiceStoreContext);
   const query = useStore7(store, (state) => state.tableQuery);
   const setQuery = useStore7(store, (state) => state.setTableQuery);
   return useMemo86(() => ({ query, setQuery }), [query, setQuery]);
 }
 function useInvoiceNavigation() {
-  const store = useContext61(InvoiceStoreContext);
+  const store = useContext62(InvoiceStoreContext);
   return useStore7(store, (state) => state.navigate);
 }
 function InvoiceStoreProvider(props) {
@@ -41750,7 +41799,7 @@ function InvoiceStoreProvider(props) {
 }
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { useCallback as useCallback77, useMemo as useMemo90, useRef as useRef33, useState as useState89 } from "react";
+import { useCallback as useCallback86, useMemo as useMemo92, useRef as useRef35, useState as useState91 } from "react";
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
 import { forwardRef as forwardRef26, useCallback as useCallback72, useEffect as useEffect38, useImperativeHandle as useImperativeHandle4, useRef as useRef31 } from "react";
@@ -42415,7 +42464,7 @@ var DataPoint = ({ label, children }) => {
 };
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { SquarePen, HandCoins as HandCoins2, Menu as MenuIcon, Save as Save2 } from "lucide-react";
+import { HandCoins as HandCoins2, Save as Save2 } from "lucide-react";
 
 // src/components/Invoices/InvoicePaymentForm/InvoicePaymentForm.tsx
 import { useCallback as useCallback76 } from "react";
@@ -42564,7 +42613,7 @@ import { Schema as Schema25 } from "effect";
 // src/components/Invoices/InvoicePaymentForm/formUtils.ts
 import { BigDecimal as BD7 } from "effect";
 import { formatDate as formatDate2, startOfToday as startOfToday3 } from "date-fns";
-import { getLocalTimeZone as getLocalTimeZone2, fromDate as fromDate3, toCalendarDate as toCalendarDate3 } from "@internationalized/date";
+import { getLocalTimeZone as getLocalTimeZone2, fromDate as fromDate3, toCalendarDate as toCalendarDate3, today } from "@internationalized/date";
 var getInvoicePaymentFormDefaultValues = (invoice) => {
   const paidAt = fromDate3(startOfToday3(), getLocalTimeZone2());
   return {
@@ -42587,21 +42636,27 @@ var validateInvoicePaymentForm = ({ invoicePayment, invoice }) => {
   if (paidAt === null) {
     errors.push({ paidAt: "Payment date is a required field." });
   }
-  if (invoice.sentAt && toCalendarDate3(paidAt).compare(toCalendarDate3(fromDate3(invoice.sentAt, "UTC"))) < 0) {
+  if (paidAt && invoice.sentAt && toCalendarDate3(paidAt).compare(toCalendarDate3(fromDate3(invoice.sentAt, "UTC"))) < 0) {
     errors.push({ paidAt: `Payment date cannot be before the invoice date (${formatDate2(invoice.sentAt, DATE_FORMAT_SHORT)}).` });
   }
+  if (paidAt && toCalendarDate3(paidAt).compare(today(getLocalTimeZone2())) > 0) {
+    errors.push({ paidAt: "Payment date cannot be in the future." });
+  }
   if (method === null) {
     errors.push({ method: "Payment method is a required field." });
   }
   return errors.length > 0 ? errors : null;
 };
-var convertInvoicePaymentFormToParams = (form) => ({
-  amount: convertBigDecimalToCents(form.amount),
-  method: form.method,
-  paidAt: form.paidAt.toDate(),
-  referenceNumber: form.referenceNumber.trim() || void 0,
-  memo: form.memo.trim() || void 0
-});
+var convertInvoicePaymentFormToParams = (form) => {
+  var _a;
+  return {
+    amount: convertBigDecimalToCents(form.amount),
+    method: form.method,
+    paidAt: (_a = form.paidAt) == null ? void 0 : _a.toDate(),
+    referenceNumber: form.referenceNumber.trim() || void 0,
+    memo: form.memo.trim() || void 0
+  };
+};
 
 // src/components/Invoices/InvoicePaymentForm/useInvoicePaymentForm.ts
 var useInvoicePaymentForm = (props) => {
@@ -42750,40 +42805,788 @@ var InvoicePaymentForm = (props) => {
   ] });
 };
 
+// src/components/Invoices/InvoiceDetail/InvoiceDetailHeaderMenu.tsx
+import { useCallback as useCallback85, useState as useState90 } from "react";
+import { Menu as MenuIcon } from "lucide-react";
+
+// src/features/invoices/api/useVoidInvoice.tsx
+import { useCallback as useCallback77 } from "react";
+import useSWRMutation30 from "swr/mutation";
+import { Schema as Schema26 } from "effect";
+var VOID_INVOICE_TAG_KEY = "#void-invoice";
+var VoidInvoiceReturnSchema = Schema26.Struct({
+  data: InvoiceSchema
+});
+var voidInvoice = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/void`);
+function buildKey46({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  invoiceId
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      invoiceId,
+      tags: [VOID_INVOICE_TAG_KEY]
+    };
+  }
+}
+var VoidInvoiceSWRResponse = class {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+};
+var useVoidInvoice = ({ invoiceId }) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const rawMutationResponse = useSWRMutation30(
+    () => buildKey46(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      invoiceId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, invoiceId: invoiceId2 }) => {
+      return voidInvoice(
+        apiUrl,
+        accessToken,
+        { params: { businessId: businessId2, invoiceId: invoiceId2 } }
+      ).then(Schema26.decodeUnknownPromise(VoidInvoiceReturnSchema));
+    },
+    {
+      revalidate: false,
+      throwOnError: true
+    }
+  );
+  const mutationResponse = new VoidInvoiceSWRResponse(rawMutationResponse);
+  const { patchInvoiceByKey } = useInvoicesGlobalCacheActions();
+  const { forceReloadInvoiceSummaryStats } = useInvoiceSummaryStatsCacheActions();
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = useCallback77(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      void patchInvoiceByKey(triggerResult.data);
+      void forceReloadInvoiceSummaryStats();
+      return triggerResult;
+    }),
+    [originalTrigger, patchInvoiceByKey, forceReloadInvoiceSummaryStats]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+
+// src/components/Invoices/Modal/InvoiceVoidModal.tsx
+import { useCallback as useCallback78 } from "react";
+import { jsx as jsx355 } from "react/jsx-runtime";
+function InvoiceVoidModal({ isOpen, onOpenChange, invoiceId, onSuccess }) {
+  const { trigger: voidInvoice2 } = useVoidInvoice({ invoiceId });
+  const onConfirm = useCallback78(() => __async(null, null, function* () {
+    const { data: invoice } = yield voidInvoice2();
+    onSuccess(invoice);
+  }), [onSuccess, voidInvoice2]);
+  return /* @__PURE__ */ jsx355(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Void invoice",
+      description: "Voiding this invoice will mark it as cancelled, and you will no longer be able to apply payments to it. This action cannot be undone.",
+      onConfirm,
+      confirmLabel: "Void Invoice",
+      errorText: "There was an error voiding this invoice. Please check your connection and try again in a few seconds."
+    }
+  );
+}
+
+// src/features/invoices/api/useWriteoffInvoice.tsx
+import { Schema as Schema28 } from "effect";
+import { useCallback as useCallback79 } from "react";
+import useSWRMutation31 from "swr/mutation";
+
+// src/features/invoices/invoiceWriteoffSchemas.ts
+import { Schema as Schema27, pipe as pipe12 } from "effect";
+var InvoiceWriteoffMode = /* @__PURE__ */ ((InvoiceWriteoffMode2) => {
+  InvoiceWriteoffMode2["Expense"] = "EXPENSE";
+  InvoiceWriteoffMode2["RevenueReversal"] = "REVENUE_REVERSAL";
+  return InvoiceWriteoffMode2;
+})(InvoiceWriteoffMode || {});
+var InvoiceWriteoffModeSchema = Schema27.Enums(InvoiceWriteoffMode);
+var TransformedInvoiceWriteoffModeSchema = Schema27.transform(
+  Schema27.NonEmptyTrimmedString,
+  Schema27.typeSchema(InvoiceWriteoffModeSchema),
+  {
+    decode: (input) => {
+      if (Object.values(InvoiceWriteoffModeSchema.enums).includes(input)) {
+        return input;
+      }
+      return "EXPENSE" /* Expense */;
+    },
+    encode: (input) => input
+  }
+);
+var CreateInvoiceWriteoffSchema = Schema27.Struct({
+  externalId: Schema27.optional(Schema27.String).pipe(
+    Schema27.fromKey("external_id")
+  ),
+  amount: Schema27.Number,
+  writeOffMode: Schema27.optional(InvoiceWriteoffModeSchema).pipe(
+    Schema27.fromKey("write_off_mode")
+  ),
+  writeOffAt: pipe12(
+    Schema27.propertySignature(Schema27.Date),
+    Schema27.fromKey("write_off_at")
+  ),
+  referenceNumber: Schema27.optional(Schema27.String).pipe(
+    Schema27.fromKey("reference_number")
+  ),
+  memo: Schema27.optional(Schema27.String)
+});
+var InvoiceWriteoffSchema = Schema27.Struct({
+  invoiceId: pipe12(
+    Schema27.propertySignature(Schema27.UUID),
+    Schema27.fromKey("invoice_id")
+  ),
+  externalId: pipe12(
+    Schema27.propertySignature(Schema27.NullOr(Schema27.String)),
+    Schema27.fromKey("external_id")
+  ),
+  amount: Schema27.Number,
+  writeOffMode: pipe12(
+    Schema27.propertySignature(TransformedInvoiceWriteoffModeSchema),
+    Schema27.fromKey("write_off_mode")
+  ),
+  writeOffAt: pipe12(
+    Schema27.propertySignature(Schema27.Date),
+    Schema27.fromKey("write_off_at")
+  ),
+  referenceNumber: pipe12(
+    Schema27.propertySignature(Schema27.NullOr(Schema27.String)),
+    Schema27.fromKey("reference_number")
+  ),
+  memo: Schema27.NullOr(Schema27.String)
+});
+
+// src/features/invoices/api/useWriteoffInvoice.tsx
+var CREATE_INVOICE_WRITEOFF_TAG_KEY = "#writeoff-invoice";
+var writeoffInvoice = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/write-off`);
+function buildKey47({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  invoiceId,
+  invoiceWriteoffId = void 0
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      invoiceId,
+      invoiceWriteoffId,
+      tags: [CREATE_INVOICE_WRITEOFF_TAG_KEY]
+    };
+  }
+}
+var WriteoffInvoiceReturnSchema = Schema28.Struct({
+  data: InvoiceWriteoffSchema
+});
+var WriteoffInvoiceSWRResponse = class {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+};
+var updateInvoiceWithWriteoff = (invoice) => {
+  const status = invoice.status === "PARTIALLY_PAID" /* PartiallyPaid */ ? "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */ : "WRITTEN_OFF" /* WrittenOff */;
+  return __spreadProps(__spreadValues({}, invoice), { status, outstandingBalance: 0 });
+};
+var useWriteoffInvoice = ({ invoiceId }) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const applyWriteoffToInvoice = useCallback79(() => (invoice) => {
+    if (invoice.id !== invoiceId) return invoice;
+    return updateInvoiceWithWriteoff(invoice);
+  }, [invoiceId]);
+  const rawMutationResponse = useSWRMutation31(
+    () => buildKey47(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      invoiceId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, invoiceId: invoiceId2 }, { arg: decodedBody }) => {
+      const body = Schema28.encodeSync(CreateInvoiceWriteoffSchema)(decodedBody);
+      return writeoffInvoice(
+        apiUrl,
+        accessToken,
+        { params: { businessId: businessId2, invoiceId: invoiceId2 }, body }
+      ).then(Schema28.decodeUnknownPromise(WriteoffInvoiceReturnSchema));
+    },
+    {
+      revalidate: false,
+      throwOnError: true
+    }
+  );
+  const mutationResponse = new WriteoffInvoiceSWRResponse(rawMutationResponse);
+  const { patchInvoiceWithTransformation } = useInvoicesGlobalCacheActions();
+  const { forceReloadInvoiceSummaryStats } = useInvoiceSummaryStatsCacheActions();
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = useCallback79(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      void patchInvoiceWithTransformation(applyWriteoffToInvoice());
+      void forceReloadInvoiceSummaryStats();
+      return triggerResult;
+    }),
+    [originalTrigger, patchInvoiceWithTransformation, applyWriteoffToInvoice, forceReloadInvoiceSummaryStats]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+
+// src/components/Invoices/Modal/InvoiceWriteoffModal.tsx
+import { useCallback as useCallback80 } from "react";
+import { jsx as jsx356 } from "react/jsx-runtime";
+function InvoiceWriteoffModal({ isOpen, onOpenChange, invoice, onSuccess }) {
+  const { trigger: writeoffInvoice2 } = useWriteoffInvoice({ invoiceId: invoice.id });
+  const onConfirm = useCallback80(() => __async(null, null, function* () {
+    yield writeoffInvoice2({
+      writeOffAt: /* @__PURE__ */ new Date(),
+      amount: invoice.outstandingBalance
+    });
+    onSuccess(updateInvoiceWithWriteoff(invoice));
+  }), [invoice, onSuccess, writeoffInvoice2]);
+  return /* @__PURE__ */ jsx356(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Write off invoice",
+      description: "Writing off this invoice will record it as bad debt, and you will no longer be able to apply payments to it. This action cannot be undone.",
+      onConfirm,
+      confirmLabel: "Write Off Invoice",
+      errorText: "There was an error writing off this invoice. Please check your connection and try again in a few seconds."
+    }
+  );
+}
+
+// src/components/Invoices/Modal/InvoiceResetModal.tsx
+import { jsx as jsx357 } from "react/jsx-runtime";
+function InvoiceResetModal({ isOpen, onOpenChange, invoiceId: _invoiceId }) {
+  return /* @__PURE__ */ jsx357(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Reset invoice to sent",
+      description: "Resetting this invoice will delete all payments, refunds, and write offs associated with it. This action cannot be undone.",
+      onConfirm: () => {
+      },
+      confirmLabel: "Reset Invoice",
+      errorText: "There was an error resetting this invoice. Please check your connection and try again in a few seconds."
+    }
+  );
+}
+
+// src/components/Invoices/Modal/InvoiceRefundModal.tsx
+import { useCallback as useCallback84, useMemo as useMemo91, useRef as useRef34 } from "react";
+
+// src/components/Invoices/InvoiceRefundForm/InvoiceRefundForm.tsx
+import { forwardRef as forwardRef27, useCallback as useCallback83, useImperativeHandle as useImperativeHandle5 } from "react";
+import { AlertTriangle as AlertTriangle3 } from "lucide-react";
+
+// src/components/Invoices/InvoiceRefundForm/useInvoiceRefundForm.ts
+import { useCallback as useCallback82, useMemo as useMemo90, useState as useState89, useRef as useRef33 } from "react";
+import { revalidateLogic as revalidateLogic3 } from "@tanstack/react-form";
+import { Schema as Schema31 } from "effect";
+
+// src/components/Invoices/InvoiceRefundForm/formUtils.ts
+import { formatDate as formatDate3, startOfToday as startOfToday4 } from "date-fns";
+import { getLocalTimeZone as getLocalTimeZone3, fromDate as fromDate4, toCalendarDate as toCalendarDate4, today as today2 } from "@internationalized/date";
+var getInvoiceRefundFormDefaultValues = (invoice) => {
+  const completedAt = fromDate4(startOfToday4(), getLocalTimeZone3());
+  return {
+    amount: convertCentsToBigDecimal(invoice.totalAmount),
+    method: null,
+    completedAt
+  };
+};
+var validateInvoiceRefundForm = ({ invoiceRefund, invoice }) => {
+  const { completedAt, method } = invoiceRefund;
+  const errors = [];
+  if (completedAt === null) {
+    errors.push({ completedAt: "Refund date is a required field." });
+  }
+  if (completedAt && invoice.paidAt && toCalendarDate4(completedAt).compare(toCalendarDate4(fromDate4(invoice.paidAt, "UTC"))) < 0) {
+    errors.push({ completedAt: `Refund date cannot be before the last invoice payment (${formatDate3(invoice.paidAt, DATE_FORMAT_SHORT)}).` });
+  }
+  if (completedAt && toCalendarDate4(completedAt).compare(today2(getLocalTimeZone3())) > 0) {
+    errors.push({ completedAt: "Refund date cannot be in the future." });
+  }
+  if (method === null) {
+    errors.push({ method: "Payment method is a required field." });
+  }
+  return errors.length > 0 ? errors : null;
+};
+var convertInvoiceRefundFormToParams = (form) => {
+  var _a;
+  return {
+    amount: convertBigDecimalToCents(form.amount),
+    method: form.method,
+    completedAt: (_a = form.completedAt) == null ? void 0 : _a.toDate()
+  };
+};
+
+// src/features/invoices/customerRefundSchemas.ts
+import { Schema as Schema29, pipe as pipe13 } from "effect";
+var CustomerRefundStatus = /* @__PURE__ */ ((CustomerRefundStatus2) => {
+  CustomerRefundStatus2["Paid"] = "PAID";
+  CustomerRefundStatus2["PartiallyPaid"] = "PARTIALLY_PAID";
+  CustomerRefundStatus2["Sent"] = "SENT";
+  return CustomerRefundStatus2;
+})(CustomerRefundStatus || {});
+var CustomerRefundStatusSchema = Schema29.Enums(CustomerRefundStatus);
+var TransformedCustomerRefundStatusSchema = Schema29.transform(
+  Schema29.NonEmptyTrimmedString,
+  Schema29.typeSchema(CustomerRefundStatusSchema),
+  {
+    decode: (input) => {
+      if (Object.values(CustomerRefundStatusSchema.enums).includes(input)) {
+        return input;
+      }
+      return "SENT" /* Sent */;
+    },
+    encode: (input) => input
+  }
+);
+var CreateCustomerRefundSchema = Schema29.Struct({
+  externalId: Schema29.optional(Schema29.String).pipe(
+    Schema29.fromKey("external_id")
+  ),
+  refundedAmount: Schema29.optional(Schema29.Number).pipe(
+    Schema29.fromKey("refunded_amount")
+  ),
+  completedAt: pipe13(
+    Schema29.propertySignature(Schema29.Date),
+    Schema29.fromKey("completed_at")
+  ),
+  method: PaymentMethodSchema,
+  referenceNumber: Schema29.optional(Schema29.String).pipe(
+    Schema29.fromKey("reference_number")
+  ),
+  memo: Schema29.optional(Schema29.String)
+});
+var CustomerRefundSchema = Schema29.Struct({
+  externalId: pipe13(
+    Schema29.propertySignature(Schema29.UndefinedOr(Schema29.String)),
+    Schema29.fromKey("external_id")
+  ),
+  refundedAmount: pipe13(
+    Schema29.propertySignature(Schema29.Number),
+    Schema29.fromKey("refunded_amount")
+  ),
+  status: TransformedCustomerRefundStatusSchema,
+  completedAt: pipe13(
+    Schema29.propertySignature(Schema29.Date),
+    Schema29.fromKey("completed_at")
+  ),
+  isDedicated: pipe13(
+    Schema29.propertySignature(Schema29.Boolean),
+    Schema29.fromKey("is_dedicated")
+  ),
+  referenceNumber: pipe13(
+    Schema29.propertySignature(Schema29.NullOr(Schema29.String)),
+    Schema29.fromKey("reference_number")
+  ),
+  memo: Schema29.NullOr(Schema29.String)
+});
+
+// src/features/invoices/api/useRefundInvoice.tsx
+import { useCallback as useCallback81 } from "react";
+import useSWRMutation32 from "swr/mutation";
+import { Schema as Schema30 } from "effect";
+var REFUND_INVOICE_TAG_KEY = "#refund-invoice";
+var RefundInvoiceReturnSchema = Schema30.Struct({
+  data: CustomerRefundSchema
+});
+var refundInvoice = post(({ businessId, invoiceId }) => `/v1/businesses/${businessId}/invoices/${invoiceId}/refund`);
+function buildKey48({
+  access_token: accessToken,
+  apiUrl,
+  businessId,
+  invoiceId
+}) {
+  if (accessToken && apiUrl) {
+    return {
+      accessToken,
+      apiUrl,
+      businessId,
+      invoiceId,
+      tags: [REFUND_INVOICE_TAG_KEY]
+    };
+  }
+}
+var RefundInvoiceSWRResponse = class {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+};
+var updateInvoiceWithRefund = (invoice) => {
+  return __spreadProps(__spreadValues({}, invoice), { status: "REFUNDED" /* Refunded */ });
+};
+var useRefundInvoice = ({ invoiceId }) => {
+  const { data } = useAuth();
+  const { businessId } = useLayerContext();
+  const applyRefundToInvoice = useCallback81(() => (invoice) => {
+    if (invoice.id !== invoiceId) return invoice;
+    return updateInvoiceWithRefund(invoice);
+  }, [invoiceId]);
+  const rawMutationResponse = useSWRMutation32(
+    () => buildKey48(__spreadProps(__spreadValues({}, data), {
+      businessId,
+      invoiceId
+    })),
+    ({ accessToken, apiUrl, businessId: businessId2, invoiceId: invoiceId2 }, { arg: body }) => {
+      return refundInvoice(
+        apiUrl,
+        accessToken,
+        { params: { businessId: businessId2, invoiceId: invoiceId2 }, body }
+      ).then(Schema30.decodeUnknownPromise(RefundInvoiceReturnSchema));
+    },
+    {
+      revalidate: false,
+      throwOnError: true
+    }
+  );
+  const mutationResponse = new RefundInvoiceSWRResponse(rawMutationResponse);
+  const { patchInvoiceWithTransformation } = useInvoicesGlobalCacheActions();
+  const { forceReloadInvoiceSummaryStats } = useInvoiceSummaryStatsCacheActions();
+  const originalTrigger = mutationResponse.trigger;
+  const stableProxiedTrigger = useCallback81(
+    (...triggerParameters) => __async(null, null, function* () {
+      const triggerResult = yield originalTrigger(...triggerParameters);
+      void patchInvoiceWithTransformation(applyRefundToInvoice());
+      void forceReloadInvoiceSummaryStats();
+      return triggerResult;
+    }),
+    [originalTrigger, patchInvoiceWithTransformation, applyRefundToInvoice, forceReloadInvoiceSummaryStats]
+  );
+  return new Proxy(mutationResponse, {
+    get(target, prop) {
+      if (prop === "trigger") {
+        return stableProxiedTrigger;
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+};
+
+// src/components/Invoices/InvoiceRefundForm/useInvoiceRefundForm.ts
+var useInvoiceRefundForm = ({ onSuccess, invoice }) => {
+  const [submitError, setSubmitError] = useState89(void 0);
+  const { trigger: refundInvoice2 } = useRefundInvoice({ invoiceId: invoice.id });
+  const defaultValuesRef = useRef33(getInvoiceRefundFormDefaultValues(invoice));
+  const defaultValues = defaultValuesRef.current;
+  const onSubmit = useCallback82((_0) => __async(null, [_0], function* ({ value }) {
+    try {
+      const customerRefundParams = convertInvoiceRefundFormToParams(value);
+      const refundInvoiceRequest = Schema31.encodeUnknownSync(CreateCustomerRefundSchema)(customerRefundParams);
+      const { data: refund } = yield refundInvoice2(refundInvoiceRequest);
+      setSubmitError(void 0);
+      onSuccess(refund);
+    } catch (e) {
+      console.error(e);
+      setSubmitError("Something went wrong. Please try again.");
+    }
+  }), [onSuccess, refundInvoice2]);
+  const onDynamic = useCallback82(({ value }) => {
+    return validateInvoiceRefundForm({ invoiceRefund: value, invoice });
+  }, [invoice]);
+  const validators = useMemo90(() => ({ onDynamic }), [onDynamic]);
+  const form = useAppForm({
+    defaultValues,
+    onSubmit,
+    validators,
+    validationLogic: revalidateLogic3({
+      mode: "submit",
+      modeAfterSubmission: "submit"
+    }),
+    canSubmitWhenInvalid: true
+  });
+  return useMemo90(
+    () => ({ form, submitError }),
+    [form, submitError]
+  );
+};
+
+// src/components/Invoices/InvoiceRefundForm/InvoiceRefundForm.tsx
+import { jsx as jsx358, jsxs as jsxs226 } from "react/jsx-runtime";
+var INVOICE_REFUND_FORM_CSS_PREFIX = "Layer__InvoiceRefundForm";
+var INVOICE_REFUND_FORM_FIELD_CSS_PREFIX = `${INVOICE_REFUND_FORM_CSS_PREFIX}__Field`;
+var InvoiceRefundForm = forwardRef27(({ onSuccess, invoice }, ref) => {
+  const { form, submitError } = useInvoiceRefundForm({ onSuccess, invoice });
+  const blockNativeOnSubmit = useCallback83((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  useImperativeHandle5(ref, () => ({
+    submit: () => form.handleSubmit()
+  }));
+  return /* @__PURE__ */ jsxs226(Form, { className: INVOICE_REFUND_FORM_CSS_PREFIX, onSubmit: blockNativeOnSubmit, children: [
+    /* @__PURE__ */ jsx358(form.Subscribe, { selector: (state) => state.errorMap, children: (errorMap) => {
+      const validationErrors = flattenValidationErrors(errorMap);
+      if (validationErrors.length > 0 || submitError) {
+        return /* @__PURE__ */ jsx358(HStack, { className: `${INVOICE_REFUND_FORM_CSS_PREFIX}__FormError`, children: /* @__PURE__ */ jsx358(
+          DataState,
+          {
+            icon: /* @__PURE__ */ jsx358(AlertTriangle3, { size: 16 }),
+            status: "failed" /* failed */,
+            title: validationErrors[0] || submitError,
+            titleSize: "md" /* md */,
+            inline: true
+          }
+        ) });
+      }
+    } }),
+    /* @__PURE__ */ jsxs226(VStack, { className: `${INVOICE_REFUND_FORM_CSS_PREFIX}__Section`, gap: "sm", children: [
+      /* @__PURE__ */ jsxs226(HStack, { className: `${INVOICE_REFUND_FORM_FIELD_CSS_PREFIX}__InvoiceNo`, gap: "xs", align: "center", children: [
+        /* @__PURE__ */ jsx358(Span, { size: "sm", children: "Invoice" }),
+        /* @__PURE__ */ jsxs226(Span, { size: "md", weight: "bold", children: [
+          "#",
+          invoice.invoiceNumber
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx358(form.AppField, { name: "completedAt", children: (field) => /* @__PURE__ */ jsx358(field.FormDateField, { label: "Refund date", inline: true, className: `${INVOICE_REFUND_FORM_FIELD_CSS_PREFIX}__CompletedAt` }) }),
+      /* @__PURE__ */ jsx358(form.Field, { name: "method", children: (field) => /* @__PURE__ */ jsx358(
+        PaymentMethodComboBox,
+        {
+          className: `${INVOICE_REFUND_FORM_FIELD_CSS_PREFIX}__PaymentMethod`,
+          value: field.state.value,
+          onValueChange: field.handleChange,
+          inline: true
+        }
+      ) }),
+      /* @__PURE__ */ jsx358(form.AppField, { name: "amount", children: (field) => /* @__PURE__ */ jsx358(field.FormBigDecimalField, { label: "Amount", inline: true, className: `${INVOICE_REFUND_FORM_FIELD_CSS_PREFIX}__Amount`, mode: "currency", isReadOnly: true }) })
+    ] })
+  ] });
+});
+InvoiceRefundForm.displayName = "InvoiceRefundForm";
+
+// src/components/Invoices/Modal/InvoiceRefundModal.tsx
+import { jsx as jsx359 } from "react/jsx-runtime";
+function InvoiceRefundModal({ isOpen, onOpenChange, invoice, onSuccess }) {
+  const formRef = useRef34(null);
+  const onConfirm = useCallback84(() => {
+    var _a;
+    return (_a = formRef.current) == null ? void 0 : _a.submit();
+  }, []);
+  const onSuccessForm = useCallback84(() => {
+    onSuccess(updateInvoiceWithRefund(invoice));
+    onOpenChange == null ? void 0 : onOpenChange(false);
+  }, [invoice, onOpenChange, onSuccess]);
+  const content = useMemo91(() => /* @__PURE__ */ jsx359(InvoiceRefundForm, { invoice, onSuccess: onSuccessForm, ref: formRef }), [invoice, onSuccessForm]);
+  return /* @__PURE__ */ jsx359(
+    BaseConfirmationModal,
+    {
+      isOpen,
+      onOpenChange,
+      title: "Issue refund",
+      content,
+      onConfirm,
+      confirmLabel: "Refund Invoice",
+      errorText: "There was an error issuing a refund for this invoice. Please check your connection and try again in a few seconds.",
+      closeOnConfirm: false
+    }
+  );
+}
+
+// src/components/Invoices/InvoiceDetail/InvoiceDetailHeaderMenu.tsx
+import { Fragment as Fragment59, jsx as jsx360, jsxs as jsxs227 } from "react/jsx-runtime";
+var availableActions = {
+  ["SENT" /* Sent */]: [
+    "Edit" /* Edit */,
+    "Void" /* Void */,
+    "Writeoff" /* Writeoff */
+  ],
+  ["PARTIALLY_PAID" /* PartiallyPaid */]: [
+    "Writeoff" /* Writeoff */,
+    "Reset" /* Reset */
+  ],
+  ["PAID" /* Paid */]: [
+    "Refund" /* Refund */,
+    "Reset" /* Reset */
+  ],
+  ["VOIDED" /* Voided */]: [],
+  ["PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */]: ["Reset" /* Reset */],
+  ["WRITTEN_OFF" /* WrittenOff */]: ["Reset" /* Reset */],
+  ["REFUNDED" /* Refunded */]: ["Reset" /* Reset */]
+};
+var getInvoiceActions = (invoice) => {
+  return availableActions[invoice.status];
+};
+var InvoiceDetailHeaderMenu = ({ onEditInvoice }) => {
+  const viewState = useInvoiceDetail();
+  const { toViewInvoice } = useInvoiceNavigation();
+  const [openModal, setOpenModal] = useState90();
+  const onSuccessUpdateInvoice = useCallback85((updatedInvoice) => {
+    toViewInvoice(updatedInvoice);
+  }, [toViewInvoice]);
+  const onOpenChangeByMode = useCallback85(
+    (mode) => (isOpen = true) => {
+      if (isOpen) {
+        setOpenModal(mode);
+      } else {
+        setOpenModal(void 0);
+      }
+    },
+    []
+  );
+  const Trigger = useCallback85(() => {
+    return /* @__PURE__ */ jsx360(Button2, { icon: true, variant: "outlined", children: /* @__PURE__ */ jsx360(MenuIcon, { size: 14 }) });
+  }, []);
+  if (viewState.mode === "Create" /* Create */) return null;
+  const invoice = viewState.invoice;
+  const invoiceActions = getInvoiceActions(invoice);
+  if (!invoiceActions.length) return null;
+  return /* @__PURE__ */ jsxs227(Fragment59, { children: [
+    /* @__PURE__ */ jsx360(
+      DropdownMenu,
+      {
+        ariaLabel: "Additional invoice actions",
+        slots: { Trigger },
+        slotProps: { Dialog: { width: 160 } },
+        variant: "compact",
+        children: /* @__PURE__ */ jsxs227(MenuList, { children: [
+          invoiceActions.includes("Edit" /* Edit */) && /* @__PURE__ */ jsx360(MenuItem3, { onClick: onEditInvoice, children: /* @__PURE__ */ jsx360(Span, { size: "sm", children: "Edit details" }) }, "Edit" /* Edit */),
+          invoiceActions.includes("Refund" /* Refund */) && /* @__PURE__ */ jsx360(MenuItem3, { onClick: onOpenChangeByMode("Refund" /* Refund */), children: /* @__PURE__ */ jsx360(Span, { size: "sm", children: "Issue refund" }) }, "Refund" /* Refund */),
+          invoiceActions.includes("Void" /* Void */) && /* @__PURE__ */ jsx360(MenuItem3, { onClick: onOpenChangeByMode("Void" /* Void */), children: /* @__PURE__ */ jsx360(Span, { size: "sm", children: "Cancel/Void" }) }, "Void" /* Void */),
+          invoiceActions.includes("Writeoff" /* Writeoff */) && /* @__PURE__ */ jsx360(MenuItem3, { onClick: onOpenChangeByMode("Writeoff" /* Writeoff */), children: /* @__PURE__ */ jsx360(Span, { size: "sm", children: "Write off" }) }, "Writeoff" /* Writeoff */),
+          invoiceActions.includes("Reset" /* Reset */) && /* @__PURE__ */ jsx360(MenuItem3, { onClick: onOpenChangeByMode("Reset" /* Reset */), children: /* @__PURE__ */ jsx360(Span, { size: "sm", children: "Reset to sent" }) }, "Reset" /* Reset */)
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx360(
+      InvoiceRefundModal,
+      {
+        isOpen: openModal === "Refund" /* Refund */,
+        onOpenChange: onOpenChangeByMode("Refund" /* Refund */),
+        invoice,
+        onSuccess: onSuccessUpdateInvoice
+      }
+    ),
+    /* @__PURE__ */ jsx360(
+      InvoiceVoidModal,
+      {
+        isOpen: openModal === "Void" /* Void */,
+        onOpenChange: onOpenChangeByMode("Void" /* Void */),
+        invoiceId: invoice.id,
+        onSuccess: onSuccessUpdateInvoice
+      }
+    ),
+    /* @__PURE__ */ jsx360(
+      InvoiceWriteoffModal,
+      {
+        isOpen: openModal === "Writeoff" /* Writeoff */,
+        onOpenChange: onOpenChangeByMode("Writeoff" /* Writeoff */),
+        invoice,
+        onSuccess: onSuccessUpdateInvoice
+      }
+    ),
+    /* @__PURE__ */ jsx360(
+      InvoiceResetModal,
+      {
+        isOpen: openModal === "Reset" /* Reset */,
+        onOpenChange: onOpenChangeByMode("Reset" /* Reset */),
+        invoiceId: invoice.id,
+        onSuccess: onSuccessUpdateInvoice
+      }
+    )
+  ] });
+};
+
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { Fragment as Fragment58, jsx as jsx355, jsxs as jsxs226 } from "react/jsx-runtime";
+import { Fragment as Fragment60, jsx as jsx361, jsxs as jsxs228 } from "react/jsx-runtime";
 var InvoiceDetail = () => {
   const viewState = useInvoiceDetail();
-  const [isPaymentDrawerOpen, setIsPaymentDrawerOpen] = useState89(false);
-  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState89(false);
+  const [isPaymentDrawerOpen, setIsPaymentDrawerOpen] = useState91(false);
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState91(false);
   const { toViewInvoice, toInvoiceTable } = useInvoiceNavigation();
   const { addToast } = useLayerContext();
-  const formRef = useRef33(null);
-  const [isReadOnly, setIsReadOnly] = useState89(viewState.mode === "Update" /* Update */);
-  const onUpsertInvoiceSuccess = useCallback77((invoice) => {
+  const formRef = useRef35(null);
+  const [isReadOnly, setIsReadOnly] = useState91(viewState.mode === "Update" /* Update */);
+  const onUpsertInvoiceSuccess = useCallback86((invoice) => {
     const toastContent = viewState.mode === "Update" /* Update */ ? "Invoice updated successfully" : "Invoice created successfully";
     addToast({ content: toastContent, type: "success" });
     toViewInvoice(invoice);
     setIsReadOnly(true);
   }, [viewState.mode, addToast, toViewInvoice]);
-  const onUpsertInvoicePaymentSuccess = useCallback77((invoice, invoicePayment) => {
+  const onUpsertInvoicePaymentSuccess = useCallback86((invoice, invoicePayment) => {
     addToast({ content: "Invoice paid successfully", type: "success" });
     const updatedInvoice = updateInvoiceWithPayment(invoice, invoicePayment);
     toViewInvoice(updatedInvoice);
   }, [addToast, toViewInvoice]);
-  const onSubmit = useCallback77(() => {
+  const onSubmit = useCallback86(() => {
     var _a;
     return void ((_a = formRef.current) == null ? void 0 : _a.submit());
   }, []);
-  const [formState, setFormState] = useState89({
+  const [formState, setFormState] = useState91({
     isDirty: false,
     isSubmitting: false
   });
-  const onChangeFormState = useCallback77((nextState) => {
+  const onChangeFormState = useCallback86((nextState) => {
     setFormState(nextState);
   }, []);
-  const Header6 = useCallback77(() => {
-    return /* @__PURE__ */ jsx355(
+  const Header5 = useCallback86(() => {
+    return /* @__PURE__ */ jsx361(
       InvoiceDetailHeader,
       {
         onSubmit,
@@ -42795,17 +43598,17 @@ var InvoiceDetail = () => {
     );
   }, [onSubmit, isReadOnly, formState]);
   const hasChanges = !isReadOnly && formState.isDirty;
-  const onGoBack = useCallback77(() => {
+  const onGoBack = useCallback86(() => {
     if (hasChanges) {
       setIsDiscardChangesModalOpen(true);
     } else {
       toInvoiceTable();
     }
   }, [hasChanges, toInvoiceTable]);
-  return /* @__PURE__ */ jsxs226(Fragment58, { children: [
-    /* @__PURE__ */ jsxs226(BaseDetailView, { slots: { Header: Header6, BackIcon: hasChanges ? X_default : BackArrow_default }, name: "Invoice Detail View", onGoBack, children: [
-      viewState.mode === "Update" /* Update */ && /* @__PURE__ */ jsx355(InvoiceDetailSubHeader, { invoice: viewState.invoice }),
-      /* @__PURE__ */ jsx355(
+  return /* @__PURE__ */ jsxs228(Fragment60, { children: [
+    /* @__PURE__ */ jsxs228(BaseDetailView, { slots: { Header: Header5, BackIcon: hasChanges ? X_default : BackArrow_default }, name: "Invoice Detail View", onGoBack, children: [
+      viewState.mode === "Update" /* Update */ && /* @__PURE__ */ jsx361(InvoiceDetailSubHeader, { invoice: viewState.invoice }),
+      /* @__PURE__ */ jsx361(
         InvoiceForm,
         {
           isReadOnly,
@@ -42815,7 +43618,7 @@ var InvoiceDetail = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx355(
+    /* @__PURE__ */ jsx361(
       BaseConfirmationModal,
       {
         isOpen: isDiscardChangesModalOpen,
@@ -42827,15 +43630,15 @@ var InvoiceDetail = () => {
         cancelLabel: "Keep editing"
       }
     ),
-    viewState.mode === "Update" /* Update */ && /* @__PURE__ */ jsx355(Drawer, { isOpen: isPaymentDrawerOpen, onOpenChange: setIsPaymentDrawerOpen, children: ({ close: close2 }) => /* @__PURE__ */ jsxs226(VStack, { pb: "lg", gap: "lg", children: [
-      /* @__PURE__ */ jsx355(VStack, { pi: "md", children: /* @__PURE__ */ jsx355(
+    viewState.mode === "Update" /* Update */ && /* @__PURE__ */ jsx361(Drawer, { isOpen: isPaymentDrawerOpen, onOpenChange: setIsPaymentDrawerOpen, children: ({ close: close2 }) => /* @__PURE__ */ jsxs228(VStack, { pb: "lg", gap: "lg", children: [
+      /* @__PURE__ */ jsx361(VStack, { pi: "md", children: /* @__PURE__ */ jsx361(
         ModalTitleWithClose,
         {
-          heading: /* @__PURE__ */ jsx355(ModalHeading, { size: "lg", children: "Record invoice payment" }),
+          heading: /* @__PURE__ */ jsx361(ModalHeading, { size: "lg", children: "Record invoice payment" }),
           onClose: close2
         }
       ) }),
-      /* @__PURE__ */ jsx355(
+      /* @__PURE__ */ jsx361(
         InvoicePaymentForm,
         {
           onSuccess: (invoicePayment) => {
@@ -42852,73 +43655,60 @@ var InvoiceDetail = () => {
 var InvoiceDetailHeader = ({ onSubmit, formState, isReadOnly, setIsReadOnly, openInvoicePaymentDrawer }) => {
   const viewState = useInvoiceDetail();
   const { isSubmitting } = formState;
-  const MenuButton = useCallback77(() => {
-    return /* @__PURE__ */ jsx355(Button2, { icon: true, variant: "outlined", children: /* @__PURE__ */ jsx355(MenuIcon, { size: 14 }) });
-  }, []);
-  const saveButton = useMemo90(() => /* @__PURE__ */ jsxs226(Button2, { isPending: isSubmitting, onPress: onSubmit, children: [
+  const onEditInvoice = useCallback86(() => {
+    setIsReadOnly(false);
+  }, [setIsReadOnly]);
+  const saveButton = useMemo92(() => /* @__PURE__ */ jsxs228(Button2, { isPending: isSubmitting, onPress: onSubmit, children: [
     "Save",
-    /* @__PURE__ */ jsx355(Save2, { size: 14 })
+    /* @__PURE__ */ jsx361(Save2, { size: 14 })
   ] }), [isSubmitting, onSubmit]);
   if (viewState.mode === "Create" /* Create */) {
-    return /* @__PURE__ */ jsxs226(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
-      /* @__PURE__ */ jsx355(Heading2, { children: "Create Invoice" }),
+    return /* @__PURE__ */ jsxs228(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
+      /* @__PURE__ */ jsx361(Heading2, { children: "Create Invoice" }),
       saveButton
     ] });
   }
   const invoiceNumber = viewState.invoice.invoiceNumber;
   const headingContent = isReadOnly ? invoiceNumber ? `Invoice #${invoiceNumber}` : "View Invoice" : invoiceNumber ? `Editing Invoice #${invoiceNumber}` : "Editing Invoice";
   const canMarkAsPaid = viewState.mode === "Update" /* Update */ && (viewState.invoice.status === "SENT" /* Sent */ || viewState.invoice.status === "PARTIALLY_PAID" /* PartiallyPaid */);
-  return /* @__PURE__ */ jsxs226(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
-    /* @__PURE__ */ jsx355(Heading2, { children: headingContent }),
-    isReadOnly ? /* @__PURE__ */ jsxs226(HStack, { gap: "xs", children: [
-      canMarkAsPaid && /* @__PURE__ */ jsxs226(Button2, { onPress: openInvoicePaymentDrawer, children: [
+  return /* @__PURE__ */ jsxs228(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
+    /* @__PURE__ */ jsx361(Heading2, { children: headingContent }),
+    isReadOnly ? /* @__PURE__ */ jsxs228(HStack, { gap: "xs", children: [
+      canMarkAsPaid && /* @__PURE__ */ jsxs228(Button2, { onPress: openInvoicePaymentDrawer, children: [
         "Mark as paid",
-        /* @__PURE__ */ jsx355(HandCoins2, { size: 14 })
+        /* @__PURE__ */ jsx361(HandCoins2, { size: 14 })
       ] }),
-      /* @__PURE__ */ jsx355(
-        DropdownMenu,
-        {
-          ariaLabel: "Invoice actions",
-          slots: { Trigger: MenuButton },
-          slotProps: { Dialog: { width: 280 } },
-          children: /* @__PURE__ */ jsx355(MenuList, { children: /* @__PURE__ */ jsxs226(MenuItem3, { onClick: () => {
-            setIsReadOnly(false);
-          }, children: [
-            /* @__PURE__ */ jsx355(SquarePen, { size: 14 }),
-            /* @__PURE__ */ jsx355(Span, { size: "sm", children: "Edit invoice" })
-          ] }, "edit-invoice") })
-        }
-      )
+      /* @__PURE__ */ jsx361(InvoiceDetailHeaderMenu, { onEditInvoice })
     ] }) : saveButton
   ] });
 };
 var InvoiceDetailSubHeader = ({ invoice }) => {
   const { outstandingBalance, totalAmount } = invoice;
-  return /* @__PURE__ */ jsx355(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ jsxs226(HStack, { gap: "5xl", children: [
-    /* @__PURE__ */ jsx355(DataPoint, { label: "Balance due", children: /* @__PURE__ */ jsx355(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
-    /* @__PURE__ */ jsx355(DataPoint, { label: "Open balance", children: /* @__PURE__ */ jsx355(Span, { children: convertCentsToCurrency(totalAmount) }) }),
-    /* @__PURE__ */ jsx355(DataPoint, { label: "Status", children: /* @__PURE__ */ jsx355(InvoiceStatusCell, { invoice, inline: true }) })
+  return /* @__PURE__ */ jsx361(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ jsxs228(HStack, { gap: "5xl", children: [
+    /* @__PURE__ */ jsx361(DataPoint, { label: "Balance due", children: /* @__PURE__ */ jsx361(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
+    /* @__PURE__ */ jsx361(DataPoint, { label: "Open balance", children: /* @__PURE__ */ jsx361(Span, { children: convertCentsToCurrency(totalAmount) }) }),
+    /* @__PURE__ */ jsx361(DataPoint, { label: "Status", children: /* @__PURE__ */ jsx361(InvoiceStatusCell, { invoice, inline: true }) })
   ] }) });
 };
 
 // src/components/ui/Meter/Meter.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef28 } from "react";
 import { Meter as ReactAriaMeter } from "react-aria-components";
 import classNames95 from "classnames";
-import { jsx as jsx356, jsxs as jsxs227 } from "react/jsx-runtime";
+import { jsx as jsx362, jsxs as jsxs229 } from "react/jsx-runtime";
 var getClassnameForSubComponent = (className, suffix) => {
   return classNames95(`${METER_CLASS_NAME}__${suffix}`, className && `${className}__${suffix}`);
 };
 var METER_CLASS_NAME = "Layer__Meter";
-var Meter = forwardRef27(
+var Meter = forwardRef28(
   function Meter2(_a, ref) {
     var _b = _a, { className, label, meterOnly } = _b, restProps = __objRest(_b, ["className", "label", "meterOnly"]);
-    return /* @__PURE__ */ jsx356(ReactAriaMeter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: classNames95(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs227(VStack, { gap: "3xs", fluid: true, children: [
-      !meterOnly && /* @__PURE__ */ jsxs227(HStack, { justify: "space-between", children: [
-        /* @__PURE__ */ jsx356(Label, { slot: "label", children: label }),
-        /* @__PURE__ */ jsx356(Span, { slot: "value", children: valueText })
+    return /* @__PURE__ */ jsx362(ReactAriaMeter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: classNames95(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs229(VStack, { gap: "3xs", fluid: true, children: [
+      !meterOnly && /* @__PURE__ */ jsxs229(HStack, { justify: "space-between", children: [
+        /* @__PURE__ */ jsx362(Label, { slot: "label", children: label }),
+        /* @__PURE__ */ jsx362(Span, { slot: "value", children: valueText })
       ] }),
-      /* @__PURE__ */ jsx356(HStack, { slot: "bar", children: /* @__PURE__ */ jsxs227(
+      /* @__PURE__ */ jsx362(HStack, { slot: "bar", children: /* @__PURE__ */ jsxs229(
         "svg",
         {
           className: getClassnameForSubComponent(className, "svg"),
@@ -42927,7 +43717,7 @@ var Meter = forwardRef27(
           "aria-hidden": "true",
           focusable: "false",
           children: [
-            /* @__PURE__ */ jsx356(
+            /* @__PURE__ */ jsx362(
               "rect",
               {
                 className: getClassnameForSubComponent(className, "track"),
@@ -42937,7 +43727,7 @@ var Meter = forwardRef27(
                 height: "4"
               }
             ),
-            /* @__PURE__ */ jsx356(
+            /* @__PURE__ */ jsx362(
               "rect",
               {
                 className: getClassnameForSubComponent(className, "fill"),
@@ -42956,7 +43746,7 @@ var Meter = forwardRef27(
 
 // src/components/Invoices/InvoiceSummaryStats/InvoiceSummaryStats.tsx
 import { BigDecimal as BD9 } from "effect";
-import { jsx as jsx357, jsxs as jsxs228 } from "react/jsx-runtime";
+import { jsx as jsx363, jsxs as jsxs230 } from "react/jsx-runtime";
 var getPercentageOverdue = (sentTotal, overdueTotal) => {
   if (!sentTotal && !overdueTotal) return 50;
   if (!sentTotal) return 100;
@@ -42975,68 +43765,68 @@ var InvoiceSummaryStats = () => {
   const { overdueCount, overdueTotal, sentCount, sentTotal } = (_b = data == null ? void 0 : data.invoices) != null ? _b : {};
   const invoicesTotal = (overdueTotal || BigInt(0)) + (sentTotal || BigInt(0));
   const percentageOverdue = getPercentageOverdue(sentTotal, overdueTotal);
-  return /* @__PURE__ */ jsxs228(HStack, { className: "Layer__InvoiceSummaryStats__Container", gap: "lg", children: [
-    /* @__PURE__ */ jsxs228(VStack, { className: "Layer__InvoiceSummaryStats__Payments", gap: "3xs", children: [
-      /* @__PURE__ */ jsxs228(HStack, { align: "center", children: [
-        /* @__PURE__ */ jsx357(Span, { size: "sm", children: "Paid" }),
+  return /* @__PURE__ */ jsxs230(HStack, { className: "Layer__InvoiceSummaryStats__Container", gap: "lg", children: [
+    /* @__PURE__ */ jsxs230(VStack, { className: "Layer__InvoiceSummaryStats__Payments", gap: "3xs", children: [
+      /* @__PURE__ */ jsxs230(HStack, { align: "center", children: [
+        /* @__PURE__ */ jsx363(Span, { size: "sm", children: "Paid" }),
         "\xA0",
-        /* @__PURE__ */ jsx357(Span, { size: "sm", variant: "subtle", children: "last 30 days" })
+        /* @__PURE__ */ jsx363(Span, { size: "sm", variant: "subtle", children: "last 30 days" })
       ] }),
-      /* @__PURE__ */ jsxs228(HStack, { align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx357(Badge, { variant: "success" /* SUCCESS */, size: "xs" /* EXTRA_SMALL */, icon: /* @__PURE__ */ jsx357(Check_default, { size: 11 }), iconOnly: true }),
-        /* @__PURE__ */ jsx357(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "24px", width: "120px", children: /* @__PURE__ */ jsx357(Span, { size: "xl", children: invoicePaymentsTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(invoicePaymentsTotal), { mode: "currency" }) }) })
+      /* @__PURE__ */ jsxs230(HStack, { align: "center", gap: "xs", children: [
+        /* @__PURE__ */ jsx363(Badge, { variant: "success" /* SUCCESS */, size: "xs" /* EXTRA_SMALL */, icon: /* @__PURE__ */ jsx363(Check_default, { size: 11 }), iconOnly: true }),
+        /* @__PURE__ */ jsx363(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "24px", width: "120px", children: /* @__PURE__ */ jsx363(Span, { size: "xl", children: invoicePaymentsTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(invoicePaymentsTotal), { mode: "currency" }) }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs228(VStack, { gap: "sm", fluid: true, children: [
-      /* @__PURE__ */ jsxs228(HStack, { gap: "md", align: "end", children: [
-        /* @__PURE__ */ jsxs228(HStack, { align: "center", children: [
-          /* @__PURE__ */ jsx357(Span, { size: "sm", pbe: "3xs", children: "Owed to you" }),
+    /* @__PURE__ */ jsxs230(VStack, { gap: "sm", fluid: true, children: [
+      /* @__PURE__ */ jsxs230(HStack, { gap: "md", align: "end", children: [
+        /* @__PURE__ */ jsxs230(HStack, { align: "center", children: [
+          /* @__PURE__ */ jsx363(Span, { size: "sm", pbe: "3xs", children: "Owed to you" }),
           "\xA0",
-          /* @__PURE__ */ jsx357(Span, { size: "sm", pbe: "3xs", variant: "subtle", children: "last 12 months" })
+          /* @__PURE__ */ jsx363(Span, { size: "sm", pbe: "3xs", variant: "subtle", children: "last 12 months" })
         ] }),
-        /* @__PURE__ */ jsx357(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "24px", width: "120px", children: /* @__PURE__ */ jsx357(Span, { size: "xl", children: invoicesTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(invoicesTotal), { mode: "currency" }) }) })
+        /* @__PURE__ */ jsx363(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "24px", width: "120px", children: /* @__PURE__ */ jsx363(Span, { size: "xl", children: invoicesTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(invoicesTotal), { mode: "currency" }) }) })
       ] }),
-      /* @__PURE__ */ jsxs228(HStack, { justify: "space-between", children: [
-        /* @__PURE__ */ jsxs228(HStack, { gap: "xs", align: "center", children: [
-          /* @__PURE__ */ jsx357(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "17px", width: "80px", children: /* @__PURE__ */ jsx357(Span, { size: "md", children: overdueTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(overdueTotal), { mode: "currency" }) }) }),
-          !showSkeleton && overdueCount !== void 0 ? /* @__PURE__ */ jsx357(Badge, { variant: "warning" /* WARNING */, size: "small" /* SMALL */, children: `Overdue invoices: ${overdueCount}` }) : /* @__PURE__ */ jsx357(BadgeLoader, { variant: "warning" /* WARNING */, showLoading: true })
+      /* @__PURE__ */ jsxs230(HStack, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxs230(HStack, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx363(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "17px", width: "80px", children: /* @__PURE__ */ jsx363(Span, { size: "md", children: overdueTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(overdueTotal), { mode: "currency" }) }) }),
+          !showSkeleton && overdueCount !== void 0 ? /* @__PURE__ */ jsx363(Badge, { variant: "warning" /* WARNING */, size: "small" /* SMALL */, children: `Overdue invoices: ${overdueCount}` }) : /* @__PURE__ */ jsx363(BadgeLoader, { variant: "warning" /* WARNING */, showLoading: true })
         ] }),
-        /* @__PURE__ */ jsxs228(HStack, { gap: "xs", align: "center", children: [
-          !showSkeleton && sentCount !== void 0 ? /* @__PURE__ */ jsx357(Badge, { variant: "info" /* INFO */, size: "small" /* SMALL */, children: `Upcoming invoices: ${sentCount}` }) : /* @__PURE__ */ jsx357(BadgeLoader, { variant: "info" /* INFO */, showLoading: true }),
-          /* @__PURE__ */ jsx357(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "17px", width: "80px", children: /* @__PURE__ */ jsx357(Span, { size: "md", children: sentTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(sentTotal), { mode: "currency" }) }) })
+        /* @__PURE__ */ jsxs230(HStack, { gap: "xs", align: "center", children: [
+          !showSkeleton && sentCount !== void 0 ? /* @__PURE__ */ jsx363(Badge, { variant: "info" /* INFO */, size: "small" /* SMALL */, children: `Upcoming invoices: ${sentCount}` }) : /* @__PURE__ */ jsx363(BadgeLoader, { variant: "info" /* INFO */, showLoading: true }),
+          /* @__PURE__ */ jsx363(FallbackWithSkeletonLoader, { isLoading: showSkeleton, height: "17px", width: "80px", children: /* @__PURE__ */ jsx363(Span, { size: "md", children: sentTotal !== void 0 && formatBigDecimalToString(convertBigIntCentsToBigDecimal(sentTotal), { mode: "currency" }) }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx357(Meter, { label: "Invoices meter", minValue: 0, maxValue: 100, value: percentageOverdue, meterOnly: true, className: "Layer__InvoiceSummaryStats__Meter" })
+      /* @__PURE__ */ jsx363(Meter, { label: "Invoices meter", minValue: 0, maxValue: 100, value: percentageOverdue, meterOnly: true, className: "Layer__InvoiceSummaryStats__Meter" })
     ] })
   ] });
 };
 
 // src/components/Invoices/InvoiceOverview/InvoiceOverview.tsx
-import { jsx as jsx358, jsxs as jsxs229 } from "react/jsx-runtime";
+import { jsx as jsx364, jsxs as jsxs231 } from "react/jsx-runtime";
 var InvoiceOverview = () => {
-  return /* @__PURE__ */ jsxs229(VStack, { children: [
-    /* @__PURE__ */ jsx358(InvoiceSummaryStats, {}),
-    /* @__PURE__ */ jsx358(InvoiceTable, {})
+  return /* @__PURE__ */ jsxs231(VStack, { children: [
+    /* @__PURE__ */ jsx364(InvoiceSummaryStats, {}),
+    /* @__PURE__ */ jsx364(InvoiceTable, {})
   ] });
 };
 
 // src/components/Invoices/Invoices.tsx
-import { jsx as jsx359 } from "react/jsx-runtime";
+import { jsx as jsx365 } from "react/jsx-runtime";
 var unstable_Invoices = ({ showTitle = true, stringOverrides }) => {
-  return /* @__PURE__ */ jsx359(InvoiceStoreProvider, { children: /* @__PURE__ */ jsx359(View, { title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices", showHeader: showTitle, children: /* @__PURE__ */ jsx359(InvoicesContent, {}) }) });
+  return /* @__PURE__ */ jsx365(InvoiceStoreProvider, { children: /* @__PURE__ */ jsx365(View, { title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices", showHeader: showTitle, children: /* @__PURE__ */ jsx365(InvoicesContent, {}) }) });
 };
 var InvoicesContent = () => {
   const routeState = useInvoiceRouteState();
-  return routeState.route === "Detail" /* Detail */ ? /* @__PURE__ */ jsx359(InvoiceDetail, {}) : /* @__PURE__ */ jsx359(InvoiceOverview, {});
+  return routeState.route === "Detail" /* Detail */ ? /* @__PURE__ */ jsx365(InvoiceDetail, {}) : /* @__PURE__ */ jsx365(InvoiceOverview, {});
 };
 
 // src/providers/BankTransactionsProvider/BankTransactionsProvider.tsx
-import { jsx as jsx360 } from "react/jsx-runtime";
+import { jsx as jsx366 } from "react/jsx-runtime";
 var BankTransactionsProvider = ({
   children
 }) => {
   const bankTransactionsContextData = useAugmentedBankTransactions();
-  return /* @__PURE__ */ jsx360(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
+  return /* @__PURE__ */ jsx366(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
 };
 export {
   AccountingOverview,