@layerfi/components 0.1.66 → 0.1.67

package/dist/esm/index.js

@@ -289,6 +289,9 @@ var getProfitAndLossCsv = get(
     moneyFormat
   }) => `/v1/businesses/${businessId}/reports/profit-and-loss/exports/csv?${startDate ? `start_date=${encodeURIComponent(startDate)}` : ""}${endDate ? `&end_date=${encodeURIComponent(endDate)}` : ""}${month ? `&month=${month}` : ""}${year ? `&year=${year}` : ""}${reportingBasis ? `&reporting_basis=${reportingBasis}` : ""}${tagKey ? `&tag_key=${tagKey}` : ""}${tagValues ? `&tag_values=${tagValues}` : ""}${moneyFormat ? `&money_format=${moneyFormat}` : ""}`
 );
+var profitAndLossComparisonCsv = post(
+  ({ businessId, moneyFormat }) => `/v1/businesses/${businessId}/reports/profit-and-loss/exports/comparison-csv?money_format=${moneyFormat ? moneyFormat : "DOLLAR_STRING"}`
+);
 
 // src/api/layer/quickbooks.ts
 var syncFromQuickbooks = post(({ businessId }) => `/v1/businesses/${businessId}/quickbooks/sync-from`);
@@ -345,6 +348,7 @@ var Layer = {
   getLinkedAccounts,
   getJournal,
   compareProfitAndLoss,
+  profitAndLossComparisonCsv,
   createJournalEntries,
   getPlaidLinkToken,
   getPlaidUpdateModeLinkToken,
@@ -2418,7 +2422,7 @@ var ChevronRight = ({ ...props }) => /* @__PURE__ */ React16.createElement(
 var ChevronRight_default = ChevronRight;
 
 // src/components/Button/Button.tsx
-import React18, { useRef as useRef2 } from "react";
+import React20, { useRef as useRef2 } from "react";
 
 // src/icons/Loader.tsx
 import * as React17 from "react";
@@ -2507,6 +2511,150 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React17.createElement(
 );
 var Loader_default = Loader;
 
+// src/components/Tooltip/Tooltip.tsx
+import React19, {
+  forwardRef as forwardRef4,
+  isValidElement,
+  cloneElement
+} from "react";
+
+// src/components/Tooltip/useTooltip.ts
+import React18, { useState as useState6 } from "react";
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  useTransitionStyles
+} from "@floating-ui/react";
+var TooltipContext = React18.createContext(null);
+var useTooltipContext = () => {
+  const context = React18.useContext(TooltipContext);
+  if (context == null) {
+    throw new Error("Tooltip components must be wrapped in <Tooltip />");
+  }
+  return context;
+};
+var useTooltip = ({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  disabled,
+  offset: offsetProp = 5,
+  shift: shiftProp = { padding: 5 }
+} = {}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState6(initialOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+  const data = useFloating({
+    placement,
+    open: disabled ? false : open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(offsetProp),
+      flip({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: shiftProp?.padding ?? 5
+      }),
+      shift(shiftProp)
+    ]
+  });
+  const context = data.context;
+  const hover = useHover(context, {
+    move: false,
+    enabled: controlledOpen == null
+  });
+  const focus = useFocus(context, {
+    enabled: controlledOpen == null
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+      transform: "scale(0.7)",
+      color: "transparent"
+    },
+    duration: 300
+  });
+  return React18.useMemo(
+    () => ({
+      open,
+      setOpen,
+      isMounted,
+      styles,
+      disabled,
+      ...interactions,
+      ...data
+    }),
+    [open, setOpen, interactions, data, styles, disabled]
+  );
+};
+
+// src/components/Tooltip/Tooltip.tsx
+import { useMergeRefs, FloatingPortal } from "@floating-ui/react";
+var Tooltip = ({
+  children,
+  ...options
+}) => {
+  const tooltip = useTooltip(options);
+  return /* @__PURE__ */ React19.createElement(TooltipContext.Provider, { value: tooltip }, children);
+};
+var TooltipTrigger = forwardRef4(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
+  const context = useTooltipContext();
+  const childrenRef = children.ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+  if (asChild && isValidElement(children)) {
+    return cloneElement(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        "data-state": context.open ? "open" : "closed"
+      })
+    );
+  }
+  return /* @__PURE__ */ React19.createElement(
+    "span",
+    {
+      ref,
+      "data-state": context.open ? "open" : "closed",
+      className: `Layer__tooltip-trigger Layer__tooltip-trigger--${context.open ? "open" : "closed"}`,
+      ...context.getReferenceProps(props)
+    },
+    children
+  );
+});
+var TooltipContent = forwardRef4(function TooltipContent2({ style, className, ...props }, propRef) {
+  const context = useTooltipContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  if (!context.open || context.disabled)
+    return null;
+  return /* @__PURE__ */ React19.createElement(FloatingPortal, null, /* @__PURE__ */ React19.createElement(
+    "div",
+    {
+      ref,
+      className,
+      style: {
+        ...context.floatingStyles
+      },
+      ...context.getFloatingProps(props)
+    },
+    /* @__PURE__ */ React19.createElement("div", { className: "Layer__tooltip-content", style: { ...context.styles } }, props.children)
+  ));
+});
+
 // src/components/Button/Button.tsx
 import classNames4 from "classnames";
 var Button = ({
@@ -2520,6 +2668,7 @@ var Button = ({
   justify = "center",
   fullWidth,
   isProcessing,
+  tooltip,
   ...props
 }) => {
   const buttonRef = useRef2(null);
@@ -2539,6 +2688,7 @@ var Button = ({
     iconOnly ? "Layer__btn--icon-only" : "",
     iconAsPrimary && "Layer__btn--with-primary-icon",
     fullWidth && "Layer__btn--full-width",
+    tooltip && "Layer__btn--with-tooltip",
     className
   );
   const startAnimation = () => buttonRef.current && [...buttonRef.current.getElementsByClassName("animateOnHover")].forEach(
@@ -2547,7 +2697,26 @@ var Button = ({
   const stopAnimation = () => buttonRef.current && [...buttonRef.current.getElementsByClassName("animateOnHover")].forEach(
     (el) => el.endElement()
   );
-  return /* @__PURE__ */ React18.createElement(
+  const content = /* @__PURE__ */ React20.createElement("span", { className: `Layer__btn-content Layer__justify--${justifyContent}` }, leftIcon && /* @__PURE__ */ React20.createElement(
+    "span",
+    {
+      className: classNames4(
+        "Layer__btn-icon Layer__btn-icon--left",
+        iconAsPrimary && "Layer__btn-icon--primary"
+      )
+    },
+    isProcessing ? /* @__PURE__ */ React20.createElement(Loader_default, { size: 12, className: "Layer__anim--rotating" }) : leftIcon
+  ), !iconOnly && /* @__PURE__ */ React20.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ React20.createElement(
+    "span",
+    {
+      className: classNames4(
+        "Layer__btn-icon Layer__btn-icon--right",
+        iconAsPrimary && "Layer__btn-icon--primary"
+      )
+    },
+    isProcessing ? /* @__PURE__ */ React20.createElement(Loader_default, { size: 12, className: "Layer__anim--rotating" }) : rightIcon
+  ));
+  return /* @__PURE__ */ React20.createElement(
     "button",
     {
       ...props,
@@ -2556,30 +2725,12 @@ var Button = ({
       onMouseLeave: stopAnimation,
       ref: buttonRef
     },
-    /* @__PURE__ */ React18.createElement("span", { className: `Layer__btn-content Layer__justify--${justifyContent}` }, leftIcon && /* @__PURE__ */ React18.createElement(
-      "span",
-      {
-        className: classNames4(
-          "Layer__btn-icon Layer__btn-icon--left",
-          iconAsPrimary && "Layer__btn-icon--primary"
-        )
-      },
-      isProcessing ? /* @__PURE__ */ React18.createElement(Loader_default, { size: 12, className: "Layer__anim--rotating" }) : leftIcon
-    ), !iconOnly && /* @__PURE__ */ React18.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ React18.createElement(
-      "span",
-      {
-        className: classNames4(
-          "Layer__btn-icon Layer__btn-icon--right",
-          iconAsPrimary && "Layer__btn-icon--primary"
-        )
-      },
-      isProcessing ? /* @__PURE__ */ React18.createElement(Loader_default, { size: 12, className: "Layer__anim--rotating" }) : rightIcon
-    ))
+    tooltip ? /* @__PURE__ */ React20.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React20.createElement(TooltipTrigger, null, content), tooltip && /* @__PURE__ */ React20.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip)) : content
   );
 };
 
 // src/components/Button/IconButton.tsx
-import React19 from "react";
+import React21 from "react";
 import classNames5 from "classnames";
 var IconButton = ({
   className,
@@ -2595,15 +2746,15 @@ var IconButton = ({
     withBorder && "Layer__icon-btn--border",
     className
   );
-  return /* @__PURE__ */ React19.createElement("button", { ...props, className: baseClassName }, icon);
+  return /* @__PURE__ */ React21.createElement("button", { ...props, className: baseClassName }, icon);
 };
 
 // src/components/Button/RetryButton.tsx
-import React21 from "react";
+import React23 from "react";
 
 // src/icons/RefreshCcw.tsx
-import * as React20 from "react";
-var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React20.createElement(
+import * as React22 from "react";
+var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2613,7 +2764,7 @@ var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React20.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React20.createElement(
+  /* @__PURE__ */ React22.createElement(
     "path",
     {
       d: "M0.75 3V7.5H5.25",
@@ -2622,7 +2773,7 @@ var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React20.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React20.createElement(
+  /* @__PURE__ */ React22.createElement(
     "path",
     {
       d: "M17.25 15V10.5H12.75",
@@ -2631,7 +2782,7 @@ var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React20.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React20.createElement(
+  /* @__PURE__ */ React22.createElement(
     "path",
     {
       d: "M15.3675 6.75C14.9871 5.67508 14.3407 4.71405 13.4884 3.95656C12.6361 3.19907 11.6059 2.66982 10.4938 2.41819C9.38167 2.16656 8.22393 2.20075 7.12861 2.51758C6.03328 2.8344 5.03606 3.42353 4.23 4.23L0.75 7.5M17.25 10.5L13.77 13.77C12.9639 14.5765 11.9667 15.1656 10.8714 15.4824C9.77607 15.7992 8.61833 15.8334 7.50621 15.5818C6.3941 15.3302 5.36385 14.8009 4.5116 14.0434C3.65935 13.2859 3.01288 12.3249 2.6325 11.25",
@@ -2658,14 +2809,14 @@ var RetryButton = ({
     processing ? "Layer__btn--processing" : "",
     className
   );
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React23.createElement(
     Button,
     {
       ...props,
       className: baseClassName,
       variant: "secondary" /* secondary */,
       disabled: processing || disabled,
-      rightIcon: /* @__PURE__ */ React21.createElement(RefreshCcw_default, { size: 12 }),
+      rightIcon: /* @__PURE__ */ React23.createElement(RefreshCcw_default, { size: 12 }),
       justify: "center"
     },
     children
@@ -2676,8 +2827,8 @@ var RetryButton = ({
 import React27 from "react";
 
 // src/icons/AlertCircle.tsx
-import * as React22 from "react";
-var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createElement(
+import * as React24 from "react";
+var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2687,7 +2838,7 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z",
@@ -2696,7 +2847,7 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M9 6V9",
@@ -2705,7 +2856,7 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M9 12H9.0075",
@@ -2718,8 +2869,8 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
 var AlertCircle_default = AlertCircle;
 
 // src/icons/CheckCircle.tsx
-import * as React23 from "react";
-var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
+import * as React25 from "react";
+var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2729,7 +2880,7 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React23.createElement(
+  /* @__PURE__ */ React25.createElement(
     "path",
     {
       d: "M16.5 8.30999V8.99999C16.4991 10.6173 15.9754 12.191 15.007 13.4864C14.0386 14.7817 12.6775 15.7293 11.1265 16.1879C9.57557 16.6465 7.91794 16.5914 6.40085 16.0309C4.88375 15.4704 3.58848 14.4346 2.70821 13.0778C1.82794 11.721 1.40984 10.116 1.51625 8.50223C1.62266 6.88841 2.2479 5.35223 3.2987 4.12279C4.34951 2.89335 5.76958 2.03653 7.34713 1.6801C8.92469 1.32367 10.5752 1.48674 12.0525 2.14499",
@@ -2738,7 +2889,7 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React23.createElement(
+  /* @__PURE__ */ React25.createElement(
     "path",
     {
       d: "M16.5 3L9 10.5075L6.75 8.2575",
@@ -2751,8 +2902,8 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createEle
 var CheckCircle_default = CheckCircle;
 
 // src/icons/Save.tsx
-import * as React24 from "react";
-var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
+import * as React26 from "react";
+var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React26.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2762,7 +2913,7 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M14.25 15.75H3.75C3.35218 15.75 2.97064 15.592 2.68934 15.3107C2.40804 15.0294 2.25 14.6478 2.25 14.25V3.75C2.25 3.35218 2.40804 2.97064 2.68934 2.68934C2.97064 2.40804 3.35218 2.25 3.75 2.25H12L15.75 6V14.25C15.75 14.6478 15.592 15.0294 15.3107 15.3107C15.0294 15.592 14.6478 15.75 14.25 15.75Z",
@@ -2771,7 +2922,7 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M12.75 15.75V9.75H5.25V15.75",
@@ -2780,7 +2931,7 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M5.25 2.25V6H11.25",
@@ -2792,150 +2943,6 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
 );
 var Save_default = Save;
 
-// src/components/Tooltip/Tooltip.tsx
-import React26, {
-  forwardRef as forwardRef4,
-  isValidElement,
-  cloneElement
-} from "react";
-
-// src/components/Tooltip/useTooltip.ts
-import React25, { useState as useState6 } from "react";
-import {
-  useFloating,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  useHover,
-  useFocus,
-  useDismiss,
-  useRole,
-  useInteractions,
-  useTransitionStyles
-} from "@floating-ui/react";
-var TooltipContext = React25.createContext(null);
-var useTooltipContext = () => {
-  const context = React25.useContext(TooltipContext);
-  if (context == null) {
-    throw new Error("Tooltip components must be wrapped in <Tooltip />");
-  }
-  return context;
-};
-var useTooltip = ({
-  initialOpen = false,
-  placement = "top",
-  open: controlledOpen,
-  onOpenChange: setControlledOpen,
-  disabled,
-  offset: offsetProp = 5,
-  shift: shiftProp = { padding: 5 }
-} = {}) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState6(initialOpen);
-  const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = setControlledOpen ?? setUncontrolledOpen;
-  const data = useFloating({
-    placement,
-    open: disabled ? false : open,
-    onOpenChange: setOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(offsetProp),
-      flip({
-        crossAxis: placement.includes("-"),
-        fallbackAxisSideDirection: "start",
-        padding: shiftProp?.padding ?? 5
-      }),
-      shift(shiftProp)
-    ]
-  });
-  const context = data.context;
-  const hover = useHover(context, {
-    move: false,
-    enabled: controlledOpen == null
-  });
-  const focus = useFocus(context, {
-    enabled: controlledOpen == null
-  });
-  const dismiss = useDismiss(context);
-  const role = useRole(context, { role: "tooltip" });
-  const interactions = useInteractions([hover, focus, dismiss, role]);
-  const { isMounted, styles } = useTransitionStyles(context, {
-    initial: {
-      opacity: 0,
-      transform: "scale(0.7)",
-      color: "transparent"
-    },
-    duration: 300
-  });
-  return React25.useMemo(
-    () => ({
-      open,
-      setOpen,
-      isMounted,
-      styles,
-      disabled,
-      ...interactions,
-      ...data
-    }),
-    [open, setOpen, interactions, data, styles, disabled]
-  );
-};
-
-// src/components/Tooltip/Tooltip.tsx
-import { useMergeRefs, FloatingPortal } from "@floating-ui/react";
-var Tooltip = ({
-  children,
-  ...options
-}) => {
-  const tooltip = useTooltip(options);
-  return /* @__PURE__ */ React26.createElement(TooltipContext.Provider, { value: tooltip }, children);
-};
-var TooltipTrigger = forwardRef4(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
-  const context = useTooltipContext();
-  const childrenRef = children.ref;
-  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
-  if (asChild && isValidElement(children)) {
-    return cloneElement(
-      children,
-      context.getReferenceProps({
-        ref,
-        ...props,
-        ...children.props,
-        "data-state": context.open ? "open" : "closed"
-      })
-    );
-  }
-  return /* @__PURE__ */ React26.createElement(
-    "span",
-    {
-      ref,
-      "data-state": context.open ? "open" : "closed",
-      className: `Layer__tooltip-trigger Layer__tooltip-trigger--${context.open ? "open" : "closed"}`,
-      ...context.getReferenceProps(props)
-    },
-    children
-  );
-});
-var TooltipContent = forwardRef4(function TooltipContent2({ style, className, ...props }, propRef) {
-  const context = useTooltipContext();
-  const ref = useMergeRefs([context.refs.setFloating, propRef]);
-  if (!context.open || context.disabled)
-    return null;
-  return /* @__PURE__ */ React26.createElement(FloatingPortal, null, /* @__PURE__ */ React26.createElement(
-    "div",
-    {
-      ref,
-      className,
-      style: {
-        ...context.floatingStyles
-      },
-      ...context.getFloatingProps(props)
-    },
-    /* @__PURE__ */ React26.createElement("div", { className: "Layer__tooltip-content", style: { ...context.styles } }, props.children)
-  ));
-});
-
 // src/components/Button/SubmitButton.tsx
 import classNames7 from "classnames";
 var buildRightIcon = ({
@@ -3233,6 +3240,7 @@ var DownloadButton = ({
   onClick,
   isDownloading,
   requestFailed,
+  tooltip,
   text = "Download",
   retryText = "Retry",
   errorText = "Download failed. Check connection and retry in few seconds."
@@ -3259,7 +3267,8 @@ var DownloadButton = ({
       disabled: isDownloading,
       iconAsPrimary: iconOnly,
       iconOnly,
-      isProcessing: isDownloading
+      isProcessing: isDownloading,
+      tooltip
     },
     text
   );
@@ -9211,6 +9220,9 @@ var PNLComparisonContext = createContext6({
   },
   refetch: function() {
     throw new Error("Function not implemented.");
+  },
+  getProfitAndLossComparisonCsv: function() {
+    throw new Error("Function not implemented.");
   }
 });
 
@@ -9783,6 +9795,21 @@ var useProfitAndLossComparison = ({
       reportingBasis
     ]
   );
+  const getProfitAndLossComparisonCsv = (dateRange, moneyFormat) => {
+    const periods = preparePeriodsBody(dateRange, compareMonths);
+    const tagFilters = prepareFiltersBody(compareOptions);
+    return Layer.profitAndLossComparisonCsv(apiUrl, auth.access_token, {
+      params: {
+        businessId,
+        moneyFormat
+      },
+      body: {
+        periods,
+        tag_filters: tagFilters,
+        reporting_basis: reportingBasis
+      }
+    });
+  };
   return {
     data: data?.pnls,
     isLoading,
@@ -9794,7 +9821,8 @@ var useProfitAndLossComparison = ({
     setCompareMonths,
     compareOptions,
     setCompareOptions,
-    refetch
+    refetch,
+    getProfitAndLossComparisonCsv
   };
 };
 
@@ -11585,10 +11613,14 @@ var ProfitAndLossDetailedCharts = ({
 import React130, { useContext as useContext16, useState as useState35 } from "react";
 var ProfitAndLossDownloadButton = ({
   stringOverrides,
+  useComparisonPnl = false,
   moneyFormat,
   view
 }) => {
   const { dateRange } = useContext16(ProfitAndLoss.Context);
+  const { getProfitAndLossComparisonCsv } = useContext16(
+    ProfitAndLoss.ComparisonContext
+  );
   const { auth, businessId, apiUrl } = useLayerContext();
   const [requestFailed, setRequestFailed] = useState35(false);
   const [isDownloading, setIsDownloading] = useState35(false);
@@ -11609,7 +11641,7 @@ var ProfitAndLossDownloadButton = ({
       }
     );
     try {
-      const result = await getProfitAndLossCsv2();
+      const result = useComparisonPnl ? await getProfitAndLossComparisonCsv(dateRange, moneyFormat) : await getProfitAndLossCsv2();
       if (result?.data?.presignedUrl) {
         window.location.href = result.data.presignedUrl;
         setRequestFailed(false);
@@ -11821,6 +11853,7 @@ var ProfitAndLossReport = ({
         ProfitAndLoss.DownloadButton,
         {
           stringOverrides: stringOverrides?.downloadButton,
+          useComparisonPnl: !!comparisonConfig,
           moneyFormat: csvMoneyFormat,
           view
         }
@@ -14224,8 +14257,6 @@ var ChartOfAccountsTableContent = ({
   const renderChartOfAccountsDesktopRow = (account, index, rowKey, depth) => {
     const expandable = !!account.sub_accounts && account.sub_accounts.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
-    const editButton = /* @__PURE__ */ React164.createElement(Edit2_default, { size: 12 });
-    const disabledEditButtonWithTooltip = /* @__PURE__ */ React164.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React164.createElement(TooltipTrigger, null, /* @__PURE__ */ React164.createElement(Edit2_default, { size: 12 })), /* @__PURE__ */ React164.createElement(TooltipContent, { className: "Layer__tooltip" }, "System accounts cannot be modified"));
     return /* @__PURE__ */ React164.createElement(React164.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ React164.createElement(
       TableRow,
       {
@@ -14256,14 +14287,15 @@ var ChartOfAccountsTableContent = ({
         Button,
         {
           variant: "secondary" /* secondary */,
-          rightIcon: !templateAccountsEditable && account.stable_name ? disabledEditButtonWithTooltip : editButton,
+          rightIcon: /* @__PURE__ */ React164.createElement(Edit2_default, { size: 12 }),
           iconOnly: true,
           disabled: !templateAccountsEditable && !!account.stable_name,
           onClick: (e) => {
             e.preventDefault();
             e.stopPropagation();
             editAccount(account.id);
-          }
+          },
+          tooltip: !templateAccountsEditable && account.stable_name ? "System accounts cannot be modified" : void 0
         },
         "Edit"
       )))