@layerfi/components 0.1.1 → 0.1.3

package/dist/index.css

@@ -0,0 +1,106 @@
+/* src/components/Hello/Hello.css */
+.hello {
+  color: red;
+}
+
+/* src/components/Transactions/Transactions.css */
+.transactions {
+  --transaction-buttons-border-color: #D0D5DD;
+  --transaction-buttons-selected-background-color: #E0E9FF;
+  --transaction-table-background-color: white;
+  --transaction-table-border-color: #EAECF0;
+  --transaction-table-text-color: #101828;
+}
+.transactions {
+  margin: 3rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--transaction-table-border-color);
+  background-color: var(--transaction-table-background-color);
+  overflow: hidden;
+}
+.transactions header {
+  display: flex;
+  padding: 1rem;
+}
+.transactions header h1 {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-start;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 2rem;
+  margin: 0;
+}
+.transactions header div {
+  display: flex;
+  font-size: 1rem;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
+}
+.transactions .transaction-table {
+  display: grid;
+  grid-template-columns: auto repeat(4, 1fr) repeat(3, auto);
+  gap: 1px 0px;
+  background-color: var(--transaction-table-border-color);
+  border-top: 1px solid var(--transaction-table-border-color);
+  border-radius: 0.6rem;
+}
+.transactions .transaction-table div {
+  padding: 1rem;
+  background-color: white;
+  overflow: clip;
+  color: var(--transaction-table-text-color);
+  font-family: sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.transactions .transaction-table div select {
+  border: 2px solid var(--transaction-table-border-color);
+  border-radius: 0.6rem;
+  background-color: var(--transaction-table-background-color);
+  padding: 0.6rem 0.8rem;
+}
+.transactions .transaction-table div.header {
+  font-weight: bold;
+}
+.transactions .transaction-table div.expand-area {
+  grid-column: 1 / -1;
+  margin-top: -1px;
+}
+.transactions .transaction-table div.expand-content {
+  padding: 1rem;
+  text-align: center;
+}
+.transactions .radio-group {
+}
+.transactions .radio-group input {
+  position: absolute;
+  opacity: 0;
+}
+.transactions .radio-group div {
+  padding: 0.6rem 1rem;
+  border: 1px solid var(--transaction-buttons-border-color);
+  border-right: 0;
+  border-radius: 0;
+}
+.transactions .radio-group label:first-of-type div {
+  border-start-start-radius: 0.6rem;
+  border-end-start-radius: 0.6rem;
+}
+.transactions .radio-group label:last-of-type div {
+  border-right: 1px solid var(--transaction-buttons-border-color);
+  border-start-end-radius: 0.6rem;
+  border-end-end-radius: 0.6rem;
+}
+.transactions .radio-group input:checked + div {
+  background: var(--transaction-buttons-selected-background-color);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Hello/Hello.css", "../src/components/Transactions/Transactions.css"],
+  "sourcesContent": [".hello {\n  color: red;\n}\n", ".transactions {\n  --transaction-buttons-border-color: #D0D5DD;\n  --transaction-buttons-selected-background-color: #E0E9FF;\n  --transaction-table-background-color: white;\n  --transaction-table-border-color: #EAECF0;\n  --transaction-table-text-color: #101828;\n}\n\n.transactions {\n  margin: 3rem;\n  border-radius: 0.6rem;\n  border: 1px solid var(--transaction-table-border-color);\n  background-color: var(--transaction-table-background-color);\n  overflow: hidden;\n}\n\n.transactions header {\n  display: flex;\n  padding: 1rem;\n}\n\n.transactions header h1 {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  justify-content: flex-start;\n  font-size: 1.5rem;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 2rem;\n  margin: 0;\n}\n\n.transactions header div {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  flex: 1;\n  justify-content: flex-end;\n}\n\n.transactions .transaction-table {\n  display: grid;\n  grid-template-columns: auto repeat(4, 1fr) repeat(3, auto);\n  gap: 1px 0px;\n  background-color: var(--transaction-table-border-color);\n  border-top: 1px solid var(--transaction-table-border-color);\n  border-radius: 0.6rem;\n}\n\n.transactions .transaction-table div {\n  padding: 1rem;\n  background-color: white;\n  overflow: clip;\n  color: var(--transaction-table-text-color);\n  font-family: sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.transactions .transaction-table div select {\n  border: 2px solid var(--transaction-table-border-color);\n  border-radius: 0.6rem;\n  background-color: var(--transaction-table-background-color);\n  padding: 0.6rem 0.8rem;\n}\n\n.transactions .transaction-table div.header {\n  font-weight: bold;\n}\n\n.transactions .transaction-table div.expand-area {\n  grid-column: 1 / -1;\n  margin-top: -1px;\n}\n\n.transactions .transaction-table div.expand-content {\n  padding: 1rem;\n  text-align: center;\n}\n\n.transactions .radio-group {\n}\n\n.transactions .radio-group input {\n  position: absolute;\n  opacity: 0;\n}\n\n.transactions .radio-group div {\n  padding: 0.6rem 1rem;\n  border: 1px solid var(--transaction-buttons-border-color);\n  border-right: 0;\n  border-radius: 0;\n}\n\n.transactions .radio-group label:first-of-type div {\n  border-start-start-radius: 0.6rem;\n  border-end-start-radius: 0.6rem;\n}\n\n.transactions .radio-group label:last-of-type div {\n  border-right: 1px solid var(--transaction-buttons-border-color);\n  border-start-end-radius: 0.6rem;\n  border-end-end-radius: 0.6rem;\n}\n\n.transactions .radio-group input:checked + div {\n  background: var(--transaction-buttons-selected-background-color);\n}\n"],
+  "mappings": ";AAAA,CAAC;AACC,SAAO;AACT;;;ACFA,CAAC;AACC,sCAAoC;AACpC,mDAAiD;AACjD,wCAAsC;AACtC,oCAAkC;AAClC,kCAAgC;AAClC;AAEA,CARC;AASC,UAAQ;AACR,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI;AACtB,oBAAkB,IAAI;AACtB,YAAU;AACZ;AAEA,CAhBC,aAgBa;AACZ,WAAS;AACT,WAAS;AACX;AAEA,CArBC,aAqBa,OAAO;AACnB,WAAS;AACT,eAAa;AACb,QAAM;AACN,mBAAiB;AACjB,aAAW;AACX,cAAY;AACZ,eAAa;AACb,eAAa;AACb,UAAQ;AACV;AAEA,CAjCC,aAiCa,OAAO;AACnB,WAAS;AACT,aAAW;AACX,eAAa;AACb,QAAM;AACN,mBAAiB;AACnB;AAEA,CAzCC,aAyCa,CAAC;AACb,WAAS;AACT,yBAAuB,KAAK,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE;AACrD,OAAK,IAAI;AACT,oBAAkB,IAAI;AACtB,cAAY,IAAI,MAAM,IAAI;AAC1B,iBAAe;AACjB;AAEA,CAlDC,aAkDa,CATC,kBASkB;AAC/B,WAAS;AACT,oBAAkB;AAClB,YAAU;AACV,SAAO,IAAI;AACX,eAAa;AACb,aAAW;AACX,cAAY;AACZ,eAAa;AACb,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,eAAa;AACf;AAEA,CAjEC,aAiEa,CAxBC,kBAwBkB,IAAI;AACnC,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe;AACf,oBAAkB,IAAI;AACtB,WAAS,OAAO;AAClB;AAEA,CAxEC,aAwEa,CA/BC,kBA+BkB,GAAG,CAAC;AACnC,eAAa;AACf;AAEA,CA5EC,aA4Ea,CAnCC,kBAmCkB,GAAG,CAAC;AACnC,eAAa,EAAE,EAAE;AACjB,cAAY;AACd;AAEA,CAjFC,aAiFa,CAxCC,kBAwCkB,GAAG,CAAC;AACnC,WAAS;AACT,cAAY;AACd;AAEA,CAtFC,aAsFa,CAAC;AACf;AAEA,CAzFC,aAyFa,CAHC,YAGY;AACzB,YAAU;AACV,WAAS;AACX;AAEA,CA9FC,aA8Fa,CARC,YAQY;AACzB,WAAS,OAAO;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,gBAAc;AACd,iBAAe;AACjB;AAEA,CArGC,aAqGa,CAfC,YAeY,KAAK,eAAe;AAC7C,6BAA2B;AAC3B,2BAAyB;AAC3B;AAEA,CA1GC,aA0Ga,CApBC,YAoBY,KAAK,cAAc;AAC5C,gBAAc,IAAI,MAAM,IAAI;AAC5B,2BAAyB;AACzB,yBAAuB;AACzB;AAEA,CAhHC,aAgHa,CA1BC,YA0BY,KAAK,SAAS,EAAE;AACzC,cAAY,IAAI;AAClB;",
+  "names": []
+}

package/dist/index.d.ts

@@ -4,10 +4,9 @@ declare module '@layerfi/components/api/layer/authenticate' {
       appId: string;
       appSecret: string;
       authenticationUrl?: string;
-      clientId: string;
       scope: string;
   };
-  export const authenticate: ({ appId, appSecret, authenticationUrl, clientId, scope, }: AuthenticationArguments) => () => Promise<OAuthResponse>;
+  export const authenticate: ({ appId, appSecret, authenticationUrl, scope, }: AuthenticationArguments) => () => Promise<OAuthResponse>;
   export {};
 
 }
