@layerfi/components 0.1.102-alpha.1 → 0.1.102-alpha.2

package/dist/cjs/index.cjs

@@ -5602,7 +5602,7 @@ var import_react18 = require("react");
 var import_react16 = require("react");
 
 // package.json
-var version = "0.1.102-alpha.1";
+var version = "0.1.102-alpha.2";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -10448,7 +10448,7 @@ var OnboardingContent = ({
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/components/Loader/Loader.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -10473,7 +10473,7 @@ var SmallLoader = ({ size = 28 }) => {
 };
 
 // src/components/LinkedAccounts/LinkedAccountsContent.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/icons/PlusIcon.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -11347,7 +11347,7 @@ var LinkedAccountItemThumb = ({
 var import_classnames24 = __toESM(require("classnames"));
 
 // src/components/LinkedAccounts/ConfirmationModal/LinkedAccountsConfirmationModal.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/components/ui/Modal/Modal.tsx
 var import_react38 = require("react");
@@ -11533,20 +11533,34 @@ function ModalActions({ children }) {
 }
 
 // src/components/ui/Stack/Stack.tsx
+var import_react42 = require("react");
 var import_classnames22 = __toESM(require("classnames"));
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var CLASS_NAME2 = "Layer__Stack";
-function Stack(_a) {
-  var _b = _a, { align, children, direction, gap, justify, pbs, pbe, pis, pie, fluid, className } = _b, restProps = __objRest(_b, ["align", "children", "direction", "gap", "justify", "pbs", "pbe", "pis", "pie", "fluid", "className"]);
-  const dataProperties = toDataProperties({ align, direction, gap, justify, pbs, pbe, pis, pie, fluid });
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: (0, import_classnames22.default)(CLASS_NAME2, className), children }));
-}
-function VStack(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Stack, __spreadProps(__spreadValues({}, props), { direction: "column" }));
-}
-function HStack(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Stack, __spreadProps(__spreadValues({}, props), { direction: "row" }));
-}
+var Stack = (0, import_react42.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { align, children, direction, gap, justify, pbs, pbe, pis, pie, fluid, className } = _b, restProps = __objRest(_b, ["align", "children", "direction", "gap", "justify", "pbs", "pbe", "pis", "pie", "fluid", "className"]);
+    const dataProperties = toDataProperties({ align, direction, gap, justify, pbs, pbe, pis, pie, fluid });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      "div",
+      __spreadProps(__spreadValues(__spreadValues({
+        ref
+      }, restProps), dataProperties), {
+        className: (0, import_classnames22.default)(CLASS_NAME2, className),
+        children
+      })
+    );
+  }
+);
+Stack.displayName = "Stack";
+var VStack = (0, import_react42.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "column" }));
+});
+VStack.displayName = "VStack";
+var HStack = (0, import_react42.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Stack, __spreadProps(__spreadValues({}, props), { ref, direction: "row" }));
+});
+HStack.displayName = "HStack";
 var Spacer = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "Layer__Spacer" });
 
 // src/components/utility/ConditionalList.tsx
