@layerfi/components 0.1.108-alpha.1 → 0.1.108

package/dist/cjs/index.cjs

@@ -5603,7 +5603,7 @@ var import_react12 = require("react");
 var import_react10 = require("react");
 
 // package.json
-var version = "0.1.108-alpha.1";
+var version = "0.1.108";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -8895,13 +8895,9 @@ var getEffectiveDateRangeForMode = (mode, { start, end }) => {
 };
 function useGlobalDateRange({ displayMode = "monthPicker" }) {
   const store = (0, import_react11.useContext)(GlobalDateStoreContext);
-  const rawStart = useStoreWithDateSelected(store, ({ start: start2 }) => start2);
-  const rawEnd = useStoreWithDateSelected(store, ({ end: end2 }) => end2);
-  const { start, end } = getEffectiveDateRangeForMode(displayMode, { start: rawStart, end: rawEnd });
-  return {
-    start,
-    end
-  };
+  const rawStart = useStoreWithDateSelected(store, ({ start }) => start);
+  const rawEnd = useStoreWithDateSelected(store, ({ end }) => end);
+  return (0, import_react11.useMemo)(() => getEffectiveDateRangeForMode(displayMode, { start: rawStart, end: rawEnd }), [displayMode, rawEnd, rawStart]);
 }
 function useGlobalDateRangeActions() {
   const store = (0, import_react11.useContext)(GlobalDateStoreContext);
@@ -13229,15 +13225,16 @@ Button2.displayName = "Button";
 // src/components/ui/Typography/Heading.tsx
 var import_react40 = require("react");
 var import_react_aria_components7 = require("react-aria-components");
+var import_classnames22 = __toESM(require("classnames"));
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var HEADING_CLASS_NAME = "Layer__UI__Heading";
 var Heading2 = (0, import_react40.forwardRef)((_a, ref) => {
-  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 });
+  var _b = _a, { align, pie, pbe, size, variant, weight, ellipsis, className } = _b, restProps = __objRest(_b, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
+  const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight, ellipsis });
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     import_react_aria_components7.Heading,
     __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
-      className: HEADING_CLASS_NAME,
+      className: (0, import_classnames22.default)(HEADING_CLASS_NAME, className),
       ref
     })
   );
