@layerfi/components 0.1.76 → 0.1.77

package/dist/esm/index.js

@@ -554,7 +554,7 @@ var Drawer = ({
 };
 
 // src/components/Toast/Toast.tsx
-import React2, { forwardRef } from "react";
+import React2 from "react";
 
 // src/contexts/LayerContext/LayerContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -582,7 +582,7 @@ var LayerContext = createContext2({
   setOnboardingStep: () => void 0,
   environment: "",
   toasts: [],
-  addToast: (toast) => void 0,
+  addToast: (_toast) => void 0,
   removeToast: () => void 0,
   onError: () => void 0,
   touch: () => void 0,
@@ -613,10 +613,10 @@ var Toast = (props) => {
     /* @__PURE__ */ React2.createElement("p", null, content)
   );
 };
-var ToastsContainer = forwardRef((_props) => {
+function ToastsContainer() {
   const { toasts } = useLayerContext();
   return /* @__PURE__ */ React2.createElement("div", { className: "Layer__toasts-container" }, toasts.map((toast, idx) => /* @__PURE__ */ React2.createElement(Toast, __spreadValues({ key: `layer-toast-${idx}` }, toast))));
-});
+}
 
 // src/components/GlobalWidgets/GlobalWidgets.tsx
 var DrawerWidget = () => {
@@ -1270,6 +1270,7 @@ var useLinkedAccounts = () => {
     }
   });
   const unlinkAccount2 = (source, accountId) => __async(void 0, null, function* () {
+    DEBUG && console.debug("unlinking account");
     if (source === "PLAID") {
       yield Layer.unlinkAccount(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: { businessId, accountId }
@@ -1283,7 +1284,7 @@ var useLinkedAccounts = () => {
     }
   });
   const confirmAccount = (source, accountId) => __async(void 0, null, function* () {
-    DEBUG && console.log("confirming account");
+    DEBUG && console.debug("confirming account");
     if (source === "PLAID") {
       yield Layer.confirmConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: {
@@ -1300,7 +1301,7 @@ var useLinkedAccounts = () => {
     }
   });
   const denyAccount = (source, accountId) => __async(void 0, null, function* () {
-    DEBUG && console.log("confirming account");
+    DEBUG && console.debug("confirming account");
     if (source === "PLAID") {
       yield Layer.denyConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: {
@@ -1317,7 +1318,7 @@ var useLinkedAccounts = () => {
     }
   });
   const breakConnection = (source, connectionExternalId) => __async(void 0, null, function* () {
-    DEBUG && console.log("Breaking sandbox plaid item connection");
+    DEBUG && console.debug("Breaking sandbox plaid item connection");
     if (source === "PLAID") {
       yield Layer.breakPlaidItemConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: {
@@ -1334,23 +1335,23 @@ var useLinkedAccounts = () => {
     }
   });
   const refetchAccounts = () => __async(void 0, null, function* () {
-    DEBUG && console.log("refetching accounts...");
+    DEBUG && console.debug("refetching accounts...");
     yield mutate();
   });
   const syncAccounts = () => __async(void 0, null, function* () {
-    DEBUG && console.log("resyncing accounts...");
+    DEBUG && console.debug("resyncing accounts...");
     yield Layer.syncConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId }
     });
   });
   const updateConnectionStatus2 = () => __async(void 0, null, function* () {
-    DEBUG && console.log("updating connection status...");
+    DEBUG && console.debug("updating connection status...");
     yield Layer.updateConnectionStatus(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId }
     });
   });
   const unlinkPlaidItem2 = (plaidItemPlaidId) => __async(void 0, null, function* () {
-    DEBUG && console.log("unlinking plaid item");
+    DEBUG && console.debug("unlinking plaid item");
     yield Layer.unlinkPlaidItem(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId, plaidItemPlaidId }
     });
@@ -2178,9 +2179,9 @@ var LinkedAccountsProvider = ({
 };
 
 // src/components/Container/Container.tsx
-import React8, { forwardRef as forwardRef2 } from "react";
+import React8, { forwardRef } from "react";
 import classNames2 from "classnames";
-var Container = forwardRef2(
+var Container = forwardRef(
   ({
     name,
     className,
@@ -2211,11 +2212,12 @@ var Container = forwardRef2(
     );
   }
 );
+Container.displayName = "Container";
 
 // src/components/Container/Header.tsx
-import React9, { forwardRef as forwardRef3 } from "react";
+import React9, { forwardRef as forwardRef2 } from "react";
 import classNames3 from "classnames";
-var Header = forwardRef3(
+var Header = forwardRef2(
   ({ className, children, style, layout }, ref) => {
     const baseClassName = classNames3(
       "Layer__component-header",
@@ -2225,6 +2227,7 @@ var Header = forwardRef3(
     return /* @__PURE__ */ React9.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
+Header.displayName = "Header";
 
 // src/components/Onboarding/ConnectAccount.tsx
 import React48, { useContext as useContext5, useMemo as useMemo3 } from "react";
@@ -2646,7 +2649,7 @@ var Loader_default = Loader;
 
 // src/components/Tooltip/Tooltip.tsx
 import React19, {
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef3,
   isValidElement,
   cloneElement
 } from "react";
@@ -2744,7 +2747,7 @@ var Tooltip = (_a) => {
   const tooltip = useTooltip(options);
   return /* @__PURE__ */ React19.createElement(TooltipContext.Provider, { value: tooltip }, children);
 };
-var TooltipTrigger = forwardRef4(function TooltipTrigger2(_a, propRef) {
+var TooltipTrigger = forwardRef3(function TooltipTrigger2(_a, propRef) {
   var _b = _a, { children, asChild = false } = _b, props = __objRest(_b, ["children", "asChild"]);
   const context = useTooltipContext();
   const childrenRef = children.ref;
@@ -2769,8 +2772,8 @@ var TooltipTrigger = forwardRef4(function TooltipTrigger2(_a, propRef) {
     children
   );
 });
-var TooltipContent = forwardRef4(function TooltipContent2(_a, propRef) {
-  var _b = _a, { style, className } = _b, props = __objRest(_b, ["style", "className"]);
+var TooltipContent = forwardRef3(function TooltipContent2(_a, propRef) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const context = useTooltipContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!context.open || context.disabled)
@@ -2878,7 +2881,7 @@ import classNames5 from "classnames";
 var IconButton = (_a) => {
   var _b = _a, {
     className,
-    children,
+    children: _children,
     icon,
     active,
     withBorder = false,
@@ -2978,7 +2981,7 @@ var RetryButton = (_a) => {
     className,
     processing,
     disabled,
-    error,
+    error: _error,
     children
   } = _b, props = __objRest(_b, [
     "className",
@@ -3243,11 +3246,9 @@ import classNames9 from "classnames";
 var BackButton = (_a) => {
   var _b = _a, {
     className,
-    children,
     textOnly = false
   } = _b, props = __objRest(_b, [
     "className",
-    "children",
     "textOnly"
   ]);
   const baseClassName = classNames9("Layer__btn", "Layer__back-btn", className);
@@ -3298,11 +3299,9 @@ import classNames10 from "classnames";
 var CloseButton = (_a) => {
   var _b = _a, {
     className,
-    children,
     textOnly = false
   } = _b, props = __objRest(_b, [
     "className",
-    "children",
     "textOnly"
   ]);
   const baseClassName = classNames10("Layer__btn", "Layer__back-btn", className);
@@ -3315,11 +3314,9 @@ import classNames11 from "classnames";
 var ExpandButton = (_a) => {
   var _b = _a, {
     className,
-    children,
     collapsed
   } = _b, props = __objRest(_b, [
     "className",
-    "children",
     "collapsed"
   ]);
   const baseClassName = classNames11(
@@ -3648,9 +3645,9 @@ var TextWithTooltip = (_a) => {
     as: Component2 = "p",
     className,
     children,
-    size = "md" /* md */,
-    weight = "normal" /* normal */,
-    withTooltip = "whenTruncated" /* whenTruncated */,
+    size: _size = "md" /* md */,
+    weight: _weight = "normal" /* normal */,
+    withTooltip: _withTooltip = "whenTruncated" /* whenTruncated */,
     tooltipOptions
   } = _b, props = __objRest(_b, [
     "as",
@@ -4790,7 +4787,7 @@ var LinkedAccountsComponent = ({
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-import React124, { useEffect as useEffect22, useMemo as useMemo6, useState as useState28 } from "react";
+import React124, { useEffect as useEffect22, useMemo as useMemo8, useState as useState28 } from "react";
 
 // src/hooks/useElementSize/useElementSize.ts
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
@@ -4940,7 +4937,7 @@ var File = (_a) => {
 var File_default = File;
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import React96, { useEffect as useEffect13, useRef as useRef9, useState as useState16 } from "react";
+import React96, { useEffect as useEffect13, useMemo as useMemo4, useRef as useRef9, useState as useState16 } from "react";
 
 // src/icons/Scissors.tsx
 import * as React65 from "react";
@@ -5075,6 +5072,19 @@ var Scissors = (_a) => {
 };
 var Scissors_default = Scissors;
 
+// src/utils/styleUtils/toDataProperties.ts
+function toDataProperties(input) {
+  const unsafeProperties = Object.fromEntries(
+    Object.entries(input).map(([key, value]) => {
+      if (typeof value !== "string" && typeof value !== "number" && value !== true) {
+        return null;
+      }
+      return [`data-${key}`, value];
+    }).filter((entry) => entry !== null)
+  );
+  return unsafeProperties;
+}
+
 // src/components/CategorySelect/CategorySelect.tsx
 import React73 from "react";
 import Select, {
@@ -5395,7 +5405,7 @@ import classNames24 from "classnames";
 var CategorySelectDrawer = ({
   onSelect,
   selected,
-  showTooltips
+  showTooltips: _showTooltips
 }) => {
   var _a, _b;
   const { setContent, close } = useContext10(DrawerContext);
@@ -5669,7 +5679,7 @@ var CategorySelect = ({
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
 import React93, {
-  forwardRef as forwardRef6,
+  forwardRef as forwardRef5,
   useImperativeHandle as useImperativeHandle2,
   useState as useState15,
   useCallback,
@@ -5796,7 +5806,7 @@ var Trash = (_a) => {
 var Trash_default = Trash;
 
 // src/components/BankTransactionReceipts/BankTransactionReceipts.tsx
-import React86, { forwardRef as forwardRef5, useImperativeHandle } from "react";
+import React86, { forwardRef as forwardRef4, useImperativeHandle } from "react";
 
 // src/contexts/ReceiptsContext/ReceiptsContext.ts
 import { createContext as createContext5, useContext as useContext11 } from "react";
@@ -5997,7 +6007,6 @@ var Eye_default = Eye;
 import classNames26 from "classnames";
 var FileThumb = ({
   url,
-  type,
   floatingActions = false,
   uploadPending,
   deletePending,
@@ -6388,11 +6397,12 @@ var openReceiptInNewTab = (url, index) => (e) => {
       `);
   }
 };
-var BankTransactionReceiptsWithProvider = forwardRef5((_a, ref) => {
+var BankTransactionReceiptsWithProvider = forwardRef4((_a, ref) => {
   var _b = _a, { bankTransaction, isActive } = _b, props = __objRest(_b, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ React86.createElement(ReceiptsProvider, { bankTransaction, isActive }, /* @__PURE__ */ React86.createElement(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })));
 });
-var BankTransactionReceipts = forwardRef5(
+BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
+var BankTransactionReceipts = forwardRef4(
   ({
     classNamePrefix = "Layer",
     floatingActions = false,
@@ -6433,6 +6443,7 @@ var BankTransactionReceipts = forwardRef5(
     ) : null);
   }
 );
+BankTransactionReceipts.displayName = "BankTransactionReceipts";
 
 // src/components/MatchForm/MatchForm.tsx
 import React88 from "react";
@@ -6726,7 +6737,7 @@ var ToggleOption = ({
   name,
   onChange,
   value,
-  size,
+  size: _size,
   leftIcon,
   disabled,
   disabledMessage = "Disabled",
@@ -6908,7 +6919,7 @@ var validateSplit = (splitData) => {
   });
   return valid;
 };
-var ExpandedBankTransactionRow = forwardRef6(
+var ExpandedBankTransactionRow = forwardRef5(
   ({
     bankTransaction,
     isOpen = false,
@@ -6925,8 +6936,7 @@ var ExpandedBankTransactionRow = forwardRef6(
     var _a, _b, _c, _d, _e, _f, _g;
     const {
       categorize: categorizeBankTransaction2,
-      match: matchBankTransaction2,
-      updateOneLocal: updateBankTransaction
+      match: matchBankTransaction2
     } = useBankTransactionsContext();
     const [purpose, setPurpose] = useState15(
       bankTransaction.category ? "categorize" /* categorize */ : hasMatch(bankTransaction) ? "match" /* match */ : "categorize" /* categorize */
@@ -7039,19 +7049,15 @@ var ExpandedBankTransactionRow = forwardRef6(
     };
     const save = () => __async(void 0, null, function* () {
       if (showDescriptions && memoText != void 0) {
-        const result = yield Layer.updateBankTransactionMetadata(
-          apiUrl,
-          auth.access_token,
-          {
-            params: {
-              businessId,
-              bankTransactionId: bankTransaction.id
-            },
-            body: {
-              memo: memoText
-            }
+        yield Layer.updateBankTransactionMetadata(apiUrl, auth.access_token, {
+          params: {
+            businessId,
+            bankTransactionId: bankTransaction.id
+          },
+          body: {
+            memo: memoText
           }
-        );
+        });
       }
       if (purpose === "match" /* match */) {
         if (!selectedMatchId) {
@@ -7365,6 +7371,7 @@ var ExpandedBankTransactionRow = forwardRef6(
     );
   }
 );
+ExpandedBankTransactionRow.displayName = "ExpandedBankTransactionRow";
 
 // src/components/IconBox/IconBox.tsx
 import React94 from "react";
@@ -7417,6 +7424,7 @@ var BankTransactionRow = ({
   initialLoad,
   showDescriptions,
   showReceiptUploads,
+  showReceiptUploadColumn,
   showTooltips,
   stringOverrides
 }) => {
@@ -7503,6 +7511,10 @@ var BankTransactionRow = ({
     initialLoad ? "initial-load" : "",
     showComponent ? "show" : ""
   );
+  const showReceiptDataProperties = useMemo4(
+    () => toDataProperties({ showReceiptUploadColumn }),
+    [showReceiptUploadColumn]
+  );
   return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement("tr", { className: rowClassName }, /* @__PURE__ */ React96.createElement(
     "td",
     __spreadValues({
@@ -7542,11 +7554,17 @@ var BankTransactionRow = ({
     ))
   ), /* @__PURE__ */ React96.createElement(
     "td",
-    __spreadValues({
+    __spreadValues(__spreadValues({
       className: `Layer__table-cell Layer__table-cell__amount-col Layer__bank-transactions__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
-    }, openRow),
+    }, openRow), showReceiptDataProperties),
     /* @__PURE__ */ React96.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
-  ), /* @__PURE__ */ React96.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__documents-col" }, ((_c = bankTransaction.document_ids) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ React96.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React96.createElement(IconBox, null, /* @__PURE__ */ React96.createElement(File_default, { size: 12 })))), /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React96.createElement(
+    "td",
+    __spreadValues({
+      className: "Layer__table-cell Layer__bank-transactions__documents-col"
+    }, showReceiptDataProperties),
+    showReceiptUploads && ((_c = bankTransaction.document_ids) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ React96.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React96.createElement(IconBox, null, /* @__PURE__ */ React96.createElement(File_default, { size: 12 })))
+  ), /* @__PURE__ */ React96.createElement(
     "td",
     {
       className: classNames37(
@@ -7906,7 +7924,7 @@ import React108, { useContext as useContext14, useEffect as useEffect20, useRef
 import React107 from "react";
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
-import React102, { useContext as useContext13, useEffect as useEffect16, useMemo as useMemo4, useRef as useRef11, useState as useState19 } from "react";
+import React102, { useContext as useContext13, useEffect as useEffect16, useMemo as useMemo5, useRef as useRef11, useState as useState19 } from "react";
 
 // src/icons/Paperclip.tsx
 import React100 from "react";
@@ -8032,7 +8050,7 @@ var BusinessForm = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const options = useMemo4(() => {
+  const options = useMemo5(() => {
     var _a2;
     const options2 = ((_a2 = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a2.type) === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
       (x) => mapCategoryToOption(x)
@@ -8205,7 +8223,6 @@ var isAlreadyAssigned = (bankTransaction) => {
 var PersonalForm = ({
   bankTransaction,
   showReceiptUploads,
-  isOpen,
   showDescriptions
 }) => {
   var _a;
@@ -8425,8 +8442,7 @@ var SplitForm = ({
   const receiptsRef = useRef14(null);
   const {
     categorize: categorizeBankTransaction2,
-    isLoading,
-    error
+    isLoading
   } = useBankTransactionsContext();
   const { memoText, setMemoText, saveMemoText } = useMemoTextContext();
   const defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && ((_b = (_a = bankTransaction.categorization_flow) == null ? void 0 : _a.suggestions) == null ? void 0 : _b[0]);
@@ -8678,7 +8694,6 @@ var SplitAndMatchForm = ({
   bankTransaction,
   showTooltips,
   showReceiptUploads,
-  isOpen,
   showDescriptions
 }) => {
   const anyMatch = hasMatch(bankTransaction);
@@ -8730,7 +8745,6 @@ var BankTransactionMobileForms = ({
           {
             bankTransaction,
             showReceiptUploads,
-            isOpen,
             showDescriptions
           }
         );
@@ -8741,7 +8755,6 @@ var BankTransactionMobileForms = ({
             bankTransaction,
             showTooltips,
             showReceiptUploads,
-            isOpen,
             showDescriptions
           }
         );
@@ -8989,7 +9002,7 @@ var BankTransactionMobileList = ({
 };
 
 // src/components/BankTransactionsTable/BankTransactionsTable.tsx
-import React114 from "react";
+import React114, { useMemo as useMemo6 } from "react";
 
 // src/components/BankTransactionsLoader/BankTransactionsLoader.tsx
 import React112 from "react";
@@ -9150,14 +9163,35 @@ var BankTransactionsTable = ({
   lastPage,
   onRefresh
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
+  const showReceiptColumn = (_a = showReceiptUploads && (bankTransactions == null ? void 0 : bankTransactions.some(
+    (transaction) => {
+      var _a2;
+      return ((_a2 = transaction.document_ids) == null ? void 0 : _a2.length) > 0;
+    }
+  ))) != null ? _a : false;
+  const showReceiptDataProperties = useMemo6(
+    () => toDataProperties({ showReceiptUploadColumn: showReceiptColumn }),
+    [showReceiptColumn]
+  );
   return /* @__PURE__ */ React114.createElement(
     "table",
     {
       width: "100%",
       className: "Layer__table Layer__bank-transactions__table with-cell-separators"
     },
-    /* @__PURE__ */ React114.createElement("thead", null, /* @__PURE__ */ React114.createElement("tr", null, /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, ((_a = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _a.dateColumnHeaderText) || "Date"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, ((_b = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _b.transactionColumnHeaderText) || "Transaction"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, ((_c = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _c.accountColumnHeaderText) || "Account"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, ((_d = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _d.amountColumnHeaderText) || "Amount"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__documents-col" }), categorizeView && editable ? /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, ((_e = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _e.categorizeColumnHeaderText) || "Categorize") : /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, ((_f = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _f.categoryColumnHeaderText) || "Category"))),
+    /* @__PURE__ */ React114.createElement("thead", null, /* @__PURE__ */ React114.createElement("tr", null, /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, ((_b = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _b.dateColumnHeaderText) || "Date"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, ((_c = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _c.transactionColumnHeaderText) || "Transaction"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, ((_d = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _d.accountColumnHeaderText) || "Account"), /* @__PURE__ */ React114.createElement(
+      "th",
+      __spreadValues({
+        className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col"
+      }, showReceiptDataProperties),
+      ((_e = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _e.amountColumnHeaderText) || "Amount"
+    ), /* @__PURE__ */ React114.createElement(
+      "th",
+      __spreadValues({
+        className: "Layer__table-header Layer__bank-transactions__documents-col"
+      }, showReceiptDataProperties)
+    ), categorizeView && editable ? /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, ((_f = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _f.categorizeColumnHeaderText) || "Categorize") : /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, ((_g = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _g.categoryColumnHeaderText) || "Category"))),
     isLoading && page && page === 1 ? /* @__PURE__ */ React114.createElement(BankTransactionsLoader, { isLoading: true, showTooltips }) : null,
     /* @__PURE__ */ React114.createElement("tbody", null, !isLoading && (bankTransactions == null ? void 0 : bankTransactions.map(
       (bankTransaction, index) => /* @__PURE__ */ React114.createElement(
@@ -9174,6 +9208,7 @@ var BankTransactionsTable = ({
           containerWidth,
           showDescriptions,
           showReceiptUploads,
+          showReceiptUploadColumn: showReceiptColumn,
           showTooltips,
           stringOverrides: stringOverrides == null ? void 0 : stringOverrides.bankTransactionCTAs
         }
@@ -9233,7 +9268,7 @@ var ErrorBoundary = class extends Component {
 import React118 from "react";
 
 // src/hooks/usePagination/usePagination.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo7 } from "react";
 var DOTS = "...";
 var usePagination = ({
   totalCount,
@@ -9241,7 +9276,7 @@ var usePagination = ({
   siblingCount = 1,
   currentPage
 }) => {
-  const paginationRange = useMemo5(() => {
+  const paginationRange = useMemo7(() => {
     const totalPageCount = Math.ceil(totalCount / pageSize);
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPageCount) {
@@ -9523,7 +9558,7 @@ var DatePicker = (_a) => {
     dateFormat = mode === "monthPicker" || mode === "monthRangePicker" ? "MMM, yyyy" : mode === "timePicker" ? "h:mm aa" : "MMM d, yyyy",
     timeIntervals = 15,
     timeCaption,
-    placeholderText,
+    placeholderText: _placeholderText,
     customDateRanges,
     wrapperClassName,
     calendarClassName,
@@ -10050,7 +10085,7 @@ var BankTransactionsContent = ({
     removeAfterCategorize
   } = useBankTransactionsContext();
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo6(
+  const isSyncing = useMemo8(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
@@ -10091,7 +10126,7 @@ var BankTransactionsContent = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [loadingStatus]);
-  const bankTransactions = TEST_EMPTY_STATE ? [] : useMemo6(() => {
+  const bankTransactions = TEST_EMPTY_STATE ? [] : useMemo8(() => {
     if (monthlyView) {
       return data == null ? void 0 : data.filter(
         (x) => parseISO12(x.date) >= dateRange.startDate && parseISO12(x.date) <= dateRange.endDate
@@ -10266,7 +10301,7 @@ var useQuickbooks = () => {
     setQuickbooksIsLinked(isConnected);
   });
   const syncFromQuickbooks2 = () => {
-    DEBUG2 && console.log("Triggering sync from Quickbooks...");
+    DEBUG2 && console.debug("Triggering sync from Quickbooks...");
     setIsSyncingFromQuickbooks(true);
     try {
       Layer.syncFromQuickbooks(apiUrl, auth.access_token, {
@@ -10277,7 +10312,7 @@ var useQuickbooks = () => {
     }
   };
   const fetchIsSyncingFromQuickbooks = () => __async(void 0, null, function* () {
-    DEBUG2 && console.log("Fetching status of sync from Quickbooks...");
+    DEBUG2 && console.debug("Fetching status of sync from Quickbooks...");
     const isSyncing = (yield Layer.statusOfSyncFromQuickbooks(apiUrl, auth.access_token, {
       params: { businessId }
     })()).data.is_syncing;
@@ -10354,7 +10389,7 @@ var PNLComparisonContext = createContext8({
 });
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useMemo as useMemo8, useState as useState31 } from "react";
+import { useMemo as useMemo10, useState as useState31 } from "react";
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -10410,7 +10445,7 @@ var applyShare = (items, total) => {
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
-import { useEffect as useEffect24, useMemo as useMemo7, useState as useState30 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo9, useState as useState30 } from "react";
 import { startOfMonth as startOfMonth5, sub } from "date-fns";
 import useSWR3 from "swr";
 var buildDates = ({ currentDate }) => {
@@ -10439,7 +10474,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
   const [date, setDate] = useState30(currentDate);
   const [loaded, setLoaded] = useState30("initial");
   const [data, setData] = useState30([]);
-  const { startYear, startMonth, endYear, endMonth } = useMemo7(() => {
+  const { startYear, startMonth, endYear, endMonth } = useMemo9(() => {
     return buildDates({ currentDate: date });
   }, [date, businessId, tagFilter, reportingBasis]);
   const queryKey = businessId && Boolean(startYear) && Boolean(startMonth) && Boolean(endYear) && Boolean(endMonth) && (auth == null ? void 0 : auth.access_token) && `profit-and-loss-summaries-${businessId}-${startYear.toString()}-${startMonth.toString()}-${tagFilter == null ? void 0 : tagFilter.key}-${(_a = tagFilter == null ? void 0 : tagFilter.values) == null ? void 0 : _a.join(
@@ -10677,7 +10712,7 @@ var useProfitAndLoss = ({
       })
     }));
   };
-  const { filteredDataRevenue, filteredTotalRevenue } = useMemo8(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = useMemo10(() => {
     var _a;
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
@@ -10729,7 +10764,7 @@ var useProfitAndLoss = ({
     const withShare = applyShare(sorted, total);
     return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
   }, [data, startDate, filters, sidebarScope, summaryData]);
-  const { filteredDataExpenses, filteredTotalExpenses } = useMemo8(() => {
+  const { filteredDataExpenses, filteredTotalExpenses } = useMemo10(() => {
     var _a;
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
@@ -10960,7 +10995,7 @@ var useProfitAndLossComparison = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React129, { useContext as useContext15, useEffect as useEffect28, useMemo as useMemo9, useState as useState34 } from "react";
+import React129, { useContext as useContext15, useEffect as useEffect28, useMemo as useMemo11, useState as useState34 } from "react";
 
 // src/components/ProfitAndLossChart/ChartStateCard.tsx
 import React127 from "react";
@@ -11192,7 +11227,7 @@ var ProfitAndLossChart = ({
     start: startOfMonth9(sub2(Date.now(), { months: 11 })),
     end: endOfMonth6(Date.now())
   });
-  const selectionMonth = useMemo9(
+  const selectionMonth = useMemo11(
     () => ({
       year: localDateRange.startDate.getFullYear(),
       month: localDateRange.startDate.getMonth()
@@ -11208,7 +11243,7 @@ var ProfitAndLossChart = ({
     currentDate: startOfMonth9(Date.now()),
     tagFilter
   });
-  const anyData = useMemo9(() => {
+  const anyData = useMemo11(() => {
     return Boolean(
       data == null ? void 0 : data.find(
         (x) => x.income !== 0 || x.costOfGoodsSold !== 0 || x.grossProfit !== 0 || x.operatingExpenses !== 0 || x.profitBeforeTaxes !== 0 || x.taxes !== 0 || x.totalExpenses !== 0
@@ -11216,11 +11251,11 @@ var ProfitAndLossChart = ({
     );
   }, [data]);
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo9(
+  const isSyncing = useMemo11(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
-  const loadingValue = useMemo9(() => getLoadingValue(data), [data]);
+  const loadingValue = useMemo11(() => getLoadingValue(data), [data]);
   useEffect28(() => {
     if (loaded === "complete" && data) {
       const foundCurrent = data.find(
@@ -11279,7 +11314,7 @@ var ProfitAndLossChart = ({
     loading: (pnl == null ? void 0 : pnl.isLoading) ? loadingValue : 0,
     loadingExpenses: (pnl == null ? void 0 : pnl.isLoading) ? -loadingValue : 0
   });
-  const theData = useMemo9(() => {
+  const theData = useMemo11(() => {
     var _a2;
     if (loaded !== "complete" || loaded === "complete" && !anyData) {
       const loadingData = [];
@@ -12039,7 +12074,7 @@ var X = (_a) => {
 var X_default = X;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import React136, { useMemo as useMemo10 } from "react";
+import React136, { useMemo as useMemo12 } from "react";
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -12341,7 +12376,7 @@ var DetailedChart = ({
   isLoading,
   showDatePicker = true
 }) => {
-  const chartData = useMemo10(() => {
+  const chartData = useMemo12(() => {
     if (!filteredData) {
       return [];
     }
@@ -12797,7 +12832,7 @@ var ProfitAndLossDownloadButton = ({
 };
 
 // src/components/ProfitAndLossHeader/ProfitAndLossHeader.tsx
-import React141, { useMemo as useMemo11 } from "react";
+import React141, { useMemo as useMemo13 } from "react";
 
 // src/components/SyncingBadge/SyncingBadge.tsx
 import React140 from "react";
@@ -12821,7 +12856,7 @@ var ProfitAndLossHeader = ({
   withDatePicker
 }) => {
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo11(
+  const isSyncing = useMemo13(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
@@ -12833,10 +12868,10 @@ import React148, { useContext as useContext20 } from "react";
 
 // src/components/Header/Header.tsx
 import React142, {
-  forwardRef as forwardRef7
+  forwardRef as forwardRef6
 } from "react";
 import classNames51 from "classnames";
-var Header2 = forwardRef7(
+var Header2 = forwardRef6(
   ({ className, children, style, sticky, asHeader, rounded }, ref) => {
     const baseClassName = classNames51(
       "Layer__header",
@@ -12858,6 +12893,7 @@ var Header2 = forwardRef7(
     );
   }
 );
+Header2.displayName = "Header";
 
 // src/components/Header/HeaderRow.tsx
 import React143 from "react";
@@ -12917,7 +12953,7 @@ var Panel = ({
 };
 
 // src/components/View/View.tsx
-import React147, { forwardRef as forwardRef8 } from "react";
+import React147, { forwardRef as forwardRef7 } from "react";
 
 // src/components/ViewHeader/ViewHeader.tsx
 import React146 from "react";
@@ -12928,7 +12964,7 @@ var ViewHeader = ({ title, className, children }) => {
 
 // src/components/View/View.tsx
 import classNames56 from "classnames";
-var View = forwardRef8(
+var View = forwardRef7(
   ({
     title,
     showHeader = true,
@@ -12959,6 +12995,7 @@ var View = forwardRef8(
     ), withSidebar ? /* @__PURE__ */ React147.createElement(Panel, { sidebarIsOpen: true, sidebar, defaultSidebarHeight: true }, /* @__PURE__ */ React147.createElement("div", { className: "Layer__view-main" }, children)) : /* @__PURE__ */ React147.createElement("div", { className: "Layer__view-main" }, children));
   }
 );
+View.displayName = "View";
 
 // src/components/ProfitAndLossReport/ProfitAndLossReport.tsx
 var ProfitAndLossReport = ({
@@ -13033,32 +13070,17 @@ var ProfitAndLossReport = ({
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React153, { useContext as useContext21, useMemo as useMemo15 } from "react";
-
-// src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesList.tsx
-import React149, { useMemo as useMemo12 } from "react";
-
-// src/utils/styleUtils/toDataProperties.ts
-function toDataProperties(input) {
-  const unsafeProperties = Object.fromEntries(
-    Object.entries(input).map(([key, value]) => {
-      if (typeof value !== "string" && typeof value !== "number" && value !== true) {
-        return null;
-      }
-      return [`data-${key}`, value];
-    }).filter((entry) => entry !== null)
-  );
-  return unsafeProperties;
-}
+import React153, { useContext as useContext21, useMemo as useMemo17 } from "react";
 
 // src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesList.tsx
+import React149, { useMemo as useMemo14 } from "react";
 var LIST_ITEM_CLASS_NAME = "Layer__ProfitAndLossSummariesListItem";
 function ProfitAndLossSummariesListItem({
   children,
   isActive,
   onClick
 }) {
-  const dataProperties = useMemo12(
+  const dataProperties = useMemo14(
     () => toDataProperties({ active: isActive, clickable: !!onClick }),
     [isActive]
   );
@@ -13069,7 +13091,7 @@ function ProfitAndLossSummariesList({
   children,
   itemCount
 }) {
-  const dataProperties = useMemo12(
+  const dataProperties = useMemo14(
     () => toDataProperties({ ["column-count"]: itemCount }),
     [itemCount]
   );
@@ -13162,10 +13184,10 @@ function ProfitAndLossSummariesMiniChart({
 }
 
 // src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesSummary.tsx
-import React152, { useMemo as useMemo14 } from "react";
+import React152, { useMemo as useMemo16 } from "react";
 
 // src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesHeading.tsx
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo15 } from "react";
 import React151 from "react";
 var HEADING_CLASS_NAME = "Layer__ProfitAndLossSummariesSummaryHeading";
 function ProfitAndLossSummariesHeading({
@@ -13173,7 +13195,7 @@ function ProfitAndLossSummariesHeading({
   children
 }) {
   const { size = "sm" } = variants != null ? variants : {};
-  const labelDataProperties = useMemo13(() => toDataProperties({ size }), [size]);
+  const labelDataProperties = useMemo15(() => toDataProperties({ size }), [size]);
   return /* @__PURE__ */ React151.createElement("h3", __spreadValues({ className: HEADING_CLASS_NAME }, labelDataProperties), children);
 }
 
@@ -13190,8 +13212,8 @@ function ProfitAndLossSummariesSummary({
 }) {
   const { Chart } = slots != null ? slots : {};
   const { size = "sm" } = variants != null ? variants : {};
-  const dataProperties = useMemo14(() => toDataProperties({ size }), [size]);
-  const amountDataProperties = useMemo14(
+  const dataProperties = useMemo16(() => toDataProperties({ size }), [size]);
+  const amountDataProperties = useMemo16(
     () => toDataProperties({
       positive: amount >= 0,
       negative: amount < 0,
@@ -13221,7 +13243,7 @@ function Internal_ProfitAndLossSummaries({
     sidebarScope
   } = useContext21(ProfitAndLoss.Context);
   const dataItem = Array.isArray(storedData) ? storedData[storedData.length - 1] : storedData;
-  const { revenueChartData, expensesChartData } = useMemo15(
+  const { revenueChartData, expensesChartData } = useMemo17(
     () => ({
       revenueChartData: toMiniChartData({ scope: "revenue", data: dataItem }),
       expensesChartData: toMiniChartData({ scope: "expenses", data: dataItem })
@@ -13849,7 +13871,7 @@ var ProfitAndLossTableComponent = ({
           /* @__PURE__ */ React162.createElement(PieChart_default, null)
         )
       ),
-      /* @__PURE__ */ React162.createElement(TableCell, { isCurrency: true, primary: true }, Number.isNaN(lineItem.value) ? 0 : lineItem.value)
+      /* @__PURE__ */ React162.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, Number.isNaN(lineItem.value) ? 0 : lineItem.value)
     ), expanded && lineItem.line_items ? lineItem.line_items.map(
       (child, i) => renderLineItem(
         child,
@@ -15217,13 +15239,13 @@ var ChartOfAccountsDatePicker = () => {
 import React174 from "react";
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import React173, { useContext as useContext27, useMemo as useMemo17 } from "react";
+import React173, { useContext as useContext27, useMemo as useMemo19 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo18 } from "react";
 var useParentOptions = (data) => {
   var _a;
-  return useMemo16(
+  return useMemo18(
     () => flattenAccounts((data == null ? void 0 : data.accounts) || []).sort((a, b) => (a == null ? void 0 : a.name) && (b == null ? void 0 : b.name) ? a.name.localeCompare(b.name) : 0).map((x) => {
       return {
         label: x.name,
@@ -15249,7 +15271,7 @@ var ChartOfAccountsForm = ({
     apiError
   } = useContext27(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
-  const entry = useMemo17(() => {
+  const entry = useMemo19(() => {
     if ((form == null ? void 0 : form.action) === "edit" && form.accountId) {
       return flattenAccounts((data == null ? void 0 : data.accounts) || []).find(
         (x) => x.id === form.accountId
@@ -15691,12 +15713,12 @@ var ChartOfAccountsTableWithPanel = ({
 import React184, {
   useContext as useContext32,
   useEffect as useEffect43,
-  useMemo as useMemo19,
+  useMemo as useMemo21,
   useState as useState49
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import React182, { useContext as useContext30, useMemo as useMemo18 } from "react";
+import React182, { useContext as useContext30, useMemo as useMemo20 } from "react";
 
 // src/utils/journal.ts
 var getAccountIdentifierPayload = (journalLineItem) => {
@@ -15905,7 +15927,7 @@ var LedgerAccountEntryDetails = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext30(LedgerAccountsContext);
-  const { totalDebit, totalCredit } = useMemo18(() => {
+  const { totalDebit, totalCredit } = useMemo20(() => {
     var _a2;
     let totalDebit2 = 0;
     let totalCredit2 = 0;
@@ -16164,12 +16186,12 @@ var LedgerAccount = ({
     "Layer__ledger-account__index",
     accountId && "open"
   );
-  const account = useMemo19(() => {
+  const account = useMemo21(() => {
     return flattenAccounts((accountData == null ? void 0 : accountData.accounts) || []).find(
       (x) => x.id === accountId
     );
   }, [accountId]);
-  const data = useMemo19(() => {
+  const data = useMemo21(() => {
     var _a2;
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
@@ -16606,13 +16628,13 @@ var useJournal = () => {
 };
 
 // src/components/JournalTable/JournalTableWithPanel.tsx
-import React191, { useContext as useContext39, useMemo as useMemo21, useState as useState53 } from "react";
+import React191, { useContext as useContext39, useMemo as useMemo23, useState as useState53 } from "react";
 
 // src/components/JournalSidebar/JournalSidebar.tsx
 import React189, { useContext as useContext37 } from "react";
 
 // src/components/JournalEntryDetails/JournalEntryDetails.tsx
-import React186, { useContext as useContext34, useMemo as useMemo20, useState as useState52 } from "react";
+import React186, { useContext as useContext34, useMemo as useMemo22, useState as useState52 } from "react";
 var JournalEntryDetails = () => {
   var _a, _b, _c, _d;
   const {
@@ -16626,13 +16648,13 @@ var JournalEntryDetails = () => {
   } = useContext34(JournalContext);
   const [reverseEntryProcessing, setReverseEntryProcessing] = useState52(false);
   const [reverseEntryError, setReverseEntryError] = useState52();
-  const entry = useMemo20(() => {
+  const entry = useMemo22(() => {
     if (selectedEntryId && data) {
       return data.find((x) => x.id === selectedEntryId);
     }
     return;
   }, [data, selectedEntryId]);
-  const sortedLineItems = useMemo20(
+  const sortedLineItems = useMemo22(
     () => {
       var _a2;
       return (_a2 = entry == null ? void 0 : entry.line_items) == null ? void 0 : _a2.sort(
@@ -17164,7 +17186,7 @@ var JournalTableWithPanel = ({
     selectedEntryId,
     addEntry
   } = useContext39(JournalContext);
-  const data = useMemo21(() => {
+  const data = useMemo23(() => {
     var _a;
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
@@ -17286,7 +17308,7 @@ import React199, {
   createContext as createContext17,
   useContext as useContext44,
   useEffect as useEffect48,
-  useMemo as useMemo23,
+  useMemo as useMemo25,
   useState as useState58
 } from "react";
 
@@ -17553,7 +17575,7 @@ var TasksHeader = ({
 };
 
 // src/components/TasksList/TasksList.tsx
-import React197, { useContext as useContext42, useMemo as useMemo22, useState as useState57 } from "react";
+import React197, { useContext as useContext42, useMemo as useMemo24, useState as useState57 } from "react";
 
 // src/icons/SmileIcon.tsx
 import * as React195 from "react";
@@ -17704,7 +17726,7 @@ var TasksList = ({ pageSize = 10 }) => {
   const [currentPage, setCurrentPage] = useState57(
     firstPageWithIincompleteTasks === -1 ? 1 : firstPageWithIincompleteTasks + 1
   );
-  const sortedTasks = useMemo22(() => {
+  const sortedTasks = useMemo24(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return tasks == null ? void 0 : tasks.slice(firstPageIndex, lastPageIndex);
@@ -17835,7 +17857,7 @@ var TasksComponent = ({
   stringOverrides
 }) => {
   const { isLoading, loadedStatus, data } = useContext44(TasksContext);
-  const allComplete = useMemo23(() => {
+  const allComplete = useMemo25(() => {
     if (!data) {
       return void 0;
     }
@@ -18147,10 +18169,10 @@ var BadgeLoader = ({ children }) => {
 };
 
 // src/components/ui/Stack.tsx
-import React206, { useMemo as useMemo24 } from "react";
+import React206, { useMemo as useMemo26 } from "react";
 var CLASS_NAME3 = "Layer__VStack";
 function VStack({ align, children, gap }) {
-  const dataProperties = useMemo24(
+  const dataProperties = useMemo26(
     () => toDataProperties({ align, gap }),
     [align, gap]
   );