@layerfi/components 0.1.102-alpha.5 → 0.1.102

package/dist/cjs/index.cjs

@@ -5602,7 +5602,7 @@ var import_react12 = require("react");
 var import_react10 = require("react");
 
 // package.json
-var version = "0.1.102-alpha.5";
+var version = "0.1.102";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -11437,9 +11437,10 @@ function Modal({
   flexBlock,
   onOpenChange,
   children,
+  "aria-label": ariaLabel,
   role
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ModalOverlay, { isOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(InternalModal, { flexBlock, size, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Dialog, { role: role != null ? role : "dialog", children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ModalOverlay, { isOpen, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(InternalModal, { flexBlock, size, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, children }) }) });
 }
 
 // src/components/ui/Modal/ModalSlots.tsx
@@ -11478,23 +11479,20 @@ var Button2 = (0, import_react39.forwardRef)((_a, ref) => {
     icon,
     inset,
     size = "md",
-    variant = "solid",
-    persistentBorder
+    variant = "solid"
   } = _b, restProps = __objRest(_b, [
     "children",
     "icon",
     "inset",
     "size",
-    "variant",
-    "persistentBorder"
+    "variant"
   ]);
   const { isPending = false } = restProps;
   const dataProperties = toDataProperties({
     icon,
     inset,
     size,
-    variant,
-    "persistent-border": persistentBorder
+    variant
   });
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     import_react_aria_components6.Button,
@@ -11521,8 +11519,8 @@ var import_react_aria_components7 = require("react-aria-components");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var HEADING_CLASS_NAME = "Layer__UI__Heading";
 var Heading2 = (0, import_react40.forwardRef)((_a, ref) => {
-  var _b = _a, { align, pbe, size, variant, weight } = _b, restProps = __objRest(_b, ["align", "pbe", "size", "variant", "weight"]);
-  const dataProperties = toDataProperties({ pbe, size, align, variant, weight });
+  var _b = _a, { align, pie, pbe, size, variant, weight } = _b, restProps = __objRest(_b, ["align", "pie", "pbe", "size", "variant", "weight"]);
+  const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight });
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     import_react_aria_components7.Heading,
     __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
@@ -15978,9 +15976,13 @@ function keyLoader2(previousPageData, {
   access_token: accessToken,
   apiUrl,
   businessId,
-  query
+  query,
+  isEnabled
 }) {
   var _a;
+  if (!isEnabled) {
+    return;
+  }
   if (accessToken && apiUrl) {
     return {
       accessToken,
@@ -16010,7 +16012,7 @@ var ListCustomersSWRResponse = class {
     return this.swrResponse.error !== void 0;
   }
 };
-function useListCustomers({ query }) {
+function useListCustomers({ query, isEnabled = true } = {}) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const swrResponse = (0, import_infinite2.default)(
@@ -16018,7 +16020,8 @@ function useListCustomers({ query }) {
       previousPageData,
       __spreadProps(__spreadValues({}, data), {
         businessId,
-        query
+        query,
+        isEnabled
       })
     ),
     ({
@@ -16047,6 +16050,9 @@ function useListCustomers({ query }) {
   );
   return new ListCustomersSWRResponse(swrResponse);
 }
+function usePreloadCustomers(parameters) {
+  useListCustomers(parameters);
+}
 
 // src/features/vendors/api/useListVendors.ts
 var import_infinite3 = __toESM(require("swr/infinite"));
@@ -16134,9 +16140,13 @@ function keyLoader3(previousPageData, {
   access_token: accessToken,
   apiUrl,
   businessId,
-  query
+  query,
+  isEnabled
 }) {
   var _a;
+  if (!isEnabled) {
+    return;
+  }
   if (accessToken && apiUrl) {
     return {
       accessToken,
@@ -16166,7 +16176,7 @@ var ListVendorsSWRResponse = class {
     return this.swrResponse.error !== void 0;
   }
 };
-function useListVendors({ query }) {
+function useListVendors({ query, isEnabled = true } = {}) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const swrResponse = (0, import_infinite3.default)(
@@ -16174,7 +16184,8 @@ function useListVendors({ query }) {
       previousPageData,
       __spreadProps(__spreadValues({}, data), {
         businessId,
-        query
+        query,
+        isEnabled
       })
     ),
     ({
@@ -16203,6 +16214,9 @@ function useListVendors({ query }) {
   );
   return new ListVendorsSWRResponse(swrResponse);
 }
+function usePreloadVendors(parameters) {
+  useListVendors(parameters);
+}
 
 // src/components/ui/Input/Input.tsx
 var import_react69 = require("react");
@@ -17073,9 +17087,11 @@ var Square = (0, import_react82.forwardRef)(
 );
 
 // src/features/tags/components/TagSelector.tsx
+var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 var TAG_SELECTOR_CLASS_NAMES = {
-  LAYOUT_GROUP: "Layer__TagSelectorLayoutGroup"
+  LAYOUT_GROUP: "Layer__TagSelectorLayoutGroup",
+  CHECK_ICON: "Layer__TagSelectorCheckIcon"
 };
 function TagSelectorLayoutGroup({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_react_aria_components15.Group, { className: TAG_SELECTOR_CLASS_NAMES.LAYOUT_GROUP, children });
@@ -17154,9 +17170,7 @@ function TagSelectorSelection({
                 Span,
                 {
                   slot: "value",
-                  weight: "bold",
                   ellipsis: true,
-                  size: "lg",
                   nonAria: true,
                   children: valueLabel
                 }
@@ -17327,7 +17341,10 @@ function TagSelector({
                       {
                         id: valueId,
                         textValue: `${definitionLabel} ${valueLabel}`,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Span, { slot: "label", weight: "bold", children: valueLabel })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(HStack, { gap: "2xs", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_lucide_react7.Check, { size: 16, className: TAG_SELECTOR_CLASS_NAMES.CHECK_ICON }),
+                          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Span, { slot: "label", weight: "bold", children: valueLabel })
+                        ] })
                       },
                       valueId
                     ) })
@@ -20356,7 +20373,7 @@ var import_date_fns21 = require("date-fns");
 
 // src/components/domain/transactions/searchField/TransactionsSearchField.tsx
 var import_react_aria_components17 = require("react-aria-components");
-var import_lucide_react7 = require("lucide-react");
+var import_lucide_react8 = require("lucide-react");
 
 // src/components/ui/SearchField/MinimalSearchField.tsx
 var import_react_aria_components16 = require("react-aria-components");
@@ -20380,7 +20397,7 @@ var CLASS_NAME9 = "Layer__TransactionsSearchField";
 function TransactionsSearchField(_a) {
   var _b = _a, { slot } = _b, restProps = __objRest(_b, ["slot"]);
   return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(import_react_aria_components17.Group, { slot, className: CLASS_NAME9, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(VStack, { slot: "icon", align: "center", justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(import_lucide_react7.Search, { size: 14 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(VStack, { slot: "icon", align: "center", justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(import_lucide_react8.Search, { size: 14 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
       MinimalSearchField,
       __spreadProps(__spreadValues({}, restProps), {
@@ -20521,7 +20538,7 @@ var DropdownMenu = ({ children, ariaLabel, slots, slotProps }) => {
 };
 
 // src/components/BankTransactions/BankTransactionsUploadMenu.tsx
-var import_lucide_react12 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 
 // src/components/UploadTransactions/UploadTransactions.tsx
 var import_react113 = require("react");
@@ -20968,7 +20985,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
 var import_react108 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_classnames53 = __toESM(require("classnames"));
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var VALID_EXTENSIONS = [".csv"];
 var VALID_FILE_TYPES = ["text/csv", "text/plain", "application/vnd.ms-excel"];
@@ -20993,19 +21010,19 @@ var FileRow = ({ file, onClearFile, asDropTarget }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(VStack, { className: "Layer__csv-upload__file-row Layer__csv-upload__file-row--drop-target", children: [
       /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(HStack, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Spacer, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(IconButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(CloseIcon_default, { size: 16 }), onClick: onClearFile })
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Button2, { variant: "ghost", inset: true, icon: true, onClick: onClearFile, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(CloseIcon_default, { size: 16 }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(HStack, { align: "center", justify: "center", gap: "xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react8.FileSpreadsheet, { size: 24 }),
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react9.FileSpreadsheet, { size: 24 }),
         /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(P, { size: "md", children: file.name })
       ] })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(HStack, { align: "center", gap: "xs", className: "Layer__csv-upload__file-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react8.FileSpreadsheet, { size: 24 }),
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react9.FileSpreadsheet, { size: 24 }),
     /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(P, { size: "md", children: file.name }),
     /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Spacer, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(IconButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(CloseIcon_default, { size: 16 }), onClick: onClearFile })
+    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Button2, { variant: "ghost", inset: true, icon: true, onClick: onClearFile, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(CloseIcon_default, { size: 16 }) })
   ] });
 };
 var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
@@ -21106,7 +21123,7 @@ var Separator = ({ mbs, mbe }) => {
 };
 
 // src/components/CsvUpload/DownloadCsvTemplateButton.tsx
-var import_lucide_react9 = require("lucide-react");
+var import_lucide_react10 = require("lucide-react");
 var import_jsx_runtime169 = require("react/jsx-runtime");
 var DownloadCsvTemplateButton = ({ children, className, csvProps, fileName = "template.csv" }) => {
   const { headers, rows = [] } = csvProps;
@@ -21133,7 +21150,7 @@ var DownloadCsvTemplateButton = ({ children, className, csvProps, fileName = "te
     {
       className,
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react9.FileDownIcon, { size: 12 }),
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react10.FileDownIcon, { size: 12 }),
       onClick: handleDownload,
       tooltip: "Need help? Download an example CSV",
       children
@@ -21142,7 +21159,7 @@ var DownloadCsvTemplateButton = ({ children, className, csvProps, fileName = "te
 };
 
 // src/components/CsvUpload/CopyTemplateHeadersButtonGroup.tsx
-var import_lucide_react10 = require("lucide-react");
+var import_lucide_react11 = require("lucide-react");
 var import_classnames54 = __toESM(require("classnames"));
 var import_jsx_runtime170 = require("react/jsx-runtime");
 var copyTextToClipboard = (text) => {
@@ -21154,7 +21171,7 @@ var CopyTemplateHeadersButtonGroup = ({ headers, className }) => {
     Button,
     {
       onClick: () => copyTextToClipboard(headers[key]),
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_lucide_react10.CopyIcon, { strokeWidth: 1, size: 12 }),
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_lucide_react11.CopyIcon, { strokeWidth: 1, size: 12 }),
       variant: "secondary" /* secondary */,
       children: headers[key]
     },
@@ -21385,7 +21402,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
 
 // src/components/UploadTransactions/UploadTransactionsValidateCsvStep.tsx
 var import_react111 = require("react");
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 
 // src/hooks/customAccounts/useCreateCustomAccountTransactions.ts
 var import_mutation12 = __toESM(require("swr/mutation"));
@@ -21645,7 +21662,7 @@ function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId
         Button,
         {
           onClick: onClickReupload,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react11.RefreshCcw, { size: 12 }),
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react12.RefreshCcw, { size: 12 }),
           variant: "primary" /* primary */,
           children: "Reupload"
         }
@@ -21675,12 +21692,29 @@ function UploadTransactionsConfirmationStep({ onRestartFlow, uploadedTransaction
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Separator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(HStack, { gap: "xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(HStack, { gap: "xs", className: "Layer__upload-transactions__confirmation-step__button-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Spacer, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Button, { onClick: goRestartFlow, variant: "secondary" /* secondary */, rightIcon: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(UploadCloud_default, { size: 12 }), children: "Upload another file" }),
-      /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(Button, { onClick: () => {
-        void next();
-      }, rightIcon: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(ChevronRight_default, {}), children: "I\u2019m done uploading transactions" })
+      /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        Button,
+        {
+          onClick: goRestartFlow,
+          variant: "secondary" /* secondary */,
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(UploadCloud_default, { size: 12 }),
+          className: "Layer__upload-transactions__confirmation-step__button-row-item",
+          children: "Upload another file"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        Button,
+        {
+          onClick: () => {
+            void next();
+          },
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(ChevronRight_default, {}),
+          className: "Layer__upload-transactions__confirmation-step__button-row-item",
+          children: "I\u2019m done uploading transactions"
+        }
+      )
     ] })
   ] });
 }
@@ -21690,11 +21724,11 @@ var import_jsx_runtime175 = require("react/jsx-runtime");
 function UploadTransactionsHeader({ currentStep, isValid: isValid2 }) {
   if (currentStep === 2 /* Confirmation */) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(VStack, { gap: "xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(Heading2, { level: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(Heading2, { level: 1, size: "xl", pie: "2xl", children: [
       currentStep === 0 /* UploadCsv */ && "Upload transactions",
       currentStep === 1 /* ValidateCsv */ && (isValid2 ? "Review transactions" : "Some transactions couldn't be parsed")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(Heading2, { level: 2, pbe: "xl", size: "2xs", variant: "subtle", weight: "normal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(Heading2, { level: 2, pbe: "xl", size: "xs", variant: "subtle", weight: "normal", children: [
       currentStep === 0 /* UploadCsv */ && "Import a file of transactions from your bank account or credit card",
       currentStep === 1 /* ValidateCsv */ && (isValid2 ? "All transactions were parsed successfully. Click \u201CUpload transactions\u201D to finalize the import." : "We found formatting errors in some transactions. Please correct the highlighted rows in your file and reupload it.")
     ] })
@@ -21774,7 +21808,7 @@ function BankTransactionsUploadModalContent({ onClose }) {
   ] });
 }
 function BankTransactionsUploadModal({ isOpen, onOpenChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(Modal, { flexBlock: true, isOpen, onOpenChange, size: "lg", children: ({ close: close2 }) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(BankTransactionsUploadModalContent, { onClose: close2 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(Modal, { flexBlock: true, isOpen, onOpenChange, size: "lg", "aria-label": "Upload transactions", children: ({ close: close2 }) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(BankTransactionsUploadModalContent, { onClose: close2 }) });
 }
 
 // src/components/BankTransactions/BankTransactionsUploadMenu.tsx
@@ -21797,7 +21831,7 @@ var BankTransactionsUploadMenu = () => {
             /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(VStack, { className: "Layer__bank-transactions__header-menu__upload-transactions-icon", children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(UploadCloud_default, { size: 16 }) }),
             /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Text, { size: "sm" /* sm */, children: "Upload transactions manually" }),
             /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Spacer, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_lucide_react12.ChevronRight, { size: 12 })
+            /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_lucide_react13.ChevronRight, { size: 12 })
           ] }, "upload-txns") })
         ]
       }
@@ -21995,7 +22029,7 @@ var Inbox = (_a) => {
 var Inbox_default = Inbox;
 
 // src/components/BankTransactions/BankTransactionsTableEmptyState.tsx
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react14 = require("lucide-react");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 function BankTransactionsTableEmptyStates({
   hasVisibleTransactions,
@@ -22036,7 +22070,7 @@ function BankTransactionsTableEmptyStates({
           status: "info" /* info */,
           title: "No transactions found",
           description: "Try adjusting your search filters",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react13.SearchX, {})
+          icon: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react14.SearchX, {})
         }
       );
     }
@@ -22057,17 +22091,17 @@ var BankTransactions = (_a) => {
   var _b = _a, {
     onError,
     showTags = false,
-    showCustomerVendor = false,
     mode
   } = _b, props = __objRest(_b, [
     "onError",
     "showTags",
-    "showCustomerVendor",
     "mode"
   ]);
   usePreloadTagDimensions({ isEnabled: showTags });
+  usePreloadCustomers({ isEnabled: false });
+  usePreloadVendors({ isEnabled: false });
   const contextData = useAugmentedBankTransactions({ monthlyView: props.monthlyView });
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionsContext.Provider, { value: contextData, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(LegacyModeProvider, { overrideMode: mode, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionTagVisibilityProvider, { showTags, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionCustomerVendorVisibilityProvider, { showCustomerVendor, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionsContent, __spreadValues({}, props)) }) }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(ErrorBoundary, { onError, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionsContext.Provider, { value: contextData, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(LegacyModeProvider, { overrideMode: mode, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionTagVisibilityProvider, { showTags, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionCustomerVendorVisibilityProvider, { showCustomerVendor: false, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(BankTransactionsContent, __spreadValues({}, props)) }) }) }) }) });
 };
 var BankTransactionsContent = ({
   asWidget = false,
@@ -22473,7 +22507,7 @@ var IntegrationsQuickbooksItemThumbFooter = ({ quickbooksUiState }) => {
 };
 
 // src/components/Integrations/IntegrationsQuickbooksItemThumb/IntegrationsQuickbooksItemThumb.tsx
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 
 // src/components/Integrations/IntegrationsQuickbooksItemThumb/IntegrationsQuickbooksUnlinkConfirmationModal.tsx
 var import_react120 = require("react");
@@ -22509,7 +22543,7 @@ var getBadgeConfig = (quickbooksUiState, hasSynced) => {
       return {
         variant: "error" /* ERROR */,
         text: "Retry Sync",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_lucide_react14.AlertCircle, { size: 12 })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_lucide_react15.AlertCircle, { size: 12 })
       };
     }
     case "Connected" /* Connected */:
@@ -22517,7 +22551,7 @@ var getBadgeConfig = (quickbooksUiState, hasSynced) => {
       return {
         variant: "success" /* SUCCESS */,
         text: "Synced",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_lucide_react14.CheckIcon, { size: 12 })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_lucide_react15.CheckIcon, { size: 12 })
       };
     }
     default:
@@ -28482,6 +28516,7 @@ var Edit2 = (_a) => {
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
+var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime248 = require("react/jsx-runtime");
 var ChartOfAccountsTable = ({
   view,
@@ -28540,55 +28575,78 @@ var ChartOfAccountsTableContent = ({
   }, []);
   const renderChartOfAccountsDesktopRow = (account, index, rowKey, depth) => {
     var _a, _b;
-    const expandable = !!account.sub_accounts && account.sub_accounts.length > 0;
-    const expanded = expandable ? isOpen(rowKey) : true;
+    const hasSubAccounts = !!account.sub_accounts && account.sub_accounts.length > 0;
+    const isExpanded = hasSubAccounts ? isOpen(rowKey) : true;
+    const isNonEditable = !templateAccountsEditable && !!account.stable_name;
+    const onClickRow = (e) => {
+      e.stopPropagation();
+      if (hasSubAccounts) setIsOpen(rowKey);
+    };
+    const onClickAccountName = (e) => {
+      e.stopPropagation();
+      setAccountId(account.id);
+    };
+    const onClickEdit = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      editAccount(account.id);
+    };
+    const onClickView = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setAccountId(account.id);
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(import_react166.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
         TableRow,
         {
           rowKey: rowKey + "-" + index,
-          expandable,
-          isExpanded: expanded,
-          onClick: (e) => {
-            e.stopPropagation();
-            setAccountId(account.id);
-          },
+          expandable: hasSubAccounts,
+          isExpanded,
+          onClick: onClickRow,
           depth,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
               TableCell,
               {
-                withExpandIcon: expandable,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  expandable && setIsOpen(rowKey);
-                },
-                children: account.name
+                withExpandIcon: hasSubAccounts,
+                children: /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(HStack, { gap: "lg", children: [
+                  !hasSubAccounts && /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Spacer, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Button2, { variant: "text", onClick: onClickAccountName, children: account.name })
+                ] })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableCell, { children: (_a = account.account_type) == null ? void 0 : _a.display_name }),
             /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableCell, { children: (_b = account.account_subtype) == null ? void 0 : _b.display_name }),
             /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableCell, { isCurrency: true, children: account.balance }),
-            /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)("span", { className: "Layer__coa__actions", children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
-              Button,
-              {
-                variant: "secondary" /* secondary */,
-                rightIcon: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Edit2_default, { size: 12 }),
-                iconOnly: true,
-                disabled: !templateAccountsEditable && !!account.stable_name,
-                onClick: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  editAccount(account.id);
-                },
-                tooltip: !templateAccountsEditable && account.stable_name ? "System accounts cannot be modified" : void 0,
-                children: "Edit"
-              }
-            ) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableCell, { align: "right" /* RIGHT */, children: /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(HStack, { className: "Layer__coa__actions", gap: "xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+                Button,
+                {
+                  variant: "secondary" /* secondary */,
+                  rightIcon: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Edit2_default, { size: 14 }),
+                  iconOnly: true,
+                  disabled: isNonEditable,
+                  onClick: onClickEdit,
+                  tooltip: isNonEditable ? "This account cannot be modified" : void 0,
+                  children: "Edit"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+                Button,
+                {
+                  variant: "secondary" /* secondary */,
+                  rightIcon: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_lucide_react16.List, { size: 14 }),
+                  iconOnly: true,
+                  onClick: onClickView,
+                  children: "View"
+                }
+              )
+            ] }) })
           ]
         }
       ),
-      expandable && expanded && account.sub_accounts.map((subItem, subIdx) => {
+      hasSubAccounts && isExpanded && account.sub_accounts.map((subItem, subIdx) => {
         const subRowKey = `${rowKey}-${subItem.id}`;
         return renderChartOfAccountsDesktopRow(
           subItem,
@@ -34018,7 +34076,6 @@ var BankTransactionsWithLinkedAccounts = ({
   showDescriptions = true,
   showLedgerBalance = true,
   showReceiptUploads = true,
-  showCustomerVendor = false,
   showTags = false,
   showTooltips = false,
   showUnlinkItem = false,
@@ -34048,7 +34105,6 @@ var BankTransactionsWithLinkedAccounts = ({
             asWidget: true,
             showDescriptions,
             showReceiptUploads,
-            showCustomerVendor,
             showTags,
             showTooltips,
             showUploadOptions,

package/dist/esm/index.mjs

@@ -5570,7 +5570,7 @@ import { useState as useState5 } from "react";
 import { useReducer, useEffect as useEffect2 } from "react";
 
 // package.json
-var version = "0.1.102-alpha.5";
+var version = "0.1.102";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -11448,9 +11448,10 @@ function Modal({
   flexBlock,
   onOpenChange,
   children,
+  "aria-label": ariaLabel,
   role
 }) {
-  return /* @__PURE__ */ jsx64(ModalOverlay, { isOpen, onOpenChange, children: /* @__PURE__ */ jsx64(InternalModal, { flexBlock, size, children: /* @__PURE__ */ jsx64(Dialog, { role: role != null ? role : "dialog", children }) }) });
+  return /* @__PURE__ */ jsx64(ModalOverlay, { isOpen, onOpenChange, children: /* @__PURE__ */ jsx64(InternalModal, { flexBlock, size, children: /* @__PURE__ */ jsx64(Dialog, { role: role != null ? role : "dialog", "aria-label": ariaLabel, children }) }) });
 }
 
 // src/components/ui/Modal/ModalSlots.tsx
@@ -11489,23 +11490,20 @@ var Button2 = forwardRef8((_a, ref) => {
     icon,
     inset,
     size = "md",
-    variant = "solid",
-    persistentBorder
+    variant = "solid"
   } = _b, restProps = __objRest(_b, [
     "children",
     "icon",
     "inset",
     "size",
-    "variant",
-    "persistentBorder"
+    "variant"
   ]);
   const { isPending = false } = restProps;
   const dataProperties = toDataProperties({
     icon,
     inset,
     size,
-    variant,
-    "persistent-border": persistentBorder
+    variant
   });
   return /* @__PURE__ */ jsx66(
     ReactAriaButton2,
@@ -11532,8 +11530,8 @@ import { Heading as ReactAriaHeading } from "react-aria-components";
 import { jsx as jsx67 } from "react/jsx-runtime";
 var HEADING_CLASS_NAME = "Layer__UI__Heading";
 var Heading2 = forwardRef9((_a, ref) => {
-  var _b = _a, { align, pbe, size, variant, weight } = _b, restProps = __objRest(_b, ["align", "pbe", "size", "variant", "weight"]);
-  const dataProperties = toDataProperties({ pbe, size, align, variant, weight });
+  var _b = _a, { align, pie, pbe, size, variant, weight } = _b, restProps = __objRest(_b, ["align", "pie", "pbe", "size", "variant", "weight"]);
+  const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight });
   return /* @__PURE__ */ jsx67(
     ReactAriaHeading,
     __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
@@ -16014,9 +16012,13 @@ function keyLoader2(previousPageData, {
   access_token: accessToken,
   apiUrl,
   businessId,
-  query
+  query,
+  isEnabled
 }) {
   var _a;
+  if (!isEnabled) {
+    return;
+  }
   if (accessToken && apiUrl) {
     return {
       accessToken,
@@ -16046,7 +16048,7 @@ var ListCustomersSWRResponse = class {
     return this.swrResponse.error !== void 0;
   }
 };
-function useListCustomers({ query }) {
+function useListCustomers({ query, isEnabled = true } = {}) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const swrResponse = useSWRInfinite2(
@@ -16054,7 +16056,8 @@ function useListCustomers({ query }) {
       previousPageData,
       __spreadProps(__spreadValues({}, data), {
         businessId,
-        query
+        query,
+        isEnabled
       })
     ),
     ({
@@ -16083,6 +16086,9 @@ function useListCustomers({ query }) {
   );
   return new ListCustomersSWRResponse(swrResponse);
 }
+function usePreloadCustomers(parameters) {
+  useListCustomers(parameters);
+}
 
 // src/features/vendors/api/useListVendors.ts
 import useSWRInfinite3 from "swr/infinite";
@@ -16170,9 +16176,13 @@ function keyLoader3(previousPageData, {
   access_token: accessToken,
   apiUrl,
   businessId,
-  query
+  query,
+  isEnabled
 }) {
   var _a;
+  if (!isEnabled) {
+    return;
+  }
   if (accessToken && apiUrl) {
     return {
       accessToken,
@@ -16202,7 +16212,7 @@ var ListVendorsSWRResponse = class {
     return this.swrResponse.error !== void 0;
   }
 };
-function useListVendors({ query }) {
+function useListVendors({ query, isEnabled = true } = {}) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
   const swrResponse = useSWRInfinite3(
@@ -16210,7 +16220,8 @@ function useListVendors({ query }) {
       previousPageData,
       __spreadProps(__spreadValues({}, data), {
         businessId,
-        query
+        query,
+        isEnabled
       })
     ),
     ({
@@ -16239,6 +16250,9 @@ function useListVendors({ query }) {
   );
   return new ListVendorsSWRResponse(swrResponse);
 }
+function usePreloadVendors(parameters) {
+  useListVendors(parameters);
+}
 
 // src/components/ui/Input/Input.tsx
 import { forwardRef as forwardRef13 } from "react";
@@ -17130,9 +17144,11 @@ var Square = forwardRef18(
 );
 
 // src/features/tags/components/TagSelector.tsx
+import { Check as Check3 } from "lucide-react";
 import { jsx as jsx127, jsxs as jsxs77 } from "react/jsx-runtime";
 var TAG_SELECTOR_CLASS_NAMES = {
-  LAYOUT_GROUP: "Layer__TagSelectorLayoutGroup"
+  LAYOUT_GROUP: "Layer__TagSelectorLayoutGroup",
+  CHECK_ICON: "Layer__TagSelectorCheckIcon"
 };
 function TagSelectorLayoutGroup({ children }) {
   return /* @__PURE__ */ jsx127(Group, { className: TAG_SELECTOR_CLASS_NAMES.LAYOUT_GROUP, children });
@@ -17211,9 +17227,7 @@ function TagSelectorSelection({
                 Span,
                 {
                   slot: "value",
-                  weight: "bold",
                   ellipsis: true,
-                  size: "lg",
                   nonAria: true,
                   children: valueLabel
                 }
@@ -17384,7 +17398,10 @@ function TagSelector({
                       {
                         id: valueId,
                         textValue: `${definitionLabel} ${valueLabel}`,
-                        children: /* @__PURE__ */ jsx127(Span, { slot: "label", weight: "bold", children: valueLabel })
+                        children: /* @__PURE__ */ jsxs77(HStack, { gap: "2xs", children: [
+                          /* @__PURE__ */ jsx127(Check3, { size: 16, className: TAG_SELECTOR_CLASS_NAMES.CHECK_ICON }),
+                          /* @__PURE__ */ jsx127(Span, { slot: "label", weight: "bold", children: valueLabel })
+                        ] })
                       },
                       valueId
                     ) })
@@ -21066,7 +21083,7 @@ var FileRow = ({ file, onClearFile, asDropTarget }) => {
     return /* @__PURE__ */ jsxs103(VStack, { className: "Layer__csv-upload__file-row Layer__csv-upload__file-row--drop-target", children: [
       /* @__PURE__ */ jsxs103(HStack, { children: [
         /* @__PURE__ */ jsx166(Spacer, {}),
-        /* @__PURE__ */ jsx166(IconButton, { icon: /* @__PURE__ */ jsx166(CloseIcon_default, { size: 16 }), onClick: onClearFile })
+        /* @__PURE__ */ jsx166(Button2, { variant: "ghost", inset: true, icon: true, onClick: onClearFile, children: /* @__PURE__ */ jsx166(CloseIcon_default, { size: 16 }) })
       ] }),
       /* @__PURE__ */ jsxs103(HStack, { align: "center", justify: "center", gap: "xs", children: [
         /* @__PURE__ */ jsx166(FileSpreadsheet, { size: 24 }),
@@ -21078,7 +21095,7 @@ var FileRow = ({ file, onClearFile, asDropTarget }) => {
     /* @__PURE__ */ jsx166(FileSpreadsheet, { size: 24 }),
     /* @__PURE__ */ jsx166(P, { size: "md", children: file.name }),
     /* @__PURE__ */ jsx166(Spacer, {}),
-    /* @__PURE__ */ jsx166(IconButton, { icon: /* @__PURE__ */ jsx166(CloseIcon_default, { size: 16 }), onClick: onClearFile })
+    /* @__PURE__ */ jsx166(Button2, { variant: "ghost", inset: true, icon: true, onClick: onClearFile, children: /* @__PURE__ */ jsx166(CloseIcon_default, { size: 16 }) })
   ] });
 };
 var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
@@ -21753,12 +21770,29 @@ function UploadTransactionsConfirmationStep({ onRestartFlow, uploadedTransaction
       }
     ),
     /* @__PURE__ */ jsx173(Separator, {}),
-    /* @__PURE__ */ jsxs107(HStack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs107(HStack, { gap: "xs", className: "Layer__upload-transactions__confirmation-step__button-row", children: [
       /* @__PURE__ */ jsx173(Spacer, {}),
-      /* @__PURE__ */ jsx173(Button, { onClick: goRestartFlow, variant: "secondary" /* secondary */, rightIcon: /* @__PURE__ */ jsx173(UploadCloud_default, { size: 12 }), children: "Upload another file" }),
-      /* @__PURE__ */ jsx173(Button, { onClick: () => {
-        void next();
-      }, rightIcon: /* @__PURE__ */ jsx173(ChevronRight_default, {}), children: "I\u2019m done uploading transactions" })
+      /* @__PURE__ */ jsx173(
+        Button,
+        {
+          onClick: goRestartFlow,
+          variant: "secondary" /* secondary */,
+          rightIcon: /* @__PURE__ */ jsx173(UploadCloud_default, { size: 12 }),
+          className: "Layer__upload-transactions__confirmation-step__button-row-item",
+          children: "Upload another file"
+        }
+      ),
+      /* @__PURE__ */ jsx173(
+        Button,
+        {
+          onClick: () => {
+            void next();
+          },
+          rightIcon: /* @__PURE__ */ jsx173(ChevronRight_default, {}),
+          className: "Layer__upload-transactions__confirmation-step__button-row-item",
+          children: "I\u2019m done uploading transactions"
+        }
+      )
     ] })
   ] });
 }
@@ -21768,11 +21802,11 @@ import { jsx as jsx174, jsxs as jsxs108 } from "react/jsx-runtime";
 function UploadTransactionsHeader({ currentStep, isValid: isValid2 }) {
   if (currentStep === 2 /* Confirmation */) return null;
   return /* @__PURE__ */ jsxs108(VStack, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs108(Heading2, { level: 1, children: [
+    /* @__PURE__ */ jsxs108(Heading2, { level: 1, size: "xl", pie: "2xl", children: [
       currentStep === 0 /* UploadCsv */ && "Upload transactions",
       currentStep === 1 /* ValidateCsv */ && (isValid2 ? "Review transactions" : "Some transactions couldn't be parsed")
     ] }),
-    /* @__PURE__ */ jsxs108(Heading2, { level: 2, pbe: "xl", size: "2xs", variant: "subtle", weight: "normal", children: [
+    /* @__PURE__ */ jsxs108(Heading2, { level: 2, pbe: "xl", size: "xs", variant: "subtle", weight: "normal", children: [
       currentStep === 0 /* UploadCsv */ && "Import a file of transactions from your bank account or credit card",
       currentStep === 1 /* ValidateCsv */ && (isValid2 ? "All transactions were parsed successfully. Click \u201CUpload transactions\u201D to finalize the import." : "We found formatting errors in some transactions. Please correct the highlighted rows in your file and reupload it.")
     ] })
@@ -21852,7 +21886,7 @@ function BankTransactionsUploadModalContent({ onClose }) {
   ] });
 }
 function BankTransactionsUploadModal({ isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx175(Modal, { flexBlock: true, isOpen, onOpenChange, size: "lg", children: ({ close: close2 }) => /* @__PURE__ */ jsx175(BankTransactionsUploadModalContent, { onClose: close2 }) });
+  return /* @__PURE__ */ jsx175(Modal, { flexBlock: true, isOpen, onOpenChange, size: "lg", "aria-label": "Upload transactions", children: ({ close: close2 }) => /* @__PURE__ */ jsx175(BankTransactionsUploadModalContent, { onClose: close2 }) });
 }
 
 // src/components/BankTransactions/BankTransactionsUploadMenu.tsx
@@ -22135,17 +22169,17 @@ var BankTransactions = (_a) => {
   var _b = _a, {
     onError,
     showTags = false,
-    showCustomerVendor = false,
     mode
   } = _b, props = __objRest(_b, [
     "onError",
     "showTags",
-    "showCustomerVendor",
     "mode"
   ]);
   usePreloadTagDimensions({ isEnabled: showTags });
+  usePreloadCustomers({ isEnabled: false });
+  usePreloadVendors({ isEnabled: false });
   const contextData = useAugmentedBankTransactions({ monthlyView: props.monthlyView });
-  return /* @__PURE__ */ jsx180(ErrorBoundary, { onError, children: /* @__PURE__ */ jsx180(BankTransactionsContext.Provider, { value: contextData, children: /* @__PURE__ */ jsx180(LegacyModeProvider, { overrideMode: mode, children: /* @__PURE__ */ jsx180(BankTransactionTagVisibilityProvider, { showTags, children: /* @__PURE__ */ jsx180(BankTransactionCustomerVendorVisibilityProvider, { showCustomerVendor, children: /* @__PURE__ */ jsx180(BankTransactionsContent, __spreadValues({}, props)) }) }) }) }) });
+  return /* @__PURE__ */ jsx180(ErrorBoundary, { onError, children: /* @__PURE__ */ jsx180(BankTransactionsContext.Provider, { value: contextData, children: /* @__PURE__ */ jsx180(LegacyModeProvider, { overrideMode: mode, children: /* @__PURE__ */ jsx180(BankTransactionTagVisibilityProvider, { showTags, children: /* @__PURE__ */ jsx180(BankTransactionCustomerVendorVisibilityProvider, { showCustomerVendor: false, children: /* @__PURE__ */ jsx180(BankTransactionsContent, __spreadValues({}, props)) }) }) }) }) });
 };
 var BankTransactionsContent = ({
   asWidget = false,
@@ -28590,6 +28624,7 @@ var Edit2 = (_a) => {
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
+import { List } from "lucide-react";
 import { jsx as jsx247, jsxs as jsxs152 } from "react/jsx-runtime";
 var ChartOfAccountsTable = ({
   view,
@@ -28648,55 +28683,78 @@ var ChartOfAccountsTableContent = ({
   }, []);
   const renderChartOfAccountsDesktopRow = (account, index, rowKey, depth) => {
     var _a, _b;
-    const expandable = !!account.sub_accounts && account.sub_accounts.length > 0;
-    const expanded = expandable ? isOpen(rowKey) : true;
+    const hasSubAccounts = !!account.sub_accounts && account.sub_accounts.length > 0;
+    const isExpanded = hasSubAccounts ? isOpen(rowKey) : true;
+    const isNonEditable = !templateAccountsEditable && !!account.stable_name;
+    const onClickRow = (e) => {
+      e.stopPropagation();
+      if (hasSubAccounts) setIsOpen(rowKey);
+    };
+    const onClickAccountName = (e) => {
+      e.stopPropagation();
+      setAccountId(account.id);
+    };
+    const onClickEdit = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      editAccount(account.id);
+    };
+    const onClickView = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setAccountId(account.id);
+    };
     return /* @__PURE__ */ jsxs152(Fragment34, { children: [
       /* @__PURE__ */ jsxs152(
         TableRow,
         {
           rowKey: rowKey + "-" + index,
-          expandable,
-          isExpanded: expanded,
-          onClick: (e) => {
-            e.stopPropagation();
-            setAccountId(account.id);
-          },
+          expandable: hasSubAccounts,
+          isExpanded,
+          onClick: onClickRow,
           depth,
           children: [
             /* @__PURE__ */ jsx247(
               TableCell,
               {
-                withExpandIcon: expandable,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  expandable && setIsOpen(rowKey);
-                },
-                children: account.name
+                withExpandIcon: hasSubAccounts,
+                children: /* @__PURE__ */ jsxs152(HStack, { gap: "lg", children: [
+                  !hasSubAccounts && /* @__PURE__ */ jsx247(Spacer, {}),
+                  /* @__PURE__ */ jsx247(Button2, { variant: "text", onClick: onClickAccountName, children: account.name })
+                ] })
               }
             ),
             /* @__PURE__ */ jsx247(TableCell, { children: (_a = account.account_type) == null ? void 0 : _a.display_name }),
             /* @__PURE__ */ jsx247(TableCell, { children: (_b = account.account_subtype) == null ? void 0 : _b.display_name }),
             /* @__PURE__ */ jsx247(TableCell, { isCurrency: true, children: account.balance }),
-            /* @__PURE__ */ jsx247(TableCell, { children: /* @__PURE__ */ jsx247("span", { className: "Layer__coa__actions", children: /* @__PURE__ */ jsx247(
-              Button,
-              {
-                variant: "secondary" /* secondary */,
-                rightIcon: /* @__PURE__ */ jsx247(Edit2_default, { size: 12 }),
-                iconOnly: true,
-                disabled: !templateAccountsEditable && !!account.stable_name,
-                onClick: (e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  editAccount(account.id);
-                },
-                tooltip: !templateAccountsEditable && account.stable_name ? "System accounts cannot be modified" : void 0,
-                children: "Edit"
-              }
-            ) }) })
+            /* @__PURE__ */ jsx247(TableCell, { align: "right" /* RIGHT */, children: /* @__PURE__ */ jsxs152(HStack, { className: "Layer__coa__actions", gap: "xs", children: [
+              /* @__PURE__ */ jsx247(
+                Button,
+                {
+                  variant: "secondary" /* secondary */,
+                  rightIcon: /* @__PURE__ */ jsx247(Edit2_default, { size: 14 }),
+                  iconOnly: true,
+                  disabled: isNonEditable,
+                  onClick: onClickEdit,
+                  tooltip: isNonEditable ? "This account cannot be modified" : void 0,
+                  children: "Edit"
+                }
+              ),
+              /* @__PURE__ */ jsx247(
+                Button,
+                {
+                  variant: "secondary" /* secondary */,
+                  rightIcon: /* @__PURE__ */ jsx247(List, { size: 14 }),
+                  iconOnly: true,
+                  onClick: onClickView,
+                  children: "View"
+                }
+              )
+            ] }) })
           ]
         }
       ),
-      expandable && expanded && account.sub_accounts.map((subItem, subIdx) => {
+      hasSubAccounts && isExpanded && account.sub_accounts.map((subItem, subIdx) => {
         const subRowKey = `${rowKey}-${subItem.id}`;
         return renderChartOfAccountsDesktopRow(
           subItem,
@@ -34131,7 +34189,6 @@ var BankTransactionsWithLinkedAccounts = ({
   showDescriptions = true,
   showLedgerBalance = true,
   showReceiptUploads = true,
-  showCustomerVendor = false,
   showTags = false,
   showTooltips = false,
   showUnlinkItem = false,
@@ -34161,7 +34218,6 @@ var BankTransactionsWithLinkedAccounts = ({
             asWidget: true,
             showDescriptions,
             showReceiptUploads,
-            showCustomerVendor,
             showTags,
             showTooltips,
             showUploadOptions,

package/dist/index.css

@@ -186,10 +186,10 @@
   --outline-default: var(--color-base-300);
   --outline-active: var(--color-base-500);
   --button-bg-default: var(--color-base-1000);
-  --button-fg-default: var(--color-base-0);
+  --button-bg-disabled: var(--color-base-200);
   --button-bg-active: var(--color-base-800);
+  --button-fg-default: var(--color-base-0);
   --button-fg-disabled: var(--color-base-500);
-  --button-bg-disabled: var(--color-base-200);
   --button-fg-ghost: var(--color-base-800);
   --button-border-color-ghost: var(--color-base-300);
   --button-border-color-ghost-active: var(--color-base-800);
@@ -4432,6 +4432,7 @@ tbody .Layer__table__empty-row:first-child {
   border-top-right-radius: var(--border-radius-2xs);
 }
 .Layer__UI__Button {
+  all: unset;
   display: inline-grid;
   grid-template-rows: minmax(0, 1fr);
   grid-auto-columns: auto;
@@ -4497,9 +4498,6 @@ tbody .Layer__table__empty-row:first-child {
   background-color: transparent;
   color: var(--button-fg-disabled);
 }
-.Layer__UI__Button[data-variant=outlined][data-hovered]:not([data-pressed]) {
-  border-color: var(--button-border-color-ghost-active);
-}
 .Layer__UI__Button[data-variant=outlined][data-pressed]:not([data-focus-visible]) {
   border-color: var(--button-border-color-ghost-active);
   outline: 2px solid var(--outline-default);
@@ -4520,6 +4518,19 @@ tbody .Layer__table__empty-row:first-child {
   outline: 2px solid var(--outline-default);
   background-color: var(--button-bg-active);
 }
+.Layer__UI__Button[data-variant=text] {
+  --size: 1.75rem;
+  padding-inline: var(--spacing-xs);
+  border: none;
+  background-color: transparent;
+}
+.Layer__UI__Button[data-variant=text][data-hovered]:not([data-disabled], [data-pressed]) {
+  outline: none;
+  text-decoration: underline;
+}
+.Layer__UI__Button[data-variant=text][data-pressed]:not([data-focus-visible]) {
+  text-decoration: none;
+}
 .Layer__ButtonTransparentContent {
   opacity: 0;
   grid-row: 1/-1;
@@ -4770,8 +4781,6 @@ tbody .Layer__table__empty-row:first-child {
   z-index: 100;
   inset: 0;
   display: grid;
-  max-block-size: 100lvh;
-  max-inline-size: 100lvi;
   background: rgba(0, 0, 0, 0.5);
   place-items: center;
 }
@@ -4782,10 +4791,8 @@ tbody .Layer__table__empty-row:first-child {
   animation-duration: 150ms;
 }
 .Layer__Modal {
-  block-size: min(42rem, 90svb);
-  max-block-size: 90svb;
-  inline-size: min(36rem, 90svi);
-  max-inline-size: 90svi;
+  block-size: min(42rem, 90%);
+  inline-size: min(36rem, 90%);
 }
 .Layer__Modal[data-entering] {
   animation-duration: 300ms;
@@ -4797,7 +4804,7 @@ tbody .Layer__table__empty-row:first-child {
   block-size: auto;
 }
 .Layer__Modal[data-size=lg] {
-  inline-size: min(42rem, 90svi);
+  inline-size: min(42rem, 90%);
 }
 .Layer__Dialog {
   display: flex;
@@ -5213,33 +5220,63 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-pbe="3xs"] {
   padding-block-end: var(--spacing-3xs);
 }
+.Layer__UI__Heading[data-pie="3xs"] {
+  padding-inline-end: var(--spacing-3xs);
+}
 .Layer__UI__Heading[data-pbe="2xs"] {
   padding-block-end: var(--spacing-2xs);
 }
+.Layer__UI__Heading[data-pie="2xs"] {
+  padding-inline-end: var(--spacing-2xs);
+}
 .Layer__UI__Heading[data-pbe=xs] {
   padding-block-end: var(--spacing-xs);
 }
+.Layer__UI__Heading[data-pie=xs] {
+  padding-inline-end: var(--spacing-xs);
+}
 .Layer__UI__Heading[data-pbe=sm] {
   padding-block-end: var(--spacing-sm);
 }
+.Layer__UI__Heading[data-pie=sm] {
+  padding-inline-end: var(--spacing-sm);
+}
 .Layer__UI__Heading[data-pbe=md] {
   padding-block-end: var(--spacing-md);
 }
+.Layer__UI__Heading[data-pie=md] {
+  padding-inline-end: var(--spacing-md);
+}
 .Layer__UI__Heading[data-pbe=lg] {
   padding-block-end: var(--spacing-lg);
 }
+.Layer__UI__Heading[data-pie=lg] {
+  padding-inline-end: var(--spacing-lg);
+}
 .Layer__UI__Heading[data-pbe=xl] {
   padding-block-end: var(--spacing-xl);
 }
+.Layer__UI__Heading[data-pie=xl] {
+  padding-inline-end: var(--spacing-xl);
+}
 .Layer__UI__Heading[data-pbe="2xl"] {
   padding-block-end: var(--spacing-2xl);
 }
+.Layer__UI__Heading[data-pie="2xl"] {
+  padding-inline-end: var(--spacing-2xl);
+}
 .Layer__UI__Heading[data-pbe="3xl"] {
   padding-block-end: var(--spacing-3xl);
 }
+.Layer__UI__Heading[data-pie="3xl"] {
+  padding-inline-end: var(--spacing-3xl);
+}
 .Layer__UI__Heading[data-pbe="5xl"] {
   padding-block-end: var(--spacing-5xl);
 }
+.Layer__UI__Heading[data-pie="5xl"] {
+  padding-inline-end: var(--spacing-5xl);
+}
 .Layer__UI__Heading[data-size="2xs"] {
   font-size: var(--text-heading-2xs);
 }
@@ -7459,7 +7496,7 @@ tbody .Layer__table__empty-row:first-child {
   flex: auto;
 }
 .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input .Layer__select__control {
-  width: 24rem;
+  max-width: 24rem;
 }
 .Layer__upload-transactions .Layer__upload-transactions__select-account-name-input--error .Layer__select__control {
   box-shadow: 0 0 0 1px var(--color-base-300), 0 0 0 2px var(--color-danger);
@@ -7484,7 +7521,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   justify-content: space-between;
 }
-@container (max-width: 576px) {
+@container (max-width: 36rem) {
   .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row {
     flex-direction: column;
   }
@@ -7492,16 +7529,24 @@ tbody .Layer__table__empty-row:first-child {
     width: 100%;
   }
 }
+@container (max-width: 30rem) {
+  .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row {
+    flex-direction: column;
+  }
+  .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row > .Layer__upload-transactions__confirmation-step__button-row-item {
+    width: 100%;
+  }
+}
 .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__data-state .Layer__data-state__description {
   margin-bottom: 0;
 }
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--date,
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--date {
-  min-width: 120px;
+  min-width: 7.5rem;
 }
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount,
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount {
-  min-width: 120px;
+  min-width: 7.5rem;
 }
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content,
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content {
@@ -7514,12 +7559,16 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--description,
 .Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--description {
   flex: 3 1 0;
+  min-width: 12rem;
 }
 .Layer__TagSelectorLayoutGroup {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--spacing-xs);
 }
+.Layer__ListBoxItem:not([data-disabled]) .Layer__TagSelectorCheckIcon {
+  visibility: hidden;
+}
 .Layer__Public,
 .Layer__Public::before,
 .Layer__Public::after,

package/dist/index.d.ts

@@ -1567,9 +1567,8 @@ declare module '@layerfi/components/components/BankTransactions/BankTransactions
   export interface BankTransactionsWithErrorProps extends BankTransactionsProps {
       onError?: (error: LayerError) => void;
       showTags?: boolean;
-      showCustomerVendor?: boolean;
   }
-  export const BankTransactions: ({ onError, showTags, showCustomerVendor, mode, ...props }: BankTransactionsWithErrorProps) => import("react/jsx-runtime").JSX.Element;
+  export const BankTransactions: ({ onError, showTags, mode, ...props }: BankTransactionsWithErrorProps) => import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/BankTransactions/BankTransactionsHeader' {
@@ -5007,14 +5006,13 @@ declare module '@layerfi/components/components/domain/transactions/searchField/T
 }
 declare module '@layerfi/components/components/ui/Button/Button' {
   import { type ButtonProps } from 'react-aria-components';
-  type ButtonVariant = 'solid' | 'ghost' | 'outlined';
+  type ButtonVariant = 'solid' | 'ghost' | 'outlined' | 'text';
   type ButtonSize = 'md';
   const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "className"> & {
       icon?: true;
       inset?: true;
       size?: ButtonSize;
       variant?: ButtonVariant;
-      persistentBorder?: boolean;
   } & import("react").RefAttributes<HTMLButtonElement>>;
   export { Button };
 
@@ -5148,9 +5146,9 @@ declare module '@layerfi/components/components/ui/Modal/Modal' {
   const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "className"> & import("react").RefAttributes<HTMLElement>>;
   type AllowedModalOverlayProps = Pick<ComponentProps<typeof ModalOverlay>, 'isOpen' | 'onOpenChange'>;
   type AllowedInternalModalProps = Pick<ComponentProps<typeof InternalModal>, 'flexBlock' | 'size'>;
-  type AllowedDialogProps = Pick<ComponentProps<typeof Dialog>, 'children' | 'role'>;
+  type AllowedDialogProps = Pick<ComponentProps<typeof Dialog>, 'children' | 'role' | 'aria-label'>;
   export type ModalProps = AllowedModalOverlayProps & AllowedInternalModalProps & AllowedDialogProps;
-  export function Modal({ isOpen, size, flexBlock, onOpenChange, children, role, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+  export function Modal({ isOpen, size, flexBlock, onOpenChange, children, 'aria-label': ariaLabel, role, }: ModalProps): import("react/jsx-runtime").JSX.Element;
   export {};
 
 }
@@ -5169,6 +5167,7 @@ declare module '@layerfi/components/components/ui/Modal/ModalSlots' {
   export const ModalHeading: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react-aria-components").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>, "className"> & {
       align?: "center";
       pbe?: import("@layerfi/components/components/ui/sharedUITypes").Spacing;
+      pie?: import("@layerfi/components/components/ui/sharedUITypes").Spacing;
       size?: "2xs" | "xs" | "sm" | "lg" | "xl";
       variant?: "subtle";
       weight?: "normal" | "bold";
@@ -5303,6 +5302,7 @@ declare module '@layerfi/components/components/ui/Typography/Heading' {
   type HeadingDataProps = {
       align?: 'center';
       pbe?: Spacing;
+      pie?: Spacing;
       size?: '2xs' | 'xs' | 'sm' | 'lg' | 'xl';
       variant?: 'subtle';
       weight?: 'normal' | 'bold';
@@ -6194,8 +6194,10 @@ declare module '@layerfi/components/features/customers/api/useListCustomers' {
   }
   type UseListCustomersParams = {
       query?: string;
+      isEnabled?: boolean;
   };
-  export function useListCustomers({ query }: UseListCustomersParams): ListCustomersSWRResponse;
+  export function useListCustomers({ query, isEnabled }?: UseListCustomersParams): ListCustomersSWRResponse;
+  export function usePreloadCustomers(parameters?: UseListCustomersParams): void;
   export {};
 
 }
@@ -6515,8 +6517,10 @@ declare module '@layerfi/components/features/vendors/api/useListVendors' {
   }
   type UseListVendorsParameters = {
       query?: string;
+      isEnabled?: boolean;
   };
-  export function useListVendors({ query }: UseListVendorsParameters): ListVendorsSWRResponse;
+  export function useListVendors({ query, isEnabled }?: UseListVendorsParameters): ListVendorsSWRResponse;
+  export function usePreloadVendors(parameters?: UseListVendorsParameters): void;
   export {};
 
 }
@@ -10219,7 +10223,6 @@ declare module '@layerfi/components/views/BankTransactionsWithLinkedAccounts/Ban
       showDescriptions?: boolean;
       showLedgerBalance?: boolean;
       showReceiptUploads?: boolean;
-      showCustomerVendor?: boolean;
       showTags?: boolean;
       showTooltips?: boolean;
       showUnlinkItem?: boolean;
@@ -10231,7 +10234,7 @@ declare module '@layerfi/components/views/BankTransactionsWithLinkedAccounts/Ban
       mobileComponent?: MobileComponentType;
       stringOverrides?: BankTransactionsWithLinkedAccountsStringOverrides;
   }
-  export const BankTransactionsWithLinkedAccounts: ({ title, showTitle, elevatedLinkedAccounts, mode, showBreakConnection, showDescriptions, showLedgerBalance, showReceiptUploads, showCustomerVendor, showTags, showTooltips, showUnlinkItem, showUploadOptions, mobileComponent, stringOverrides, }: BankTransactionsWithLinkedAccountsProps) => import("react/jsx-runtime").JSX.Element;
+  export const BankTransactionsWithLinkedAccounts: ({ title, showTitle, elevatedLinkedAccounts, mode, showBreakConnection, showDescriptions, showLedgerBalance, showReceiptUploads, showTags, showTooltips, showUnlinkItem, showUploadOptions, mobileComponent, stringOverrides, }: BankTransactionsWithLinkedAccountsProps) => import("react/jsx-runtime").JSX.Element;
   export {};
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.102-alpha.5",
+  "version": "0.1.102",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -66,9 +66,9 @@
     "npm-dts": "^1.3.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "stylelint": "^16.20.0",
+    "stylelint": "^16.21.0",
     "stylelint-config-standard": "^38.0.0",
-    "stylelint-config-standard-scss": "^15.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-order": "^7.0.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.0"