@layerfi/components 0.1.0

package/dist/index.js

@@ -0,0 +1,1647 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  BalanceSheet: () => BalanceSheet,
+  BankTransactions: () => BankTransactions,
+  Hello: () => Hello,
+  LayerProvider: () => LayerProvider,
+  ProfitAndLoss: () => ProfitAndLoss
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/BalanceSheet/BalanceSheet.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/api/util.ts
+var formStringFromObject = (object) => Object.entries(object).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
+
+// src/api/layer/authenticate.ts
+var authenticate = ({
+  appId,
+  appSecret,
+  authenticationUrl = "https://auth.layerfi.com/oauth2/token",
+  clientId,
+  scope
+}) => () => fetch(authenticationUrl, {
+  method: "POST",
+  headers: {
+    Authorization: "Basic " + btoa(appId + ":" + appSecret),
+    "Content-Type": "application/x-www-form-urlencoded"
+  },
+  body: formStringFromObject({
+    grant_type: "client_credentials",
+    scope,
+    client_id: clientId
+  })
+}).then((res) => res.json());
+
+// src/api/layer/balance_sheet.json
+var balance_sheet_default = {
+  business_id: "05eb0771-ae7d-4cd1-ae7f-cc8765351afc",
+  type: "Balance_Sheet",
+  start_date: "2023-01-01T00:00:00Z",
+  end_date: "2023-01-31T00:00:00Z",
+  assets: [
+    {
+      name: "CURRENT_ASSETS",
+      display_name: "Current Assets",
+      value: "100000",
+      line_items: [
+        {
+          name: "BANK_ACCOUNTS",
+          display_name: "Bank Accounts",
+          value: "100000",
+          line_items: [
+            {
+              display_name: "Checking Account 123",
+              value: "50000",
+              line_items: []
+            },
+            {
+              display_name: "Savings Account 456",
+              value: "50000",
+              line_items: []
+            }
+          ]
+        },
+        {
+          name: "ACCOUNTS_RECEIVABLE",
+          display_name: "Bank Accounts",
+          value: "100000",
+          line_items: [
+            {
+              account_id: "cc7861f7-d8b3-4ab9-b853-6b85838199ef",
+              display_name: "Accounts Receivable - Customer A",
+              value: "50000",
+              line_items: []
+            },
+            {
+              account_id: "23606d6a-4e78-406b-9283-76bfb750639f",
+              display_name: "Accounts Receivable - Customer B",
+              value: "50000",
+              line_items: []
+            }
+          ]
+        },
+        {
+          name: "OTHER_ASSETS",
+          display_name: "Other Assets",
+          value: "150",
+          line_items: [
+            {
+              account_id: "40816f76-1409-4727-b733-c4c126f0a725",
+              display_name: "Inventory Item A",
+              value: "50000",
+              line_items: []
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  liabilities_and_equity: [
+    {
+      name: "LIABILITIES",
+      display_name: "Liabilities",
+      value: "100000",
+      line_items: [
+        {
+          name: "CURRENT_LIABILITIES",
+          display_name: "Current Liabilities",
+          value: "100000",
+          line_items: [
+            {
+              account_id: "40816f76-1409-4727-b733-c4c126f0a725",
+              display_name: "ACCOUNTS_PAYABLE",
+              value: "50000",
+              line_items: [
+                {
+                  account_id: "261d0ef4-6d35-4081-8c82-685114fd497d",
+                  display_name: "Supplier A",
+                  value: "50000",
+                  line_items: []
+                }
+              ]
+            },
+            {
+              account_id: "5123c5eb-28ce-4cce-90bd-389e4befb645",
+              display_name: "Credit Cards",
+              value: "50000",
+              line_items: [
+                {
+                  account_id: "beb41e99-0539-4d97-8faf-c8464eac60dc",
+                  display_name: "Visa 5678",
+                  value: "50000",
+                  line_items: []
+                }
+              ]
+            },
+            {
+              account_id: "7261b324-aa1a-4c03-9ac8-0a40980d5886",
+              display_name: "Other current Liabilities",
+              value: "2309",
+              line_items: []
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: "EQUITY",
+      display_name: "Equity",
+      value: "100000",
+      line_items: [
+        {
+          name: "OPENING_BALANCE_EQUITY",
+          display_name: "Opening Balance Equity",
+          value: "50000",
+          line_items: []
+        },
+        {
+          name: "RETAINED_EARNINGS",
+          display_name: "Retained Earnings",
+          value: "50000",
+          line_items: []
+        },
+        {
+          name: "NET_INCOME",
+          display_name: "Net Income",
+          value: "50000",
+          line_items: []
+        }
+      ]
+    }
+  ],
+  fully_categorized: true
+};
+
+// src/api/layer/balance_sheet.ts
+var getBalanceSheet = (_token, _params) => () => balance_sheet_default;
+
+// src/api/layer/authenticated_http.ts
+var get = (url) => (accessToken, options) => () => fetch(url(options?.params || {}), {
+  headers: {
+    Authorization: "Bearer " + (accessToken || ""),
+    "Content-Type": "application/json"
+  },
+  method: "GET"
+}).then((res) => res.json());
+var put = (url) => (accessToken, options) => fetch(url(options?.params || {}), {
+  headers: {
+    Authorization: "Bearer " + (accessToken || ""),
+    "Content-Type": "application/json",
+    "Cache-Control": "no-cache"
+  },
+  method: "PUT",
+  body: JSON.stringify(options?.body)
+}).then((res) => res.json());
+
+// src/api/layer/bankTransactions.ts
+var getBankTransactions = get(
+  ({
+    businessId,
+    sortBy = "date",
+    sortOrder = "DESC"
+  }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/bank-transactions?sort_by=${sortBy}&sort_order=${sortOrder}`
+);
+var categorizeBankTransaction = put(
+  ({ businessId, bankTransactionId }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/bank-transactions/${bankTransactionId}/categorize`
+);
+
+// src/api/layer/categories.ts
+var getCategories = get(
+  ({ businessId }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/categories`
+);
+
+// src/api/layer/profit_and_loss.ts
+var getProfitAndLoss = get(
+  ({ businessId, startDate, endDate }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/reports/profit-and-loss?start_date=${startDate}&end_date=${endDate}`
+);
+
+// src/api/layer.ts
+var Layer = {
+  authenticate,
+  categorizeBankTransaction,
+  getBalanceSheet,
+  getBankTransactions,
+  getCategories,
+  getProfitAndLoss
+};
+
+// src/hooks/useLayerContext/useLayerContext.tsx
+var import_react2 = require("react");
+
+// src/contexts/LayerContext/LayerContext.tsx
+var import_react = require("react");
+var LayerContext = (0, import_react.createContext)({
+  auth: { access_token: "", expires_in: -1, token_type: "" },
+  businessId: "",
+  categories: []
+});
+
+// src/hooks/useLayerContext/useLayerContext.tsx
+var useLayerContext = () => (0, import_react2.useContext)(LayerContext);
+
+// src/hooks/useBalanceSheet/useBalanceSheet.tsx
+var import_date_fns = require("date-fns");
+var import_swr = __toESM(require("swr"));
+var useBalanceSheet = (date) => {
+  const { auth, businessId } = useLayerContext();
+  const dateString = (0, import_date_fns.format)((0, import_date_fns.startOfDay)(date), "yyyy-mm-dd");
+  const { data, isLoading, error } = (0, import_swr.default)(
+    businessId && dateString && auth?.access_token && `balance-sheet-${businessId}-${dateString}`,
+    Layer.getBalanceSheet(auth?.access_token, {
+      params: { businessId, date: dateString }
+    })
+  );
+  return { data, isLoading, error };
+};
+
+// src/icons/DownloadCloud.tsx
+var React = __toESM(require("react"));
+var DownloadCloud = (props) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      stroke: "#000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M4 16.242A4.5 4.5 0 0 1 6.08 8.02a6.002 6.002 0 0 1 11.84 0A4.5 4.5 0 0 1 20 16.242M8 17l4 4m0 0 4-4m-4 4v-9"
+    }
+  )
+);
+var DownloadCloud_default = DownloadCloud;
+
+// src/components/BalanceSheetDatePicker/BalanceSheetDatePicker.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/icons/Calendar.tsx
+var React2 = __toESM(require("react"));
+var Calendar = (props) => /* @__PURE__ */ React2.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 22,
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      stroke: "#000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M19 9H1m13-8v4M6 1v4m-.2 16h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C19 18.72 19 17.88 19 16.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C16.72 3 15.88 3 14.2 3H5.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C1 5.28 1 6.12 1 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C3.28 21 4.12 21 5.8 21Z"
+    }
+  )
+);
+var Calendar_default = Calendar;
+
+// src/components/BalanceSheetDatePicker/BalanceSheetDatePicker.tsx
+var import_date_fns2 = require("date-fns");
+var BalanceSheetDatePicker = ({ value, onChange }) => {
+  const inputRef = (0, import_react3.useRef)(null);
+  const showPicker = () => inputRef.current && inputRef.current.showPicker();
+  return /* @__PURE__ */ import_react3.default.createElement("span", { className: "Layer__balance-sheet-date-picker" }, /* @__PURE__ */ import_react3.default.createElement("button", { onClick: showPicker }, /* @__PURE__ */ import_react3.default.createElement(Calendar_default, null), (0, import_date_fns2.format)(value, "LLLL dd, yyyy"), /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type: "date",
+      ref: inputRef,
+      value: (0, import_date_fns2.format)(value, "yyyy-MM-dd"),
+      onChange
+    }
+  )));
+};
+
+// src/components/BalanceSheetRow/BalanceSheetRow.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/icons/ChevronDown.tsx
+var React4 = __toESM(require("react"));
+var ChevronDown = ({ size = 24, ...props }) => /* @__PURE__ */ React4.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React4.createElement(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "m6 9 6 6 6-6"
+    }
+  )
+);
+var ChevronDown_default = ChevronDown;
+
+// src/icons/ChevronRight.tsx
+var React5 = __toESM(require("react"));
+var ChavronRight = ({ strokeColor, size, ...props }) => /* @__PURE__ */ React5.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size || 24,
+    height: size || 24,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React5.createElement(
+    "path",
+    {
+      stroke: strokeColor ?? "#000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "m9 18 6-6-6-6"
+    }
+  )
+);
+var ChevronRight_default = ChavronRight;
+
+// src/models/Money.ts
+var formatter = new Intl.NumberFormat("en-US", {
+  minimumIntegerDigits: 1,
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+});
+var centsToDollars = (cents) => formatter.format(cents / 100);
+var dollarsToCents = (dollars) => Math.round(parseFloat(dollars) * 100);
+
+// src/components/BalanceSheetRow/BalanceSheetRow.tsx
+var BalanceSheetRow = ({
+  lineItem,
+  depth = 0,
+  maxDepth = 2
+}) => {
+  if (!lineItem) {
+    return null;
+  }
+  const { value, display_name, line_items } = lineItem;
+  const [expanded, setExpanded] = (0, import_react4.useState)(true);
+  const amount = value || 0;
+  const isPositive = amount >= 0;
+  const amountString = centsToDollars(Math.abs(amount));
+  const labelClasses = [
+    "Layer__balance-sheet-row",
+    "Layer__balance-sheet-row__label"
+  ];
+  const valueClasses = [
+    "Layer__balance-sheet-row",
+    "Layer__balance-sheet-row__value"
+  ];
+  !!value && valueClasses.push(
+    isPositive ? "Layer__balance-sheet-row__value--amount-positive" : "Layer__balance-sheet-row__value--amount-negative"
+  );
+  labelClasses.push(`Layer__balance-sheet-row__label--depth-${depth}`);
+  valueClasses.push(`Layer__balance-sheet-row__value--depth-${depth}`);
+  const toggleExpanded = () => setExpanded(!expanded);
+  const canGoDeeper = depth < maxDepth;
+  const hasChildren = line_items?.length > 0;
+  const displayChildren = hasChildren && canGoDeeper;
+  labelClasses.push(
+    `Layer__balance-sheet-row__label--display-children-${displayChildren}`
+  );
+  valueClasses.push(
+    `Layer__balance-sheet-row__value--display-children-${displayChildren}`
+  );
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: labelClasses.join(" "), onClick: toggleExpanded }, expanded ? /* @__PURE__ */ import_react4.default.createElement(ChevronDown_default, { size: 16 }) : /* @__PURE__ */ import_react4.default.createElement(ChevronRight_default, { size: 16 }), display_name), /* @__PURE__ */ import_react4.default.createElement("div", { className: valueClasses.join(" ") }, !!value && amountString), canGoDeeper && hasChildren && expanded && (line_items || []).map((line_item) => /* @__PURE__ */ import_react4.default.createElement(
+    BalanceSheetRow,
+    {
+      key: line_item.display_name,
+      lineItem: line_item,
+      depth: depth + 1,
+      maxDepth
+    }
+  )));
+};
+
+// src/components/BalanceSheet/BalanceSheet.tsx
+var import_date_fns3 = require("date-fns");
+var BalanceSheet = () => {
+  const [effectiveDate, setEffectiveDate] = (0, import_react5.useState)(/* @__PURE__ */ new Date());
+  const { data, isLoading } = useBalanceSheet(effectiveDate);
+  const assets = {
+    name: "Assets",
+    display_name: "Assets",
+    line_items: data?.assets || [],
+    value: void 0
+  };
+  const lne = {
+    name: "LiabilitiesAndEquity",
+    display_name: "Liabilities & Equity",
+    line_items: data?.liabilities_and_equity || [],
+    value: void 0
+  };
+  const dateString = (0, import_date_fns3.format)(effectiveDate, "LLLL d, yyyy");
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "Layer__balance-sheet" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "Layer__balance-sheet__header" }, /* @__PURE__ */ import_react5.default.createElement("h2", { className: "Layer__balance-sheet__title" }, "Balance Sheet", /* @__PURE__ */ import_react5.default.createElement("span", { className: "Layer__balance-sheet__date" }, dateString)), /* @__PURE__ */ import_react5.default.createElement(
+    BalanceSheetDatePicker,
+    {
+      value: effectiveDate,
+      onChange: (event) => setEffectiveDate((0, import_date_fns3.parseISO)(event.target.value))
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement("button", { className: "Layer__balance-sheet__download-button" }, /* @__PURE__ */ import_react5.default.createElement(DownloadCloud_default, null), "Download")), !data || isLoading ? /* @__PURE__ */ import_react5.default.createElement("div", null, "Loading") : /* @__PURE__ */ import_react5.default.createElement("div", { className: "Layer__balance-sheet__table" }, /* @__PURE__ */ import_react5.default.createElement(BalanceSheetRow, { key: assets.name, lineItem: assets }), /* @__PURE__ */ import_react5.default.createElement(BalanceSheetRow, { key: lne.name, lineItem: lne })));
+};
+
+// src/components/BankTransactions/BankTransactions.tsx
+var import_react12 = __toESM(require("react"));
+
+// src/hooks/useBankTransactions/useBankTransactions.tsx
+var import_swr2 = __toESM(require("swr"));
+var useBankTransactions = () => {
+  const { auth, businessId } = useLayerContext();
+  const {
+    data: responseData,
+    isLoading,
+    error: responseError,
+    mutate
+  } = (0, import_swr2.default)(
+    businessId && auth?.access_token && `bank-transactions-${businessId}`,
+    Layer.getBankTransactions(auth?.access_token, { params: { businessId } })
+  );
+  const {
+    data = [],
+    meta: metadata = {},
+    error = void 0
+  } = responseData || {};
+  const categorize = (id, newCategory) => Layer.categorizeBankTransaction(auth.access_token, {
+    params: { businessId, bankTransactionId: id },
+    body: newCategory
+  }).then(({ data: transaction, error: error2 }) => {
+    if (transaction) {
+      mutate();
+    }
+    if (error2) {
+      console.error(error2);
+      throw error2;
+    }
+  });
+  return { data, metadata, isLoading, error, categorize };
+};
+
+// src/components/BankTransactionRow/BankTransactionRow.tsx
+var import_react11 = __toESM(require("react"));
+
+// src/icons/CheckedCircle.tsx
+var React8 = __toESM(require("react"));
+var CheckedCircle = ({
+  fillColor = "none",
+  strokeColor = "#000",
+  size = 24,
+  ...props
+}) => /* @__PURE__ */ React8.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: fillColor,
+    ...props
+  },
+  /* @__PURE__ */ React8.createElement(
+    "path",
+    {
+      stroke: strokeColor,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"
+    }
+  )
+);
+var CheckedCircle_default = CheckedCircle;
+
+// src/icons/ChevronUp.tsx
+var React9 = __toESM(require("react"));
+var ChevronUp = (props) => /* @__PURE__ */ React9.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React9.createElement(
+    "path",
+    {
+      stroke: "#000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "m18 15-6-6-6 6"
+    }
+  )
+);
+var ChevronUp_default = ChevronUp;
+
+// src/components/CategoryMenu/CategoryMenu.tsx
+var import_react6 = __toESM(require("react"));
+var import_react_select = __toESM(require("react-select"));
+var CategoryMenu = ({
+  bankTransaction,
+  name,
+  value,
+  onChange
+}) => {
+  const { categories } = useLayerContext();
+  const suggestedOptions = bankTransaction?.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? [
+    {
+      label: "Suggested",
+      options: bankTransaction.categorization_flow.suggestions
+    }
+  ] : [];
+  const categoryOptions = (categories || []).map((category) => {
+    if (category?.subCategories && category?.subCategories?.length > 0) {
+      return {
+        label: category.display_name,
+        options: category.subCategories
+      };
+    }
+    return {
+      label: category.display_name,
+      options: [category]
+    };
+  }).filter((x) => x);
+  const options = [...suggestedOptions, ...categoryOptions];
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_react_select.default,
+    {
+      name,
+      className: "Layer__category-menu",
+      options,
+      isSearchable: true,
+      value,
+      onChange: (newValue) => newValue && onChange(newValue),
+      getOptionLabel: (category) => category.display_name,
+      getOptionValue: (category) => category.stable_name || category.category,
+      menuPortalTarget: document.body,
+      styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) }
+    }
+  );
+};
+
+// src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
+var import_react9 = __toESM(require("react"));
+
+// src/icons/Link.tsx
+var React11 = __toESM(require("react"));
+var Link = ({ size = 24, ...props }) => /* @__PURE__ */ React11.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React11.createElement(
+    "path",
+    {
+      stroke: "#000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "m12.708 18.364-1.415 1.414a5 5 0 1 1-7.07-7.07l1.413-1.415m12.728 1.414 1.415-1.414a5 5 0 0 0-7.071-7.071l-1.415 1.414M8.5 15.5l7-7"
+    }
+  )
+);
+var Link_default = Link;
+
+// src/icons/LinkBroken.tsx
+var React12 = __toESM(require("react"));
+var LinkBroken = ({ size = 24, ...props }) => /* @__PURE__ */ React12.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      stroke: "#000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "m8.5 15.5 7-7M9 4V2m6 18v2M4 9H2m18 6h2M4.914 4.914 3.5 3.5m15.586 15.586L20.5 20.5M12 17.657l-2.121 2.121a4 4 0 1 1-5.657-5.657L6.343 12m11.314 0 2.121-2.121a4 4 0 0 0-5.657-5.657L12 6.343"
+    }
+  )
+);
+var LinkBroken_default = LinkBroken;
+
+// src/components/RadioButtonGroup/RadioButtonGroup.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/components/RadioButtonGroup/RadioButton.tsx
+var import_react7 = __toESM(require("react"));
+var RadioButton = ({
+  checked,
+  label,
+  name,
+  onChange,
+  value,
+  disabled,
+  size
+}) => {
+  return /* @__PURE__ */ import_react7.default.createElement(
+    "label",
+    {
+      className: `Layer__radio-button-group__radio-button Layer__radio-button-group__radio-button--size-${size}`
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      "input",
+      {
+        type: "radio",
+        checked,
+        name,
+        onChange,
+        value,
+        disabled: disabled ?? false
+      }
+    ),
+    /* @__PURE__ */ import_react7.default.createElement("div", null, label)
+  );
+};
+
+// src/components/RadioButtonGroup/RadioButtonGroup.tsx
+var RadioButtonGroup = ({
+  name,
+  size = "large",
+  buttons,
+  onChange,
+  selected
+}) => {
+  const selectedValue = selected || buttons[0].value;
+  return /* @__PURE__ */ import_react8.default.createElement(
+    "div",
+    {
+      className: `Layer__radio-button-group Layer__radio-button-group--size-${size}`
+    },
+    buttons.map((button) => /* @__PURE__ */ import_react8.default.createElement(
+      RadioButton,
+      {
+        ...button,
+        key: button.value,
+        name,
+        size,
+        checked: selectedValue === button.value,
+        onChange,
+        disabled: button.disabled ?? false
+      }
+    ))
+  );
+};
+
+// src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
+var ExpandedBankTransactionRow = ({
+  bankTransaction,
+  close
+}) => {
+  const { categorize: categorizeBankTransaction2 } = useBankTransactions();
+  const [purpose, setPurpose] = (0, import_react9.useState)("categorize" /* categorize */);
+  const defaultCategory = bankTransaction.category || bankTransaction.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ && bankTransaction.categorization_flow?.suggestions?.[0];
+  const [rowState, updateRowState] = (0, import_react9.useState)({
+    splits: [
+      {
+        amount: bankTransaction.amount,
+        inputValue: centsToDollars(bankTransaction.amount),
+        category: defaultCategory
+      }
+    ],
+    description: "",
+    file: void 0
+  });
+  const addSplit = () => updateRowState({
+    ...rowState,
+    splits: [
+      ...rowState.splits,
+      { amount: 0, inputValue: "0.00", category: defaultCategory }
+    ]
+  });
+  const removeSplit = () => updateRowState({
+    ...rowState,
+    splits: rowState.splits.slice(0, -1)
+  });
+  const updateAmounts = (rowNumber) => (event) => {
+    const newAmount = dollarsToCents(event.target.value) || 0;
+    const newDisplaying = event.target.value;
+    const splitTotal = rowState.splits.slice(0, -1).reduce((sum, split, index) => {
+      const amount = index === rowNumber ? newAmount : split.amount;
+      return sum + amount;
+    }, 0);
+    const remaining = bankTransaction.amount - splitTotal;
+    rowState.splits[rowNumber].amount = newAmount;
+    rowState.splits[rowNumber].inputValue = newDisplaying;
+    rowState.splits[rowState.splits.length - 1].amount = remaining;
+    rowState.splits[rowState.splits.length - 1].inputValue = centsToDollars(remaining);
+    updateRowState({ ...rowState });
+  };
+  const onBlur = (event) => {
+    if (event.target.value === "") {
+      const [_, index] = event.target.name.split("-");
+      rowState.splits[parseInt(index)].inputValue = "0.00";
+      updateRowState({ ...rowState });
+    }
+  };
+  const onChangePurpose = (event) => setPurpose(
+    event.target.value === "match" /* match */ ? "match" /* match */ : "categorize" /* categorize */
+  );
+  const changeCategory = (index, newValue) => {
+    rowState.splits[index].category = newValue;
+    updateRowState({ ...rowState });
+  };
+  const save = () => categorizeBankTransaction2(
+    bankTransaction.id,
+    rowState.splits.length === 1 ? {
+      type: "Category",
+      category: {
+        type: "StableName",
+        stable_name: rowState?.splits[0].category?.stable_name || rowState?.splits[0].category?.category
+      }
+    } : {
+      type: "Split",
+      entries: rowState.splits.map((split) => ({
+        category: split.category?.stable_name || split.category?.category,
+        amount: split.amount
+      }))
+    }
+  ).then(close);
+  const className = "Layer__expanded-bank-transaction-row";
+  return /* @__PURE__ */ import_react9.default.createElement("div", { className }, /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__purpose-button` }, /* @__PURE__ */ import_react9.default.createElement(
+    RadioButtonGroup,
+    {
+      name: `purpose-${bankTransaction.id}`,
+      size: "small",
+      buttons: [
+        { value: "categorize", label: "Categorize" },
+        { value: "match", label: "Match", disabled: true }
+      ],
+      selected: purpose,
+      onChange: onChangePurpose
+    }
+  )), /* @__PURE__ */ import_react9.default.createElement(
+    "div",
+    {
+      className: `${className}__content`,
+      id: `expanded-${bankTransaction.id}`
+    },
+    /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell ${className}__table-cell--header`
+      }
+    ),
+    /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell ${className}__table-cell--header`
+      },
+      "Category"
+    ),
+    /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell ${className}__table-cell--header`
+      },
+      "Description"
+    ),
+    /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell ${className}__table-cell--header`
+      },
+      "Receipt"
+    ),
+    /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell ${className}__table-cell--header`
+      }
+    ),
+    /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell ${className}__table-cell--header`
+      }
+    ),
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, rowState.splits.length === 1 ? /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__button--split`, onClick: addSplit }, /* @__PURE__ */ import_react9.default.createElement(LinkBroken_default, { className: `${className}__svg`, size: 18 }), "Split") : /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__button--merge`,
+        onClick: removeSplit
+      },
+      /* @__PURE__ */ import_react9.default.createElement(Link_default, { className: `${className}__svg`, size: 18 }),
+      "Merge"
+    )),
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, rowState.splits.map((split, index) => /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell--split-entry`,
+        key: `split-${index}`
+      },
+      /* @__PURE__ */ import_react9.default.createElement(
+        CategoryMenu,
+        {
+          bankTransaction,
+          name: `category-${index}`,
+          value: split.category,
+          onChange: (value) => changeCategory(index, value)
+        }
+      ),
+      rowState.splits.length > 1 && /* @__PURE__ */ import_react9.default.createElement(
+        "input",
+        {
+          type: "text",
+          name: `split-${index}`,
+          disabled: index + 1 === rowState.splits.length,
+          onChange: updateAmounts(index),
+          value: split.inputValue,
+          onBlur,
+          className: `${className}__split-amount${split.amount < 0 ? "--negative" : ""}`
+        }
+      )
+    ))),
+    /* @__PURE__ */ import_react9.default.createElement(
+      "div",
+      {
+        className: `${className}__table-cell ${className}__table-cell--description`
+      },
+      /* @__PURE__ */ import_react9.default.createElement("textarea", null)
+    ),
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, /* @__PURE__ */ import_react9.default.createElement("input", { type: "file" })),
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }),
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, /* @__PURE__ */ import_react9.default.createElement("button", { onClick: save, className: `${className}__button--save` }, "Save"))
+  ));
+};
+
+// src/components/Pill/Pill.tsx
+var import_react10 = __toESM(require("react"));
+var Pill = ({ children }) => /* @__PURE__ */ import_react10.default.createElement("span", { className: "Layer__pill" }, children);
+
+// src/components/BankTransactionRow/BankTransactionRow.tsx
+var import_date_fns4 = require("date-fns");
+var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
+var BankTransactionRow = ({
+  dateFormat: dateFormat2,
+  bankTransaction,
+  isOpen,
+  toggleOpen,
+  editable
+}) => {
+  const { categorize: categorizeBankTransaction2 } = useBankTransactions();
+  const [selectedCategory, setSelectedCategory] = (0, import_react11.useState)(
+    bankTransaction.categorization_flow.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions[0] : void 0
+  );
+  const className = "Layer__bank-transaction-row__table-cell";
+  const openClassName = isOpen ? `${className}--expanded` : "";
+  const save = () => categorizeBankTransaction2(bankTransaction.id, {
+    type: "Category",
+    category: {
+      type: "StableName",
+      stable_name: selectedCategory?.stable_name || selectedCategory?.category || ""
+    }
+  });
+  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName} ${className}--date` }, (0, import_date_fns4.format)((0, import_date_fns4.parseISO)(bankTransaction.date), dateFormat2)), /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }, bankTransaction.counterparty_name), /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }, "Business Checking"), /* @__PURE__ */ import_react11.default.createElement(
+    "div",
+    {
+      className: `${className} ${openClassName} ${className}--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
+    },
+    centsToDollars(bankTransaction.amount)
+  ), isOpen ? /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }) : /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }, editable ? /* @__PURE__ */ import_react11.default.createElement(
+    CategoryMenu,
+    {
+      bankTransaction,
+      name: `category-${bankTransaction.id}`,
+      value: selectedCategory,
+      onChange: setSelectedCategory
+    }
+  ) : /* @__PURE__ */ import_react11.default.createElement(Pill, null, bankTransaction?.category?.display_name)), /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName} ${className}--actions` }, /* @__PURE__ */ import_react11.default.createElement(
+    "div",
+    {
+      className: "Layer__bank-transaction-row__save-button",
+      onClick: () => save()
+    },
+    editable && !isOpen && /* @__PURE__ */ import_react11.default.createElement(
+      CheckedCircle_default,
+      {
+        size: 28,
+        strokeColor: "#0C48E5",
+        fillColor: "#e0e9ff"
+      }
+    )
+  ), /* @__PURE__ */ import_react11.default.createElement(
+    "div",
+    {
+      onClick: () => toggleOpen(bankTransaction.id),
+      className: "Layer__bank-transaction-row__expand-button"
+    },
+    isOpen ? /* @__PURE__ */ import_react11.default.createElement(ChevronUp_default, null) : /* @__PURE__ */ import_react11.default.createElement(ChevronDown_default, null)
+  )), isOpen && /* @__PURE__ */ import_react11.default.createElement(
+    ExpandedBankTransactionRow,
+    {
+      bankTransaction,
+      close: () => toggleOpen(bankTransaction.id)
+    }
+  ));
+};
+
+// src/components/BankTransactions/BankTransactions.tsx
+var dateFormat = "MM/dd/yyyy";
+var CategorizedCategories = [
+  "CATEGORIZED" /* CATEGORIZED */,
+  "JOURNALING" /* JOURNALING */,
+  "SPLIT" /* SPLIT */
+];
+var ReviewCategories = [
+  "READY_FOR_INPUT" /* READY_FOR_INPUT */,
+  "LAYER_REVIEW" /* LAYER_REVIEW */
+];
+var filterVisibility = (display) => (bankTransaction) => {
+  const categorized = CategorizedCategories.includes(
+    bankTransaction.categorization_status
+  );
+  const inReview = ReviewCategories.includes(
+    bankTransaction.categorization_status
+  );
+  return display === "review" /* review */ && inReview || display === "categorized" /* categorized */ && categorized;
+};
+var BankTransactions = () => {
+  const [display, setDisplay] = (0, import_react12.useState)("review" /* review */);
+  const { data } = useBankTransactions();
+  const bankTransactions = data.filter(filterVisibility(display));
+  const onCategorizationDisplayChange = (event) => setDisplay(
+    event.target.value === "categorized" /* categorized */ ? "categorized" /* categorized */ : "review" /* review */
+  );
+  const [openRows, setOpenRows] = (0, import_react12.useState)({});
+  const toggleOpen = (id) => setOpenRows({ ...openRows, [id]: !openRows[id] });
+  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions", "data-display": display }, /* @__PURE__ */ import_react12.default.createElement("header", { className: "Layer__bank-transactions__header" }, /* @__PURE__ */ import_react12.default.createElement("h2", { className: "Layer__bank-transactions__title" }, "Transactions"), /* @__PURE__ */ import_react12.default.createElement(
+    RadioButtonGroup,
+    {
+      name: "bank-transaction-display",
+      buttons: [
+        { label: "To Review", value: "review" /* review */ },
+        { label: "Categorized", value: "categorized" /* categorized */ }
+      ],
+      selected: display,
+      onChange: onCategorizationDisplayChange
+    }
+  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Date"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Transaction"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Account"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header Layer__bank-transactions__table-cell--header-amount" }, "Amount"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Category"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Actions"), bankTransactions.map((bankTransaction) => /* @__PURE__ */ import_react12.default.createElement(
+    BankTransactionRow,
+    {
+      key: bankTransaction.id,
+      dateFormat,
+      bankTransaction,
+      isOpen: openRows[bankTransaction.id],
+      toggleOpen,
+      editable: display === "review" /* review */
+    }
+  ))));
+};
+
+// src/components/Hello/Hello.tsx
+var import_react13 = __toESM(require("react"));
+var import_swr3 = __toESM(require("swr"));
+var fetcher = (url) => fetch(url).then((res) => res.json());
+var Hello = ({ user }) => {
+  const { data, isLoading } = (0, import_swr3.default)(
+    `https://api.github.com/users/${user || "jyurek"}`,
+    fetcher
+  );
+  const name = (isLoading ? "..." : data?.name) || "User";
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+};
+
+// src/components/ProfitAndLoss/ProfitAndLoss.tsx
+var import_react21 = __toESM(require("react"));
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+var import_react14 = require("react");
+var import_date_fns5 = require("date-fns");
+var import_swr4 = __toESM(require("swr"));
+var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate } = {
+  startDate: (0, import_date_fns5.startOfMonth)(/* @__PURE__ */ new Date()),
+  endDate: (0, import_date_fns5.endOfMonth)(/* @__PURE__ */ new Date())
+}) => {
+  const { auth, businessId } = useLayerContext();
+  const [startDate, setStartDate] = (0, import_react14.useState)(
+    initialStartDate || (0, import_date_fns5.startOfMonth)(Date.now())
+  );
+  const [endDate, setEndDate] = (0, import_react14.useState)(
+    initialEndDate || (0, import_date_fns5.endOfMonth)(Date.now())
+  );
+  const {
+    data: rawData,
+    isLoading,
+    error: rawError
+  } = (0, import_swr4.default)(
+    businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}`,
+    Layer.getProfitAndLoss(auth?.access_token, {
+      params: {
+        businessId,
+        startDate: (0, import_date_fns5.formatISO)(startDate),
+        endDate: (0, import_date_fns5.formatISO)(endDate)
+      }
+    })
+  );
+  const { data, error } = rawData || {};
+  const changeDateRange = ({
+    startDate: newStartDate,
+    endDate: newEndDate
+  }) => {
+    newStartDate && setStartDate(newStartDate);
+    newEndDate && setEndDate(newEndDate);
+  };
+  return {
+    data,
+    isLoading,
+    error: error || rawError,
+    dateRange: { startDate, endDate },
+    changeDateRange
+  };
+};
+
+// src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
+var import_react16 = __toESM(require("react"));
+
+// src/components/ProfitAndLossChart/Indicator.tsx
+var import_react15 = __toESM(require("react"));
+var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
+var Indicator = ({
+  viewBox = {},
+  className,
+  animateFrom,
+  setAnimateFrom
+}) => {
+  if (!className?.match(/selected/)) {
+    return null;
+  }
+  const {
+    x: animateTo = 0,
+    y = 0,
+    width = 0,
+    height = 0
+  } = "x" in viewBox ? viewBox : emptyViewBox;
+  const boxWidth = width * 2 + 4;
+  const multiplier = 1.5;
+  const xOffset = (boxWidth * multiplier - boxWidth) / 2;
+  (0, import_react15.useEffect)(() => {
+    setAnimateFrom(animateTo);
+  }, [animateTo]);
+  const actualX = animateFrom === -1 ? animateTo : animateFrom;
+  return /* @__PURE__ */ import_react15.default.createElement(
+    "rect",
+    {
+      className: "Layer__profit-and-loss-chart__selection-indicator",
+      style: {
+        width: `${boxWidth * multiplier}px`,
+        x: actualX - xOffset,
+        y: y + height
+      }
+    }
+  );
+};
+
+// src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
+var import_date_fns6 = require("date-fns");
+var import_recharts = require("recharts");
+var barGap = 4;
+var barSize = 20;
+var ProfitAndLossChart = () => {
+  const { changeDateRange, dateRange } = (0, import_react16.useContext)(ProfitAndLoss.Context);
+  const thisMonth = (0, import_date_fns6.startOfMonth)(Date.now());
+  const startSelectionMonth = dateRange.startDate.getMonth();
+  const endSelectionMonth = dateRange.endDate.getMonth();
+  const monthData = [];
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 11 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 11 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 10 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 10 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 9 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 9 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 8 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 8 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 7 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 7 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 6 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 6 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 5 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 5 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 4 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 4 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 3 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 3 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 2 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 2 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 1 })),
+      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 1 }))
+    })?.data
+  );
+  monthData.push(
+    useProfitAndLoss({
+      startDate: thisMonth,
+      endDate: (0, import_date_fns6.endOfMonth)(thisMonth)
+    })?.data
+  );
+  const getMonthName = (pnl) => !!pnl ? (0, import_date_fns6.format)((0, import_date_fns6.parseISO)(pnl.start_date), "LLL") : "";
+  const summarizePnL = (pnl) => ({
+    name: getMonthName(pnl),
+    revenue: pnl?.income.value || 0,
+    expenses: (pnl?.income.value || 0) - (pnl?.net_profit || 0),
+    selected: !!pnl && (0, import_date_fns6.parseISO)(pnl.start_date).getMonth() >= startSelectionMonth && (0, import_date_fns6.parseISO)(pnl.end_date).getMonth() <= endSelectionMonth
+  });
+  const onClick = ({ activeTooltipIndex }) => {
+    const selection = monthData[activeTooltipIndex || -1];
+    if (selection) {
+      const { start_date: startDate, end_date: endDate } = selection;
+      changeDateRange({
+        startDate: (0, import_date_fns6.parseISO)(startDate),
+        endDate: (0, import_date_fns6.parseISO)(endDate)
+      });
+    }
+  };
+  const data = (0, import_react16.useMemo)(
+    () => monthData.map(summarizePnL),
+    [
+      startSelectionMonth,
+      endSelectionMonth,
+      ...monthData.map((m) => m?.net_profit)
+    ]
+  );
+  const [animateFrom, setAnimateFrom] = (0, import_react16.useState)(-1);
+  return /* @__PURE__ */ import_react16.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 250 }, /* @__PURE__ */ import_react16.default.createElement(
+    import_recharts.BarChart,
+    {
+      margin: { left: 24, right: 24, bottom: 24 },
+      data,
+      onClick,
+      barGap,
+      className: "Layer__profit-and-loss-chart"
+    },
+    /* @__PURE__ */ import_react16.default.createElement(import_recharts.CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ import_react16.default.createElement(
+      import_recharts.Legend,
+      {
+        verticalAlign: "top",
+        align: "left",
+        payload: [
+          { value: "Income", type: "circle", id: "IncomeLegend" },
+          { value: "Expenses", type: "circle", id: "ExpensesLegend" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ import_react16.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+    /* @__PURE__ */ import_react16.default.createElement(
+      import_recharts.Bar,
+      {
+        dataKey: "revenue",
+        barSize,
+        isAnimationActive: false,
+        radius: [barSize / 4, barSize / 4, 0, 0],
+        className: "Layer__profit-and-loss-chart__bar--income"
+      },
+      /* @__PURE__ */ import_react16.default.createElement(
+        import_recharts.LabelList,
+        {
+          content: /* @__PURE__ */ import_react16.default.createElement(
+            Indicator,
+            {
+              animateFrom,
+              setAnimateFrom
+            }
+          )
+        }
+      ),
+      data.map((entry) => /* @__PURE__ */ import_react16.default.createElement(
+        import_recharts.Cell,
+        {
+          key: entry.name,
+          className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+        }
+      ))
+    ),
+    /* @__PURE__ */ import_react16.default.createElement(
+      import_recharts.Bar,
+      {
+        dataKey: "expenses",
+        barSize,
+        isAnimationActive: false,
+        radius: [barSize / 4, barSize / 4, 0, 0],
+        className: "Layer__profit-and-loss-chart__bar--expenses"
+      },
+      data.map((entry) => /* @__PURE__ */ import_react16.default.createElement(
+        import_recharts.Cell,
+        {
+          key: entry.name,
+          className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+        }
+      ))
+    )
+  ));
+};
+
+// src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/icons/ChevronLeft.tsx
+var React22 = __toESM(require("react"));
+var ChevronLeft = ({
+  strokeColor,
+  size,
+  ...props
+}) => /* @__PURE__ */ React22.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size || 24,
+    height: size || 24,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React22.createElement(
+    "path",
+    {
+      stroke: strokeColor ?? "#000",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "m15 18-6-6 6-6"
+    }
+  )
+);
+var ChevronLeft_default = ChevronLeft;
+
+// src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
+var import_date_fns7 = require("date-fns");
+var ProfitAndLossDatePicker = () => {
+  const { changeDateRange, dateRange } = (0, import_react17.useContext)(ProfitAndLoss.Context);
+  const date = dateRange.startDate;
+  const label = (0, import_date_fns7.format)(date, "LLLL y");
+  const change = (duration) => {
+    const newDate = (0, import_date_fns7.add)(date, duration);
+    changeDateRange({
+      startDate: (0, import_date_fns7.startOfMonth)(newDate),
+      endDate: (0, import_date_fns7.endOfMonth)(newDate)
+    });
+  };
+  const previousMonth = () => change({ months: -1 });
+  const nextMonth = () => change({ months: 1 });
+  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react17.default.createElement(
+    "button",
+    {
+      "aria-label": "View Previous Month",
+      className: "Layer__profit-and-loss-date-picker__button",
+      onClick: previousMonth
+    },
+    /* @__PURE__ */ import_react17.default.createElement(
+      ChevronLeft_default,
+      {
+        className: "Layer__profit-and-loss-date-picker__button-icon",
+        size: 18
+      }
+    )
+  ), /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react17.default.createElement(
+    "button",
+    {
+      "aria-label": "View Next Month",
+      className: "Layer__profit-and-loss-date-picker__button",
+      onClick: nextMonth
+    },
+    /* @__PURE__ */ import_react17.default.createElement(
+      ChevronRight_default,
+      {
+        className: "Layer__profit-and-loss-date-picker__button-icon",
+        size: 18
+      }
+    )
+  ));
+};
+
+// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+var import_react18 = __toESM(require("react"));
+var import_date_fns8 = require("date-fns");
+var ProfitAndLossSummaries = () => {
+  const { data } = (0, import_react18.useContext)(ProfitAndLoss.Context);
+  if (!data) {
+    return null;
+  }
+  const monthName = (0, import_date_fns8.format)((0, import_date_fns8.parseISO)(data?.start_date), "LLLL");
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Revenue"), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__amount" }, centsToDollars(data.income.value))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__amount" }, centsToDollars(Math.abs(data.income.value - data.net_profit)))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__amount" }, centsToDollars(data.net_profit))));
+};
+
+// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
+var import_react20 = __toESM(require("react"));
+
+// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
+var import_react19 = __toESM(require("react"));
+var ProfitAndLossRow = ({
+  variant,
+  lineItem,
+  depth = 0,
+  maxDepth = 1,
+  direction = "DEBIT" /* DEBIT */
+}) => {
+  if (!lineItem) {
+    return null;
+  }
+  const { value, display_name, line_items, name } = lineItem;
+  const variantName = variant || name;
+  const amount = value || 0;
+  const amountString = centsToDollars(Math.abs(amount));
+  const labelClasses = [
+    "Layer__profit-and-loss-row",
+    "Layer__profit-and-loss-row__label"
+  ];
+  const valueClasses = [
+    "Layer__profit-and-loss-row",
+    "Layer__profit-and-loss-row__value"
+  ];
+  valueClasses.push(
+    direction === "CREDIT" /* CREDIT */ ? "Layer__profit-and-loss-row__value--amount-positive" : "Layer__profit-and-loss-row__value--amount-negative"
+  );
+  labelClasses.push(`Layer__profit-and-loss-row__label--depth-${depth}`);
+  valueClasses.push(`Layer__profit-and-loss-row__value--depth-${depth}`);
+  variantName && labelClasses.push(
+    `Layer__profit-and-loss-row__label--variant-${variantName}`
+  );
+  variantName && valueClasses.push(
+    `Layer__profit-and-loss-row__value--variant-${variantName}`
+  );
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: labelClasses.join(" ") }, display_name), /* @__PURE__ */ import_react19.default.createElement("div", { className: valueClasses.join(" ") }, amountString), depth < maxDepth && (line_items || []).map((line_item) => /* @__PURE__ */ import_react19.default.createElement(
+    ProfitAndLossRow,
+    {
+      key: line_item.display_name,
+      lineItem: line_item,
+      depth: depth + 1,
+      maxDepth,
+      direction
+    }
+  )));
+};
+
+// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
+var ProfitAndLossTable = () => {
+  const { data, isLoading } = (0, import_react20.useContext)(ProfitAndLoss.Context);
+  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "Layer__profit-and-loss-table" }, !data || isLoading ? /* @__PURE__ */ import_react20.default.createElement("div", null, "Loading") : /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.income,
+      direction: "CREDIT" /* CREDIT */
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.cost_of_goods_sold,
+      direction: "DEBIT" /* DEBIT */
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: {
+        value: data.gross_profit,
+        display_name: "Gross Profit"
+      },
+      variant: "GROSS",
+      direction: "CREDIT" /* CREDIT */
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.expenses,
+      direction: "DEBIT" /* DEBIT */
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: {
+        value: data.profit_before_taxes,
+        display_name: "Profit Before Taxes"
+      },
+      variant: "BEFORETAX",
+      direction: "CREDIT" /* CREDIT */
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(ProfitAndLossRow, { lineItem: data.taxes, direction: "DEBIT" /* DEBIT */ }), /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: {
+        value: data.net_profit,
+        display_name: "Net Profit"
+      },
+      variant: "NETPROFIT",
+      direction: "CREDIT" /* CREDIT */
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.other_outflows,
+      direction: "DEBIT" /* DEBIT */
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.personal_expenses,
+      direction: "DEBIT" /* DEBIT */
+    }
+  )));
+};
+
+// src/components/ProfitAndLoss/ProfitAndLoss.tsx
+var import_date_fns9 = require("date-fns");
+var PNLContext = (0, import_react21.createContext)({
+  data: void 0,
+  isLoading: true,
+  error: void 0,
+  dateRange: {
+    startDate: (0, import_date_fns9.startOfMonth)(/* @__PURE__ */ new Date()),
+    endDate: (0, import_date_fns9.endOfMonth)(/* @__PURE__ */ new Date())
+  },
+  changeDateRange: () => {
+  }
+});
+var ProfitAndLoss = ({ children }) => {
+  const contextData = useProfitAndLoss();
+  return /* @__PURE__ */ import_react21.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "Layer__profit-and-loss" }, /* @__PURE__ */ import_react21.default.createElement("h2", { className: "Layer__profit-and-loss__title" }, "Profit & Loss"), children));
+};
+ProfitAndLoss.Chart = ProfitAndLossChart;
+ProfitAndLoss.Context = PNLContext;
+ProfitAndLoss.DatePicker = ProfitAndLossDatePicker;
+ProfitAndLoss.Summaries = ProfitAndLossSummaries;
+ProfitAndLoss.Table = ProfitAndLossTable;
+
+// src/providers/LayerProvider/LayerProvider.tsx
+var import_react22 = __toESM(require("react"));
+var import_swr5 = __toESM(require("swr"));
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "LayerContext.setAuth" /* setAuth */:
+    case "LayerContext.setCategories" /* setCategories */:
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};
+var LayerEnvironment = {
+  production: {
+    url: "not defined yet",
+    scope: "not defined yet"
+  },
+  staging: {
+    url: "https://auth.layerfi.com/oauth2/token",
+    scope: "https://sandbox.layerfi.com/sandbox"
+  }
+};
+var LayerProvider = ({
+  appId,
+  appSecret,
+  businessId,
+  children,
+  clientId,
+  environment = "production"
+}) => {
+  const defaultSWRConfig = {
+    revalidateInterval: 0,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    revalidateIfStale: false
+  };
+  const { url, scope } = LayerEnvironment[environment];
+  const [state, dispatch] = (0, import_react22.useReducer)(reducer, {
+    auth: { access_token: "", token_type: "", expires_in: 0 },
+    businessId,
+    categories: []
+  });
+  const { data: auth } = (0, import_swr5.default)(
+    "authenticate",
+    Layer.authenticate({
+      appId,
+      appSecret,
+      authenticationUrl: url,
+      scope,
+      clientId
+    }),
+    defaultSWRConfig
+  );
+  (0, import_react22.useEffect)(() => {
+    if (!!auth?.access_token) {
+      dispatch({ type: "LayerContext.setAuth" /* setAuth */, payload: { auth } });
+    }
+  }, [auth?.access_token]);
+  const { data: categories } = (0, import_swr5.default)(
+    businessId && auth?.access_token && `categories-${businessId}`,
+    Layer.getCategories(auth?.access_token, { params: { businessId } }),
+    defaultSWRConfig
+  );
+  (0, import_react22.useEffect)(() => {
+    if (!!categories?.data?.categories?.length) {
+      dispatch({
+        type: "LayerContext.setCategories" /* setCategories */,
+        payload: { categories: categories.data.categories || [] }
+      });
+    }
+  }, [categories?.data?.categories?.length]);
+  return /* @__PURE__ */ import_react22.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react22.default.createElement(LayerContext.Provider, { value: state }, children));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BalanceSheet,
+  BankTransactions,
+  Hello,
+  LayerProvider,
+  ProfitAndLoss
+});
+//# sourceMappingURL=index.js.map