@layerfi/components 0.1.1 → 0.1.3

package/dist/index.js

@@ -50,7 +50,6 @@ var authenticate = ({
   appId,
   appSecret,
   authenticationUrl = "https://auth.layerfi.com/oauth2/token",
-  clientId,
   scope
 }) => () => fetch(authenticationUrl, {
   method: "POST",
@@ -61,7 +60,7 @@ var authenticate = ({
   body: formStringFromObject({
     grant_type: "client_credentials",
     scope,
-    client_id: clientId
+    client_id: appId
   })
 }).then((res) => res.json());
 
@@ -599,7 +598,7 @@ var BalanceSheet = () => {
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
 var import_swr2 = __toESM(require("swr"));
@@ -608,6 +607,7 @@ var useBankTransactions = () => {
   const {
     data: responseData,
     isLoading,
+    isValidating,
     error: responseError,
     mutate
   } = (0, import_swr2.default)(
@@ -617,12 +617,12 @@ var useBankTransactions = () => {
     })
   );
   const {
-    data = [],
+    data = void 0,
     meta: metadata = {},
     error = void 0
   } = responseData || {};
   const categorize = (id, newCategory) => {
-    const foundBT = data.find((x) => x.business_id === businessId && x.id === id);
+    const foundBT = data?.find((x) => x.business_id === businessId && x.id === id);
     if (foundBT) {
       updateOneLocal({ ...foundBT, processing: true, error: void 0 });
     }
@@ -639,7 +639,7 @@ var useBankTransactions = () => {
         throw errors;
       }
     }).catch((err) => {
-      const newBT = data.find(
+      const newBT = data?.find(
         (x) => x.business_id === businessId && x.id === id
       );
       if (newBT) {
@@ -652,15 +652,20 @@ var useBankTransactions = () => {
     });
   };
   const updateOneLocal = (newBankTransaction) => {
-    const updatedData = data.map(
+    const updatedData = data?.map(
       (bt) => bt.id === newBankTransaction.id ? newBankTransaction : bt
     );
     mutate({ data: updatedData }, { revalidate: false });
   };
+  const refetch = () => {
+    mutate();
+  };
   return {
     data,
     metadata,
     isLoading,
+    isValidating,
+    refetch,
     error: responseError || error,
     categorize,
     updateOneLocal
@@ -705,6 +710,7 @@ var Button = ({
   iconOnly,
   ...props
 }) => {
+  const buttonRef = (0, import_react8.useRef)(null);
   let justify = "center";
   if (leftIcon && rightIcon) {
     justify = "space-between";
@@ -719,7 +725,23 @@ var Button = ({
     iconOnly ? "Layer__btn--icon-only" : "",
     className
   );
-  return /* @__PURE__ */ import_react8.default.createElement("button", { ...props, className: baseClassName }, /* @__PURE__ */ import_react8.default.createElement("span", { className: `Layer__btn-content Layer__justify--${justify}` }, leftIcon && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-icon Layer__btn-icon--left" }, leftIcon), !iconOnly && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-icon Layer__btn-icon--right" }, rightIcon)));
+  const startAnimation = () => buttonRef.current && [...buttonRef.current.getElementsByClassName("animateOnHover")].forEach(
+    (el) => el.beginElement()
+  );
+  const stopAnimation = () => buttonRef.current && [...buttonRef.current.getElementsByClassName("animateOnHover")].forEach(
+    (el) => el.endElement()
+  );
+  return /* @__PURE__ */ import_react8.default.createElement(
+    "button",
+    {
+      ...props,
+      className: baseClassName,
+      onMouseEnter: startAnimation,
+      onMouseLeave: stopAnimation,
+      ref: buttonRef
+    },
+    /* @__PURE__ */ import_react8.default.createElement("span", { className: `Layer__btn-content Layer__justify--${justify}` }, leftIcon && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-icon Layer__btn-icon--left" }, leftIcon), !iconOnly && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-icon Layer__btn-icon--right" }, rightIcon))
+  );
 };
 
 // src/components/Button/SubmitButton.tsx
@@ -1259,66 +1281,135 @@ var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React19.createElem
 );
 var RefreshCcw_default = RefreshCcw;
 
-// src/icons/ScissorsFullOpen.tsx
+// src/icons/Scissors.tsx
 var React20 = __toESM(require("react"));
-var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React20.createElement(
+var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React20.createElement(
   "svg",
   {
-    viewBox: "0 0 12 12",
+    viewBox: "0 0 11 11",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     width: size,
     height: size
   },
-  /* @__PURE__ */ React20.createElement("g", { id: "scissors" }, /* @__PURE__ */ React20.createElement(
+  /* @__PURE__ */ React20.createElement(
     "path",
     {
-      id: "Vector",
-      d: "M3 4.5C3.82843 4.5 4.5 3.82843 4.5 3C4.5 2.17157 3.82843 1.5 3 1.5C2.17157 1.5 1.5 2.17157 1.5 3C1.5 3.82843 2.17157 4.5 3 4.5Z",
+      d: "M2.75 4.125C3.50939 4.125 4.125 3.50939 4.125 2.75C4.125 1.99061 3.50939 1.375 2.75 1.375C1.99061 1.375 1.375 1.99061 1.375 2.75C1.375 3.50939 1.99061 4.125 2.75 4.125Z",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React20.createElement(
+    },
+    /* @__PURE__ */ React20.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M2.75 4.125C3.50939 4.125 4.125 3.50939 4.125 2.75C4.125 1.99061 3.50939 1.375 2.75 1.375C1.99061 1.375 1.375 1.99061 1.375 2.75C1.375 3.50939 1.99061 4.125 2.75 4.125Z;M2.50519 5.21436C3.20276 4.91424 3.52494 4.10544 3.22481 3.40788C2.92468 2.71031 2.11589 2.38813 1.41833 2.68826C0.720762 2.98839 0.398577 3.79718 0.698706 4.49474C0.998836 5.19231 1.80763 5.51449 2.50519 5.21436Z;M2.75 4.125C3.50939 4.125 4.125 3.50939 4.125 2.75C4.125 1.99061 3.50939 1.375 2.75 1.375C1.99061 1.375 1.375 1.99061 1.375 2.75C1.375 3.50939 1.99061 4.125 2.75 4.125Z",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React20.createElement(
     "path",
     {
-      id: "Vector_2",
-      d: "M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z",
+      d: "M2.75 9.625C3.50939 9.625 4.125 9.00939 4.125 8.25C4.125 7.49061 3.50939 6.875 2.75 6.875C1.99061 6.875 1.375 7.49061 1.375 8.25C1.375 9.00939 1.99061 9.625 2.75 9.625Z",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React20.createElement(
+    },
+    /* @__PURE__ */ React20.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M2.75 9.625C3.50939 9.625 4.125 9.00939 4.125 8.25C4.125 7.49061 3.50939 6.875 2.75 6.875C1.99061 6.875 1.375 7.49061 1.375 8.25C1.375 9.00939 1.99061 9.625 2.75 9.625Z;M1.43277 8.38576C2.13615 8.67201 2.9384 8.33386 3.22465 7.63049C3.5109 6.92711 3.17275 6.12486 2.46937 5.83861C1.766 5.55236 0.96375 5.89051 0.6775 6.59389C0.391251 7.29726 0.729398 8.09951 1.43277 8.38576Z;M2.75 9.625C3.50939 9.625 4.125 9.00939 4.125 8.25C4.125 7.49061 3.50939 6.875 2.75 6.875C1.99061 6.875 1.375 7.49061 1.375 8.25C1.375 9.00939 1.99061 9.625 2.75 9.625Z",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React20.createElement(
     "path",
     {
-      id: "Vector_3",
-      d: "M10 2L4.06 7.94",
+      d: "M9.16668 1.83325L3.72168 7.27825",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React20.createElement(
+    },
+    /* @__PURE__ */ React20.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M9.16668 1.83325L3.72168 7.27825;M10.3129 3.58763L3.21706 6.57851;M9.16668 1.83325L3.72168 7.27825",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React20.createElement(
     "path",
     {
-      id: "Vector_4",
-      d: "M7.235 7.23999L10 9.99999",
+      d: "M6.63232 6.63672L9.16691 9.16672",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React20.createElement(
+    },
+    /* @__PURE__ */ React20.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M6.63232 6.63672L9.16691 9.16672;M7.06396 5.9873L10.3921 7.3096;M6.63232 6.63672L9.16691 9.16672",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React20.createElement(
     "path",
     {
-      id: "Vector_5",
-      d: "M4.06 4.06006L6 6.00006",
+      d: "M3.72168 3.72168L5.50001 5.50001",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }
-  ))
+    },
+    /* @__PURE__ */ React20.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M3.72168 3.72168L5.50001 5.50001;M3.23828 4.45996L5.57467 5.39067;M3.72168 3.72168L5.50001 5.50001",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  )
 );
-var ScissorsFullOpen_default = ScissorsFullOpen;
+var Scissors_default = Scissors;
 
 // src/components/Input/Input.tsx
 var import_react15 = __toESM(require("react"));
@@ -1654,7 +1745,7 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
     bankTransaction,
     isOpen = false,
     asListItem = false,
-    showSubmitButton = false
+    submitBtnText = "Save"
   }, ref) => {
     const { categorize: categorizeBankTransaction2 } = useBankTransactions();
     const [purpose, setPurpose] = (0, import_react22.useState)("categorize" /* categorize */);
@@ -1793,7 +1884,7 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
           Button,
           {
             onClick: addSplit,
-            leftIcon: /* @__PURE__ */ import_react22.default.createElement(ScissorsFullOpen_default, { size: 14 }),
+            leftIcon: /* @__PURE__ */ import_react22.default.createElement(Scissors_default, { size: 14 }),
             variant: "secondary" /* secondary */
           },
           "Split"
@@ -1816,7 +1907,7 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
           /* @__PURE__ */ import_react22.default.createElement(Textarea, { name: "description", placeholder: "Enter description" })
         ),
         /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ import_react22.default.createElement(FileInput, { text: "Upload receipt" })),
-        asListItem || showSubmitButton ? /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__submit-btn` }, /* @__PURE__ */ import_react22.default.createElement(
+        asListItem ? /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__submit-btn` }, /* @__PURE__ */ import_react22.default.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -1829,7 +1920,7 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
             error: bankTransaction.error,
             active: true
           },
-          "Approve"
+          submitBtnText
         )) : null
       ))
     );
