@layerfi/components 0.1.114-alpha.5 → 0.1.114

package/dist/cjs/index.cjs

@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.114-alpha.5";
+const version = "0.1.114";
 const pkg = {
   version
 };
@@ -8974,7 +8974,7 @@ function buildCustomDropdownIndicator() {
       Select$1.components.DropdownIndicator,
       __spreadProps(__spreadValues({}, restProps), {
         className: COMBO_BOX_CLASS_NAMES.DROPDOWN_INDICATOR,
-        children: !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 })
+        children: !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
       })
     );
   };
@@ -10423,7 +10423,7 @@ const BankTransactionsCategorizeAllModal = ({
   const { selectedIds } = useSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
   const [selectedCategory, setSelectedCategory] = react.useState(null);
-  const { trigger } = useBulkCategorize();
+  const { trigger, isMutating } = useBulkCategorize();
   const handleCategorizeModalClose = react.useCallback((isOpen2) => {
     onOpenChange(isOpen2);
     if (!isOpen2) {
@@ -10459,7 +10459,7 @@ const BankTransactionsCategorizeAllModal = ({
       title: mode === "Categorize" ? "Categorize all selected transactions?" : "Recategorize all selected transactions?",
       content: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: categorySelectId, children: "Select category" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { size: "sm", htmlFor: categorySelectId, children: "Select category" }),
           useCategorySelectDrawer ? /* @__PURE__ */ jsxRuntime.jsx(
             CategorySelectDrawerWithTrigger,
             {
@@ -10474,7 +10474,8 @@ const BankTransactionsCategorizeAllModal = ({
               inputId: categorySelectId,
               selectedValue: selectedCategory,
               onSelectedValueChange: setSelectedCategory,
-              includeSuggestedMatches: false
+              includeSuggestedMatches: false,
+              isDisabled: isMutating
             }
           )
         ] }),
@@ -13344,6 +13345,37 @@ const MonthPicker = ({
     ) }) })
   ] });
 };
