@layerfi/components 0.1.106 → 0.1.107-alpha

package/dist/cjs/index.cjs

@@ -3785,7 +3785,7 @@ var require_lodash = __commonJS({
         }
         function reject(collection, predicate) {
           var func = isArray(collection) ? arrayFilter : baseFilter;
-          return func(collection, negate(getIteratee(predicate, 3)));
+          return func(collection, negate2(getIteratee(predicate, 3)));
         }
         function sample(collection) {
           var func = isArray(collection) ? arraySample : baseSample;
@@ -3899,17 +3899,17 @@ var require_lodash = __commonJS({
           result2.placeholder = curryRight.placeholder;
           return result2;
         }
-        function debounce7(func, wait, options) {
+        function debounce7(func, wait, options2) {
           var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
           if (typeof func != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
           wait = toNumber(wait) || 0;
-          if (isObject(options)) {
-            leading = !!options.leading;
-            maxing = "maxWait" in options;
-            maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-            trailing = "trailing" in options ? !!options.trailing : trailing;
+          if (isObject(options2)) {
+            leading = !!options2.leading;
+            maxing = "maxWait" in options2;
+            maxWait = maxing ? nativeMax(toNumber(options2.maxWait) || 0, wait) : maxWait;
+            trailing = "trailing" in options2 ? !!options2.trailing : trailing;
           }
           function invokeFunc(time) {
             var args = lastArgs, thisArg = lastThis;
@@ -4006,7 +4006,7 @@ var require_lodash = __commonJS({
           return memoized;
         }
         memoize.Cache = MapCache;
-        function negate(predicate) {
+        function negate2(predicate) {
           if (typeof predicate != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
@@ -4070,14 +4070,14 @@ var require_lodash = __commonJS({
             return apply(func, this, otherArgs);
           });
         }
-        function throttle(func, wait, options) {
+        function throttle(func, wait, options2) {
           var leading = true, trailing = true;
           if (typeof func != "function") {
             throw new TypeError2(FUNC_ERROR_TEXT);
           }
-          if (isObject(options)) {
-            leading = "leading" in options ? !!options.leading : leading;
-            trailing = "trailing" in options ? !!options.trailing : trailing;
+          if (isObject(options2)) {
+            leading = "leading" in options2 ? !!options2.leading : leading;
+            trailing = "trailing" in options2 ? !!options2.trailing : trailing;
           }
           return debounce7(func, wait, {
             "leading": leading,
@@ -4167,7 +4167,7 @@ var require_lodash = __commonJS({
         function isEqual2(value, other) {
           return baseIsEqual(value, other);
         }
-        function isEqualWith(value, other, customizer) {
+        function isEqualWith2(value, other, customizer) {
           customizer = typeof customizer == "function" ? customizer : undefined2;
           var result2 = customizer ? customizer(value, other) : undefined2;
           return result2 === undefined2 ? baseIsEqual(value, other, undefined2, customizer) : !!result2;
@@ -4475,7 +4475,7 @@ var require_lodash = __commonJS({
           return result2;
         });
         function omitBy(object, predicate) {
-          return pickBy(object, negate(getIteratee(predicate)));
+          return pickBy(object, negate2(getIteratee(predicate)));
         }
         var pick = flatRest(function(object, paths) {
           return object == null ? {} : basePick(object, paths);
@@ -4720,20 +4720,20 @@ var require_lodash = __commonJS({
           target = baseToString(target);
           return string.slice(position, position + target.length) == target;
         }
-        function template(string, options, guard) {
+        function template(string, options2, guard) {
           var settings = lodash.templateSettings;
-          if (guard && isIterateeCall(string, options, guard)) {
-            options = undefined2;
+          if (guard && isIterateeCall(string, options2, guard)) {
+            options2 = undefined2;
           }
           string = toString(string);
-          options = assignInWith({}, options, settings, customDefaultsAssignIn);
-          var imports = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys(imports), importsValues = baseValues(imports, importsKeys);
-          var isEscaping, isEvaluating, index = 0, interpolate = options.interpolate || reNoMatch, source = "__p += '";
+          options2 = assignInWith({}, options2, settings, customDefaultsAssignIn);
+          var imports = assignInWith({}, options2.imports, settings.imports, customDefaultsAssignIn), importsKeys = keys(imports), importsValues = baseValues(imports, importsKeys);
+          var isEscaping, isEvaluating, index = 0, interpolate = options2.interpolate || reNoMatch, source = "__p += '";
           var reDelimiters = RegExp2(
-            (options.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options.evaluate || reNoMatch).source + "|$",
+            (options2.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options2.evaluate || reNoMatch).source + "|$",
             "g"
           );
-          var sourceURL = "//# sourceURL=" + (hasOwnProperty.call(options, "sourceURL") ? (options.sourceURL + "").replace(/\s/g, " ") : "lodash.templateSources[" + ++templateCounter + "]") + "\n";
+          var sourceURL = "//# sourceURL=" + (hasOwnProperty.call(options2, "sourceURL") ? (options2.sourceURL + "").replace(/\s/g, " ") : "lodash.templateSources[" + ++templateCounter + "]") + "\n";
           string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset2) {
             interpolateValue || (interpolateValue = esTemplateValue);
             source += string.slice(index, offset2).replace(reUnescapedString, escapeStringChar);
@@ -4752,7 +4752,7 @@ var require_lodash = __commonJS({
             return match;
           });
           source += "';\n";
-          var variable = hasOwnProperty.call(options, "variable") && options.variable;
+          var variable = hasOwnProperty.call(options2, "variable") && options2.variable;
           if (!variable) {
             source = "with (obj) {\n" + source + "\n}\n";
           } else if (reForbiddenIdentifierChars.test(variable)) {
@@ -4808,12 +4808,12 @@ var require_lodash = __commonJS({
           var strSymbols = stringToArray(string), start = charsStartIndex(strSymbols, stringToArray(chars));
           return castSlice(strSymbols, start).join("");
         }
-        function truncate(string, options) {
+        function truncate(string, options2) {
           var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
-          if (isObject(options)) {
-            var separator = "separator" in options ? options.separator : separator;
-            length = "length" in options ? toInteger(options.length) : length;
-            omission = "omission" in options ? baseToString(options.omission) : omission;
+          if (isObject(options2)) {
+            var separator = "separator" in options2 ? options2.separator : separator;
+            length = "length" in options2 ? toInteger(options2.length) : length;
+            omission = "omission" in options2 ? baseToString(options2.omission) : omission;
           }
           string = toString(string);
           var strLength = string.length;
@@ -4938,15 +4938,15 @@ var require_lodash = __commonJS({
             return baseInvoke(object, path, args);
           };
         });
-        function mixin(object, source, options) {
+        function mixin(object, source, options2) {
           var props = keys(source), methodNames = baseFunctions(source, props);
-          if (options == null && !(isObject(source) && (methodNames.length || !props.length))) {
-            options = source;
+          if (options2 == null && !(isObject(source) && (methodNames.length || !props.length))) {
+            options2 = source;
             source = object;
             object = this;
             methodNames = baseFunctions(source, keys(source));
           }
-          var chain2 = !(isObject(options) && "chain" in options) || !!options.chain, isFunc = isFunction(object);
+          var chain2 = !(isObject(options2) && "chain" in options2) || !!options2.chain, isFunc = isFunction(object);
           arrayEach(methodNames, function(methodName) {
             var func = source[methodName];
             object[methodName] = func;
@@ -5142,7 +5142,7 @@ var require_lodash = __commonJS({
         lodash.method = method;
         lodash.methodOf = methodOf;
         lodash.mixin = mixin;
-        lodash.negate = negate;
+        lodash.negate = negate2;
         lodash.nthArg = nthArg;
         lodash.omit = omit;
         lodash.omitBy = omitBy;
@@ -5278,7 +5278,7 @@ var require_lodash = __commonJS({
         lodash.isElement = isElement;
         lodash.isEmpty = isEmpty;
         lodash.isEqual = isEqual2;
-        lodash.isEqualWith = isEqualWith;
+        lodash.isEqualWith = isEqualWith2;
         lodash.isError = isError;
         lodash.isFinite = isFinite;
         lodash.isFunction = isFunction;
@@ -5449,7 +5449,7 @@ var require_lodash = __commonJS({
           });
         });
         LazyWrapper.prototype.reject = function(predicate) {
-          return this.filter(negate(getIteratee(predicate)));
+          return this.filter(negate2(getIteratee(predicate)));
         };
         LazyWrapper.prototype.slice = function(start, end) {
           start = toInteger(start);
@@ -5603,7 +5603,7 @@ var import_react12 = require("react");
 var import_react10 = require("react");
 
 // package.json
-var version = "0.1.106";
+var version = "0.1.107-alpha";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -5649,21 +5649,21 @@ var CUSTOM_PREFIX = "Layer-";
 var CUSTOM_HEADERS = {
   [`${CUSTOM_PREFIX}React-Version`]: version
 };
-var get = (url) => (baseUrl, accessToken, options) => () => fetch(`${baseUrl}${url((options == null ? void 0 : options.params) || {})}`, {
+var get = (url) => (baseUrl, accessToken, options2) => () => fetch(`${baseUrl}${url((options2 == null ? void 0 : options2.params) || {})}`, {
   headers: __spreadValues({
     "Authorization": "Bearer " + (accessToken || ""),
     "Content-Type": "application/json"
   }, CUSTOM_HEADERS),
   method: "GET"
 }).then((res) => handleResponse(res)).catch((error) => handleException(error));
-var request = (verb) => (url) => (baseUrl, accessToken, options) => fetch(`${baseUrl}${url((options == null ? void 0 : options.params) || {})}`, {
+var request = (verb) => (url) => (baseUrl, accessToken, options2) => fetch(`${baseUrl}${url((options2 == null ? void 0 : options2.params) || {})}`, {
   headers: __spreadValues({
     "Authorization": "Bearer " + (accessToken || ""),
     "Content-Type": "application/json",
     "Cache-Control": "no-cache"
   }, CUSTOM_HEADERS),
   method: verb.toUpperCase(),
-  body: JSON.stringify(options == null ? void 0 : options.body)
+  body: JSON.stringify(options2 == null ? void 0 : options2.body)
 }).then((res) => handleResponse(res)).catch((error) => handleException(error));
 var patch = request("patch");
 var post = request("post");
@@ -5970,6 +5970,7 @@ var breakPlaidItemConnection = post(
 
 // src/utils/time/timeUtils.ts
 var import_date_fns2 = require("date-fns");
+var import_date = require("@internationalized/date");
 var toLocalDateString = (date) => (0, import_date_fns2.formatISO)(date.valueOf(), { representation: "date" });
 function getDueDifference(dueDate) {
   const today = /* @__PURE__ */ new Date();
@@ -5978,6 +5979,9 @@ function getDueDifference(dueDate) {
   normalizedDue.setHours(0, 0, 0, 0);
   return (0, import_date_fns2.differenceInDays)(normalizedDue, today);
 }
+function isZonedDateTime(val) {
+  return val instanceof import_date.ZonedDateTime;
+}
 
 // src/api/layer/profit_and_loss.ts
 var getProfitAndLoss = (apiUrl, accessToken, params) => {
@@ -7144,12 +7148,12 @@ var RANGE_MODE_LOOKUP = {
   }
 };
 function withCorrectedRange(fn) {
-  return (options) => {
-    const { start, end } = options;
+  return (options2) => {
+    const { start, end } = options2;
     if (start > end) {
-      return fn(__spreadProps(__spreadValues({}, options), { start: end, end: start }));
+      return fn(__spreadProps(__spreadValues({}, options2), { start: end, end: start }));
     }
-    return fn(__spreadProps(__spreadValues({}, options), { start, end }));
+    return fn(__spreadProps(__spreadValues({}, options2), { start, end }));
   };
 }
 function buildStore() {
@@ -7382,7 +7386,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
     is_syncing: true,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   },
   {
     id: "f98ec50a-c370-484d-a35b-d00207436075",
@@ -7407,7 +7412,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
     is_syncing: false,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   },
   {
     id: "843f1748-fdaa-422d-a73d-2489a40c8dc7",
@@ -7432,7 +7438,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: "2024-03-06T16:44:35.715458Z",
     is_syncing: false,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   },
   {
     id: "8f430e29-e339-4d71-a08a-fce469c7a7c1",
@@ -7457,7 +7464,8 @@ var LINKED_ACCOUNTS_MOCK_DATA = [
     connection_external_id: "11111",
     connection_needs_repair_as_of: null,
     is_syncing: false,
-    user_created: false
+    user_created: false,
+    reconnect_with_new_credentials: false
   }
 ];
 
@@ -9221,10 +9229,10 @@ var import_jsx_runtime21 = require("react/jsx-runtime");
 var Tooltip = (_a) => {
   var _b = _a, {
     children
-  } = _b, options = __objRest(_b, [
+  } = _b, options2 = __objRest(_b, [
     "children"
   ]);
-  const tooltip = useTooltip(options);
+  const tooltip = useTooltip(options2);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContext.Provider, { value: tooltip, children });
 };
 var TooltipTrigger = (0, import_react25.forwardRef)(function TooltipTrigger2(_a, propRef) {
@@ -10413,6 +10421,7 @@ var DataState = ({
   icon,
   spacing,
   inline,
+  titleSize = inline ? "sm" /* sm */ : "lg" /* lg */,
   className
 }) => {
   const baseClassName = (0, import_classnames18.default)(
@@ -10430,7 +10439,7 @@ var DataState = ({
         Text,
         {
           as: "span",
-          size: inline ? "sm" /* sm */ : "lg" /* lg */,
+          size: titleSize,
           weight: "bold" /* bold */,
           className: "Layer__data-state__title",
           children: title
@@ -11809,6 +11818,7 @@ var LinkedAccountItemThumb = ({
 }) => {
   var _a;
   const {
+    addConnection,
     removeConnection,
     repairConnection,
     confirmAccount: confirmAccount2,
@@ -11845,10 +11855,16 @@ var LinkedAccountItemThumb = ({
           name: "Repair connection",
           action: () => {
             if (account.connection_external_id) {
-              void repairConnection(
-                account.external_account_source,
-                account.connection_external_id
-              );
+              if (account.reconnect_with_new_credentials) {
+                addConnection(
+                  account.external_account_source
+                );
+              } else {
+                repairConnection(
+                  account.external_account_source,
+                  account.connection_external_id
+                );
+              }
             }
           }
         }
@@ -12580,7 +12596,7 @@ var import_classnames28 = __toESM(require("classnames"));
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var Select = ({
   name,
-  options,
+  options: options2,
   className,
   classNamePrefix = "Layer__select",
   value,
@@ -12608,7 +12624,7 @@ var Select = ({
         className: baseClassName,
         classNamePrefix,
         placeholder: placeholder != null ? placeholder : "Select...",
-        options,
+        options: options2,
         formatOptionLabel: formatOptionLabel2,
         value,
         onChange: (newValue) => newValue && onChange(newValue),
@@ -12634,7 +12650,7 @@ var import_classnames30 = __toESM(require("classnames"));
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var MultiSelect = ({
   name,
-  options,
+  options: options2,
   className,
   classNamePrefix = "Layer__select",
   value,
@@ -12663,7 +12679,7 @@ var MultiSelect = ({
         className: baseClassName,
         classNamePrefix,
         placeholder: placeholder != null ? placeholder : "Select...",
-        options,
+        options: options2,
         value,
         defaultValue: defaultValue2,
         onChange: (newValue) => newValue && onChange(newValue),
@@ -13386,7 +13402,7 @@ function useBulkSetOpeningBalanceAndDate(data, { onSuccess }) {
 // src/utils/format.ts
 var import_date_fns10 = require("date-fns");
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
-var formatPercent = (value, options) => {
+var formatPercent = (value, options2) => {
   if (!value && value !== 0) {
     return;
   }
@@ -13413,7 +13429,7 @@ var formatPercent = (value, options) => {
       maximumFractionDigits: 0
     };
   }
-  return val.toLocaleString("en-US", __spreadValues(__spreadValues({}, defaultOptions), options));
+  return val.toLocaleString("en-US", __spreadValues(__spreadValues({}, defaultOptions), options2));
 };
 var humanizeEnum = (text) => {
   return capitalizeFirstLetter(text.replace(/_/gi, " ").toLowerCase());
@@ -14128,12 +14144,12 @@ var import_react59 = require("react");
 var import_classnames33 = __toESM(require("classnames"));
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var ActionableList = ({
-  options,
+  options: options2,
   onClick,
   selectedId,
   showDescriptions = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("ul", { className: "Layer__actionable-list", children: options.map((x, idx) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("ul", { className: "Layer__actionable-list", children: options2.map((x, idx) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
     "li",
     {
       role: "button",
@@ -14565,7 +14581,7 @@ var CategorySelect = ({
     }
   ] : [];
   const categoryOptions = flattenCategories2(categories != null ? categories : []);
-  const options = [
+  const options2 = [
     ...matchOptions,
     ...suggestedOptions,
     ...allCategoriesDivider,
@@ -14592,7 +14608,7 @@ var CategorySelect = ({
       classNames: {
         menu: () => "Layer__select__menu--lg"
       },
-      options,
+      options: options2,
       isSearchable: true,
       placeholder,
       defaultValue: selected,
@@ -15461,7 +15477,7 @@ var import_jsx_runtime114 = require("react/jsx-runtime");
 var import_react66 = require("react");
 var Toggle = ({
   name,
-  options,
+  options: options2,
   selected,
   onChange,
   size = "medium" /* medium */
@@ -15470,8 +15486,8 @@ var Toggle = ({
   const [thumbPos, setThumbPos] = (0, import_react65.useState)({ left: 0, width: 0 });
   const [initialized, setInitialized] = (0, import_react65.useState)(false);
   const activeOption = (0, import_react65.useMemo)(() => {
-    return selected ? selected : options.length > 0 ? options[0].value : void 0;
-  }, [selected, options]);
+    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);
@@ -15521,7 +15537,7 @@ var Toggle = ({
     updateThumbPosition(selectedIndex);
   }, [currentWidth]);
   const getSelectedIndex = () => {
-    const selectedIndex = options.findIndex(
+    const selectedIndex = options2.findIndex(
       (option) => option.value === activeOption
     );
     if (selectedIndex === -1) {
@@ -15530,7 +15546,7 @@ var Toggle = ({
     return selectedIndex;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: baseClassName, ref: toggleRef, children: [
-    options.map((option, index) => {
+    options2.map((option, index) => {
       var _a;
       return /* @__PURE__ */ (0, import_react66.createElement)(
         ToggleOption,
@@ -16475,7 +16491,7 @@ function ComboBox(_a) {
     className,
     selectedValue,
     onSelectedValueChange,
-    options,
+    options: options2,
     groups,
     onInputValueChange,
     placeholder,
@@ -16487,6 +16503,7 @@ function ComboBox(_a) {
     isMutating,
     isSearchable = true,
     isClearable = true,
+    isReadOnly = false,
     displayDisabledAsSelected
   } = _b, ariaProps = __objRest(_b, [
     "className",
@@ -16504,6 +16521,7 @@ function ComboBox(_a) {
     "isMutating",
     "isSearchable",
     "isClearable",
+    "isReadOnly",
     "displayDisabledAsSelected"
   ]);
   const internalInputId = (0, import_react71.useId)();
@@ -16537,7 +16555,7 @@ function ComboBox(_a) {
       }, ariaProps), {
         value: selectedValue,
         onChange: onSelectedValueChange,
-        options: options != null ? options : groups,
+        options: options2 != null ? options2 : groups,
         onInputChange: onInputValueChange,
         escapeClearsValue: true,
         placeholder,
@@ -16549,11 +16567,15 @@ function ComboBox(_a) {
           control: ({ isFocused, isDisabled: isDisabled2 }) => (0, import_classnames41.default)(
             COMBO_BOX_CLASS_NAMES.CONTROL,
             isFocused && `${COMBO_BOX_CLASS_NAMES.CONTROL}--focused`,
-            isDisabled2 && `${COMBO_BOX_CLASS_NAMES.CONTROL}--disabled`
+            isDisabled2 && `${COMBO_BOX_CLASS_NAMES.CONTROL}--disabled`,
+            isReadOnly && `${COMBO_BOX_CLASS_NAMES.CONTROL}--readonly`
           ),
           valueContainer: () => COMBO_BOX_CLASS_NAMES.VALUE_CONTAINER,
           placeholder: () => COMBO_BOX_CLASS_NAMES.PLACEHOLDER,
-          indicatorsContainer: () => COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER,
+          indicatorsContainer: () => (0, import_classnames41.default)(
+            COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER,
+            isReadOnly && `${COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER}--readonly`
+          ),
           menu: () => COMBO_BOX_CLASS_NAMES.MENU,
           menuList: () => COMBO_BOX_CLASS_NAMES.MENU_LIST,
           group: () => COMBO_BOX_CLASS_NAMES.GROUP
@@ -16568,10 +16590,11 @@ function ComboBox(_a) {
           DropdownIndicator: CustomDropdownIndicatorRef.current,
           SingleValue: CustomSingleValue
         },
-        isClearable,
+        isClearable: isClearable && !isReadOnly,
         isDisabled,
         isLoading: isLoading || isMutating,
-        isSearchable
+        isSearchable: isSearchable && !isReadOnly,
+        openMenuOnClick: !isReadOnly
       })
     ),
     isError ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(HStack, { justify: "end", children: ErrorMessage != null ? ErrorMessage : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
@@ -18093,7 +18116,6 @@ var ExpandedBankTransactionRow = (0, import_react85.forwardRef)(
                             TextButton,
                             {
                               onClick: addSplit,
-                              disabled: rowState.splits.length > 5,
                               children: "Add new split"
                             }
                           ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
@@ -18102,7 +18124,6 @@ var ExpandedBankTransactionRow = (0, import_react85.forwardRef)(
                               onClick: addSplit,
                               rightIcon: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(ScissorsFullOpen_default, { size: 14 }),
                               variant: "secondary" /* secondary */,
-                              disabled: rowState.splits.length > 5,
                               children: "Split"
                             }
                           ) }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_jsx_runtime128.Fragment, {})
@@ -19094,16 +19115,16 @@ var BusinessForm = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const options = (0, import_react89.useMemo)(() => {
+  const options2 = (0, import_react89.useMemo)(() => {
     var _a;
-    const options2 = ((_a = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a.type) === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
+    const options3 = ((_a = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a.type) === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
       (x) => mapCategoryToOption(x)
     ) : [];
-    if (selectedCategory && !options2.find((x) => x.id === (selectedCategory == null ? void 0 : selectedCategory.id))) {
-      options2.unshift(selectedCategory);
+    if (selectedCategory && !options3.find((x) => x.id === (selectedCategory == null ? void 0 : selectedCategory.id))) {
+      options3.unshift(selectedCategory);
     }
-    if (options2.length) {
-      options2.push({
+    if (options3.length) {
+      options3.push({
         label: "See all categories",
         id: "SELECT_CATEGORY",
         value: {
@@ -19113,7 +19134,7 @@ var BusinessForm = ({
         asLink: true
       });
     }
-    return options2;
+    return options3;
   }, [bankTransaction, selectedCategory]);
   const onDrawerCategorySelect = (value) => {
     close2();
@@ -19168,7 +19189,7 @@ var BusinessForm = ({
     showCategorization ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
       ActionableList,
       {
-        options,
+        options: options2,
         onClick: onCategorySelect,
         selectedId: selectedCategory == null ? void 0 : selectedCategory.id,
         showDescriptions: showTooltips
@@ -19212,7 +19233,7 @@ var BusinessForm = ({
           icon: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Paperclip_default, {})
         }
       ),
-      options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+      options2.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
         Button,
         {
           onClick: openDrawer,
@@ -19221,7 +19242,7 @@ var BusinessForm = ({
           children: "Select category"
         }
       ) : null,
-      showCategorization && options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+      showCategorization && options2.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
         Button,
         {
           onClick: save,
@@ -19658,7 +19679,7 @@ var SplitForm = ({
           TextButton,
           {
             onClick: addSplit,
-            disabled: rowState.splits.length > 5 || isLoading,
+            disabled: isLoading,
             className: "Layer__add-new-split",
             children: "Add new split"
           }
@@ -20584,9 +20605,9 @@ function runDelayedSync(block, delayMs = DEFAULT_DELAY_MS) {
 var import_jsx_runtime159 = require("react/jsx-runtime");
 function useInvisibleDownload() {
   const invisibleDownloadRef = (0, import_react99.useRef)(null);
-  const triggerInvisibleDownload = (0, import_react99.useCallback)((options) => {
+  const triggerInvisibleDownload = (0, import_react99.useCallback)((options2) => {
     var _a;
-    void ((_a = invisibleDownloadRef.current) == null ? void 0 : _a.trigger(options));
+    void ((_a = invisibleDownloadRef.current) == null ? void 0 : _a.trigger(options2));
   }, []);
   return { invisibleDownloadRef, triggerInvisibleDownload };
 }
@@ -20777,7 +20798,7 @@ var import_classnames53 = __toESM(require("classnames"));
 var import_jsx_runtime162 = require("react/jsx-runtime");
 var CreatableSelect = ({
   name,
-  options,
+  options: options2,
   className,
   classNamePrefix = "Layer__select",
   value,
@@ -20810,7 +20831,7 @@ var CreatableSelect = ({
         className: baseClassName,
         classNamePrefix,
         placeholder: placeholder != null ? placeholder : "Select...",
-        options,
+        options: options2,
         formatOptionLabel: formatOptionLabel2,
         value,
         onChange: (newValue) => onChange(newValue),
@@ -21552,7 +21573,12 @@ var MAX_NUM_ROWS = 8;
 var HEADER_HEIGHT = 41;
 var CONTAINER_HEIGHT = ROW_HEIGHT * MAX_NUM_ROWS + HEADER_HEIGHT - 1;
 var CSS_PREFIX = "Layer__csv-upload__validate-csv-table";
-function ValidateCsvTable({ data, headers, formatters: formatters2, className }) {
+function ValidateCsvTable({
+  data,
+  headers,
+  formatters: formatters2,
+  className
+}) {
   const columns = (0, import_react107.useMemo)(
     () => {
       const columnDefs = [{
@@ -21567,8 +21593,9 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
         header: () => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: `${CSS_PREFIX}__header-cell-content`, children: headers[key] }),
         cell: (info) => {
           const field = info.row.original[key];
-          let value = field.raw;
-          if (field.is_valid) {
+          let value = field == null ? void 0 : field.raw;
+          const isValid2 = field && field.is_valid;
+          if (isValid2) {
             const formatter2 = formatters2 == null ? void 0 : formatters2[key];
             value = formatter2 ? formatter2(field.parsed) : field.parsed;
           }
@@ -21578,7 +21605,7 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
               className: (0, import_classnames57.default)(
                 "Layer__table-cell-content",
                 `${CSS_PREFIX}__cell-content`,
-                !field.is_valid && `${CSS_PREFIX}__cell-content--error`
+                !isValid2 && `${CSS_PREFIX}__cell-content--error`
               ),
               children: value
             }
@@ -21655,7 +21682,11 @@ function ValidateCsvTable({ data, headers, formatters: formatters2, className })
     ] })
   ] }) });
 }
-var ValidateCsvTableRow = ({ row, virtualRow, rowVirtualizer }) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+var ValidateCsvTableRow = ({
+  row,
+  virtualRow,
+  rowVirtualizer
+}) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
   "tr",
   {
     className: (0, import_classnames57.default)(
@@ -21694,6 +21725,21 @@ var formatters = {
     return (_a = convertCentsToCurrency(parsed)) != null ? _a : "";
   }
 };
+var generateDynamicHeaders = (transactionsPreview) => {
+  const hasExternalId = transactionsPreview.some(
+    (transaction) => {
+      var _a;
+      return ((_a = transaction.external_id) == null ? void 0 : _a.parsed) != null;
+    }
+  );
+  const hasReferenceNumber = transactionsPreview.some(
+    (transaction) => {
+      var _a;
+      return ((_a = transaction.reference_number) == null ? void 0 : _a.parsed) != null;
+    }
+  );
+  return __spreadValues(__spreadValues(__spreadValues({}, hasExternalId && { external_id: "External ID" }), hasReferenceNumber && { reference_number: "Reference No." }), templateHeaders);
+};
 function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId, onSelectFile, onUploadTransactionsSuccess }) {
   const { previous, next } = useWizard();
   const { trigger: uploadTransactions, isMutating, error: uploadTransactionsError } = useCreateCustomAccountTransactions();
@@ -21708,6 +21754,7 @@ function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId
     invalid_transactions_count: invalidTransactionsCount,
     total_transactions_count: totalTransactionsCount
   } = parseCsvResponse;
+  const dynamicHeaders = generateDynamicHeaders(transactionsPreview);
   const onClickUploadTransactions = (0, import_react108.useCallback)(() => {
     void uploadTransactions(__spreadProps(__spreadValues({}, transactionsRequest), {
       customAccountId: selectedAccountId
@@ -21729,7 +21776,7 @@ function UploadTransactionsValidateCsvStep({ parseCsvResponse, selectedAccountId
         {
           className: "Layer__upload-transactions__preview_table",
           data: transactionsPreview,
-          headers: templateHeaders,
+          headers: dynamicHeaders,
           formatters
         }
       )
@@ -23577,15 +23624,15 @@ function useProfitAndLossComparison({
   const effectiveComparePeriods = isPeriodsSelectEnabled ? comparePeriods : 1;
   const compareModeActive = (0, import_react129.useMemo)(() => effectiveComparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [effectiveComparePeriods, selectedCompareOptions]);
   const setSelectedCompareOptions = (values) => {
-    const options = values.map(
+    const options2 = values.map(
       (option) => comparisonConfig == null ? void 0 : comparisonConfig.tagComparisonOptions.find(
         (t) => JSON.stringify(t.tagFilterConfig) === option.value
       )
     ).filter(Boolean);
-    if (options.length === 0 && (comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter)) {
+    if (options2.length === 0 && (comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter)) {
       setSelectedCompareOptionsState([comparisonConfig == null ? void 0 : comparisonConfig.defaultTagFilter]);
     } else {
-      setSelectedCompareOptionsState(options);
+      setSelectedCompareOptionsState(options2);
     }
   };
   const { businessId } = useLayerContext();
@@ -26633,7 +26680,7 @@ var ProfitAndLossTableComponent = ({
   } = (0, import_react150.useContext)(ProfitAndLoss.Context);
   const { isOpen, setIsOpen } = useTableExpandRow();
   (0, import_react150.useEffect)(() => {
-    setIsOpen(["income", "cost_of_goods_sold", "expenses"]);
+    setIsOpen(["income", "cost_of_goods_sold", "expenses", "other_activity"]);
   }, []);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
   if (isLoading || actualData === void 0) {
@@ -26653,7 +26700,8 @@ var ProfitAndLossTableComponent = ({
     depth,
     rowKey,
     rowIndex,
-    variant
+    variant,
+    showValue = true
   }) => {
     const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
@@ -26676,7 +26724,7 @@ var ProfitAndLossTableComponent = ({
                 children: lineItem.display_name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */, children: Number.isNaN(lineItem.value) ? 0 : lineItem.value })
+            showValue && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */, children: Number.isNaN(lineItem.value) ? 0 : lineItem.value })
           ]
         }
       ),
@@ -26697,12 +26745,12 @@ var ProfitAndLossTableComponent = ({
       rowKey: "income",
       rowIndex: 0
     }),
-    data.cost_of_goods_sold ? renderLineItem({
+    data.cost_of_goods_sold && renderLineItem({
       lineItem: data.cost_of_goods_sold,
       depth: 0,
       rowKey: "cost_of_goods_sold",
       rowIndex: 1
-    }) : null,
+    }),
     renderLineItem({
       lineItem: {
         value: data.gross_profit,
@@ -26742,21 +26790,28 @@ var ProfitAndLossTableComponent = ({
       },
       depth: 0,
       rowKey: "net_profit",
-      rowIndex: 5,
+      rowIndex: 6,
       variant: "summation"
     }),
-    data.personal_expenses ? renderLineItem({
+    data.personal_expenses && renderLineItem({
       lineItem: data.personal_expenses,
       depth: 0,
       rowKey: "personal_expenses",
       rowIndex: 7
-    }) : null,
-    data.other_outflows ? renderLineItem({
+    }),
+    data.other_outflows && renderLineItem({
       lineItem: data.other_outflows,
       depth: 0,
       rowKey: "other_outflows",
-      rowIndex: 6
-    }) : null
+      rowIndex: 8
+    }),
+    data.custom_line_items && renderLineItem({
+      lineItem: data.custom_line_items,
+      depth: 0,
+      rowKey: "other_activity",
+      rowIndex: 9,
+      showValue: false
+    })
   ] }) });
 };
 
@@ -30719,7 +30774,7 @@ var JournalEntryDetails = () => {
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime255.jsx)("div", { className: "Layer__journal__entry-details__reverse-btn-container", children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
+      (entry == null ? void 0 : entry.entry_type) === "MANUAL" && /* @__PURE__ */ (0, import_jsx_runtime255.jsx)("div", { className: "Layer__journal__entry-details__reverse-btn-container", children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
         Button,
         {
           rightIcon: reverseEntryError ? /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(AlertCircle_default, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(RefreshCcw_default, { size: 12 }),
@@ -32713,11 +32768,11 @@ var import_classnames81 = __toESM(require("classnames"));
 var import_jsx_runtime278 = require("react/jsx-runtime");
 var import_react192 = require("react");
 var STARTING_PADDING = 12;
-var Tabs = ({ name, options, selected, onChange }) => {
+var Tabs = ({ name, options: options2, selected, onChange }) => {
   const [initialized, setInitialized] = (0, import_react191.useState)(false);
   const [thumbPos, setThumbPos] = (0, import_react191.useState)({ left: 0, width: 0 });
   const [currentWidth, setCurrentWidth] = (0, import_react191.useState)(0);
-  const selectedValue = selected || options[0].value;
+  const selectedValue = selected || options2[0].value;
   const baseClassName = (0, import_classnames81.default)(
     "Layer__tabs",
     initialized && "Layer__tabs--initialized"
@@ -32763,7 +32818,7 @@ var Tabs = ({ name, options, selected, onChange }) => {
     updateSelectPosition(selectedIndex);
   }, [selectedValue, currentWidth]);
   const getSelectedIndex = () => {
-    const selectedIndex = options.findIndex(
+    const selectedIndex = options2.findIndex(
       (option) => option.value === selectedValue
     );
     if (selectedIndex === -1) {
@@ -32772,7 +32827,7 @@ var Tabs = ({ name, options, selected, onChange }) => {
     return selectedIndex;
   };
   return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("div", { className: "Layer__tabs__container", children: /* @__PURE__ */ (0, import_jsx_runtime278.jsxs)("div", { className: baseClassName, ref: elementRef, children: [
-    options.map((option, index) => {
+    options2.map((option, index) => {
       var _a;
       return /* @__PURE__ */ (0, import_react192.createElement)(
         Tab,
@@ -33804,11 +33859,11 @@ var FormSection = ({ children, title }) => {
 
 // src/components/Input/BusinessTypeSelect.tsx
 var import_jsx_runtime292 = require("react/jsx-runtime");
-var findSelectOption = (options, value) => {
+var findSelectOption = (options2, value) => {
   if (!value) {
     return void 0;
   }
-  return options.find((o) => o.value === value);
+  return options2.find((o) => o.value === value);
 };
 var BusinessTypeSelect = ({ value, onChange }) => {
   const entityTypeOptions = ENTITY_TYPES;
@@ -33880,11 +33935,11 @@ var US_STATES = [
 
 // src/components/Input/USStateSelect.tsx
 var import_jsx_runtime293 = require("react/jsx-runtime");
-var findSelectOption2 = (options, selected) => {
+var findSelectOption2 = (options2, selected) => {
   if (!selected) {
     return void 0;
   }
-  return options.find(
+  return options2.find(
     (o) => String(o.value).toLowerCase() === String(selected).toLowerCase() || String(o.label).toLowerCase() === String(selected).toLowerCase()
   );
 };
@@ -37010,8 +37065,8 @@ var Reports = ({
   var _a;
   const [activeTab, setActiveTab] = (0, import_react218.useState)(enabledReports[0]);
   const { view, containerRef } = useElementViewSize();
-  const options = getOptions(enabledReports);
-  const defaultTitle4 = enabledReports.length > 1 ? "Reports" : (_a = options.find((option) => option.value === enabledReports[0])) == null ? void 0 : _a.label;
+  const options2 = getOptions(enabledReports);
+  const defaultTitle4 = enabledReports.length > 1 ? "Reports" : (_a = options2.find((option) => option.value === enabledReports[0])) == null ? void 0 : _a.label;
   const initialModeForProfitAndLoss = profitAndLossConfig ? getInitialDateRangePickerMode(profitAndLossConfig) : "monthPicker";
   const initialModeForStatementOfCashFlows = statementOfCashFlowConfig ? getInitialDateRangePickerMode(statementOfCashFlowConfig) : "monthPicker";
   const initialModes = {
@@ -37029,7 +37084,7 @@ var Reports = ({
           Toggle,
           {
             name: "reports-tabs",
-            options,
+            options: options2,
             selected: activeTab,
             onChange: (opt) => setActiveTab(opt.target.value)
           }
@@ -37171,10 +37226,10 @@ var Components = ({
 };
 
 // src/components/Invoices/Invoices.tsx
-var import_react238 = require("react");
+var import_react240 = require("react");
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-var import_react232 = require("react");
+var import_react234 = require("react");
 
 // src/components/BaseDetailView/BaseDetailView.tsx
 var import_jsx_runtime327 = require("react/jsx-runtime");
@@ -37189,8 +37244,12 @@ var BaseDetailView = ({ name, onGoBack, slots, children }) => {
   ] });
 };
 
+// src/components/Invoices/InvoiceForm/InvoiceForm.tsx
+var import_react233 = require("react");
+var import_classnames92 = __toESM(require("classnames"));
+
 // src/components/Invoices/InvoiceForm/useInvoiceForm.ts
-var import_react230 = require("react");
+var import_react231 = require("react");
 var import_react_form7 = require("@tanstack/react-form");
 
 // src/features/forms/hooks/useForm.tsx
@@ -37227,11 +37286,12 @@ var FieldError = (0, import_react220.forwardRef)(
 var import_jsx_runtime329 = require("react/jsx-runtime");
 function BaseFormTextField({
   label,
-  className,
   inline = false,
   showLabel = true,
   showFieldError = true,
   isTextArea = false,
+  isReadOnly = false,
+  className,
   children
 }) {
   const field = useFieldContext();
@@ -37241,11 +37301,32 @@ function BaseFormTextField({
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
   const shouldShowErrorMessage = showFieldError && errorMessage;
   const additionalAriaProps = !showLabel && { "aria-label": label };
-  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(TextField, __spreadProps(__spreadValues({ name, isInvalid: !isValid2, inline, className, textarea: isTextArea }, additionalAriaProps), { children: [
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(Label, __spreadProps(__spreadValues({ size: "sm", htmlFor: name }, !inline && { pbe: "3xs" }), { children: label })),
-    children,
-    shouldShowErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(FieldError, { children: errorMessage })
-  ] }));
+  return /* @__PURE__ */ (0, import_jsx_runtime329.jsxs)(
+    TextField,
+    __spreadProps(__spreadValues({
+      name,
+      isInvalid: !isValid2,
+      inline,
+      className,
+      textarea: isTextArea,
+      isReadOnly
+    }, additionalAriaProps), {
+      children: [
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(
+          Label,
+          __spreadProps(__spreadValues({
+            slot: "label",
+            size: "sm",
+            htmlFor: name
+          }, !inline && { pbe: "3xs" }), {
+            children: label
+          })
+        ),
+        children,
+        shouldShowErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime329.jsx)(FieldError, { children: errorMessage })
+      ]
+    })
+  );
 }
 
 // src/features/forms/components/FormBigDecimalField.tsx
@@ -37296,9 +37377,19 @@ var Input2 = (0, import_react222.forwardRef)(
 var import_effect9 = require("effect");
 var BIG_DECIMAL_ZERO = import_effect9.BigDecimal.fromBigInt(BigInt(0));
 var BIG_DECIMAL_ONE = import_effect9.BigDecimal.fromBigInt(BigInt(1));
+var BIG_DECIMAL_NEG_ONE = import_effect9.BigDecimal.fromBigInt(BigInt(-1));
 var BIG_DECIMAL_ONE_HUNDRED = import_effect9.BigDecimal.fromBigInt(BigInt(100));
-var DECIMAL_CHARS_REGEX = /^[\d.,-]+$/;
-var NON_NEGATIVE_DECIMAL_CHARS_REGEX = /^[\d.,]+$/;
+var buildDecimalCharRegex = ({
+  allowNegative = true,
+  allowPercent = false,
+  allowDollar = false
+} = {}) => {
+  let allowed = "\\d.,";
+  if (allowNegative) allowed += "\\-";
+  if (allowPercent) allowed += "%";
+  if (allowDollar) allowed += "\\$";
+  return new RegExp(`^[${allowed}]+$`);
+};
 var convertBigDecimalToCents = (amount) => {
   const scaled = import_effect9.BigDecimal.multiply(amount, BIG_DECIMAL_ONE_HUNDRED);
   const rounded = import_effect9.BigDecimal.round(scaled, { scale: 0 });
@@ -37308,14 +37399,38 @@ var convertCentsToBigDecimal = (cents) => {
   const decimalCents = import_effect9.BigDecimal.fromBigInt(BigInt(cents));
   return import_effect9.BigDecimal.unsafeDivide(decimalCents, BIG_DECIMAL_ONE_HUNDRED);
 };
-function formatBigDecimalToString(value, maxDecimalPlaces = 10) {
+var convertPercentToDecimal = (percent) => {
+  return import_effect9.BigDecimal.unsafeDivide(percent, BIG_DECIMAL_ONE_HUNDRED);
+};
+var roundDecimalToCents = (decimal) => {
+  return import_effect9.BigDecimal.round(decimal, { scale: 2 });
+};
+var safeDivide = (dividend, divisor) => {
+  const maybeQuotient = import_effect9.BigDecimal.divide(dividend, divisor);
+  const quotient = import_effect9.Option.match(maybeQuotient, {
+    onNone: () => BIG_DECIMAL_ZERO,
+    onSome: (innerQuotient) => innerQuotient
+  });
+  return quotient;
+};
+var negate = (value) => {
+  return import_effect9.BigDecimal.multiply(value, BIG_DECIMAL_NEG_ONE);
+};
+function formatBigDecimalToString(value, options2 = {
+  mode: "decimal",
+  minDecimalPlaces: 0,
+  maxDecimalPlaces: 3
+}) {
   const normalizedBigDecimal = import_effect9.BigDecimal.normalize(value);
+  const { mode, minDecimalPlaces, maxDecimalPlaces } = options2;
   const formatter2 = new Intl.NumberFormat(
     "en-US",
-    {
-      minimumFractionDigits: 0,
+    __spreadProps(__spreadValues(__spreadValues({
+      style: "decimal"
+    }, mode === "percent" && { style: "percent" }), mode === "currency" && { style: "currency", currency: "USD" }), {
+      minimumFractionDigits: minDecimalPlaces,
       maximumFractionDigits: maxDecimalPlaces
-    }
+    })
   );
   let decimalAsNumber = 0;
   try {
@@ -37327,37 +37442,59 @@ function formatBigDecimalToString(value, maxDecimalPlaces = 10) {
 
 // src/features/forms/components/FormBigDecimalField.tsx
 var import_jsx_runtime332 = require("react/jsx-runtime");
-var DEFAULT_MAX_INPUT_LENGTH = 10;
+var DEFAULT_MAX_VALUE = 1e7;
+var DEFAULT_MIN_DECIMAL_PLACES = 0;
+var DEFAULT_MAX_DECIMAL_PLACES = 3;
+var DECORATOR_CHARS_REGEX = /[,%$]/g;
+var withForceUpdate = (value) => __spreadProps(__spreadValues({}, value), {
+  __forceUpdate: Symbol()
+});
 function FormBigDecimalField(_a) {
   var _b = _a, {
-    maxInputLength = DEFAULT_MAX_INPUT_LENGTH,
-    allowNegative = false
+    mode = "decimal",
+    allowNegative = false,
+    maxValue = mode === "percent" ? 1 : DEFAULT_MAX_VALUE,
+    minDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MIN_DECIMAL_PLACES,
+    maxDecimalPlaces = mode === "currency" ? 2 : DEFAULT_MAX_DECIMAL_PLACES
   } = _b, restProps = __objRest(_b, [
-    "maxInputLength",
-    "allowNegative"
+    "mode",
+    "allowNegative",
+    "maxValue",
+    "minDecimalPlaces",
+    "maxDecimalPlaces"
   ]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
-  const [inputValue, setInputValue] = (0, import_react223.useState)(formatBigDecimalToString(value, maxInputLength));
+  const maxBigDecimalValue = import_effect10.BigDecimal.unsafeFromNumber(maxValue);
+  const formattingProps = (0, import_react223.useMemo)(() => ({
+    minDecimalPlaces,
+    maxDecimalPlaces,
+    mode
+  }), [maxDecimalPlaces, minDecimalPlaces, mode]);
+  const [inputValue, setInputValue] = (0, import_react223.useState)(formatBigDecimalToString(value, formattingProps));
   const onInputChange = (0, import_react223.useCallback)((e) => {
     setInputValue(e.target.value);
   }, []);
   const onInputBlur = (0, import_react223.useCallback)(() => {
-    const cleaned = inputValue.replace(/,/g, "");
-    const maybeDecimal = import_effect10.BigDecimal.fromString(cleaned);
+    const sanitizedInput = inputValue.replace(DECORATOR_CHARS_REGEX, "");
+    const maybeDecimal = import_effect10.BigDecimal.fromString(sanitizedInput);
     const decimal = import_effect10.Option.match(maybeDecimal, {
       onNone: () => BIG_DECIMAL_ZERO,
-      onSome: (amount) => amount
+      onSome: (value2) => value2
     });
-    const normalizedDecimal = import_effect10.BigDecimal.normalize(decimal);
-    handleChange(normalizedDecimal);
+    const adjustedForPercent = mode === "percent" ? convertPercentToDecimal(decimal) : decimal;
+    const normalized = import_effect10.BigDecimal.normalize(adjustedForPercent);
+    const clamped = import_effect10.BigDecimal.min(normalized, maxBigDecimalValue);
+    if (!import_effect10.BigDecimal.equals(clamped, value)) {
+      handleChange(withForceUpdate(clamped));
+    }
     handleBlur();
-    setInputValue(formatBigDecimalToString(normalizedDecimal, maxInputLength));
-  }, [inputValue, handleBlur, handleChange, maxInputLength]);
+    setInputValue(formatBigDecimalToString(clamped, formattingProps));
+  }, [inputValue, mode, maxBigDecimalValue, value, handleBlur, formattingProps, handleChange]);
   const allowedChars = (0, import_react223.useMemo)(
-    () => allowNegative ? DECIMAL_CHARS_REGEX : NON_NEGATIVE_DECIMAL_CHARS_REGEX,
-    [allowNegative]
+    () => buildDecimalCharRegex({ allowNegative, allowPercent: mode === "percent", allowDollar: mode === "currency" }),
+    [allowNegative, mode]
   );
   const onBeforeInput = (0, import_react223.useCallback)((e) => {
     if (e.data && !allowedChars.test(e.data)) {
@@ -37371,9 +37508,9 @@ function FormBigDecimalField(_a) {
     }
   }, [allowedChars]);
   (0, import_react223.useEffect)(() => {
-    setInputValue(formatBigDecimalToString(value, maxInputLength));
-  }, [value, maxInputLength]);
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, restProps), { inputMode: "decimal", children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+    setInputValue(formatBigDecimalToString(value, formattingProps));
+  }, [value, formattingProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, restProps), { inputMode: "decimal", children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(InputGroup2, { slot: "input", children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
     Input2,
     {
       inset: true,
@@ -37382,7 +37519,6 @@ function FormBigDecimalField(_a) {
       value: inputValue,
       onChange: onInputChange,
       onBlur: onInputBlur,
-      maxLength: maxInputLength,
       onBeforeInput,
       onPaste
     }
@@ -37390,7 +37526,6 @@ function FormBigDecimalField(_a) {
 }
 
 // src/features/forms/components/FormCheckboxField.tsx
-var import_react224 = require("react");
 var import_classnames89 = __toESM(require("classnames"));
 var import_jsx_runtime333 = require("react/jsx-runtime");
 var FORM_CHECKBOX_FIELD_CLASSNAME = "Layer__FormCheckboxField";
@@ -37399,89 +37534,146 @@ function FormCheckboxField({
   className,
   inline = false,
   showLabel = true,
-  showErrorInTooltip = true
+  showFieldError = true,
+  isReadOnly = false
 }) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { meta, value } = state;
   const { errors, isValid: isValid2 } = meta;
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
-  const tooltipProps = showErrorInTooltip ? { tooltip: errorMessage } : {};
+  const tooltipProps = showFieldError ? { tooltip: errorMessage } : {};
   const additionalAriaProps = !showLabel && { "aria-label": label };
   const checkboxClassNames = (0, import_classnames89.default)(
     FORM_CHECKBOX_FIELD_CLASSNAME,
     inline && `${FORM_CHECKBOX_FIELD_CLASSNAME}--inline`,
     className
   );
-  const onChange = (0, import_react224.useCallback)((isSelected) => {
-    handleChange(isSelected);
-  }, [handleChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
     CheckboxWithTooltip,
     __spreadProps(__spreadValues(__spreadValues(__spreadValues({
       className: checkboxClassNames,
       isSelected: value,
       isInvalid: !isValid2,
-      onChange,
+      onChange: handleChange,
       onBlur: handleBlur,
       name,
       value: name,
-      size: "lg"
+      size: "lg",
+      isReadOnly
     }, tooltipProps), additionalAriaProps), !isValid2 && { variant: "error" }), {
       children: showLabel && /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(Label, { slot: "label", size: "sm", htmlFor: name, children: label })
     })
   );
 }
 
-// src/features/forms/components/FormCurrencyField.tsx
+// src/features/forms/components/FormDateField.tsx
 var import_react225 = require("react");
-var import_react_currency_input_field2 = __toESM(require("react-currency-input-field"));
-var import_effect11 = require("effect");
+
+// src/components/ui/Date/Date.tsx
+var import_react224 = require("react");
+var import_classnames90 = __toESM(require("classnames"));
+var import_react_aria_components17 = require("react-aria-components");
 var import_jsx_runtime334 = require("react/jsx-runtime");
-var ZERO_CENTS_INPUT_VALUE = "0.00";
-var getCurrencyInputValueFromCents = (cents) => !Number.isNaN(cents) ? centsToDollarsWithoutCommas(cents) : ZERO_CENTS_INPUT_VALUE;
-function FormCurrencyField(props) {
+var DATE_FIELD_CLASS_NAME = "Layer__UI__DateField";
+var DateField = (0, import_react224.forwardRef)(
+  function DateField2(_a, ref) {
+    var _b = _a, { inline, className, isReadOnly } = _b, restProps = __objRest(_b, ["inline", "className", "isReadOnly"]);
+    const dataProperties = toDataProperties({ inline, readonly: isReadOnly });
+    return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      import_react_aria_components17.DateField,
+      __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
+        isReadOnly,
+        className: (0, import_classnames90.default)(DATE_FIELD_CLASS_NAME, className),
+        ref
+      })
+    );
+  }
+);
+var DATE_INPUT_CLASS_NAME = "Layer__UI__DateInput";
+var DateInput = (0, import_react224.forwardRef)(
+  function DateInput2(_a, ref) {
+    var _b = _a, { inset } = _b, restProps = __objRest(_b, ["inset"]);
+    const dataProperties = toDataProperties({ inset });
+    return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      import_react_aria_components17.DateInput,
+      __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
+        className: (0, import_classnames90.default)(DATE_INPUT_CLASS_NAME),
+        ref
+      })
+    );
+  }
+);
+var DATE_SEGMENT_CLASS_NAME = "Layer__UI__DateSegment";
+var DateSegment = (0, import_react224.forwardRef)(
+  function DateSegment2(_a, ref) {
+    var _b = _a, { isReadOnly } = _b, restProps = __objRest(_b, ["isReadOnly"]);
+    const dataProperties = toDataProperties({ interactive: !isReadOnly });
+    return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
+      import_react_aria_components17.DateSegment,
+      __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
+        className: DATE_SEGMENT_CLASS_NAME,
+        ref
+      })
+    );
+  }
+);
+
+// src/features/forms/components/FormDateField.tsx
+var import_jsx_runtime335 = require("react/jsx-runtime");
+function FormDateField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  showFieldError = true,
+  isReadOnly = false
+}) {
   const field = useFieldContext();
-  const { label } = props;
   const { name, state, handleChange, handleBlur } = field;
-  const { value } = state;
-  const [inputValue, setInputValue] = (0, import_react225.useState)(getCurrencyInputValueFromCents(value));
-  const onInputChange = (0, import_react225.useCallback)((newValue) => {
-    setInputValue(newValue != null ? newValue : ZERO_CENTS_INPUT_VALUE);
-  }, []);
-  const onInputBlur = (0, import_react225.useCallback)(() => {
-    const maybeAmount = import_effect11.BigDecimal.fromString(inputValue);
-    const cents = import_effect11.Option.match(maybeAmount, {
-      onNone: () => 0,
-      onSome: (amount) => convertBigDecimalToCents(amount)
-    });
-    handleChange(cents);
-    handleBlur();
-    setInputValue(getCurrencyInputValueFromCents(cents));
-  }, [inputValue, handleChange, handleBlur]);
+  const { meta, value } = state;
+  const { errors, isValid: isValid2 } = meta;
+  const [localDate, setLocalDate] = (0, import_react225.useState)(value);
   (0, import_react225.useEffect)(() => {
-    setInputValue(getCurrencyInputValueFromCents(value));
+    setLocalDate(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
-    import_react_currency_input_field2.default,
-    {
+  const onBlur = (0, import_react225.useCallback)(() => {
+    const nextDate = isZonedDateTime(localDate) ? localDate : null;
+    handleChange(nextDate);
+    handleBlur();
+  }, [handleBlur, handleChange, localDate]);
+  const errorMessage = errors.length !== 0 ? errors[0] : void 0;
+  const shouldShowErrorMessage = showFieldError && errorMessage;
+  const additionalAriaProps = !showLabel && { "aria-label": label };
+  return /* @__PURE__ */ (0, import_jsx_runtime335.jsxs)(
+    DateField,
+    __spreadProps(__spreadValues({
       name,
-      intlConfig: {
-        locale: "en-US",
-        currency: "USD"
-      },
-      prefix: "$",
-      decimalScale: 2,
-      decimalsLimit: 2,
-      disableAbbreviations: true,
-      value: inputValue,
-      onValueChange: onInputChange,
-      onBlur: onInputBlur,
-      className: "Layer__UI__Input",
-      "data-inset": "true",
-      "aria-label": label
-    }
-  ) }) }));
+      granularity: "day",
+      value: localDate,
+      isInvalid: !isValid2,
+      inline,
+      className,
+      onChange: setLocalDate,
+      onBlur,
+      isReadOnly
+    }, additionalAriaProps), {
+      children: [
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
+          Label,
+          __spreadProps(__spreadValues({
+            slot: "label",
+            size: "sm",
+            htmlFor: name
+          }, !inline && { pbe: "3xs" }), {
+            children: label
+          })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(InputGroup2, { slot: "input", children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(DateInput, { inset: true, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(DateSegment, { isReadOnly, segment }) }) }),
+        shouldShowErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(FieldError, { children: errorMessage })
+      ]
+    })
+  );
 }
 
 // src/features/forms/components/FormTextAreaField.tsx
@@ -37489,15 +37681,15 @@ var import_react227 = require("react");
 
 // src/components/ui/Input/TextArea.tsx
 var import_react226 = require("react");
-var import_react_aria_components17 = require("react-aria-components");
-var import_jsx_runtime335 = require("react/jsx-runtime");
+var import_react_aria_components18 = require("react-aria-components");
+var import_jsx_runtime336 = require("react/jsx-runtime");
 var TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 var TextArea = (0, import_react226.forwardRef)(
   function TextArea2(_a, ref) {
     var _b = _a, { resize = "none" } = _b, restProps = __objRest(_b, ["resize"]);
     const dataProperties = toDataProperties({ resize });
-    return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
-      import_react_aria_components17.TextArea,
+    return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(
+      import_react_aria_components18.TextArea,
       __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
         className: TEXTAREA_CLASS_NAME,
         ref
@@ -37507,7 +37699,7 @@ var TextArea = (0, import_react226.forwardRef)(
 );
 
 // src/features/forms/components/FormTextAreaField.tsx
-var import_jsx_runtime336 = require("react/jsx-runtime");
+var import_jsx_runtime337 = require("react/jsx-runtime");
 function FormTextAreaField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
@@ -37515,12 +37707,22 @@ function FormTextAreaField(props) {
   const onChange = (0, import_react227.useCallback)((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, props), { isTextArea: true, children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(TextArea, { id: name, name, value, onChange, onBlur: handleBlur }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, props), { isTextArea: true, children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+    TextArea,
+    {
+      slot: "input",
+      id: name,
+      name,
+      value,
+      onChange,
+      onBlur: handleBlur
+    }
+  ) }));
 }
 
 // src/features/forms/components/FormTextField.tsx
 var import_react228 = require("react");
-var import_jsx_runtime337 = require("react/jsx-runtime");
+var import_jsx_runtime338 = require("react/jsx-runtime");
 function FormTextField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
@@ -37528,17 +37730,27 @@ function FormTextField(props) {
   const onChange = (0, import_react228.useCallback)((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Input2, { inset: true, id: name, name, value, onChange, onBlur: handleBlur }) }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(InputGroup2, { slot: "input", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+    Input2,
+    {
+      id: name,
+      name,
+      value,
+      onChange,
+      onBlur: handleBlur,
+      inset: true
+    }
+  ) }) }));
 }
 
 // src/features/forms/hooks/useForm.tsx
 var { fieldContext, useFieldContext, formContext, useFormContext } = (0, import_react_form6.createFormHookContexts)();
-var { useAppForm, withForm } = (0, import_react_form6.createFormHook)({
+var { useAppForm: useInternalAppForm } = (0, import_react_form6.createFormHook)({
   fieldComponents: {
     BaseFormTextField,
     FormBigDecimalField,
     FormCheckboxField,
-    FormCurrencyField,
+    FormDateField,
     FormTextAreaField,
     FormTextField
   },
@@ -37548,9 +37760,104 @@ var { useAppForm, withForm } = (0, import_react_form6.createFormHook)({
   fieldContext,
   formContext
 });
+function useAppForm(props) {
+  return useInternalAppForm(props);
+}
 
 // src/features/invoices/invoiceSchemas.ts
 var import_effect12 = require("effect");
+
+// src/components/Invoices/InvoiceTermsComboBox/InvoiceTermsComboBox.tsx
+var import_react229 = require("react");
+var import_date_fns51 = require("date-fns");
+var import_jsx_runtime339 = require("react/jsx-runtime");
+var InvoiceTermsValues = /* @__PURE__ */ ((InvoiceTermsValues2) => {
+  InvoiceTermsValues2["Net10"] = "Net10";
+  InvoiceTermsValues2["Net15"] = "Net15";
+  InvoiceTermsValues2["Net30"] = "Net30";
+  InvoiceTermsValues2["Net60"] = "Net60";
+  InvoiceTermsValues2["Net90"] = "Net90";
+  InvoiceTermsValues2["Custom"] = "Custom";
+  return InvoiceTermsValues2;
+})(InvoiceTermsValues || {});
+var InvoiceTermsOptionConfig = {
+  ["Net10" /* Net10 */]: { label: "Net 10", value: "Net10" /* Net10 */ },
+  ["Net15" /* Net15 */]: { label: "Net 15", value: "Net15" /* Net15 */ },
+  ["Net30" /* Net30 */]: { label: "Net 30", value: "Net30" /* Net30 */ },
+  ["Net60" /* Net60 */]: { label: "Net 60", value: "Net60" /* Net60 */ },
+  ["Net90" /* Net90 */]: { label: "Net 90", value: "Net90" /* Net90 */ },
+  ["Custom" /* Custom */]: { label: "Custom", value: "Custom" /* Custom */ }
+};
+var options = Object.values(InvoiceTermsOptionConfig);
+var getDurationInDaysFromTerms = (terms) => {
+  switch (terms) {
+    case "Net10" /* Net10 */:
+      return 10;
+    case "Net15" /* Net15 */:
+      return 15;
+    case "Net30" /* Net30 */:
+      return 30;
+    case "Net60" /* Net60 */:
+      return 60;
+    case "Net90" /* Net90 */:
+      return 90;
+    case "Custom" /* Custom */:
+    default:
+      return void 0;
+  }
+};
+var getInvoiceTermsFromDates = (sentAt, dueAt) => {
+  if (!sentAt || !dueAt) return "Custom" /* Custom */;
+  const days = (0, import_date_fns51.differenceInDays)(
+    (0, import_date_fns51.startOfDay)(dueAt.toDate()),
+    (0, import_date_fns51.startOfDay)(sentAt.toDate())
+  );
+  switch (days) {
+    case 10:
+      return "Net10" /* Net10 */;
+    case 15:
+      return "Net15" /* Net15 */;
+    case 30:
+      return "Net30" /* Net30 */;
+    case 60:
+      return "Net60" /* Net60 */;
+    case 90:
+      return "Net90" /* Net90 */;
+    default:
+      return "Custom" /* Custom */;
+  }
+};
+var InvoiceTermsComboBox = ({ value, onValueChange, isReadOnly }) => {
+  const selectedOption = InvoiceTermsOptionConfig[value];
+  const onSelectedValueChange = (0, import_react229.useCallback)((option) => {
+    onValueChange((option == null ? void 0 : option.value) || null);
+  }, [onValueChange]);
+  const inputId = (0, import_react229.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(HStack, { className: "Layer__InvoiceForm__TermsComboBox Layer__InvoiceForm__Field__Terms", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(Label, { size: "sm", htmlFor: inputId, children: "Terms" }),
+    /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+      ComboBox,
+      {
+        options,
+        onSelectedValueChange,
+        selectedValue: selectedOption,
+        isSearchable: false,
+        isClearable: false,
+        inputId,
+        isReadOnly
+      }
+    )
+  ] });
+};
+
+// src/utils/schema/utils.ts
+var import_effect11 = require("effect");
+var import_date3 = require("@internationalized/date");
+var ZonedDateTimeFromSelf = import_effect11.Schema.declare(
+  (input) => input instanceof import_date3.ZonedDateTime
+);
+
+// src/features/invoices/invoiceSchemas.ts
 var InvoiceStatus = /* @__PURE__ */ ((InvoiceStatus3) => {
   InvoiceStatus3["Voided"] = "VOIDED";
   InvoiceStatus3["Paid"] = "PAID";
@@ -37683,7 +37990,11 @@ var UpsertInvoiceLineItemSchema = import_effect12.Schema.Struct({
     import_effect12.Schema.propertySignature(import_effect12.Schema.Number),
     import_effect12.Schema.fromKey("unit_price")
   ),
-  quantity: import_effect12.Schema.BigDecimal
+  quantity: import_effect12.Schema.BigDecimal,
+  salesTaxes: (0, import_effect12.pipe)(
+    import_effect12.Schema.propertySignature(import_effect12.Schema.UndefinedOr(import_effect12.Schema.Array(UpsertInvoiceTaxLineItemSchema))),
+    import_effect12.Schema.fromKey("sales_taxes")
+  )
 });
 var UpsertInvoiceSchema = import_effect12.Schema.Struct({
   sentAt: (0, import_effect12.pipe)(
@@ -37710,15 +38021,33 @@ var UpsertInvoiceSchema = import_effect12.Schema.Struct({
   additionalDiscount: (0, import_effect12.pipe)(
     import_effect12.Schema.propertySignature(import_effect12.Schema.UndefinedOr(import_effect12.Schema.Number)),
     import_effect12.Schema.fromKey("additional_discount")
-  ),
-  additionalSalesTaxes: (0, import_effect12.pipe)(
-    import_effect12.Schema.propertySignature(import_effect12.Schema.UndefinedOr(import_effect12.Schema.Array(UpsertInvoiceTaxLineItemSchema))),
-    import_effect12.Schema.fromKey("additional_sales_taxes")
   )
 });
+var InvoiceFormLineItemSchema = import_effect12.Schema.Struct({
+  description: import_effect12.Schema.String,
+  product: import_effect12.Schema.String,
+  unitPrice: import_effect12.Schema.BigDecimal,
+  quantity: import_effect12.Schema.BigDecimal,
+  amount: import_effect12.Schema.BigDecimal,
+  isTaxable: import_effect12.Schema.Boolean
+});
+var InvoiceTermsValuesSchema = import_effect12.Schema.Enums(InvoiceTermsValues);
+var InvoiceFormSchema = import_effect12.Schema.Struct({
+  terms: InvoiceTermsValuesSchema,
+  sentAt: import_effect12.Schema.NullOr(ZonedDateTimeFromSelf),
+  dueAt: import_effect12.Schema.NullOr(ZonedDateTimeFromSelf),
+  invoiceNumber: import_effect12.Schema.String,
+  customer: import_effect12.Schema.NullOr(CustomerSchema),
+  email: import_effect12.Schema.String,
+  address: import_effect12.Schema.String,
+  lineItems: import_effect12.Schema.Array(InvoiceFormLineItemSchema),
+  discountRate: import_effect12.Schema.BigDecimal,
+  taxRate: import_effect12.Schema.BigDecimal,
+  memo: import_effect12.Schema.String
+});
 
 // src/features/invoices/api/useUpsertInvoice.tsx
-var import_react229 = require("react");
+var import_react230 = require("react");
 var import_mutation26 = __toESM(require("swr/mutation"));
 var import_effect13 = require("effect");
 var UPSERT_INVOICES_TAG_KEY = "#upsert-invoice";
@@ -37809,12 +38138,13 @@ var useUpsertInvoice = (props) => {
       }).then(import_effect13.Schema.decodeUnknownPromise(UpsertInvoiceReturnSchema));
     },
     {
-      revalidate: false
+      revalidate: false,
+      throwOnError: true
     }
   );
   const mutationResponse = new UpsertInvoiceSWRResponse(rawMutationResponse);
   const originalTrigger = mutationResponse.trigger;
-  const stableProxiedTrigger = (0, import_react229.useCallback)(
+  const stableProxiedTrigger = (0, import_react230.useCallback)(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
       return triggerResult;
@@ -37832,77 +38162,293 @@ var useUpsertInvoice = (props) => {
 };
 
 // src/components/Invoices/InvoiceForm/useInvoiceForm.ts
+var import_effect16 = require("effect");
+
+// src/components/Invoices/InvoiceForm/totalsUtils.ts
 var import_effect14 = require("effect");
-var EMPTY_LINE_ITEM = {
+function computeSubtotal(lineItems) {
+  return lineItems.reduce((sum, item) => import_effect14.BigDecimal.sum(sum, item.amount), BIG_DECIMAL_ZERO);
+}
+var computeRawTaxableSubtotal = (lineItems) => lineItems.filter((item) => item.isTaxable).reduce((sum, item) => import_effect14.BigDecimal.sum(sum, item.amount), BIG_DECIMAL_ZERO);
+function computeAdditionalDiscount({
+  subtotal,
+  discountRate
+}) {
+  const rawDiscountAmount = import_effect14.BigDecimal.multiply(subtotal, discountRate);
+  const additionalDiscount = roundDecimalToCents(rawDiscountAmount);
+  return additionalDiscount;
+}
+function computeTaxableSubtotal({
+  rawTaxableSubtotal,
+  discountRate
+}) {
+  const discountForTaxableSubtotal = import_effect14.BigDecimal.multiply(rawTaxableSubtotal, discountRate);
+  const taxableSubtotal = import_effect14.BigDecimal.subtract(rawTaxableSubtotal, discountForTaxableSubtotal);
+  return taxableSubtotal;
+}
+function computeTaxes({
+  taxableSubtotal,
+  taxRate
+}) {
+  const rawTaxAmount = import_effect14.BigDecimal.multiply(taxableSubtotal, taxRate);
+  const taxes = roundDecimalToCents(rawTaxAmount);
+  return taxes;
+}
+function computeGrandTotal({
+  subtotal,
+  additionalDiscount,
+  taxes
+}) {
+  const subtotalLessDiscounts = import_effect14.BigDecimal.subtract(subtotal, additionalDiscount);
+  const grandTotal = import_effect14.BigDecimal.sum(subtotalLessDiscounts, taxes);
+  return grandTotal;
+}
+var getGrandTotalFromInvoice = (invoice) => {
+  const { lineItems, discountRate, taxRate } = invoice;
+  const subtotal = computeSubtotal(lineItems);
+  const rawTaxableSubtotal = computeRawTaxableSubtotal(lineItems);
+  const taxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal, discountRate });
+  const taxes = computeTaxes({ taxableSubtotal, taxRate });
+  const additionalDiscount = computeAdditionalDiscount({ subtotal, discountRate });
+  const grandTotal = computeGrandTotal({ subtotal, additionalDiscount, taxes });
+  return grandTotal;
+};
+
+// src/components/Invoices/InvoiceForm/formUtils.ts
+var import_effect15 = require("effect");
+var import_date_fns52 = require("date-fns");
+var import_date4 = require("@internationalized/date");
+var import_lodash6 = __toESM(require_lodash());
+var getEmptyLineItem = () => ({
   product: "",
   description: "",
-  unitPrice: 0,
+  unitPrice: BIG_DECIMAL_ZERO,
   quantity: BIG_DECIMAL_ONE,
-  amount: 0,
+  amount: BIG_DECIMAL_ZERO,
   isTaxable: false
-};
-var DEFAULT_FORM_VALUES = {
-  invoiceNumber: "",
-  customer: null,
-  email: "",
-  address: "",
-  lineItems: [EMPTY_LINE_ITEM]
+});
+var getInvoiceFormDefaultValues = () => {
+  const sentAt = (0, import_date4.fromDate)((0, import_date_fns52.startOfToday)(), (0, import_date4.getLocalTimeZone)());
+  const dueAt = sentAt.add({ days: 30 });
+  return {
+    invoiceNumber: "",
+    terms: "Net30" /* Net30 */,
+    sentAt,
+    dueAt,
+    customer: null,
+    email: "",
+    address: "",
+    lineItems: [getEmptyLineItem()],
+    memo: "",
+    discountRate: BIG_DECIMAL_ZERO,
+    taxRate: BIG_DECIMAL_ZERO
+  };
 };
 var getInvoiceLineItemAmount = (lineItem) => {
   const { unitPrice, quantity } = lineItem;
-  return convertBigDecimalToCents(import_effect14.BigDecimal.multiply(quantity, convertCentsToBigDecimal(unitPrice)));
+  return import_effect15.BigDecimal.multiply(quantity, convertCentsToBigDecimal(unitPrice));
 };
-var getAugmentedInvoiceFormLineItem = (lineItem) => {
-  return __spreadProps(__spreadValues({}, lineItem), {
+var getInvoiceFormLineItem = (lineItem) => {
+  const { product, description, unitPrice, quantity } = lineItem;
+  return {
+    product: product || "",
+    description: description || "",
+    quantity: import_effect15.BigDecimal.normalize(quantity),
+    unitPrice: convertCentsToBigDecimal(unitPrice),
     amount: getInvoiceLineItemAmount(lineItem),
     isTaxable: lineItem.salesTaxTotal > 0
-  });
+  };
 };
-var getInvoiceFormDefaultValues = (invoice) => {
+var getInvoiceFormInitialValues = (invoice) => {
   var _a, _b;
+  const invoiceFormLineItems = invoice.lineItems.map(getInvoiceFormLineItem);
+  const subtotal = computeSubtotal(invoiceFormLineItems);
+  const rawTaxableSubtotal = computeRawTaxableSubtotal(invoiceFormLineItems);
+  const additionalDiscount = convertCentsToBigDecimal(invoice.additionalDiscount);
+  const discountRate = safeDivide(additionalDiscount, subtotal);
+  const taxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal, discountRate });
+  const taxes = invoice.lineItems.reduce(
+    (sum, item) => import_effect15.BigDecimal.sum(sum, convertCentsToBigDecimal(item.salesTaxTotal)),
+    BIG_DECIMAL_ZERO
+  );
+  const taxRate = safeDivide(taxes, taxableSubtotal);
+  const sentAt = invoice.sentAt ? (0, import_date4.fromDate)(invoice.sentAt, "UTC") : null;
+  const dueAt = invoice.dueAt ? (0, import_date4.fromDate)(invoice.dueAt, "UTC") : null;
   return {
-    invoiceNumber: invoice.invoiceNumber,
+    terms: getInvoiceTermsFromDates(sentAt, dueAt),
+    invoiceNumber: invoice.invoiceNumber || "",
+    sentAt,
+    dueAt,
     customer: invoice.customer,
-    email: (_a = invoice.customer) == null ? void 0 : _a.email,
-    address: (_b = invoice.customer) == null ? void 0 : _b.addressString,
-    lineItems: invoice.lineItems.map(getAugmentedInvoiceFormLineItem)
+    email: ((_a = invoice.customer) == null ? void 0 : _a.email) || "",
+    address: ((_b = invoice.customer) == null ? void 0 : _b.addressString) || "",
+    lineItems: invoiceFormLineItems,
+    discountRate,
+    taxRate,
+    memo: invoice.memo || ""
   };
 };
+var getIsEqualLineItems = (a, b) => {
+  return (0, import_lodash6.isEqualWith)(a, b, (val1, val2, key) => {
+    if (key === "unitPrice" || key === "quantity" || key === "amount") {
+      return import_effect15.BigDecimal.isBigDecimal(val1) && import_effect15.BigDecimal.isBigDecimal(val2) && import_effect15.BigDecimal.equals(val1, val2);
+    }
+    return void 0;
+  });
+};
+var validateOnSubmit = ({ value: invoice }) => {
+  const errors = [];
+  if (invoice.customer === null) {
+    errors.push({ customer: "Customer is a required field." });
+  }
+  if (!invoice.invoiceNumber.trim()) {
+    errors.push({ invoiceNumber: "Invoice number is a required field." });
+  }
+  if (invoice.sentAt === null) {
+    errors.push({ sentAt: "Invoice date is a required field." });
+  }
+  if (invoice.dueAt === null) {
+    errors.push({ dueAt: "Due date is a required field." });
+  }
+  if (invoice.lineItems.length === 0) {
+    errors.push({ lineItems: "Invoice requires at least one line item." });
+  }
+  const emptyLineItem = getEmptyLineItem();
+  invoice.lineItems.some((item) => {
+    if (!getIsEqualLineItems(item, emptyLineItem) && item.product === "") {
+      errors.push({ lineItems: "Invoice has incomplete line items. Please include required field Product/Service." });
+      return true;
+    }
+  });
+  const grandTotal = getGrandTotalFromInvoice(invoice);
+  if (import_effect15.BigDecimal.isNegative(grandTotal)) {
+    errors.push({ lineItems: "Invoice has a negative total." });
+  }
+  return errors.length > 0 ? errors : null;
+};
+function flattenValidationErrors(errors) {
+  return Object.values(errors).filter(
+    (value) => Array.isArray(value) && value.every((entry) => typeof entry === "object" && entry !== null)
+  ).flatMap(
+    (errorArray) => errorArray.flatMap(
+      (entry) => Object.values(entry)
+    )
+  );
+}
+var convertInvoiceFormToParams = (form) => {
+  var _a, _b, _c;
+  return __spreadValues({
+    customerId: (_a = form.customer) == null ? void 0 : _a.id,
+    dueAt: (_b = form.dueAt) == null ? void 0 : _b.toDate(),
+    sentAt: (_c = form.sentAt) == null ? void 0 : _c.toDate(),
+    invoiceNumber: form.invoiceNumber || void 0,
+    memo: form.memo,
+    lineItems: form.lineItems.map((item) => {
+      const baseLineItem = {
+        description: item.description,
+        product: item.product,
+        unitPrice: convertBigDecimalToCents(item.unitPrice),
+        quantity: item.quantity
+      };
+      return !import_effect15.BigDecimal.equals(form.taxRate, BIG_DECIMAL_ZERO) && item.isTaxable ? __spreadProps(__spreadValues({}, baseLineItem), {
+        salesTaxes: [
+          {
+            amount: convertBigDecimalToCents(
+              import_effect15.BigDecimal.multiply(item.amount, form.taxRate)
+            )
+          }
+        ]
+      }) : baseLineItem;
+    })
+  }, !import_effect15.BigDecimal.equals(form.discountRate, BIG_DECIMAL_ZERO) && {
+    additionalDiscount: convertBigDecimalToCents(
+      import_effect15.BigDecimal.multiply(computeSubtotal(form.lineItems), form.discountRate)
+    )
+  });
+};
+
+// src/components/Invoices/InvoiceForm/useInvoiceForm.ts
+function isUpdateMode(props) {
+  return props.mode === "Update" /* Update */;
+}
 var useInvoiceForm = (props) => {
-  const [submitError, setSubmitError] = (0, import_react230.useState)(void 0);
+  const [submitError, setSubmitError] = (0, import_react231.useState)(void 0);
   const { onSuccess, mode } = props;
   const upsertInvoiceProps = mode === "Update" /* Update */ ? { mode, invoiceId: props.invoice.id } : { mode };
   const { trigger: upsertInvoice } = useUpsertInvoice(upsertInvoiceProps);
-  const defaultValues = mode === "Update" /* Update */ ? getInvoiceFormDefaultValues(props.invoice) : DEFAULT_FORM_VALUES;
-  const form = useAppForm({
-    defaultValues,
-    onSubmit: (_0) => __async(null, [_0], function* ({ value }) {
-      var _a;
-      try {
-        const payload = __spreadProps(__spreadValues({}, value), {
-          customerId: (_a = value == null ? void 0 : value.customer) == null ? void 0 : _a.id
-        });
-        const invoiceParams = import_effect14.Schema.validateSync(UpsertInvoiceSchema)(payload);
-        const { data: invoice } = yield upsertInvoice(invoiceParams);
-        setSubmitError(void 0);
-        onSuccess == null ? void 0 : onSuccess(invoice);
-      } catch (e) {
-        setSubmitError("Something went wrong. Please try again.");
-      }
-    })
-  });
+  const defaultValuesRef = (0, import_react231.useRef)(
+    isUpdateMode(props) ? getInvoiceFormInitialValues(props.invoice) : getInvoiceFormDefaultValues()
+  );
+  const defaultValues = defaultValuesRef.current;
+  const onSubmit = (0, import_react231.useCallback)((_0) => __async(null, [_0], function* ({ value }) {
+    try {
+      const upsertInvoiceParams = convertInvoiceFormToParams(value);
+      const upsertInvoiceRequest = import_effect16.Schema.encodeUnknownSync(UpsertInvoiceSchema)(upsertInvoiceParams);
+      const { data: invoice } = yield upsertInvoice(upsertInvoiceRequest);
+      setSubmitError(void 0);
+      onSuccess == null ? void 0 : onSuccess(invoice);
+    } catch (e) {
+      console.error(e);
+      setSubmitError("Something went wrong. Please try again.");
+    }
+  }), [onSuccess, upsertInvoice]);
+  const validators = (0, import_react231.useMemo)(() => ({
+    onSubmit: validateOnSubmit
+  }), []);
+  const form = useAppForm({ defaultValues, onSubmit, validators });
   const isFormValid = (0, import_react_form7.useStore)(form.store, (state) => state.isValid);
-  return { form, submitError, isFormValid };
+  const isSubmitting = (0, import_react_form7.useStore)(form.store, (state) => state.isSubmitting);
+  const formState = (0, import_react231.useMemo)(() => ({
+    isFormValid,
+    isSubmitting,
+    submitError
+  }), [isFormValid, isSubmitting, submitError]);
+  const discountRate = (0, import_react_form7.useStore)(form.store, (state) => state.values.discountRate);
+  const taxRate = (0, import_react_form7.useStore)(form.store, (state) => state.values.taxRate);
+  const { subtotal, rawTaxableSubtotal } = (0, import_react_form7.useStore)(form.store, (state) => {
+    const lineItems = state.values.lineItems;
+    return {
+      subtotal: computeSubtotal(lineItems),
+      rawTaxableSubtotal: computeRawTaxableSubtotal(lineItems)
+    };
+  });
+  const additionalDiscount = (0, import_react231.useMemo)(
+    () => computeAdditionalDiscount({ subtotal, discountRate }),
+    [subtotal, discountRate]
+  );
+  const taxableSubtotal = (0, import_react231.useMemo)(
+    () => computeTaxableSubtotal({ rawTaxableSubtotal, discountRate }),
+    [rawTaxableSubtotal, discountRate]
+  );
+  const taxes = (0, import_react231.useMemo)(
+    () => computeTaxes({ taxableSubtotal, taxRate }),
+    [taxableSubtotal, taxRate]
+  );
+  const grandTotal = (0, import_react231.useMemo)(
+    () => computeGrandTotal({ subtotal, additionalDiscount, taxes }),
+    [subtotal, additionalDiscount, taxes]
+  );
+  const totals = (0, import_react231.useMemo)(() => ({
+    subtotal,
+    additionalDiscount,
+    taxableSubtotal,
+    taxes,
+    grandTotal
+  }), [additionalDiscount, grandTotal, subtotal, taxableSubtotal, taxes]);
+  return (0, import_react231.useMemo)(
+    () => ({ form, formState, totals }),
+    [form, formState, totals]
+  );
 };
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
 var import_lucide_react16 = require("lucide-react");
-var import_effect15 = require("effect");
+var import_effect17 = require("effect");
 
 // src/features/customers/components/CustomerSelector.tsx
-var import_react231 = require("react");
-var import_classnames90 = __toESM(require("classnames"));
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_react232 = require("react");
+var import_classnames91 = __toESM(require("classnames"));
+var import_jsx_runtime340 = require("react/jsx-runtime");
 function getCustomerName(customer) {
   var _a, _b, _c;
   return (_c = (_b = (_a = customer.individualName) != null ? _a : customer.companyName) != null ? _b : customer.externalId) != null ? _c : "Unknown Customer";
@@ -37933,7 +38479,7 @@ function CustomerSelector({
   inline,
   className
 }) {
-  const combinedClassName = (0, import_classnames90.default)(
+  const combinedClassName = (0, import_classnames91.default)(
     "Layer__CustomerSelector",
     inline && "Layer__CustomerSelector--inline",
     className
@@ -37943,12 +38489,12 @@ function CustomerSelector({
   });
   const effectiveSearchQuery = searchQuery === "" ? void 0 : searchQuery;
   const { data, isLoading, isError } = useListCustomers({ query: effectiveSearchQuery });
-  const options = (0, import_react231.useMemo)(
+  const options2 = (0, import_react232.useMemo)(
     () => (data == null ? void 0 : data.flatMap(({ data: data2 }) => data2).map((customer) => new CustomerAsOption(customer))) || [],
     [data]
   );
   const selectedCustomerId = selectedCustomer == null ? void 0 : selectedCustomer.id;
-  const handleSelectionChange = (0, import_react231.useCallback)(
+  const handleSelectionChange = (0, import_react232.useCallback)(
     (selectedOption) => {
       if (selectedOption === null) {
         handleInputChange("");
@@ -37957,7 +38503,7 @@ function CustomerSelector({
         }
         return;
       }
-      const selectedCustomer2 = options.find(({ id }) => id === selectedOption.value);
+      const selectedCustomer2 = options2.find(({ id }) => id === selectedOption.value);
       if (selectedCustomer2) {
         const selectedCustomerWithType = selectedCustomer2.original;
         if (selectedCustomer2.id !== selectedCustomerId) {
@@ -37967,9 +38513,9 @@ function CustomerSelector({
         return;
       }
     },
-    [options, handleInputChange, selectedCustomerId, onSelectedCustomerChange]
+    [options2, handleInputChange, selectedCustomerId, onSelectedCustomerChange]
   );
-  const selectedCustomerForComboBox = (0, import_react231.useMemo)(
+  const selectedCustomerForComboBox = (0, import_react232.useMemo)(
     () => {
       if (selectedCustomer === null) {
         return null;
@@ -37981,12 +38527,12 @@ function CustomerSelector({
     },
     [selectedCustomer]
   );
-  const EmptyMessage = (0, import_react231.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(P, { variant: "subtle", children: "No matching customer" }),
+  const EmptyMessage = (0, import_react232.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(P, { variant: "subtle", children: "No matching customer" }),
     []
   );
-  const ErrorMessage = (0, import_react231.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+  const ErrorMessage = (0, import_react232.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
       P,
       {
         size: "xs",
@@ -37996,143 +38542,287 @@ function CustomerSelector({
     ),
     []
   );
-  const inputId = (0, import_react231.useId)();
-  const isFiltered = effectiveSearchQuery !== void 0;
-  const noCustomersExist = !isLoading && !isFiltered && data !== void 0 && data.every(({ data: data2 }) => data2.length === 0);
-  const shouldHideComponent = noCustomersExist || isReadOnly && selectedCustomer === null;
-  if (shouldHideComponent) {
-    return null;
-  }
+  const inputId = (0, import_react232.useId)();
   const isLoadingWithoutFallback = isLoading && !data;
   const shouldDisableComboBox = isLoadingWithoutFallback || isError;
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(VStack, { className: combinedClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
-    /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(VStack, { className: combinedClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
+    /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(
       ComboBox,
       {
         selectedValue: selectedCustomerForComboBox,
         onSelectedValueChange: handleSelectionChange,
-        options,
+        options: options2,
         onInputValueChange: handleInputChange,
         inputId,
         placeholder,
         slots: { EmptyMessage, ErrorMessage },
-        isDisabled: isReadOnly || shouldDisableComboBox,
+        isDisabled: shouldDisableComboBox,
         isError,
-        isLoading: isLoadingWithoutFallback
+        isLoading: isLoadingWithoutFallback,
+        isReadOnly
       }
     )
   ] });
 }
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
-var import_jsx_runtime339 = require("react/jsx-runtime");
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var INVOICE_FORM_CSS_PREFIX = "Layer__InvoiceForm";
 var INVOICE_FORM_FIELD_CSS_PREFIX = `${INVOICE_FORM_CSS_PREFIX}__Field`;
-var InvoiceForm = (props) => {
-  const { onSuccess, mode } = props;
-  const { form } = useInvoiceForm(
+var getDueAtChanged = (dueAt, previousDueAt) => dueAt === null && previousDueAt !== null || dueAt !== null && previousDueAt === null || dueAt !== null && previousDueAt !== null && dueAt.compare(previousDueAt) !== 0;
+var InvoiceFormTotalRow = ({ label, value, children }) => {
+  const className = (0, import_classnames92.default)(
+    `${INVOICE_FORM_CSS_PREFIX}__TotalRow`,
+    children && `${INVOICE_FORM_CSS_PREFIX}__TotalRow--withField`
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(HStack, { className, align: "center", gap: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { children: label }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { align: "right", children: convertCentsToCurrency(convertBigDecimalToCents(value)) })
+  ] });
+};
+var InvoiceForm = (0, import_react233.forwardRef)((props, ref) => {
+  const { onSuccess, onChangeFormState, isReadOnly, mode } = props;
+  const { form, formState, totals } = useInvoiceForm(
     __spreadValues({ onSuccess }, mode === "Update" /* Update */ ? { mode, invoice: props.invoice } : { mode })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(Form, { className: INVOICE_FORM_CSS_PREFIX, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
-        form.Field,
-        {
-          name: "customer",
-          listeners: {
-            onChange: ({ value: customer }) => {
-              form.setFieldValue("email", customer == null ? void 0 : customer.email);
-              form.setFieldValue("address", customer == null ? void 0 : customer.addressString);
-            }
-          },
-          children: (field) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
-            CustomerSelector,
-            {
-              className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
-              selectedCustomer: field.state.value,
-              onSelectedCustomerChange: field.handleChange,
-              inline: true
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(field.FormTextField, { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email` }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(field.FormTextAreaField, { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address` }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(form.AppField, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(VStack, { gap: "xs", align: "baseline", children: [
-      field.state.value.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(HStack, { gap: "xs", align: "end", className: `${INVOICE_FORM_CSS_PREFIX}__LineItem`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormTextField, { label: "Product", showLabel: index === 0 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormTextField, { label: "Description", showLabel: index === 0 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
-          form.AppField,
+  const { subtotal, additionalDiscount, taxableSubtotal, taxes, grandTotal } = totals;
+  const lastDueAtRef = (0, import_react233.useRef)(null);
+  const updateDueAtFromTermsAndSentAt = (0, import_react233.useCallback)((terms, sentAt) => {
+    if (sentAt == null) return;
+    const duration = getDurationInDaysFromTerms(terms);
+    if (!duration) return;
+    const newDueAt = sentAt.add({ days: duration });
+    const dueAtChanged = getDueAtChanged(lastDueAtRef.current, newDueAt);
+    if (dueAtChanged) {
+      form.setFieldValue("dueAt", newDueAt);
+      lastDueAtRef.current = newDueAt;
+    }
+  }, [form]);
+  const blockNativeOnSubmit = (0, import_react233.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  (0, import_react233.useImperativeHandle)(ref, () => ({
+    submit: () => form.handleSubmit()
+  }));
+  (0, import_react233.useEffect)(() => {
+    onChangeFormState == null ? void 0 : onChangeFormState(formState);
+  }, [formState, onChangeFormState]);
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(Form, { className: INVOICE_FORM_CSS_PREFIX, onSubmit: blockNativeOnSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.Subscribe, { selector: (state) => state.errorMap, children: (errorMap) => {
+      const validationErrors = flattenValidationErrors(errorMap);
+      if (validationErrors.length > 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(HStack, { className: "Layer__InvoiceForm__FormError", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+          DataState,
           {
-            name: `lineItems[${index}].quantity`,
+            className: "Layer__InvoiceForm__FormError__DataState",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(import_lucide_react17.AlertTriangle, { size: 16 }),
+            status: "failed" /* failed */,
+            title: validationErrors[0],
+            titleSize: "md" /* md */,
+            inline: true
+          }
+        ) });
+      }
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(HStack, { gap: "xl", className: `${INVOICE_FORM_CSS_PREFIX}__Terms`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(VStack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+          form.Field,
+          {
+            name: "customer",
             listeners: {
-              onBlur: ({ value: quantity }) => {
-                const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
-                const nextAmount = import_effect15.BigDecimal.multiply(convertCentsToBigDecimal(unitPrice), quantity);
-                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              onChange: ({ value: customer }) => {
+                form.setFieldValue("email", (customer == null ? void 0 : customer.email) || "");
+                form.setFieldValue("address", (customer == null ? void 0 : customer.addressString) || "");
               }
             },
-            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormBigDecimalField, { label: "Quantity", showLabel: index === 0 })
+            children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+              CustomerSelector,
+              {
+                className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
+                selectedCustomer: field.state.value,
+                onSelectedCustomerChange: field.handleChange,
+                isReadOnly,
+                inline: true
+              }
+            )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormTextField, { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email`, isReadOnly: true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormTextAreaField, { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address`, isReadOnly: true }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(VStack, { gap: "xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: "invoiceNumber", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormTextField, { label: "Invoice number", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__InvoiceNo`, isReadOnly }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+          form.Field,
+          {
+            name: "terms",
+            listeners: {
+              onChange: ({ value: terms }) => {
+                const sentAt = form.getFieldValue("sentAt");
+                updateDueAtFromTermsAndSentAt(terms, sentAt);
+              }
+            },
+            children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+              InvoiceTermsComboBox,
+              {
+                value: field.state.value,
+                onValueChange: (value) => {
+                  if (value !== null) {
+                    field.handleChange(value);
+                  }
+                },
+                isReadOnly
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
           form.AppField,
           {
-            name: `lineItems[${index}].unitPrice`,
+            name: "sentAt",
             listeners: {
-              onBlur: ({ value: unitPrice }) => {
-                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
-                const nextAmount = import_effect15.BigDecimal.multiply(convertCentsToBigDecimal(unitPrice), quantity);
-                form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
+              onBlur: ({ value: sentAt }) => {
+                const terms = form.getFieldValue("terms");
+                updateDueAtFromTermsAndSentAt(terms, sentAt);
               }
             },
-            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormCurrencyField, { label: "Rate", showLabel: index === 0 })
+            children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormDateField, { label: "Invoice date", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__SentAt`, isReadOnly })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
           form.AppField,
           {
-            name: `lineItems[${index}].amount`,
+            name: "dueAt",
             listeners: {
-              onBlur: ({ value: amount }) => {
-                const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
-                let nextUnitPrice = BIG_DECIMAL_ZERO;
-                try {
-                  nextUnitPrice = import_effect15.BigDecimal.unsafeDivide(convertCentsToBigDecimal(amount), quantity);
-                } catch (e) {
+              onBlur: ({ value: dueAt }) => {
+                const terms = form.getFieldValue("terms");
+                const previousDueAt = lastDueAtRef.current;
+                const dueAtChanged = getDueAtChanged(dueAt, previousDueAt);
+                if (terms !== "Custom" /* Custom */ && dueAtChanged) {
+                  form.setFieldValue("terms", "Custom" /* Custom */);
+                  lastDueAtRef.current = dueAt;
                 }
-                form.setFieldValue(`lineItems[${index}].unitPrice`, convertBigDecimalToCents(nextUnitPrice));
               }
             },
-            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormCurrencyField, { label: "Amount", showLabel: index === 0 })
+            children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormDateField, { label: "Due date", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__DueAt`, isReadOnly })
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(form.AppField, { name: `lineItems[${index}].isTaxable`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormCheckboxField, { label: "Tax", showLabel: index === 0 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(import_lucide_react16.Trash, { size: 16 }) })
-      ] }, `lineItems[${index}]`)),
-      /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(Button2, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
-        "Add line item",
-        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(import_lucide_react16.Plus, { size: 16 })
+        )
       ] })
-    ] }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.Field, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(VStack, { gap: "xs", align: "baseline", children: [
+        field.state.value.map((_value, index) => (
+          /**
+           * A more correct implementation would use a UUID as the key for this HStack. Specifically, it is an antipattern in
+           * React to use array indices as keys. However, there are some ongoing issues with @tanstack/react-form related to
+           * deleting an element from an array field. In particular, the form values for the remaining array items may become
+           * momentarily undefined as they re-render due to re-indexing. Thus, we use indices here for now.
+           * See here for more information: https://github.com/TanStack/form/issues/1518.
+           */
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(
+            HStack,
+            {
+              gap: "xs",
+              align: "end",
+              className: (0, import_classnames92.default)(`${INVOICE_FORM_CSS_PREFIX}__LineItem`, isReadOnly && `${INVOICE_FORM_CSS_PREFIX}__LineItem--readonly`),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(innerField.FormTextField, { label: "Product/Service", showLabel: index === 0, isReadOnly }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(innerField.FormTextField, { label: "Description", showLabel: index === 0, isReadOnly }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+                  form.AppField,
+                  {
+                    name: `lineItems[${index}].quantity`,
+                    listeners: {
+                      onBlur: ({ value: quantity }) => {
+                        const amount = form.getFieldValue(`lineItems[${index}].amount`);
+                        const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
+                        const nextAmount = import_effect17.BigDecimal.multiply(unitPrice, quantity);
+                        if (!import_effect17.BigDecimal.equals(amount, nextAmount)) {
+                          form.setFieldValue(`lineItems[${index}].amount`, withForceUpdate(nextAmount));
+                        }
+                      }
+                    },
+                    children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(innerField.FormBigDecimalField, { label: "Quantity", showLabel: index === 0, isReadOnly })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+                  form.AppField,
+                  {
+                    name: `lineItems[${index}].unitPrice`,
+                    listeners: {
+                      onBlur: ({ value: unitPrice }) => {
+                        const amount = form.getFieldValue(`lineItems[${index}].amount`);
+                        const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                        const nextAmount = import_effect17.BigDecimal.multiply(unitPrice, quantity);
+                        if (!import_effect17.BigDecimal.equals(amount, nextAmount)) {
+                          form.setFieldValue(`lineItems[${index}].amount`, withForceUpdate(nextAmount));
+                        }
+                      }
+                    },
+                    children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(innerField.FormBigDecimalField, { label: "Rate", mode: "currency", showLabel: index === 0, allowNegative: true, isReadOnly })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(
+                  form.AppField,
+                  {
+                    name: `lineItems[${index}].amount`,
+                    listeners: {
+                      onBlur: ({ value: amount }) => {
+                        const unitPrice = form.getFieldValue(`lineItems[${index}].unitPrice`);
+                        const quantity = form.getFieldValue(`lineItems[${index}].quantity`);
+                        const nextUnitPrice = safeDivide(amount, quantity);
+                        if (!import_effect17.BigDecimal.equals(unitPrice, nextUnitPrice)) {
+                          form.setFieldValue(`lineItems[${index}].unitPrice`, withForceUpdate(nextUnitPrice));
+                        }
+                      }
+                    },
+                    children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(innerField.FormBigDecimalField, { label: "Amount", mode: "currency", showLabel: index === 0, allowNegative: true, isReadOnly })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: `lineItems[${index}].isTaxable`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(innerField.FormCheckboxField, { label: "Tax", showLabel: index === 0, isReadOnly }) }),
+                !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(import_lucide_react16.Trash, { size: 16 }) })
+              ]
+            },
+            index
+          )
+        )),
+        !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(Button2, { variant: "outlined", onClick: () => field.pushValue(getEmptyLineItem()), children: [
+          "Add line item",
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(import_lucide_react16.Plus, { size: 16 })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, pbs: "md", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(HStack, { justify: "space-between", gap: "xl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__AdditionalTextFields`, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: "memo", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormTextAreaField, { label: "Memo", isReadOnly }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__TotalFields`, fluid: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceFormTotalRow, { label: "Subtotal", value: subtotal }),
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceFormTotalRow, { label: "Discount", value: negate(additionalDiscount), children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: "discountRate", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormBigDecimalField, { label: "Discount", showLabel: false, mode: "percent", isReadOnly }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceFormTotalRow, { label: "Taxable subtotal", value: taxableSubtotal }),
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceFormTotalRow, { label: "Tax rate", value: taxes, children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(form.AppField, { name: "taxRate", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(field.FormBigDecimalField, { label: "Tax Rate", showLabel: false, mode: "percent", isReadOnly }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceFormTotalRow, { label: "Total", value: grandTotal })
+        ] })
+      ] }) })
+    ] })
   ] });
-};
+});
+InvoiceForm.displayName = "InvoiceForm";
 
 // src/components/DataPoint/DataPoint.tsx
-var import_jsx_runtime340 = require("react/jsx-runtime");
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var DataPoint = ({ label, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(VStack, { gap: "3xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Span, { variant: "subtle", size: "xs", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(VStack, { gap: "3xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Span, { variant: "subtle", size: "xs", children: label }),
     children
   ] });
 };
 
 // src/components/Invoices/InvoiceStatusCell/InvoiceStatusCell.tsx
 var import_pluralize6 = __toESM(require("pluralize"));
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var getDueStatusConfig = (invoice, { inline }) => {
   const badgeSize = inline ? "xs" /* EXTRA_SMALL */ : "small" /* SMALL */;
   const iconSize = inline ? 10 : 12;
@@ -38146,7 +38836,7 @@ var getDueStatusConfig = (invoice, { inline }) => {
     case "PAID" /* Paid */: {
       return {
         text: "Paid",
-        badge: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(CheckCircle_default, { size: iconSize }), iconOnly: true })
+        badge: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(CheckCircle_default, { size: iconSize }), iconOnly: true })
       };
     }
     case "VOIDED" /* Voided */: {
@@ -38169,7 +38859,7 @@ var getDueStatusConfig = (invoice, { inline }) => {
         return {
           text: "Overdue",
           subText: `Due ${(0, import_pluralize6.default)("day", Math.abs(dueDifference), true)} ago`,
-          badge: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(AlertCircle_default, { size: iconSize }), iconOnly: true })
+          badge: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(AlertCircle_default, { size: iconSize }), iconOnly: true })
         };
       }
       return {
@@ -38189,73 +38879,117 @@ var InvoiceStatusCell = ({ invoice, inline = false }) => {
   const dueStatus = getDueStatusConfig(invoice, { inline });
   const Stack3 = inline ? HStack : VStack;
   const subText = inline && dueStatus.subText ? `(${dueStatus.subText})` : dueStatus.subText;
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(HStack, { gap: "xs", align: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(HStack, { gap: "xs", align: "center", children: [
     dueStatus.badge,
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { children: dueStatus.text }),
-      subText && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { variant: "subtle", size: "sm", children: subText })
+    /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Span, { children: dueStatus.text }),
+      subText && /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Span, { variant: "subtle", size: "sm", children: subText })
     ] }))
   ] });
 };
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime344 = require("react/jsx-runtime");
 var InvoiceDetail = (props) => {
-  const _a = props, { onSuccess: _onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
-  const Header6 = (0, import_react232.useCallback)(() => {
-    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(InvoiceDetailHeader, __spreadValues({}, restProps));
-  }, [restProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
-    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
-    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(InvoiceForm, __spreadValues({}, props))
+  const _a = props, { onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
+  const [isReadOnly, setIsReadOnly] = (0, import_react234.useState)(props.mode === "Update" /* Update */);
+  const formRef = (0, import_react234.useRef)(null);
+  const onSubmit = (0, import_react234.useCallback)(() => {
+    var _a2;
+    return (_a2 = formRef.current) == null ? void 0 : _a2.submit();
+  }, []);
+  const [formState, setFormState] = (0, import_react234.useState)({
+    isFormValid: true,
+    isSubmitting: false,
+    submitError: void 0
+  });
+  const onChangeFormState = (0, import_react234.useCallback)((nextState) => {
+    setFormState(nextState);
+  }, []);
+  const Header6 = (0, import_react234.useCallback)(() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+      InvoiceDetailHeader,
+      __spreadValues({
+        onSubmit,
+        isReadOnly,
+        formState,
+        setIsReadOnly
+      }, restProps)
+    );
+  }, [onSubmit, isReadOnly, formState, restProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
+    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+      InvoiceForm,
+      __spreadProps(__spreadValues({
+        isReadOnly,
+        onSuccess,
+        onChangeFormState
+      }, restProps), {
+        ref: formRef
+      })
+    )
   ] });
 };
 var InvoiceDetailHeader = (props) => {
-  const { mode } = props;
+  const { mode, onSubmit, formState, isReadOnly, setIsReadOnly } = props;
+  const { isSubmitting } = formState;
   if (mode === "Create" /* Create */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Heading2, { children: "Create Invoice" });
+    return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Heading2, { children: "Create Invoice" }),
+      /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Button2, { isPending: isSubmitting, onPress: onSubmit, children: "Review & Send" })
+    ] });
   }
   const invoice = props.invoice;
   const { invoiceNumber } = invoice;
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" }),
+    isReadOnly ? /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(Button2, { onPress: () => {
+      setIsReadOnly(false);
+    }, children: [
+      "Edit Invoice",
+      /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(import_lucide_react18.SquarePen, { size: 14 })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Button2, { isPending: isSubmitting, onPress: onSubmit, children: "Review & Resend" })
+  ] });
 };
 var InvoiceDetailSubHeader = ({ invoice }) => {
   const { outstandingBalance, totalAmount } = invoice;
-  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(HStack, { gap: "5xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(DataPoint, { label: "Balance due", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(DataPoint, { label: "Open balance", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Span, { children: convertCentsToCurrency(totalAmount) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(DataPoint, { label: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(InvoiceStatusCell, { invoice, inline: true }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(HStack, { gap: "5xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(DataPoint, { label: "Balance due", children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(DataPoint, { label: "Open balance", children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Span, { children: convertCentsToCurrency(totalAmount) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(DataPoint, { label: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(InvoiceStatusCell, { invoice, inline: true }) })
   ] }) });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
-var import_react237 = require("react");
+var import_react239 = require("react");
 
 // src/features/invoices/api/useListInvoices.tsx
 var import_infinite7 = __toESM(require("swr/infinite"));
-var import_react233 = require("react");
-var import_lodash6 = __toESM(require_lodash());
-var import_effect17 = require("effect");
+var import_react235 = require("react");
+var import_lodash7 = __toESM(require_lodash());
+var import_effect19 = require("effect");
 
 // src/types/utility/pagination.ts
-var import_effect16 = require("effect");
-var PaginatedResponseMetaSchema = import_effect16.Schema.Struct({
-  cursor: import_effect16.Schema.NullOr(import_effect16.Schema.String),
-  hasMore: (0, import_effect16.pipe)(
-    import_effect16.Schema.propertySignature(import_effect16.Schema.Boolean),
-    import_effect16.Schema.fromKey("has_more")
+var import_effect18 = require("effect");
+var PaginatedResponseMetaSchema = import_effect18.Schema.Struct({
+  cursor: import_effect18.Schema.NullOr(import_effect18.Schema.String),
+  hasMore: (0, import_effect18.pipe)(
+    import_effect18.Schema.propertySignature(import_effect18.Schema.Boolean),
+    import_effect18.Schema.fromKey("has_more")
   ),
-  totalCount: (0, import_effect16.pipe)(
-    import_effect16.Schema.propertySignature(import_effect16.Schema.UndefinedOr(import_effect16.Schema.Number)),
-    import_effect16.Schema.fromKey("total_count")
+  totalCount: (0, import_effect18.pipe)(
+    import_effect18.Schema.propertySignature(import_effect18.Schema.UndefinedOr(import_effect18.Schema.Number)),
+    import_effect18.Schema.fromKey("total_count")
   )
 });
 
 // src/features/invoices/api/useListInvoices.tsx
 var LIST_INVOICES_TAG_KEY = "#list-invoices";
-var ListInvoicesReturnSchema = import_effect17.Schema.Struct({
-  data: import_effect17.Schema.Array(InvoiceSchema),
-  meta: import_effect17.Schema.Struct({
+var ListInvoicesReturnSchema = import_effect19.Schema.Struct({
+  data: import_effect19.Schema.Array(InvoiceSchema),
+  meta: import_effect19.Schema.Struct({
     pagination: PaginatedResponseMetaSchema
   })
 });
@@ -38383,7 +39117,7 @@ function useListInvoices({
           showTotalCount: showTotalCount2
         }
       }
-    )().then(import_effect17.Schema.decodeUnknownPromise(ListInvoicesReturnSchema)),
+    )().then(import_effect19.Schema.decodeUnknownPromise(ListInvoicesReturnSchema)),
     {
       keepPreviousData: true,
       revalidateFirstPage: false,
@@ -38397,20 +39131,20 @@ function useListInvoices({
 var import_react_table2 = require("@tanstack/react-table");
 
 // src/components/DataTable/DataTable.tsx
-var import_react235 = require("react");
+var import_react237 = require("react");
 
 // src/components/ui/Table/Table.tsx
-var import_react234 = require("react");
-var import_react_aria_components18 = require("react-aria-components");
-var import_classnames91 = __toESM(require("classnames"));
-var import_jsx_runtime343 = require("react/jsx-runtime");
+var import_react236 = require("react");
+var import_react_aria_components19 = require("react-aria-components");
+var import_classnames93 = __toESM(require("classnames"));
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => (0, import_classnames91.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
-var Table2 = (0, import_react234.forwardRef)(
+var getClassName = (component, additionalClassNames) => (0, import_classnames93.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var Table2 = (0, import_react236.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
-      import_react_aria_components18.Table,
+    return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+      import_react_aria_components19.Table,
       __spreadProps(__spreadValues({
         className: getClassName("Table" /* Table */, className)
       }, restProps), {
@@ -38423,8 +39157,8 @@ var Table2 = (0, import_react234.forwardRef)(
 Table2.displayName = "Table" /* Table */;
 var TableHeaderInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
-    import_react_aria_components18.TableHeader,
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+    import_react_aria_components19.TableHeader,
     __spreadProps(__spreadValues({
       className: getClassName("TableHeader" /* TableHeader */, className)
     }, restProps), {
@@ -38433,12 +39167,12 @@ var TableHeaderInner = (_a, ref) => {
     })
   );
 };
-var TableHeader = (0, import_react234.forwardRef)(TableHeaderInner);
+var TableHeader = (0, import_react236.forwardRef)(TableHeaderInner);
 TableHeader.displayName = "TableHeader" /* TableHeader */;
 var TableBodyInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
-    import_react_aria_components18.TableBody,
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+    import_react_aria_components19.TableBody,
     __spreadProps(__spreadValues({
       className: getClassName("TableBody" /* TableBody */, className)
     }, restProps), {
@@ -38447,12 +39181,12 @@ var TableBodyInner = (_a, ref) => {
     })
   );
 };
-var TableBody2 = (0, import_react234.forwardRef)(TableBodyInner);
+var TableBody2 = (0, import_react236.forwardRef)(TableBodyInner);
 TableBody2.displayName = "TableBody" /* TableBody */;
 var RowInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
-    import_react_aria_components18.Row,
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+    import_react_aria_components19.Row,
     __spreadProps(__spreadValues({
       className: getClassName("Row" /* Row */, className)
     }, restProps), {
@@ -38461,14 +39195,14 @@ var RowInner = (_a, ref) => {
     })
   );
 };
-var Row2 = (0, import_react234.forwardRef)(RowInner);
+var Row2 = (0, import_react236.forwardRef)(RowInner);
 Row2.displayName = "Row" /* Row */;
-var Column = (0, import_react234.forwardRef)(
+var Column = (0, import_react236.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, textAlign = "left" } = _b, restProps = __objRest(_b, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
-    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
-      import_react_aria_components18.Column,
+    return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+      import_react_aria_components19.Column,
       __spreadProps(__spreadValues(__spreadValues({
         className: getClassName("Column" /* Column */, className)
       }, restProps), dataProperties), {
@@ -38479,11 +39213,11 @@ var Column = (0, import_react234.forwardRef)(
   }
 );
 Column.displayName = "Column" /* Column */;
-var Cell5 = (0, import_react234.forwardRef)(
+var Cell5 = (0, import_react236.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
-      import_react_aria_components18.Cell,
+    return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+      import_react_aria_components19.Cell,
       __spreadProps(__spreadValues({
         className: getClassName("Cell" /* Cell */, className)
       }, restProps), {
@@ -38496,7 +39230,7 @@ var Cell5 = (0, import_react234.forwardRef)(
 Cell5.displayName = "Cell" /* Cell */;
 
 // src/components/DataTable/DataTable.tsx
-var import_jsx_runtime344 = require("react/jsx-runtime");
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var DataTable = ({
   columnConfig,
   data,
@@ -38509,17 +39243,17 @@ var DataTable = ({
   const columns = Object.values(columnConfig);
   const { EmptyState, ErrorState } = slots;
   const isEmptyTable = (data == null ? void 0 : data.length) === 0;
-  const renderTableBody = (0, import_react235.useMemo)(() => {
+  const renderTableBody = (0, import_react237.useMemo)(() => {
     if (isError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(ErrorState, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(ErrorState, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Loader2, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Loader2, {}) }) });
     }
     if (isEmptyTable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(EmptyState, {}) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(EmptyState, {}) }) });
     }
-    const RowRenderer = (row) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Row2, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+    const RowRenderer = (row) => /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Row2, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
       Cell5,
       {
         className: `Layer__UI__Table-Cell__${componentName}--${col.id}`,
@@ -38530,15 +39264,15 @@ var DataTable = ({
     RowRenderer.displayName = "Row";
     return RowRenderer;
   }, [isError, isLoading, isEmptyTable, columns, ErrorState, EmptyState, componentName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
-    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(TableBody2, { items: data, children: renderTableBody })
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
+    /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(TableBody2, { items: data, children: renderTableBody })
   ] });
 };
 
 // src/components/DataTable/PaginatedTable.tsx
-var import_react236 = require("react");
-var import_jsx_runtime345 = require("react/jsx-runtime");
+var import_react238 = require("react");
+var import_jsx_runtime347 = require("react/jsx-runtime");
 var EMPTY_ARRAY = [];
 function PaginatedTable({
   data,
@@ -38551,7 +39285,7 @@ function PaginatedTable({
   slots
 }) {
   const { pageSize = 20, hasMore, fetchMore } = paginationProps;
-  const [pagination, setPagination] = (0, import_react236.useState)({ pageIndex: 0, pageSize });
+  const [pagination, setPagination] = (0, import_react238.useState)({ pageIndex: 0, pageSize });
   const columnHelper = (0, import_react_table2.createColumnHelper)();
   const columns = Object.values(columnConfig);
   const columnDefs = columns.map((col) => {
@@ -38571,12 +39305,12 @@ function PaginatedTable({
     autoResetPageIndex: false
   });
   const { rows } = table.getRowModel();
-  const rowData = (0, import_react236.useMemo)(() => rows.map((r) => r.original), [rows]);
-  const onPageChange = (0, import_react236.useCallback)((page) => {
+  const rowData = (0, import_react238.useMemo)(() => rows.map((r) => r.original), [rows]);
+  const onPageChange = (0, import_react238.useCallback)((page) => {
     table.setPageIndex(page - 1);
   }, [table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(VStack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(VStack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       DataTable,
       {
         ariaLabel,
@@ -38588,7 +39322,7 @@ function PaginatedTable({
         slots
       }
     ),
-    !isError && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+    !isError && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
       Pagination,
       {
         currentPage: table.getState().pagination.pageIndex + 1,
@@ -38603,10 +39337,10 @@ function PaginatedTable({
 }
 
 // src/icons/ChevronRightFill.tsx
-var import_jsx_runtime346 = require("react/jsx-runtime");
+var import_jsx_runtime348 = require("react/jsx-runtime");
 var ChevronRightFill = (_a) => {
   var _b = _a, { size = 18 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -38616,8 +39350,8 @@ var ChevronRightFill = (_a) => {
       width: size,
       height: size,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime348.jsx)("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
           "path",
           {
             d: "M6.75 4.5L11.25 9L6.75 13.5Z",
@@ -38633,37 +39367,37 @@ var ChevronRightFill = (_a) => {
 var ChevronRightFill_default = ChevronRightFill;
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react19 = require("lucide-react");
 
 // src/components/DataTable/DataTableHeader.tsx
-var import_jsx_runtime347 = require("react/jsx-runtime");
+var import_jsx_runtime349 = require("react/jsx-runtime");
 var DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
   const { showCount, totalCount } = count != null ? count : {};
   const { Filters: Filters2, HeaderActions, HeaderFilters } = slots;
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(VStack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(HStack, { pis: "md", align: "center", gap: "xl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(HStack, { align: "center", gap: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Span, { weight: "bold", size: "lg", children: name }),
-          showCount && (totalCount ? /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(BadgeLoader, {}))
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(VStack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(HStack, { pis: "md", align: "center", gap: "xl", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(HStack, { align: "center", gap: "sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(Span, { weight: "bold", size: "lg", children: name }),
+          showCount && (totalCount ? /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(BadgeLoader, {}))
         ] }),
-        HeaderFilters && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(HeaderFilters, {})
+        HeaderFilters && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(HeaderFilters, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(HStack, { pie: "md", align: "center", gap: "3xs", children: [
-        slotProps.SearchField && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(SearchField, __spreadValues({}, slotProps.SearchField)),
-        HeaderActions && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(HeaderActions, {})
+      /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(HStack, { pie: "md", align: "center", gap: "3xs", children: [
+        slotProps.SearchField && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(SearchField, __spreadValues({}, slotProps.SearchField)),
+        HeaderActions && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(HeaderActions, {})
       ] })
     ] }),
-    Filters2 && /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Filters2, {}),
-      slotProps.ClearFiltersButton && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
+    Filters2 && /* @__PURE__ */ (0, import_jsx_runtime349.jsxs)(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(Filters2, {}),
+      slotProps.ClearFiltersButton && /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
     ] })
   ] });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
-var import_date_fns51 = require("date-fns");
-var import_jsx_runtime348 = require("react/jsx-runtime");
+var import_date_fns53 = require("date-fns");
+var import_jsx_runtime350 = require("react/jsx-runtime");
 var COMPONENT_NAME10 = "InvoicesTable";
 var InvoiceStatusOptionConfig = {
   ["All" /* All */]: { label: "All", value: "All" /* All */ },
@@ -38684,12 +39418,12 @@ var AmountCell = ({ invoice }) => {
     case "WRITTEN_OFF" /* WrittenOff */:
     case "VOIDED" /* Voided */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(VStack, { children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(VStack, { children: /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Span, { align: "right", children: totalAmount }) });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
-      return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(VStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(Span, { align: "right", children: totalAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(Span, { align: "right", variant: "subtle", size: "sm", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(VStack, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Span, { align: "right", children: totalAmount }),
+        /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(Span, { align: "right", variant: "subtle", size: "sm", children: [
           outstandingBalance,
           " ",
           "outstanding"
@@ -38706,7 +39440,7 @@ var AmountCell = ({ invoice }) => {
 };
 var getCustomerName2 = (invoice) => {
   const { recipientName, customer } = invoice;
-  return recipientName || (customer == null ? void 0 : customer.individualName) || (customer == null ? void 0 : customer.companyName);
+  return (customer == null ? void 0 : customer.individualName) || (customer == null ? void 0 : customer.companyName) || recipientName;
 };
 var getColumnConfig = (onSelectInvoice) => ({
   ["SentAt" /* SentAt */]: {
@@ -38728,16 +39462,16 @@ var getColumnConfig = (onSelectInvoice) => ({
   ["Total" /* Total */]: {
     id: "Total" /* Total */,
     header: "Amount",
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(AmountCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(AmountCell, { invoice: row })
   },
   ["Status" /* Status */]: {
     id: "Status" /* Status */,
     header: "Status",
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(InvoiceStatusCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(InvoiceStatusCell, { invoice: row })
   },
   ["Expand" /* Expand */]: {
     id: "Expand" /* Expand */,
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(ChevronRightFill_default, {}) })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(ChevronRightFill_default, {}) })
   }
 });
 var UNPAID_STATUSES2 = ["SENT" /* Sent */, "PARTIALLY_PAID" /* PartiallyPaid */];
@@ -38749,9 +39483,9 @@ var getListInvoiceParams = ({ statusFilter }) => {
     case "Unpaid" /* Unpaid */:
       return { status: UNPAID_STATUSES2 };
     case "Overdue" /* Overdue */:
-      return { status: UNPAID_STATUSES2, dueAtEnd: (0, import_date_fns51.endOfYesterday)() };
+      return { status: UNPAID_STATUSES2, dueAtEnd: (0, import_date_fns53.endOfYesterday)() };
     case "Sent" /* Sent */:
-      return { status: UNPAID_STATUSES2, dueAtStart: (0, import_date_fns51.startOfToday)() };
+      return { status: UNPAID_STATUSES2, dueAtStart: (0, import_date_fns53.startOfToday)() };
     case "Paid" /* Paid */:
       return { status: ["PAID" /* Paid */, "PARTIALLY_WRITTEN_OFF" /* PartiallyWrittenOff */] };
     case "Written Off" /* WrittenOff */:
@@ -38766,8 +39500,8 @@ var getListInvoiceParams = ({ statusFilter }) => {
   }
 };
 var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
-  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = (0, import_react237.useState)(ALL_OPTION);
-  const listInvoiceParams = (0, import_react237.useMemo)(
+  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = (0, import_react239.useState)(ALL_OPTION);
+  const listInvoiceParams = (0, import_react239.useMemo)(
     () => getListInvoiceParams({ statusFilter: selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value }),
     [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value]
   );
@@ -38775,29 +39509,29 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
   const invoices = data == null ? void 0 : data.flatMap(({ data: data2 }) => data2);
   const paginationMeta = data == null ? void 0 : data[data.length - 1].meta.pagination;
   const hasMore = paginationMeta == null ? void 0 : paginationMeta.hasMore;
-  const fetchMore = (0, import_react237.useCallback)(() => {
+  const fetchMore = (0, import_react239.useCallback)(() => {
     if (hasMore) {
       void setSize(size + 1);
     }
   }, [hasMore, setSize, size]);
-  const paginationProps = (0, import_react237.useMemo)(() => {
+  const paginationProps = (0, import_react239.useMemo)(() => {
     return {
       pageSize: 10,
       hasMore,
       fetchMore
     };
   }, [fetchMore, hasMore]);
-  const options = (0, import_react237.useMemo)(() => Object.values(InvoiceStatusOptionConfig), []);
-  const SelectedValue = (0, import_react237.useMemo)(() => {
+  const options2 = (0, import_react239.useMemo)(() => Object.values(InvoiceStatusOptionConfig), []);
+  const SelectedValue = (0, import_react239.useMemo)(() => {
     const label = selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label]);
-  const StatusFilter = (0, import_react237.useCallback)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+  const StatusFilter = (0, import_react239.useCallback)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
       ComboBox,
       {
         className: "Layer__InvoicesTable__StatusFilter",
-        options,
+        options: options2,
         onSelectedValueChange: (option) => setSelectedInvoiceStatusOption(option),
         selectedValue: selectedInvoiceStatusOption,
         isSearchable: false,
@@ -38807,29 +39541,29 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
         "aria-label": "Status Filter"
       }
     ),
-    [SelectedValue, options, selectedInvoiceStatusOption]
+    [SelectedValue, options2, selectedInvoiceStatusOption]
   );
-  const CreateInvoiceButton = (0, import_react237.useCallback)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(Button2, { onPress: onCreateInvoice, children: [
+  const CreateInvoiceButton = (0, import_react239.useCallback)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(Button2, { onPress: onCreateInvoice, children: [
       "Create Invoice",
-      /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(import_lucide_react17.Plus, { size: 16 })
+      /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(import_lucide_react19.Plus, { size: 16 })
     ] }),
     [onCreateInvoice]
   );
-  const InvoicesTableEmptyState = (0, import_react237.useCallback)(() => {
+  const InvoicesTableEmptyState = (0, import_react239.useCallback)(() => {
     const isFiltered = selectedInvoiceStatusOption && selectedInvoiceStatusOption !== ALL_OPTION;
-    return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
       DataState,
       {
         status: "allDone" /* allDone */,
         title: isFiltered ? "No results found" : "No invoices yet",
         description: isFiltered ? "We couldn\u2019t find any invoices with the current filters. Try changing or clearing them to see more results." : "Add your first invoice to start tracking what your customers owe you.",
-        icon: isFiltered ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(import_lucide_react17.Search, {}) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(import_lucide_react17.HandCoins, {}),
+        icon: isFiltered ? /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(import_lucide_react19.Search, {}) : /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(import_lucide_react19.HandCoins, {}),
         spacing: true
       }
     );
   }, [selectedInvoiceStatusOption]);
-  const InvoicesTableErrorState = (0, import_react237.useCallback)(() => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+  const InvoicesTableErrorState = (0, import_react239.useCallback)(() => /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
     DataState,
     {
       status: "failed" /* failed */,
@@ -38841,9 +39575,9 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
       spacing: true
     }
   ), [refetch]);
-  const columnConfig = (0, import_react237.useMemo)(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(Container, { name: "InvoicesTable", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+  const columnConfig = (0, import_react239.useMemo)(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
+  return /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(Container, { name: "InvoicesTable", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
       DataTableHeader,
       {
         name: "Invoices",
@@ -38853,7 +39587,7 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
       PaginatedTable,
       {
         ariaLabel: "Invoices",
@@ -38873,38 +39607,38 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
 };
 
 // src/components/Invoices/Invoices.tsx
-var import_jsx_runtime349 = require("react/jsx-runtime");
+var import_jsx_runtime351 = require("react/jsx-runtime");
 var unstable_Invoices = ({
   showTitle = true,
   stringOverrides
 }) => {
-  const [invoiceFormMode, setInvoiceFormMode] = (0, import_react238.useState)(null);
-  const goBackToInvoicesTable = (0, import_react238.useCallback)(() => {
+  const [invoiceFormMode, setInvoiceFormMode] = (0, import_react240.useState)(null);
+  const goBackToInvoicesTable = (0, import_react240.useCallback)(() => {
     setInvoiceFormMode(null);
   }, []);
-  const onCreateInvoice = (0, import_react238.useCallback)(() => {
+  const onCreateInvoice = (0, import_react240.useCallback)(() => {
     setInvoiceFormMode({ mode: "Create" /* Create */ });
   }, []);
-  const onSelectInvoice = (0, import_react238.useCallback)((invoice) => {
+  const onSelectInvoice = (0, import_react240.useCallback)((invoice) => {
     setInvoiceFormMode({ mode: "Update" /* Update */, invoice });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices",
       showHeader: showTitle,
-      children: invoiceFormMode !== null ? /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(InvoicesTable, { onCreateInvoice, onSelectInvoice })
+      children: invoiceFormMode !== null ? /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(InvoicesTable, { onCreateInvoice, onSelectInvoice })
     }
   );
 };
 
 // src/providers/BankTransactionsProvider/BankTransactionsProvider.tsx
-var import_jsx_runtime350 = require("react/jsx-runtime");
+var import_jsx_runtime352 = require("react/jsx-runtime");
 var BankTransactionsProvider = ({
   children
 }) => {
   const bankTransactionsContextData = useAugmentedBankTransactions();
-  return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {