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

package/dist/index.d.ts

@@ -365,7 +365,7 @@ declare module '@layerfi/components/api/layer/linked_accounts' {
 declare module '@layerfi/components/api/layer/profit_and_loss' {
   import { ProfitAndLoss } from '@layerfi/components/types';
   import { S3PresignedUrl } from '@layerfi/components/types/general';
-  import { ProfitAndLossComparison, ProfitAndLossSummaries } from '@layerfi/components/types/profit_and_loss';
+  import type { ProfitAndLossComparison, ProfitAndLossComparisonRequestBody, ProfitAndLossSummaries } from '@layerfi/components/types/profit_and_loss';
   export const getProfitAndLoss: (baseUrl: string, accessToken: string | undefined, options?: {
       params?: Record<string, string | undefined> | undefined;
   } | undefined) => () => Promise<{
@@ -374,7 +374,7 @@ declare module '@layerfi/components/api/layer/profit_and_loss' {
   }>;
   export const compareProfitAndLoss: (baseUrl: string, accessToken: string | undefined, options?: {
       params?: Record<string, string | undefined> | undefined;
-      body?: Record<string, unknown> | undefined;
+      body?: ProfitAndLossComparisonRequestBody | undefined;
   } | undefined) => Promise<{
       data?: ProfitAndLossComparison;
       error?: unknown;
@@ -686,7 +686,7 @@ declare module '@layerfi/components/api/layer' {
       } | undefined) => Promise<Record<never, never>>;
       compareProfitAndLoss: (baseUrl: string, accessToken: string | undefined, options?: {
           params?: Record<string, string | undefined> | undefined;
-          body?: Record<string, unknown> | undefined;
+          body?: import("@layerfi/components/types/profit_and_loss").ProfitAndLossComparisonRequestBody | undefined;
       } | undefined) => Promise<{
           data?: import("@layerfi/components/types/profit_and_loss").ProfitAndLossComparison;
           error?: unknown;
@@ -1231,7 +1231,7 @@ declare module '@layerfi/components/components/BankTransactionMobileList/SplitAn
       showReceiptUploads?: boolean;
       showDescriptions?: boolean;
   }
-  export const SplitAndMatchForm: ({ bankTransaction, showTooltips, showReceiptUploads, showDescriptions, }: SplitAndMatchFormProps) => import("react/jsx-runtime").JSX.Element;
+  export const SplitAndMatchForm: ({ bankTransaction, showTooltips, showReceiptUploads, showDescriptions, showCategorization, }: SplitAndMatchFormProps) => import("react/jsx-runtime").JSX.Element;
   export {};
 
 }
@@ -1679,6 +1679,7 @@ declare module '@layerfi/components/components/Button/SubmitButton' {
       error?: boolean | string;
       active?: boolean;
       iconOnly?: boolean;
+      variant?: ButtonProps['variant'];
       action?: SubmitAction;
       noIcon?: boolean;
       tooltip?: ButtonProps['tooltip'];
@@ -1687,7 +1688,7 @@ declare module '@layerfi/components/components/Button/SubmitButton' {
       SAVE = "save",
       UPDATE = "update"
   }
-  export const SubmitButton: ({ active, className, processing, disabled, error, children, action, noIcon, ...props }: SubmitButtonProps) => import("react/jsx-runtime").JSX.Element;
+  export const SubmitButton: ({ active, className, processing, disabled, error, children, action, noIcon, variant, ...props }: SubmitButtonProps) => import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/Button/SwitchButton' {
@@ -2054,7 +2055,7 @@ declare module '@layerfi/components/components/DatePicker/DatePicker' {
       popperClassName?: string;
       currentDateOption?: boolean;
       minDate?: Date;
-      maxDate?: Date;
+      maxDate?: Date | null;
       navigateArrows?: NavigationArrows[];
       onChangeMode?: (mode: UnifiedPickerMode) => void;
       slots?: {
@@ -2148,6 +2149,14 @@ declare module '@layerfi/components/components/Drawer/Drawer' {
 declare module '@layerfi/components/components/Drawer/index' {
   export { Drawer } from '@layerfi/components/components/Drawer/Drawer';
 
+}
+declare module '@layerfi/components/components/DueStatus/DueStatus' {
+  export interface DueStatusProps {
+      dueDate: Date | string;
+      paidAt?: Date | string;
+  }
+  export const DueStatus: ({ dueDate, paidAt }: DueStatusProps) => import("react/jsx-runtime").JSX.Element | null;
+
 }
 declare module '@layerfi/components/components/ErrorBoundary/ErrorBoundary' {
   import { ErrorInfo, Component, type PropsWithChildren } from 'react';
@@ -2274,9 +2283,10 @@ declare module '@layerfi/components/components/Header/HeaderCol' {
   interface HeaderColProps {
       className?: string;
       style?: CSSProperties;
+      noPadding?: boolean;
       children: ReactNode;
   }
-  export const HeaderCol: ({ className, children, style }: HeaderColProps) => import("react/jsx-runtime").JSX.Element;
+  export const HeaderCol: ({ className, children, style, noPadding }: HeaderColProps) => import("react/jsx-runtime").JSX.Element;
   export {};
 
 }
@@ -2421,6 +2431,17 @@ declare module '@layerfi/components/components/Input/Select' {
   }
   export const Select: <T>({ name, options, className, classNamePrefix, value, onChange, disabled, placeholder, isInvalid, errorMessage, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 
+}
+declare module '@layerfi/components/components/Input/StaticValue' {
+  import { TextProps } from '@layerfi/components/components/Typography/Text';
+  export type StaticValueProps = TextProps;
+  /**
+   * Use in places where you want to show a static value instead of (disabled) input.
+   * Usually it can be used on a summary view after submitting the form,
+   * where showing disable input doesn't look right.
+   */
+  export const StaticValue: (props: StaticValueProps) => import("react/jsx-runtime").JSX.Element;
+
 }
 declare module '@layerfi/components/components/Input/index' {
   export { Input } from '@layerfi/components/components/Input/Input';
@@ -2957,7 +2978,13 @@ declare module '@layerfi/components/components/Pagination/Pagination' {
       hasMore?: boolean;
       fetchMore?: () => void;
   }
-  export const Pagination: ({ onPageChange, totalCount, siblingCount, currentPage, pageSize, hasMore, fetchMore, }: PaginationProps) => import("react/jsx-runtime").JSX.Element | null;
+  /**
+   * Pagination wrapped into container with spacing and positioning.
+   * Use PaginationContent component, if you want to render plain pagination element
+   * without spacings and positioning.
+   */
+  export const Pagination: (props: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+  export const PaginationContent: ({ onPageChange, totalCount, siblingCount, currentPage, pageSize, hasMore, fetchMore, }: PaginationProps) => import("react/jsx-runtime").JSX.Element | null;
 
 }
 declare module '@layerfi/components/components/Pagination/index' {
@@ -3044,16 +3071,18 @@ declare module '@layerfi/components/components/PlatformOnboarding/index' {
 declare module '@layerfi/components/components/ProfitAndLoss/ProfitAndLoss' {
   import { PropsWithChildren } from 'react';
   import { ReportingBasis } from '@layerfi/components/types';
+  import { ProfitAndLossCompareConfig } from '@layerfi/components/types/profit_and_loss';
   type Props = PropsWithChildren & {
       tagFilter?: {
           key: string;
           values: string[];
       };
+      comparisonConfig?: ProfitAndLossCompareConfig;
       reportingBasis?: ReportingBasis;
       asContainer?: boolean;
   };
   const ProfitAndLoss: {
-      ({ children, tagFilter, reportingBasis, asContainer, }: Props): import("react/jsx-runtime").JSX.Element;
+      ({ children, tagFilter, comparisonConfig, reportingBasis, asContainer, }: Props): import("react/jsx-runtime").JSX.Element;
       Chart: ({ forceRerenderOnDataChange, tagFilter, }: import("@layerfi/components/components/ProfitAndLossChart/ProfitAndLossChart").Props) => import("react/jsx-runtime").JSX.Element;
       Context: import("react").Context<{
           data: import("@layerfi/components/types").ProfitAndLoss | undefined;
@@ -3081,21 +3110,24 @@ declare module '@layerfi/components/components/ProfitAndLoss/ProfitAndLoss' {
           data: import("@layerfi/components/types/profit_and_loss").ProfitAndLossComparisonItem[] | undefined;
           isLoading: boolean;
           isValidating: boolean;
-          error: unknown;
-          compareMode: boolean;
-          setCompareMode: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-          compareMonths: number;
-          setCompareMonths: import("react").Dispatch<import("react").SetStateAction<number>>;
-          compareOptions: import("@layerfi/components/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions").TagComparisonOption[];
-          setCompareOptions: import("react").Dispatch<import("react").SetStateAction<import("../ProfitAndLossCompareOptions/ProfitAndLossCompareOptions").TagComparisonOption[]>>;
-          refetch: (dateRange: import("@layerfi/components/types").DateRange, actAsInitial?: boolean) => void;
+          isPeriodsSelectEnabled: boolean;
+          compareModeActive: boolean;
+          comparePeriods: number;
+          setComparePeriods: import("react").Dispatch<import("react").SetStateAction<number>>;
+          compareOptions: import("@layerfi/components/types/profit_and_loss").TagComparisonOption[];
+          selectedCompareOptions: import("@layerfi/components/types/profit_and_loss").TagComparisonOption[];
+          setSelectedCompareOptions: (values: import("react-select").MultiValue<{
+              value: string;
+              label: string;
+          }>) => void;
           getProfitAndLossComparisonCsv: (dateRange: import("@layerfi/components/types").DateRange, moneyFormat?: import("../../types").MoneyFormat) => Promise<{
               data?: import("@layerfi/components/types/general").S3PresignedUrl;
               error?: unknown;
           }>;
+          comparisonConfig: ProfitAndLossCompareConfig | undefined;
       }>;
       DatePicker: ({ allowedDatePickerModes, customDateRanges, defaultDatePickerMode, }: import("@layerfi/components/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker").ProfitAndLossDatePickerProps) => import("react/jsx-runtime").JSX.Element;
-      CompareOptions: ({ tagComparisonOptions, defaultTagFilter: defaultOption, }: import("@layerfi/components/components/ProfitAndLossCompareOptions/index").ProfitAndLossCompareOptionsProps) => import("react/jsx-runtime").JSX.Element;
+      CompareOptions: () => import("react/jsx-runtime").JSX.Element | null;
       Summaries: (props: {
           actionable?: boolean;
           stringOverrides?: import("@layerfi/components/components/ProfitAndLossSummaries/ProfitAndLossSummaries").ProfitAndLossSummariesStringOverrides;
@@ -3113,7 +3145,7 @@ declare module '@layerfi/components/components/ProfitAndLoss/ProfitAndLoss' {
           stringOverrides?: import("@layerfi/components/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts").ProfitAndLossDetailedChartsStringOverrides;
       }) => import("react/jsx-runtime").JSX.Element;
       Header: ({ text, className, headingClassName, withDatePicker, }: import("@layerfi/components/components/ProfitAndLossHeader/ProfitAndLossHeader").ProfitAndLossHeaderProps) => import("react/jsx-runtime").JSX.Element;
-      Report: ({ stringOverrides, comparisonConfig, allowedDatePickerModes, datePickerMode, defaultDatePickerMode, customDateRanges, csvMoneyFormat, parentRef, view, }: import("@layerfi/components/components/ProfitAndLossReport/ProfitAndLossReport").ProfitAndLossReportProps) => import("react/jsx-runtime").JSX.Element;
+      Report: ({ stringOverrides, allowedDatePickerModes, datePickerMode, defaultDatePickerMode, customDateRanges, csvMoneyFormat, parentRef, view, }: import("@layerfi/components/components/ProfitAndLossReport/ProfitAndLossReport").ProfitAndLossReportProps) => import("react/jsx-runtime").JSX.Element;
       DownloadButton: ({ stringOverrides, useComparisonPnl, moneyFormat, view, }: import("@layerfi/components/components/ProfitAndLossDownloadButton/ProfitAndLossDownloadButton").ProfitAndLossDownloadButtonProps) => import("react/jsx-runtime").JSX.Element;
   };
   export { ProfitAndLoss };
@@ -3158,27 +3190,7 @@ declare module '@layerfi/components/components/ProfitAndLossChart/index' {
 
 }
 declare module '@layerfi/components/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions' {
-  export interface ProfitAndLossCompareOptionsProps {
-      tagComparisonOptions: TagComparisonOption[];
-      defaultTagFilter: TagComparisonOption;
-  }
-  export interface TagComparisonOption {
-      displayName: string;
-      tagFilterConfig: TagViewConfig;
-  }
-  export type TagViewConfig = {
-      structure?: string;
-      tagFilters: TagFilterInput;
-  };
-  export type TagFilterInput = {
-      tagKey: string;
-      tagValues: string[];
-  } | 'None';
-  export const ProfitAndLossCompareOptions: ({ tagComparisonOptions, defaultTagFilter: defaultOption, }: ProfitAndLossCompareOptionsProps) => import("react/jsx-runtime").JSX.Element;
-
-}
-declare module '@layerfi/components/components/ProfitAndLossCompareOptions/index' {
-  export { ProfitAndLossCompareOptions, ProfitAndLossCompareOptionsProps, } from '@layerfi/components/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions';
+  export const ProfitAndLossCompareOptions: () => import("react/jsx-runtime").JSX.Element | null;
 
 }
 declare module '@layerfi/components/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker' {
@@ -3308,15 +3320,13 @@ declare module '@layerfi/components/components/ProfitAndLossReport/ProfitAndLoss
   import { View as ViewType } from '@layerfi/components/types/general';
   import { ReportsStringOverrides } from '@layerfi/components/views/Reports/Reports';
   import type { TimeRangePickerConfig } from '@layerfi/components/views/Reports/reportTypes';
-  import { ProfitAndLossCompareOptionsProps } from '@layerfi/components/components/ProfitAndLossCompareOptions/index';
   type ViewBreakpoint = ViewType | undefined;
   export type ProfitAndLossReportProps = {
       stringOverrides?: ReportsStringOverrides;
-      comparisonConfig?: ProfitAndLossCompareOptionsProps;
       parentRef?: RefObject<HTMLDivElement>;
       view?: ViewBreakpoint;
   } & TimeRangePickerConfig;
-  export const ProfitAndLossReport: ({ stringOverrides, comparisonConfig, allowedDatePickerModes, datePickerMode, defaultDatePickerMode, customDateRanges, csvMoneyFormat, parentRef, view, }: ProfitAndLossReportProps) => import("react/jsx-runtime").JSX.Element;
+  export const ProfitAndLossReport: ({ stringOverrides, allowedDatePickerModes, datePickerMode, defaultDatePickerMode, customDateRanges, csvMoneyFormat, parentRef, view, }: ProfitAndLossReportProps) => import("react/jsx-runtime").JSX.Element;
   export {};
 
 }
@@ -3361,13 +3371,11 @@ declare module '@layerfi/components/components/ProfitAndLossSummaries/index' {
 
 }
 declare module '@layerfi/components/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesHeading' {
-  import { PropsWithChildren } from 'react';
+  import type { PropsWithChildren } from 'react';
   import type { Variants } from '@layerfi/components/utils/styleUtils/sizeVariants';
-  type ProfitAndLossSummariesHeadingProps = {
-      variants?: Variants;
-  } & PropsWithChildren;
-  export function ProfitAndLossSummariesHeading({ variants, children, }: ProfitAndLossSummariesHeadingProps): import("react/jsx-runtime").JSX.Element;
-  export {};
+  export function ProfitAndLossSummariesHeading({ variants, children, }: PropsWithChildren<{
+      variants?: Pick<Variants, 'size'>;
+  }>): import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesList' {
@@ -3403,7 +3411,7 @@ declare module '@layerfi/components/components/ProfitAndLossSummaries/internal/P
 
 }
 declare module '@layerfi/components/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesSummary' {
-  import { type ReactNode } from 'react';
+  import type { ReactNode } from 'react';
   import type { Variants } from '@layerfi/components/utils/styleUtils/sizeVariants';
   type ProfitAndLossSummariesSummaryProps = {
       label: string;
@@ -3733,7 +3741,7 @@ declare module '@layerfi/components/components/TableBody/index' {
 }
 declare module '@layerfi/components/components/TableCell/TableCell' {
   import { TableCellProps } from '@layerfi/components/types/table';
-  export const TableCell: ({ children, className, isHeaderCell, isCurrency, align, primary, withExpandIcon, fullWidth, colSpan, onClick, style, width, }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+  export const TableCell: ({ children, className, isHeaderCell, isCurrency, align, primary, withExpandIcon, fullWidth, colSpan, onClick, style, width, nowrap, }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 
 }
 declare module '@layerfi/components/components/TableCell/index' {
@@ -4067,13 +4075,13 @@ declare module '@layerfi/components/components/Tooltip/useTooltip' {
           floating: HTMLElement | null;
       } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
       context: {
-          placement: import("@floating-ui/utils").Placement;
+          update: () => void;
           x: number;
           y: number;
+          placement: import("@floating-ui/utils").Placement;
           strategy: import("@floating-ui/utils").Strategy;
           middlewareData: import("@floating-ui/core").MiddlewareData;
           isPositioned: boolean;
-          update: () => void;
           floatingStyles: React.CSSProperties;
           open: boolean;
           onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
@@ -4116,13 +4124,13 @@ declare module '@layerfi/components/components/Tooltip/useTooltip' {
           floating: HTMLElement | null;
       } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
       context: {
-          placement: import("@floating-ui/utils").Placement;
+          update: () => void;
           x: number;
           y: number;
+          placement: import("@floating-ui/utils").Placement;
           strategy: import("@floating-ui/utils").Strategy;
           middlewareData: import("@floating-ui/core").MiddlewareData;
           isPositioned: boolean;
-          update: () => void;
           floatingStyles: React.CSSProperties;
           open: boolean;
           onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
@@ -4185,6 +4193,7 @@ declare module '@layerfi/components/components/Typography/Text' {
       whenTruncated = "whenTruncated",
       always = "always"
   }
+  export type TextStatus = 'success' | 'error' | 'warning';
   export interface TextTooltipOptions {
       contentClassName?: string;
       offset?: number;
@@ -4198,11 +4207,13 @@ declare module '@layerfi/components/components/Typography/Text' {
       children: ReactNode;
       size?: TextSize;
       weight?: TextWeight;
+      status?: TextStatus;
       htmlFor?: string;
       withTooltip?: TextUseTooltip;
       tooltipOptions?: TextTooltipOptions;
+      ellipsis?: boolean;
   }
-  export const Text: ({ as: Component, className, children, size, weight, withTooltip, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+  export const Text: ({ as: Component, className, children, size, weight, withTooltip, ellipsis, status, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
   export const TextWithTooltip: ({ as: Component, className, children, size: _size, weight: _weight, withTooltip: _withTooltip, tooltipOptions, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
 
 }
@@ -4310,15 +4321,14 @@ declare module '@layerfi/components/components/ui/Modal/ModalSlots' {
   };
   function ModalContextBar({ onClose }: ModalContextBarProps): import("react/jsx-runtime").JSX.Element;
   const ModalHeading: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react-aria-components").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>, "className"> & {
-      size?: "sm";
+      size?: "sm" | "lg";
       pbe?: "2xs" | "xs" | "sm" | "md" | "lg";
   }, "ref"> & import("react").RefAttributes<HTMLHeadingElement>, "slot" | "level">, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
   const ModalDescription: import("react").ForwardRefExoticComponent<Omit<Omit<{
-      slot?: string;
       size?: "xs" | "sm" | "md" | "lg";
       pbe?: "xs" | "sm" | "md" | "lg";
       align?: "center";
-  } & {
+  } & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "slot"> & {
       children?: import("react").ReactNode | undefined;
   } & import("react").RefAttributes<HTMLParagraphElement>, "slot">, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
   function ModalContent({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
@@ -4340,21 +4350,28 @@ declare module '@layerfi/components/components/ui/Stack/Stack' {
 }
 declare module '@layerfi/components/components/ui/Typography/Heading' {
   type HeadingDataProps = {
-      size?: 'sm';
+      size?: 'sm' | 'lg';
       pbe?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
   };
   const Heading: import("react").ForwardRefExoticComponent<Omit<Omit<import("react-aria-components").HeadingProps & import("react").RefAttributes<HTMLHeadingElement>, "className"> & HeadingDataProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
   export { Heading };
 
+}
+declare module '@layerfi/components/components/ui/Typography/MoneyText' {
+  const MoneySpan: import("react").ForwardRefExoticComponent<{
+      amount: number;
+      bold?: boolean;
+      size?: "xs" | "sm" | "md" | "lg";
+  } & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "slot"> & import("react").RefAttributes<HTMLSpanElement>>;
+  export { MoneySpan };
+
 }
 declare module '@layerfi/components/components/ui/Typography/Text' {
-  type TextProps = {
-      slot?: string;
-      size?: 'xs' | 'sm' | 'md' | 'lg';
-      pbe?: 'xs' | 'sm' | 'md' | 'lg';
-      align?: 'center';
-  };
-  const P: import("react").ForwardRefExoticComponent<TextProps & {
+  const P: import("react").ForwardRefExoticComponent<{
+      size?: "xs" | "sm" | "md" | "lg";
+      pbe?: "xs" | "sm" | "md" | "lg";
+      align?: "center";
+  } & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "slot"> & {
       children?: import("react").ReactNode | undefined;
   } & import("react").RefAttributes<HTMLParagraphElement>>;
   export { P };
@@ -4703,18 +4720,21 @@ declare module '@layerfi/components/contexts/ProfitAndLossComparisonContext/Prof
       data: import("@layerfi/components/types/profit_and_loss").ProfitAndLossComparisonItem[] | undefined;
       isLoading: boolean;
       isValidating: boolean;
-      error: unknown;
-      compareMode: boolean;
-      setCompareMode: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-      compareMonths: number;
-      setCompareMonths: import("react").Dispatch<import("react").SetStateAction<number>>;
-      compareOptions: import("@layerfi/components/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions").TagComparisonOption[];
-      setCompareOptions: import("react").Dispatch<import("react").SetStateAction<import("../../components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions").TagComparisonOption[]>>;
-      refetch: (dateRange: import("@layerfi/components/types").DateRange, actAsInitial?: boolean) => void;
+      isPeriodsSelectEnabled: boolean;
+      compareModeActive: boolean;
+      comparePeriods: number;
+      setComparePeriods: import("react").Dispatch<import("react").SetStateAction<number>>;
+      compareOptions: import("@layerfi/components/types/profit_and_loss").TagComparisonOption[];
+      selectedCompareOptions: import("@layerfi/components/types/profit_and_loss").TagComparisonOption[];
+      setSelectedCompareOptions: (values: import("react-select").MultiValue<{
+          value: string;
+          label: string;
+      }>) => void;
       getProfitAndLossComparisonCsv: (dateRange: import("@layerfi/components/types").DateRange, moneyFormat?: import("../../types").MoneyFormat) => Promise<{
           data?: S3PresignedUrl;
           error?: unknown;
       }>;
+      comparisonConfig: import("@layerfi/components/types/profit_and_loss").ProfitAndLossCompareConfig | undefined;
   }>;
 
 }
@@ -4814,6 +4834,7 @@ declare module '@layerfi/components/hooks/useAuth' {
       expires_in: number;
       apiUrl: "https://api.layerfi.com" | "https://sandbox.layerfi.com" | "https://staging.layerfi.com";
   }, any, {
+      keepPreviousData: true;
       revalidateOnFocus: true;
       revalidateOnReconnect: true;
       refreshInterval: (latestData: {
@@ -4846,9 +4867,9 @@ declare module '@layerfi/components/hooks/useBankTransactions/index' {
 
 }
 declare module '@layerfi/components/hooks/useBankTransactions/types' {
-  import { TagFilterInput } from '@layerfi/components/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions';
   import { BankTransaction, CategoryUpdate, DateRange, Direction, DisplayState, Metadata } from '@layerfi/components/types';
   import { LoadedStatus } from '@layerfi/components/types/general';
+  import { TagFilterInput } from '@layerfi/components/types/tags';
   export interface NumericRangeFilter {
       min?: number;
       max?: number;
@@ -5269,32 +5290,77 @@ declare module '@layerfi/components/hooks/useProfitAndLossComparison/index' {
 
 }
 declare module '@layerfi/components/hooks/useProfitAndLossComparison/useProfitAndLossComparison' {
-  import { TagComparisonOption } from '@layerfi/components/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions';
   import { DateRange, MoneyFormat, ReportingBasis } from '@layerfi/components/types';
+  import { MultiValue } from 'react-select';
+  import { ProfitAndLossCompareConfig, TagComparisonOption } from '@layerfi/components/types/profit_and_loss';
   export type Scope = 'expenses' | 'revenue';
   export type SidebarScope = Scope | undefined;
   type Props = {
       reportingBasis?: ReportingBasis;
+      comparisonConfig?: ProfitAndLossCompareConfig;
   };
-  export function useProfitAndLossComparison({ reportingBasis, }: Props): {
+  export function useProfitAndLossComparison({ reportingBasis, comparisonConfig, }: Props): {
       data: import("@layerfi/components/types/profit_and_loss").ProfitAndLossComparisonItem[] | undefined;
       isLoading: boolean;
       isValidating: boolean;
-      error: unknown;
-      compareMode: boolean;
-      setCompareMode: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-      compareMonths: number;
-      setCompareMonths: import("react").Dispatch<import("react").SetStateAction<number>>;
+      isPeriodsSelectEnabled: boolean;
+      compareModeActive: boolean;
+      comparePeriods: number;
+      setComparePeriods: import("react").Dispatch<import("react").SetStateAction<number>>;
       compareOptions: TagComparisonOption[];
-      setCompareOptions: import("react").Dispatch<import("react").SetStateAction<TagComparisonOption[]>>;
-      refetch: (dateRange: DateRange, actAsInitial?: boolean) => void;
+      selectedCompareOptions: TagComparisonOption[];
+      setSelectedCompareOptions: (values: MultiValue<{
+          value: string;
+          label: string;
+      }>) => void;
       getProfitAndLossComparisonCsv: (dateRange: DateRange, moneyFormat?: MoneyFormat) => Promise<{
           data?: import("@layerfi/components/types/general").S3PresignedUrl;
           error?: unknown;
       }>;
+      comparisonConfig: ProfitAndLossCompareConfig | undefined;
   };
   export {};
 
+}
+declare module '@layerfi/components/hooks/useProfitAndLossComparison/utils' {
+  import { DateRange } from '@layerfi/components/types';
+  import { DateRangePickerMode } from '@layerfi/components/providers/GlobalDateStore/GlobalDateStoreProvider';
+  import { TagComparisonOption } from '@layerfi/components/types/profit_and_loss';
+  export function prepareFiltersBody(compareOptions: TagComparisonOption[]): ({
+      required_tags: {
+          key: string;
+          value: string;
+      }[];
+  }[] & import("@layerfi/components/utils/array/getArrayWithAtLeastOneOrFallback").ReadonlyArrayWithAtLeastOne<{
+      required_tags: {
+          key: string;
+          value: string;
+      }[];
+  }>) | undefined;
+  export function preparePeriodsBody(dateRange: DateRange, comparePeriods: number, rangeDisplayMode: DateRangePickerMode): {
+      type: "Comparison_Months";
+      months: {
+          year: number;
+          month: number;
+      }[] & import("@layerfi/components/utils/array/getArrayWithAtLeastOneOrFallback").ReadonlyArrayWithAtLeastOne<{
+          year: number;
+          month: number;
+      }>;
+  } | {
+      type: "Comparison_Years";
+      years: {
+          year: number;
+      }[] & import("@layerfi/components/utils/array/getArrayWithAtLeastOneOrFallback").ReadonlyArrayWithAtLeastOne<{
+          year: number;
+      }>;
+  } | {
+      readonly type: "Comparison_Date_Ranges";
+      readonly date_ranges: readonly [{
+          readonly start_date: string;
+          readonly end_date: string;
+      }];
+  } | undefined;
+
 }
 declare module '@layerfi/components/hooks/useProjects' {
   type TagKey = string;
@@ -6028,7 +6094,7 @@ declare module '@layerfi/components/providers/GlobalDateStore/useGlobalDateRange
       defaultDatePickerMode?: DateRangePickerMode;
       onSetMonth?: (startOfMonth: Date) => void;
   }): {
-      allowedDateRangePickerModes: readonly ["dayRangePicker" | "monthPicker" | "monthRangePicker" | "yearPicker", ...("dayRangePicker" | "monthPicker" | "monthRangePicker" | "yearPicker")[]];
+      allowedDateRangePickerModes: import("@layerfi/components/utils/array/getArrayWithAtLeastOneOrFallback").ReadonlyArrayWithAtLeastOne<"dayRangePicker" | "monthPicker" | "monthRangePicker" | "yearPicker">;
       dateFormat: "MMM d" | undefined;
       rangeDisplayMode: "dayRangePicker" | "monthPicker" | "monthRangePicker" | "yearPicker";
       selected: Date | [Date, Date];
@@ -6211,6 +6277,86 @@ declare module '@layerfi/components/types/bank_transactions' {
   }
   export {};
 
+}
+declare module '@layerfi/components/types/bills' {
+  import { TransactionTag } from '@layerfi/components/types/tags';
+  import { Vendor } from '@layerfi/components/types/vendors';
+  const UNPAID_STATUS_MAP: {
+      readonly SENT: "SENT";
+      readonly PARTIALLY_PAID: "PARTIALLY_PAID";
+  };
+  export type UnpaidStatuses = typeof UNPAID_STATUS_MAP[keyof typeof UNPAID_STATUS_MAP];
+  export const UNPAID_STATUSES: ("SENT" | "PARTIALLY_PAID")[];
+  const PAID_STATUS_MAP: {
+      readonly PAID: "PAID";
+  };
+  export type PaidStatuses = typeof PAID_STATUS_MAP[keyof typeof PAID_STATUS_MAP];
+  export const PAID_STATUS: "PAID";
+  const VOIDED_STATUS_MAP: {
+      readonly VOIDED: "VOIDED";
+  };
+  export type VoidedStatuses = typeof VOIDED_STATUS_MAP[keyof typeof VOIDED_STATUS_MAP];
+  export const VOIDED_STATUS: "VOIDED";
+  export type BillStatus = UnpaidStatuses | PaidStatuses | VoidedStatuses;
+  type BillTerm = 'DUE_ON_RECEIPT' | 'NET_10' | 'NET_15' | 'NET_30' | 'NET_60';
+  export const BillTerms: {
+      id: BillTerm;
+      label: string;
+  }[];
+  export type Bill = {
+      additional_sales_taxes: SalesTax[];
+      additional_sales_taxes_total: number;
+      bill_number: string;
+      business_id: string;
+      due_at: string;
+      external_id: string;
+      id: string;
+      imported_at: string;
+      line_items: BillLineItem[];
+      outstanding_balance: number;
+      paid_at?: string;
+      payment_allocations: BillPaymentAllocation[];
+      received_at: string;
+      status: BillStatus;
+      subtotal: number;
+      terms: BillTerm;
+      total_amount: number;
+      transaction_tags: TransactionTag[];
+      type: 'Bill';
+      updated_at: string;
+      voided_at: string;
+      vendor: Vendor;
+  };
+  type BillLineItem = {
+      account_identifier: string;
+      bill_id: string;
+      description: string;
+      external_id: string;
+      id: string;
+      product: string;
+      quantity: number;
+      sales_taxes: SalesTax[] | null;
+      subtotal: number;
+      total_amount: number;
+      unit_price: number;
+  };
+  type BillPaymentAllocation = {
+      bill_id: string;
+      payment_id: string;
+      amount: number;
+      transaction_tags: TransactionTag[];
+  };
+  type SalesTax = {
+      amount: number;
+      tax_account: TaxAccount;
+  };
+  type TaxAccount = {
+      id?: string;
+      name?: string;
+      type?: string;
+  };
+  export {};
+
 }
 declare module '@layerfi/components/types/business' {
   export interface Business {
@@ -6781,7 +6927,10 @@ declare module '@layerfi/components/types/linked_accounts' {
 
 }
 declare module '@layerfi/components/types/profit_and_loss' {
+  import type { ReportingBasis } from '@layerfi/components/types';
+  import { ReadonlyArrayWithAtLeastOne } from '@layerfi/components/utils/array/getArrayWithAtLeastOneOrFallback';
   import { LineItem } from '@layerfi/components/types/line_item';
+  import { TagViewConfig } from '@layerfi/components/types/tags';
   export interface ProfitAndLoss {
       type: 'Profit_And_Loss';
       business_id: string;
@@ -6798,6 +6947,15 @@ declare module '@layerfi/components/types/profit_and_loss' {
       personal_expenses?: LineItem | null;
       fully_categorized: boolean;
   }
+  export interface TagComparisonOption {
+      displayName: string;
+      tagFilterConfig: TagViewConfig;
+  }
+  export interface ProfitAndLossCompareConfig {
+      tagComparisonOptions: TagComparisonOption[];
+      defaultTagFilter: TagComparisonOption;
+      defaultPeriods?: number;
+  }
   export interface ProfitAndLossComparison {
       type: string;
       pnls: ProfitAndLossComparisonItem[];
@@ -6817,6 +6975,35 @@ declare module '@layerfi/components/types/profit_and_loss' {
       personal_expenses?: LineItem | null;
       fully_categorized: boolean;
   }
+  type ProfitAndLossComparisonPeriods = {
+      type: 'Comparison_Months';
+      months: ReadonlyArrayWithAtLeastOne<{
+          year: number;
+          month: number;
+      }>;
+  } | {
+      type: 'Comparison_Years';
+      years: ReadonlyArrayWithAtLeastOne<{
+          year: number;
+      }>;
+  } | {
+      type: 'Comparison_Date_Ranges';
+      date_ranges: ReadonlyArrayWithAtLeastOne<{
+          start_date: string;
+          end_date: string;
+      }>;
+  };
+  type ProfitAndLossComparisonTags = {
+      required_tags?: ReadonlyArray<{
+          key: string;
+          value: string;
+      }>;
+  };
+  export type ProfitAndLossComparisonRequestBody = {
+      periods: ProfitAndLossComparisonPeriods;
+      tag_filters?: ReadonlyArrayWithAtLeastOne<ProfitAndLossComparisonTags>;
+      reporting_basis?: ReportingBasis;
+  };
   export interface ProfitAndLossComparisonItem {
       period: {
           type: string;
@@ -6853,6 +7040,7 @@ declare module '@layerfi/components/types/profit_and_loss' {
       type: 'Profit_And_Loss_Summaries';
       months: ProfitAndLossSummary[];
   }
+  export {};
 
 }
 declare module '@layerfi/components/types/quickbooks' {
@@ -6922,6 +7110,7 @@ declare module '@layerfi/components/types/table' {
       isHeaderCell?: boolean;
       align?: TableCellAlign;
       primary?: boolean;
+      nowrap?: boolean;
       withExpandIcon?: boolean;
       fullWidth?: boolean;
       width?: string;
@@ -6930,6 +7119,25 @@ declare module '@layerfi/components/types/table' {
       onClick?: (e: React.MouseEvent<HTMLTableCellElement, MouseEvent>) => void;
   }
 
+}
+declare module '@layerfi/components/types/tags' {
+  export type TransactionTag = {
+      id: string;
+      key: string;
+      value: string;
+      created_at: string;
+      updated_at: string;
+      deleted_at?: string;
+  };
+  export type TagFilterInput = {
+      tagKey: string;
+      tagValues: string[];
+  } | 'None';
+  export type TagViewConfig = {
+      structure?: string;
+      tagFilters: TagFilterInput;
+  };
+
 }
 declare module '@layerfi/components/types/tasks' {
   import { DocumentType } from '@layerfi/components/types/file_upload';
@@ -6988,8 +7196,25 @@ declare module '@layerfi/components/types/utility/oneOf' {
 declare module '@layerfi/components/types/utility/promises' {
   export type Awaitable<T> = T | Promise<T>;
 
+}
+declare module '@layerfi/components/types/vendors' {
+  export type VendorStatus = 'ACTIVE' | 'ARCHIVED';
+  export type Vendor = {
+      id: string;
+      external_id: string;
+      individual_name?: string;
+      company_name?: string;
+      email?: string;
+      mobile_phone?: string;
+      office_phone?: string;
+      address_string?: string;
+      notes?: string;
+      status: VendorStatus;
+  };
+
 }
 declare module '@layerfi/components/types' {
+  import type { EnumWithUnknownValues } from '@layerfi/components/types/utility/enumWithUnknownValues';
   export { OAuthResponse } from '@layerfi/components/types/authentication';
   export { LayerContextValues, LayerContextActionName, LayerContextAction, LayerContextHelpers, } from '@layerfi/components/types/layer_context';
   export { Metadata } from '@layerfi/components/types/api';
@@ -7015,14 +7240,19 @@ declare module '@layerfi/components/types' {
       startDate: T;
       endDate: T;
   };
-  export type ReportingBasis = 'CASH' | 'ACCRUAL';
+  type StrictReportingBasis = 'CASH' | 'CASH_COLLECTED' | 'ACCRUAL';
+  export type ReportingBasis = EnumWithUnknownValues<StrictReportingBasis>;
   export type MoneyFormat = 'CENTS' | 'DOLLAR_STRING';
 
 }
 declare module '@layerfi/components/utils/array/getArrayWithAtLeastOneOrFallback' {
-  type ArrayWithAtLeastOne<T> = readonly [T, ...T[]];
-  export function getArrayWithAtLeastOneOrFallback<T>(list: ReadonlyArray<T>, fallback: ArrayWithAtLeastOne<T>): ArrayWithAtLeastOne<T>;
-  export {};
+  export type ReadonlyArrayWithAtLeastOne<T> = readonly [T, ...T[]];
+  export function isArrayWithAtLeastOne<T>(list: ReadonlyArray<T>): list is ReadonlyArrayWithAtLeastOne<T>;
+  export function getArrayWithAtLeastOneOrFallback<T>(list: ReadonlyArray<T>, fallback: ReadonlyArrayWithAtLeastOne<T>): ReadonlyArrayWithAtLeastOne<T>;
+
+}
+declare module '@layerfi/components/utils/array/range' {
+  export function range(start: number, end: number): ReadonlyArray<number>;
 
 }
 declare module '@layerfi/components/utils/bankTransactions' {
@@ -7053,6 +7283,12 @@ declare module '@layerfi/components/utils/bankTransactions' {
   };
   export const hasReceipts: (bankTransaction?: BankTransaction) => boolean | undefined;
 
+}
+declare module '@layerfi/components/utils/bills' {
+  import { Bill } from '@layerfi/components/types/bills';
+  export const isBillPaid: (status?: Bill["status"]) => status is "PAID";
+  export const isBillUnpaid: (status?: Bill["status"]) => boolean;
+
 }
 declare module '@layerfi/components/utils/business' {
   import { Business } from '@layerfi/components/types';
@@ -7107,6 +7343,21 @@ declare module '@layerfi/components/utils/format' {
    * 100.001 -> 10000
    */
   export const convertToCents: (amount?: number | string) => number | undefined;
+  /**
+   * Convert amount from cents to dollars.
+   * For example:
+   * 10000 -> 100
+   * 10001 -> 100.01
+   */
+  export const convertFromCents: (amount?: number | string) => number | undefined;
+  /**
+   * Convert cents amount to currency in dollars.
+   */
+  export const convertCentsToCurrency: (amount?: number | string) => string | undefined;
+  /**
+   * Format date to a given format. By default, it uses the DATE_FORMAT.
+   */
+  export const formatDate: (date?: string | Date, dateFormat?: string) => string;
 
 }
 declare module '@layerfi/components/utils/helpers' {
@@ -7128,8 +7379,9 @@ declare module '@layerfi/components/utils/journal' {
 
 }
 declare module '@layerfi/components/utils/profitAndLossComparisonUtils' {
+  import { DateRangePickerMode } from '@layerfi/components/providers/GlobalDateStore/GlobalDateStoreProvider';
   import { LineItem } from '@layerfi/components/types';
-  export const generatComparisonMonths: (startDate: number | Date, numberOfMonths: number) => string[];
+  export const generateComparisonPeriods: (startDate: Date, numberOfPeriods: number, rangeDisplayMode: DateRangePickerMode) => string[];
   export const getComparisonValue: (name: string, depth: number, cellData: string | number | LineItem) => string | number;
   export const mergeComparisonLineItemsAtDepth: (lineItems: LineItem[]) => LineItem[];
 
@@ -7181,6 +7433,11 @@ declare module '@layerfi/components/utils/swr/defaultSWRConfig' {
       readonly revalidateIfStale: false;
   };
 
+}
+declare module '@layerfi/components/utils/vendors' {
+  import { Vendor } from '@layerfi/components/types/vendors';
+  export const getVendorName: (vendor?: Vendor) => string;
+
 }
 declare module '@layerfi/components/utils/zustand/useStoreWithDateSelected' {
   import type { StoreApi } from 'zustand';
@@ -7374,13 +7631,13 @@ declare module '@layerfi/components/views/ProjectProfitability/index' {
 declare module '@layerfi/components/views/Reports/Reports' {
   import { RefObject } from 'react';
   import { BalanceSheetStringOverrides } from '@layerfi/components/components/BalanceSheet/BalanceSheet';
-  import { ProfitAndLossCompareOptionsProps } from '@layerfi/components/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions';
   import { ProfitAndLossDetailedChartsStringOverrides } from '@layerfi/components/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts';
   import { PnLDownloadButtonStringOverrides } from '@layerfi/components/components/ProfitAndLossDownloadButton/index';
   import { ProfitAndLossTableStringOverrides } from '@layerfi/components/components/ProfitAndLossTable/index';
   import { StatementOfCashFlowStringOverrides } from '@layerfi/components/components/StatementOfCashFlow/StatementOfCashFlow';
   import { View as ViewType } from '@layerfi/components/types/general';
   import type { TimeRangePickerConfig } from '@layerfi/components/views/Reports/reportTypes';
+  import { ProfitAndLossCompareConfig } from '@layerfi/components/types/profit_and_loss';
   type ViewBreakpoint = ViewType | undefined;
   export interface ReportsStringOverrides {
       title?: string;
@@ -7397,7 +7654,7 @@ declare module '@layerfi/components/views/Reports/Reports' {
       showTitle?: boolean;
       stringOverrides?: ReportsStringOverrides;
       enabledReports?: ReportType[];
-      comparisonConfig?: ProfitAndLossCompareOptionsProps;
+      comparisonConfig?: ProfitAndLossCompareConfig;
       profitAndLossConfig?: TimeRangePickerConfig;
       statementOfCashFlowConfig?: TimeRangePickerConfig;
   }
@@ -7406,7 +7663,6 @@ declare module '@layerfi/components/views/Reports/Reports' {
       containerRef: RefObject<HTMLDivElement>;
       openReport: ReportType;
       stringOverrides?: ReportsStringOverrides;
-      comparisonConfig?: ProfitAndLossCompareOptionsProps;
       profitAndLossConfig?: TimeRangePickerConfig;
       statementOfCashFlowConfig?: TimeRangePickerConfig;
       view: ViewBreakpoint;