@@ -1907,7 +1998,8 @@ var BankTransactionListItem = ({
       bankTransaction,
       close: () => toggleOpen(bankTransaction.id),
       isOpen,
-      asListItem: true
+      asListItem: true,
+      submitBtnText: editable ? "Approve" : "Save"
     }
   )), /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ import_react24.default.createElement(
     CategoryMenu,
@@ -2040,8 +2132,8 @@ var BankTransactionRow = ({
             disabled: bankTransaction.processing
           }
         ) : null,
-        !editable ? /* @__PURE__ */ import_react25.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction?.category?.display_name) : null,
-        editable && /* @__PURE__ */ import_react25.default.createElement(
+        !editable && !isOpen ? /* @__PURE__ */ import_react25.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction?.category?.display_name) : null,
+        editable || isOpen ? /* @__PURE__ */ import_react25.default.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -2054,8 +2146,8 @@ var BankTransactionRow = ({
             error: bankTransaction.error,
             active: isOpen
           },
-          "Approve"
-        ),
+          editable ? "Approve" : "Save"
+        ) : null,
         /* @__PURE__ */ import_react25.default.createElement(
           "div",
           {
@@ -2077,8 +2169,7 @@ var BankTransactionRow = ({
       ref: expandedRowRef,
       bankTransaction,
       close: () => toggleOpen(bankTransaction.id),
-      isOpen,
-      showSubmitButton: !editable
+      isOpen
     }
   ))));
 };