@@ -13245,13 +13242,13 @@ var Heading2 = (0, import_react40.forwardRef)((_a, ref) => {
 Heading2.displayName = "Heading";
 
 // src/components/ui/Modal/ModalSlots.tsx
-var import_classnames22 = __toESM(require("classnames"));
+var import_classnames23 = __toESM(require("classnames"));
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var MODAL_CLOSE_BUTTON_CLASS_NAME = "Layer__ModalCloseButton";
 var ModalCloseButton = ({ onClose, positionAbsolute = false }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   "div",
   {
-    className: (0, import_classnames22.default)(
+    className: (0, import_classnames23.default)(
       MODAL_CLOSE_BUTTON_CLASS_NAME,
       positionAbsolute && `${MODAL_CLOSE_BUTTON_CLASS_NAME}--position-absolute`
     ),
@@ -13323,7 +13320,7 @@ function ModalActions({ children }) {
 
 // src/components/ui/Stack/Stack.tsx
 var import_react42 = require("react");
-var import_classnames23 = __toESM(require("classnames"));
+var import_classnames24 = __toESM(require("classnames"));
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var CLASS_NAME2 = "Layer__Stack";
 var Stack = (0, import_react42.forwardRef)(
@@ -13378,7 +13375,7 @@ var Stack = (0, import_react42.forwardRef)(
       __spreadProps(__spreadValues(__spreadValues({
         ref
       }, restProps), dataProperties), {
-        className: (0, import_classnames23.default)(CLASS_NAME2, className),
+        className: (0, import_classnames24.default)(CLASS_NAME2, className),
         children
       })
     );
@@ -13652,7 +13649,7 @@ var LinkedAccountItemThumb = ({
 };
 
 // src/components/LinkedAccounts/LinkedAccountsContent.tsx
-var import_classnames25 = __toESM(require("classnames"));
+var import_classnames26 = __toESM(require("classnames"));
 
 // src/components/LinkedAccounts/ConfirmationModal/LinkedAccountsConfirmationModal.tsx
 var import_react47 = require("react");
@@ -13686,7 +13683,7 @@ function ConditionalList({
 var import_lucide_react4 = require("lucide-react");
 var import_react46 = require("react");
 var import_react_aria_components8 = require("react-aria-components");
-var import_classnames24 = __toESM(require("classnames"));
+var import_classnames25 = __toESM(require("classnames"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var CLASS_NAME3 = "Layer__Checkbox";
 function Checkbox(_a) {
@@ -13699,7 +13696,7 @@ function Checkbox(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     import_react_aria_components8.Checkbox,
     __spreadProps(__spreadValues(__spreadValues({}, dataProperties), props), {
-      className: (0, import_classnames24.default)(CLASS_NAME3, className),
+      className: (0, import_classnames25.default)(CLASS_NAME3, className),
       children: withRenderProp(children, (node) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { slot: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_lucide_react4.Check, { size: size === "lg" ? 16 : 12 }) }),
         node
@@ -14001,7 +13998,7 @@ var LinkedAccountsContent = ({
   showBreakConnection
 }) => {
   const { data, addConnection } = (0, import_react48.useContext)(LinkedAccountsContext);
-  const linkedAccountsNewAccountClassName = (0, import_classnames25.default)(
+  const linkedAccountsNewAccountClassName = (0, import_classnames26.default)(
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget",
     showLedgerBalance && "--show-ledger-balance",
@@ -14077,7 +14074,7 @@ var isDateAllowedToBrowse = (date, business) => {
 var import_react54 = require("react");
 
 // src/components/Input/Input.tsx
-var import_classnames26 = __toESM(require("classnames"));
+var import_classnames27 = __toESM(require("classnames"));
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var Input = (_a) => {
   var _b = _a, {
@@ -14091,7 +14088,7 @@ var Input = (_a) => {
     "errorMessage",
     "leftText"
   ]);
-  const baseClassName = (0, import_classnames26.default)(
+  const baseClassName = (0, import_classnames27.default)(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
@@ -14107,7 +14104,7 @@ var Input = (_a) => {
 };
 
 // src/components/Input/InputGroup.tsx
-var import_classnames27 = __toESM(require("classnames"));
+var import_classnames28 = __toESM(require("classnames"));
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var InputGroup = ({
   label,
@@ -14116,7 +14113,7 @@ var InputGroup = ({
   inline,
   children
 }) => {
-  const baseClassName = (0, import_classnames27.default)(
+  const baseClassName = (0, import_classnames28.default)(
     "Layer__input-group",
     className,
     inline && "Layer__input-group--inline"
@@ -14293,7 +14290,7 @@ var ChevronDownFill = (_a) => {
 var ChevronDownFill_default = ChevronDownFill;
 
 // src/components/Input/Select.tsx
-var import_classnames28 = __toESM(require("classnames"));
+var import_classnames29 = __toESM(require("classnames"));
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var Select = ({
   name,
@@ -14310,7 +14307,7 @@ var Select = ({
   isLoading,
   formatOptionLabel: formatOptionLabel2
 }) => {
-  const baseClassName = (0, import_classnames28.default)(
+  const baseClassName = (0, import_classnames29.default)(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -14341,13 +14338,13 @@ var Select = ({
 };
 
 // src/components/Input/InputWithBadge.tsx
-var import_classnames29 = __toESM(require("classnames"));
+var import_classnames30 = __toESM(require("classnames"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
 
 // src/components/Input/MultiSelect.tsx
 var import_react51 = require("react");
 var import_react_select2 = __toESM(require("react-select"));
-var import_classnames30 = __toESM(require("classnames"));
+var import_classnames31 = __toESM(require("classnames"));
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var MultiSelect = ({
   name,
@@ -14365,7 +14362,7 @@ var MultiSelect = ({
   inputId,
   isLoading
 }) => {
-  const baseClassName = (0, import_classnames30.default)(
+  const baseClassName = (0, import_classnames31.default)(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -14399,7 +14396,7 @@ var MultiSelect = ({
 };
 
 // src/components/Input/AmountInput.tsx
-var import_classnames31 = __toESM(require("classnames"));
+var import_classnames32 = __toESM(require("classnames"));
 var import_react_currency_input_field = __toESM(require("react-currency-input-field"));
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var transformCurrencyValue = (rawValue) => {
@@ -14430,7 +14427,7 @@ var AmountInput = (_a) => {
     "badge",
     "placeholder"
   ]);
-  const baseClassName = (0, import_classnames31.default)(
+  const baseClassName = (0, import_classnames32.default)(
     "Layer__input Layer__amount-input",
     badge ? "Layer__amount-input--align-left" : "Layer__amount-input--align-right",
     isInvalid ? "Layer__input--error" : "",
@@ -14604,7 +14601,7 @@ var DatePickerOptions = ({
 };
 
 // src/components/DatePicker/DatePicker.tsx
-var import_classnames32 = __toESM(require("classnames"));
+var import_classnames33 = __toESM(require("classnames"));
 var import_date_fns8 = require("date-fns");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var ReactDatePicker = RDP.default.default || RDP.default || RDP;
@@ -14729,21 +14726,21 @@ var DatePicker = (_a) => {
     return [selected[0], null];
   }, [selected, displayMode]);
   const { isDesktop } = useSizeClass();
-  const wrapperClassNames = (0, import_classnames32.default)(
+  const wrapperClassNames = (0, import_classnames33.default)(
     "Layer__datepicker__wrapper",
     displayMode === "timePicker" && "Layer__datepicker__time__wrapper",
     showNavigationArrows(navigateArrows, isDesktop) && "Layer__datepicker__wrapper--arrows"
   );
-  const datePickerWrapperClassNames = (0, import_classnames32.default)(
+  const datePickerWrapperClassNames = (0, import_classnames33.default)(
     "Layer__datepicker",
     displayMode === "timePicker" && "Layer__datepicker__time",
     wrapperClassName
   );
-  const calendarClassNames = (0, import_classnames32.default)(
+  const calendarClassNames = (0, import_classnames33.default)(
     "Layer__datepicker__calendar",
     calendarClassName
   );
-  const popperClassNames = (0, import_classnames32.default)(
+  const popperClassNames = (0, import_classnames33.default)(
     "Layer__datepicker__popper",
     displayMode === "timePicker" && "Layer__datepicker__time__popper",
     popperClassName
@@ -14913,7 +14910,7 @@ var DatePicker = (_a) => {
         Button,
         {
           "aria-label": "Previous Date",
-          className: (0, import_classnames32.default)(
+          className: (0, import_classnames33.default)(
             "Layer__datepicker__prev-button",
             isBeforeMinDate && "Layer__datepicker__button--disabled"
           ),
@@ -14935,7 +14932,7 @@ var DatePicker = (_a) => {
         {
           "aria-label": "Next Date",
           variant: "secondary" /* secondary */,
-          className: (0, import_classnames32.default)(
+          className: (0, import_classnames33.default)(
             "Layer__datepicker__next-button",
             isTodayOrAfter ? "Layer__datepicker__button--disabled" : void 0
           ),
@@ -15898,7 +15895,7 @@ var MinimizeTwo = (_a) => {
 var MinimizeTwo_default = MinimizeTwo;
 
 // src/components/CategorySelect/CategorySelect.tsx
-var import_classnames34 = __toESM(require("classnames"));
+var import_classnames35 = __toESM(require("classnames"));
 var import_date_fns12 = require("date-fns");
 
 // src/hooks/categories/useCategories.ts
@@ -15945,7 +15942,7 @@ function useCategories({ mode } = {}) {
 var import_react60 = require("react");
 
 // src/components/ActionableList/ActionableList.tsx
-var import_classnames33 = __toESM(require("classnames"));
+var import_classnames34 = __toESM(require("classnames"));
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var ActionableList = ({
   options: options3,
@@ -15954,12 +15951,12 @@ var ActionableList = ({
   showDescriptions = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("ul", { className: (0, import_classnames33.default)("Layer__actionable-list", className), children: options3.map((x, idx) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("ul", { className: (0, import_classnames34.default)("Layer__actionable-list", className), children: options3.map((x, idx) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "li",
     {
       role: "button",
       onClick: () => onClick(x),
-      className: (0, import_classnames33.default)(
+      className: (0, import_classnames34.default)(
         x.secondary && "Layer__actionable-list-item--secondary",
         x.asLink && "Layer__actionable-list-item--as-link",
         selectedId === x.id && "Layer__actionable-list__item--selected"
@@ -16495,7 +16492,7 @@ var GroupHeading = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
     import_react_select3.components.GroupHeading,
     __spreadValues({
-      className: (0, import_classnames34.default)(
+      className: (0, import_classnames35.default)(
         props.className,
         props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
       )
@@ -16648,7 +16645,7 @@ var CategorySelect = ({
         "button",
         {
           "aria-label": "Select category",
-          className: (0, import_classnames34.default)(
+          className: (0, import_classnames35.default)(
             "Layer__category-menu__drawer-btn",
             selected && "Layer__category-menu__drawer-btn--selected"
           ),
@@ -17044,7 +17041,7 @@ var Eye = (_a) => {
 var Eye_default = Eye;
 
 // src/components/FileThumb/FileThumb.tsx
-var import_classnames35 = __toESM(require("classnames"));
+var import_classnames36 = __toESM(require("classnames"));
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var FileThumb = ({
   url,
@@ -17063,7 +17060,7 @@ var FileThumb = ({
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
     "div",
     {
-      className: (0, import_classnames35.default)(
+      className: (0, import_classnames36.default)(
         "Layer__file-thumb",
         floatingActions && "Layer__file-thumb--floating"
       ),
@@ -17096,7 +17093,7 @@ var FileThumb = ({
         enableOpen || enableDownload || onDelete ? /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
           "div",
           {
-            className: (0, import_classnames35.default)(
+            className: (0, import_classnames36.default)(
               "Layer__file-thumb__actions",
               floatingActions && "Layer__file-thumb__actions--floating"
             ),
@@ -17358,7 +17355,7 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-var import_classnames36 = __toESM(require("classnames"));
+var import_classnames37 = __toESM(require("classnames"));
 var import_date_fns15 = require("date-fns");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var MatchForm = ({
@@ -17395,7 +17392,7 @@ var MatchForm = ({
       return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
         "div",
         {
-          className: (0, import_classnames36.default)(
+          className: (0, import_classnames37.default)(
             `${classNamePrefix}__match-row`,
             suggestedMatch.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
           ),
@@ -17450,7 +17447,7 @@ var MatchForm = ({
 };
 
 // src/components/MatchForm/MatchFormMobile.tsx
-var import_classnames37 = __toESM(require("classnames"));
+var import_classnames38 = __toESM(require("classnames"));
 var import_date_fns16 = require("date-fns");
 var import_jsx_runtime115 = require("react/jsx-runtime");
 var MatchFormMobile = ({
@@ -17469,7 +17466,7 @@ var MatchFormMobile = ({
       return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
         "div",
         {
-          className: (0, import_classnames37.default)(
+          className: (0, import_classnames38.default)(
             `${classNamePrefix}__match-item`,
             match.id === selectedMatchId ? `${classNamePrefix}__match-item--selected` : ""
           ),
@@ -17537,7 +17534,7 @@ var MatchFormMobile = ({
 
 // src/components/Toggle/Toggle.tsx
 var import_react66 = require("react");
-var import_classnames38 = __toESM(require("classnames"));
+var import_classnames39 = __toESM(require("classnames"));
 var import_jsx_runtime116 = require("react/jsx-runtime");
 var import_react67 = require("react");
 var Toggle = ({
@@ -17558,7 +17555,7 @@ var Toggle = ({
       setCurrentWidth(c.width);
     }
   });
-  const baseClassName = (0, import_classnames38.default)(
+  const baseClassName = (0, import_classnames39.default)(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -17643,7 +17640,7 @@ var ToggleOption = ({
   style,
   index
 }) => {
-  const optionClassName = (0, import_classnames38.default)("Layer__toggle-option", {
+  const optionClassName = (0, import_classnames39.default)("Layer__toggle-option", {
     "Layer__toggle-option--active": checked
   });
   if (disabled) {
@@ -17808,10 +17805,10 @@ var Notification = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_classnames41 = __toESM(require("classnames"));
+var import_classnames42 = __toESM(require("classnames"));
 
 // src/components/Textarea/Textarea.tsx
-var import_classnames39 = __toESM(require("classnames"));
+var import_classnames40 = __toESM(require("classnames"));
 var import_jsx_runtime118 = require("react/jsx-runtime");
 var Textarea = (_a) => {
   var _b = _a, {
@@ -17823,7 +17820,7 @@ var Textarea = (_a) => {
     "isInvalid",
     "errorMessage"
   ]);
-  const baseClassName = (0, import_classnames39.default)(
+  const baseClassName = (0, import_classnames40.default)(
     "Layer__textarea",
     isInvalid ? "Layer__textarea--error" : "",
     className
@@ -18285,7 +18282,7 @@ function useDebouncedSearchInput({
 // src/components/ui/ComboBox/ComboBox.tsx
 var import_react_select4 = __toESM(require("react-select"));
 var import_react72 = require("react");
-var import_classnames40 = __toESM(require("classnames"));
+var import_classnames41 = __toESM(require("classnames"));
 
 // src/components/ui/Portal/Portal.tsx
 var PORTAL_CLASS_NAME = "Layer__Portal";
@@ -18299,7 +18296,7 @@ var COMBO_BOX_CLASS_NAMES = {
   VALUE_CONTAINER: "Layer__ComboBoxValueContainer",
   PLACEHOLDER: "Layer__ComboBoxPlaceholder",
   INDICATORS_CONTAINER: "Layer__ComboBoxIndicatorsContainer",
-  MENU: (0, import_classnames40.default)(
+  MENU: (0, import_classnames41.default)(
     PORTAL_CLASS_NAME,
     "Layer__ComboBoxMenu"
   ),
@@ -18343,7 +18340,7 @@ function buildCustomComboBoxOption({
     return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
       import_react_select4.components.Option,
       __spreadProps(__spreadValues({}, restProps), {
-        className: (0, import_classnames40.default)(
+        className: (0, import_classnames41.default)(
           COMBO_BOX_CLASS_NAMES.OPTION,
           isFocused ? `${COMBO_BOX_CLASS_NAMES.OPTION}--focused` : void 0,
           effectiveIsSelected ? `${COMBO_BOX_CLASS_NAMES.OPTION}--selected` : void 0,
@@ -18521,7 +18518,7 @@ function ComboBox(_a) {
         className,
         classNames: {
           container: () => COMBO_BOX_CLASS_NAMES.CONTAINER,
-          control: ({ isFocused, isDisabled: isDisabled2 }) => (0, import_classnames40.default)(
+          control: ({ isFocused, isDisabled: isDisabled2 }) => (0, import_classnames41.default)(
             COMBO_BOX_CLASS_NAMES.CONTROL,
             isFocused && `${COMBO_BOX_CLASS_NAMES.CONTROL}--focused`,
             isDisabled2 && `${COMBO_BOX_CLASS_NAMES.CONTROL}--disabled`,
@@ -18529,7 +18526,7 @@ function ComboBox(_a) {
           ),
           valueContainer: () => COMBO_BOX_CLASS_NAMES.VALUE_CONTAINER,
           placeholder: () => COMBO_BOX_CLASS_NAMES.PLACEHOLDER,
-          indicatorsContainer: () => (0, import_classnames40.default)(
+          indicatorsContainer: () => (0, import_classnames41.default)(
             COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER,
             isReadOnly && `${COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER}--readonly`
           ),
@@ -19973,7 +19970,7 @@ var ExpandedBankTransactionRow = (0, import_react86.forwardRef)(
                   /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                     "div",
                     {
-                      className: (0, import_classnames41.default)(
+                      className: (0, import_classnames42.default)(
                         `${className}__match`,
                         `${className}__content-panel`,
                         purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
@@ -19997,7 +19994,7 @@ var ExpandedBankTransactionRow = (0, import_react86.forwardRef)(
                   /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
                     "div",
                     {
-                      className: (0, import_classnames41.default)(
+                      className: (0, import_classnames42.default)(
                         `${className}__splits`,
                         `${className}__content-panel`,
                         purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
@@ -20180,7 +20177,7 @@ var SplitTooltipDetails = ({
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_classnames42 = __toESM(require("classnames"));
+var import_classnames43 = __toESM(require("classnames"));
 var import_date_fns17 = require("date-fns");
 
 // src/hooks/bookkeeping/periods/useBookkeepingPeriods.ts
@@ -20554,7 +20551,7 @@ var BankTransactionRow = ({
   const { isVisible } = useDelayedVisibility({ delay: index * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames42.default)(
+  const rowClassName = (0, import_classnames43.default)(
     className,
     bankTransaction.recently_categorized && editable && shouldHideAfterCategorize() ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -20632,7 +20629,7 @@ var BankTransactionRow = ({
       /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
         "td",
         {
-          className: (0, import_classnames42.default)(
+          className: (0, import_classnames43.default)(
             "Layer__table-cell",
             "Layer__table-cell__category-col",
             `${className}__actions-cell`,
@@ -20815,7 +20812,7 @@ var Assignment = ({ bankTransaction }) => {
 };
 
 // src/components/BankTransactionList/BankTransactionListItem.tsx
-var import_classnames43 = __toESM(require("classnames"));
+var import_classnames44 = __toESM(require("classnames"));
 var import_date_fns19 = require("date-fns");
 var import_jsx_runtime139 = require("react/jsx-runtime");
 var BankTransactionListItem = ({
@@ -20882,7 +20879,7 @@ var BankTransactionListItem = ({
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames43.default)(
+  const rowClassName = (0, import_classnames44.default)(
     className,
     bankTransaction.recently_categorized && editable && shouldHideAfterCategorize() ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -21055,7 +21052,7 @@ var Paperclip = (_a) => {
 var Paperclip_default = Paperclip;
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
-var import_classnames44 = __toESM(require("classnames"));
+var import_classnames45 = __toESM(require("classnames"));
 var import_jsx_runtime142 = require("react/jsx-runtime");
 var BusinessForm = ({
   bankTransaction,
@@ -21151,7 +21148,7 @@ var BusinessForm = ({
       /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
         "div",
         {
-          className: (0, import_classnames44.default)(
+          className: (0, import_classnames45.default)(
             "Layer__bank-transaction-mobile-list-item__receipts",
             hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
           ),
@@ -21226,7 +21223,7 @@ var PersonalCategories = /* @__PURE__ */ ((PersonalCategories2) => {
 })(PersonalCategories || {});
 
 // src/components/BankTransactionMobileList/PersonalForm.tsx
-var import_classnames45 = __toESM(require("classnames"));
+var import_classnames46 = __toESM(require("classnames"));
 var import_jsx_runtime143 = require("react/jsx-runtime");
 var isAlreadyAssigned = (bankTransaction) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ || (bankTransaction == null ? void 0 : bankTransaction.categorization_status) === "SPLIT" /* SPLIT */) {
@@ -21280,7 +21277,7 @@ var PersonalForm = ({
     /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
       "div",
       {
-        className: (0, import_classnames45.default)(
+        className: (0, import_classnames46.default)(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -21327,7 +21324,7 @@ var import_react94 = require("react");
 
 // src/components/BankTransactionMobileList/MatchForm.tsx
 var import_react92 = require("react");
-var import_classnames46 = __toESM(require("classnames"));
+var import_classnames47 = __toESM(require("classnames"));
 var import_jsx_runtime144 = require("react/jsx-runtime");
 var MatchForm2 = ({
   bankTransaction,
@@ -21389,7 +21386,7 @@ var MatchForm2 = ({
     /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
       "div",
       {
-        className: (0, import_classnames46.default)(
+        className: (0, import_classnames47.default)(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -21434,7 +21431,7 @@ var MatchForm2 = ({
 
 // src/components/BankTransactionMobileList/SplitForm.tsx
 var import_react93 = require("react");
-var import_classnames47 = __toESM(require("classnames"));
+var import_classnames48 = __toESM(require("classnames"));
 var import_jsx_runtime145 = require("react/jsx-runtime");
 var SplitForm = ({
   bankTransaction,
@@ -21607,7 +21604,7 @@ var SplitForm = ({
                 {
                   type: "text",
                   name: `split-${index}`,
-                  className: (0, import_classnames47.default)(
+                  className: (0, import_classnames48.default)(
                     "Layer__split-amount-input",
                     index === 0 && "Layer__split-amount-input--first"
                   ),
@@ -21655,7 +21652,7 @@ var SplitForm = ({
     /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
       "div",
       {
-        className: (0, import_classnames47.default)(
+        className: (0, import_classnames48.default)(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -21806,7 +21803,7 @@ var TransactionToOpenContext = (0, import_react95.createContext)({
 });
 
 // src/components/BankTransactionMobileList/BankTransactionMobileListItem.tsx
-var import_classnames48 = __toESM(require("classnames"));
+var import_classnames49 = __toESM(require("classnames"));
 var import_date_fns20 = require("date-fns");
 var import_jsx_runtime148 = require("react/jsx-runtime");
 var DATE_FORMAT2 = "LLL d";
@@ -21911,7 +21908,7 @@ var BankTransactionMobileListItem = ({
   const { isVisible } = useDelayedVisibility({ delay: index * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames48.default)(
+  const rowClassName = (0, import_classnames49.default)(
     className,
     removeAnim ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -22047,14 +22044,14 @@ var BankTransactionMobileList = ({
 var import_react97 = require("react");
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-var import_classnames49 = __toESM(require("classnames"));
+var import_classnames50 = __toESM(require("classnames"));
 var import_jsx_runtime150 = require("react/jsx-runtime");
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = (0, import_classnames49.default)(
+  const baseClassName = (0, import_classnames50.default)(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -22067,7 +22064,7 @@ var FallbackWithSkeletonLoader = ({
   children,
   className
 }) => {
-  const baseClassName = (0, import_classnames49.default)(
+  const baseClassName = (0, import_classnames50.default)(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -22170,7 +22167,7 @@ var BankTransactionsLoader = ({
 };
 
 // src/components/SyncingComponent/SyncingComponent.tsx
-var import_classnames50 = __toESM(require("classnames"));
+var import_classnames51 = __toESM(require("classnames"));
 var import_jsx_runtime153 = require("react/jsx-runtime");
 var SyncingComponent = ({
   title = "Syncing account data",
@@ -22192,7 +22189,7 @@ var SyncingComponent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
     "div",
     {
-      className: (0, import_classnames50.default)(
+      className: (0, import_classnames51.default)(
         "Layer__syncing-component",
         inProgress ? "Layer__syncing-component--with-border" : ""
       ),
@@ -22340,7 +22337,7 @@ var ErrorBoundary = class extends import_react98.Component {
 };
 
 // src/components/Pagination/Pagination.tsx
-var import_classnames51 = __toESM(require("classnames"));
+var import_classnames52 = __toESM(require("classnames"));
 
 // src/hooks/usePaginationRange/usePaginationRange.ts
 var import_react99 = require("react");
@@ -22408,7 +22405,7 @@ var Pagination = ({
     return null;
   }
   const lastPage = paginationRange[paginationRange.length - 1];
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(VStack, { className: (0, import_classnames51.default)("Layer__pagination-container", className), fluid: true, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("nav", { "aria-label": "Pagination", className: "Layer__pagination-nav", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("ul", { className: "Layer__pagination", role: "list", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(VStack, { className: (0, import_classnames52.default)("Layer__pagination-container", className), fluid: true, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("nav", { "aria-label": "Pagination", className: "Layer__pagination-nav", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("ul", { className: "Layer__pagination", role: "list", children: [
     /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
       PaginationButton,
       {
@@ -22461,7 +22458,7 @@ var Pagination = ({
 
 // src/components/BankTransactions/BankTransactionsHeader.tsx
 var import_react123 = require("react");
-var import_classnames60 = __toESM(require("classnames"));
+var import_classnames61 = __toESM(require("classnames"));
 var import_date_fns21 = require("date-fns");
 
 // src/components/domain/transactions/actions/TransactionsActions.tsx
@@ -22756,7 +22753,7 @@ function useCustomAccounts({ userCreated } = {}) {
 var import_react103 = require("react");
 var import_react_select5 = require("react-select");
 var import_creatable = __toESM(require("react-select/creatable"));
-var import_classnames52 = __toESM(require("classnames"));
+var import_classnames53 = __toESM(require("classnames"));
 var import_jsx_runtime162 = require("react/jsx-runtime");
 var CreatableSelect = ({
   name,
@@ -22778,7 +22775,7 @@ var CreatableSelect = ({
   isClearable,
   createOptionPosition = "first"
 }) => {
-  const baseClassName = (0, import_classnames52.default)(
+  const baseClassName = (0, import_classnames53.default)(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -22850,13 +22847,13 @@ var import_react_form2 = require("@tanstack/react-form");
 // src/components/ui/Form/Form.tsx
 var import_react104 = require("react");
 var import_react_aria_components14 = require("react-aria-components");
-var import_classnames53 = __toESM(require("classnames"));
+var import_classnames54 = __toESM(require("classnames"));
 var import_jsx_runtime163 = require("react/jsx-runtime");
 var FORM_CLASS_NAME = "Layer__UI__Form";
 var Form = (0, import_react104.forwardRef)(
   function Form2(_a, ref) {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_react_aria_components14.Form, __spreadProps(__spreadValues({}, restProps), { className: (0, import_classnames53.default)(FORM_CLASS_NAME, className), ref, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_react_aria_components14.Form, __spreadProps(__spreadValues({}, restProps), { className: (0, import_classnames54.default)(FORM_CLASS_NAME, className), ref, children }));
   }
 );
 var TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
@@ -22864,7 +22861,7 @@ var TextField = (0, import_react104.forwardRef)(
   function TextField2(_a, ref) {
     var _b = _a, { children, inline, textarea, className } = _b, restProps = __objRest(_b, ["children", "inline", "textarea", "className"]);
     const dataProperties = toDataProperties({ inline, textarea });
-    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_react_aria_components14.TextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: (0, import_classnames53.default)(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_react_aria_components14.TextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: (0, import_classnames54.default)(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
   }
 );
 var FIELD_ERROR_CLASS_NAME = "Layer__UI__FieldError";
@@ -23129,7 +23126,7 @@ function FormBigDecimalField(_a) {
 }
 
 // src/features/forms/components/FormCheckboxField.tsx
-var import_classnames54 = __toESM(require("classnames"));
+var import_classnames55 = __toESM(require("classnames"));
 var import_jsx_runtime168 = require("react/jsx-runtime");
 var FORM_CHECKBOX_FIELD_CLASSNAME = "Layer__FormCheckboxField";
 function FormCheckboxField({
@@ -23147,7 +23144,7 @@ function FormCheckboxField({
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
   const tooltipProps = showFieldError ? { tooltip: errorMessage } : {};
   const additionalAriaProps = !showLabel && { "aria-label": label };
-  const checkboxClassNames = (0, import_classnames54.default)(
+  const checkboxClassNames = (0, import_classnames55.default)(
     FORM_CHECKBOX_FIELD_CLASSNAME,
     inline && `${FORM_CHECKBOX_FIELD_CLASSNAME}--inline`,
     className
@@ -23175,7 +23172,7 @@ var import_react109 = require("react");
 
 // src/components/ui/Date/Date.tsx
 var import_react108 = require("react");
-var import_classnames55 = __toESM(require("classnames"));
+var import_classnames56 = __toESM(require("classnames"));
 var import_react_aria_components17 = require("react-aria-components");
 var import_jsx_runtime169 = require("react/jsx-runtime");
 var DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
@@ -23187,7 +23184,7 @@ var DateField = (0, import_react108.forwardRef)(
       import_react_aria_components17.DateField,
       __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
         isReadOnly,
-        className: (0, import_classnames55.default)(DATE_FIELD_CLASS_NAME, className),
+        className: (0, import_classnames56.default)(DATE_FIELD_CLASS_NAME, className),
         ref
       })
     );
@@ -23201,7 +23198,7 @@ var DateInput = (0, import_react108.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
       import_react_aria_components17.DateInput,
       __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
-        className: (0, import_classnames55.default)(DATE_INPUT_CLASS_NAME),
+        className: (0, import_classnames56.default)(DATE_INPUT_CLASS_NAME),
         ref
       })
     );
@@ -23594,7 +23591,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
 // src/components/CsvUpload/CsvUpload.tsx
 var import_react116 = require("react");
 var import_react_dropzone = require("react-dropzone");
-var import_classnames56 = __toESM(require("classnames"));
+var import_classnames57 = __toESM(require("classnames"));
 var import_lucide_react9 = require("lucide-react");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 var VALID_EXTENSIONS = [".csv"];
@@ -23686,7 +23683,7 @@ var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
     /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(
       VStack,
       __spreadProps(__spreadValues({
-        className: (0, import_classnames56.default)(
+        className: (0, import_classnames57.default)(
           "Layer__csv-upload",
           { "Layer__csv-upload--drag-active": isDragActive }
         ),
@@ -23723,7 +23720,7 @@ var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
 };
 
 // src/components/UploadTransactions/UploadTransactionsUploadCsvStep.tsx
-var import_classnames58 = __toESM(require("classnames"));
+var import_classnames59 = __toESM(require("classnames"));
 
 // src/components/Separator/Separator.tsx
 var import_jsx_runtime176 = require("react/jsx-runtime");
@@ -23770,14 +23767,14 @@ var DownloadCsvTemplateButton = ({ children, className, csvProps, fileName = "te
 
 // src/components/CsvUpload/CopyTemplateHeadersButtonGroup.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_classnames57 = __toESM(require("classnames"));
+var import_classnames58 = __toESM(require("classnames"));
 var import_jsx_runtime178 = require("react/jsx-runtime");
 var copyTextToClipboard = (text) => {
   navigator.clipboard.writeText(text).catch(() => {
   });
 };
 var CopyTemplateHeadersButtonGroup = ({ headers, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(HStack, { gap: "3xs", className: (0, import_classnames57.default)("Layer__csv-upload__copy-template-headers-button-group", className), children: Object.keys(headers).map((key) => /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(HStack, { gap: "3xs", className: (0, import_classnames58.default)("Layer__csv-upload__copy-template-headers-button-group", className), children: Object.keys(headers).map((key) => /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
     Button,
     {
       onClick: () => copyTextToClipboard(headers[key]),
@@ -23938,7 +23935,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
       setHasParseCsvError(true);
     });
   }, [selectedAccount, isCreatingNewAccount, selectedFile, parseCsv2, onParseCsv, next]);
-  const inputClassName = (0, import_classnames58.default)(
+  const inputClassName = (0, import_classnames59.default)(
     "Layer__upload-transactions__select-account-name-input",
     !!customAccountsError && "Layer__upload-transactions__select-account-name-input--error"
   );
@@ -24067,7 +24064,7 @@ function useCreateCustomAccountTransactions() {
 
 // src/components/CsvUpload/ValidateCsvTable.tsx
 var import_react118 = require("react");
-var import_classnames59 = __toESM(require("classnames"));
+var import_classnames60 = __toESM(require("classnames"));
 var import_react_table = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_jsx_runtime180 = require("react/jsx-runtime");
@@ -24105,7 +24102,7 @@ function ValidateCsvTable({
           return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
             "span",
             {
-              className: (0, import_classnames59.default)(
+              className: (0, import_classnames60.default)(
                 "Layer__table-cell-content",
                 `${CSS_PREFIX}__cell-content`,
                 !isValid2 && `${CSS_PREFIX}__cell-content--error`
@@ -24156,7 +24153,7 @@ function ValidateCsvTable({
       (header) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
         "th",
         {
-          className: (0, import_classnames59.default)(
+          className: (0, import_classnames60.default)(
             "Layer__table-header",
             `${CSS_PREFIX}__header-cell`,
             `${CSS_PREFIX}__header-cell--${header.id}`
@@ -24170,7 +24167,7 @@ function ValidateCsvTable({
       /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
         "tr",
         {
-          className: (0, import_classnames59.default)(
+          className: (0, import_classnames60.default)(
             "Layer__table-row",
             `${CSS_PREFIX}__row`,
             rows.length < MAX_NUM_ROWS && `${CSS_PREFIX}__row--bottom-border`
@@ -24192,7 +24189,7 @@ var ValidateCsvTableRow = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
   "tr",
   {
-    className: (0, import_classnames59.default)(
+    className: (0, import_classnames60.default)(
       "Layer__table-row",
       `${CSS_PREFIX}__row`,
       !row.getValue("is_valid") && `${CSS_PREFIX}__row--error`
@@ -24204,7 +24201,7 @@ var ValidateCsvTableRow = ({
       return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
         "td",
         {
-          className: (0, import_classnames59.default)(
+          className: (0, import_classnames60.default)(
             "Layer__table-cell",
             `${CSS_PREFIX}__cell`,
             `${CSS_PREFIX}__cell--${cell.column.columnDef.id}`
@@ -24564,7 +24561,7 @@ var BankTransactionsHeader = ({
   return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
     Header,
     {
-      className: (0, import_classnames60.default)(
+      className: (0, import_classnames61.default)(
         "Layer__bank-transactions__header",
         withDatePicker && "Layer__bank-transactions__header--with-date-picker",
         mobileComponent && listView ? "Layer__bank-transactions__header--mobile" : void 0
@@ -24734,7 +24731,7 @@ function BankTransactionsTableEmptyStates({
 }
 
 // src/components/BankTransactions/BankTransactions.tsx
-var import_classnames61 = __toESM(require("classnames"));
+var import_classnames62 = __toESM(require("classnames"));
 var import_jsx_runtime189 = require("react/jsx-runtime");
 var COMPONENT_NAME2 = "bank-transactions";
 var BankTransactions = (_a) => {
@@ -24880,7 +24877,7 @@ var BankTransactionsContent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
     Container,
     {
-      className: (0, import_classnames61.default)(
+      className: (0, import_classnames62.default)(
         "Layer__Public",
         display === "review" /* review */ ? "Layer__bank-transactions--to-review" : "Layer__bank-transactions--categorized"
       ),
@@ -25025,10 +25022,10 @@ var BadgeLoader = ({ children, showLoading, variant = "default" }) => {
 };
 
 // src/components/Card/Card.tsx
-var import_classnames62 = __toESM(require("classnames"));
+var import_classnames63 = __toESM(require("classnames"));
 var import_jsx_runtime192 = require("react/jsx-runtime");
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: (0, import_classnames62.default)("Layer__card", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: (0, import_classnames63.default)("Layer__card", className), children });
 };
 
 // src/contexts/QuickbooksContext/QuickbooksContext.tsx
@@ -25588,9 +25585,7 @@ var useProfitAndLoss = ({
     const revenueTypeFilters = (_a2 = filters["revenue"]) == null ? void 0 : _a2.types;
     const filtered = items.map((x) => {
       if (revenueTypeFilters && revenueTypeFilters.length > 0 && !revenueTypeFilters.includes(x.type)) {
-        return __spreadProps(__spreadValues({}, x), {
-          hidden: true
-        });
+        return __spreadProps(__spreadValues({}, x), { isHidden: true });
       }
       return x;
     });
@@ -25627,9 +25622,7 @@ var useProfitAndLoss = ({
     const expenseTypeFilters = (_a2 = filters["expenses"]) == null ? void 0 : _a2.types;
     const filtered = items.map((x) => {
       if (expenseTypeFilters && expenseTypeFilters.length > 0 && !expenseTypeFilters.includes(x.type)) {
-        return __spreadProps(__spreadValues({}, x), {
-          hidden: true
-        });
+        return __spreadProps(__spreadValues({}, x), { isHidden: true });
       }
       return x;
     });
@@ -26118,7 +26111,7 @@ var Indicator = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_classnames63 = __toESM(require("classnames"));
+var import_classnames64 = __toESM(require("classnames"));
 var import_date_fns26 = require("date-fns");
 var import_recharts = require("recharts");
 var import_jsx_runtime205 = require("react/jsx-runtime");
@@ -26518,7 +26511,7 @@ var ProfitAndLossChart = ({
     /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
       import_recharts.ResponsiveContainer,
       {
-        className: (0, import_classnames63.default)(
+        className: (0, import_classnames64.default)(
           "Layer__chart-container",
           !hasLoadedData && "Layer__chart-container--loading"
         ),
@@ -26638,7 +26631,7 @@ var ProfitAndLossChart = ({
                   isAnimationActive: barAnimActive,
                   animationDuration: 100,
                   radius: [2, 2, 0, 0],
-                  className: (0, import_classnames63.default)(
+                  className: (0, import_classnames64.default)(
                     "Layer__profit-and-loss-chart__bar--loading",
                     !hasLoadedData && "Layer__profit-and-loss-chart__bar--loading-anim"
                   ),
@@ -26654,7 +26647,7 @@ var ProfitAndLossChart = ({
                   isAnimationActive: barAnimActive,
                   animationDuration: 100,
                   radius: [2, 2, 0, 0],
-                  className: (0, import_classnames63.default)(
+                  className: (0, import_classnames64.default)(
                     "Layer__profit-and-loss-chart__bar--loading",
                     !hasLoadedData && "Layer__profit-and-loss-chart__bar--loading-anim"
                   ),
@@ -27152,7 +27145,7 @@ var SortArrows = (_a) => {
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-var import_classnames64 = __toESM(require("classnames"));
+var import_classnames65 = __toESM(require("classnames"));
 
 // src/components/ui/Typography/MoneyText.tsx
 var import_react144 = require("react");
@@ -27268,7 +27261,7 @@ var DetailedTable = ({
 }) => {
   const buildColClass = (column) => {
     var _a, _b, _c;
-    return (0, import_classnames64.default)(
+    return (0, import_classnames65.default)(
       "Layer__sortable-col",
       sidebarScope && ((_a = filters[sidebarScope]) == null ? void 0 : _a.sortBy) === column ? `sort--${(_c = sidebarScope && ((_b = filters[sidebarScope]) == null ? void 0 : _b.sortDirection)) != null ? _c : "desc"}` : ""
     );
@@ -27320,7 +27313,7 @@ var DetailedTable = ({
       return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
         "tr",
         {
-          className: (0, import_classnames64.default)(
+          className: (0, import_classnames65.default)(
             "Layer__profit-and-loss-detailed-table__row",
             hoveredItem && hoveredItem === item.displayName ? "active" : ""
           ),
@@ -27358,7 +27351,7 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-var import_classnames65 = __toESM(require("classnames"));
+var import_classnames66 = __toESM(require("classnames"));
 var import_recharts2 = require("recharts");
 var import_jsx_runtime212 = require("react/jsx-runtime");
 var DetailedChart = ({
@@ -27448,7 +27441,7 @@ var DetailedChart = ({
               return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
                 import_recharts2.Cell,
                 {
-                  className: (0, import_classnames65.default)(
+                  className: (0, import_classnames66.default)(
                     "Layer__profit-and-loss-detailed-charts__pie",
                     hoveredItem && active ? "active" : "inactive",
                     entry.type === "Uncategorized" && "Layer__profit-and-loss-detailed-charts__pie--border"
@@ -27800,7 +27793,7 @@ var DateTime = ({
 };
 
 // src/components/DetailsList/DetailsList.tsx
-var import_classnames66 = __toESM(require("classnames"));
+var import_classnames67 = __toESM(require("classnames"));
 var import_jsx_runtime215 = require("react/jsx-runtime");
 var DetailsList = ({
   title,
@@ -27809,7 +27802,7 @@ var DetailsList = ({
   titleClassName,
   actions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { className: (0, import_classnames66.default)("Layer__details-list", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)("div", { className: (0, import_classnames67.default)("Layer__details-list", className), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(Header, { className: titleClassName, children: [
       /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(Heading, { size: "secondary" /* secondary */, children: title }),
       actions && /* @__PURE__ */ (0, import_jsx_runtime215.jsx)("div", { className: "Layer__details-list__actions", children: actions })
@@ -27839,11 +27832,11 @@ var DetailsListItem = ({
 
 // src/components/Header/Header.tsx
 var import_react147 = require("react");
-var import_classnames67 = __toESM(require("classnames"));
+var import_classnames68 = __toESM(require("classnames"));
 var import_jsx_runtime217 = require("react/jsx-runtime");
 var Header4 = (0, import_react147.forwardRef)(
   ({ className, children, style, sticky, asHeader, rounded }, ref) => {
-    const baseClassName = (0, import_classnames67.default)(
+    const baseClassName = (0, import_classnames68.default)(
       "Layer__header",
       sticky && "Layer__header--sticky",
       rounded && "Layer__header--top-rounded",
@@ -27866,19 +27859,19 @@ var Header4 = (0, import_react147.forwardRef)(
 Header4.displayName = "Header";
 
 // src/components/Header/HeaderRow.tsx
-var import_classnames68 = __toESM(require("classnames"));
+var import_classnames69 = __toESM(require("classnames"));
 var import_jsx_runtime218 = require("react/jsx-runtime");
 var HeaderRow = ({ className, children, direction, style }) => {
   const dataProps = toDataProperties({ direction });
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", __spreadProps(__spreadValues({}, dataProps), { className: (0, import_classnames68.default)("Layer__header__row", className), style, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("div", __spreadProps(__spreadValues({}, dataProps), { className: (0, import_classnames69.default)("Layer__header__row", className), style, children }));
 };
 
 // src/components/Header/HeaderCol.tsx
-var import_classnames69 = __toESM(require("classnames"));
+var import_classnames70 = __toESM(require("classnames"));
 var import_jsx_runtime219 = require("react/jsx-runtime");
 var HeaderCol = ({ className, children, style, noPadding = false }) => {
   const dataProperties = toDataProperties({ "no-padding": noPadding });
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", __spreadProps(__spreadValues({}, dataProperties), { className: (0, import_classnames69.default)("Layer__header__col", className), style, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", __spreadProps(__spreadValues({}, dataProperties), { className: (0, import_classnames70.default)("Layer__header__col", className), style, children }));
 };
 
 // src/components/TableBody/TableBody.tsx
@@ -27888,7 +27881,7 @@ var TableBody = ({ children }) => {
 };
 
 // src/components/TableCell/TableCell.tsx
-var import_classnames70 = __toESM(require("classnames"));
+var import_classnames71 = __toESM(require("classnames"));
 var import_jsx_runtime221 = require("react/jsx-runtime");
 var TableCell = ({
   children,
@@ -27908,7 +27901,7 @@ var TableCell = ({
   const amount = typeof children === "number" ? children : 0;
   const isPositive = amount >= 0;
   const amountString = centsToDollars(Math.abs(amount));
-  const cellClassNames = (0, import_classnames70.default)(
+  const cellClassNames = (0, import_classnames71.default)(
     "Layer__table-cell",
     (primary || isHeaderCell) && "Layer__table-cell--primary",
     isHeaderCell && "Layer__table-header",
@@ -27951,7 +27944,7 @@ var TableHead = ({ children }) => {
 };
 
 // src/components/TableRow/TableRow.tsx
-var import_classnames71 = __toESM(require("classnames"));
+var import_classnames72 = __toESM(require("classnames"));
 var import_jsx_runtime223 = require("react/jsx-runtime");
 var TableRow = ({
   rowKey,
@@ -27975,7 +27968,7 @@ var TableRow = ({
       handleExpand && handleExpand();
     }
   };
-  const rowClassNames = (0, import_classnames71.default)([
+  const rowClassNames = (0, import_classnames72.default)([
     "Layer__table-row",
     !isHeadRow && `Layer__table-row--depth-${depth}`,
     !isHeadRow && `Layer__table-row--variant-${variant}`,
@@ -27998,7 +27991,7 @@ var TableRow = ({
 };
 
 // src/components/Table/Table.tsx
-var import_classnames72 = __toESM(require("classnames"));
+var import_classnames73 = __toESM(require("classnames"));
 var import_jsx_runtime224 = require("react/jsx-runtime");
 var Table = ({
   componentName,
@@ -28006,11 +27999,11 @@ var Table = ({
   borderCollapse = "separate",
   bottomSpacing = true
 }) => {
-  const tableWrapperClassNames = (0, import_classnames72.default)(
+  const tableWrapperClassNames = (0, import_classnames73.default)(
     "Layer__table-wrapper",
     bottomSpacing && "Layer__table-wrapper--bottom-spacing"
   );
-  const tableClassNames = (0, import_classnames72.default)(
+  const tableClassNames = (0, import_classnames73.default)(
     "Layer__table",
     componentName && `Layer__${componentName}__table`,
     borderCollapse && `Layer__table__${borderCollapse}-rows`
@@ -28400,17 +28393,17 @@ var LedgerAccountEntryDetails = ({
 
 // src/components/VirtualizedDataTable/VirtualizedDataTable.tsx
 var import_react150 = require("react");
-var import_classnames74 = __toESM(require("classnames"));
+var import_classnames75 = __toESM(require("classnames"));
 var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_react_table2 = require("@tanstack/react-table");
 
 // src/components/ui/Table/Table.tsx
 var import_react149 = require("react");
 var import_react_aria_components19 = require("react-aria-components");
-var import_classnames73 = __toESM(require("classnames"));
+var import_classnames74 = __toESM(require("classnames"));
 var import_jsx_runtime226 = require("react/jsx-runtime");
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => (0, import_classnames73.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var getClassName = (component, additionalClassNames) => (0, import_classnames74.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
 var Table2 = (0, import_react149.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
@@ -28572,7 +28565,7 @@ var VirtualizedDataTable = ({
   }
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: `${CSS_PREFIX3}__container`, ref: containerRef, style: { height: renderedTableHeight }, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(Table2, { className: (0, import_classnames74.default)(CSS_PREFIX3, `Layer__UI__Table__${componentName}`), "aria-label": ariaLabel, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", { className: `${CSS_PREFIX3}__container`, ref: containerRef, style: { height: renderedTableHeight }, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(Table2, { className: (0, import_classnames75.default)(CSS_PREFIX3, `Layer__UI__Table__${componentName}`), "aria-label": ariaLabel, children: [
     /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(TableHeader, { className: `${CSS_PREFIX3}__header`, style: { height: HEADER_HEIGHT2 }, children: table2.getFlatHeaders().map(
       (header) => {
         var _a;
@@ -28580,7 +28573,7 @@ var VirtualizedDataTable = ({
           Column,
           {
             isRowHeader: (_a = header.column.columnDef.meta) == null ? void 0 : _a.isRowHeader,
-            className: (0, import_classnames74.default)(
+            className: (0, import_classnames75.default)(
               `${CSS_PREFIX3}__header-cell`,
               `Layer__UI__Table-Column__${componentName}--${header.id}`
             ),
@@ -28602,7 +28595,7 @@ var VirtualizedDataTable = ({
           children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
             Cell3,
             {
-              className: (0, import_classnames74.default)(
+              className: (0, import_classnames75.default)(
                 `${CSS_PREFIX3}__cell`,
                 `Layer__UI__Table-Cell__${componentName}--${cell.column.id}`
               ),
@@ -28767,7 +28760,15 @@ var ProfitAndLossDetailReport = ({
     ["Account" /* Account */]: {
       id: "Account" /* Account */,
       header: (stringOverrides == null ? void 0 : stringOverrides.accountColumnHeader) || "Account",
-      cell: (row) => row.account.name || "-"
+      cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+        Text,
+        {
+          as: "span",
+          withTooltip: "whenTruncated" /* whenTruncated */,
+          ellipsis: true,
+          children: row.account.name || "-"
+        }
+      )
     },
     ["Description" /* Description */]: {
       id: "Description" /* Description */,
@@ -29256,10 +29257,10 @@ function ProfitAndLossDetailLinesDownloadButton({
 var import_react158 = require("react");
 
 // src/components/ViewHeader/ViewHeader.tsx
-var import_classnames75 = __toESM(require("classnames"));
+var import_classnames76 = __toESM(require("classnames"));
 var import_jsx_runtime237 = require("react/jsx-runtime");
 var ViewHeader = ({ title, className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { className: (0, import_classnames75.default)("Layer__view-header", className), children: /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)("div", { className: "Layer__view-header__content", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { className: (0, import_classnames76.default)("Layer__view-header", className), children: /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)("div", { className: "Layer__view-header__content", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Heading, { className: "Layer__view-header__title", children: title }),
     children && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)("div", { className: "Layer__view-header__children", children })
   ] }) });
@@ -29267,7 +29268,7 @@ var ViewHeader = ({ title, className, children }) => {
 
 // src/components/Panel/Panel.tsx
 var import_react157 = require("react");
-var import_classnames76 = __toESM(require("classnames"));
+var import_classnames77 = __toESM(require("classnames"));
 var import_jsx_runtime238 = require("react/jsx-runtime");
 var Panel = ({
   children,
@@ -29287,7 +29288,7 @@ var Panel = ({
       setSidebarHeight((_b = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _b.offsetHeight);
     }
   }, [parentRef, (_a = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _a.offsetHeight, sidebarIsOpen]);
-  const sidebarClass = (0, import_classnames76.default)(
+  const sidebarClass = (0, import_classnames77.default)(
     "Layer__panel__sidebar",
     defaultSidebarHeight && "Layer__panel__sidebar--default",
     floating && "Layer__panel__sidebar--floating"
@@ -29295,7 +29296,7 @@ var Panel = ({
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
     "div",
     {
-      className: (0, import_classnames76.default)(
+      className: (0, import_classnames77.default)(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -29321,7 +29322,7 @@ var Panel = ({
 };
 
 // src/components/View/View.tsx
-var import_classnames77 = __toESM(require("classnames"));
+var import_classnames78 = __toESM(require("classnames"));
 var import_jsx_runtime239 = require("react/jsx-runtime");
 var View = (0, import_react158.forwardRef)(
   ({
@@ -29338,7 +29339,7 @@ var View = (0, import_react158.forwardRef)(
   }, ref) => {
     const { theme } = useLayerContext();
     const styles = parseStylesFromThemeConfig(theme);
-    const viewClassNames = (0, import_classnames77.default)(
+    const viewClassNames = (0, import_classnames78.default)(
       "Layer__view",
       type === "panel" && "Layer__view--panel",
       viewClassName
@@ -29349,7 +29350,7 @@ var View = (0, import_react158.forwardRef)(
         ViewHeader,
         {
           title,
-          className: (0, import_classnames77.default)(
+          className: (0, import_classnames78.default)(
             headerControls ? "Layer__view-header--paddings" : void 0
           ),
           children: header != null ? header : headerControls
@@ -29399,6 +29400,7 @@ var ProfitAndLossReport = ({
   const handleCloseDetailReport = (0, import_react159.useCallback)(() => {
     setSelectedLineItem(null);
   }, []);
+  const useComparisonPnl = !!comparisonConfig;
   return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(InAppLinkProvider, { renderInAppLink, children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
     View,
     {
@@ -29415,7 +29417,7 @@ var ProfitAndLossReport = ({
                 customDateRanges
               }
             ),
-            view === "desktop" ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ProfitAndLoss2.CompareOptions, {}) : null
+            view === "desktop" && useComparisonPnl && /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ProfitAndLoss2.CompareOptions, {})
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(HeaderCol, { children: selectedLineItem ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
             ProfitAndLossDetailLinesDownloadButton,
@@ -29427,13 +29429,13 @@ var ProfitAndLossReport = ({
             ProfitAndLoss2.DownloadButton,
             {
               stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-              useComparisonPnl: !!comparisonConfig,
+              useComparisonPnl,
               moneyFormat: csvMoneyFormat,
               view
             }
           ) })
         ] }),
-        view !== "desktop" ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(HeaderRow, { children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ProfitAndLoss2.CompareOptions, {}) }) }) : null
+        view !== "desktop" && useComparisonPnl && /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(HeaderRow, { children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(HeaderCol, { children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ProfitAndLoss2.CompareOptions, {}) }) })
       ] }),
       children: selectedLineItem ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
         ProfitAndLossDetailReport,
@@ -29613,23 +29615,29 @@ function TransactionsToReview({
   tagFilter = void 0,
   variants
 }) {
+  var _a;
   const { size = "sm" } = variants != null ? variants : {};
   const { dateRange: contextDateRange } = (0, import_react161.useContext)(ProfitAndLoss2.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
-  const { data, isLoading, isError, refetch } = useProfitAndLossLTM({
-    currentDate: dateRange ? dateRange.startDate : (0, import_date_fns30.startOfMonth)(/* @__PURE__ */ new Date()),
+  const currentDate = (0, import_react161.useMemo)(() => dateRange ? dateRange.startDate : (0, import_date_fns30.startOfMonth)(/* @__PURE__ */ new Date()), [dateRange]);
+  const { data, isLoading, isError, refetch, setDate } = useProfitAndLossLTM({
+    currentDate,
     tagFilter
   });
-  const numTransactionsToReview = (0, import_react161.useMemo)(() => {
-    if (!data || !dateRange) return 0;
+  const activeMonth = (0, import_react161.useMemo)(() => {
+    if (!data || !dateRange) return void 0;
     const { startDate } = dateRange;
-    const activeMonth = data.find(
+    return data.find(
       (summary) => summary.month - 1 === (0, import_date_fns30.getMonth)(startDate) && summary.year === (0, import_date_fns30.getYear)(startDate)
     );
-    if (!activeMonth) return 0;
-    return activeMonth.uncategorizedTransactions;
   }, [data, dateRange]);
-  const hasLoadedData = !isLoading && data;
+  (0, import_react161.useEffect)(() => {
+    if (!activeMonth) {
+      setDate(currentDate);
+    }
+  }, [activeMonth, currentDate, setDate]);
+  const hasLoadedData = !isLoading && activeMonth;
+  const numTransactionsToReview = (_a = activeMonth == null ? void 0 : activeMonth.uncategorizedTransactions) != null ? _a : 0;
   const transactionsToReviewBadge = (0, import_react161.useMemo)(() => {
     if (!hasLoadedData) {
       return /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(BadgeLoader, {});
@@ -29970,7 +29978,7 @@ var mergeComparisonLineItemsAtDepth = (lineItems) => {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
-var import_classnames78 = __toESM(require("classnames"));
+var import_classnames79 = __toESM(require("classnames"));
 var import_jsx_runtime248 = require("react/jsx-runtime");
 var ProfitAndLossCompareTable = ({
   stringOverrides
@@ -29993,7 +30001,7 @@ var ProfitAndLossCompareTable = ({
     return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
       "div",
       {
-        className: (0, import_classnames78.default)("Layer__profit-and-loss-table__loader-container"),
+        className: (0, import_classnames79.default)("Layer__profit-and-loss-table__loader-container"),
         children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Loader2, {})
       }
     );
@@ -30113,7 +30121,7 @@ var ProfitAndLossCompareTable = ({
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
 var import_react166 = require("react");
-var import_classnames79 = __toESM(require("classnames"));
+var import_classnames80 = __toESM(require("classnames"));
 var import_jsx_runtime249 = require("react/jsx-runtime");
 var ProfitAndLossTableComponent = ({
   asContainer,
@@ -30129,7 +30137,7 @@ var ProfitAndLossTableComponent = ({
     return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
       "div",
       {
-        className: (0, import_classnames79.default)(
+        className: (0, import_classnames80.default)(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         ),
@@ -33011,7 +33019,7 @@ var import_react184 = require("react");
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
 var import_react183 = require("react");
-var import_classnames80 = __toESM(require("classnames"));
+var import_classnames81 = __toESM(require("classnames"));
 var import_date_fns38 = require("date-fns");
 var import_jsx_runtime269 = require("react/jsx-runtime");
 var LedgerAccountRow = ({
@@ -33029,7 +33037,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
       "tr",
       {
-        className: (0, import_classnames80.default)(
+        className: (0, import_classnames81.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active"
         ),
@@ -33068,7 +33076,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
       "tr",
       {
-        className: (0, import_classnames80.default)(
+        className: (0, import_classnames81.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active"
         ),
@@ -33118,7 +33126,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
     "tr",
     {
-      className: (0, import_classnames80.default)(
+      className: (0, import_classnames81.default)(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active"
       ),
@@ -33144,7 +33152,7 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-var import_classnames81 = __toESM(require("classnames"));
+var import_classnames82 = __toESM(require("classnames"));
 var import_jsx_runtime270 = require("react/jsx-runtime");
 var LedgerAccount = ({
   containerRef,
@@ -33167,7 +33175,7 @@ var LedgerAccount = ({
     hasMore,
     fetchMore
   } = (0, import_react184.useContext)(LedgerAccountsContext);
-  const baseClassName = (0, import_classnames81.default)(
+  const baseClassName = (0, import_classnames82.default)(
     "Layer__ledger-account__index",
     selectedAccount && "open"
   );
@@ -34805,7 +34813,7 @@ var SmileIcon_default = SmileIcon;
 
 // src/components/Tasks/TasksListItem.tsx
 var import_react199 = require("react");
-var import_classnames82 = __toESM(require("classnames"));
+var import_classnames83 = __toESM(require("classnames"));
 
 // src/utils/bookkeeping/tasks/getBookkeepingTaskStatusIcon.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
@@ -35136,16 +35144,16 @@ var TasksListItem = (0, import_react199.forwardRef)(({ task, defaultOpen, onExpa
   const { trigger: handleUploadDocumentsForTask } = useUploadDocumentsForTask();
   const { trigger: handleDeleteUploadsOnTask } = useDeleteUploadsOnTask();
   const { trigger: handleUpdateTaskUploadDescription } = useUpdateTaskUploadDescription();
-  const taskBodyClassName = (0, import_classnames82.default)(
+  const taskBodyClassName = (0, import_classnames83.default)(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isCompletedTask(task) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = (0, import_classnames82.default)(
+  const taskHeadClassName = (0, import_classnames83.default)(
     "Layer__tasks-list-item__head-info",
     isCompletedTask(task) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = (0, import_classnames82.default)(
+  const taskItemClassName = (0, import_classnames83.default)(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
@@ -35296,13 +35304,13 @@ var TasksListItem = (0, import_react199.forwardRef)(({ task, defaultOpen, onExpa
 TasksListItem.displayName = "TasksListItem";
 
 // src/components/MobilePanel/MobilePanel.tsx
-var import_classnames83 = __toESM(require("classnames"));
+var import_classnames84 = __toESM(require("classnames"));
 var import_react_dom = require("react-dom");
 var import_jsx_runtime284 = require("react/jsx-runtime");
 var MobilePanel = ({ header, children, open, onClose, className }) => {
   const dataProperties = toDataProperties({ open });
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_classnames83.default)("Layer__Portal Layer__mobile-panel", className) }, dataProperties), { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_classnames84.default)("Layer__Portal Layer__mobile-panel", className) }, dataProperties), { children: [
       /* @__PURE__ */ (0, import_jsx_runtime284.jsxs)("div", { className: "Layer__mobile-panel__header", children: [
         /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(BackButton, { onClick: onClose }),
         header && /* @__PURE__ */ (0, import_jsx_runtime284.jsx)("div", { className: "Layer__mobile-panel__header__content", children: header })
@@ -35503,7 +35511,7 @@ var TasksList = ({ pageSize = 8, mobile }) => {
 // src/components/Tasks/TasksPending.tsx
 var import_recharts4 = require("recharts");
 var import_date_fns40 = require("date-fns");
-var import_classnames84 = __toESM(require("classnames"));
+var import_classnames85 = __toESM(require("classnames"));
 
 // src/components/BookkeepingStatus/BookkeepingStatusDescription.tsx
 var import_jsx_runtime287 = require("react/jsx-runtime");
@@ -35534,7 +35542,7 @@ var TasksPending = () => {
       value: incompleteTaskCount
     }
   ];
-  const taskStatusClassName = (0, import_classnames84.default)(
+  const taskStatusClassName = (0, import_classnames85.default)(
     completedTaskCount > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)("div", { className: "Layer__tasks-pending", children: [
@@ -35982,7 +35990,7 @@ var Tab = ({
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_classnames85 = __toESM(require("classnames"));
+var import_classnames86 = __toESM(require("classnames"));
 var import_jsx_runtime295 = require("react/jsx-runtime");
 var import_react206 = require("react");
 var STARTING_PADDING = 12;
@@ -35991,7 +35999,7 @@ var Tabs = ({ name, options: options3, selected, onChange }) => {
   const [thumbPos, setThumbPos] = (0, import_react205.useState)({ left: 0, width: 0 });
   const [currentWidth, setCurrentWidth] = (0, import_react205.useState)(0);
   const selectedValue = selected || options3[0].value;
-  const baseClassName = (0, import_classnames85.default)(
+  const baseClassName = (0, import_classnames86.default)(
     "Layer__tabs",
     initialized && "Layer__tabs--initialized"
   );
@@ -37582,7 +37590,7 @@ function BookkeepingProfitAndLossSummariesContainer({
 }
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-var import_classnames86 = __toESM(require("classnames"));
+var import_classnames87 = __toESM(require("classnames"));
 
 // src/views/BookkeepingOverview/useKeepInMobileViewport.tsx
 var import_react216 = require("react");
@@ -37742,7 +37750,7 @@ var BookkeepingOverview = ({
           /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
             Container,
             {
-              name: (0, import_classnames86.default)(
+              name: (0, import_classnames87.default)(
                 "bookkeeping-overview-profit-and-loss-chart",
                 pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
               ),
@@ -37759,7 +37767,7 @@ var BookkeepingOverview = ({
           /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
             Container,
             {
-              name: (0, import_classnames86.default)(
+              name: (0, import_classnames87.default)(
                 "bookkeeping-overview-profit-and-loss-chart",
                 pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
               ),
@@ -37781,7 +37789,7 @@ var BookkeepingOverview = ({
 
 // src/views/AccountingOverview/AccountingOverview.tsx
 var import_react218 = require("react");
-var import_classnames87 = __toESM(require("classnames"));
+var import_classnames88 = __toESM(require("classnames"));
 var import_jsx_runtime319 = require("react/jsx-runtime");
 var AccountingOverview = ({
   title = "Accounting overview",
@@ -37870,7 +37878,7 @@ var AccountingOverview = ({
               /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
                 Container,
                 {
-                  name: (0, import_classnames87.default)(
+                  name: (0, import_classnames88.default)(
                     "accounting-overview-profit-and-loss-chart",
                     pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
                   ),
@@ -37888,7 +37896,7 @@ var AccountingOverview = ({
               /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
                 Container,
                 {
-                  name: (0, import_classnames87.default)(
+                  name: (0, import_classnames88.default)(
                     "accounting-overview-profit-and-loss-chart",
                     pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
                   ),
@@ -38723,14 +38731,14 @@ var import_date_fns48 = require("date-fns");
 var import_react225 = require("react");
 
 // src/components/Input/StaticValue.tsx
-var import_classnames88 = __toESM(require("classnames"));
+var import_classnames89 = __toESM(require("classnames"));
 var import_jsx_runtime324 = require("react/jsx-runtime");
 var StaticValue = (props) => {
   var _a;
   return /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
     Text,
     __spreadValues({
-      className: (0, import_classnames88.default)(
+      className: (0, import_classnames89.default)(
         "Layer__input--static-value",
         (_a = props.className) != null ? _a : ""
       )
@@ -39757,7 +39765,7 @@ var DueStatus = ({ dueDate, paidAt, size = "md" }) => {
 };
 
 // src/components/Bills/BillsTable.tsx
-var import_classnames89 = __toESM(require("classnames"));
+var import_classnames90 = __toESM(require("classnames"));
 
 // src/components/Bills/BillsTableLoader.tsx
 var import_jsx_runtime335 = require("react/jsx-runtime");
@@ -39819,7 +39827,7 @@ var BillsTableContent = ({
       addBill(entry);
       setShowRecordPaymentForm(true);
     };
-    const actionsColClassName = (0, import_classnames89.default)(
+    const actionsColClassName = (0, import_classnames90.default)(
       "Layer__bills-table__actions-col",
       status === "PAID" ? "Layer__bills-table__actions-col--narrow" : ""
     );
@@ -39889,7 +39897,7 @@ var BillsTableContent = ({
 };
 
 // src/components/Bills/BillsList.tsx
-var import_classnames90 = __toESM(require("classnames"));
+var import_classnames91 = __toESM(require("classnames"));
 var import_jsx_runtime337 = require("react/jsx-runtime");
 var BillsList = ({
   stringOverrides
@@ -39943,7 +39951,7 @@ var BillsListItem = ({
     }
     removeBill(bill);
   };
-  const liClassName = (0, import_classnames90.default)(
+  const liClassName = (0, import_classnames91.default)(
     "Layer__bills-list-item",
     showComponent ? "Layer__bills-list-item--show" : ""
   );
@@ -41036,13 +41044,13 @@ var DataTable = ({
   const isEmptyTable = (data == null ? void 0 : data.length) === 0;
   const renderTableBody = (0, import_react236.useMemo)(() => {
     if (isError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Cell3, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(ErrorState2, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Row2, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Cell3, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(ErrorState2, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Cell3, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Loader2, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Row2, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Cell3, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Loader2, {}) }) });
     }
     if (isEmptyTable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Cell3, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(EmptyState2, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Row2, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Cell3, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(EmptyState2, {}) }) });
     }
     const RowRenderer = (row) => /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(Row2, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
       Cell3,
@@ -41261,6 +41269,12 @@ var InvoiceStatusCell = ({ invoice, inline = false }) => {
   ] });
 };
 
+// src/features/customers/util.ts
+function getCustomerName(customer) {
+  var _a, _b;
+  return (_b = (_a = customer == null ? void 0 : customer.individualName) != null ? _a : customer == null ? void 0 : customer.companyName) != null ? _b : "Unknown Customer";
+}
+
 // src/components/Invoices/InvoiceTable/InvoiceTable.tsx
 var import_jsx_runtime350 = require("react/jsx-runtime");
 var COMPONENT_NAME11 = "InvoiceTable";
@@ -41285,7 +41299,7 @@ var AmountCell = ({ invoice }) => {
     case "VOIDED" /* Voided */:
     case "REFUNDED" /* Refunded */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(VStack, { children: /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Span, { align: "right", children: totalAmount });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
       return /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(VStack, { children: [
@@ -41305,10 +41319,6 @@ var AmountCell = ({ invoice }) => {
     }
   }
 };
-var getCustomerName = (invoice) => {
-  const { recipientName, customer } = invoice;
-  return (customer == null ? void 0 : customer.individualName) || (customer == null ? void 0 : customer.companyName) || recipientName;
-};
 var getColumnConfig = (onSelectInvoice) => ({
   ["SentAt" /* SentAt */]: {
     id: "SentAt" /* SentAt */,
@@ -41318,13 +41328,13 @@ var getColumnConfig = (onSelectInvoice) => ({
   ["InvoiceNo" /* InvoiceNo */]: {
     id: "InvoiceNo" /* InvoiceNo */,
     header: "No.",
-    cell: (row) => row.invoiceNumber,
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Span, { ellipsis: true, children: row.invoiceNumber }),
     isRowHeader: true
   },
   ["Customer" /* Customer */]: {
     id: "Customer" /* Customer */,
     header: "Customer",
-    cell: (row) => getCustomerName(row)
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Span, { ellipsis: true, children: getCustomerName(row.customer) })
   },
   ["Total" /* Total */]: {
     id: "Total" /* Total */,
@@ -41769,7 +41779,7 @@ var import_react260 = require("react");
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
 var import_react244 = require("react");
-var import_classnames92 = __toESM(require("classnames"));
+var import_classnames93 = __toESM(require("classnames"));
 
 // src/components/Invoices/InvoiceForm/useInvoiceForm.ts
 var import_react242 = require("react");
@@ -41948,19 +41958,14 @@ var convertInvoiceFormToParams = (form) => {
         unitPrice: convertBigDecimalToCents(item.unitPrice),
         quantity: item.quantity
       };
-      return !import_effect27.BigDecimal.equals(form.taxRate, BIG_DECIMAL_ZERO) && item.isTaxable ? __spreadProps(__spreadValues({}, baseLineItem), {
-        salesTaxes: [
-          {
-            amount: convertBigDecimalToCents(
-              import_effect27.BigDecimal.multiply(item.amount, form.taxRate)
-            )
-          }
-        ]
-      }) : baseLineItem;
+      if (!item.isTaxable || import_effect27.BigDecimal.equals(form.taxRate, BIG_DECIMAL_ZERO)) return baseLineItem;
+      const itemTaxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal: item.amount, discountRate: form.discountRate });
+      const itemTaxes = computeTaxes({ taxableSubtotal: itemTaxableSubtotal, taxRate: form.taxRate });
+      return __spreadProps(__spreadValues({}, baseLineItem), { salesTaxes: [{ amount: convertBigDecimalToCents(itemTaxes) }] });
     })
   }, !import_effect27.BigDecimal.equals(form.discountRate, BIG_DECIMAL_ZERO) && {
     additionalDiscount: convertBigDecimalToCents(
-      import_effect27.BigDecimal.multiply(computeSubtotal(form.lineItems), form.discountRate)
+      computeAdditionalDiscount({ subtotal: computeSubtotal(form.lineItems), discountRate: form.discountRate })
     )
   });
 };
@@ -42053,12 +42058,8 @@ var import_effect29 = require("effect");
 
 // src/features/customers/components/CustomerSelector.tsx
 var import_react243 = require("react");
-var import_classnames91 = __toESM(require("classnames"));
+var import_classnames92 = __toESM(require("classnames"));
 var import_jsx_runtime352 = require("react/jsx-runtime");
-function getCustomerName2(customer) {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = customer.individualName) != null ? _a : customer.companyName) != null ? _b : customer.externalId) != null ? _c : "Unknown Customer";
-}
 var CustomerAsOption = class {
   constructor(customer) {
     __publicField(this, "internalCustomer");
@@ -42068,7 +42069,7 @@ var CustomerAsOption = class {
     return this.internalCustomer;
   }
   get label() {
-    return getCustomerName2(this.internalCustomer);
+    return getCustomerName(this.internalCustomer);
   }
   get id() {
     return this.internalCustomer.id;
@@ -42085,7 +42086,7 @@ function CustomerSelector({
   inline,
   className
 }) {
-  const combinedClassName = (0, import_classnames91.default)(
+  const combinedClassName = (0, import_classnames92.default)(
     "Layer__CustomerSelector",
     inline && "Layer__CustomerSelector--inline",
     className
@@ -42127,7 +42128,7 @@ function CustomerSelector({
         return null;
       }
       return {
-        label: getCustomerName2(selectedCustomer),
+        label: getCustomerName(selectedCustomer),
         value: selectedCustomer.id
       };
     },
@@ -42180,7 +42181,7 @@ var INVOICE_FORM_CSS_PREFIX = "Layer__InvoiceForm";
 var INVOICE_FORM_FIELD_CSS_PREFIX = `${INVOICE_FORM_CSS_PREFIX}__Field`;
 var getDueAtChanged = (dueAt, previousDueAt) => dueAt === null && previousDueAt !== null || dueAt !== null && previousDueAt === null || dueAt !== null && previousDueAt !== null && (0, import_date5.toCalendarDate)(dueAt).compare((0, import_date5.toCalendarDate)(previousDueAt)) !== 0;
 var InvoiceFormTotalRow = ({ label, value, children }) => {
-  const className = (0, import_classnames92.default)(
+  const className = (0, import_classnames93.default)(
     `${INVOICE_FORM_CSS_PREFIX}__TotalRow`,
     children && `${INVOICE_FORM_CSS_PREFIX}__TotalRow--withField`
   );
@@ -42338,7 +42339,7 @@ var InvoiceForm = (0, import_react244.forwardRef)((props, ref) => {
             {
               gap: "xs",
               align: "end",
-              className: (0, import_classnames92.default)(`${INVOICE_FORM_CSS_PREFIX}__LineItem`, isReadOnly && `${INVOICE_FORM_CSS_PREFIX}__LineItem--readonly`),
+              className: (0, import_classnames93.default)(`${INVOICE_FORM_CSS_PREFIX}__LineItem`, isReadOnly && `${INVOICE_FORM_CSS_PREFIX}__LineItem--readonly`),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(innerField.FormTextField, { label: "Product/Service", showLabel: index === 0, isReadOnly }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime353.jsx)(innerField.FormTextField, { label: "Description", showLabel: index === 0, isReadOnly }) }),
@@ -42666,7 +42667,7 @@ var useInvoicePaymentForm = (props) => {
 
 // src/components/PaymentMethod/PaymentMethodComboBox.tsx
 var import_react247 = require("react");
-var import_classnames93 = __toESM(require("classnames"));
+var import_classnames94 = __toESM(require("classnames"));
 var import_jsx_runtime355 = require("react/jsx-runtime");
 var PaymentMethodOptionConfig = {
   ["CASH" /* Cash */]: { label: "Cash", value: "CASH" /* Cash */ },
@@ -42677,7 +42678,7 @@ var PaymentMethodOptionConfig = {
 };
 var options2 = Object.values(PaymentMethodOptionConfig);
 var PaymentMethodComboBox = ({ value, onValueChange, isReadOnly, className, inline }) => {
-  const combinedClassName = (0, import_classnames93.default)(
+  const combinedClassName = (0, import_classnames94.default)(
     "Layer__PaymentMethodComboBox",
     inline && "Layer__PaymentMethodComboBox--inline",
     className
@@ -42736,7 +42737,7 @@ var InvoicePaymentForm = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)(VStack, { className: `${INVOICE_PAYMENT_FORM_CSS_PREFIX}__Section`, gap: "sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)(HStack, { className: `${INVOICE_PAYMENT_FORM_FIELD_CSS_PREFIX}__InvoiceNo`, gap: "xs", align: "center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(Span, { size: "sm", children: "Invoice" }),
-        /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)(Span, { size: "md", weight: "bold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)(Span, { size: "md", weight: "bold", ellipsis: true, children: [
           "#",
           invoice.invoiceNumber
         ] })
@@ -43458,7 +43459,7 @@ var InvoiceRefundForm = (0, import_react257.forwardRef)(({ onSuccess, invoice },
     /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)(VStack, { className: `${INVOICE_REFUND_FORM_CSS_PREFIX}__Section`, gap: "sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)(HStack, { className: `${INVOICE_REFUND_FORM_FIELD_CSS_PREFIX}__InvoiceNo`, gap: "xs", align: "center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(Span, { size: "sm", children: "Invoice" }),
-        /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)(Span, { size: "md", weight: "bold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)(Span, { size: "md", weight: "bold", ellipsis: true, children: [
           "#",
           invoice.invoiceNumber
         ] })
@@ -43664,7 +43665,7 @@ var InvoiceDetail = () => {
     }
   }, [hasChanges, toInvoiceTable]);
   return /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(import_jsx_runtime363.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(BaseDetailView, { slots: { Header: Header5, BackIcon: hasChanges ? X_default : BackArrow_default }, name: "Invoice Detail View", onGoBack, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(BaseDetailView, { slots: { Header: Header5, BackIcon: hasChanges ? X_default : BackArrow_default }, name: "InvoiceDetail", onGoBack, children: [
       viewState.mode === "Update" /* Update */ && /* @__PURE__ */ (0, import_jsx_runtime363.jsx)(InvoiceDetailSubHeader, { invoice: viewState.invoice }),
       /* @__PURE__ */ (0, import_jsx_runtime363.jsx)(
         InvoiceForm,
@@ -43730,7 +43731,7 @@ var InvoiceDetailHeader = ({ onSubmit, formState, isReadOnly, setIsReadOnly, ope
   const headingContent = isReadOnly ? invoiceNumber ? `Invoice #${invoiceNumber}` : "View Invoice" : invoiceNumber ? `Editing Invoice #${invoiceNumber}` : "Editing Invoice";
   const canMarkAsPaid = viewState.mode === "Update" /* Update */ && (viewState.invoice.status === "SENT" /* Sent */ || viewState.invoice.status === "PARTIALLY_PAID" /* PartiallyPaid */);
   return /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime363.jsx)(Heading2, { children: headingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime363.jsx)(Heading2, { className: "Layer__InvoiceDetail__Heading", ellipsis: true, children: headingContent }),
     isReadOnly ? /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(HStack, { gap: "xs", children: [
       canMarkAsPaid && /* @__PURE__ */ (0, import_jsx_runtime363.jsxs)(Button2, { onPress: openInvoicePaymentDrawer, children: [
         "Mark as paid",
@@ -43752,16 +43753,16 @@ var InvoiceDetailSubHeader = ({ invoice }) => {
 // src/components/ui/Meter/Meter.tsx
 var import_react261 = require("react");
 var import_react_aria_components20 = require("react-aria-components");
-var import_classnames94 = __toESM(require("classnames"));
+var import_classnames95 = __toESM(require("classnames"));
 var import_jsx_runtime364 = require("react/jsx-runtime");
 var getClassnameForSubComponent = (className, suffix) => {
-  return (0, import_classnames94.default)(`${METER_CLASS_NAME}__${suffix}`, className && `${className}__${suffix}`);
+  return (0, import_classnames95.default)(`${METER_CLASS_NAME}__${suffix}`, className && `${className}__${suffix}`);
 };
 var METER_CLASS_NAME = "Layer__Meter";
 var Meter = (0, import_react261.forwardRef)(
   function Meter2(_a, ref) {
     var _b = _a, { className, label, meterOnly } = _b, restProps = __objRest(_b, ["className", "label", "meterOnly"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(import_react_aria_components20.Meter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: (0, import_classnames94.default)(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(VStack, { gap: "3xs", fluid: true, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(import_react_aria_components20.Meter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: (0, import_classnames95.default)(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(VStack, { gap: "3xs", fluid: true, children: [
       !meterOnly && /* @__PURE__ */ (0, import_jsx_runtime364.jsxs)(HStack, { justify: "space-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(Label, { slot: "label", children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(Span, { slot: "value", children: valueText })