@layerfi/components 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -42,6 +42,7 @@ declare module '@layerfi/components/api/layer/balance_sheet' {
 }
 declare module '@layerfi/components/api/layer/bankTransactions' {
   import { CategoryUpdate, BankTransaction, Metadata } from '@layerfi/components/types';
+  import { BankTransactionMatch, BankTransactionMatchType } from '@layerfi/components/types/bank_transactions';
   export type GetBankTransactionsReturn = {
       data?: BankTransaction[];
       meta?: Metadata;
@@ -62,6 +63,16 @@ declare module '@layerfi/components/api/layer/bankTransactions' {
       data: BankTransaction;
       errors: unknown;
   }>;
+  export const matchBankTransaction: (baseUrl: string, accessToken: string | undefined, options?: {
+      params?: Record<string, string | undefined> | undefined;
+      body?: {
+          match_id: string;
+          type: BankTransactionMatchType;
+      } | undefined;
+  } | undefined) => Promise<{
+      data: BankTransactionMatch;
+      errors: unknown;
+  }>;
 
 }
 declare module '@layerfi/components/api/layer/categories' {
@@ -116,6 +127,16 @@ declare module '@layerfi/components/api/layer' {
           data: import("@layerfi/components/types").BankTransaction;
           errors: unknown;
       }>;
+      matchBankTransaction: (baseUrl: string, accessToken: string | undefined, options?: {
+          params?: Record<string, string | undefined> | undefined;
+          body?: {
+              match_id: string;
+              type: import("@layerfi/components/types/bank_transactions").BankTransactionMatchType;
+          } | undefined;
+      } | undefined) => Promise<{
+          data: import("@layerfi/components/types/bank_transactions").BankTransactionMatch;
+          errors: unknown;
+      }>;
       createAccount: (baseUrl: string, accessToken: string | undefined, options?: {
           params?: Record<string, string | undefined> | undefined;
           body?: import("@layerfi/components/types").NewAccount | undefined;
@@ -153,6 +174,27 @@ declare module '@layerfi/components/api/layer' {
 declare module '@layerfi/components/api/util' {
   export const formStringFromObject: (object: Record<string, string | number | boolean>) => string;
 
+}
+declare module '@layerfi/components/components/Badge/Badge' {
+  import React, { ReactNode } from 'react';
+  import { ButtonProps } from '@layerfi/components/components/Button/Button';
+  export enum BadgeSize {
+      SMALL = "small",
+      MEDIUM = "medium"
+  }
+  export interface BadgeProps {
+      children: ReactNode;
+      icon?: ReactNode;
+      onClick?: ButtonProps['onClick'];
+      tooltip?: ReactNode;
+      size?: BadgeSize;
+  }
+  export const Badge: ({ icon, onClick, children, tooltip, size, }: BadgeProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/Badge/index' {
+  export { Badge } from '@layerfi/components/components/Badge/Badge';
+
 }
 declare module '@layerfi/components/components/BalanceSheet/BalanceSheet' {
   import React from 'react';
@@ -194,6 +236,15 @@ declare module '@layerfi/components/components/BalanceSheetRow/BalanceSheetRow'
 declare module '@layerfi/components/components/BalanceSheetRow/index' {
   export { BalanceSheetRow } from '@layerfi/components/components/BalanceSheetRow/BalanceSheetRow';
 
+}
+declare module '@layerfi/components/components/BankTransactionListItem/Assignment' {
+  import React from 'react';
+  import { BankTransaction } from '@layerfi/components/types';
+  export interface AssignmentProps {
+      bankTransaction: BankTransaction;
+  }
+  export const Assignment: ({ bankTransaction }: AssignmentProps) => React.JSX.Element;
+
 }
 declare module '@layerfi/components/components/BankTransactionListItem/BankTransactionListItem' {
   import React from 'react';
@@ -201,11 +252,9 @@ declare module '@layerfi/components/components/BankTransactionListItem/BankTrans
   type Props = {
       dateFormat: string;
       bankTransaction: BankTransaction;
-      isOpen: boolean;
-      toggleOpen: (id: string) => void;
       editable: boolean;
   };
-  export const BankTransactionListItem: ({ dateFormat, bankTransaction, isOpen, toggleOpen, editable, }: Props) => React.JSX.Element | null;
+  export const BankTransactionListItem: ({ dateFormat, bankTransaction, editable, }: Props) => React.JSX.Element | null;
   export {};
 
 }
@@ -215,17 +264,38 @@ declare module '@layerfi/components/components/BankTransactionListItem/index' {
 }
 declare module '@layerfi/components/components/BankTransactionRow/BankTransactionRow' {
   import React from 'react';
-  import { BankTransaction } from '@layerfi/components/types';
+  import { BankTransaction, Category } from '@layerfi/components/types';
   type Props = {
       dateFormat: string;
       bankTransaction: BankTransaction;
-      isOpen: boolean;
-      toggleOpen: (id: string) => void;
       editable: boolean;
   };
-  export const BankTransactionRow: ({ dateFormat, bankTransaction, isOpen, toggleOpen, editable, }: Props) => React.JSX.Element | null;
+  export const extractDescriptionForSplit: (category: Category) => string;
+  export const getDefaultSelectedCategory: (bankTransaction: BankTransaction) => import("@layerfi/components/components/CategorySelect/CategorySelect").CategoryOption | undefined;
+  export const BankTransactionRow: ({ dateFormat, bankTransaction, editable, }: Props) => React.JSX.Element | null;
   export {};
 
+}
+declare module '@layerfi/components/components/BankTransactionRow/MatchBadge' {
+  import React from 'react';
+  import { BankTransaction } from '@layerfi/components/types';
+  export interface MatchBadgeProps {
+      bankTransaction: BankTransaction;
+      classNamePrefix: string;
+      dateFormat: string;
+      text?: string;
+  }
+  export const MatchBadge: ({ bankTransaction, classNamePrefix, dateFormat, text, }: MatchBadgeProps) => React.JSX.Element | undefined;
+
+}
+declare module '@layerfi/components/components/BankTransactionRow/SplitTooltipDetails' {
+  import React from 'react';
+  import { Category } from '@layerfi/components/types';
+  export const SplitTooltipDetails: ({ classNamePrefix, category, }: {
+      classNamePrefix: string;
+      category: Category;
+  }) => React.JSX.Element | undefined;
+
 }
 declare module '@layerfi/components/components/BankTransactionRow/index' {
   export { BankTransactionRow } from '@layerfi/components/components/BankTransactionRow/BankTransactionRow';
@@ -235,8 +305,9 @@ declare module '@layerfi/components/components/BankTransactions/BankTransactions
   import React from 'react';
   export interface BankTransactionsProps {
       asWidget?: boolean;
+      pageSize?: number;
   }
-  export const BankTransactions: ({ asWidget, }: BankTransactionsProps) => React.JSX.Element;
+  export const BankTransactions: ({ asWidget, pageSize, }: BankTransactionsProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/BankTransactions/index' {
@@ -254,8 +325,18 @@ declare module '@layerfi/components/components/Button/Button' {
       leftIcon?: ReactNode;
       rightIcon?: ReactNode;
       iconOnly?: ReactNode;
+      iconAsPrimary?: boolean;
   }
-  export const Button: ({ className, children, variant, leftIcon, rightIcon, iconOnly, ...props }: ButtonProps) => React.JSX.Element;
+  export const Button: ({ className, children, variant, leftIcon, rightIcon, iconOnly, iconAsPrimary, ...props }: ButtonProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/Button/IconButton' {
+  import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+  export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+      icon: ReactNode;
+      active?: boolean;
+  }
+  export const IconButton: ({ className, children, icon, active, ...props }: IconButtonProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/Button/SubmitButton' {
@@ -266,13 +347,26 @@ declare module '@layerfi/components/components/Button/SubmitButton' {
       error?: boolean | string;
       active?: boolean;
       iconOnly?: boolean;
+      action?: SubmitAction;
+  }
+  export enum SubmitAction {
+      SAVE = "save",
+      UPDATE = "update"
   }
-  export const SubmitButton: ({ active, className, processing, disabled, error, children, ...props }: SubmitButtonProps) => React.JSX.Element;
+  export const SubmitButton: ({ active, className, processing, disabled, error, children, action, ...props }: SubmitButtonProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/Button/TextButton' {
+  import React, { ButtonHTMLAttributes } from 'react';
+  export type TextButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+  export const TextButton: ({ className, children, ...props }: TextButtonProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/Button/index' {
   export { Button, ButtonVariant } from '@layerfi/components/components/Button/Button';
   export { SubmitButton } from '@layerfi/components/components/Button/SubmitButton';
+  export { IconButton } from '@layerfi/components/components/Button/IconButton';
+  export { TextButton } from '@layerfi/components/components/Button/TextButton';
 
 }
 declare module '@layerfi/components/components/CategoryMenu/CategoryMenu' {
@@ -293,6 +387,50 @@ declare module '@layerfi/components/components/CategoryMenu/CategoryMenu' {
 declare module '@layerfi/components/components/CategoryMenu/index' {
   export { CategoryMenu } from '@layerfi/components/components/CategoryMenu/CategoryMenu';
 
+}
+declare module '@layerfi/components/components/CategorySelect/CategorySelect' {
+  import React from 'react';
+  import { BankTransaction, Category } from '@layerfi/components/types';
+  import { SuggestedMatch } from '@layerfi/components/types/bank_transactions';
+  import { CategoryEntry } from '@layerfi/components/types/categories';
+  type Props = {
+      name?: string;
+      bankTransaction: BankTransaction;
+      value: CategoryOption | undefined;
+      onChange: (newValue: CategoryOption) => void;
+      disabled?: boolean;
+      className?: string;
+  };
+  export enum OptionActionType {
+      CATEGORY = "category",
+      MATCH = "match",
+      HIDDEN = "hidden"
+  }
+  export interface CategoryOptionPayload {
+      id: string;
+      option_type: OptionActionType;
+      display_name: string;
+      date?: string;
+      amount?: number;
+      type?: string;
+      stable_name?: string;
+      entries?: CategoryEntry[];
+      subCategories?: Category[];
+  }
+  export interface CategoryOption {
+      type: string;
+      disabled?: boolean;
+      payload: CategoryOptionPayload;
+  }
+  export const mapCategoryToOption: (category: Category) => CategoryOption;
+  export const mapSuggestedMatchToOption: (record: SuggestedMatch) => CategoryOption;
+  export const CategorySelect: ({ bankTransaction, name, value, onChange, disabled, className, }: Props) => React.JSX.Element;
+  export {};
+
+}
+declare module '@layerfi/components/components/CategorySelect/index' {
+  export { CategorySelect } from '@layerfi/components/components/CategorySelect/CategorySelect';
+
 }
 declare module '@layerfi/components/components/ChartOfAccounts/ChartOfAccounts' {
   import React from 'react';
@@ -335,7 +473,7 @@ declare module '@layerfi/components/components/Container/Container' {
       asWidget?: boolean;
       children: ReactNode;
   }
-  export const Container: ({ name, className, children, asWidget, }: ContainerProps) => React.JSX.Element;
+  export const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
 
 }
 declare module '@layerfi/components/components/Container/Header' {
@@ -378,10 +516,10 @@ declare module '@layerfi/components/components/ExpandedBankTransactionRow/Expand
   import { BankTransaction } from '@layerfi/components/types';
   type Props = {
       bankTransaction: BankTransaction;
-      close?: () => void;
       isOpen?: boolean;
       asListItem?: boolean;
       submitBtnText?: string;
+      close?: () => void;
   };
   export type SaveHandle = {
       save: () => void;
@@ -418,7 +556,11 @@ declare module '@layerfi/components/components/Input/FileInput' {
 }
 declare module '@layerfi/components/components/Input/Input' {
   import React, { HTMLProps } from 'react';
-  export const Input: ({ className, ...props }: HTMLProps<HTMLInputElement>) => React.JSX.Element;
+  export interface InputProps extends HTMLProps<HTMLInputElement> {
+      isInvalid?: boolean;
+      errorMessage?: string;
+  }
+  export const Input: ({ className, isInvalid, errorMessage, ...props }: InputProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/Input/InputGroup' {
@@ -450,30 +592,68 @@ declare module '@layerfi/components/components/Loader/index' {
   export { Loader } from '@layerfi/components/components/Loader/Loader';
 
 }
-declare module '@layerfi/components/components/Pill/Pill' {
-  import React, { PropsWithChildren } from 'react';
-  export const Pill: ({ children }: PropsWithChildren) => React.JSX.Element;
+declare module '@layerfi/components/components/MatchForm/MatchForm' {
+  import React from 'react';
+  import { BankTransaction } from '@layerfi/components/types';
+  export interface MatchFormProps {
+      classNamePrefix: string;
+      bankTransaction: BankTransaction;
+      selectedMatchId?: string;
+      setSelectedMatchId: (val?: string) => void;
+  }
+  export const MatchForm: ({ classNamePrefix, bankTransaction, selectedMatchId, setSelectedMatchId, }: MatchFormProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/MatchForm/index' {
+  export { MatchForm } from '@layerfi/components/components/MatchForm/MatchForm';
+
+}
+declare module '@layerfi/components/components/Pagination/Pagination' {
+  import React from 'react';
+  export interface PaginationProps {
+      currentPage: number;
+      pageSize: number;
+      onPageChange: (page: number) => void;
+      totalCount: number;
+      siblingCount?: number;
+  }
+  export const Pagination: ({ onPageChange, totalCount, siblingCount, currentPage, pageSize, }: PaginationProps) => React.JSX.Element | undefined;
 
 }
-declare module '@layerfi/components/components/Pill/index' {
-  export { Pill } from '@layerfi/components/components/Pill/Pill';
+declare module '@layerfi/components/components/Pagination/index' {
+  export { Pagination } from '@layerfi/components/components/Pagination/Pagination';
 
 }
 declare module '@layerfi/components/components/ProfitAndLoss/ProfitAndLoss' {
   import React, { PropsWithChildren } from 'react';
+  import { ReportingBasis } from '@layerfi/components/types';
+  type Props = PropsWithChildren & {
+      tagFilter?: {
+          key: string;
+          values: string[];
+      };
+      reportingBasis?: ReportingBasis;
+  };
   const ProfitAndLoss: {
-      ({ children }: PropsWithChildren): React.JSX.Element;
+      ({ children, tagFilter, reportingBasis }: Props): React.JSX.Element;
       Chart: () => React.JSX.Element;
       Context: React.Context<{
           data: import("@layerfi/components/types").ProfitAndLoss | undefined;
           isLoading: boolean;
+          isValidating: boolean;
           error: unknown;
           dateRange: import("@layerfi/components/types").DateRange;
           changeDateRange: (dateRange: Partial<import("@layerfi/components/types").DateRange>) => void;
+          refetch: () => void;
       }>;
       DatePicker: () => React.JSX.Element;
-      Summaries: () => React.JSX.Element;
-      Table: () => React.JSX.Element;
+      Summaries: ({ vertical, revenueLabel, }: {
+          revenueLabel?: string | undefined;
+          vertical?: boolean | undefined;
+      }) => React.JSX.Element;
+      Table: ({ lockExpanded }: {
+          lockExpanded?: boolean | undefined;
+      }) => React.JSX.Element;
   };
   export { ProfitAndLoss };
 
@@ -520,9 +700,9 @@ declare module '@layerfi/components/components/ProfitAndLossRow/ProfitAndLossRow
       maxDepth?: number;
       lineItem?: LineItem | null;
       direction?: Direction;
-      summarize?: boolean;
+      lockExpanded?: boolean;
   };
-  export const ProfitAndLossRow: ({ variant, lineItem, depth, maxDepth, direction, summarize, }: Props) => React.JSX.Element | null;
+  export const ProfitAndLossRow: ({ variant, lineItem, depth, maxDepth, direction, lockExpanded, }: Props) => React.JSX.Element | null;
   export {};
 
 }
@@ -532,7 +712,12 @@ declare module '@layerfi/components/components/ProfitAndLossRow/index' {
 }
 declare module '@layerfi/components/components/ProfitAndLossSummaries/ProfitAndLossSummaries' {
   import React from 'react';
-  export const ProfitAndLossSummaries: () => React.JSX.Element;
+  type Props = {
+      revenueLabel?: string;
+      vertical?: boolean;
+  };
+  export const ProfitAndLossSummaries: ({ vertical, revenueLabel, }: Props) => React.JSX.Element;
+  export {};
 
 }
 declare module '@layerfi/components/components/ProfitAndLossSummaries/index' {
@@ -541,7 +726,11 @@ declare module '@layerfi/components/components/ProfitAndLossSummaries/index' {
 }
 declare module '@layerfi/components/components/ProfitAndLossTable/ProfitAndLossTable' {
   import React from 'react';
-  export const ProfitAndLossTable: () => React.JSX.Element;
+  type Props = {
+      lockExpanded?: boolean;
+  };
+  export const ProfitAndLossTable: ({ lockExpanded }: Props) => React.JSX.Element;
+  export {};
 
 }
 declare module '@layerfi/components/components/ProfitAndLossTable/empty_profit_and_loss_report' {
@@ -553,6 +742,15 @@ declare module '@layerfi/components/components/ProfitAndLossTable/empty_profit_a
 declare module '@layerfi/components/components/ProfitAndLossTable/index' {
   export { ProfitAndLossTable } from '@layerfi/components/components/ProfitAndLossTable/ProfitAndLossTable';
 
+}
+declare module '@layerfi/components/components/ProfitAndLossView/ProfitAndLossView' {
+  import React from 'react';
+  export const ProfitAndLossView: () => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/ProfitAndLossView/index' {
+  export { ProfitAndLossView } from '@layerfi/components/components/ProfitAndLossView/ProfitAndLossView';
+
 }
 declare module '@layerfi/components/components/SkeletonBalanceSheetRow/SkeletonBalanceSheetRow' {
   import React, { PropsWithChildren } from 'react';
@@ -564,6 +762,20 @@ declare module '@layerfi/components/components/SkeletonBalanceSheetRow/SkeletonB
 declare module '@layerfi/components/components/SkeletonBalanceSheetRow/index' {
   export { SkeletonBalanceSheetRow } from '@layerfi/components/components/SkeletonBalanceSheetRow/SkeletonBalanceSheetRow';
 
+}
+declare module '@layerfi/components/components/SkeletonLoader/SkeletonLoader' {
+  import React from 'react';
+  export interface SkeletonLoaderProps {
+      width?: string;
+      height?: string;
+      className?: string;
+  }
+  export const SkeletonLoader: ({ height, width, className, }: SkeletonLoaderProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/SkeletonLoader/index' {
+  export { SkeletonLoader } from '@layerfi/components/components/SkeletonLoader/SkeletonLoader';
+
 }
 declare module '@layerfi/components/components/Textarea/Textarea' {
   import React, { HTMLProps } from 'react';
@@ -788,12 +1000,69 @@ declare module '@layerfi/components/components/Typography/index' {
   export { Text, TextSize, TextWeight } from '@layerfi/components/components/Typography/Text';
   export { Heading, HeadingSize } from '@layerfi/components/components/Typography/Heading';
 
+}
+declare module '@layerfi/components/config/general' {
+  export const DATE_FORMAT = "LLL d, yyyy";
+
+}
+declare module '@layerfi/components/config/theme' {
+  export const SHADES: {
+      50: {
+          s: number;
+          l: number;
+      };
+      100: {
+          s: number;
+          l: number;
+      };
+      200: {
+          s: number;
+          l: number;
+      };
+      300: {
+          s: number;
+          l: number;
+      };
+      500: {
+          s: number;
+          l: number;
+      };
+      600: {
+          s: number;
+          l: number;
+      };
+      700: {
+          s: number;
+          l: number;
+      };
+      800: {
+          s: number;
+          l: number;
+      };
+      1000: {
+          s: number;
+          l: number;
+      };
+  };
+  export const COLORS: {
+      dark: {
+          h: number;
+          s: number;
+          l: number;
+      };
+      light: {
+          h: number;
+          s: number;
+          l: number;
+      };
+  };
+
 }
 declare module '@layerfi/components/contexts/LayerContext/LayerContext' {
   /// <reference types="react" />
   import { LayerContextValues } from '@layerfi/components/types';
-  import { LayerThemeConfig } from '@layerfi/components/types/layer_context';
-  export const LayerContext: import("react").Context<LayerContextValues & {
+  import { LayerContextHelpers, LayerThemeConfig } from '@layerfi/components/types/layer_context';
+  export const LayerContext: import("react").Context<LayerContextValues & LayerContextHelpers & {
       setTheme: (theme: LayerThemeConfig) => void;
   }>;
 
@@ -830,6 +1099,7 @@ declare module '@layerfi/components/hooks/useBankTransactions/useBankTransaction
       isValidating: boolean;
       error: unknown;
       categorize: (id: BankTransaction['id'], newCategory: CategoryUpdate) => Promise<void>;
+      match: (id: BankTransaction['id'], matchId: BankTransaction['id']) => Promise<void>;
       updateOneLocal: (bankTransaction: BankTransaction) => void;
       refetch: () => void;
   };
@@ -870,24 +1140,50 @@ declare module '@layerfi/components/hooks/useLayerContext/index' {
 
 }
 declare module '@layerfi/components/hooks/useLayerContext/useLayerContext' {
-  export const useLayerContext: () => import("@layerfi/components/types").LayerContextValues & {
+  export const useLayerContext: () => import("@layerfi/components/types").LayerContextValues & import("../../types").LayerContextHelpers & {
       setTheme: (theme: import("@layerfi/components/types/layer_context").LayerThemeConfig) => void;
   };
 
+}
+declare module '@layerfi/components/hooks/usePagination/index' {
+  export { usePagination, DOTS } from '@layerfi/components/hooks/usePagination/usePagination';
+
+}
+declare module '@layerfi/components/hooks/usePagination/usePagination' {
+  export const DOTS = "...";
+  export interface UsePaginationProps {
+      totalCount: number;
+      pageSize: number;
+      siblingCount?: number;
+      currentPage: number;
+  }
+  export type UsePaginationReturn = (string | number)[] | undefined;
+  export const usePagination: ({ totalCount, pageSize, siblingCount, currentPage, }: UsePaginationProps) => UsePaginationReturn;
+
 }
 declare module '@layerfi/components/hooks/useProfitAndLoss/index' {
   export { useProfitAndLoss } from '@layerfi/components/hooks/useProfitAndLoss/useProfitAndLoss';
 
 }
 declare module '@layerfi/components/hooks/useProfitAndLoss/useProfitAndLoss' {
-  import { ProfitAndLoss, DateRange } from '@layerfi/components/types';
-  type Props = DateRange;
+  import { ProfitAndLoss, DateRange, ReportingBasis } from '@layerfi/components/types';
+  type Props = {
+      startDate?: Date;
+      endDate?: Date;
+      tagFilter?: {
+          key: string;
+          values: string[];
+      };
+      reportingBasis?: ReportingBasis;
+  };
   type UseProfitAndLoss = (props?: Props) => {
       data: ProfitAndLoss | undefined;
       isLoading: boolean;
+      isValidating: boolean;
       error: unknown;
       dateRange: DateRange;
       changeDateRange: (dateRange: Partial<DateRange>) => void;
+      refetch: () => void;
   };
   export const useProfitAndLoss: UseProfitAndLoss;
   export {};
@@ -937,22 +1233,15 @@ declare module '@layerfi/components/icons/ChevronDown' {
 }
 declare module '@layerfi/components/icons/ChevronLeft' {
   import * as React from 'react';
-  import { SVGProps } from 'react';
-  type Props = {
-      strokeColor?: string;
-      size?: number;
-  };
-  const ChevronLeft: ({ strokeColor, size, ...props }: Props & SVGProps<SVGSVGElement>) => React.JSX.Element;
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const ChevronLeft: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default ChevronLeft;
 
 }
 declare module '@layerfi/components/icons/ChevronRight' {
   import * as React from 'react';
-  import { SVGProps } from 'react';
-  type Props = SVGProps<SVGSVGElement> & {
-      size: SVGProps<SVGSVGElement>['width'];
-  };
-  const ChavronRight: ({ size, ...props }: Props) => React.JSX.Element;
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const ChavronRight: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default ChavronRight;
 
 }
@@ -962,13 +1251,6 @@ declare module '@layerfi/components/icons/DownloadCloud' {
   const DownloadCloud: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
   export default DownloadCloud;
 
-}
-declare module '@layerfi/components/icons/FolderPlus' {
-  import * as React from 'react';
-  import { IconSvgProps } from '@layerfi/components/icons/types';
-  const FolderPlus: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
-  export default FolderPlus;
-
 }
 declare module '@layerfi/components/icons/Link' {
   import * as React from 'react';
@@ -983,6 +1265,13 @@ declare module '@layerfi/components/icons/Loader' {
   const Loader: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default Loader;
 
+}
+declare module '@layerfi/components/icons/MinimizeTwo' {
+  import * as React from 'react';
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const MinimizeTwo: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default MinimizeTwo;
+
 }
 declare module '@layerfi/components/icons/RefreshCcw' {
   import * as React from 'react';
@@ -990,6 +1279,13 @@ declare module '@layerfi/components/icons/RefreshCcw' {
   const RefreshCcw: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default RefreshCcw;
 
+}
+declare module '@layerfi/components/icons/Save' {
+  import * as React from 'react';
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const Save: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default Save;
+
 }
 declare module '@layerfi/components/icons/Scissors' {
   import * as React from 'react';
@@ -1004,6 +1300,13 @@ declare module '@layerfi/components/icons/UploadCloud' {
   const UploadCloud: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default UploadCloud;
 
+}
+declare module '@layerfi/components/icons/X' {
+  import * as React from 'react';
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const X: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default X;
+
 }
 declare module '@layerfi/components/icons/types' {
   import { SVGProps } from 'react';
@@ -1017,6 +1320,7 @@ declare module '@layerfi/components/index' {
   export { BankTransactions } from '@layerfi/components/components/BankTransactions/index';
   export { Hello } from '@layerfi/components/components/Hello/index';
   export { ProfitAndLoss } from '@layerfi/components/components/ProfitAndLoss/index';
+  export { ProfitAndLossView } from '@layerfi/components/components/ProfitAndLossView/index';
   export { LayerProvider } from '@layerfi/components/providers/LayerProvider/index';
   export { ChartOfAccounts } from '@layerfi/components/components/ChartOfAccounts/index';
 
@@ -1113,6 +1417,9 @@ declare module '@layerfi/components/types/bank_transactions' {
       CREDIT = "CREDIT",
       DEBIT = "DEBIT"
   }
+  export enum BankTransactionMatchType {
+      CONFIRM_MATCH = "Confirm_Match"
+  }
   export interface BankTransaction extends Record<string, unknown> {
       type: 'Bank_Transaction';
       account_name?: string;
@@ -1134,6 +1441,31 @@ declare module '@layerfi/components/types/bank_transactions' {
       categorization_method: string;
       error?: string;
       processing?: boolean;
+      suggested_matches?: SuggestedMatch[];
+      match?: BankTransactionMatch;
+  }
+  export interface SuggestedMatch {
+      id: string;
+      matchType: string;
+      details: {
+          amount: number;
+          date: string;
+          description: string;
+          id: string;
+          type: string;
+      };
+  }
+  export interface BankTransactionMatch {
+      bank_transaction: BankTransaction;
+      id: string;
+      match_type?: string;
+      details: {
+          amount: number;
+          date: string;
+          description: string;
+          id: string;
+          type: string;
+      };
   }
 
 }
@@ -1144,7 +1476,12 @@ declare module '@layerfi/components/types/categories' {
       LAYER_REVIEW = "LAYER_REVIEW",
       CATEGORIZED = "CATEGORIZED",
       SPLIT = "SPLIT",
-      JOURNALING = "JOURNALING"
+      JOURNALING = "JOURNALING",
+      MATCHED = "MATCHED"
+  }
+  export interface CategoryEntry {
+      amount?: number;
+      category: Category;
   }
   export interface Category {
       id: string;
@@ -1153,6 +1490,7 @@ declare module '@layerfi/components/types/categories' {
       category: string;
       stable_name?: string;
       subCategories?: Category[];
+      entries?: CategoryEntry[];
   }
   export enum CategorizationType {
       AUTO = "AUTO",
@@ -1184,6 +1522,7 @@ declare module '@layerfi/components/types/categories' {
       }[];
   };
   export type CategoryUpdate = SingleCategoryUpdate | SplitCategoryUpdate;
+  export function hasSuggestions(categorization: Categorization): categorization is SuggestedCategorization;
 
 }
 declare module '@layerfi/components/types/chart_of_accounts' {
@@ -1238,21 +1577,41 @@ declare module '@layerfi/components/types/layer_context' {
       categories: Category[];
       apiUrl: string;
       theme?: LayerThemeConfig;
+      colors: ColorsPalette;
+  };
+  export type LayerContextHelpers = {
+      getColor: (shade: number) => ColorsPaletteOption | undefined;
   };
   export interface ColorHSLConfig {
       h: string;
       s: string;
       l: string;
   }
+  export interface ColorHSLNumberConfig {
+      h: number;
+      s: number;
+      l: number;
+  }
   export interface ColorRGBConfig {
       r: string;
       g: string;
       b: string;
   }
+  export interface ColorRGBNumberConfig {
+      r: number;
+      g: number;
+      b: number;
+  }
   export interface ColorHexConfig {
       hex: string;
   }
   export type ColorConfig = ColorHSLConfig | ColorRGBConfig | ColorHexConfig;
+  export interface ColorsPaletteOption {
+      hsl: ColorHSLNumberConfig;
+      rgb: ColorRGBNumberConfig;
+      hex: string;
+  }
+  export type ColorsPalette = Record<number, ColorsPaletteOption>;
   export interface LayerThemeConfig {
       colors?: {
           dark?: ColorConfig;
@@ -1313,7 +1672,7 @@ declare module '@layerfi/components/types/profit_and_loss' {
 }
 declare module '@layerfi/components/types' {
   export { OAuthResponse } from '@layerfi/components/types/authentication';
-  export { LayerContextValues, LayerContextActionName, LayerContextAction, } from '@layerfi/components/types/layer_context';
+  export { LayerContextValues, LayerContextActionName, LayerContextAction, LayerContextHelpers, } from '@layerfi/components/types/layer_context';
   export { Metadata } from '@layerfi/components/types/api';
   export { ProfitAndLoss } from '@layerfi/components/types/profit_and_loss';
   export { LineItem } from '@layerfi/components/types/line_item';
@@ -1325,16 +1684,32 @@ declare module '@layerfi/components/types' {
       startDate: T;
       endDate: T;
   };
+  export type ReportingBasis = 'CASH' | 'ACCRUAL';
 
 }
 declare module '@layerfi/components/utils/colors' {
-  import { LayerThemeConfig } from '@layerfi/components/types/layer_context';
+  import { LayerThemeConfig, ColorsPalette } from '@layerfi/components/types/layer_context';
   /**
    * Convert `theme` config set in Provider into component styles.
    *
    * @param {LayerThemeConfig} theme - the theme set with provider
    */
   export const parseStylesFromThemeConfig: (theme?: LayerThemeConfig) => {};
+  /**
+   * Build same color palette in RGB, HSL and HEX as CSS variables.
+   */
+  export const buildColorsPalette: (theme?: LayerThemeConfig) => ColorsPalette;
+
+}
+declare module '@layerfi/components/utils/format' {
+  /**
+   * Capitalize first letter of the given text.
+   */
+  export const capitalizeFirstLetter: (text: string) => string;
+
+}
+declare module '@layerfi/components/utils/helpers' {
+  export const range: (start: number, end: number) => number[];
 
 }
 declare module '@layerfi/components' {