+const NewToggleOption = ({
+  label,
+  value
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.ToggleButton, { id: value, className: "Layer__NewToggleOption", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectionIndicator, { className: "Layer__NewToggleOption-SelectionIndicator" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__NewToggle-Option-Content", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label }) })
+  ] });
+};
+const NewToggle = ({
+  options: options2,
+  selectedKey,
+  onSelectionChange
+}) => {
+  const selectedKeys = selectedKey !== void 0 ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ToggleButtonGroup,
+    {
+      className: "Layer__NewToggle",
+      selectionMode: "single",
+      selectedKeys,
+      onSelectionChange: (keys2) => {
+        const selectedKeysArray = Array.from(keys2);
+        if (selectedKeysArray.length > 0 && onSelectionChange) {
+          onSelectionChange(selectedKeysArray[0]);
+        }
+      },
+      children: options2.map((option) => /* @__PURE__ */ jsxRuntime.jsx(NewToggleOption, __spreadValues({}, option), option.value))
+    }
+  );
+};
 const SmallLoader = ({ size = 28 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -13388,169 +13420,6 @@ const SyncingComponent = ({
     }
   );
 };
-var ToggleSize = /* @__PURE__ */ ((ToggleSize2) => {
-  ToggleSize2["medium"] = "medium";
-  ToggleSize2["small"] = "small";
-  ToggleSize2["xsmall"] = "xsmall";
-  return ToggleSize2;
-})(ToggleSize || {});
-const Toggle = ({
-  name,
-  options: options2,
-  selected,
-  onChange,
-  size = "medium"
-  /* medium */
-}) => {
-  const [currentWidth, setCurrentWidth] = react.useState(0);
-  const [thumbPos, setThumbPos] = react.useState({ left: 0, width: 0 });
-  const [initialized, setInitialized] = react.useState(false);
-  const activeOption = react.useMemo(() => {
-    return selected ? selected : options2.length > 0 ? options2[0].value : void 0;
-  }, [selected, options2]);
-  const toggleRef = useElementSize((_a, _b, c) => {
-    if (c.width && (c == null ? void 0 : c.width) !== currentWidth) {
-      setCurrentWidth(c.width);
-    }
-  });
-  const baseClassName2 = classNames(
-    "Layer__toggle",
-    `Layer__toggle--${size}`,
-    initialized ? "Layer__toggle--initialized" : ""
-  );
-  const handleChange = (e) => {
-    var _a;
-    updateThumbPosition(Number((_a = e.target.getAttribute("data-idx")) != null ? _a : 0));
-    onChange(e);
-  };
-  const updateThumbPosition = (active) => {
-    if (!(toggleRef == null ? void 0 : toggleRef.current)) {
-      return;
-    }
-    const optionsNodes = [...toggleRef.current.children].map((x) => {
-      if (x.className.includes("Layer__tooltip-trigger") && x.children && x.children.length > 0) {
-        return x.children[0];
-      }
-      return x;
-    }).filter((c) => c.className.includes("Layer__toggle-option"));
-    let shift = 0;
-    let width = thumbPos.width;
-    optionsNodes.forEach((c, i) => {
-      if (i < active) {
-        shift = shift + c.offsetWidth;
-      } else if (i === active) {
-        width = c.offsetWidth;
-      }
-    });
-    shift = shift + (size === "medium" ? 2 : 1.5);
-    setThumbPos({ left: shift, width });
-  };
-  react.useEffect(() => {
-    const selectedIndex = getSelectedIndex();
-    updateThumbPosition(selectedIndex);
-    setTimeout(() => {
-      setInitialized(true);
-    }, 400);
-  }, []);
-  react.useEffect(() => {
-    const selectedIndex = getSelectedIndex();
-    updateThumbPosition(selectedIndex);
-  }, [currentWidth]);
-  const getSelectedIndex = () => {
-    const selectedIndex = options2.findIndex(
-      (option) => option.value === activeOption
-    );
-    if (selectedIndex === -1) {
-      return 0;
-    }
-    return selectedIndex;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: baseClassName2, ref: toggleRef, children: [
-    options2.map((option, index2) => {
-      var _a;
-      return /* @__PURE__ */ react.createElement(
-        ToggleOption,
-        __spreadProps(__spreadValues({}, option), {
-          size,
-          key: option.value,
-          name,
-          checked: activeOption === option.value,
-          onChange: handleChange,
-          disabled: (_a = option.disabled) != null ? _a : false,
-          disabledMessage: option.disabledMessage,
-          index: index2
-        })
-      );
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle__thumb", style: __spreadValues({}, thumbPos) })
-  ] });
-};
-const ToggleOption = ({
-  checked,
-  label,
-  name,
-  onChange,
-  value,
-  size: _size,
-  leftIcon,
-  disabled,
-  disabledMessage = "Disabled",
-  style,
-  index: index2
-}) => {
-  const optionClassName = classNames("Layer__toggle-option", {
-    "Layer__toggle-option--active": checked
-  });
-  if (disabled) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "label",
-        {
-          className: optionClassName,
-          "data-checked": checked,
-          style,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "radio",
-                checked,
-                name,
-                onChange,
-                value,
-                disabled,
-                "data-idx": index2
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
-              leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
-              /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
-            ] })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: optionClassName, "data-checked": checked, style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "radio",
-        checked,
-        name,
-        onChange,
-        value,
-        disabled,
-        "data-idx": index2
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
-      leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
-    ] })
-  ] });
-};
 var HeadingSize = /* @__PURE__ */ ((HeadingSize2) => {
   HeadingSize2["primary"] = "primary";
   HeadingSize2["secondary"] = "secondary";
@@ -13737,9 +13606,9 @@ const BankTransactionsHeader = ({
     stringOverrides == null ? void 0 : stringOverrides.header,
     withDatePicker
   ]);
-  const onCategorizationDisplayChange = (event) => {
+  const onCategorizationDisplayChange = (value) => {
     setFilters({
-      categorizationStatus: event.target.value === "categorized" ? DisplayState.categorized : event.target.value === "all" ? DisplayState.all : DisplayState.review
+      categorizationStatus: value === "categorized" ? DisplayState.categorized : value === "all" ? DisplayState.all : DisplayState.review
     });
   };
   const headerMenuActions = react.useMemo(() => {
@@ -13775,16 +13644,14 @@ const BankTransactionsHeader = ({
           ) : /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
             collapseHeader && headerTopRow,
             !categorizedOnly && categorizeView && showStatusToggle && /* @__PURE__ */ jsxRuntime.jsx(
-              Toggle,
+              NewToggle,
               {
-                name: "bank-transaction-display",
-                size: mobileComponent === "mobileList" ? ToggleSize.small : ToggleSize.medium,
                 options: [
                   { label: "To Review", value: DisplayState.review },
                   { label: "Categorized", value: DisplayState.categorized }
                 ],
-                selected: display,
-                onChange: onCategorizationDisplayChange
+                selectedKey: display,
+                onSelectionChange: onCategorizationDisplayChange
               }
             )
           ] }),
@@ -16098,6 +15965,169 @@ const MatchForm = ({
     matchFormError && /* @__PURE__ */ jsxRuntime.jsx(ErrorText, { children: matchFormError })
   ] });
 };
+var ToggleSize = /* @__PURE__ */ ((ToggleSize2) => {
+  ToggleSize2["medium"] = "medium";
+  ToggleSize2["small"] = "small";
+  ToggleSize2["xsmall"] = "xsmall";
+  return ToggleSize2;
+})(ToggleSize || {});
+const Toggle = ({
+  name,
+  options: options2,
+  selected,
+  onChange,
+  size = "medium"
+  /* medium */
+}) => {
+  const [currentWidth, setCurrentWidth] = react.useState(0);
+  const [thumbPos, setThumbPos] = react.useState({ left: 0, width: 0 });
+  const [initialized, setInitialized] = react.useState(false);
+  const activeOption = react.useMemo(() => {
+    return selected ? selected : options2.length > 0 ? options2[0].value : void 0;
+  }, [selected, options2]);
+  const toggleRef = useElementSize((_a, _b, c) => {
+    if (c.width && (c == null ? void 0 : c.width) !== currentWidth) {
+      setCurrentWidth(c.width);
+    }
+  });
+  const baseClassName2 = classNames(
+    "Layer__toggle",
+    `Layer__toggle--${size}`,
+    initialized ? "Layer__toggle--initialized" : ""
+  );
+  const handleChange = (e) => {
+    var _a;
+    updateThumbPosition(Number((_a = e.target.getAttribute("data-idx")) != null ? _a : 0));
+    onChange(e);
+  };
+  const updateThumbPosition = (active) => {
+    if (!(toggleRef == null ? void 0 : toggleRef.current)) {
+      return;
+    }
+    const optionsNodes = [...toggleRef.current.children].map((x) => {
+      if (x.className.includes("Layer__tooltip-trigger") && x.children && x.children.length > 0) {
+        return x.children[0];
+      }
+      return x;
+    }).filter((c) => c.className.includes("Layer__toggle-option"));
+    let shift = 0;
+    let width = thumbPos.width;
+    optionsNodes.forEach((c, i) => {
+      if (i < active) {
+        shift = shift + c.offsetWidth;
+      } else if (i === active) {
+        width = c.offsetWidth;
+      }
+    });
+    shift = shift + (size === "medium" ? 2 : 1.5);
+    setThumbPos({ left: shift, width });
+  };
+  react.useEffect(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+    setTimeout(() => {
+      setInitialized(true);
+    }, 400);
+  }, []);
+  react.useEffect(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+  }, [currentWidth]);
+  const getSelectedIndex = () => {
+    const selectedIndex = options2.findIndex(
+      (option) => option.value === activeOption
+    );
+    if (selectedIndex === -1) {
+      return 0;
+    }
+    return selectedIndex;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: baseClassName2, ref: toggleRef, children: [
+    options2.map((option, index2) => {
+      var _a;
+      return /* @__PURE__ */ react.createElement(
+        ToggleOption,
+        __spreadProps(__spreadValues({}, option), {
+          size,
+          key: option.value,
+          name,
+          checked: activeOption === option.value,
+          onChange: handleChange,
+          disabled: (_a = option.disabled) != null ? _a : false,
+          disabledMessage: option.disabledMessage,
+          index: index2
+        })
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle__thumb", style: __spreadValues({}, thumbPos) })
+  ] });
+};
+const ToggleOption = ({
+  checked,
+  label,
+  name,
+  onChange,
+  value,
+  size: _size,
+  leftIcon,
+  disabled,
+  disabledMessage = "Disabled",
+  style,
+  index: index2
+}) => {
+  const optionClassName = classNames("Layer__toggle-option", {
+    "Layer__toggle-option--active": checked
+  });
+  if (disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(DeprecatedTooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          className: optionClassName,
+          "data-checked": checked,
+          style,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "radio",
+                checked,
+                name,
+                onChange,
+                value,
+                disabled,
+                "data-idx": index2
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
+              leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
+              /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(DeprecatedTooltipContent, { className: "Layer__tooltip", children: disabledMessage })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: optionClassName, "data-checked": checked, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "radio",
+        checked,
+        name,
+        onChange,
+        value,
+        disabled,
+        "data-idx": index2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "Layer__toggle-option-content", children: [
+      leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__toggle-option__icon", children: leftIcon }),
+      /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label })
+    ] })
+  ] });
+};
 const GET_BANK_TRANSACTION_METADATA_TAG_KEY = "#bank-transaction-metadata";
 function buildKey$I({
   access_token: accessToken,
@@ -16131,6 +16161,24 @@ function useBankTransactionMetadata({ bankTransactionId }) {
   );
 }
 const UPDATE_BANK_TRANSACTION_METADATA_TAG_KEY = "#update-bank-transaction-metadata";
+class UpdateBankTransactionMetadataSWRResponse {
+  constructor(swrResponse) {
+    __publicField(this, "swrResponse");
+    this.swrResponse = swrResponse;
+  }
+  get data() {
+    return this.swrResponse.data;
+  }
+  get trigger() {
+    return this.swrResponse.trigger;
+  }
+  get isMutating() {
+    return this.swrResponse.isMutating;
+  }
+  get isError() {
+    return this.swrResponse.error !== void 0;
+  }
+}
 function buildKey$H({
   access_token: accessToken,
   apiUrl,
@@ -16151,7 +16199,7 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
   const { mutate } = useSWR.useSWRConfig();
-  const mutationResponse = useSWRMutation(
+  const rawMutationResponse = useSWRMutation(
     () => buildKey$H({
       access_token: auth == null ? void 0 : auth.access_token,
       apiUrl: auth == null ? void 0 : auth.apiUrl,
@@ -16177,6 +16225,7 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
       throwOnError: false
     }
   );
+  const mutationResponse = new UpdateBankTransactionMetadataSWRResponse(rawMutationResponse);
   const { trigger: originalTrigger } = mutationResponse;
   const stableProxiedTrigger = react.useCallback(
     (...triggerParameters) => __async(null, null, function* () {
@@ -16202,21 +16251,37 @@ function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   });
 }
 const useBankTransactionMemo = ({ bankTransactionId }) => {
-  const { trigger: updateBankTransactionMetadata2 } = useUpdateBankTransactionMetadata({ bankTransactionId });
-  const { data: bankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
+  const {
+    trigger: updateBankTransactionMetadata2,
+    isMutating: isUpdatingMemo,
+    isError: isErrorUpdatingMemo,
+    data: updateResult
+  } = useUpdateBankTransactionMetadata({ bankTransactionId });
+  const { data: bankTransactionMetadata, mutate: mutateBankTransactionMetadata } = useBankTransactionMetadata({ bankTransactionId });
   const form = reactForm.useForm({
     defaultValues: {
       memo: bankTransactionMetadata == null ? void 0 : bankTransactionMetadata.memo
     },
     onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
-      var _a;
+      var _a, _b;
       if (value.memo !== void 0 && form.state.isDirty) {
-        yield updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" });
-        form.reset(value);
+        const result = yield mutateBankTransactionMetadata(
+          updateBankTransactionMetadata2({ memo: (_a = value.memo) != null ? _a : "" }),
+          { optimisticData: { memo: (_b = value.memo) != null ? _b : "" }, revalidate: false }
+        );
+        if (result !== void 0) {
+          form.reset(value);
+        }
       }
     })
   });
-  return form;
+  const isSaved = !isUpdatingMemo && !isErrorUpdatingMemo && updateResult !== void 0 && !form.state.isDirty;
+  return react.useMemo(() => ({
+    form,
+    isUpdatingMemo,
+    isErrorUpdatingMemo,
+    isSaved
+  }), [form, isErrorUpdatingMemo, isUpdatingMemo, isSaved]);
 };
 const Textarea = (_Pb) => {
   var _Qb = _Pb, {
@@ -16239,24 +16304,26 @@ const Textarea = (_Pb) => {
   ] });
 };
 const BankTransactionMemo = ({ bankTransactionId }) => {
-  const form = useBankTransactionMemo({ bankTransactionId });
+  const { form, isUpdatingMemo, isErrorUpdatingMemo, isSaved } = useBankTransactionMemo({ bankTransactionId });
   return /* @__PURE__ */ jsxRuntime.jsx("form", { onBlur: () => void form.handleSubmit(), children: /* @__PURE__ */ jsxRuntime.jsx(form.Field, { name: "memo", children: (field) => {
     var _a;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      InputGroup,
-      {
-        name: "memo",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Textarea,
-          {
-            name: "memo",
-            placeholder: "Add description",
-            value: (_a = field.state.value) != null ? _a : void 0,
-            onChange: (e) => field.handleChange(e.target.value)
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "3xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "baseline", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "memo", size: "sm", weight: "bold", children: "Description" }),
+        isUpdatingMemo && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", variant: "subtle", children: "Saving..." }),
+        !isUpdatingMemo && isSaved && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", status: "success", children: "Saved" }),
+        !isUpdatingMemo && !isSaved && isErrorUpdatingMemo && /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", status: "error", children: "Error saving" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          name: "memo",
+          placeholder: "Add description",
+          value: (_a = field.state.value) != null ? _a : void 0,
+          onChange: (e) => field.handleChange(e.target.value)
+        }
+      )
+    ] });
   } }) });
 };
 const range$1 = (start, end) => {
@@ -17396,10 +17463,7 @@ function BankTransactionFormFields({
         isReadOnly
       }
     ),
-    showDescriptions && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "sm", weight: "bold", children: "Description" }),
-      /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id })
-    ] })
+    showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionMemo, { bankTransactionId: bankTransaction.id }) })
   ] });
 }
 const ExpandedBankTransactionRow = react.forwardRef(
@@ -17628,8 +17692,7 @@ const ExpandedBankTransactionRow = react.forwardRef(
                                     onSelectedValueChange: (value) => {
                                       changeCategoryForSplitAtIndex(index2, value);
                                     },
-                                    isLoading: bankTransaction.processing,
-                                    isDisabled: !categorizationEnabled,
+                                    isDisabled: !categorizationEnabled || bankTransaction.processing,
                                     includeSuggestedMatches: false
                                   }
                                 ),
