@layerfi/components 0.1.88-alpha.3 → 0.1.88-alpha.4

package/dist/cjs/index.cjs

@@ -119,7 +119,7 @@ var import_react16 = require("react");
 var import_react14 = require("react");
 
 // package.json
-var version = "0.1.88-alpha.3";
+var version = "0.1.88-alpha.4";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -195,7 +195,7 @@ var postWithFormData = (url, formData, baseUrl, accessToken) => {
 var handleResponse = (res) => __async(void 0, null, function* () {
   var _a;
   if (!res.ok) {
-    const errors = yield tryToReadErrorsFromResponse();
+    const errors = yield tryToReadErrorsFromResponse(res);
     const apiError = new APIError(
       "An error occurred while fetching the data from API.",
       res.status,
@@ -249,22 +249,26 @@ function toSnakeCase(input) {
   const segments = (_a = input.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)) != null ? _a : [];
   return segments.map((segment) => segment.toLowerCase()).join("_");
 }
+function isStringArray(input) {
+  return Array.isArray(input) && (input.length === 0 || input.every((item) => typeof item === "string"));
+}
 function toDefinedSearchParameters(input) {
-  const definedParameters = Object.fromEntries(
-    Object.entries(input).map(([key, value]) => {
-      if (value === null || value === void 0) {
-        return null;
-      }
-      if (value instanceof Date) {
-        return [key, value.toISOString()];
-      }
-      if (typeof value !== "string") {
-        return [key, String(value)];
-      }
-      return [key, value];
-    }).filter((entry) => entry !== null).map(([key, value]) => [toSnakeCase(key), value])
-  );
-  return new URLSearchParams(definedParameters);
+  const definedParameterPairs = Object.entries(input).flatMap(([key, value]) => {
+    if (value === null || value === void 0) {
+      return [];
+    }
+    if (value instanceof Date) {
+      return [[key, value.toISOString()]];
+    }
+    if (isStringArray(value)) {
+      return value.map((item) => [key, item]);
+    }
+    if (typeof value !== "string") {
+      return [[key, String(value)]];
+    }
+    return [[key, value]];
+  }).filter((entry) => entry !== null).map(([key, value]) => [toSnakeCase(key), value]);
+  return new URLSearchParams(definedParameterPairs);
 }
 
 // src/api/layer/balance_sheet.ts
@@ -337,6 +341,20 @@ var uploadBankTransactionDocument = (baseUrl, accessToken) => ({
   );
 };
 
+// src/api/layer/bills.ts
+var getBills = get(
+  ({ businessId, startDate, endDate, status, vendorId, cursor, limit = 15 }) => `/v1/businesses/${businessId}/bills?${vendorId ? `&vendor_id=${vendorId}` : ""}${cursor ? `&cursor=${cursor}` : ""}${startDate ? `&received_at_start=${startDate}` : ""}${endDate ? `&received_at_end=${endDate}` : ""}${status ? `&status=${status}` : ""}&limit=${limit}&sort_by=received_at&sort_order=DESC`
+);
+var getBill = get(
+  ({ businessId, billId }) => `/v1/businesses/${businessId}/bills/${billId}`
+);
+var updateBill = post(
+  ({ businessId, billId }) => `/v1/businesses/${businessId}/bills/${billId}/update`
+);
+var createBillPayment = post(
+  ({ businessId }) => `/v1/businesses/${businessId}/bills/bill-payments`
+);
+
 // src/api/layer/business.ts
 var getBusiness = get(({ businessId }) => `/v1/businesses/${businessId}`);
 
@@ -510,6 +528,11 @@ var completeTaskWithUpload = (baseUrl, accessToken) => ({
   );
 };
 
+// src/api/layer/vendors.ts
+var getVendors = get(
+  ({ businessId }) => `/v1/businesses/${businessId}/vendors`
+);
+
 // src/api/layer.ts
 var Layer = {
   getBusiness,
@@ -526,6 +549,10 @@ var Layer = {
   archiveBankTransactionDocument,
   updateBankTransactionMetadata,
   uploadBankTransactionDocument,
+  getBills,
+  getBill,
+  updateBill,
+  createBillPayment,
   getCategories,
   getChartOfAccounts,
   getLedgerAccountBalances,
@@ -563,7 +590,8 @@ var Layer = {
   statusOfSyncFromQuickbooks,
   statusOfQuickbooksConnection,
   initQuickbooksOAuth,
-  unlinkQuickbooksConnection
+  unlinkQuickbooksConnection,
+  getVendors
 };
 
 // src/components/GlobalWidgets/GlobalWidgets.tsx
@@ -703,7 +731,7 @@ var useLayerContext = () => (0, import_react4.useContext)(LayerContext);
 var import_classnames = __toESM(require("classnames"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Toast = (props) => {
-  const { id, content, isExiting } = props;
+  const { id, content, isExiting, type = "default" } = props;
   const { removeToast } = useLayerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
@@ -712,7 +740,7 @@ var Toast = (props) => {
       className: (0, import_classnames.default)("Layer__toast", {
         enter: !isExiting,
         exit: isExiting
-      }),
+      }, `Layer__toast--${type}`),
       onClick: () => removeToast(props),
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: content })
     }
@@ -3546,7 +3574,7 @@ var RetryButton = (_a) => {
     className,
     processing,
     disabled,
-    error: _error,
+    error,
     children
   } = _b, props = __objRest(_b, [
     "className",
@@ -3568,6 +3596,7 @@ var RetryButton = (_a) => {
       disabled: processing || disabled,
       rightIcon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RefreshCcw_default, { size: 12 }),
       justify: "center",
+      tooltip: error,
       children
     })
   );
@@ -4463,6 +4492,7 @@ var AlertOctagon = (_a) => {
 var AlertOctagon_default = AlertOctagon;
 
 // src/components/DataState/DataState.tsx
+var import_classnames18 = __toESM(require("classnames"));
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var getIcon = (status, icon) => {
   switch (status) {
@@ -4482,9 +4512,14 @@ var DataState = ({
   description,
   onRefresh,
   isLoading,
-  icon
+  icon,
+  spacing
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "Layer__data-state", children: [
+  const baseClassName = (0, import_classnames18.default)(
+    "Layer__data-state",
+    spacing && "Layer__data-state--spacing"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: baseClassName, children: [
     getIcon(status, icon),
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       Text,
@@ -4775,12 +4810,12 @@ var MoreVertical_default = MoreVertical;
 
 // src/components/HoverMenu/HoverMenu.tsx
 var import_react30 = require("react");
-var import_classnames18 = __toESM(require("classnames"));
+var import_classnames19 = __toESM(require("classnames"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var HoverMenu = ({ children, config }) => {
   const [openMenu, setOpenMenu] = (0, import_react30.useState)(false);
   const hoverMenuRef = (0, import_react30.useRef)(null);
-  const hoverMenuClassName = (0, import_classnames18.default)(
+  const hoverMenuClassName = (0, import_classnames19.default)(
     "Layer__hover-menu",
     openMenu && "Layer__hover-menu--open"
   );
@@ -4833,14 +4868,14 @@ var HoverMenu = ({ children, config }) => {
 };
 
 // src/components/LinkedAccountOptions/LinkedAccountOptions.tsx
-var import_classnames19 = __toESM(require("classnames"));
+var import_classnames20 = __toESM(require("classnames"));
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var LinkedAccountOptions = ({
   children,
   config,
   showLedgerBalance
 }) => {
-  const linkedAccountOptionsClassName = (0, import_classnames19.default)(
+  const linkedAccountOptionsClassName = (0, import_classnames20.default)(
     "Layer__linked-accounts__options",
     showLedgerBalance == false && "--hide-ledger-balance"
   );
@@ -5172,14 +5207,14 @@ var centsToDollars = (cents = NaN) => isNaN(cents) ? "-.--" : formatter.format(c
 var dollarsToCents = (dollars = "") => Math.round(parseFloat(dollars) * 100);
 
 // src/components/Pill/Pill.tsx
-var import_classnames20 = __toESM(require("classnames"));
+var import_classnames21 = __toESM(require("classnames"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var Pill = ({ children, kind = "default", onHover, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   "span",
   {
     onMouseOver: onHover,
     onClick,
-    className: (0, import_classnames20.default)(`Layer__pill Layer__pill--${kind}`, onHover || onClick ? "Layer__pill--actionable" : ""),
+    className: (0, import_classnames21.default)(`Layer__pill Layer__pill--${kind}`, onHover || onClick ? "Layer__pill--actionable" : ""),
     children
   }
 );
@@ -5196,7 +5231,7 @@ var LinkedAccountPill = ({ text, config }) => {
 };
 
 // src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
-var import_classnames21 = __toESM(require("classnames"));
+var import_classnames22 = __toESM(require("classnames"));
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "account-number", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Text, { size: "sm", children: [
   "\u2022\u2022\u2022",
@@ -5209,14 +5244,14 @@ var LinkedAccountThumb = ({
   pillConfig
 }) => {
   var _a, _b, _c, _d, _e, _f;
-  const linkedAccountThumbClassName = (0, import_classnames21.default)(
+  const linkedAccountThumbClassName = (0, import_classnames22.default)(
     "Layer__linked-account-thumb",
     asWidget && "--as-widget",
     account.is_syncing && "--is-syncing",
     account.is_syncing && "skeleton-loader",
     showLedgerBalance && "--show-ledger-balance"
   );
-  const linkedAccountInfoClassName = (0, import_classnames21.default)(
+  const linkedAccountInfoClassName = (0, import_classnames22.default)(
     "topbar",
     account.is_syncing && "--is-syncing",
     !(showLedgerBalance || account.is_syncing) && "--hide-ledger-balance"
@@ -5264,7 +5299,7 @@ var LinkedAccountThumb = ({
           Text,
           {
             as: "span",
-            className: (0, import_classnames21.default)(
+            className: (0, import_classnames22.default)(
               "account-balance-text",
               !showLedgerBalance && "--hide-ledger-balance"
             ),
@@ -5425,7 +5460,7 @@ var LinkedAccountItemThumb = ({
 };
 
 // src/components/LinkedAccounts/LinkedAccountsContent.tsx
-var import_classnames22 = __toESM(require("classnames"));
+var import_classnames23 = __toESM(require("classnames"));
 
 // src/components/LinkedAccounts/ConfirmationModal/LinkedAccountsConfirmationModal.tsx
 var import_react39 = require("react");
@@ -5923,7 +5958,7 @@ var LinkedAccountsContent = ({
   showBreakConnection
 }) => {
   const { data, addConnection } = (0, import_react40.useContext)(LinkedAccountsContext);
-  const linkedAccountsNewAccountClassName = (0, import_classnames22.default)(
+  const linkedAccountsNewAccountClassName = (0, import_classnames23.default)(
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget",
     showLedgerBalance && "--show-ledger-balance",
@@ -5999,7 +6034,7 @@ var isDateAllowedToBrowse = (date, business) => {
 var import_react45 = require("react");
 
 // src/components/Input/Input.tsx
-var import_classnames23 = __toESM(require("classnames"));
+var import_classnames24 = __toESM(require("classnames"));
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var Input = (_a) => {
   var _b = _a, {
@@ -6013,7 +6048,7 @@ var Input = (_a) => {
     "errorMessage",
     "leftText"
   ]);
-  const baseClassName = (0, import_classnames23.default)(
+  const baseClassName = (0, import_classnames24.default)(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
@@ -6029,7 +6064,7 @@ var Input = (_a) => {
 };
 
 // src/components/Input/InputGroup.tsx
-var import_classnames24 = __toESM(require("classnames"));
+var import_classnames25 = __toESM(require("classnames"));
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var InputGroup = ({
   label,
@@ -6038,7 +6073,7 @@ var InputGroup = ({
   inline,
   children
 }) => {
-  const baseClassName = (0, import_classnames24.default)(
+  const baseClassName = (0, import_classnames25.default)(
     "Layer__input-group",
     className,
     inline && "Layer__input-group--inline"
@@ -6215,7 +6250,7 @@ var ChevronDownFill = (_a) => {
 var ChevronDownFill_default = ChevronDownFill;
 
 // src/components/Input/Select.tsx
-var import_classnames25 = __toESM(require("classnames"));
+var import_classnames26 = __toESM(require("classnames"));
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var Select = ({
   name,
@@ -6229,7 +6264,7 @@ var Select = ({
   isInvalid,
   errorMessage
 }) => {
-  const baseClassName = (0, import_classnames25.default)(
+  const baseClassName = (0, import_classnames26.default)(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -6257,7 +6292,7 @@ var Select = ({
 };
 
 // src/components/Input/InputWithBadge.tsx
-var import_classnames26 = __toESM(require("classnames"));
+var import_classnames27 = __toESM(require("classnames"));
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var InputWithBadge = (_a) => {
   var _b = _a, {
@@ -6275,7 +6310,7 @@ var InputWithBadge = (_a) => {
     "badge",
     "variant"
   ]);
-  const baseClassName = (0, import_classnames26.default)(
+  const baseClassName = (0, import_classnames27.default)(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
@@ -6296,7 +6331,7 @@ var InputWithBadge = (_a) => {
 // src/components/Input/MultiSelect.tsx
 var import_react43 = require("react");
 var import_react_select2 = __toESM(require("react-select"));
-var import_classnames27 = __toESM(require("classnames"));
+var import_classnames28 = __toESM(require("classnames"));
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var MultiSelect = ({
   name,
@@ -6312,7 +6347,7 @@ var MultiSelect = ({
   errorMessage,
   styles
 }) => {
-  const baseClassName = (0, import_classnames27.default)(
+  const baseClassName = (0, import_classnames28.default)(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -6344,7 +6379,7 @@ var MultiSelect = ({
 };
 
 // src/components/Input/AmountInput.tsx
-var import_classnames28 = __toESM(require("classnames"));
+var import_classnames29 = __toESM(require("classnames"));
 var import_react_currency_input_field = __toESM(require("react-currency-input-field"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var AmountInput = (_a) => {
@@ -6363,7 +6398,7 @@ var AmountInput = (_a) => {
     "isInvalid",
     "placeholder"
   ]);
-  const baseClassName = (0, import_classnames28.default)(
+  const baseClassName = (0, import_classnames29.default)(
     "Layer__input Layer__amount-input",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
@@ -6481,7 +6516,7 @@ var DatePickerOptions = ({
 };
 
 // src/components/DatePicker/DatePicker.tsx
-var import_classnames29 = __toESM(require("classnames"));
+var import_classnames30 = __toESM(require("classnames"));
 var import_date_fns6 = require("date-fns");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var ReactDatePicker = RDP.default.default || RDP.default || RDP;
@@ -6556,21 +6591,21 @@ var DatePicker = (_a) => {
     return [selected[0], null];
   }, [selected, displayMode]);
   const { isDesktop } = useSizeClass();
-  const wrapperClassNames = (0, import_classnames29.default)(
+  const wrapperClassNames = (0, import_classnames30.default)(
     "Layer__datepicker__wrapper",
     displayMode === "timePicker" && "Layer__datepicker__time__wrapper",
     showNavigationArrows(navigateArrows, isDesktop) && "Layer__datepicker__wrapper--arrows"
   );
-  const datePickerWrapperClassNames = (0, import_classnames29.default)(
+  const datePickerWrapperClassNames = (0, import_classnames30.default)(
     "Layer__datepicker",
     displayMode === "timePicker" && "Layer__datepicker__time",
     wrapperClassName
   );
-  const calendarClassNames = (0, import_classnames29.default)(
+  const calendarClassNames = (0, import_classnames30.default)(
     "Layer__datepicker__calendar",
     calendarClassName
   );
-  const popperClassNames = (0, import_classnames29.default)(
+  const popperClassNames = (0, import_classnames30.default)(
     "Layer__datepicker__popper",
     displayMode === "timePicker" && "Layer__datepicker__time__popper",
     popperClassName
@@ -6710,11 +6745,8 @@ var DatePicker = (_a) => {
           }
         },
         portalId: "Layer__datepicker__portal",
-        onFocus: (e) => e.target.readOnly = true,
-        onInputClick: () => {
-          if (pickerRef.current && !isDesktop) {
-            pickerRef.current.setOpen(!pickerRef.current.isCalendarOpen());
-          }
+        onFocus: (e) => {
+          e.target.blur();
         },
         disabled
       }, props), {
@@ -6742,7 +6774,7 @@ var DatePicker = (_a) => {
         Button,
         {
           "aria-label": "Previous Date",
-          className: (0, import_classnames29.default)(
+          className: (0, import_classnames30.default)(
             "Layer__datepicker__prev-button",
             isBeforeMinDate && "Layer__datepicker__button--disabled"
           ),
@@ -6757,7 +6789,7 @@ var DatePicker = (_a) => {
         {
           "aria-label": "Next Date",
           variant: "secondary" /* secondary */,
-          className: (0, import_classnames29.default)(
+          className: (0, import_classnames30.default)(
             "Layer__datepicker__next-button",
             isTodayOrAfter ? "Layer__datepicker__button--disabled" : void 0
           ),
@@ -7017,7 +7049,7 @@ var convertNumberToCurrency = (amount) => {
 var convertCurrencyToNumber = (amount) => amount.replace("$", "").replace(",", "").replace(/[^\d.]/g, "").replace(/(?!^)-/g, "").replace(/(\..*)\./g, "$1").replace(/(\.\d{2})\d+/, "$1").replace(/^0(?!\.)/, "");
 var convertToCents = (amount) => {
   try {
-    if (amount === void 0) {
+    if (amount === void 0 || amount === null) {
       return void 0;
     }
     return Math.round(Number(amount) * 100);
@@ -7661,7 +7693,7 @@ var import_react51 = require("react");
 var import_react50 = require("react");
 
 // src/components/ActionableList/ActionableList.tsx
-var import_classnames30 = __toESM(require("classnames"));
+var import_classnames31 = __toESM(require("classnames"));
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var ActionableList = ({
   options,
@@ -7674,7 +7706,7 @@ var ActionableList = ({
     {
       role: "button",
       onClick: () => onClick(x),
-      className: (0, import_classnames30.default)(
+      className: (0, import_classnames31.default)(
         x.secondary && "Layer__actionable-list-item--secondary",
         x.asLink && "Layer__actionable-list-item--as-link",
         selectedId === x.id && "Layer__actionable-list__item--selected"
@@ -7816,7 +7848,7 @@ var BusinessCategories = ({
 };
 
 // src/components/CategorySelect/CategorySelectDrawer.tsx
-var import_classnames31 = __toESM(require("classnames"));
+var import_classnames32 = __toESM(require("classnames"));
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var CategorySelectDrawer = ({
   onSelect,
@@ -7833,7 +7865,7 @@ var CategorySelectDrawer = ({
     "button",
     {
       "aria-label": "Select category",
-      className: (0, import_classnames31.default)(
+      className: (0, import_classnames32.default)(
         "Layer__category-menu__drawer-btn",
         selected && "Layer__category-menu__drawer-btn--selected"
       ),
@@ -7882,7 +7914,7 @@ var CategorySelectDrawerContent = ({
 };
 
 // src/components/CategorySelect/CategorySelect.tsx
-var import_classnames32 = __toESM(require("classnames"));
+var import_classnames33 = __toESM(require("classnames"));
 var import_date_fns10 = require("date-fns");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var mapCategoryToOption2 = (category) => {
@@ -7934,7 +7966,7 @@ var GroupHeading = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     import_react_select3.components.GroupHeading,
     __spreadValues({
-      className: (0, import_classnames32.default)(
+      className: (0, import_classnames33.default)(
         props.className,
         props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
       )
@@ -8447,7 +8479,7 @@ var Eye = (_a) => {
 var Eye_default = Eye;
 
 // src/components/FileThumb/FileThumb.tsx
-var import_classnames33 = __toESM(require("classnames"));
+var import_classnames34 = __toESM(require("classnames"));
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var FileThumb = ({
   url,
@@ -8466,7 +8498,7 @@ var FileThumb = ({
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
     "div",
     {
-      className: (0, import_classnames33.default)(
+      className: (0, import_classnames34.default)(
         "Layer__file-thumb",
         floatingActions && "Layer__file-thumb--floating"
       ),
@@ -8499,7 +8531,7 @@ var FileThumb = ({
         enableOpen || enableDownload || onDelete ? /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
           "div",
           {
-            className: (0, import_classnames33.default)(
+            className: (0, import_classnames34.default)(
               "Layer__file-thumb__actions",
               floatingActions && "Layer__file-thumb__actions--floating"
             ),
@@ -8657,7 +8689,7 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-var import_classnames34 = __toESM(require("classnames"));
+var import_classnames35 = __toESM(require("classnames"));
 var import_date_fns13 = require("date-fns");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var MatchForm = ({
@@ -8686,7 +8718,7 @@ var MatchForm = ({
       return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
         "div",
         {
-          className: (0, import_classnames34.default)(
+          className: (0, import_classnames35.default)(
             `${classNamePrefix}__match-row`,
             match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
           ),
@@ -8763,7 +8795,7 @@ var MatchForm = ({
 };
 
 // src/components/MatchForm/MatchFormMobile.tsx
-var import_classnames35 = __toESM(require("classnames"));
+var import_classnames36 = __toESM(require("classnames"));
 var import_date_fns14 = require("date-fns");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var MatchFormMobile = ({
@@ -8779,7 +8811,7 @@ var MatchFormMobile = ({
       return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
         "div",
         {
-          className: (0, import_classnames35.default)(
+          className: (0, import_classnames36.default)(
             `${classNamePrefix}__match-item`,
             match.id === selectedMatchId ? `${classNamePrefix}__match-item--selected` : ""
           ),
@@ -8840,7 +8872,7 @@ var MatchFormMobile = ({
 };
 
 // src/components/Textarea/Textarea.tsx
-var import_classnames36 = __toESM(require("classnames"));
+var import_classnames37 = __toESM(require("classnames"));
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var Textarea = (_a) => {
   var _b = _a, {
@@ -8852,7 +8884,7 @@ var Textarea = (_a) => {
     "isInvalid",
     "errorMessage"
   ]);
-  const baseClassName = (0, import_classnames36.default)(
+  const baseClassName = (0, import_classnames37.default)(
     "Layer__textarea",
     isInvalid ? "Layer__textarea--error" : "",
     className
@@ -8865,7 +8897,7 @@ var Textarea = (_a) => {
 
 // src/components/Toggle/Toggle.tsx
 var import_react55 = require("react");
-var import_classnames37 = __toESM(require("classnames"));
+var import_classnames38 = __toESM(require("classnames"));
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var import_react56 = require("react");
 var Toggle = ({
@@ -8886,7 +8918,7 @@ var Toggle = ({
       setCurrentWidth(c.width);
     }
   });
-  const baseClassName = (0, import_classnames37.default)(
+  const baseClassName = (0, import_classnames38.default)(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -8971,7 +9003,7 @@ var ToggleOption = ({
   style,
   index
 }) => {
-  const optionClassName = (0, import_classnames37.default)("Layer__toggle-option", {
+  const optionClassName = (0, import_classnames38.default)("Layer__toggle-option", {
     "Layer__toggle-option--active": checked
   });
   if (disabled) {
@@ -9136,7 +9168,7 @@ var Notification = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_classnames38 = __toESM(require("classnames"));
+var import_classnames39 = __toESM(require("classnames"));
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var isAlreadyMatched2 = (bankTransaction) => {
   var _a;
@@ -9450,7 +9482,7 @@ var ExpandedBankTransactionRow = (0, import_react58.forwardRef)(
                   /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                     "div",
                     {
-                      className: (0, import_classnames38.default)(
+                      className: (0, import_classnames39.default)(
                         `${className}__match`,
                         `${className}__content-panel`,
                         purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
@@ -9474,7 +9506,7 @@ var ExpandedBankTransactionRow = (0, import_react58.forwardRef)(
                   /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                     "div",
                     {
-                      className: (0, import_classnames38.default)(
+                      className: (0, import_classnames39.default)(
                         `${className}__splits`,
                         `${className}__content-panel`,
                         purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
@@ -9668,7 +9700,7 @@ var SplitTooltipDetails = ({
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_classnames39 = __toESM(require("classnames"));
+var import_classnames40 = __toESM(require("classnames"));
 var import_date_fns15 = require("date-fns");
 var import_jsx_runtime116 = require("react/jsx-runtime");
 var extractDescriptionForSplit = (category) => {
@@ -9781,7 +9813,7 @@ var BankTransactionRow = ({
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames39.default)(
+  const rowClassName = (0, import_classnames40.default)(
     className,
     bankTransaction.recently_categorized && editable && shouldHideAfterCategorize(bankTransaction) ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -9859,7 +9891,7 @@ var BankTransactionRow = ({
       /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
         "td",
         {
-          className: (0, import_classnames39.default)(
+          className: (0, import_classnames40.default)(
             "Layer__table-cell",
             "Layer__table-cell__category-col",
             `${className}__actions-cell`,
@@ -10042,7 +10074,7 @@ var Assignment = ({ bankTransaction }) => {
 };
 
 // src/components/BankTransactionList/BankTransactionListItem.tsx
-var import_classnames40 = __toESM(require("classnames"));
+var import_classnames41 = __toESM(require("classnames"));
 var import_date_fns17 = require("date-fns");
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var BankTransactionListItem = ({
@@ -10114,7 +10146,7 @@ var BankTransactionListItem = ({
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames40.default)(
+  const rowClassName = (0, import_classnames41.default)(
     className,
     bankTransaction.recently_categorized && editable && shouldHideAfterCategorize(bankTransaction) ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -10362,7 +10394,7 @@ var MemoTextProvider = ({
 };
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
-var import_classnames41 = __toESM(require("classnames"));
+var import_classnames42 = __toESM(require("classnames"));
 var import_jsx_runtime122 = require("react/jsx-runtime");
 var BusinessForm = ({
   bankTransaction,
@@ -10496,7 +10528,7 @@ var BusinessForm = ({
     /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       "div",
       {
-        className: (0, import_classnames41.default)(
+        className: (0, import_classnames42.default)(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -10558,7 +10590,7 @@ var PersonalCategories = /* @__PURE__ */ ((PersonalCategories2) => {
 })(PersonalCategories || {});
 
 // src/components/BankTransactionMobileList/PersonalForm.tsx
-var import_classnames42 = __toESM(require("classnames"));
+var import_classnames43 = __toESM(require("classnames"));
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var isAlreadyAssigned = (bankTransaction) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ || (bankTransaction == null ? void 0 : bankTransaction.categorization_status) === "SPLIT" /* SPLIT */) {
@@ -10631,7 +10663,7 @@ var PersonalForm = ({
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       "div",
       {
-        className: (0, import_classnames42.default)(
+        className: (0, import_classnames43.default)(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -10678,7 +10710,7 @@ var import_react66 = require("react");
 
 // src/components/BankTransactionMobileList/MatchForm.tsx
 var import_react64 = require("react");
-var import_classnames43 = __toESM(require("classnames"));
+var import_classnames44 = __toESM(require("classnames"));
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var MatchForm2 = ({
   bankTransaction,
@@ -10765,7 +10797,7 @@ var MatchForm2 = ({
     /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
       "div",
       {
-        className: (0, import_classnames43.default)(
+        className: (0, import_classnames44.default)(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -10810,7 +10842,7 @@ var MatchForm2 = ({
 
 // src/components/BankTransactionMobileList/SplitForm.tsx
 var import_react65 = require("react");
-var import_classnames44 = __toESM(require("classnames"));
+var import_classnames45 = __toESM(require("classnames"));
 var import_jsx_runtime125 = require("react/jsx-runtime");
 var SplitForm = ({
   bankTransaction,
@@ -10987,7 +11019,7 @@ var SplitForm = ({
                 {
                   type: "text",
                   name: `split-${index}`,
-                  className: (0, import_classnames44.default)(
+                  className: (0, import_classnames45.default)(
                     "Layer__split-amount-input",
                     index === 0 && "Layer__split-amount-input--first"
                   ),
@@ -11054,7 +11086,7 @@ var SplitForm = ({
     /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       "div",
       {
-        className: (0, import_classnames44.default)(
+        className: (0, import_classnames45.default)(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -11203,7 +11235,7 @@ var TransactionToOpenContext = (0, import_react67.createContext)({
 });
 
 // src/components/BankTransactionMobileList/BankTransactionMobileListItem.tsx
-var import_classnames45 = __toESM(require("classnames"));
+var import_classnames46 = __toESM(require("classnames"));
 var import_date_fns18 = require("date-fns");
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var DATE_FORMAT2 = "LLL d";
@@ -11312,7 +11344,7 @@ var BankTransactionMobileListItem = ({
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames45.default)(
+  const rowClassName = (0, import_classnames46.default)(
     className,
     removeAnim ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -11449,14 +11481,14 @@ var BankTransactionMobileList = ({
 var import_react69 = require("react");
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-var import_classnames46 = __toESM(require("classnames"));
+var import_classnames47 = __toESM(require("classnames"));
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = (0, import_classnames46.default)(
+  const baseClassName = (0, import_classnames47.default)(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -11556,7 +11588,7 @@ var BankTransactionsLoader = ({
 };
 
 // src/components/SyncingComponent/SyncingComponent.tsx
-var import_classnames47 = __toESM(require("classnames"));
+var import_classnames48 = __toESM(require("classnames"));
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var SyncingComponent = ({
   title = "Syncing account data",
@@ -11578,7 +11610,7 @@ var SyncingComponent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
     "div",
     {
-      className: (0, import_classnames47.default)(
+      className: (0, import_classnames48.default)(
         "Layer__syncing-component",
         inProgress ? "Layer__syncing-component--with-border" : ""
       ),
@@ -11775,7 +11807,7 @@ var usePagination = ({
 };
 
 // src/components/Pagination/Pagination.tsx
-var import_classnames48 = __toESM(require("classnames"));
+var import_classnames49 = __toESM(require("classnames"));
 var import_jsx_runtime137 = require("react/jsx-runtime");
 var Pagination = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: "Layer__pagination-container", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(PaginationContent, __spreadValues({}, props)) });
@@ -11806,7 +11838,7 @@ var PaginationContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
       "li",
       {
-        className: (0, import_classnames48.default)(
+        className: (0, import_classnames49.default)(
           "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--previous",
           {
             disabled: currentPage === 1
@@ -11831,7 +11863,7 @@ var PaginationContent = ({
       return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
         "li",
         {
-          className: (0, import_classnames48.default)("Layer__pagination-item", {
+          className: (0, import_classnames49.default)("Layer__pagination-item", {
             selected: pageNumber === currentPage
           }),
           onClick: () => {
@@ -11859,7 +11891,7 @@ var PaginationContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
       "li",
       {
-        className: (0, import_classnames48.default)(
+        className: (0, import_classnames49.default)(
           "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
           {
             disabled: currentPage === lastPage
@@ -11875,7 +11907,7 @@ var PaginationContent = ({
 
 // src/components/BankTransactions/BankTransactionsHeader.tsx
 var import_react72 = require("react");
-var import_classnames49 = __toESM(require("classnames"));
+var import_classnames50 = __toESM(require("classnames"));
 var import_date_fns19 = require("date-fns");
 var import_jsx_runtime138 = require("react/jsx-runtime");
 var DownloadButton2 = ({
@@ -11945,7 +11977,7 @@ var BankTransactionsHeader = ({
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
     Header,
     {
-      className: (0, import_classnames49.default)(
+      className: (0, import_classnames50.default)(
         "Layer__bank-transactions__header",
         withDatePicker && "Layer__bank-transactions__header--with-date-picker",
         mobileComponent && listView ? "Layer__bank-transactions__header--mobile" : void 0
@@ -13267,7 +13299,7 @@ var Indicator = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_classnames50 = __toESM(require("classnames"));
+var import_classnames51 = __toESM(require("classnames"));
 var import_date_fns24 = require("date-fns");
 var import_recharts = require("recharts");
 var import_jsx_runtime146 = require("react/jsx-runtime");
@@ -13673,7 +13705,7 @@ var ProfitAndLossChart = ({
     /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
       import_recharts.ResponsiveContainer,
       {
-        className: (0, import_classnames50.default)(
+        className: (0, import_classnames51.default)(
           "Layer__chart-container",
           loaded !== "complete" && "Layer__chart-container--loading"
         ),
@@ -13793,7 +13825,7 @@ var ProfitAndLossChart = ({
                   isAnimationActive: barAnimActive,
                   animationDuration: 100,
                   radius: [2, 2, 0, 0],
-                  className: (0, import_classnames50.default)(
+                  className: (0, import_classnames51.default)(
                     "Layer__profit-and-loss-chart__bar--loading",
                     loaded !== "complete" && "Layer__profit-and-loss-chart__bar--loading-anim"
                   ),
@@ -13809,7 +13841,7 @@ var ProfitAndLossChart = ({
                   isAnimationActive: barAnimActive,
                   animationDuration: 100,
                   radius: [2, 2, 0, 0],
-                  className: (0, import_classnames50.default)(
+                  className: (0, import_classnames51.default)(
                     "Layer__profit-and-loss-chart__bar--loading",
                     loaded !== "complete" && "Layer__profit-and-loss-chart__bar--loading-anim"
                   ),
@@ -14366,7 +14398,7 @@ var SortArrows = (_a) => {
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-var import_classnames51 = __toESM(require("classnames"));
+var import_classnames52 = __toESM(require("classnames"));
 var import_jsx_runtime152 = require("react/jsx-runtime");
 var mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
   const typeToColor = {};
@@ -14460,7 +14492,7 @@ var DetailedTable = ({
 }) => {
   const buildColClass = (column) => {
     var _a, _b, _c;
-    return (0, import_classnames51.default)(
+    return (0, import_classnames52.default)(
       "Layer__sortable-col",
       sidebarScope && ((_a = filters[sidebarScope]) == null ? void 0 : _a.sortBy) === column ? `sort--${(_c = sidebarScope && ((_b = filters[sidebarScope]) == null ? void 0 : _b.sortDirection)) != null ? _c : "desc"}` : ""
     );
@@ -14510,7 +14542,7 @@ var DetailedTable = ({
       return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
         "tr",
         {
-          className: (0, import_classnames51.default)(
+          className: (0, import_classnames52.default)(
             "Layer__profit-and-loss-detailed-table__row",
             hoveredItem && hoveredItem === item.display_name ? "active" : ""
           ),
@@ -14544,7 +14576,7 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-var import_classnames52 = __toESM(require("classnames"));
+var import_classnames53 = __toESM(require("classnames"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime153 = require("react/jsx-runtime");
 var DetailedChart = ({
@@ -14638,7 +14670,7 @@ var DetailedChart = ({
               return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
                 import_recharts2.Cell,
                 {
-                  className: (0, import_classnames52.default)(
+                  className: (0, import_classnames53.default)(
                     "Layer__profit-and-loss-detailed-charts__pie",
                     hoveredItem && active ? "active" : "inactive",
                     entry.type === "Uncategorized" && "Layer__profit-and-loss-detailed-charts__pie--border"
@@ -15104,11 +15136,11 @@ var import_react91 = require("react");
 
 // src/components/Header/Header.tsx
 var import_react88 = require("react");
-var import_classnames53 = __toESM(require("classnames"));
+var import_classnames54 = __toESM(require("classnames"));
 var import_jsx_runtime159 = require("react/jsx-runtime");
 var Header2 = (0, import_react88.forwardRef)(
   ({ className, children, style, sticky, asHeader, rounded }, ref) => {
-    const baseClassName = (0, import_classnames53.default)(
+    const baseClassName = (0, import_classnames54.default)(
       "Layer__header",
       sticky && "Layer__header--sticky",
       rounded && "Layer__header--top-rounded",
@@ -15131,21 +15163,24 @@ var Header2 = (0, import_react88.forwardRef)(
 Header2.displayName = "Header";
 
 // src/components/Header/HeaderRow.tsx
-var import_classnames54 = __toESM(require("classnames"));
+var import_classnames55 = __toESM(require("classnames"));
 var import_jsx_runtime160 = require("react/jsx-runtime");
-var HeaderRow = ({ className, children, style }) => /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { className: (0, import_classnames54.default)("Layer__header__row", className), style, children });
+var HeaderRow = ({ className, children, direction, style }) => {
+  const dataProps = toDataProperties({ direction });
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", __spreadProps(__spreadValues({}, dataProps), { className: (0, import_classnames55.default)("Layer__header__row", className), style, children }));
+};
 
 // src/components/Header/HeaderCol.tsx
-var import_classnames55 = __toESM(require("classnames"));
+var import_classnames56 = __toESM(require("classnames"));
 var import_jsx_runtime161 = require("react/jsx-runtime");
 var HeaderCol = ({ className, children, style, noPadding = false }) => {
   const dataProperties = toDataProperties({ "no-padding": noPadding });
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", __spreadProps(__spreadValues({}, dataProperties), { className: (0, import_classnames55.default)("Layer__header__col", className), style, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", __spreadProps(__spreadValues({}, dataProperties), { className: (0, import_classnames56.default)("Layer__header__col", className), style, children }));
 };
 
 // src/components/Panel/Panel.tsx
 var import_react89 = require("react");
-var import_classnames56 = __toESM(require("classnames"));
+var import_classnames57 = __toESM(require("classnames"));
 var import_jsx_runtime162 = require("react/jsx-runtime");
 var Panel = ({
   children,
@@ -15154,24 +15189,26 @@ var Panel = ({
   header,
   sidebarIsOpen,
   parentRef,
-  defaultSidebarHeight = false
+  defaultSidebarHeight = false,
+  floating = false
 }) => {
   var _a;
   const [sidebarHeight, setSidebarHeight] = (0, import_react89.useState)(0);
   (0, import_react89.useEffect)(() => {
     var _a2, _b;
     if ((_a2 = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _a2.offsetHeight) {
-      setSidebarHeight(((_b = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _b.offsetHeight) - 1);
+      setSidebarHeight((_b = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _b.offsetHeight);
     }
-  }, [(_a = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _a.offsetHeight, sidebarIsOpen]);
-  const sidebarClass = (0, import_classnames56.default)(
+  }, [parentRef, (_a = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _a.offsetHeight, sidebarIsOpen]);
+  const sidebarClass = (0, import_classnames57.default)(
     "Layer__panel__sidebar",
-    defaultSidebarHeight && "Layer__panel__sidebar--default"
+    defaultSidebarHeight && "Layer__panel__sidebar--default",
+    floating && "Layer__panel__sidebar--floating"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
     "div",
     {
-      className: (0, import_classnames56.default)(
+      className: (0, import_classnames57.default)(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -15200,17 +15237,17 @@ var Panel = ({
 var import_react90 = require("react");
 
 // src/components/ViewHeader/ViewHeader.tsx
-var import_classnames57 = __toESM(require("classnames"));
+var import_classnames58 = __toESM(require("classnames"));
 var import_jsx_runtime163 = require("react/jsx-runtime");
 var ViewHeader = ({ title, className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: (0, import_classnames57.default)("Layer__view-header", className), children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "Layer__view-header__content", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: (0, import_classnames58.default)("Layer__view-header", className), children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "Layer__view-header__content", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Heading, { className: "Layer__view-header__title", children: title }),
     children && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "Layer__view-header__children", children })
   ] }) });
 };
 
 // src/components/View/View.tsx
-var import_classnames58 = __toESM(require("classnames"));
+var import_classnames59 = __toESM(require("classnames"));
 var import_jsx_runtime164 = require("react/jsx-runtime");
 var View = (0, import_react90.forwardRef)(
   ({
@@ -15226,7 +15263,7 @@ var View = (0, import_react90.forwardRef)(
   }, ref) => {
     const { theme } = useLayerContext();
     const styles = parseStylesFromThemeConfig(theme);
-    const viewClassNames = (0, import_classnames58.default)(
+    const viewClassNames = (0, import_classnames59.default)(
       "Layer__view",
       type === "panel" && "Layer__view--panel",
       viewClassName
@@ -15236,7 +15273,7 @@ var View = (0, import_react90.forwardRef)(
         ViewHeader,
         {
           title,
-          className: (0, import_classnames58.default)(
+          className: (0, import_classnames59.default)(
             headerControls ? "Layer__view-header--paddings" : void 0
           ),
           children: header != null ? header : headerControls
@@ -15745,7 +15782,7 @@ var TableBody = ({ children }) => {
 };
 
 // src/components/TableCell/TableCell.tsx
-var import_classnames59 = __toESM(require("classnames"));
+var import_classnames60 = __toESM(require("classnames"));
 var import_jsx_runtime174 = require("react/jsx-runtime");
 var TableCell = ({
   children,
@@ -15765,7 +15802,7 @@ var TableCell = ({
   const amount = typeof children === "number" ? children : 0;
   const isPositive = amount >= 0;
   const amountString = centsToDollars(Math.abs(amount));
-  const cellClassNames = (0, import_classnames59.default)(
+  const cellClassNames = (0, import_classnames60.default)(
     "Layer__table-cell",
     (primary || isHeaderCell) && "Layer__table-cell--primary",
     isHeaderCell && "Layer__table-header",
@@ -15808,7 +15845,7 @@ var TableHead = ({ children }) => {
 };
 
 // src/components/TableRow/TableRow.tsx
-var import_classnames60 = __toESM(require("classnames"));
+var import_classnames61 = __toESM(require("classnames"));
 var import_jsx_runtime176 = require("react/jsx-runtime");
 var TableRow = ({
   rowKey,
@@ -15833,7 +15870,7 @@ var TableRow = ({
       handleExpand && handleExpand();
     }
   };
-  const rowClassNames = (0, import_classnames60.default)([
+  const rowClassNames = (0, import_classnames61.default)([
     "Layer__table-row",
     !isHeadRow && `Layer__table-row--depth-${depth}`,
     !isHeadRow && `Layer__table-row--variant-${variant}`,
@@ -15857,7 +15894,7 @@ var TableRow = ({
 
 // src/components/Table/Table.tsx
 var import_react97 = require("react");
-var import_classnames61 = __toESM(require("classnames"));
+var import_classnames62 = __toESM(require("classnames"));
 var import_jsx_runtime177 = require("react/jsx-runtime");
 var Table = ({
   componentName,
@@ -15898,11 +15935,11 @@ var Table = ({
       prevChildrenRef.current = newChildrenKeys;
     }
   }, [children]);
-  const tableWrapperClassNames = (0, import_classnames61.default)(
+  const tableWrapperClassNames = (0, import_classnames62.default)(
     "Layer__table-wrapper",
     bottomSpacing && "Layer__table-wrapper--bottom-spacing"
   );
-  const tableClassNames = (0, import_classnames61.default)(
+  const tableClassNames = (0, import_classnames62.default)(
     "Layer__table",
     componentName && `Layer__${componentName}__table`,
     borderCollapse && `Layer__table__${borderCollapse}-rows`
@@ -15911,7 +15948,7 @@ var Table = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
-var import_classnames62 = __toESM(require("classnames"));
+var import_classnames63 = __toESM(require("classnames"));
 var import_jsx_runtime178 = require("react/jsx-runtime");
 var ProfitAndLossCompareTable = ({
   stringOverrides
@@ -15932,7 +15969,7 @@ var ProfitAndLossCompareTable = ({
     return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
       "div",
       {
-        className: (0, import_classnames62.default)("Layer__profit-and-loss-table__loader-container"),
+        className: (0, import_classnames63.default)("Layer__profit-and-loss-table__loader-container"),
         children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Loader2, {})
       }
     );
@@ -16122,7 +16159,7 @@ var empty_profit_and_loss_report_default = {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
-var import_classnames63 = __toESM(require("classnames"));
+var import_classnames64 = __toESM(require("classnames"));
 var import_jsx_runtime180 = require("react/jsx-runtime");
 var ProfitAndLossTableComponent = ({
   asContainer,
@@ -16143,7 +16180,7 @@ var ProfitAndLossTableComponent = ({
     return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
       "div",
       {
-        className: (0, import_classnames63.default)(
+        className: (0, import_classnames64.default)(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         ),
@@ -18454,12 +18491,16 @@ var entryNumber = (entry) => {
   var _a, _b;
   return (_b = (_a = entry.entry_number) == null ? void 0 : _a.toString()) != null ? _b : entry.id.substring(0, 5);
 };
+var lineEntryNumber = (ledgerEntryLine) => {
+  var _a, _b;
+  return (_b = (_a = ledgerEntryLine.entry_number) == null ? void 0 : _a.toString()) != null ? _b : ledgerEntryLine.entry_id.substring(0, 5);
+};
 
 // src/components/Card/Card.tsx
-var import_classnames64 = __toESM(require("classnames"));
+var import_classnames65 = __toESM(require("classnames"));
 var import_jsx_runtime201 = require("react/jsx-runtime");
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: (0, import_classnames64.default)("Layer__card", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: (0, import_classnames65.default)("Layer__card", className), children });
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -18503,7 +18544,7 @@ var DateTime = ({
 };
 
 // src/components/DetailsList/DetailsList.tsx
-var import_classnames65 = __toESM(require("classnames"));
+var import_classnames66 = __toESM(require("classnames"));
 var import_jsx_runtime203 = require("react/jsx-runtime");
 var DetailsList = ({
   title,
@@ -18512,7 +18553,7 @@ var DetailsList = ({
   titleClassName,
   actions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { className: (0, import_classnames65.default)("Layer__details-list", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)("div", { className: (0, import_classnames66.default)("Layer__details-list", className), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(Header, { className: titleClassName, children: [
       /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Heading, { size: "secondary" /* secondary */, children: title }),
       actions && /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("div", { className: "Layer__details-list__actions", children: actions })
@@ -18827,7 +18868,7 @@ var LedgerAccountEntryDetails = ({
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
 var import_react120 = require("react");
-var import_classnames66 = __toESM(require("classnames"));
+var import_classnames67 = __toESM(require("classnames"));
 var import_date_fns34 = require("date-fns");
 var import_jsx_runtime206 = require("react/jsx-runtime");
 var LedgerAccountRow = ({
@@ -18853,7 +18894,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
       "tr",
       {
-        className: (0, import_classnames66.default)(
+        className: (0, import_classnames67.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -18877,7 +18918,7 @@ var LedgerAccountRow = ({
                 {
                   weight: "normal" /* normal */,
                   className: "Layer__ledger_account-table__journal-id",
-                  children: entryNumber(row)
+                  children: lineEntryNumber(row)
                 }
               )
             ] }),
@@ -18894,7 +18935,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
       "tr",
       {
-        className: (0, import_classnames66.default)(
+        className: (0, import_classnames67.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -18917,7 +18958,7 @@ var LedgerAccountRow = ({
               {
                 weight: "normal" /* normal */,
                 className: "Layer__ledger_account-table__journal-id",
-                children: entryNumber(row)
+                children: lineEntryNumber(row)
               }
             )
           ] }),
@@ -18946,7 +18987,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
     "tr",
     {
-      className: (0, import_classnames66.default)(
+      className: (0, import_classnames67.default)(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -18963,7 +19004,7 @@ var LedgerAccountRow = ({
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("td", { className: "Layer__table-cell", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "Layer__table-cell-content", children: row.date && (0, import_date_fns34.format)((0, import_date_fns34.parseISO)(row.date), DATE_FORMAT) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("td", { className: "Layer__table-cell", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "Layer__table-cell-content", children: entryNumber(row) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("td", { className: "Layer__table-cell", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "Layer__table-cell-content", children: lineEntryNumber(row) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("td", { className: "Layer__table-cell", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "Layer__table-cell-content", children: (_f = (_e = row.source) == null ? void 0 : _e.display_description) != null ? _f : "" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("td", { className: "Layer__table-cell Layer__table-cell--primary", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "Layer__table-cell-content Layer__table-cell--amount", children: row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}` }) }),
         /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("td", { className: "Layer__table-cell Layer__table-cell--primary", children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("span", { className: "Layer__table-cell-content Layer__table-cell--amount", children: row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}` }) }),
@@ -18974,7 +19015,7 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-var import_classnames67 = __toESM(require("classnames"));
+var import_classnames68 = __toESM(require("classnames"));
 var import_jsx_runtime207 = require("react/jsx-runtime");
 var LedgerAccount = ({
   containerRef,
@@ -19005,7 +19046,7 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = (0, import_classnames67.default)(
+  const baseClassName = (0, import_classnames68.default)(
     "Layer__ledger-account__index",
     accountId && "open"
   );
@@ -20769,7 +20810,7 @@ var ProgressIcon_default = ProgressIcon;
 
 // src/components/TasksHeader/TasksHeader.tsx
 var import_date_fns38 = require("date-fns");
-var import_classnames68 = __toESM(require("classnames"));
+var import_classnames69 = __toESM(require("classnames"));
 var import_jsx_runtime218 = require("react/jsx-runtime");
 var ICONS = {
   loading: {
@@ -20811,7 +20852,7 @@ var TasksHeader = ({
   const completedTasks = tasks == null ? void 0 : tasks.filter((task) => isComplete(task.status)).length;
   const badgeVariant = completedTasks === (tasks == null ? void 0 : tasks.length) ? ICONS.done : ICONS.pending;
   const minDate = getEarliestDateToBrowse(business);
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: (0, import_classnames68.default)("Layer__tasks-header", collapsable && "Layer__tasks-header--collapsable"), children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "Layer__tasks-header__left-col", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", { className: (0, import_classnames69.default)("Layer__tasks-header", collapsable && "Layer__tasks-header--collapsable"), children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "Layer__tasks-header__left-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)("div", { className: "Layer__tasks-header__left-col__title", children: [
       /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Text, { size: "lg" /* lg */, children: tasksHeader }),
       loadedStatus !== "complete" && !open ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(Badge, { variant: ICONS.loading.badge, icon: ICONS.loading.icon, children: ICONS.loading.text }) : loadedStatus === "complete" && !open && (!tasks || error) ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
@@ -20912,7 +20953,7 @@ var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
 var import_react134 = require("react");
-var import_classnames69 = __toESM(require("classnames"));
+var import_classnames70 = __toESM(require("classnames"));
 var import_jsx_runtime220 = require("react/jsx-runtime");
 var TasksListItem = ({
   task,
@@ -20929,16 +20970,16 @@ var TasksListItem = ({
     deleteUploadsForTask,
     updateDocUploadTaskDescription
   } = (0, import_react134.useContext)(TasksContext);
-  const taskBodyClassName = (0, import_classnames69.default)(
+  const taskBodyClassName = (0, import_classnames70.default)(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isComplete(task.status) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = (0, import_classnames69.default)(
+  const taskHeadClassName = (0, import_classnames70.default)(
     "Layer__tasks-list-item__head-info",
     isComplete(task.status) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = (0, import_classnames69.default)(
+  const taskItemClassName = (0, import_classnames70.default)(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
@@ -21147,7 +21188,7 @@ var TasksList = ({ pageSize = 10 }) => {
 
 // src/components/TasksPending/TasksPending.tsx
 var import_react136 = require("react");
-var import_classnames70 = __toESM(require("classnames"));
+var import_classnames71 = __toESM(require("classnames"));
 var import_date_fns40 = require("date-fns");
 var import_recharts4 = require("recharts");
 var import_jsx_runtime222 = require("react/jsx-runtime");
@@ -21170,7 +21211,7 @@ var TasksPending = () => {
       value: data == null ? void 0 : data.filter((task) => !isComplete(task.status)).length
     }
   ];
-  const taskStatusClassName = (0, import_classnames70.default)(
+  const taskStatusClassName = (0, import_classnames71.default)(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)("div", { className: "Layer__tasks-pending", children: [
@@ -21219,11 +21260,11 @@ var import_react137 = require("react");
 var import_date_fns41 = require("date-fns");
 
 // src/components/TasksMonthSelector/TaskMonthTile.tsx
-var import_classnames71 = __toESM(require("classnames"));
+var import_classnames72 = __toESM(require("classnames"));
 var import_jsx_runtime223 = require("react/jsx-runtime");
 var TaskMonthTile = ({ monthData, onClick, active, disabled }) => {
   const isCompleted = monthData.total === monthData.completed;
-  const baseClass = (0, import_classnames71.default)(
+  const baseClass = (0, import_classnames72.default)(
     "Layer__tasks-month-selector__month",
     isCompleted && "Layer__tasks-month-selector__month--completed",
     active && "Layer__tasks-month-selector__month--active",
@@ -21298,7 +21339,7 @@ var TasksMonthSelector = ({ tasks, year, currentDate, onClick }) => {
 };
 
 // src/components/Tasks/Tasks.tsx
-var import_classnames72 = __toESM(require("classnames"));
+var import_classnames73 = __toESM(require("classnames"));
 var import_date_fns42 = require("date-fns");
 var import_jsx_runtime225 = require("react/jsx-runtime");
 var UseTasksContext = (0, import_react138.createContext)({
@@ -21393,7 +21434,7 @@ var TasksComponent = ({
     /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
       "div",
       {
-        className: (0, import_classnames72.default)(
+        className: (0, import_classnames73.default)(
           "Layer__tasks__content",
           !open && "Layer__tasks__content--collapsed"
         ),
@@ -21605,7 +21646,7 @@ function BookkeepingProfitAndLossSummariesContainer({
 }
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-var import_classnames73 = __toESM(require("classnames"));
+var import_classnames74 = __toESM(require("classnames"));
 var import_jsx_runtime230 = require("react/jsx-runtime");
 var BookkeepingOverview = ({
   title,
@@ -21681,7 +21722,7 @@ var BookkeepingOverview = ({
           /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
             Container,
             {
-              name: (0, import_classnames73.default)(
+              name: (0, import_classnames74.default)(
                 "bookkeeping-overview-profit-and-loss-chart",
                 pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
               ),
@@ -21698,7 +21739,7 @@ var BookkeepingOverview = ({
           /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
             Container,
             {
-              name: (0, import_classnames73.default)(
+              name: (0, import_classnames74.default)(
                 "bookkeeping-overview-profit-and-loss-chart",
                 pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
               ),
@@ -21818,7 +21859,7 @@ function TransactionsToReview({
 }
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-var import_classnames74 = __toESM(require("classnames"));
+var import_classnames75 = __toESM(require("classnames"));
 var import_jsx_runtime233 = require("react/jsx-runtime");
 var AccountingOverview = ({
   title = "Accounting overview",
@@ -21921,7 +21962,7 @@ var AccountingOverview = ({
               /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
                 Container,
                 {
-                  name: (0, import_classnames74.default)(
+                  name: (0, import_classnames75.default)(
                     "accounting-overview-profit-and-loss-chart",
                     pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
                   ),
@@ -21939,7 +21980,7 @@ var AccountingOverview = ({
               /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
                 Container,
                 {
-                  name: (0, import_classnames74.default)(
+                  name: (0, import_classnames75.default)(
                     "accounting-overview-profit-and-loss-chart",
                     pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
                   ),