@layerfi/components 0.1.106-alpha.1 → 0.1.106

package/dist/esm/index.mjs

@@ -5570,7 +5570,7 @@ import { useState as useState5 } from "react";
 import { useReducer, useEffect as useEffect2 } from "react";
 
 // package.json
-var version = "0.1.106-alpha.1";
+var version = "0.1.106";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -7097,7 +7097,7 @@ function clampToPresentOrPast(date, cutoff = endOfDay(/* @__PURE__ */ new Date()
 }
 var RANGE_MODE_LOOKUP = {
   dayPicker: {
-    getStart: ({ start }) => start,
+    getStart: ({ start }) => startOfMonth(start),
     getEnd: ({ end }) => clampToPresentOrPast(endOfDay(end))
   },
   dayRangePicker: {
@@ -37268,10 +37268,10 @@ var Components = ({
 };
 
 // src/components/Invoices/Invoices.tsx
-import { useCallback as useCallback58, useState as useState87 } from "react";
+import { useCallback as useCallback59, useState as useState87 } from "react";
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { useCallback as useCallback54 } from "react";
+import { useCallback as useCallback55 } from "react";
 
 // src/components/BaseDetailView/BaseDetailView.tsx
 import { jsx as jsx326, jsxs as jsxs210 } from "react/jsx-runtime";
@@ -37431,11 +37431,14 @@ function formatBigDecimalToString(value, maxDecimalPlaces = 10) {
 // src/features/forms/components/FormBigDecimalField.tsx
 import { jsx as jsx331 } from "react/jsx-runtime";
 var DEFAULT_MAX_INPUT_LENGTH = 10;
-function FormBigDecimalField({
-  slotProps,
-  maxInputLength = DEFAULT_MAX_INPUT_LENGTH,
-  allowNegative = false
-}) {
+function FormBigDecimalField(_a) {
+  var _b = _a, {
+    maxInputLength = DEFAULT_MAX_INPUT_LENGTH,
+    allowNegative = false
+  } = _b, restProps = __objRest(_b, [
+    "maxInputLength",
+    "allowNegative"
+  ]);
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
@@ -37473,7 +37476,7 @@ function FormBigDecimalField({
   useEffect41(() => {
     setInputValue(formatBigDecimalToString(value, maxInputLength));
   }, [value, maxInputLength]);
-  return /* @__PURE__ */ jsx331(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { inputMode: "decimal", children: /* @__PURE__ */ jsx331(InputGroup2, { children: /* @__PURE__ */ jsx331(
+  return /* @__PURE__ */ jsx331(BaseFormTextField, __spreadProps(__spreadValues({}, restProps), { inputMode: "decimal", children: /* @__PURE__ */ jsx331(InputGroup2, { children: /* @__PURE__ */ jsx331(
     Input2,
     {
       inset: true,
@@ -37489,23 +37492,67 @@ function FormBigDecimalField({
   ) }) }));
 }
 
+// src/features/forms/components/FormCheckboxField.tsx
+import { useCallback as useCallback49 } from "react";
+import classNames89 from "classnames";
+import { jsx as jsx332 } from "react/jsx-runtime";
+var FORM_CHECKBOX_FIELD_CLASSNAME = "Layer__FormCheckboxField";
+function FormCheckboxField({
+  label,
+  className,
+  inline = false,
+  showLabel = true,
+  showErrorInTooltip = true
+}) {
+  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 additionalAriaProps = !showLabel && { "aria-label": label };
+  const checkboxClassNames = classNames89(
+    FORM_CHECKBOX_FIELD_CLASSNAME,
+    inline && `${FORM_CHECKBOX_FIELD_CLASSNAME}--inline`,
+    className
+  );
+  const onChange = useCallback49((isSelected) => {
+    handleChange(isSelected);
+  }, [handleChange]);
+  return /* @__PURE__ */ jsx332(
+    CheckboxWithTooltip,
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      className: checkboxClassNames,
+      isSelected: value,
+      isInvalid: !isValid2,
+      onChange,
+      onBlur: handleBlur,
+      name,
+      value: name,
+      size: "lg"
+    }, tooltipProps), additionalAriaProps), !isValid2 && { variant: "error" }), {
+      children: showLabel && /* @__PURE__ */ jsx332(Label, { slot: "label", size: "sm", htmlFor: name, children: label })
+    })
+  );
+}
+
 // src/features/forms/components/FormCurrencyField.tsx
-import { useCallback as useCallback49, useEffect as useEffect42, useState as useState83 } from "react";
+import { useCallback as useCallback50, useEffect as useEffect42, useState as useState83 } from "react";
 import CurrencyInput2 from "react-currency-input-field";
 import { BigDecimal as BD3, Option as Option5 } from "effect";
-import { jsx as jsx332 } from "react/jsx-runtime";
+import { jsx as jsx333 } from "react/jsx-runtime";
 var ZERO_CENTS_INPUT_VALUE = "0.00";
 var getCurrencyInputValueFromCents = (cents) => !Number.isNaN(cents) ? centsToDollarsWithoutCommas(cents) : ZERO_CENTS_INPUT_VALUE;
-function FormCurrencyField({ slotProps }) {
+function FormCurrencyField(props) {
   const field = useFieldContext();
-  const label = slotProps.BaseFormTextField.label;
+  const { label } = props;
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
   const [inputValue, setInputValue] = useState83(getCurrencyInputValueFromCents(value));
-  const onInputChange = useCallback49((newValue) => {
+  const onInputChange = useCallback50((newValue) => {
     setInputValue(newValue != null ? newValue : ZERO_CENTS_INPUT_VALUE);
   }, []);
-  const onInputBlur = useCallback49(() => {
+  const onInputBlur = useCallback50(() => {
     const maybeAmount = BD3.fromString(inputValue);
     const cents = Option5.match(maybeAmount, {
       onNone: () => 0,
@@ -37518,7 +37565,7 @@ function FormCurrencyField({ slotProps }) {
   useEffect42(() => {
     setInputValue(getCurrencyInputValueFromCents(value));
   }, [value]);
-  return /* @__PURE__ */ jsx332(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ jsx332(InputGroup2, { children: /* @__PURE__ */ jsx332(
+  return /* @__PURE__ */ jsx333(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx333(InputGroup2, { children: /* @__PURE__ */ jsx333(
     CurrencyInput2,
     {
       name,
@@ -37541,18 +37588,18 @@ function FormCurrencyField({ slotProps }) {
 }
 
 // src/features/forms/components/FormTextAreaField.tsx
-import { useCallback as useCallback50 } from "react";
+import { useCallback as useCallback51 } from "react";
 
 // src/components/ui/Input/TextArea.tsx
 import { forwardRef as forwardRef23 } from "react";
 import { TextArea as ReactAriaTextArea } from "react-aria-components";
-import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx334 } from "react/jsx-runtime";
 var TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
 var TextArea = forwardRef23(
   function TextArea2(_a, ref) {
     var _b = _a, { resize = "none" } = _b, restProps = __objRest(_b, ["resize"]);
     const dataProperties = toDataProperties({ resize });
-    return /* @__PURE__ */ jsx333(
+    return /* @__PURE__ */ jsx334(
       ReactAriaTextArea,
       __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
         className: TEXTAREA_CLASS_NAME,
@@ -37563,28 +37610,28 @@ var TextArea = forwardRef23(
 );
 
 // src/features/forms/components/FormTextAreaField.tsx
-import { jsx as jsx334 } from "react/jsx-runtime";
-function FormTextAreaField({ slotProps }) {
+import { jsx as jsx335 } from "react/jsx-runtime";
+function FormTextAreaField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
-  const onChange = useCallback50((e) => {
+  const onChange = useCallback51((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ jsx334(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ jsx334(TextArea, { id: name, name, value, onChange, onBlur: handleBlur }) }));
+  return /* @__PURE__ */ jsx335(BaseFormTextField, __spreadProps(__spreadValues({}, props), { isTextArea: true, children: /* @__PURE__ */ jsx335(TextArea, { id: name, name, value, onChange, onBlur: handleBlur }) }));
 }
 
 // src/features/forms/components/FormTextField.tsx
-import { useCallback as useCallback51 } from "react";
-import { jsx as jsx335 } from "react/jsx-runtime";
-function FormTextField({ slotProps }) {
+import { useCallback as useCallback52 } from "react";
+import { jsx as jsx336 } from "react/jsx-runtime";
+function FormTextField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
-  const onChange = useCallback51((e) => {
+  const onChange = useCallback52((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ jsx335(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ jsx335(InputGroup2, { children: /* @__PURE__ */ jsx335(Input2, { inset: true, id: name, name, value, onChange, onBlur: handleBlur }) }) }));
+  return /* @__PURE__ */ jsx336(BaseFormTextField, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx336(InputGroup2, { children: /* @__PURE__ */ jsx336(Input2, { inset: true, id: name, name, value, onChange, onBlur: handleBlur }) }) }));
 }
 
 // src/features/forms/hooks/useForm.tsx
@@ -37593,6 +37640,7 @@ var { useAppForm, withForm } = createFormHook({
   fieldComponents: {
     BaseFormTextField,
     FormBigDecimalField,
+    FormCheckboxField,
     FormCurrencyField,
     FormTextAreaField,
     FormTextField
@@ -37773,7 +37821,7 @@ var UpsertInvoiceSchema = Schema9.Struct({
 });
 
 // src/features/invoices/api/useUpsertInvoice.tsx
-import { useCallback as useCallback52 } from "react";
+import { useCallback as useCallback53 } from "react";
 import useSWRMutation26 from "swr/mutation";
 import { Schema as Schema10, Effect } from "effect";
 var UPSERT_INVOICES_TAG_KEY = "#upsert-invoice";
@@ -37869,7 +37917,7 @@ var useUpsertInvoice = (props) => {
   );
   const mutationResponse = new UpsertInvoiceSWRResponse(rawMutationResponse);
   const originalTrigger = mutationResponse.trigger;
-  const stableProxiedTrigger = useCallback52(
+  const stableProxiedTrigger = useCallback53(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
       return triggerResult;
@@ -37893,7 +37941,8 @@ var EMPTY_LINE_ITEM = {
   description: "",
   unitPrice: 0,
   quantity: BIG_DECIMAL_ONE,
-  amount: 0
+  amount: 0,
+  isTaxable: false
 };
 var DEFAULT_FORM_VALUES = {
   invoiceNumber: "",
@@ -37908,7 +37957,8 @@ var getInvoiceLineItemAmount = (lineItem) => {
 };
 var getAugmentedInvoiceFormLineItem = (lineItem) => {
   return __spreadProps(__spreadValues({}, lineItem), {
-    amount: getInvoiceLineItemAmount(lineItem)
+    amount: getInvoiceLineItemAmount(lineItem),
+    isTaxable: lineItem.salesTaxTotal > 0
   });
 };
 var getInvoiceFormDefaultValues = (invoice) => {
@@ -37953,9 +38003,9 @@ import { Plus as Plus2, Trash as Trash2 } from "lucide-react";
 import { BigDecimal as BD5 } from "effect";
 
 // src/features/customers/components/CustomerSelector.tsx
-import { useCallback as useCallback53, useId as useId5, useMemo as useMemo72 } from "react";
-import classNames89 from "classnames";
-import { jsx as jsx336, jsxs as jsxs212 } from "react/jsx-runtime";
+import { useCallback as useCallback54, useId as useId5, useMemo as useMemo72 } from "react";
+import classNames90 from "classnames";
+import { jsx as jsx337, jsxs as jsxs212 } from "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";
@@ -37986,7 +38036,7 @@ function CustomerSelector({
   inline,
   className
 }) {
-  const combinedClassName = classNames89(
+  const combinedClassName = classNames90(
     "Layer__CustomerSelector",
     inline && "Layer__CustomerSelector--inline",
     className
@@ -38001,7 +38051,7 @@ function CustomerSelector({
     [data]
   );
   const selectedCustomerId = selectedCustomer == null ? void 0 : selectedCustomer.id;
-  const handleSelectionChange = useCallback53(
+  const handleSelectionChange = useCallback54(
     (selectedOption) => {
       if (selectedOption === null) {
         handleInputChange("");
@@ -38035,11 +38085,11 @@ function CustomerSelector({
     [selectedCustomer]
   );
   const EmptyMessage = useMemo72(
-    () => /* @__PURE__ */ jsx336(P, { variant: "subtle", children: "No matching customer" }),
+    () => /* @__PURE__ */ jsx337(P, { variant: "subtle", children: "No matching customer" }),
     []
   );
   const ErrorMessage = useMemo72(
-    () => /* @__PURE__ */ jsx336(
+    () => /* @__PURE__ */ jsx337(
       P,
       {
         size: "xs",
@@ -38059,8 +38109,8 @@ function CustomerSelector({
   const isLoadingWithoutFallback = isLoading && !data;
   const shouldDisableComboBox = isLoadingWithoutFallback || isError;
   return /* @__PURE__ */ jsxs212(VStack, { className: combinedClassName, children: [
-    /* @__PURE__ */ jsx336(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
-    /* @__PURE__ */ jsx336(
+    /* @__PURE__ */ jsx337(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
+    /* @__PURE__ */ jsx337(
       ComboBox,
       {
         selectedValue: selectedCustomerForComboBox,
@@ -38079,7 +38129,7 @@ function CustomerSelector({
 }
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
-import { jsx as jsx337, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx338, jsxs as jsxs213 } from "react/jsx-runtime";
 var INVOICE_FORM_CSS_PREFIX = "Layer__InvoiceForm";
 var INVOICE_FORM_FIELD_CSS_PREFIX = `${INVOICE_FORM_CSS_PREFIX}__Field`;
 var InvoiceForm = (props) => {
@@ -38089,7 +38139,7 @@ var InvoiceForm = (props) => {
   );
   return /* @__PURE__ */ jsxs213(Form, { className: INVOICE_FORM_CSS_PREFIX, children: [
     /* @__PURE__ */ jsxs213(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, gap: "xs", children: [
-      /* @__PURE__ */ jsx337(
+      /* @__PURE__ */ jsx338(
         form.Field,
         {
           name: "customer",
@@ -38099,7 +38149,7 @@ var InvoiceForm = (props) => {
               form.setFieldValue("address", customer == null ? void 0 : customer.addressString);
             }
           },
-          children: (field) => /* @__PURE__ */ jsx337(
+          children: (field) => /* @__PURE__ */ jsx338(
             CustomerSelector,
             {
               className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
@@ -38110,14 +38160,14 @@ var InvoiceForm = (props) => {
           )
         }
       ),
-      /* @__PURE__ */ jsx337(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ jsx337(field.FormTextField, { slotProps: { BaseFormTextField: { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email` } } }) }),
-      /* @__PURE__ */ jsx337(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ jsx337(field.FormTextAreaField, { slotProps: { BaseFormTextField: { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address` } } }) })
+      /* @__PURE__ */ jsx338(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ jsx338(field.FormTextField, { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email` }) }),
+      /* @__PURE__ */ jsx338(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ jsx338(field.FormTextAreaField, { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address` }) })
     ] }),
-    /* @__PURE__ */ jsx337(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "xs", children: /* @__PURE__ */ jsx337(form.AppField, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ jsxs213(VStack, { gap: "xs", align: "baseline", children: [
+    /* @__PURE__ */ jsx338(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "xs", children: /* @__PURE__ */ jsx338(form.AppField, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ jsxs213(VStack, { gap: "xs", align: "baseline", children: [
       field.state.value.map((_, index) => /* @__PURE__ */ jsxs213(HStack, { gap: "xs", align: "end", className: `${INVOICE_FORM_CSS_PREFIX}__LineItem`, children: [
-        /* @__PURE__ */ jsx337(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Product", showLabel: index === 0 } } }) }),
-        /* @__PURE__ */ jsx337(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Description", showLabel: index === 0 } } }) }),
-        /* @__PURE__ */ jsx337(
+        /* @__PURE__ */ jsx338(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormTextField, { label: "Product", showLabel: index === 0 }) }),
+        /* @__PURE__ */ jsx338(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormTextField, { label: "Description", showLabel: index === 0 }) }),
+        /* @__PURE__ */ jsx338(
           form.AppField,
           {
             name: `lineItems[${index}].quantity`,
@@ -38128,10 +38178,10 @@ var InvoiceForm = (props) => {
                 form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
               }
             },
-            children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormBigDecimalField, { slotProps: { BaseFormTextField: { label: "Quantity", showLabel: index === 0 } } })
+            children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormBigDecimalField, { label: "Quantity", showLabel: index === 0 })
           }
         ),
-        /* @__PURE__ */ jsx337(
+        /* @__PURE__ */ jsx338(
           form.AppField,
           {
             name: `lineItems[${index}].unitPrice`,
@@ -38142,10 +38192,10 @@ var InvoiceForm = (props) => {
                 form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
               }
             },
-            children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Rate", showLabel: index === 0 } } })
+            children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormCurrencyField, { label: "Rate", showLabel: index === 0 })
           }
         ),
-        /* @__PURE__ */ jsx337(
+        /* @__PURE__ */ jsx338(
           form.AppField,
           {
             name: `lineItems[${index}].amount`,
@@ -38160,31 +38210,32 @@ var InvoiceForm = (props) => {
                 form.setFieldValue(`lineItems[${index}].unitPrice`, convertBigDecimalToCents(nextUnitPrice));
               }
             },
-            children: (innerField) => /* @__PURE__ */ jsx337(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Amount", showLabel: index === 0 } } })
+            children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormCurrencyField, { label: "Amount", showLabel: index === 0 })
           }
         ),
-        /* @__PURE__ */ jsx337(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ jsx337(Trash2, { size: 16 }) })
+        /* @__PURE__ */ jsx338(form.AppField, { name: `lineItems[${index}].isTaxable`, children: (innerField) => /* @__PURE__ */ jsx338(innerField.FormCheckboxField, { label: "Tax", showLabel: index === 0 }) }),
+        /* @__PURE__ */ jsx338(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ jsx338(Trash2, { size: 16 }) })
       ] }, `lineItems[${index}]`)),
       /* @__PURE__ */ jsxs213(Button2, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
         "Add line item",
-        /* @__PURE__ */ jsx337(Plus2, { size: 16 })
+        /* @__PURE__ */ jsx338(Plus2, { size: 16 })
       ] })
     ] }) }) })
   ] });
 };
 
 // src/components/DataPoint/DataPoint.tsx
-import { jsx as jsx338, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx339, jsxs as jsxs214 } from "react/jsx-runtime";
 var DataPoint = ({ label, children }) => {
   return /* @__PURE__ */ jsxs214(VStack, { gap: "3xs", children: [
-    /* @__PURE__ */ jsx338(Span, { variant: "subtle", size: "xs", children: label }),
+    /* @__PURE__ */ jsx339(Span, { variant: "subtle", size: "xs", children: label }),
     children
   ] });
 };
 
 // src/components/Invoices/InvoiceStatusCell/InvoiceStatusCell.tsx
 import pluralize6 from "pluralize";
-import { jsx as jsx339, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx340, jsxs as jsxs215 } from "react/jsx-runtime";
 var getDueStatusConfig = (invoice, { inline }) => {
   const badgeSize = inline ? "xs" /* EXTRA_SMALL */ : "small" /* SMALL */;
   const iconSize = inline ? 10 : 12;
@@ -38198,7 +38249,7 @@ var getDueStatusConfig = (invoice, { inline }) => {
     case "PAID" /* Paid */: {
       return {
         text: "Paid",
-        badge: /* @__PURE__ */ jsx339(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ jsx339(CheckCircle_default, { size: iconSize }), iconOnly: true })
+        badge: /* @__PURE__ */ jsx340(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ jsx340(CheckCircle_default, { size: iconSize }), iconOnly: true })
       };
     }
     case "VOIDED" /* Voided */: {
@@ -38221,7 +38272,7 @@ var getDueStatusConfig = (invoice, { inline }) => {
         return {
           text: "Overdue",
           subText: `Due ${pluralize6("day", Math.abs(dueDifference), true)} ago`,
-          badge: /* @__PURE__ */ jsx339(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ jsx339(AlertCircle_default, { size: iconSize }), iconOnly: true })
+          badge: /* @__PURE__ */ jsx340(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ jsx340(AlertCircle_default, { size: iconSize }), iconOnly: true })
         };
       }
       return {
@@ -38244,49 +38295,49 @@ var InvoiceStatusCell = ({ invoice, inline = false }) => {
   return /* @__PURE__ */ jsxs215(HStack, { gap: "xs", align: "center", children: [
     dueStatus.badge,
     /* @__PURE__ */ jsxs215(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
-      /* @__PURE__ */ jsx339(Span, { children: dueStatus.text }),
-      subText && /* @__PURE__ */ jsx339(Span, { variant: "subtle", size: "sm", children: subText })
+      /* @__PURE__ */ jsx340(Span, { children: dueStatus.text }),
+      subText && /* @__PURE__ */ jsx340(Span, { variant: "subtle", size: "sm", children: subText })
     ] }))
   ] });
 };
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { jsx as jsx340, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx341, jsxs as jsxs216 } from "react/jsx-runtime";
 var InvoiceDetail = (props) => {
   const _a = props, { onSuccess: _onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
-  const Header6 = useCallback54(() => {
-    return /* @__PURE__ */ jsx340(InvoiceDetailHeader, __spreadValues({}, restProps));
+  const Header6 = useCallback55(() => {
+    return /* @__PURE__ */ jsx341(InvoiceDetailHeader, __spreadValues({}, restProps));
   }, [restProps]);
   return /* @__PURE__ */ jsxs216(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
-    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ jsx340(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
-    /* @__PURE__ */ jsx340(InvoiceForm, __spreadValues({}, props))
+    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ jsx341(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
+    /* @__PURE__ */ jsx341(InvoiceForm, __spreadValues({}, props))
   ] });
 };
 var InvoiceDetailHeader = (props) => {
   const { mode } = props;
   if (mode === "Create" /* Create */) {
-    return /* @__PURE__ */ jsx340(Heading2, { children: "Create Invoice" });
+    return /* @__PURE__ */ jsx341(Heading2, { children: "Create Invoice" });
   }
   const invoice = props.invoice;
   const { invoiceNumber } = invoice;
-  return /* @__PURE__ */ jsx340(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
+  return /* @__PURE__ */ jsx341(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
 };
 var InvoiceDetailSubHeader = ({ invoice }) => {
   const { outstandingBalance, totalAmount } = invoice;
-  return /* @__PURE__ */ jsx340(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ jsxs216(HStack, { gap: "5xl", children: [
-    /* @__PURE__ */ jsx340(DataPoint, { label: "Balance due", children: /* @__PURE__ */ jsx340(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
-    /* @__PURE__ */ jsx340(DataPoint, { label: "Open balance", children: /* @__PURE__ */ jsx340(Span, { children: convertCentsToCurrency(totalAmount) }) }),
-    /* @__PURE__ */ jsx340(DataPoint, { label: "Status", children: /* @__PURE__ */ jsx340(InvoiceStatusCell, { invoice, inline: true }) })
+  return /* @__PURE__ */ jsx341(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ jsxs216(HStack, { gap: "5xl", children: [
+    /* @__PURE__ */ jsx341(DataPoint, { label: "Balance due", children: /* @__PURE__ */ jsx341(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
+    /* @__PURE__ */ jsx341(DataPoint, { label: "Open balance", children: /* @__PURE__ */ jsx341(Span, { children: convertCentsToCurrency(totalAmount) }) }),
+    /* @__PURE__ */ jsx341(DataPoint, { label: "Status", children: /* @__PURE__ */ jsx341(InvoiceStatusCell, { invoice, inline: true }) })
   ] }) });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
-import { useCallback as useCallback57, useMemo as useMemo76, useState as useState86 } from "react";
+import { useCallback as useCallback58, useMemo as useMemo76, useState as useState86 } from "react";
 
 // src/features/invoices/api/useListInvoices.tsx
 import useSWRInfinite7 from "swr/infinite";
 var import_lodash6 = __toESM(require_lodash2());
-import { useCallback as useCallback55, useMemo as useMemo73 } from "react";
+import { useCallback as useCallback56, useMemo as useMemo73 } from "react";
 import { Schema as Schema13 } from "effect";
 
 // src/types/utility/pagination.ts
@@ -38466,14 +38517,14 @@ import {
   TableBody as ReactAriaTableBody,
   TableHeader as ReactAriaTableHeader
 } from "react-aria-components";
-import classNames90 from "classnames";
-import { jsx as jsx341 } from "react/jsx-runtime";
+import classNames91 from "classnames";
+import { jsx as jsx342 } from "react/jsx-runtime";
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => classNames90(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var getClassName = (component, additionalClassNames) => classNames91(`${CSS_PREFIX2}-${component}`, additionalClassNames);
 var Table2 = forwardRef24(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx341(
+    return /* @__PURE__ */ jsx342(
       ReactAriaTable,
       __spreadProps(__spreadValues({
         className: getClassName("Table" /* Table */, className)
@@ -38487,7 +38538,7 @@ var Table2 = forwardRef24(
 Table2.displayName = "Table" /* Table */;
 var TableHeaderInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx342(
     ReactAriaTableHeader,
     __spreadProps(__spreadValues({
       className: getClassName("TableHeader" /* TableHeader */, className)
@@ -38501,7 +38552,7 @@ var TableHeader = forwardRef24(TableHeaderInner);
 TableHeader.displayName = "TableHeader" /* TableHeader */;
 var TableBodyInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx342(
     ReactAriaTableBody,
     __spreadProps(__spreadValues({
       className: getClassName("TableBody" /* TableBody */, className)
@@ -38515,7 +38566,7 @@ var TableBody2 = forwardRef24(TableBodyInner);
 TableBody2.displayName = "TableBody" /* TableBody */;
 var RowInner = (_a, ref) => {
   var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx341(
+  return /* @__PURE__ */ jsx342(
     ReactAriaTableRow,
     __spreadProps(__spreadValues({
       className: getClassName("Row" /* Row */, className)
@@ -38531,7 +38582,7 @@ var Column = forwardRef24(
   (_a, ref) => {
     var _b = _a, { children, className, textAlign = "left" } = _b, restProps = __objRest(_b, ["children", "className", "textAlign"]);
     const dataProperties = toDataProperties({ "text-align": textAlign });
-    return /* @__PURE__ */ jsx341(
+    return /* @__PURE__ */ jsx342(
       ReactAriaColumn,
       __spreadProps(__spreadValues(__spreadValues({
         className: getClassName("Column" /* Column */, className)
@@ -38546,7 +38597,7 @@ Column.displayName = "Column" /* Column */;
 var Cell5 = forwardRef24(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx341(
+    return /* @__PURE__ */ jsx342(
       ReactAriaCell,
       __spreadProps(__spreadValues({
         className: getClassName("Cell" /* Cell */, className)
@@ -38560,7 +38611,7 @@ var Cell5 = forwardRef24(
 Cell5.displayName = "Cell" /* Cell */;
 
 // src/components/DataTable/DataTable.tsx
-import { jsx as jsx342, jsxs as jsxs217 } from "react/jsx-runtime";
+import { jsx as jsx343, jsxs as jsxs217 } from "react/jsx-runtime";
 var DataTable = ({
   columnConfig,
   data,
@@ -38575,15 +38626,15 @@ var DataTable = ({
   const isEmptyTable = (data == null ? void 0 : data.length) === 0;
   const renderTableBody = useMemo74(() => {
     if (isError) {
-      return /* @__PURE__ */ jsx342(Row2, { children: /* @__PURE__ */ jsx342(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx342(ErrorState, {}) }) });
+      return /* @__PURE__ */ jsx343(Row2, { children: /* @__PURE__ */ jsx343(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx343(ErrorState, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx342(Row2, { children: /* @__PURE__ */ jsx342(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx342(Loader2, {}) }) });
+      return /* @__PURE__ */ jsx343(Row2, { children: /* @__PURE__ */ jsx343(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx343(Loader2, {}) }) });
     }
     if (isEmptyTable) {
-      return /* @__PURE__ */ jsx342(Row2, { children: /* @__PURE__ */ jsx342(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx342(EmptyState, {}) }) });
+      return /* @__PURE__ */ jsx343(Row2, { children: /* @__PURE__ */ jsx343(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ jsx343(EmptyState, {}) }) });
     }
-    const RowRenderer = (row) => /* @__PURE__ */ jsx342(Row2, { children: columns.map((col) => /* @__PURE__ */ jsx342(
+    const RowRenderer = (row) => /* @__PURE__ */ jsx343(Row2, { children: columns.map((col) => /* @__PURE__ */ jsx343(
       Cell5,
       {
         className: `Layer__UI__Table-Cell__${componentName}--${col.id}`,
@@ -38595,14 +38646,14 @@ var DataTable = ({
     return RowRenderer;
   }, [isError, isLoading, isEmptyTable, columns, ErrorState, EmptyState, componentName]);
   return /* @__PURE__ */ jsxs217(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
-    /* @__PURE__ */ jsx342(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ jsx342(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
-    /* @__PURE__ */ jsx342(TableBody2, { items: data, children: renderTableBody })
+    /* @__PURE__ */ jsx343(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ jsx343(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
+    /* @__PURE__ */ jsx343(TableBody2, { items: data, children: renderTableBody })
   ] });
 };
 
 // src/components/DataTable/PaginatedTable.tsx
-import { useCallback as useCallback56, useMemo as useMemo75, useState as useState85 } from "react";
-import { jsx as jsx343, jsxs as jsxs218 } from "react/jsx-runtime";
+import { useCallback as useCallback57, useMemo as useMemo75, useState as useState85 } from "react";
+import { jsx as jsx344, jsxs as jsxs218 } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
 function PaginatedTable({
   data,
@@ -38636,11 +38687,11 @@ function PaginatedTable({
   });
   const { rows } = table.getRowModel();
   const rowData = useMemo75(() => rows.map((r) => r.original), [rows]);
-  const onPageChange = useCallback56((page) => {
+  const onPageChange = useCallback57((page) => {
     table.setPageIndex(page - 1);
   }, [table]);
   return /* @__PURE__ */ jsxs218(VStack, { children: [
-    /* @__PURE__ */ jsx343(
+    /* @__PURE__ */ jsx344(
       DataTable,
       {
         ariaLabel,
@@ -38652,7 +38703,7 @@ function PaginatedTable({
         slots
       }
     ),
-    !isError && !isLoading && /* @__PURE__ */ jsx343(
+    !isError && !isLoading && /* @__PURE__ */ jsx344(
       Pagination,
       {
         currentPage: table.getState().pagination.pageIndex + 1,
@@ -38667,7 +38718,7 @@ function PaginatedTable({
 }
 
 // src/icons/ChevronRightFill.tsx
-import { jsx as jsx344, jsxs as jsxs219 } from "react/jsx-runtime";
+import { jsx as jsx345, jsxs as jsxs219 } from "react/jsx-runtime";
 var ChevronRightFill = (_a) => {
   var _b = _a, { size = 18 } = _b, props = __objRest(_b, ["size"]);
   return /* @__PURE__ */ jsxs219(
@@ -38680,8 +38731,8 @@ var ChevronRightFill = (_a) => {
       width: size,
       height: size,
       children: [
-        /* @__PURE__ */ jsx344("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
-        /* @__PURE__ */ jsx344(
+        /* @__PURE__ */ jsx345("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx345(
           "path",
           {
             d: "M6.75 4.5L11.25 9L6.75 13.5Z",
@@ -38700,7 +38751,7 @@ var ChevronRightFill_default = ChevronRightFill;
 import { HandCoins, Search as Search2, Plus as Plus3 } from "lucide-react";
 
 // src/components/DataTable/DataTableHeader.tsx
-import { jsx as jsx345, jsxs as jsxs220 } from "react/jsx-runtime";
+import { jsx as jsx346, jsxs as jsxs220 } from "react/jsx-runtime";
 var DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
   const { showCount, totalCount } = count != null ? count : {};
   const { Filters: Filters2, HeaderActions, HeaderFilters } = slots;
@@ -38708,26 +38759,26 @@ var DataTableHeader = ({ name, count, slotProps = {}, slots = {} }) => {
     /* @__PURE__ */ jsxs220(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
       /* @__PURE__ */ jsxs220(HStack, { pis: "md", align: "center", gap: "xl", children: [
         /* @__PURE__ */ jsxs220(HStack, { align: "center", gap: "sm", children: [
-          /* @__PURE__ */ jsx345(Span, { weight: "bold", size: "lg", children: name }),
-          showCount && (totalCount ? /* @__PURE__ */ jsx345(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ jsx345(BadgeLoader, {}))
+          /* @__PURE__ */ jsx346(Span, { weight: "bold", size: "lg", children: name }),
+          showCount && (totalCount ? /* @__PURE__ */ jsx346(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ jsx346(BadgeLoader, {}))
         ] }),
-        HeaderFilters && /* @__PURE__ */ jsx345(HeaderFilters, {})
+        HeaderFilters && /* @__PURE__ */ jsx346(HeaderFilters, {})
       ] }),
       /* @__PURE__ */ jsxs220(HStack, { pie: "md", align: "center", gap: "3xs", children: [
-        slotProps.SearchField && /* @__PURE__ */ jsx345(SearchField, __spreadValues({}, slotProps.SearchField)),
-        HeaderActions && /* @__PURE__ */ jsx345(HeaderActions, {})
+        slotProps.SearchField && /* @__PURE__ */ jsx346(SearchField, __spreadValues({}, slotProps.SearchField)),
+        HeaderActions && /* @__PURE__ */ jsx346(HeaderActions, {})
       ] })
     ] }),
     Filters2 && /* @__PURE__ */ jsxs220(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
-      /* @__PURE__ */ jsx345(Filters2, {}),
-      slotProps.ClearFiltersButton && /* @__PURE__ */ jsx345(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
+      /* @__PURE__ */ jsx346(Filters2, {}),
+      slotProps.ClearFiltersButton && /* @__PURE__ */ jsx346(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
     ] })
   ] });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
 import { startOfToday, endOfYesterday } from "date-fns";
-import { jsx as jsx346, jsxs as jsxs221 } from "react/jsx-runtime";
+import { jsx as jsx347, jsxs as jsxs221 } from "react/jsx-runtime";
 var COMPONENT_NAME10 = "InvoicesTable";
 var InvoiceStatusOptionConfig = {
   ["All" /* All */]: { label: "All", value: "All" /* All */ },
@@ -38748,11 +38799,11 @@ var AmountCell = ({ invoice }) => {
     case "WRITTEN_OFF" /* WrittenOff */:
     case "VOIDED" /* Voided */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ jsx346(VStack, { children: /* @__PURE__ */ jsx346(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ jsx347(VStack, { children: /* @__PURE__ */ jsx347(Span, { align: "right", children: totalAmount }) });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
       return /* @__PURE__ */ jsxs221(VStack, { children: [
-        /* @__PURE__ */ jsx346(Span, { align: "right", children: totalAmount }),
+        /* @__PURE__ */ jsx347(Span, { align: "right", children: totalAmount }),
         /* @__PURE__ */ jsxs221(Span, { align: "right", variant: "subtle", size: "sm", children: [
           outstandingBalance,
           " ",
@@ -38792,16 +38843,16 @@ var getColumnConfig = (onSelectInvoice) => ({
   ["Total" /* Total */]: {
     id: "Total" /* Total */,
     header: "Amount",
-    cell: (row) => /* @__PURE__ */ jsx346(AmountCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsx347(AmountCell, { invoice: row })
   },
   ["Status" /* Status */]: {
     id: "Status" /* Status */,
     header: "Status",
-    cell: (row) => /* @__PURE__ */ jsx346(InvoiceStatusCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ jsx347(InvoiceStatusCell, { invoice: row })
   },
   ["Expand" /* Expand */]: {
     id: "Expand" /* Expand */,
-    cell: (row) => /* @__PURE__ */ jsx346(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsx346(ChevronRightFill_default, {}) })
+    cell: (row) => /* @__PURE__ */ jsx347(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ jsx347(ChevronRightFill_default, {}) })
   }
 });
 var UNPAID_STATUSES2 = ["SENT" /* Sent */, "PARTIALLY_PAID" /* PartiallyPaid */];
@@ -38839,7 +38890,7 @@ 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 = useCallback57(() => {
+  const fetchMore = useCallback58(() => {
     if (hasMore) {
       void setSize(size + 1);
     }
@@ -38856,8 +38907,8 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
     const label = selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label]);
-  const StatusFilter = useCallback57(
-    () => /* @__PURE__ */ jsx346(
+  const StatusFilter = useCallback58(
+    () => /* @__PURE__ */ jsx347(
       ComboBox,
       {
         className: "Layer__InvoicesTable__StatusFilter",
@@ -38873,27 +38924,27 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
     ),
     [SelectedValue, options, selectedInvoiceStatusOption]
   );
-  const CreateInvoiceButton = useCallback57(
+  const CreateInvoiceButton = useCallback58(
     () => /* @__PURE__ */ jsxs221(Button2, { onPress: onCreateInvoice, children: [
       "Create Invoice",
-      /* @__PURE__ */ jsx346(Plus3, { size: 16 })
+      /* @__PURE__ */ jsx347(Plus3, { size: 16 })
     ] }),
     [onCreateInvoice]
   );
-  const InvoicesTableEmptyState = useCallback57(() => {
+  const InvoicesTableEmptyState = useCallback58(() => {
     const isFiltered = selectedInvoiceStatusOption && selectedInvoiceStatusOption !== ALL_OPTION;
-    return /* @__PURE__ */ jsx346(
+    return /* @__PURE__ */ jsx347(
       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__ */ jsx346(Search2, {}) : /* @__PURE__ */ jsx346(HandCoins, {}),
+        icon: isFiltered ? /* @__PURE__ */ jsx347(Search2, {}) : /* @__PURE__ */ jsx347(HandCoins, {}),
         spacing: true
       }
     );
   }, [selectedInvoiceStatusOption]);
-  const InvoicesTableErrorState = useCallback57(() => /* @__PURE__ */ jsx346(
+  const InvoicesTableErrorState = useCallback58(() => /* @__PURE__ */ jsx347(
     DataState,
     {
       status: "failed" /* failed */,
@@ -38907,7 +38958,7 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
   ), [refetch]);
   const columnConfig = useMemo76(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
   return /* @__PURE__ */ jsxs221(Container, { name: "InvoicesTable", children: [
-    /* @__PURE__ */ jsx346(
+    /* @__PURE__ */ jsx347(
       DataTableHeader,
       {
         name: "Invoices",
@@ -38917,7 +38968,7 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx346(
+    /* @__PURE__ */ jsx347(
       PaginatedTable,
       {
         ariaLabel: "Invoices",
@@ -38937,38 +38988,38 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
 };
 
 // src/components/Invoices/Invoices.tsx
-import { jsx as jsx347 } from "react/jsx-runtime";
+import { jsx as jsx348 } from "react/jsx-runtime";
 var unstable_Invoices = ({
   showTitle = true,
   stringOverrides
 }) => {
   const [invoiceFormMode, setInvoiceFormMode] = useState87(null);
-  const goBackToInvoicesTable = useCallback58(() => {
+  const goBackToInvoicesTable = useCallback59(() => {
     setInvoiceFormMode(null);
   }, []);
-  const onCreateInvoice = useCallback58(() => {
+  const onCreateInvoice = useCallback59(() => {
     setInvoiceFormMode({ mode: "Create" /* Create */ });
   }, []);
-  const onSelectInvoice = useCallback58((invoice) => {
+  const onSelectInvoice = useCallback59((invoice) => {
     setInvoiceFormMode({ mode: "Update" /* Update */, invoice });
   }, []);
-  return /* @__PURE__ */ jsx347(
+  return /* @__PURE__ */ jsx348(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices",
       showHeader: showTitle,
-      children: invoiceFormMode !== null ? /* @__PURE__ */ jsx347(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ jsx347(InvoicesTable, { onCreateInvoice, onSelectInvoice })
+      children: invoiceFormMode !== null ? /* @__PURE__ */ jsx348(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ jsx348(InvoicesTable, { onCreateInvoice, onSelectInvoice })
     }
   );
 };
 
 // src/providers/BankTransactionsProvider/BankTransactionsProvider.tsx
-import { jsx as jsx348 } from "react/jsx-runtime";
+import { jsx as jsx349 } from "react/jsx-runtime";
 var BankTransactionsProvider = ({
   children
 }) => {
   const bankTransactionsContextData = useAugmentedBankTransactions();
-  return /* @__PURE__ */ jsx348(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
+  return /* @__PURE__ */ jsx349(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
 };
 export {
   AccountingOverview,