@@ -17808,6 +17871,7 @@ const BankTransactionRow = ({
   const { setTransactionCategory } = useBankTransactionsCategoryActions();
   const { selectedCategory } = useGetBankTransactionCategory(bankTransaction.id);
   const { saveBankTransactionRow } = useSaveBankTransactionRow();
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   react.useEffect(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
@@ -17950,12 +18014,12 @@ const BankTransactionRow = ({
                 className: "Layer__bank-transaction__submit-btn",
                 processing: bankTransaction.processing,
                 active: open,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
                 disabled: selectedCategory === null,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+            !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "lg", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
@@ -17977,7 +18041,7 @@ const BankTransactionRow = ({
                 variant: "fade",
                 isOpen: categorizationEnabled && !categorized,
                 className: "Layer__BankTransactionRow__CategoryComboBoxMotionContent",
-                slotProps: { AnimatePresence: { mode: "wait" } },
+                slotProps: { AnimatePresence: { mode: "wait", initial: false } },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   BankTransactionCategoryComboBox,
                   {
@@ -17987,20 +18051,20 @@ const BankTransactionRow = ({
                       setTransactionCategory(bankTransaction.id, selectedCategory2);
                       setShowRetry(false);
                     },
-                    isLoading: bankTransaction.processing
+                    isDisabled: bankTransaction.processing
                   }
                 )
               },
               "category-combobox"
             ),
-            categorized && /* @__PURE__ */ jsxRuntime.jsx(
+            displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(
               BankTransactionsCategorizedSelectedValue,
               {
                 bankTransaction,
                 className: "Layer__bank-transaction-row__category"
               }
             ),
-            categorizationEnabled && !categorized && showRetry && /* @__PURE__ */ jsxRuntime.jsx(
+            !displayAsCategorized && categorizationEnabled && showRetry && /* @__PURE__ */ jsxRuntime.jsx(
               RetryButton,
               {
                 onClick: () => {
@@ -18014,7 +18078,7 @@ const BankTransactionRow = ({
                 children: "Retry"
               }
             ),
-            !categorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsxRuntime.jsx(
+            !displayAsCategorized && categorizationEnabled && !showRetry && /* @__PURE__ */ jsxRuntime.jsx(
               SubmitButton,
               {
                 onClick: () => {
@@ -18026,11 +18090,11 @@ const BankTransactionRow = ({
                 processing: bankTransaction.processing,
                 active: open,
                 disabled: selectedCategory === null,
-                action: categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
-                children: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
+                action: displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+                children: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Confirm"
               }
             ),
-            !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+            !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(VStack, { pis: "xs", fluid: true, children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
               {
@@ -18054,7 +18118,7 @@ const BankTransactionRow = ({
       {
         ref: expandedRowRef,
         bankTransaction,
-        categorized,
+        categorized: displayAsCategorized,
         isOpen: open,
         close: () => setOpen(false),
         containerWidth,
@@ -18160,6 +18224,7 @@ const BankTransactionsListItem = ({
   const bookkeepingStatus = useEffectiveBookkeepingStatus();
   const categorizationEnabled = isCategorizationEnabledForStatus(bookkeepingStatus);
   const categorized = isCategorized(bankTransaction);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const { isVisible } = useDelayedVisibility({ delay: index2 * 80 });
   const { select, deselect } = useBulkSelectionActions();
   const isSelected = useIdIsSelected();
@@ -18256,7 +18321,7 @@ const BankTransactionsListItem = ({
         }
       )
     ] }),
-    !categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
+    !categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__processing-info", children: /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "Layer__bank-transaction-list-item__expanded-row", onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedPresenceDiv, { variant: "expand", isOpen: openExpandedRow, children: /* @__PURE__ */ jsxRuntime.jsx(
       ExpandedBankTransactionRow,
       {
@@ -18264,9 +18329,9 @@ const BankTransactionsListItem = ({
         bankTransaction,
         isOpen: openExpandedRow,
         close: () => setOpenExpandedRow(false),
-        categorized,
+        categorized: displayAsCategorized,
         asListItem: true,
-        submitBtnText: categorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
+        submitBtnText: displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update" : (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve",
         containerWidth,
         showDescriptions,
         showReceiptUploads,
@@ -18274,7 +18339,7 @@ const BankTransactionsListItem = ({
         variant: "list"
       }
     ) }, `expanded-${bankTransaction.id}`) }),
-    !openExpandedRow && categorizationEnabled && !categorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
+    !openExpandedRow && categorizationEnabled && !displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: preventRowExpansion, children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { pi: "md", gap: "md", pb: "md", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         BankTransactionCategoryComboBox,
         {
@@ -18284,7 +18349,7 @@ const BankTransactionsListItem = ({
             setTransactionCategory(bankTransaction.id, selectedCategory2);
             setShowRetry(false);
           },
-          isLoading: bankTransaction.processing
+          isDisabled: bankTransaction.processing
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -18294,14 +18359,14 @@ const BankTransactionsListItem = ({
           onClick: handleSave,
           className: showRetry ? "Layer__bank-transaction__retry-btn" : "Layer__bank-transaction__submit-btn",
           processing: bankTransaction.processing,
-          action: !categorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
+          action: !displayAsCategorized ? SubmitAction.SAVE : SubmitAction.UPDATE,
           withRetry: true,
           error: showRetry ? "Approval failed. Check connection and retry in few seconds." : void 0,
-          children: showRetry ? "Retry" : !categorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
+          children: showRetry ? "Retry" : !displayAsCategorized ? (stringOverrides == null ? void 0 : stringOverrides.approveButtonText) || "Approve" : (stringOverrides == null ? void 0 : stringOverrides.updateButtonText) || "Update"
         }
       )
     ] }) }),
-    !openExpandedRow && categorized && /* @__PURE__ */ jsxRuntime.jsx(
+    !openExpandedRow && displayAsCategorized && /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionsListItemCategory,
       {
         bankTransaction
@@ -19282,37 +19347,6 @@ const BankTransactionsMobileForms = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ReceiptsProvider, { bankTransaction, isActive: isOpen, children: getContent() });
 };
-const NewToggleOption = ({
-  label,
-  value
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.ToggleButton, { id: value, className: "Layer__NewToggleOption", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectionIndicator, { className: "Layer__NewToggleOption-SelectionIndicator" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Span, { className: "Layer__NewToggle-Option-Content", children: /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: label }) })
-  ] });
-};
-const NewToggle = ({
-  options: options2,
-  selectedKey,
-  onSelectionChange
-}) => {
-  const selectedKeys = selectedKey !== void 0 ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ToggleButtonGroup,
-    {
-      className: "Layer__NewToggle",
-      selectionMode: "single",
-      selectedKeys,
-      onSelectionChange: (keys2) => {
-        const selectedKeysArray = Array.from(keys2);
-        if (selectedKeysArray.length > 0 && onSelectionChange) {
-          onSelectionChange(selectedKeysArray[0]);
-        }
-      },
-      children: options2.map((option) => /* @__PURE__ */ jsxRuntime.jsx(NewToggleOption, __spreadValues({}, option), option.value))
-    }
-  );
-};
 const PURPOSE_TOGGLE_OPTIONS = [
   {
     value: "business",
@@ -19426,6 +19460,7 @@ const BankTransactionsMobileListItem = ({
   const { shouldHideAfterCategorize } = useBankTransactionsContext();
   const categorized = isCategorized(bankTransaction);
   const itemRef = react.useRef(null);
+  const displayAsCategorized = bankTransaction.recently_categorized && shouldHideAfterCategorize() ? false : categorized;
   const [open, setOpen] = react.useState(isFirstItem);
   const openNext = () => {
     if (editable && itemRef.current && itemRef.current.nextSibling) {
@@ -19512,11 +19547,11 @@ const BankTransactionsMobileListItem = ({
   const isTransactionSelected = isSelected(bankTransaction.id);
   const { renderInAppLink } = useInAppLinkContext();
   const inAppLink = react.useMemo(() => {
-    if (!categorized) {
+    if (!displayAsCategorized) {
       return null;
     }
     return getInAppLink(bankTransaction, renderInAppLink);
-  }, [categorized, bankTransaction, renderInAppLink]);
+  }, [displayAsCategorized, bankTransaction, renderInAppLink]);
   const { isVisible } = useDelayedVisibility({ delay: index2 * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
@@ -19583,7 +19618,7 @@ const BankTransactionsMobileListItem = ({
               ]
             }
           ),
-          !open && (!categorizationEnabled && !categorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsxRuntime.jsx(
+          !open && (!categorizationEnabled && !displayAsCategorized ? /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsProcessingInfo, { showAsBadge: true }) : /* @__PURE__ */ jsxRuntime.jsx(
             BankTransactionsListItemCategory,
             {
               bankTransaction,