@@ -11576,14 +11590,14 @@ function ConditionalList({
 
 // src/components/ui/Checkbox/Checkbox.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_react_aria_components8 = require("react-aria-components");
 var import_classnames23 = __toESM(require("classnames"));
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var CLASS_NAME3 = "Layer__Checkbox";
 function Checkbox(_a) {
   var _b = _a, { children, className, variant = "default", size = "md" } = _b, props = __objRest(_b, ["children", "className", "variant", "size"]);
-  const dataProperties = (0, import_react42.useMemo)(() => toDataProperties({
+  const dataProperties = (0, import_react43.useMemo)(() => toDataProperties({
     size,
     variant,
     labeled: typeof children === "string" && children.length > 0
@@ -11803,7 +11817,7 @@ function LinkedAccountsConfirmationModalPreloadedContent({ onClose }) {
 }
 function LinkedAccountsConfirmationModalContent({ onClose }) {
   const { accounts, onFinish, refetchAccounts } = useLinkedAccountsConfirmationModal();
-  const [formState, setFormState] = (0, import_react43.useState)(() => Object.fromEntries(
+  const [formState, setFormState] = (0, import_react44.useState)(() => Object.fromEntries(
     accounts.map(({ id }) => [id, true])
   ));
   const { trigger, isMutating, error } = useConfirmAndExcludeMultiple({ onSuccess: refetchAccounts });
@@ -11875,7 +11889,7 @@ var LinkedAccountsContent = ({
   showUnlinkItem,
   showBreakConnection
 }) => {
-  const { data, addConnection } = (0, import_react44.useContext)(LinkedAccountsContext);
+  const { data, addConnection } = (0, import_react45.useContext)(LinkedAccountsContext);
   const linkedAccountsNewAccountClassName = (0, import_classnames24.default)(
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget",
@@ -11916,7 +11930,7 @@ var LinkedAccountsContent = ({
 };
 
 // src/components/LinkedAccounts/OpeningBalanceModal/OpeningBalanceModal.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/utils/business.ts
 var import_date_fns6 = require("date-fns");
@@ -11949,7 +11963,7 @@ var isDateAllowedToBrowse = (date, business) => {
 };
 
 // src/components/LinkedAccounts/AccountFormBox/AccountFormBox.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/Input/Input.tsx
 var import_classnames25 = __toESM(require("classnames"));
@@ -12012,7 +12026,7 @@ var InputGroup = ({
 };
 
 // src/components/Input/FileInput.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/icons/UploadCloud.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
@@ -12081,7 +12095,7 @@ var FileInput = ({
   icon,
   allowMultipleUploads = false
 }) => {
-  const hiddenFileInput = (0, import_react45.useRef)(null);
+  const hiddenFileInput = (0, import_react46.useRef)(null);
   const onClick = () => {
     if (hiddenFileInput.current) {
       hiddenFileInput.current.click();
@@ -12134,7 +12148,7 @@ var FileInput = ({
 };
 
 // src/components/Input/Select.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_react_select = __toESM(require("react-select"));
 
 // src/icons/ChevronDownFill.tsx
@@ -12189,7 +12203,7 @@ var Select = ({
     isInvalid ? "Layer__select--error" : "",
     className
   );
-  const DropdownIndicator2 = (0, import_react46.useCallback)((props) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react_select.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChevronDownFill_default, {}) })), []);
+  const DropdownIndicator2 = (0, import_react47.useCallback)((props) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react_select.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChevronDownFill_default, {}) })), []);
   return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       import_react_select.default,
@@ -12216,42 +12230,9 @@ var Select = ({
 // src/components/Input/InputWithBadge.tsx
 var import_classnames28 = __toESM(require("classnames"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
-var InputWithBadge = (_a) => {
-  var _b = _a, {
-    className,
-    isInvalid,
-    errorMessage,
-    leftText,
-    badge,
-    variant = "default" /* DEFAULT */
-  } = _b, props = __objRest(_b, [
-    "className",
-    "isInvalid",
-    "errorMessage",
-    "leftText",
-    "badge",
-    "variant"
-  ]);
-  const baseClassName = (0, import_classnames28.default)(
-    "Layer__input",
-    isInvalid ? "Layer__input--error" : "",
-    leftText ? "Layer__input--with-left-text" : "",
-    className
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(TooltipTrigger, { className: "Layer__input-tooltip", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "Layer__input-with-badge", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("input", __spreadProps(__spreadValues({}, props), { className: baseClassName })),
-        badge && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Badge, { variant, children: badge })
-      ] }),
-      leftText && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "Layer__input-left-text", children: leftText })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
-  ] });
-};
 
 // src/components/Input/MultiSelect.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_react_select2 = __toESM(require("react-select"));
 var import_classnames29 = __toESM(require("classnames"));
 var import_jsx_runtime85 = require("react/jsx-runtime");
@@ -12276,7 +12257,7 @@ var MultiSelect = ({
     isInvalid ? "Layer__select--error" : "",
     className
   );
-  const DropdownIndicator2 = (0, import_react47.useCallback)((props) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react_select2.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChevronDownFill_default, {}) })), []);
+  const DropdownIndicator2 = (0, import_react48.useCallback)((props) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_react_select2.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ChevronDownFill_default, {}) })), []);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_react_select2.default,
@@ -12315,6 +12296,7 @@ var AmountInput = (_a) => {
     leftText,
     errorMessage,
     isInvalid,
+    badge,
     placeholder = "$0.00"
   } = _b, props = __objRest(_b, [
     "onChange",
@@ -12322,30 +12304,38 @@ var AmountInput = (_a) => {
     "leftText",
     "errorMessage",
     "isInvalid",
+    "badge",
     "placeholder"
   ]);
   const baseClassName = (0, import_classnames30.default)(
     "Layer__input Layer__amount-input",
+    badge ? "Layer__amount-input--align-left" : "Layer__amount-input--align-right",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
     className
   );
+  const currencyInput = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    import_react_currency_input_field.default,
+    __spreadProps(__spreadValues({}, props), {
+      intlConfig: {
+        locale: "en-US",
+        currency: "USD"
+      },
+      prefix: "$",
+      placeholder,
+      decimalScale: 2,
+      decimalsLimit: 2,
+      disableAbbreviations: true,
+      onValueChange: onChange,
+      className: baseClassName
+    })
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(TooltipTrigger, { className: "Layer__input-tooltip", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-        import_react_currency_input_field.default,
-        __spreadProps(__spreadValues({}, props), {
-          intlConfig: {
-            locale: "en-US",
-            currency: "USD"
-          },
-          prefix: "$",
-          placeholder,
-          decimalsLimit: 2,
-          onValueChange: onChange,
-          className: baseClassName
-        })
-      ),
+      badge ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "Layer__input-with-badge", children: [
+        currencyInput,
+        badge
+      ] }) : currencyInput,
       leftText && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "Layer__input-left-text", children: leftText })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TooltipContent, { className: "Layer__tooltip", children: errorMessage })
@@ -12353,7 +12343,7 @@ var AmountInput = (_a) => {
 };
 
 // src/components/DatePicker/DatePicker.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var RDP = __toESM(require("react-datepicker"));
 
 // src/icons/ChevronLeft.tsx
@@ -12524,8 +12514,8 @@ var DatePicker = (_a) => {
     "slots"
   ]);
   const { ModeSelector } = slots != null ? slots : {};