@@ -104,11 +103,10 @@ declare module '@layerfi/components/api/layer/profit_and_loss' {
 }
 declare module '@layerfi/components/api/layer' {
   export const Layer: {
-      authenticate: ({ appId, appSecret, authenticationUrl, clientId, scope, }: {
+      authenticate: ({ appId, appSecret, authenticationUrl, scope, }: {
           appId: string;
           appSecret: string;
           authenticationUrl?: string | undefined;
-          clientId: string;
           scope: string;
       }) => () => Promise<import("@layerfi/components/types").OAuthResponse>;
       categorizeBankTransaction: (baseUrl: string, accessToken: string | undefined, options?: {
@@ -235,7 +233,10 @@ declare module '@layerfi/components/components/BankTransactionRow/index' {
 }
 declare module '@layerfi/components/components/BankTransactions/BankTransactions' {
   import React from 'react';
-  export const BankTransactions: () => React.JSX.Element;
+  export interface BankTransactionsProps {
+      asWidget?: boolean;
+  }
+  export const BankTransactions: ({ asWidget, }: BankTransactionsProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/BankTransactions/index' {
@@ -331,9 +332,10 @@ declare module '@layerfi/components/components/Container/Container' {
   export interface ContainerProps {
       name: string;
       className?: string;
+      asWidget?: boolean;
       children: ReactNode;
   }
-  export const Container: ({ name, className, children }: ContainerProps) => React.JSX.Element;
+  export const Container: ({ name, className, children, asWidget, }: ContainerProps) => React.JSX.Element;
 
 }
 declare module '@layerfi/components/components/Container/Header' {
@@ -350,6 +352,26 @@ declare module '@layerfi/components/components/Container/index' {
   export { Container } from '@layerfi/components/components/Container/Container';
   export { Header } from '@layerfi/components/components/Container/Header';
 
+}
+declare module '@layerfi/components/components/DataState/DataState' {
+  import React from 'react';
+  export enum DataStateStatus {
+      allDone = "allDone",
+      failed = "failed"
+  }
+  export interface DataStateProps {
+      status: DataStateStatus;
+      title?: string;
+      description?: string;
+      onRefresh?: () => void;
+      isLoading?: boolean;
+  }
+  export const DataState: ({ status, title, description, onRefresh, isLoading, }: DataStateProps) => React.JSX.Element;
+
+}
+declare module '@layerfi/components/components/DataState/index' {
+  export { DataState, DataStateStatus } from '@layerfi/components/components/DataState/DataState';
+
 }
 declare module '@layerfi/components/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow' {
   import React from 'react';
@@ -359,7 +381,7 @@ declare module '@layerfi/components/components/ExpandedBankTransactionRow/Expand
       close?: () => void;
       isOpen?: boolean;
       asListItem?: boolean;
-      showSubmitButton?: boolean;
+      submitBtnText?: string;
   };
   export type SaveHandle = {
       save: () => void;
@@ -729,6 +751,7 @@ declare module '@layerfi/components/components/Typography/Heading' {
 declare module '@layerfi/components/components/Typography/Text' {
   import React, { ReactNode } from 'react';
   export enum TextSize {
+      lg = "lg",
       md = "md",
       sm = "sm"
   }
@@ -801,12 +824,14 @@ declare module '@layerfi/components/hooks/useBankTransactions/index' {
 declare module '@layerfi/components/hooks/useBankTransactions/useBankTransactions' {
   import { BankTransaction, CategoryUpdate, Metadata } from '@layerfi/components/types';
   type UseBankTransactions = () => {
-      data: BankTransaction[];
+      data?: BankTransaction[];
       metadata: Metadata;
       isLoading: boolean;
+      isValidating: boolean;
       error: unknown;
       categorize: (id: BankTransaction['id'], newCategory: CategoryUpdate) => Promise<void>;
       updateOneLocal: (bankTransaction: BankTransaction) => void;
+      refetch: () => void;
   };
   export const useBankTransactions: UseBankTransactions;
   export {};
@@ -874,6 +899,13 @@ declare module '@layerfi/components/icons/AlertCircle' {
   const AlertCircle: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
   export default AlertCircle;
 
+}
+declare module '@layerfi/components/icons/AlertOctagon' {
+  import * as React from 'react';
+  import { IconSvgProps } from '@layerfi/components/icons/types';
+  const AlertOctagon: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default AlertOctagon;
+
 }
 declare module '@layerfi/components/icons/Calendar' {
   import * as React from 'react';
@@ -959,11 +991,11 @@ declare module '@layerfi/components/icons/RefreshCcw' {
   export default RefreshCcw;
 
 }
-declare module '@layerfi/components/icons/ScissorsFullOpen' {
+declare module '@layerfi/components/icons/Scissors' {
   import * as React from 'react';
   import { IconSvgProps } from '@layerfi/components/icons/types';
-  const ScissorsFullOpen: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
-  export default ScissorsFullOpen;
+  const Scissors: ({ size, ...props }: IconSvgProps) => React.JSX.Element;
+  export default Scissors;
 
 }
 declare module '@layerfi/components/icons/UploadCloud' {
@@ -1025,13 +1057,13 @@ declare module '@layerfi/components/providers/LayerProvider/LayerProvider' {
   export const LayerEnvironment: Record<string, LayerEnvironmentConfig>;
   export type Props = {
       businessId: string;
-      appId: string;
-      appSecret: string;
-      clientId: string;
+      appId?: string;
+      appSecret?: string;
+      businessAccessToken?: string;
       environment?: keyof typeof LayerEnvironment;
       theme?: LayerThemeConfig;
   };
-  export const LayerProvider: ({ appId, appSecret, businessId, children, clientId, environment, theme, }: PropsWithChildren<Props>) => React.JSX.Element;
+  export const LayerProvider: ({ appId, appSecret, businessId, children, businessAccessToken, environment, theme, }: PropsWithChildren<Props>) => React.JSX.Element;
   export {};
 
 }

package/dist/index.esm.css

@@ -0,0 +1,106 @@
+/* src/components/Hello/Hello.css */
+.hello {
+  color: red;
+}
+
+/* src/components/Transactions/Transactions.css */
+.transactions {
+  --transaction-buttons-border-color: #D0D5DD;
+  --transaction-buttons-selected-background-color: #E0E9FF;
+  --transaction-table-background-color: white;
+  --transaction-table-border-color: #EAECF0;
+  --transaction-table-text-color: #101828;
+}
+.transactions {
+  margin: 3rem;
+  border-radius: 0.6rem;
+  border: 1px solid var(--transaction-table-border-color);
+  background-color: var(--transaction-table-background-color);
+  overflow: hidden;
+}
+.transactions header {
+  display: flex;
+  padding: 1rem;
+}
+.transactions header h1 {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-start;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 2rem;
+  margin: 0;
+}
+.transactions header div {
+  display: flex;
+  font-size: 1rem;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
+}
+.transactions .transaction-table {
+  display: grid;
+  grid-template-columns: auto repeat(4, 1fr) repeat(3, auto);
+  gap: 1px 0px;
+  background-color: var(--transaction-table-border-color);
+  border-top: 1px solid var(--transaction-table-border-color);
+  border-radius: 0.6rem;
+}
+.transactions .transaction-table div {
+  padding: 1rem;
+  background-color: white;
+  overflow: clip;
+  color: var(--transaction-table-text-color);
+  font-family: sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.transactions .transaction-table div select {
+  border: 2px solid var(--transaction-table-border-color);
+  border-radius: 0.6rem;
+  background-color: var(--transaction-table-background-color);
+  padding: 0.6rem 0.8rem;
+}
+.transactions .transaction-table div.header {
+  font-weight: bold;
+}
+.transactions .transaction-table div.expand-area {
+  grid-column: 1 / -1;
+  margin-top: -1px;
+}
+.transactions .transaction-table div.expand-content {
+  padding: 1rem;
+  text-align: center;
+}
+.transactions .radio-group {
+}
+.transactions .radio-group input {
+  position: absolute;
+  opacity: 0;
+}
+.transactions .radio-group div {
+  padding: 0.6rem 1rem;
+  border: 1px solid var(--transaction-buttons-border-color);
+  border-right: 0;
+  border-radius: 0;
+}
+.transactions .radio-group label:first-of-type div {
+  border-start-start-radius: 0.6rem;
+  border-end-start-radius: 0.6rem;
+}
+.transactions .radio-group label:last-of-type div {
+  border-right: 1px solid var(--transaction-buttons-border-color);
+  border-start-end-radius: 0.6rem;
+  border-end-end-radius: 0.6rem;
+}
+.transactions .radio-group input:checked + div {
+  background: var(--transaction-buttons-selected-background-color);
+}
+/*# sourceMappingURL=index.esm.css.map */

package/dist/index.esm.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Hello/Hello.css", "../src/components/Transactions/Transactions.css"],
+  "sourcesContent": [".hello {\n  color: red;\n}\n", ".transactions {\n  --transaction-buttons-border-color: #D0D5DD;\n  --transaction-buttons-selected-background-color: #E0E9FF;\n  --transaction-table-background-color: white;\n  --transaction-table-border-color: #EAECF0;\n  --transaction-table-text-color: #101828;\n}\n\n.transactions {\n  margin: 3rem;\n  border-radius: 0.6rem;\n  border: 1px solid var(--transaction-table-border-color);\n  background-color: var(--transaction-table-background-color);\n  overflow: hidden;\n}\n\n.transactions header {\n  display: flex;\n  padding: 1rem;\n}\n\n.transactions header h1 {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  justify-content: flex-start;\n  font-size: 1.5rem;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 2rem;\n  margin: 0;\n}\n\n.transactions header div {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  flex: 1;\n  justify-content: flex-end;\n}\n\n.transactions .transaction-table {\n  display: grid;\n  grid-template-columns: auto repeat(4, 1fr) repeat(3, auto);\n  gap: 1px 0px;\n  background-color: var(--transaction-table-border-color);\n  border-top: 1px solid var(--transaction-table-border-color);\n  border-radius: 0.6rem;\n}\n\n.transactions .transaction-table div {\n  padding: 1rem;\n  background-color: white;\n  overflow: clip;\n  color: var(--transaction-table-text-color);\n  font-family: sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.transactions .transaction-table div select {\n  border: 2px solid var(--transaction-table-border-color);\n  border-radius: 0.6rem;\n  background-color: var(--transaction-table-background-color);\n  padding: 0.6rem 0.8rem;\n}\n\n.transactions .transaction-table div.header {\n  font-weight: bold;\n}\n\n.transactions .transaction-table div.expand-area {\n  grid-column: 1 / -1;\n  margin-top: -1px;\n}\n\n.transactions .transaction-table div.expand-content {\n  padding: 1rem;\n  text-align: center;\n}\n\n.transactions .radio-group {\n}\n\n.transactions .radio-group input {\n  position: absolute;\n  opacity: 0;\n}\n\n.transactions .radio-group div {\n  padding: 0.6rem 1rem;\n  border: 1px solid var(--transaction-buttons-border-color);\n  border-right: 0;\n  border-radius: 0;\n}\n\n.transactions .radio-group label:first-of-type div {\n  border-start-start-radius: 0.6rem;\n  border-end-start-radius: 0.6rem;\n}\n\n.transactions .radio-group label:last-of-type div {\n  border-right: 1px solid var(--transaction-buttons-border-color);\n  border-start-end-radius: 0.6rem;\n  border-end-end-radius: 0.6rem;\n}\n\n.transactions .radio-group input:checked + div {\n  background: var(--transaction-buttons-selected-background-color);\n}\n"],
+  "mappings": ";AAAA,CAAC;AACC,SAAO;AACT;;;ACFA,CAAC;AACC,sCAAoC;AACpC,mDAAiD;AACjD,wCAAsC;AACtC,oCAAkC;AAClC,kCAAgC;AAClC;AAEA,CARC;AASC,UAAQ;AACR,iBAAe;AACf,UAAQ,IAAI,MAAM,IAAI;AACtB,oBAAkB,IAAI;AACtB,YAAU;AACZ;AAEA,CAhBC,aAgBa;AACZ,WAAS;AACT,WAAS;AACX;AAEA,CArBC,aAqBa,OAAO;AACnB,WAAS;AACT,eAAa;AACb,QAAM;AACN,mBAAiB;AACjB,aAAW;AACX,cAAY;AACZ,eAAa;AACb,eAAa;AACb,UAAQ;AACV;AAEA,CAjCC,aAiCa,OAAO;AACnB,WAAS;AACT,aAAW;AACX,eAAa;AACb,QAAM;AACN,mBAAiB;AACnB;AAEA,CAzCC,aAyCa,CAAC;AACb,WAAS;AACT,yBAAuB,KAAK,OAAO,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE;AACrD,OAAK,IAAI;AACT,oBAAkB,IAAI;AACtB,cAAY,IAAI,MAAM,IAAI;AAC1B,iBAAe;AACjB;AAEA,CAlDC,aAkDa,CATC,kBASkB;AAC/B,WAAS;AACT,oBAAkB;AAClB,YAAU;AACV,SAAO,IAAI;AACX,eAAa;AACb,aAAW;AACX,cAAY;AACZ,eAAa;AACb,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,eAAa;AACf;AAEA,CAjEC,aAiEa,CAxBC,kBAwBkB,IAAI;AACnC,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe;AACf,oBAAkB,IAAI;AACtB,WAAS,OAAO;AAClB;AAEA,CAxEC,aAwEa,CA/BC,kBA+BkB,GAAG,CAAC;AACnC,eAAa;AACf;AAEA,CA5EC,aA4Ea,CAnCC,kBAmCkB,GAAG,CAAC;AACnC,eAAa,EAAE,EAAE;AACjB,cAAY;AACd;AAEA,CAjFC,aAiFa,CAxCC,kBAwCkB,GAAG,CAAC;AACnC,WAAS;AACT,cAAY;AACd;AAEA,CAtFC,aAsFa,CAAC;AACf;AAEA,CAzFC,aAyFa,CAHC,YAGY;AACzB,YAAU;AACV,WAAS;AACX;AAEA,CA9FC,aA8Fa,CARC,YAQY;AACzB,WAAS,OAAO;AAChB,UAAQ,IAAI,MAAM,IAAI;AACtB,gBAAc;AACd,iBAAe;AACjB;AAEA,CArGC,aAqGa,CAfC,YAeY,KAAK,eAAe;AAC7C,6BAA2B;AAC3B,2BAAyB;AAC3B;AAEA,CA1GC,aA0Ga,CApBC,YAoBY,KAAK,cAAc;AAC5C,gBAAc,IAAI,MAAM,IAAI;AAC5B,2BAAyB;AACzB,yBAAuB;AACzB;AAEA,CAhHC,aAgHa,CA1BC,YA0BY,KAAK,SAAS,EAAE;AACzC,cAAY,IAAI;AAClB;",
+  "names": []
+}

package/dist/index.esm.js

@@ -0,0 +1,252 @@
+// src/components/Hello/Hello.tsx
+import React from "react";
+import useSWR from "swr";
+var fetcher = (url) => fetch(url).then((res) => res.json());
+var Hello = ({ user }) => {
+  const { data, isLoading } = useSWR(
+    `https://api.github.com/users/${user || "jyurek"}`,
+    fetcher
+  );
+  const name = (isLoading ? "..." : data?.name) || "User";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+};
+
+// src/components/Transactions/Transactions.tsx
+import React7, { useState as useState2, useContext as useContext3 } from "react";
+
+// src/contexts/LayerContext/LayerContext.tsx
+import { createContext } from "react";
+var LayerContext = createContext({
+  auth: void 0,
+  businessId: "",
+  categories: []
+});
+
+// src/components/RadioButtonGroup/RadioButtonGroup.tsx
+import React3 from "react";
+
+// src/components/RadioButtonGroup/RadioButton.tsx
+import React2 from "react";
+var RadioButton = ({
+  checked,
+  label,
+  name,
+  onChange,
+  value
+}) => {
+  return /* @__PURE__ */ React2.createElement("label", null, /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      type: "radio",
+      checked,
+      name,
+      onChange,
+      value
+    }
+  ), /* @__PURE__ */ React2.createElement("div", null, label));
+};
+
+// src/components/RadioButtonGroup/RadioButtonGroup.tsx
+var RadioButtonGroup = ({
+  name,
+  buttons,
+  onChange,
+  selected
+}) => {
+  const selectedValue = selected || buttons[0].value;
+  return /* @__PURE__ */ React3.createElement("div", { className: "radio-group" }, buttons.map((button) => /* @__PURE__ */ React3.createElement(
+    RadioButton,
+    {
+      ...button,
+      key: button.value,
+      name,
+      checked: selectedValue === button.value,
+      onChange
+    }
+  )));
+};
+
+// src/components/Transactions/TransactionRow.tsx
+import React6 from "react";
+
+// src/models/Money.ts
+var format = ({ amount, direction }) => (direction === "CREDIT" ? "+" : "-") + Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(
+  amount / 100
+);
+var Money = {
+  format
+};
+
+// src/components/CategoryMenu/CategoryMenu.tsx
+import React5, { useContext as useContext2 } from "react";
+
+// src/components/CategoryMenu/CategoryMenuItem.tsx
+import React4 from "react";
+var CategoryMenuItem = ({
+  selectedCategory,
+  category,
+  maxDepth = 1
+}) => {
+  if (category.hasOwnProperty("subCategories") && maxDepth > 0) {
+    return /* @__PURE__ */ React4.createElement("optgroup", { label: category.display_name }, category.subCategories.map((category2) => /* @__PURE__ */ React4.createElement(
+      CategoryMenuItem,
+      {
+        category: category2,
+        selectedCategory,
+        maxDepth: maxDepth - 1
+      }
+    )));
+  } else {
+    return /* @__PURE__ */ React4.createElement(
+      "option",
+      {
+        key: category.category,
+        value: category.category,
+        selected: selectedCategory === category.category
+      },
+      category.display_name
+    );
+  }
+};
+
+// src/components/CategoryMenu/CategoryMenu.tsx
+var CategoryMenu = ({ selectedCategory }) => {
+  const { categories } = useContext2(LayerContext);
+  return /* @__PURE__ */ React5.createElement("select", null, categories.map((category) => /* @__PURE__ */ React5.createElement(
+    CategoryMenuItem,
+    {
+      category,
+      selectedCategory
+    }
+  )));
+};
+
+// src/components/Transactions/TransactionRow.tsx
+import { parseISO, format as formatTime } from "date-fns";
+var TransactionRow = ({
+  dateFormat: dateFormat2,
+  transaction,
+  isOpen,
+  toggleOpen
+}) => /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("input", { type: "checkbox" })), /* @__PURE__ */ React6.createElement("div", null, formatTime(parseISO(transaction.date), dateFormat2)), /* @__PURE__ */ React6.createElement("div", null, Money.format(transaction)), /* @__PURE__ */ React6.createElement("div", null, "Business Checking"), /* @__PURE__ */ React6.createElement("div", null, transaction.counterparty_name), /* @__PURE__ */ React6.createElement("div", { "data-selected": transaction?.category?.category }, /* @__PURE__ */ React6.createElement(CategoryMenu, { selectedCategory: transaction?.category?.category })), /* @__PURE__ */ React6.createElement("div", null), /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    onClick: () => toggleOpen(transaction.id),
+    style: { cursor: "pointer" }
+  },
+  "\u{1F3AF}"
+), isOpen && /* @__PURE__ */ React6.createElement("div", { className: "expand-area" }, /* @__PURE__ */ React6.createElement("div", { className: "expand-content" }, "Hello!")));
+
+// src/components/Transactions/Transactions.tsx
+import useSWR2 from "swr";
+var dateFormat = "MM/dd/yyyy";
+var fetchTransactions = (accessToken) => (url) => fetch(url, {
+  headers: {
+    Authorization: "Bearer " + accessToken,
+    "Content-Type": "application/json"
+  },
+  method: "GET"
+}).then((res) => res.json());
+var filterVisibility = (display) => (transaction) => {
+  const categorized = [
+    "CATEGORIZED" /* CATEGORIZED */,
+    "JOURNALING" /* JOURNALING */,
+    "SPLIT" /* SPLIT */
+  ].includes(transaction.categorization_status);
+  const inReview = [
+    "READY_FOR_INPUT" /* READY_FOR_INPUT */,
+    "LAYER_REVIEW" /* LAYER_REVIEW */
+  ].includes(transaction.categorization_status);
+  return display === "review" && inReview || display === "categorized" && categorized;
+};
+var Transactions = (props) => {
+  const { auth, businessId } = useContext3(LayerContext);
+  const [display, setDisplay] = useState2("review");
+  const { data, isLoading } = useSWR2(
+    auth?.access_token && `https://sandbox.layerfi.com/v1/businesses/${businessId}/bank-transactions`,
+    fetchTransactions(auth?.access_token)
+  );
+  const transactions = (!isLoading && data?.data || []).filter(
+    filterVisibility(display)
+  );
+  const onCategorizationDisplayChange = (event) => setDisplay(event.target.value);
+  const [openRows, setOpenRows] = useState2({});
+  const toggleOpen = (id) => setOpenRows({ ...openRows, [id]: !openRows[id] });
+  return /* @__PURE__ */ React7.createElement("div", { className: "transactions", "data-display": display }, /* @__PURE__ */ React7.createElement("header", null, /* @__PURE__ */ React7.createElement("h1", null, "Transactions"), /* @__PURE__ */ React7.createElement(
+    RadioButtonGroup,
+    {
+      name: "transaction-display",
+      buttons: [
+        { label: "To Review", value: "review" },
+        { label: "Categorized", value: "categorized" }
+      ],
+      selected: display,
+      onChange: onCategorizationDisplayChange
+    }
+  )), /* @__PURE__ */ React7.createElement("div", { className: "transaction-table" }, /* @__PURE__ */ React7.createElement("div", { className: "header" }, /* @__PURE__ */ React7.createElement("input", { type: "checkbox" })), /* @__PURE__ */ React7.createElement("div", { className: "header" }, "Date"), /* @__PURE__ */ React7.createElement("div", { className: "header" }, "Transaction"), /* @__PURE__ */ React7.createElement("div", { className: "header" }, "Account"), /* @__PURE__ */ React7.createElement("div", { className: "header" }, "Amount"), /* @__PURE__ */ React7.createElement("div", { className: "header" }, "Category"), /* @__PURE__ */ React7.createElement("div", { className: "header" }, "Action"), /* @__PURE__ */ React7.createElement("div", { className: "header" }), transactions.map((transaction) => /* @__PURE__ */ React7.createElement(
+    TransactionRow,
+    {
+      key: transaction.id,
+      dateFormat,
+      transaction,
+      isOpen: openRows[transaction.id],
+      toggleOpen
+    }
+  ))));
+};
+
+// src/providers/LayerProvider/LayerProvider.tsx
+import React8 from "react";
+import useSWR3 from "swr";
+var appId = "1pskub33qd9qt19406hi4d1j6f";
+var appSecret = "1k7up1ia2m0ino8el6md2l1isq3t7fdj1eq6firmkui8757lk6r6";
+async function getAccessToken() {
+  var details = {
+    grant_type: "client_credentials",
+    scope: "https://sandbox.layerfi.com/sandbox",
+    client_id: "canaryAppId"
+  };
+  const formBody = Object.entries(details).map((key) => encodeURIComponent(key[0]) + "=" + encodeURIComponent(key[1])).join("&");
+  const authRequest = fetch("https://auth.layerfi.com/oauth2/token", {
+    method: "POST",
+    headers: {
+      Authorization: "Basic " + btoa(appId + ":" + appSecret),
+      "Content-Type": "application/x-www-form-urlencoded"
+    },
+    body: formBody
+  });
+  return await (await authRequest).json();
+}
+var getCategories = (accessToken) => (url) => fetch(url, {
+  headers: {
+    Authorization: "Bearer " + accessToken,
+    "Content-Type": "application/json"
+  },
+  method: "GET"
+}).then((res) => res.json());
+var LayerProvider = ({
+  businessId,
+  children
+}) => {
+  const { data: auth } = useSWR3(
+    "https://auth.layerfi.com/oauth2/token",
+    getAccessToken
+  );
+  const { data: categories } = useSWR3(
+    businessId && auth?.access_token && `https://sandbox.layerfi.com/v1/businesses/${businessId}/categories`,
+    getCategories(auth?.access_token)
+  );
+  const value = {
+    auth,
+    businessId,
+    categories: categories?.data?.categories || []
+  };
+  return /* @__PURE__ */ React8.createElement(LayerContext.Provider, { value }, children);
+};
+export {
+  Hello,
+  LayerContext,
+  LayerProvider,
+  Transactions
+};
+//# sourceMappingURL=index.esm.js.map