@@ -2105,7 +2196,6 @@ var parseColorFromTheme = (colorName, color) => {
   }
   try {
     if ("h" in color && "s" in color && "l" in color) {
-      console.log("its hsl", color);
       return {
         [`--color-${colorName}-h`]: color.h,
         [`--color-${colorName}-s`]: color.s,
@@ -2114,7 +2204,6 @@ var parseColorFromTheme = (colorName, color) => {
     }
     if ("r" in color && "g" in color && "b" in color) {
       const { h, s, l } = rgbToHsl(color);
-      console.log("its rgb", h, s, l);
       return {
         [`--color-${colorName}-h`]: h,
         [`--color-${colorName}-s`]: `${s}%`,
@@ -2122,7 +2211,6 @@ var parseColorFromTheme = (colorName, color) => {
       };
     }
     if ("hex" in color) {
-      console.log("its hex");
       const rgb = hexToRgb(color.hex);
       if (!rgb) {
         return {};
@@ -2132,7 +2220,6 @@ var parseColorFromTheme = (colorName, color) => {
         g: rgb.g.toString(),
         b: rgb.b.toString()
       });
-      console.log("its hex", h, s, l);
       return {
         [`--color-${colorName}-h`]: h,
         [`--color-${colorName}-s`]: `${s}%`,
@@ -2176,34 +2263,120 @@ var hexToRgb = (hex) => {
 };
 
 // src/components/Container/Container.tsx
-var Container = ({ name, className, children }) => {
-  const baseClassName = `Layer__${name} ${className ?? ""}`;
+var import_classnames11 = __toESM(require("classnames"));
+var Container = ({
+  name,
+  className,
+  children,
+  asWidget
+}) => {
+  const baseClassName = (0, import_classnames11.default)(
+    "Layer__component Layer__component-container",
+    `Layer__${name}`,
+    asWidget ? "Layer__component--as-widget" : "",
+    className
+  );
   const { theme } = useLayerContext();
   const styles = parseStylesFromThemeConfig(theme);
-  return /* @__PURE__ */ import_react26.default.createElement(
-    "div",
-    {
-      className: `Layer__component Layer__component-container ${baseClassName}`,
-      style: { ...styles }
-    },
-    children
-  );
+  return /* @__PURE__ */ import_react26.default.createElement("div", { className: baseClassName, style: { ...styles } }, children);
 };
 
 // src/components/Container/Header.tsx
 var import_react27 = __toESM(require("react"));
-var import_classnames11 = __toESM(require("classnames"));
+var import_classnames12 = __toESM(require("classnames"));
 var Header = (0, import_react27.forwardRef)(
   ({ className, children, style }, ref) => {
-    const baseClassName = (0, import_classnames11.default)("Layer__component-header", className);
+    const baseClassName = (0, import_classnames12.default)("Layer__component-header", className);
     return /* @__PURE__ */ import_react27.default.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
 
-// src/components/Loader/Loader.tsx
+// src/components/DataState/DataState.tsx
 var import_react28 = __toESM(require("react"));
+
+// src/icons/AlertOctagon.tsx
+var React35 = __toESM(require("react"));
+var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React35.createElement(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React35.createElement(
+    "path",
+    {
+      d: "M5.895 1.5H12.105L16.5 5.895V12.105L12.105 16.5H5.895L1.5 12.105V5.895L5.895 1.5Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React35.createElement(
+    "path",
+    {
+      d: "M9 6V9",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React35.createElement(
+    "path",
+    {
+      d: "M9 12H9.0075",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var AlertOctagon_default = AlertOctagon;
+
+// src/components/DataState/DataState.tsx
+var getIcon = (status) => {
+  switch (status) {
+    case "failed" /* failed */:
+      return /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ import_react28.default.createElement(AlertOctagon_default, { size: 12 }));
+    default:
+      return /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ import_react28.default.createElement(CheckCircle_default, { size: 12 }));
+  }
+};
+var DataState = ({
+  status,
+  title,
+  description,
+  onRefresh,
+  isLoading
+}) => {
+  return /* @__PURE__ */ import_react28.default.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ import_react28.default.createElement(
+    Text,
+    {
+      as: "span",
+      size: "lg" /* lg */,
+      weight: "bold" /* bold */,
+      className: "Layer__data-state__title"
+    },
+    title
+  ), /* @__PURE__ */ import_react28.default.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ import_react28.default.createElement(
+    Button,
+    {
+      variant: "secondary" /* secondary */,
+      rightIcon: isLoading ? /* @__PURE__ */ import_react28.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ import_react28.default.createElement(RefreshCcw_default, { size: 12 }),
+      onClick: onRefresh,
+      disabled: isLoading
+    },
+    "Refresh"
+  )));
+};
+
+// src/components/Loader/Loader.tsx
+var import_react29 = __toESM(require("react"));
 var Loader2 = ({ children }) => {
-  return /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react28.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }), children ?? "Loading...");
+  return /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react29.default.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
@@ -2225,16 +2398,18 @@ var filterVisibility = (display) => (bankTransaction) => {
   const inReview = ReviewCategories.includes(bankTransaction.categorization_status) || bankTransaction.recently_categorized;
   return display === "review" /* review */ && inReview || display === "categorized" /* categorized */ && categorized;
 };
-var BankTransactions = () => {
-  const [display, setDisplay] = (0, import_react29.useState)("review" /* review */);
-  const { data, isLoading } = useBankTransactions();
-  const bankTransactions = data.filter(filterVisibility(display));
+var BankTransactions = ({
+  asWidget = false
+}) => {
+  const [display, setDisplay] = (0, import_react30.useState)("review" /* review */);
+  const { data, isLoading, error, isValidating, refetch } = 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_react29.useState)({});
+  const [openRows, setOpenRows] = (0, import_react30.useState)({});
   const toggleOpen = (id) => setOpenRows({ ...openRows, [id]: !openRows[id] });
-  const [shiftStickyHeader, setShiftStickyHeader] = (0, import_react29.useState)(0);
+  const [shiftStickyHeader, setShiftStickyHeader] = (0, import_react30.useState)(0);
   const headerRef = useElementSize((_el, _en, size) => {
     if (size?.height && size?.height >= 90) {
       const newShift = -Math.floor(size.height / 2) + 6;
@@ -2246,15 +2421,15 @@ var BankTransactions = () => {
     }
   });
   const editable = display === "review" /* review */;
-  return /* @__PURE__ */ import_react29.default.createElement(Container, { name: COMPONENT_NAME }, /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(Container, { name: COMPONENT_NAME, asWidget }, /* @__PURE__ */ import_react30.default.createElement(
     Header,
     {
       ref: headerRef,
       className: "Layer__bank-transactions__header",
       style: { top: shiftStickyHeader }
     },
-    /* @__PURE__ */ import_react29.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
-    /* @__PURE__ */ import_react29.default.createElement(
+    /* @__PURE__ */ import_react30.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+    /* @__PURE__ */ import_react30.default.createElement(
       Toggle,
       {
         name: "bank-transaction-display",
@@ -2266,14 +2441,14 @@ var BankTransactions = () => {
         onChange: onCategorizationDisplayChange
       }
     )
-  ), /* @__PURE__ */ import_react29.default.createElement(
+  ), /* @__PURE__ */ import_react30.default.createElement(
     "table",
     {
       width: "100%",
       className: "Layer__table Layer__bank-transactions__table"
     },
-    /* @__PURE__ */ import_react29.default.createElement("thead", null, /* @__PURE__ */ import_react29.default.createElement("tr", null, /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
-    /* @__PURE__ */ import_react29.default.createElement("tbody", null, !isLoading && bankTransactions.map((bankTransaction) => /* @__PURE__ */ import_react29.default.createElement(
+    /* @__PURE__ */ import_react30.default.createElement("thead", null, /* @__PURE__ */ import_react30.default.createElement("tr", null, /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
+    /* @__PURE__ */ import_react30.default.createElement("tbody", null, !isLoading && bankTransactions?.map((bankTransaction) => /* @__PURE__ */ import_react30.default.createElement(
       BankTransactionRow,
       {
         key: bankTransaction.id,
@@ -2284,7 +2459,7 @@ var BankTransactions = () => {
         editable
       }
     )))
-  ), isLoading || !bankTransactions || bankTransactions?.length === 0 ? /* @__PURE__ */ import_react29.default.createElement(Loader2, null) : null, !isLoading && /* @__PURE__ */ import_react29.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions.map((bankTransaction) => /* @__PURE__ */ import_react29.default.createElement(
+  ), isLoading && !bankTransactions ? /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react30.default.createElement(Loader2, null)) : null, !isLoading && /* @__PURE__ */ import_react30.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map((bankTransaction) => /* @__PURE__ */ import_react30.default.createElement(
     BankTransactionListItem,
     {
       key: bankTransaction.id,
@@ -2294,11 +2469,29 @@ var BankTransactions = () => {
       toggleOpen,
       editable
     }
-  ))));
+  ))), !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react30.default.createElement(
+    DataState,
+    {
+      status: "allDone" /* allDone */,
+      title: "You are up to date with transactions!",
+      description: "All uncategorized transaction will be displayed here",
+      onRefresh: () => refetch(),
+      isLoading: isValidating
+    }
+  )) : null, !isLoading && error ? /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react30.default.createElement(
+    DataState,
+    {
+      status: "failed" /* failed */,
+      title: "Something went wrong",
+      description: "We couldn\u2019t load your data.",
+      onRefresh: () => refetch(),
+      isLoading: isValidating
+    }
+  )) : null);
 };
 
 // src/components/Hello/Hello.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_swr3 = __toESM(require("swr"));
 var fetcher = (url) => fetch(url).then((res) => res.json());
 var Hello = ({ user }) => {
@@ -2307,14 +2500,14 @@ var Hello = ({ user }) => {
     fetcher
   );
   const name = (isLoading ? "..." : data?.name) || "User";
-  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_date_fns6 = require("date-fns");
 var import_swr4 = __toESM(require("swr"));
 var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate } = {
@@ -2322,10 +2515,10 @@ var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate }
   endDate: (0, import_date_fns6.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = (0, import_react31.useState)(
+  const [startDate, setStartDate] = (0, import_react32.useState)(
     initialStartDate || (0, import_date_fns6.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react31.useState)(
+  const [endDate, setEndDate] = (0, import_react32.useState)(
     initialEndDate || (0, import_date_fns6.endOfMonth)(Date.now())
   );
   const {
@@ -2360,10 +2553,10 @@ var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate }
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -2383,11 +2576,11 @@ var Indicator = ({
   const boxWidth = width * 2 + 4;
   const multiplier = 1.5;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
@@ -2407,7 +2600,7 @@ var import_recharts = require("recharts");
 var barGap = 4;
 var barSize = 20;
 var ProfitAndLossChart = () => {
-  const { changeDateRange, dateRange } = (0, import_react33.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react34.useContext)(ProfitAndLoss.Context);
   const thisMonth = (0, import_date_fns7.startOfMonth)(Date.now());
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
@@ -2501,7 +2694,7 @@ var ProfitAndLossChart = () => {
       });
     }
   };
-  const data = (0, import_react33.useMemo)(
+  const data = (0, import_react34.useMemo)(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -2509,8 +2702,8 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = (0, import_react33.useState)(-1);
-  return /* @__PURE__ */ import_react33.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 250 }, /* @__PURE__ */ import_react33.default.createElement(
+  const [animateFrom, setAnimateFrom] = (0, import_react34.useState)(-1);
+  return /* @__PURE__ */ import_react34.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 250 }, /* @__PURE__ */ import_react34.default.createElement(
     import_recharts.BarChart,
     {
       margin: { left: 24, right: 24, bottom: 24 },
@@ -2519,8 +2712,8 @@ var ProfitAndLossChart = () => {
       barGap,
       className: "Layer__profit-and-loss-chart"
     },
-    /* @__PURE__ */ import_react33.default.createElement(import_recharts.CartesianGrid, { vertical: false }),
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(import_recharts.CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ import_react34.default.createElement(
       import_recharts.Legend,
       {
         verticalAlign: "top",
@@ -2531,8 +2724,8 @@ var ProfitAndLossChart = () => {
         ]
       }
     ),
-    /* @__PURE__ */ import_react33.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+    /* @__PURE__ */ import_react34.default.createElement(
       import_recharts.Bar,
       {
         dataKey: "revenue",
@@ -2541,10 +2734,10 @@ var ProfitAndLossChart = () => {
         radius: [barSize / 4, barSize / 4, 0, 0],
         className: "Layer__profit-and-loss-chart__bar--income"
       },
-      /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react34.default.createElement(
         import_recharts.LabelList,
         {
-          content: /* @__PURE__ */ import_react33.default.createElement(
+          content: /* @__PURE__ */ import_react34.default.createElement(
             Indicator,
             {
               animateFrom,
@@ -2553,7 +2746,7 @@ var ProfitAndLossChart = () => {
           )
         }
       ),
-      data.map((entry) => /* @__PURE__ */ import_react33.default.createElement(
+      data.map((entry) => /* @__PURE__ */ import_react34.default.createElement(
         import_recharts.Cell,
         {
           key: entry.name,
@@ -2561,7 +2754,7 @@ var ProfitAndLossChart = () => {
         }
       ))
     ),
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       import_recharts.Bar,
       {
         dataKey: "expenses",
@@ -2570,7 +2763,7 @@ var ProfitAndLossChart = () => {
         radius: [barSize / 4, barSize / 4, 0, 0],
         className: "Layer__profit-and-loss-chart__bar--expenses"
       },
-      data.map((entry) => /* @__PURE__ */ import_react33.default.createElement(
+      data.map((entry) => /* @__PURE__ */ import_react34.default.createElement(
         import_recharts.Cell,
         {
           key: entry.name,
@@ -2582,15 +2775,15 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/icons/ChevronLeft.tsx
-var React40 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var ChevronLeft = ({
   strokeColor,
   size,
   ...props
-}) => /* @__PURE__ */ React40.createElement(
+}) => /* @__PURE__ */ React42.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2600,7 +2793,7 @@ var ChevronLeft = ({
     viewBox: "0 0 24 24",
     ...props
   },
-  /* @__PURE__ */ React40.createElement(
+  /* @__PURE__ */ React42.createElement(
     "path",
     {
       stroke: strokeColor ?? "#000",
@@ -2614,8 +2807,8 @@ var ChevronLeft = ({
 var ChevronLeft_default = ChevronLeft;
 
 // src/icons/ChevronRight.tsx
-var React41 = __toESM(require("react"));
-var ChavronRight = ({ size, ...props }) => /* @__PURE__ */ React41.createElement(
+var React43 = __toESM(require("react"));
+var ChavronRight = ({ size, ...props }) => /* @__PURE__ */ React43.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2625,7 +2818,7 @@ var ChavronRight = ({ size, ...props }) => /* @__PURE__ */ React41.createElement
     viewBox: "0 0 24 24",
     ...props
   },
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React43.createElement(
     "path",
     {
       stroke: "#000",
@@ -2641,7 +2834,7 @@ var ChevronRight_default = ChavronRight;
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
 var import_date_fns8 = require("date-fns");
 var ProfitAndLossDatePicker = () => {
-  const { changeDateRange, dateRange } = (0, import_react34.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react35.useContext)(ProfitAndLoss.Context);
   const date = dateRange.startDate;
   const label = (0, import_date_fns8.format)(date, "LLLL y");
   const change = (duration) => {
@@ -2653,28 +2846,28 @@ var ProfitAndLossDatePicker = () => {
   };
   const previousMonth = () => change({ months: -1 });
   const nextMonth = () => change({ months: 1 });
-  return /* @__PURE__ */ import_react34.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react35.default.createElement(
     "button",
     {
       "aria-label": "View Previous Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: previousMonth
     },
-    /* @__PURE__ */ import_react34.default.createElement(
+    /* @__PURE__ */ import_react35.default.createElement(
       ChevronLeft_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
         size: 18
       }
     )
-  ), /* @__PURE__ */ import_react34.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react34.default.createElement(
+  ), /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react35.default.createElement(
     "button",
     {
       "aria-label": "View Next Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: nextMonth
     },
-    /* @__PURE__ */ import_react34.default.createElement(
+    /* @__PURE__ */ import_react35.default.createElement(
       ChevronRight_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
@@ -2685,26 +2878,26 @@ var ProfitAndLossDatePicker = () => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var ProfitAndLossSummaries = () => {
-  const { data: storedData } = (0, import_react35.useContext)(ProfitAndLoss.Context);
+  const { data: storedData } = (0, import_react36.useContext)(ProfitAndLoss.Context);
   const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
   const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
   const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
   const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Revenue"), /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries" }, /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Revenue"), /* @__PURE__ */ import_react36.default.createElement(
     "span",
     {
       className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
     },
     centsToDollars(Math.abs(data?.income?.value ?? NaN))
-  )), /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), /* @__PURE__ */ import_react35.default.createElement(
+  )), /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), /* @__PURE__ */ import_react36.default.createElement(
     "span",
     {
       className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
     },
     centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
-  )), /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), /* @__PURE__ */ import_react35.default.createElement(
+  )), /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), /* @__PURE__ */ import_react36.default.createElement(
     "span",
     {
       className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
@@ -2714,10 +2907,10 @@ var ProfitAndLossSummaries = () => {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var ProfitAndLossRow = ({
   variant,
   lineItem,
@@ -2730,7 +2923,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = (0, import_react36.useState)(true);
+  const [expanded, setExpanded] = (0, import_react37.useState)(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -2761,12 +2954,12 @@ var ProfitAndLossRow = ({
   );
   displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
   displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
-  return /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement("div", { className: labelClasses.join(" "), onClick: toggleExpanded }, /* @__PURE__ */ import_react36.default.createElement(ChevronDown_default, { size: 16 }), display_name), /* @__PURE__ */ import_react36.default.createElement("div", { className: valueClasses.join(" ") }, amountString), canGoDeeper && hasChildren && /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement("div", { className: labelClasses.join(" "), onClick: toggleExpanded }, /* @__PURE__ */ import_react37.default.createElement(ChevronDown_default, { size: 16 }), display_name), /* @__PURE__ */ import_react37.default.createElement("div", { className: valueClasses.join(" ") }, amountString), canGoDeeper && hasChildren && /* @__PURE__ */ import_react37.default.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
     },
-    /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__balance-sheet-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react36.default.createElement(
+    /* @__PURE__ */ import_react37.default.createElement("div", { className: "Layer__balance-sheet-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react37.default.createElement(
       ProfitAndLossRow,
       {
         key: line_item.display_name,
@@ -2775,7 +2968,7 @@ var ProfitAndLossRow = ({
         maxDepth,
         direction
       }
-    )), summarize && /* @__PURE__ */ import_react36.default.createElement(
+    )), summarize && /* @__PURE__ */ import_react37.default.createElement(
       ProfitAndLossRow,
       {
         key: display_name,
@@ -2838,15 +3031,15 @@ var empty_profit_and_loss_report_default = {
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
 var ProfitAndLossTable = () => {
-  const { data: actualData, isLoading } = (0, import_react37.useContext)(ProfitAndLoss.Context);
+  const { data: actualData, isLoading } = (0, import_react38.useContext)(ProfitAndLoss.Context);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
-  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement("div", { className: "Layer__profit-and-loss-table" }, /* @__PURE__ */ import_react37.default.createElement(ProfitAndLossRow, { lineItem: data.income, direction: "CREDIT" /* CREDIT */ }), /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__profit-and-loss-table" }, /* @__PURE__ */ import_react38.default.createElement(ProfitAndLossRow, { lineItem: data.income, direction: "CREDIT" /* CREDIT */ }), /* @__PURE__ */ import_react38.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
       direction: "DEBIT" /* DEBIT */
     }
-  ), /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react38.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -2856,13 +3049,13 @@ var ProfitAndLossTable = () => {
       variant: "summation",
       direction: "CREDIT" /* CREDIT */
     }
-  ), /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react38.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
       direction: "DEBIT" /* DEBIT */
     }
-  ), /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react38.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -2872,7 +3065,7 @@ var ProfitAndLossTable = () => {
       variant: "summation",
       direction: "CREDIT" /* CREDIT */
     }
-  ), /* @__PURE__ */ import_react37.default.createElement(ProfitAndLossRow, { lineItem: data.taxes, direction: "DEBIT" /* DEBIT */ }), /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react38.default.createElement(ProfitAndLossRow, { lineItem: data.taxes, direction: "DEBIT" /* DEBIT */ }), /* @__PURE__ */ import_react38.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -2882,13 +3075,13 @@ var ProfitAndLossTable = () => {
       variant: "summation",
       direction: "CREDIT" /* CREDIT */
     }
-  )), /* @__PURE__ */ import_react37.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react37.default.createElement(
+  )), /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react38.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
       direction: "DEBIT" /* DEBIT */
     }
-  ), /* @__PURE__ */ import_react37.default.createElement(
+  ), /* @__PURE__ */ import_react38.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
@@ -2899,7 +3092,7 @@ var ProfitAndLossTable = () => {
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 var import_date_fns9 = require("date-fns");
-var PNLContext = (0, import_react38.createContext)({
+var PNLContext = (0, import_react39.createContext)({
   data: void 0,
   isLoading: true,
   error: void 0,
@@ -2912,7 +3105,7 @@ var PNLContext = (0, import_react38.createContext)({
 });
 var ProfitAndLoss = ({ children }) => {
   const contextData = useProfitAndLoss();
-  return /* @__PURE__ */ import_react38.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, /* @__PURE__ */ import_react38.default.createElement("h2", { className: "Layer__profit-and-loss__title" }, "Profit & Loss"), children));
+  return /* @__PURE__ */ import_react39.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, /* @__PURE__ */ import_react39.default.createElement("h2", { className: "Layer__profit-and-loss__title" }, "Profit & Loss"), children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -2921,7 +3114,7 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/providers/LayerProvider/LayerProvider.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_date_fns10 = require("date-fns");
 var import_swr5 = __toESM(require("swr"));
 var reducer = (state, action) => {
@@ -2951,7 +3144,7 @@ var LayerProvider = ({
   appSecret,
   businessId,
   children,
-  clientId,
+  businessAccessToken,
   environment = "production",
   theme
 }) => {
@@ -2962,7 +3155,7 @@ var LayerProvider = ({
     revalidateIfStale: false
   };
   const { url, scope, apiUrl } = LayerEnvironment[environment];
-  const [state, dispatch] = (0, import_react39.useReducer)(reducer, {
+  const [state, dispatch] = (0, import_react40.useReducer)(reducer, {
     auth: {
       access_token: "",
       token_type: "",
@@ -2974,19 +3167,30 @@ var LayerProvider = ({
     apiUrl,
     theme
   });
-  const { data: auth } = (0, import_swr5.default)(
-    (0, import_date_fns10.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr5.default)(
+    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns10.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
       appSecret,
       authenticationUrl: url,
-      scope,
-      clientId
+      scope
     }),
     defaultSWRConfig
-  );
-  (0, import_react39.useEffect)(() => {
-    if (auth?.access_token) {
+  ) : { data: void 0 };
+  (0, import_react40.useEffect)(() => {
+    if (businessAccessToken) {
+      dispatch({
+        type: "LayerContext.setAuth" /* setAuth */,
+        payload: {
+          auth: {
+            access_token: businessAccessToken,
+            token_type: "Bearer",
+            expires_in: 3600,
+            expires_at: (0, import_date_fns10.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
+          }
+        }
+      });
+    } else if (auth?.access_token) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
         payload: {
@@ -2997,13 +3201,13 @@ var LayerProvider = ({
         }
       });
     }
-  }, [auth?.access_token]);
+  }, [businessAccessToken, auth?.access_token]);
   const { data: categories } = (0, import_swr5.default)(
     businessId && auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
     defaultSWRConfig
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (categories?.data?.categories?.length) {
       dispatch({
         type: "LayerContext.setCategories" /* setCategories */,
@@ -3015,11 +3219,11 @@ var LayerProvider = ({
     type: "LayerContext.setTheme" /* setTheme */,
     payload: { theme: theme2 }
   });
-  return /* @__PURE__ */ import_react39.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react39.default.createElement(LayerContext.Provider, { value: { ...state, setTheme } }, children));
+  return /* @__PURE__ */ import_react40.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react40.default.createElement(LayerContext.Provider, { value: { ...state, setTheme } }, children));
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 var import_swr6 = __toESM(require("swr"));
@@ -3039,21 +3243,21 @@ var useChartOfAccounts = () => {
 };
 
 // src/components/ChartOfAccountsNewForm/ChartOfAccountsNewForm.tsx
-var import_react40 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_react_select2 = __toESM(require("react-select"));
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.subAccounts || [])]).flat().filter((id) => id);
 var ChartOfAccountsNewForm = () => {
   const { data, create: createAccount2 } = useChartOfAccounts();
-  const accountOptions = (0, import_react40.useMemo)(
+  const accountOptions = (0, import_react41.useMemo)(
     () => flattenAccounts(data?.accounts || []).sort(
       (a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0
     ),
     [data?.accounts?.length]
   );
-  const [name, setName] = (0, import_react40.useState)("");
-  const [description, setDescription] = (0, import_react40.useState)("");
-  const [normality, setNormality] = (0, import_react40.useState)("DEBIT" /* DEBIT */);
-  const [parentAccount, setParentAccount] = (0, import_react40.useState)(
+  const [name, setName] = (0, import_react41.useState)("");
+  const [description, setDescription] = (0, import_react41.useState)("");
+  const [normality, setNormality] = (0, import_react41.useState)("DEBIT" /* DEBIT */);
+  const [parentAccount, setParentAccount] = (0, import_react41.useState)(
     data?.accounts[0]
   );
   const save = () => {
@@ -3067,21 +3271,21 @@ var ChartOfAccountsNewForm = () => {
       description
     });
   };
-  return /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Name"), /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Name"), /* @__PURE__ */ import_react41.default.createElement(
     "input",
     {
       name: "name",
       value: name,
       onChange: (event) => setName(event.target.value)
     }
-  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Description"), /* @__PURE__ */ import_react40.default.createElement(
+  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Description"), /* @__PURE__ */ import_react41.default.createElement(
     "input",
     {
       name: "description",
       value: description,
       onChange: (event) => setDescription(event.target.value)
     }
-  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Normality"), /* @__PURE__ */ import_react40.default.createElement(
+  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Normality"), /* @__PURE__ */ import_react41.default.createElement(
     import_react_select2.default,
     {
       isSearchable: false,
@@ -3091,7 +3295,7 @@ var ChartOfAccountsNewForm = () => {
         { label: "Debit", value: "DEBIT" /* DEBIT */ }
       ]
     }
-  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Parent Account"), /* @__PURE__ */ import_react40.default.createElement(
+  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Parent Account"), /* @__PURE__ */ import_react41.default.createElement(
     import_react_select2.default,
     {
       isSearchable: true,
@@ -3101,49 +3305,49 @@ var ChartOfAccountsNewForm = () => {
       getOptionValue: (a) => a.id,
       options: accountOptions
     }
-  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ import_react40.default.createElement("button", { onClick: save }, "Save")));
+  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ import_react41.default.createElement("button", { onClick: save }, "Save")));
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var ChartOfAccountsRow = ({ account, depth = 0 }) => {
-  const classNames12 = [
+  const classNames13 = [
     "Layer__chart-of-accounts-row__table-cell",
     depth > 0 && `Layer__chart-of-accounts-row__table-cell--depth-${depth}`
   ];
-  const className = classNames12.filter((id) => id).join(" ");
+  const className = classNames13.filter((id) => id).join(" ");
   const amountClassName = account.balance < 0 ? "Layer__chart-of-accounts-row__table-cell--amount-negative" : "Layer__chart-of-accounts-row__table-cell--amount-positive";
-  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--name`
     },
     account.name
-  ), /* @__PURE__ */ import_react41.default.createElement(
+  ), /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--type`
     },
     "Assets"
-  ), /* @__PURE__ */ import_react41.default.createElement(
+  ), /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--subtype`
     },
     "Cash"
-  ), /* @__PURE__ */ import_react41.default.createElement(
+  ), /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--balance ${amountClassName}`
     },
     centsToDollars(Math.abs(account.balance || 0))
-  ), /* @__PURE__ */ import_react41.default.createElement(
+  ), /* @__PURE__ */ import_react42.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--actions`
     },
-    /* @__PURE__ */ import_react41.default.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
-  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ import_react41.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
+  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ import_react42.default.createElement(
     ChartOfAccountsRow,
     {
       key: subAccount.id,
@@ -3156,15 +3360,15 @@ var ChartOfAccountsRow = ({ account, depth = 0 }) => {
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
 var ChartOfAccounts = () => {
   const { data, isLoading } = useChartOfAccounts();
-  const [showingForm, setShowingForm] = (0, import_react42.useState)(false);
-  return /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ import_react42.default.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ import_react42.default.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ import_react42.default.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ import_react42.default.createElement(
+  const [showingForm, setShowingForm] = (0, import_react43.useState)(false);
+  return /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ import_react43.default.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ import_react43.default.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ import_react43.default.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ import_react43.default.createElement(
     "button",
     {
       className: "Layer__chart-of-accounts__edit-accounts-button",
       onClick: () => setShowingForm(!showingForm)
     },
     "Edit Accounts"
-  ))), showingForm && /* @__PURE__ */ import_react42.default.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header Layer__chart-of-accounts__table-cell--header-balance" }, "Balance"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ import_react42.default.createElement(
+  ))), showingForm && /* @__PURE__ */ import_react43.default.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header Layer__chart-of-accounts__table-cell--header-balance" }, "Balance"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ import_react43.default.createElement(
     ChartOfAccountsRow,
     {
       key: account.id,