-  const pickerRef = (0, import_react48.useRef)(null);
-  const pickerMode = (0, import_react48.useMemo)(() => {
+  const pickerRef = (0, import_react49.useRef)(null);
+  const pickerMode = (0, import_react49.useMemo)(() => {
     var _a2;
     if (!allowedModes) {
       return displayMode;
@@ -12538,7 +12528,7 @@ var DatePicker = (_a) => {
     }
     return (_a2 = allowedModes[0]) != null ? _a2 : displayMode;
   }, [displayMode, allowedModes]);
-  const [firstDate, secondDate] = (0, import_react48.useMemo)(() => {
+  const [firstDate, secondDate] = (0, import_react49.useMemo)(() => {
     if (selected instanceof Date) {
       return [selected, null];
     }
@@ -12567,8 +12557,8 @@ var DatePicker = (_a) => {
     displayMode === "timePicker" && "Layer__datepicker__time__popper",
     popperClassName
   );
-  const [internalStart, setInternalStart] = (0, import_react48.useState)(null);
-  const [internalEnd, setInternalEnd] = (0, import_react48.useState)(null);
+  const [internalStart, setInternalStart] = (0, import_react49.useState)(null);
+  const [internalEnd, setInternalEnd] = (0, import_react49.useState)(null);
   const isMidSelection = internalStart !== null && internalEnd === null;
   const handleDateChange = (selectedDate) => {
     if (selectedDate instanceof Date) {
@@ -12623,7 +12613,7 @@ var DatePicker = (_a) => {
         break;
     }
   };
-  const isTodayOrAfter = (0, import_react48.useMemo)(() => {
+  const isTodayOrAfter = (0, import_react49.useMemo)(() => {
     switch (displayMode) {
       case "dayPicker":
         return firstDate >= (0, import_date_fns8.endOfDay)(/* @__PURE__ */ new Date()) || maxDate && firstDate >= maxDate;
@@ -12803,7 +12793,7 @@ var AccountFormBox = ({
   errors = []
 }) => {
   var _a, _b, _c, _d, _e;
-  const dataProps = (0, import_react49.useMemo)(() => toDataProperties({
+  const dataProps = (0, import_react50.useMemo)(() => toDataProperties({
     saved: isSaved,
     confirmed: value.isConfirmed
   }), [isSaved, value.isConfirmed]);
@@ -13015,10 +13005,14 @@ var humanizeEnum = (text) => {
 };
 var convertNumberToCurrency = (amount) => {
   if (typeof amount !== "number" || isNaN(amount)) return "";
-  const formattedValue = amount.toLocaleString("en-US");
-  return formattedValue.length > 0 ? `$${formattedValue}` : "";
+  const formattedValue = amount.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  return formattedValue;
 };
-var convertCurrencyToNumber = (amount) => amount.replace("$", "").replace(",", "").replace(/[^\d.]/g, "").replace(/(?!^)-/g, "").replace(/(\..*)\./g, "$1").replace(/(\.\d{2})\d+/, "$1").replace(/^0(?!\.)/, "");
 var convertToCents = (amount) => {
   try {
     if (amount === void 0 || amount === null) {
@@ -13090,9 +13084,9 @@ function LinkedAccountsOpeningBalanceModalContent({
   var _a, _b;
   const { business } = useLayerContext();
   const { refetchAccounts } = useLinkedAccounts();
-  const [touched, setTouched] = (0, import_react50.useState)(false);
-  const [results, setResults] = (0, import_react50.useState)({});
-  const [formsData, setFormsData] = (0, import_react50.useState)(accounts.map((item) => {
+  const [touched, setTouched] = (0, import_react51.useState)(false);
+  const [results, setResults] = (0, import_react51.useState)({});
+  const [formsData, setFormsData] = (0, import_react51.useState)(accounts.map((item) => {
     var _a2;
     return {
       account: item,
@@ -13100,7 +13094,7 @@ function LinkedAccountsOpeningBalanceModalContent({
       openingDate: (_a2 = getActivationDate(business)) != null ? _a2 : (0, import_date_fns11.startOfYear)(/* @__PURE__ */ new Date())
     };
   }));
-  const formsDataToSave = (0, import_react50.useMemo)(
+  const formsDataToSave = (0, import_react51.useMemo)(
     () => ignoreAlreadySaved(formsData, results),
     [formsData, results]
   );
@@ -13167,7 +13161,7 @@ function OpeningBalanceModal({
   const {
     accountsToAddOpeningBalanceInModal,
     setAccountsToAddOpeningBalanceInModal
-  } = (0, import_react50.useContext)(LinkedAccountsContext);
+  } = (0, import_react51.useContext)(LinkedAccountsContext);
   const shouldShowModal = Boolean(accountsToAddOpeningBalanceInModal.length);
   if (!shouldShowModal) {
     return null;
@@ -13214,7 +13208,7 @@ var LinkedAccountsComponent = ({
     error,
     isValidating,
     refetchAccounts
-  } = (0, import_react51.useContext)(LinkedAccountsContext);
+  } = (0, import_react52.useContext)(LinkedAccountsContext);
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Container, { name: COMPONENT_NAME, elevated, children: [
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Header, { className: "Layer__linked-accounts__header", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       Heading,
@@ -13252,33 +13246,33 @@ var LinkedAccountsComponent = ({
 var import_react62 = require("react");
 
 // src/components/Wizard/Wizard.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 function useWizardStep({
   steps,
   onComplete
 }) {
   const stepCount = steps.length;
-  const [activeStepIndex, setActiveStepIndex] = (0, import_react52.useState)(0);
-  const next = (0, import_react52.useCallback)(() => __async(null, null, function* () {
+  const [activeStepIndex, setActiveStepIndex] = (0, import_react53.useState)(0);
+  const next = (0, import_react53.useCallback)(() => __async(null, null, function* () {
     setActiveStepIndex((stepIndex) => Math.min(stepIndex + 1, stepCount - 1));
     if (activeStepIndex === stepCount - 1 && onComplete) {
       yield onComplete == null ? void 0 : onComplete();
     }
   }), [stepCount, activeStepIndex, onComplete]);
-  const previous = (0, import_react52.useCallback)(() => setActiveStepIndex((stepIndex) => Math.max(stepIndex - 1, 0)), []);
+  const previous = (0, import_react53.useCallback)(() => setActiveStepIndex((stepIndex) => Math.max(stepIndex - 1, 0)), []);
   const effectiveStepIndex = Math.min(activeStepIndex, stepCount - 1);
   const currentStep = steps.at(effectiveStepIndex);
   return { currentStep, next, previous };
 }
-var WizardContext = (0, import_react52.createContext)({
+var WizardContext = (0, import_react53.createContext)({
   next: () => {
   },
   previous: () => {
   }
 });
 function useWizard() {
-  return (0, import_react52.useContext)(WizardContext);
+  return (0, import_react53.useContext)(WizardContext);
 }
 function Wizard({
   Header: Header4,
@@ -13286,12 +13280,12 @@ function Wizard({
   onComplete,
   children
 }) {
-  const childrenArray = import_react52.Children.toArray(children);
+  const childrenArray = import_react53.Children.toArray(children);
   const { currentStep, next, previous } = useWizardStep({
     steps: childrenArray,
     onComplete
   });
-  const value = (0, import_react52.useMemo)(() => ({ next, previous }), [next, previous]);
+  const value = (0, import_react53.useMemo)(() => ({ next, previous }), [next, previous]);
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(WizardContext.Provider, { value, children: [
     Header4,
     currentStep,
@@ -13300,7 +13294,7 @@ function Wizard({
 }
 
 // src/components/UploadTransactions/UploadTransactionsUploadCsvStep.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 
 // src/hooks/customAccounts/useCustomAccounts.ts
 var import_swr8 = __toESM(require("swr"));
@@ -13355,7 +13349,7 @@ function useCustomAccounts() {
 }
 
 // src/components/Input/CreatableSelect.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_react_select3 = require("react-select");
 var import_creatable = __toESM(require("react-select/creatable"));
 var import_classnames32 = __toESM(require("classnames"));
@@ -13383,7 +13377,7 @@ var CreatableSelect = ({
     isInvalid ? "Layer__select--error" : "",
     className
   );
-  const DropdownIndicator2 = (0, import_react53.useCallback)((props) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_select3.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ChevronDownFill_default, {}) })), []);
+  const DropdownIndicator2 = (0, import_react54.useCallback)((props) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_select3.components.DropdownIndicator, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ChevronDownFill_default, {}) })), []);
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Tooltip, { disabled: !isInvalid || !errorMessage, children: [
     /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(TooltipTrigger, { className: "Layer__input-tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_creatable.default,
@@ -13413,7 +13407,7 @@ var CreatableSelect = ({
 };
 
 // src/components/CustomAccountForm/CustomAccountForm.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/utils/form.ts
 var notEmpty = (value) => {
@@ -13430,11 +13424,11 @@ var validateEmailFormat = (email, required = false) => {
 };
 
 // src/components/CustomAccountForm/useCustomAccountForm.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_react_form = require("@tanstack/react-form");
 
 // src/hooks/customAccounts/useCreateCustomAccount.ts
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_mutation5 = __toESM(require("swr/mutation"));
 var import_swr9 = require("swr");
 var createCustomAccount = post(({ businessId }) => `/v1/businesses/${businessId}/custom-accounts`);
@@ -13473,7 +13467,7 @@ function useCreateCustomAccount() {
     }
   );
   const { trigger: originalTrigger } = mutationResponse;
-  const stableProxiedTrigger = (0, import_react54.useCallback)(
+  const stableProxiedTrigger = (0, import_react55.useCallback)(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
       void mutate((key) => withSWRKeyTags(
@@ -13513,7 +13507,7 @@ var getCustomAccountTypeFromSubtype = (subtype) => {
   }
 };
 var useCustomAccountForm = ({ onSuccess }) => {
-  const [submitError, setSubmitError] = (0, import_react55.useState)(void 0);
+  const [submitError, setSubmitError] = (0, import_react56.useState)(void 0);
   const { trigger: createCustomAccount2 } = useCreateCustomAccount();
   const form = (0, import_react_form.useForm)({
     defaultValues: {
@@ -13554,12 +13548,12 @@ var accountTypeOptions = [
 var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
   const { form, submitError, isFormValid } = useCustomAccountForm({ onSuccess });
   const { isSubmitting } = form.state;
-  const onSubmit = (0, import_react56.useCallback)((e) => {
+  const onSubmit = (0, import_react57.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     void form.handleSubmit();
   }, [form]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     form.setFieldValue("account_name", initialAccountName);
   }, [form, initialAccountName]);
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
@@ -13631,7 +13625,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
           submitError && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ErrorText, { pb: "xs", children: submitError }),
           /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Spacer, {}),
           onCancel && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button, { type: "button", variant: "secondary" /* secondary */, onClick: onCancel, children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SubmitButton, { type: "submit", processing: isSubmitting, noIcon: !isSubmitting, withRetry: true, error: submitError, children: "Submit" })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SubmitButton, { type: "submit", processing: isSubmitting, noIcon: !isSubmitting, withRetry: true, error: submitError, children: submitError ? "Retry" : "Submit" })
         ] })
       ] })
     }
@@ -13639,7 +13633,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
 };
 
 // src/components/CsvUpload/CsvUpload.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_classnames33 = __toESM(require("classnames"));
 var import_lucide_react5 = require("lucide-react");
@@ -13682,8 +13676,8 @@ var FileRow = ({ file, onClearFile, asDropTarget }) => {
   ] });
 };
 var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
-  const [errorMessage, setErrorMessage] = (0, import_react57.useState)();
-  const fileInputRef = (0, import_react57.useRef)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react58.useState)();
+  const fileInputRef = (0, import_react58.useRef)(null);
   const handleBrowseClick = (e) => {
     var _a;
     e.preventDefault();
@@ -13695,7 +13689,7 @@ var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
     const fileArray = Array.from(files);
     onDrop(fileArray);
   };
-  const onDrop = (0, import_react57.useCallback)(
+  const onDrop = (0, import_react58.useCallback)(
     ([firstFile, ...restFiles], rejections = []) => {
       const hasTooManyFiles = rejections.some((r) => r.errors.some((e) => e.code === "too-many-files"));
       if (restFiles.length > 0 || hasTooManyFiles) {
@@ -13907,38 +13901,38 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
   var _a;
   const { data: customAccounts, isLoading: isLoadingCustomAccounts, error: customAccountsError } = useCustomAccounts();
   const { trigger: parseCsv2, isMutating: isParsingCsv } = useCustomAccountParseCsv();
-  const [hasParseCsvError, setHasParseCsvError] = (0, import_react58.useState)(false);
-  const accountOptions = (0, import_react58.useMemo)(() => {
+  const [hasParseCsvError, setHasParseCsvError] = (0, import_react59.useState)(false);
+  const accountOptions = (0, import_react59.useMemo)(() => {
     if (!customAccounts) return [];
     return customAccounts.map((account) => ({
       value: account.id,
       label: account.accountName
     }));
   }, [customAccounts]);
-  const onChange = (0, import_react58.useCallback)((option) => {
+  const onChange = (0, import_react59.useCallback)((option) => {
     onSelectAccount(option);
   }, [onSelectAccount]);
-  const onCreateOption = (0, import_react58.useCallback)((inputValue) => {
+  const onCreateOption = (0, import_react59.useCallback)((inputValue) => {
     onSelectAccount({
       value: "new_account",
       label: "Create new account",
       createdAccountName: inputValue
     });
   }, [onSelectAccount]);
-  const onCancelCreateAccount = (0, import_react58.useCallback)(() => {
+  const onCancelCreateAccount = (0, import_react59.useCallback)(() => {
     onSelectAccount(null);
   }, [onSelectAccount]);
-  const onCreateAccountSuccess = (0, import_react58.useCallback)((account) => {
+  const onCreateAccountSuccess = (0, import_react59.useCallback)((account) => {
     onSelectAccount({
       value: account.id,
       label: account.accountName
     });
   }, [onSelectAccount]);
-  const onFileSelected = (0, import_react58.useCallback)((file) => {
+  const onFileSelected = (0, import_react59.useCallback)((file) => {
     setHasParseCsvError(false);
     onSelectFile(file);
   }, [onSelectFile]);
-  const onClickContinue = (0, import_react58.useCallback)(() => {
+  const onClickContinue = (0, import_react59.useCallback)(() => {
     if (!selectedAccount || selectedAccount.value === "new_account" || !selectedFile) return;
     void parseCsv2({
       customAccountId: selectedAccount.value,
@@ -13953,6 +13947,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
     "Layer__upload-transactions__select-account-name-input",
     !!customAccountsError && "Layer__upload-transactions__select-account-name-input--error"
   );
+  const hasSelectedAccount = selectedAccount && selectedAccount.value !== "new_account";
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(VStack, { gap: "lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(HStack, { fluid: true, align: "center", gap: "lg", className: "Layer__upload-transactions__select-account-name-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Label, { htmlFor: "account_name", children: "Account name" }),
@@ -13977,7 +13972,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
     selectedAccount && selectedAccount.value === "new_account" && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(VStack, { className: "Layer__upload-transactions__create-account-form", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       CustomAccountForm,
       {
-        initialAccountName: (_a = selectedAccount == null ? void 0 : selectedAccount.createdAccountName) != null ? _a : "",
+        initialAccountName: (_a = selectedAccount.createdAccountName) != null ? _a : "",
         onCancel: onCancelCreateAccount,
         onSuccess: onCreateAccountSuccess
       }
@@ -14005,8 +14000,8 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
       /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
         SubmitButton,
         {
-          tooltip: selectedFile && (!selectedAccount || selectedAccount.value === "new_account") ? "Select an account" : null,
-          disabled: !selectedAccount || selectedAccount.value === "new_account" || !selectedFile,
+          tooltip: selectedFile && !hasSelectedAccount ? "Select an account" : null,
+          disabled: !hasSelectedAccount || !selectedFile,
           processing: isParsingCsv,
           error: hasParseCsvError,
           onClick: onClickContinue,
@@ -14024,9 +14019,7 @@ var import_react61 = require("react");
 var import_lucide_react8 = require("lucide-react");
 
 // src/hooks/customAccounts/useCreateCustomAccountTransactions.ts
-var import_react59 = require("react");
 var import_mutation7 = __toESM(require("swr/mutation"));
-var import_swr10 = require("swr");
 var createCustomAccountTransactions = post(({ businessId, customAccountId }) => `/v1/businesses/${businessId}/custom-accounts/${customAccountId}/transactions`);
 function buildKey11({
   access_token: accessToken,
@@ -14045,8 +14038,7 @@ function buildKey11({
 function useCreateCustomAccountTransactions() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr10.useSWRConfig)();
-  const mutationResponse = (0, import_mutation7.default)(
+  return (0, import_mutation7.default)(
     () => buildKey11(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
@@ -14069,29 +14061,6 @@ function useCreateCustomAccountTransactions() {
       throwOnError: false
     }
   );
-  const { trigger: originalTrigger } = mutationResponse;
-  const stableProxiedTrigger = (0, import_react59.useCallback)(
-    (...triggerParameters) => __async(null, null, function* () {
-      const triggerResult = yield originalTrigger(...triggerParameters);
-      void mutate((key) => withSWRKeyTags(
-        key,
-        (tags) => tags.includes(BANK_TRANSACTIONS_TAG_KEY)
-      ));
-      return triggerResult;
-    }),
-    [
-      originalTrigger,
-      mutate
-    ]
-  );
-  return new Proxy(mutationResponse, {
-    get(target, prop) {
-      if (prop === "trigger") {
-        return stableProxiedTrigger;
-      }
-      return Reflect.get(target, prop);
-    }
-  });
 }
 
 // src/components/CsvUpload/ValidateCsvTable.tsx
@@ -14157,7 +14126,6 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
     getSortedRowModel: (0, import_react_table.getSortedRowModel)()
   });
-  const tableContainerRef = (0, import_react60.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: `${className} Layer__csv-upload__validate-csv-table__container`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("table", { className: "Layer__table", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("thead", { className: "Layer__csv-upload__validate-csv-table__thead", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("tr", { className: "Layer__csv-upload__validate-csv-table__header-row", children: headerGroup.headers.map((header) => {
       const headerCellClassName = (0, import_classnames35.default)(
@@ -14167,19 +14135,20 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
       );
       return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("th", { className: headerCellClassName, children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }, header.id);
     }) }, headerGroup.id)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { ref: tableContainerRef, className: "Layer__csv-upload__validate-csv-table__scroll_container", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("table", { className: "Layer__table", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(ValidateCsvTableBody, { table, tableContainerRef }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(ValidateCsvTableBody, { table })
   ] });
 }
-function ValidateCsvTableBody({ table, tableContainerRef }) {
+function ValidateCsvTableBody({ table }) {
   const { rows } = table.getRowModel();
+  const containerRef = (0, import_react60.useRef)(null);
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rows.length,
     estimateSize: () => ROW_HEIGHT,
-    getScrollElement: () => tableContainerRef.current,
+    getScrollElement: () => containerRef.current,
     measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? (element) => element == null ? void 0 : element.getBoundingClientRect().height : void 0,
     overscan: 5
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("tbody", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { ref: containerRef, className: "Layer__csv-upload__validate-csv-table__scroll_container", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("table", { className: "Layer__table", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("tbody", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("tr", { style: { height: BODY_HEIGHT }, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("td", { style: { height: BODY_HEIGHT, padding: 0 }, colSpan: table.getAllColumns().length - 1 }) }),
     rowVirtualizer.getVirtualItems().map((virtualRow) => {
       const row = rows[virtualRow.index];
@@ -14193,7 +14162,7 @@ function ValidateCsvTableBody({ table, tableContainerRef }) {
         row.id
       );
     })
-  ] });
+  ] }) }) });
 }
 function ValidateCsvTableRow({ row, virtualRow, rowVirtualizer }) {
   const tableRowClassName = (0, import_classnames35.default)(
@@ -14273,7 +14242,7 @@ function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId
           onClick: onClickUploadTransactions,
           action: "upload" /* UPLOAD */,
           withRetry: true,
-          children: "Upload transactions"
+          children: uploadTransactionsError ? "Retry" : "Upload transactions"
         }
       )
     ] })
@@ -14295,17 +14264,18 @@ function UploadTransactions({ onComplete }) {
     setFile(file2);
     setParseCsvResponse(null);
   }, []);
-  const goBack = (0, import_react62.useCallback)((step = 1) => setCurrentStep(currentStep - step), [currentStep]);
-  const goForward = (0, import_react62.useCallback)((step = 1) => setCurrentStep(currentStep + step), [currentStep]);
   const onParseCsv = (0, import_react62.useCallback)((parseCsvResponse2) => {
     setParseCsvResponse(parseCsvResponse2);
-    goForward();
-  }, [goForward]);
+    setCurrentStep(1 /* ValidateCsv */);
+  }, []);
+  const goRestartFlow = (0, import_react62.useCallback)(() => {
+    setCurrentStep(0 /* UploadCsv */);
+  }, []);
   const onReupload = (0, import_react62.useCallback)(() => {
     setFile(null);
     setParseCsvResponse(null);
-    goBack();
-  }, [goBack]);
+    setCurrentStep(0 /* UploadCsv */);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("section", { className: "Layer__component", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
     Wizard,
     {
@@ -14341,7 +14311,7 @@ function UploadTransactions({ onComplete }) {
           {
             selectedAccountId: selectedAccount.value,
             parseCsvResponse,
-            onGoBack: goBack,
+            onGoBack: goRestartFlow,
             onReupload
           }
         )
@@ -14897,7 +14867,7 @@ var getAssignedValue = (bankTransaction) => {
 };
 
 // src/hooks/categories/useCategories.ts
-var import_swr11 = __toESM(require("swr"));
+var import_swr10 = __toESM(require("swr"));
 var CATEGORIES_TAG_KEY = "#categories";
 function buildKey12({
   access_token: accessToken,
@@ -14918,7 +14888,7 @@ function buildKey12({
 function useCategories({ mode } = {}) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  return (0, import_swr11.default)(
+  return (0, import_swr10.default)(
     () => buildKey12(__spreadProps(__spreadValues({}, auth), {
       businessId,
       mode
@@ -15785,7 +15755,7 @@ var BankTransactionReceipts = (0, import_react69.forwardRef)(
 BankTransactionReceipts.displayName = "BankTransactionReceipts";
 
 // src/hooks/bookkeeping/useBookkeepingStatus.ts
-var import_swr12 = __toESM(require("swr"));
+var import_swr11 = __toESM(require("swr"));
 
 // src/providers/LegacyModeProvider/LegacyModeProvider.tsx
 var import_react70 = require("react");
@@ -15844,7 +15814,7 @@ function buildKey13({
 function useBookkeepingStatus() {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  return (0, import_swr12.default)(
+  return (0, import_swr11.default)(
     () => buildKey13(__spreadProps(__spreadValues({}, auth), {
       businessId
     })),
@@ -16415,7 +16385,7 @@ var Textarea = (_a) => {
 var import_react_form2 = require("@tanstack/react-form");
 
 // src/hooks/useBankTransactions/useBankTransactionsMetadata.ts
-var import_swr13 = __toESM(require("swr"));
+var import_swr12 = __toESM(require("swr"));
 var GET_BANK_TRANSACTION_METADATA_TAG_KEY = "#bank-transaction-metadata";
 function buildKey14({
   access_token: accessToken,
@@ -16436,7 +16406,7 @@ function buildKey14({
 function useBankTransactionMetadata({ bankTransactionId }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  return (0, import_swr13.default)(
+  return (0, import_swr12.default)(
     () => buildKey14(__spreadProps(__spreadValues({}, auth), {
       businessId,
       bankTransactionId
@@ -16451,7 +16421,7 @@ function useBankTransactionMetadata({ bankTransactionId }) {
 
 // src/hooks/useBankTransactions/useUpdateBankTransactionMetadata.ts
 var import_mutation8 = __toESM(require("swr/mutation"));
-var import_swr14 = require("swr");
+var import_swr13 = require("swr");
 var import_react74 = require("react");
 var UPDATE_BANK_TRANSACTION_METADATA_TAG_KEY = "#update-bank-transaction-metadata";
 function buildKey15({
@@ -16473,7 +16443,7 @@ function buildKey15({
 function useUpdateBankTransactionMetadata({ bankTransactionId, onSuccess }) {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr14.useSWRConfig)();
+  const { mutate } = (0, import_swr13.useSWRConfig)();
   const mutationResponse = (0, import_mutation8.default)(
     () => buildKey15({
       access_token: auth == null ? void 0 : auth.access_token,
@@ -17045,7 +17015,7 @@ var import_classnames45 = __toESM(require("classnames"));
 var import_date_fns17 = require("date-fns");
 
 // src/hooks/bookkeeping/periods/useBookkeepingPeriods.ts
-var import_swr15 = __toESM(require("swr"));
+var import_swr14 = __toESM(require("swr"));
 
 // src/utils/bookkeeping/bookkeepingStatusFilters.ts
 function isActiveBookkeepingStatus(status) {
@@ -17128,7 +17098,7 @@ function useBookkeepingPeriods() {
   const { businessId } = useLayerContext();
   const { data, isLoading: isLoadingBookkeepingStatus } = useBookkeepingStatus();
   const isActiveOrPaused = data ? isActiveOrPausedBookkeepingStatus(data.status) : false;
-  const swrResponse = (0, import_swr15.default)(
+  const swrResponse = (0, import_swr14.default)(
     () => buildKey16(__spreadProps(__spreadValues({}, auth), {
       businessId,
       isActiveOrPaused
@@ -20561,7 +20531,7 @@ var applyShare = (items, total) => {
 // src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
 var import_react104 = require("react");
 var import_date_fns25 = require("date-fns");
-var import_swr16 = __toESM(require("swr"));
+var import_swr15 = __toESM(require("swr"));
 var buildDates = ({ currentDate }) => {
   return {
     startYear: (0, import_date_fns25.startOfMonth)(currentDate).getFullYear() - 1,
@@ -20602,7 +20572,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     isValidating,
     error,
     mutate
-  } = (0, import_swr16.default)(
+  } = (0, import_swr15.default)(
     queryKey,
     Layer.getProfitAndLossSummaries(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: {
@@ -20715,7 +20685,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
 // src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
 var import_react105 = require("react");
 var import_date_fns26 = require("date-fns");
-var import_swr17 = __toESM(require("swr"));
+var import_swr16 = __toESM(require("swr"));
 var useProfitAndLossQuery = ({
   startDate,
   endDate,
@@ -20738,7 +20708,7 @@ var useProfitAndLossQuery = ({
     isValidating,
     error: rawError,
     mutate
-  } = (0, import_swr17.default)(
+  } = (0, import_swr16.default)(
     queryKey,
     Layer.getProfitAndLoss(apiUrl, auth == null ? void 0 : auth.access_token, {
       businessId,
@@ -21065,7 +21035,7 @@ function preparePeriodsBody(dateRange, comparePeriods, rangeDisplayMode) {
 }
 
 // src/hooks/useProfitAndLossComparison/useProfitAndLossComparison.tsx
-var import_swr18 = __toESM(require("swr"));
+var import_swr17 = __toESM(require("swr"));
 var COMPARE_MODES_SUPPORTING_MULTI_PERIOD = ["monthPicker", "yearPicker"];
 var isNotOnlyNoneTag = (compareOptions) => {
   return Boolean(
@@ -21129,7 +21099,7 @@ function useProfitAndLossComparison({
     reportingBasis,
     compareModeActive
   }));
-  const { data, isLoading, isValidating } = (0, import_swr18.default)(
+  const { data, isLoading, isValidating } = (0, import_swr17.default)(
     queryKey,
     () => __async(null, null, function* () {
       const response = yield Layer.compareProfitAndLoss(apiUrl, auth == null ? void 0 : auth.access_token, {
@@ -24472,7 +24442,7 @@ ProfitAndLoss.Report = ProfitAndLossReport;
 ProfitAndLoss.DownloadButton = ProfitAndLossDownloadButton;
 
 // src/hooks/balanceSheet/useBalanceSheet.ts
-var import_swr19 = __toESM(require("swr"));
+var import_swr18 = __toESM(require("swr"));
 var import_date_fns33 = require("date-fns");
 function buildKey19({
   access_token: accessToken,
@@ -24496,7 +24466,7 @@ function useBalanceSheet({
   const { data: auth } = useAuth();
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
-  return (0, import_swr19.default)(
+  return (0, import_swr18.default)(
     () => buildKey19(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
@@ -25105,7 +25075,7 @@ function StatementOfCashFlowDatePicker({
 }
 
 // src/hooks/useStatementOfCashFlow/useStatementOfCashFlow.tsx
-var import_swr20 = __toESM(require("swr"));
+var import_swr19 = __toESM(require("swr"));
 var import_date_fns34 = require("date-fns");
 function buildKey22({
   access_token: accessToken,
@@ -25132,7 +25102,7 @@ function useStatementOfCashFlow({
   const { data: auth } = useAuth();
   const { apiUrl } = useEnvironment();
   const { businessId } = useLayerContext();
-  return (0, import_swr20.default)(
+  return (0, import_swr19.default)(
     buildKey22(__spreadProps(__spreadValues({}, auth), {
       apiUrl,
       businessId,
@@ -25466,7 +25436,7 @@ var LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE = {
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 var import_date_fns36 = require("date-fns");
-var import_swr21 = __toESM(require("swr"));
+var import_swr20 = __toESM(require("swr"));
 var validate = (formData) => {
   const errors = [];
   const nameError = validateName(formData);
@@ -25571,7 +25541,7 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     initialEndDate != null ? initialEndDate : (0, import_date_fns36.endOfMonth)(Date.now())
   );
   const queryKey = businessId && (auth == null ? void 0 : auth.access_token) && `chart-of-accounts-${businessId}-${startDate == null ? void 0 : startDate.valueOf()}-${endDate == null ? void 0 : endDate.valueOf()}`;
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr21.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr20.default)(
     queryKey,
     Layer.getLedgerAccountBalances(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: {
@@ -25781,12 +25751,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
 
 // src/hooks/useChartOfAccounts/useCreateChildAccount.tsx
 var import_mutation12 = __toESM(require("swr/mutation"));
-var import_swr22 = require("swr");
+var import_swr21 = require("swr");
 var import_react137 = require("react");
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
 var import_react138 = require("react");
-var import_swr23 = __toESM(require("swr"));
+var import_swr22 = __toESM(require("swr"));
 var useLedgerAccounts = (showReversalEntries = false) => {
   const { businessId, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const { apiUrl } = useEnvironment();
@@ -25794,7 +25764,7 @@ var useLedgerAccounts = (showReversalEntries = false) => {
   const [accountId, setAccountId] = (0, import_react138.useState)();
   const [selectedEntryId, setSelectedEntryId] = (0, import_react138.useState)();
   const queryKey = businessId && accountId && (auth == null ? void 0 : auth.access_token) && `ledger-accounts-lines-${businessId}-${accountId}`;
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr23.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr22.default)(
     queryKey,
     Layer.getLedgerAccountsLines(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: {
@@ -25810,7 +25780,7 @@ var useLedgerAccounts = (showReversalEntries = false) => {
     isLoading: isLoadingEntry,
     isValidating: isValdiatingEntry,
     error: errorEntry
-  } = (0, import_swr23.default)(
+  } = (0, import_swr22.default)(
     businessId && selectedEntryId && (auth == null ? void 0 : auth.access_token) && `ledger-accounts-entry-${businessId}-${selectedEntryId}}`,
     Layer.getLedgerAccountsEntry(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId, entryId: selectedEntryId }
@@ -27313,7 +27283,7 @@ var JournalContext = (0, import_react148.createContext)({
 
 // src/hooks/useJournal/useJournal.tsx
 var import_react149 = require("react");
-var import_swr24 = __toESM(require("swr"));
+var import_swr23 = __toESM(require("swr"));
 var useJournal = () => {
   const {
     businessId,
@@ -27330,7 +27300,7 @@ var useJournal = () => {
   const [sendingForm, setSendingForm] = (0, import_react149.useState)(false);
   const [apiError, setApiError] = (0, import_react149.useState)(void 0);
   const queryKey = businessId && (auth == null ? void 0 : auth.access_token) && `journal-lines-${businessId}`;
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr24.default)(
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr23.default)(
     queryKey,
     Layer.getJournal(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId }
@@ -27922,20 +27892,19 @@ var JournalFormEntryLines = ({
                 className: "Layer__journal__form__input-group__line-item",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(InputGroup, { name: direction, label: "Amount", inline: true, children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
-                    InputWithBadge,
+                    AmountInput,
                     {
                       name: direction,
-                      placeholder: "$0.00",
-                      value: convertNumberToCurrency(item.amount),
+                      onChange: (value) => changeFormData("amount", value, idx2),
+                      value: item.amount,
                       disabled: sendingForm,
-                      badge: humanizeEnum(direction),
-                      variant: item.direction === "CREDIT" ? "success" /* SUCCESS */ : "warning" /* WARNING */,
-                      onChange: (e) => changeFormData(
-                        "amount",
-                        convertCurrencyToNumber(
-                          e.target.value
-                        ),
-                        idx2
+                      allowNegativeValue: false,
+                      badge: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+                        Badge,
+                        {
+                          variant: item.direction === "CREDIT" ? "success" /* SUCCESS */ : "warning" /* WARNING */,
+                          children: humanizeEnum(direction)
+                        }
                       ),
                       isInvalid: Boolean(
                         (_a = form == null ? void 0 : form.errors) == null ? void 0 : _a.lineItems.find(
@@ -28623,7 +28592,7 @@ function getIconForTask(task) {
 }
 
 // src/hooks/bookkeeping/periods/tasks/useSubmitResponseForTask.ts
-var import_swr25 = require("swr");
+var import_swr24 = require("swr");
 var import_mutation15 = __toESM(require("swr/mutation"));
 
 // src/api/layer/tasks.ts
@@ -28675,7 +28644,7 @@ function buildKey25({
 function useSubmitUserResponseForTask() {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr25.useSWRConfig)();
+  const { mutate } = (0, import_swr24.useSWRConfig)();
   const mutationResponse = (0, import_mutation15.default)(
     () => buildKey25(__spreadProps(__spreadValues({}, auth), {
       businessId
@@ -28725,7 +28694,7 @@ function useSubmitUserResponseForTask() {
 }
 
 // src/hooks/bookkeeping/periods/tasks/useUploadDocumentsForTask.ts
-var import_swr26 = require("swr");
+var import_swr25 = require("swr");
 var import_mutation16 = __toESM(require("swr/mutation"));
 var import_react157 = require("react");
 function buildKey26({
@@ -28745,7 +28714,7 @@ function buildKey26({
 function useUploadDocumentsForTask() {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr26.useSWRConfig)();
+  const { mutate } = (0, import_swr25.useSWRConfig)();
   const mutationResponse = (0, import_mutation16.default)(
     () => buildKey26(__spreadProps(__spreadValues({}, auth), {
       businessId
@@ -28791,7 +28760,7 @@ function useUploadDocumentsForTask() {
 }
 
 // src/hooks/bookkeeping/periods/tasks/useDeleteUploadsOnTask.ts
-var import_swr27 = require("swr");
+var import_swr26 = require("swr");
 var import_mutation17 = __toESM(require("swr/mutation"));
 var import_react158 = require("react");
 function buildKey27({
@@ -28811,7 +28780,7 @@ function buildKey27({
 function useDeleteUploadsOnTask() {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr27.useSWRConfig)();
+  const { mutate } = (0, import_swr26.useSWRConfig)();
   const mutationResponse = (0, import_mutation17.default)(
     () => buildKey27(__spreadProps(__spreadValues({}, auth), {
       businessId
@@ -28854,7 +28823,7 @@ function useDeleteUploadsOnTask() {
 }
 
 // src/hooks/bookkeeping/periods/tasks/useUpdateTaskUploadDescription.ts
-var import_swr28 = require("swr");
+var import_swr27 = require("swr");
 var import_mutation18 = __toESM(require("swr/mutation"));
 var import_react159 = require("react");
 function buildKey28({
@@ -28874,7 +28843,7 @@ function buildKey28({
 function useUpdateTaskUploadDescription() {
   const { data: auth } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr28.useSWRConfig)();
+  const { mutate } = (0, import_swr27.useSWRConfig)();
   const mutationResponse = (0, import_mutation18.default)(
     () => buildKey28(__spreadProps(__spreadValues({}, auth), {
       businessId
@@ -30473,7 +30442,7 @@ var SummaryStep = ({ onNext, title = defaultTitle2, description = defaultDescrip
 var import_react_form4 = require("@tanstack/react-form");
 
 // src/hooks/businessPersonnel/useBusinessPersonnel.ts
-var import_swr29 = __toESM(require("swr"));
+var import_swr28 = __toESM(require("swr"));
 
 // src/utils/array/readonlyTransformations.ts
 function mapReadonly(array, callbackFn) {
@@ -30509,7 +30478,7 @@ var getBusinessPersonnel = get(({ businessId }) => `/v1/businesses/${businessId}
 function useBusinessPersonnel() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
-  return (0, import_swr29.default)(
+  return (0, import_swr28.default)(
     () => buildKey29(__spreadProps(__spreadValues({}, data), {
       businessId
     })),
@@ -30550,7 +30519,7 @@ function useBusinessPersonnel() {
 
 // src/hooks/businessPersonnel/useCreateBusinessPersonnel.ts
 var import_mutation19 = __toESM(require("swr/mutation"));
-var import_swr30 = require("swr");
+var import_swr29 = require("swr");
 var import_react172 = require("react");
 var createBusinessPersonnel = post(({ businessId }) => `/v1/businesses/${businessId}/personnel`);
 function buildKey30({
@@ -30570,7 +30539,7 @@ function buildKey30({
 function useCreateBusinessPersonnel() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr30.useSWRConfig)();
+  const { mutate } = (0, import_swr29.useSWRConfig)();
   const mutationResponse = (0, import_mutation19.default)(
     () => buildKey30(__spreadProps(__spreadValues({}, data), {
       businessId
@@ -30615,7 +30584,7 @@ function useCreateBusinessPersonnel() {
 
 // src/hooks/businessPersonnel/useUpdateBusinessPersonnel.ts
 var import_mutation20 = __toESM(require("swr/mutation"));
-var import_swr31 = require("swr");
+var import_swr30 = require("swr");
 
 // src/api/layer/businessPersonnel/updateBusinessPersonnel.ts
 var updateBusinessPersonnel = post(({ businessId, businessPersonnelId }) => {
@@ -30643,7 +30612,7 @@ function buildKey31({
 function useUpdateBusinessPersonnel({ businessPersonnelId }) {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr31.useSWRConfig)();
+  const { mutate } = (0, import_swr30.useSWRConfig)();
   const mutationResponse = (0, import_mutation20.default)(
     () => buildKey31(__spreadProps(__spreadValues({}, data), {
       businessId,
@@ -30692,7 +30661,7 @@ function useUpdateBusinessPersonnel({ businessPersonnelId }) {
 
 // src/hooks/business/useUpdateBusiness.ts
 var import_mutation21 = __toESM(require("swr/mutation"));
-var import_swr32 = require("swr");
+var import_swr31 = require("swr");
 var import_react174 = require("react");
 var BUSINESS_TAG_KEY = "business";
 function buildKey32({
@@ -30712,7 +30681,7 @@ function buildKey32({
 function useUpdateBusiness() {
   const { data } = useAuth();
   const { businessId } = useLayerContext();
-  const { mutate } = (0, import_swr32.useSWRConfig)();
+  const { mutate } = (0, import_swr31.useSWRConfig)();
   const mutationResponse = (0, import_mutation21.default)(
     () => buildKey32(__spreadProps(__spreadValues({}, data), {
       businessId