@layerfi/components 0.1.106-alpha.1 → 0.1.106

package/dist/cjs/index.cjs

@@ -5603,7 +5603,7 @@ var import_react12 = require("react");
 var import_react10 = require("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 {
@@ -7123,7 +7123,7 @@ function clampToPresentOrPast(date, cutoff = (0, import_date_fns3.endOfDay)(/* @
 }
 var RANGE_MODE_LOOKUP = {
   dayPicker: {
-    getStart: ({ start }) => start,
+    getStart: ({ start }) => (0, import_date_fns3.startOfMonth)(start),
     getEnd: ({ end }) => clampToPresentOrPast((0, import_date_fns3.endOfDay)(end))
   },
   dayRangePicker: {
@@ -37171,10 +37171,10 @@ var Components = ({
 };
 
 // src/components/Invoices/Invoices.tsx
-var import_react237 = require("react");
+var import_react238 = require("react");
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-var import_react231 = require("react");
+var import_react232 = require("react");
 
 // src/components/BaseDetailView/BaseDetailView.tsx
 var import_jsx_runtime327 = require("react/jsx-runtime");
@@ -37190,7 +37190,7 @@ var BaseDetailView = ({ name, onGoBack, slots, children }) => {
 };
 
 // src/components/Invoices/InvoiceForm/useInvoiceForm.ts
-var import_react229 = require("react");
+var import_react230 = require("react");
 var import_react_form7 = require("@tanstack/react-form");
 
 // src/features/forms/hooks/useForm.tsx
@@ -37328,11 +37328,14 @@ 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;
-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;
@@ -37370,7 +37373,7 @@ function FormBigDecimalField({
   (0, import_react223.useEffect)(() => {
     setInputValue(formatBigDecimalToString(value, maxInputLength));
   }, [value, maxInputLength]);
-  return /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { inputMode: "decimal", children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime332.jsx)(
+  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)(
     Input2,
     {
       inset: true,
@@ -37386,23 +37389,67 @@ function FormBigDecimalField({
   ) }) }));
 }
 
-// src/features/forms/components/FormCurrencyField.tsx
+// 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";
+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 = (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,
+      onBlur: handleBlur,
+      name,
+      value: name,
+      size: "lg"
+    }, 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
+var import_react225 = require("react");
 var import_react_currency_input_field2 = __toESM(require("react-currency-input-field"));
 var import_effect11 = require("effect");
-var import_jsx_runtime333 = require("react/jsx-runtime");
+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({ 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] = (0, import_react224.useState)(getCurrencyInputValueFromCents(value));
-  const onInputChange = (0, import_react224.useCallback)((newValue) => {
+  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_react224.useCallback)(() => {
+  const onInputBlur = (0, import_react225.useCallback)(() => {
     const maybeAmount = import_effect11.BigDecimal.fromString(inputValue);
     const cents = import_effect11.Option.match(maybeAmount, {
       onNone: () => 0,
@@ -37412,10 +37459,10 @@ function FormCurrencyField({ slotProps }) {
     handleBlur();
     setInputValue(getCurrencyInputValueFromCents(cents));
   }, [inputValue, handleChange, handleBlur]);
-  (0, import_react224.useEffect)(() => {
+  (0, import_react225.useEffect)(() => {
     setInputValue(getCurrencyInputValueFromCents(value));
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime333.jsx)(
+  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,
     {
       name,
@@ -37438,18 +37485,18 @@ function FormCurrencyField({ slotProps }) {
 }
 
 // src/features/forms/components/FormTextAreaField.tsx
-var import_react226 = require("react");
+var import_react227 = require("react");
 
 // src/components/ui/Input/TextArea.tsx
-var import_react225 = require("react");
+var import_react226 = require("react");
 var import_react_aria_components17 = require("react-aria-components");
-var import_jsx_runtime334 = require("react/jsx-runtime");
+var import_jsx_runtime335 = require("react/jsx-runtime");
 var TEXTAREA_CLASS_NAME = "Layer__UI__TextArea";
-var TextArea = (0, import_react225.forwardRef)(
+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_runtime334.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(
       import_react_aria_components17.TextArea,
       __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
         className: TEXTAREA_CLASS_NAME,
@@ -37460,28 +37507,28 @@ var TextArea = (0, import_react225.forwardRef)(
 );
 
 // src/features/forms/components/FormTextAreaField.tsx
-var import_jsx_runtime335 = require("react/jsx-runtime");
-function FormTextAreaField({ slotProps }) {
+var import_jsx_runtime336 = require("react/jsx-runtime");
+function FormTextAreaField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
-  const onChange = (0, import_react226.useCallback)((e) => {
+  const onChange = (0, import_react227.useCallback)((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ (0, import_jsx_runtime335.jsx)(TextArea, { id: name, name, value, onChange, onBlur: handleBlur }) }));
+  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 }) }));
 }
 
 // src/features/forms/components/FormTextField.tsx
-var import_react227 = require("react");
-var import_jsx_runtime336 = require("react/jsx-runtime");
-function FormTextField({ slotProps }) {
+var import_react228 = require("react");
+var import_jsx_runtime337 = require("react/jsx-runtime");
+function FormTextField(props) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
-  const onChange = (0, import_react227.useCallback)((e) => {
+  const onChange = (0, import_react228.useCallback)((e) => {
     handleChange(e.target.value);
   }, [handleChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(BaseFormTextField, __spreadProps(__spreadValues({}, slotProps.BaseFormTextField), { children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(InputGroup2, { children: /* @__PURE__ */ (0, import_jsx_runtime336.jsx)(Input2, { inset: true, id: name, name, value, onChange, onBlur: handleBlur }) }) }));
+  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 }) }) }));
 }
 
 // src/features/forms/hooks/useForm.tsx
@@ -37490,6 +37537,7 @@ var { useAppForm, withForm } = (0, import_react_form6.createFormHook)({
   fieldComponents: {
     BaseFormTextField,
     FormBigDecimalField,
+    FormCheckboxField,
     FormCurrencyField,
     FormTextAreaField,
     FormTextField
@@ -37670,7 +37718,7 @@ var UpsertInvoiceSchema = import_effect12.Schema.Struct({
 });
 
 // src/features/invoices/api/useUpsertInvoice.tsx
-var import_react228 = require("react");
+var import_react229 = require("react");
 var import_mutation26 = __toESM(require("swr/mutation"));
 var import_effect13 = require("effect");
 var UPSERT_INVOICES_TAG_KEY = "#upsert-invoice";
@@ -37766,7 +37814,7 @@ var useUpsertInvoice = (props) => {
   );
   const mutationResponse = new UpsertInvoiceSWRResponse(rawMutationResponse);
   const originalTrigger = mutationResponse.trigger;
-  const stableProxiedTrigger = (0, import_react228.useCallback)(
+  const stableProxiedTrigger = (0, import_react229.useCallback)(
     (...triggerParameters) => __async(null, null, function* () {
       const triggerResult = yield originalTrigger(...triggerParameters);
       return triggerResult;
@@ -37790,7 +37838,8 @@ var EMPTY_LINE_ITEM = {
   description: "",
   unitPrice: 0,
   quantity: BIG_DECIMAL_ONE,
-  amount: 0
+  amount: 0,
+  isTaxable: false
 };
 var DEFAULT_FORM_VALUES = {
   invoiceNumber: "",
@@ -37805,7 +37854,8 @@ var getInvoiceLineItemAmount = (lineItem) => {
 };
 var getAugmentedInvoiceFormLineItem = (lineItem) => {
   return __spreadProps(__spreadValues({}, lineItem), {
-    amount: getInvoiceLineItemAmount(lineItem)
+    amount: getInvoiceLineItemAmount(lineItem),
+    isTaxable: lineItem.salesTaxTotal > 0
   });
 };
 var getInvoiceFormDefaultValues = (invoice) => {
@@ -37819,7 +37869,7 @@ var getInvoiceFormDefaultValues = (invoice) => {
   };
 };
 var useInvoiceForm = (props) => {
-  const [submitError, setSubmitError] = (0, import_react229.useState)(void 0);
+  const [submitError, setSubmitError] = (0, import_react230.useState)(void 0);
   const { onSuccess, mode } = props;
   const upsertInvoiceProps = mode === "Update" /* Update */ ? { mode, invoiceId: props.invoice.id } : { mode };
   const { trigger: upsertInvoice } = useUpsertInvoice(upsertInvoiceProps);
@@ -37850,9 +37900,9 @@ var import_lucide_react16 = require("lucide-react");
 var import_effect15 = require("effect");
 
 // src/features/customers/components/CustomerSelector.tsx
-var import_react230 = require("react");
-var import_classnames89 = __toESM(require("classnames"));
-var import_jsx_runtime337 = require("react/jsx-runtime");
+var import_react231 = require("react");
+var import_classnames90 = __toESM(require("classnames"));
+var import_jsx_runtime338 = 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";
@@ -37883,7 +37933,7 @@ function CustomerSelector({
   inline,
   className
 }) {
-  const combinedClassName = (0, import_classnames89.default)(
+  const combinedClassName = (0, import_classnames90.default)(
     "Layer__CustomerSelector",
     inline && "Layer__CustomerSelector--inline",
     className
@@ -37893,12 +37943,12 @@ function CustomerSelector({
   });
   const effectiveSearchQuery = searchQuery === "" ? void 0 : searchQuery;
   const { data, isLoading, isError } = useListCustomers({ query: effectiveSearchQuery });
-  const options = (0, import_react230.useMemo)(
+  const options = (0, import_react231.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_react230.useCallback)(
+  const handleSelectionChange = (0, import_react231.useCallback)(
     (selectedOption) => {
       if (selectedOption === null) {
         handleInputChange("");
@@ -37919,7 +37969,7 @@ function CustomerSelector({
     },
     [options, handleInputChange, selectedCustomerId, onSelectedCustomerChange]
   );
-  const selectedCustomerForComboBox = (0, import_react230.useMemo)(
+  const selectedCustomerForComboBox = (0, import_react231.useMemo)(
     () => {
       if (selectedCustomer === null) {
         return null;
@@ -37931,12 +37981,12 @@ function CustomerSelector({
     },
     [selectedCustomer]
   );
-  const EmptyMessage = (0, import_react230.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(P, { variant: "subtle", children: "No matching customer" }),
+  const EmptyMessage = (0, import_react231.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(P, { variant: "subtle", children: "No matching customer" }),
     []
   );
-  const ErrorMessage = (0, import_react230.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  const ErrorMessage = (0, import_react231.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
       P,
       {
         size: "xs",
@@ -37946,7 +37996,7 @@ function CustomerSelector({
     ),
     []
   );
-  const inputId = (0, import_react230.useId)();
+  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;
@@ -37955,9 +38005,9 @@ function CustomerSelector({
   }
   const isLoadingWithoutFallback = isLoading && !data;
   const shouldDisableComboBox = isLoadingWithoutFallback || isError;
-  return /* @__PURE__ */ (0, import_jsx_runtime337.jsxs)(VStack, { className: combinedClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(Label, { htmlFor: inputId, size: "sm", children: "Customer" }),
-    /* @__PURE__ */ (0, import_jsx_runtime337.jsx)(
+  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)(
       ComboBox,
       {
         selectedValue: selectedCustomerForComboBox,
@@ -37976,7 +38026,7 @@ function CustomerSelector({
 }
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
-var import_jsx_runtime338 = require("react/jsx-runtime");
+var import_jsx_runtime339 = 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) => {
@@ -37984,9 +38034,9 @@ var InvoiceForm = (props) => {
   const { form } = useInvoiceForm(
     __spreadValues({ onSuccess }, mode === "Update" /* Update */ ? { mode, invoice: props.invoice } : { mode })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(Form, { className: INVOICE_FORM_CSS_PREFIX, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__Metadata`, gap: "xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+  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",
@@ -37996,7 +38046,7 @@ var InvoiceForm = (props) => {
               form.setFieldValue("address", customer == null ? void 0 : customer.addressString);
             }
           },
-          children: (field) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+          children: (field) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
             CustomerSelector,
             {
               className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Customer`,
@@ -38007,14 +38057,14 @@ var InvoiceForm = (props) => {
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: "email", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(field.FormTextField, { slotProps: { BaseFormTextField: { label: "Email", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Email` } } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: "address", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(field.FormTextAreaField, { slotProps: { BaseFormTextField: { label: "Billing address", inline: true, className: `${INVOICE_FORM_FIELD_CSS_PREFIX}__Address` } } }) })
+      /* @__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_runtime338.jsx)(VStack, { className: `${INVOICE_FORM_CSS_PREFIX}__LineItems`, gap: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: "lineItems", mode: "array", children: (field) => /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(VStack, { gap: "xs", align: "baseline", children: [
-      field.state.value.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime338.jsxs)(HStack, { gap: "xs", align: "end", className: `${INVOICE_FORM_CSS_PREFIX}__LineItem`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Product", showLabel: index === 0 } } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormTextField, { slotProps: { BaseFormTextField: { label: "Description", showLabel: index === 0 } } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+    /* @__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,
           {
             name: `lineItems[${index}].quantity`,
@@ -38025,10 +38075,10 @@ var InvoiceForm = (props) => {
                 form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
               }
             },
-            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormBigDecimalField, { slotProps: { BaseFormTextField: { label: "Quantity", showLabel: index === 0 } } })
+            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormBigDecimalField, { label: "Quantity", showLabel: index === 0 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
           form.AppField,
           {
             name: `lineItems[${index}].unitPrice`,
@@ -38039,10 +38089,10 @@ var InvoiceForm = (props) => {
                 form.setFieldValue(`lineItems[${index}].amount`, convertBigDecimalToCents(nextAmount));
               }
             },
-            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Rate", showLabel: index === 0 } } })
+            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormCurrencyField, { label: "Rate", showLabel: index === 0 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
           form.AppField,
           {
             name: `lineItems[${index}].amount`,
@@ -38057,31 +38107,32 @@ var InvoiceForm = (props) => {
                 form.setFieldValue(`lineItems[${index}].unitPrice`, convertBigDecimalToCents(nextUnitPrice));
               }
             },
-            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(innerField.FormCurrencyField, { slotProps: { BaseFormTextField: { label: "Amount", showLabel: index === 0 } } })
+            children: (innerField) => /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(innerField.FormCurrencyField, { label: "Amount", showLabel: index === 0 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(Button2, { variant: "outlined", icon: true, "aria-label": "Delete line item", onClick: () => field.removeValue(index), children: /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(import_lucide_react16.Trash, { size: 16 }) })
+        /* @__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_runtime338.jsxs)(Button2, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(Button2, { variant: "outlined", onClick: () => field.pushValue(EMPTY_LINE_ITEM), children: [
         "Add line item",
-        /* @__PURE__ */ (0, import_jsx_runtime338.jsx)(import_lucide_react16.Plus, { size: 16 })
+        /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(import_lucide_react16.Plus, { size: 16 })
       ] })
     ] }) }) })
   ] });
 };
 
 // src/components/DataPoint/DataPoint.tsx
-var import_jsx_runtime339 = require("react/jsx-runtime");
+var import_jsx_runtime340 = require("react/jsx-runtime");
 var DataPoint = ({ label, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime339.jsxs)(VStack, { gap: "3xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(Span, { variant: "subtle", size: "xs", children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(VStack, { gap: "3xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Span, { variant: "subtle", size: "xs", children: label }),
     children
   ] });
 };
 
 // src/components/Invoices/InvoiceStatusCell/InvoiceStatusCell.tsx
 var import_pluralize6 = __toESM(require("pluralize"));
-var import_jsx_runtime340 = require("react/jsx-runtime");
+var import_jsx_runtime341 = require("react/jsx-runtime");
 var getDueStatusConfig = (invoice, { inline }) => {
   const badgeSize = inline ? "xs" /* EXTRA_SMALL */ : "small" /* SMALL */;
   const iconSize = inline ? 10 : 12;
@@ -38095,7 +38146,7 @@ var getDueStatusConfig = (invoice, { inline }) => {
     case "PAID" /* Paid */: {
       return {
         text: "Paid",
-        badge: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Badge, { variant: "success" /* SUCCESS */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(CheckCircle_default, { size: iconSize }), iconOnly: true })
+        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 })
       };
     }
     case "VOIDED" /* Voided */: {
@@ -38118,7 +38169,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_runtime340.jsx)(Badge, { variant: "warning" /* WARNING */, size: badgeSize, icon: /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(AlertCircle_default, { size: iconSize }), iconOnly: true })
+          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 })
         };
       }
       return {
@@ -38138,51 +38189,51 @@ 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_runtime340.jsxs)(HStack, { gap: "xs", align: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(HStack, { gap: "xs", align: "center", children: [
     dueStatus.badge,
-    /* @__PURE__ */ (0, import_jsx_runtime340.jsxs)(Stack3, __spreadProps(__spreadValues({}, inline && { gap: "3xs", align: "center" }), { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Span, { children: dueStatus.text }),
-      subText && /* @__PURE__ */ (0, import_jsx_runtime340.jsx)(Span, { variant: "subtle", size: "sm", children: subText })
+    /* @__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 })
     ] }))
   ] });
 };
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-var import_jsx_runtime341 = require("react/jsx-runtime");
+var import_jsx_runtime342 = require("react/jsx-runtime");
 var InvoiceDetail = (props) => {
   const _a = props, { onSuccess: _onSuccess, onGoBack } = _a, restProps = __objRest(_a, ["onSuccess", "onGoBack"]);
-  const Header6 = (0, import_react231.useCallback)(() => {
-    return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceDetailHeader, __spreadValues({}, restProps));
+  const Header6 = (0, import_react232.useCallback)(() => {
+    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(InvoiceDetailHeader, __spreadValues({}, restProps));
   }, [restProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(BaseDetailView, { slots: { Header: Header6 }, name: "Invoice Detail View", onGoBack, children: [
-    restProps.mode === "Update" /* Update */ && /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceDetailSubHeader, { invoice: restProps.invoice }),
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceForm, __spreadValues({}, props))
+  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))
   ] });
 };
 var InvoiceDetailHeader = (props) => {
   const { mode } = props;
   if (mode === "Create" /* Create */) {
-    return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Heading2, { children: "Create Invoice" });
+    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Heading2, { children: "Create Invoice" });
   }
   const invoice = props.invoice;
   const { invoiceNumber } = invoice;
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
+  return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Heading2, { children: invoiceNumber ? `Invoice ${invoiceNumber}` : "View Invoice" });
 };
 var InvoiceDetailSubHeader = ({ invoice }) => {
   const { outstandingBalance, totalAmount } = invoice;
-  return /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(HStack, { className: "Layer__InvoiceDetail__SubHeader", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsxs)(HStack, { gap: "5xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(DataPoint, { label: "Balance due", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { children: convertCentsToCurrency(outstandingBalance) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(DataPoint, { label: "Open balance", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(Span, { children: convertCentsToCurrency(totalAmount) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(DataPoint, { label: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime341.jsx)(InvoiceStatusCell, { invoice, inline: true }) })
+  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 }) })
   ] }) });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
-var import_react236 = require("react");
+var import_react237 = require("react");
 
 // src/features/invoices/api/useListInvoices.tsx
 var import_infinite7 = __toESM(require("swr/infinite"));
-var import_react232 = require("react");
+var import_react233 = require("react");
 var import_lodash6 = __toESM(require_lodash());
 var import_effect17 = require("effect");
 
@@ -38346,19 +38397,19 @@ function useListInvoices({
 var import_react_table2 = require("@tanstack/react-table");
 
 // src/components/DataTable/DataTable.tsx
-var import_react234 = require("react");
+var import_react235 = require("react");
 
 // src/components/ui/Table/Table.tsx
-var import_react233 = require("react");
+var import_react234 = require("react");
 var import_react_aria_components18 = require("react-aria-components");
-var import_classnames90 = __toESM(require("classnames"));
-var import_jsx_runtime342 = require("react/jsx-runtime");
+var import_classnames91 = __toESM(require("classnames"));
+var import_jsx_runtime343 = require("react/jsx-runtime");
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => (0, import_classnames90.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
-var Table2 = (0, import_react233.forwardRef)(
+var getClassName = (component, additionalClassNames) => (0, import_classnames91.default)(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var Table2 = (0, import_react234.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
       import_react_aria_components18.Table,
       __spreadProps(__spreadValues({
         className: getClassName("Table" /* Table */, className)
@@ -38372,7 +38423,7 @@ var Table2 = (0, import_react233.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_runtime342.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
     import_react_aria_components18.TableHeader,
     __spreadProps(__spreadValues({
       className: getClassName("TableHeader" /* TableHeader */, className)
@@ -38382,11 +38433,11 @@ var TableHeaderInner = (_a, ref) => {
     })
   );
 };
-var TableHeader = (0, import_react233.forwardRef)(TableHeaderInner);
+var TableHeader = (0, import_react234.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_runtime342.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
     import_react_aria_components18.TableBody,
     __spreadProps(__spreadValues({
       className: getClassName("TableBody" /* TableBody */, className)
@@ -38396,11 +38447,11 @@ var TableBodyInner = (_a, ref) => {
     })
   );
 };
-var TableBody2 = (0, import_react233.forwardRef)(TableBodyInner);
+var TableBody2 = (0, import_react234.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_runtime342.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
     import_react_aria_components18.Row,
     __spreadProps(__spreadValues({
       className: getClassName("Row" /* Row */, className)
@@ -38410,13 +38461,13 @@ var RowInner = (_a, ref) => {
     })
   );
 };
-var Row2 = (0, import_react233.forwardRef)(RowInner);
+var Row2 = (0, import_react234.forwardRef)(RowInner);
 Row2.displayName = "Row" /* Row */;
-var Column = (0, import_react233.forwardRef)(
+var Column = (0, import_react234.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_runtime342.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
       import_react_aria_components18.Column,
       __spreadProps(__spreadValues(__spreadValues({
         className: getClassName("Column" /* Column */, className)
@@ -38428,10 +38479,10 @@ var Column = (0, import_react233.forwardRef)(
   }
 );
 Column.displayName = "Column" /* Column */;
-var Cell5 = (0, import_react233.forwardRef)(
+var Cell5 = (0, import_react234.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
       import_react_aria_components18.Cell,
       __spreadProps(__spreadValues({
         className: getClassName("Cell" /* Cell */, className)
@@ -38445,7 +38496,7 @@ var Cell5 = (0, import_react233.forwardRef)(
 Cell5.displayName = "Cell" /* Cell */;
 
 // src/components/DataTable/DataTable.tsx
-var import_jsx_runtime343 = require("react/jsx-runtime");
+var import_jsx_runtime344 = require("react/jsx-runtime");
 var DataTable = ({
   columnConfig,
   data,
@@ -38458,17 +38509,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_react234.useMemo)(() => {
+  const renderTableBody = (0, import_react235.useMemo)(() => {
     if (isError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(ErrorState, {}) }) });
+      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, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Loader2, {}) }) });
+      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, {}) }) });
     }
     if (isEmptyTable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Cell5, { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(EmptyState, {}) }) });
+      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, {}) }) });
     }
-    const RowRenderer = (row) => /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Row2, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(
+    const RowRenderer = (row) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(Row2, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
       Cell5,
       {
         className: `Layer__UI__Table-Cell__${componentName}--${col.id}`,
@@ -38479,15 +38530,15 @@ var DataTable = ({
     RowRenderer.displayName = "Row";
     return RowRenderer;
   }, [isError, isLoading, isEmptyTable, columns, ErrorState, EmptyState, componentName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime343.jsxs)(Table2, { "aria-label": ariaLabel, className: `Layer__UI__Table__${componentName}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(TableHeader, { columns, children: ({ id, header, isRowHeader }) => /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(Column, { isRowHeader, className: `Layer__UI__Table-Column__${componentName}--${id}`, children: header }, id) }),
-    /* @__PURE__ */ (0, import_jsx_runtime343.jsx)(TableBody2, { items: data, children: renderTableBody })
+  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 })
   ] });
 };
 
 // src/components/DataTable/PaginatedTable.tsx
-var import_react235 = require("react");
-var import_jsx_runtime344 = require("react/jsx-runtime");
+var import_react236 = require("react");
+var import_jsx_runtime345 = require("react/jsx-runtime");
 var EMPTY_ARRAY = [];
 function PaginatedTable({
   data,
@@ -38500,7 +38551,7 @@ function PaginatedTable({
   slots
 }) {
   const { pageSize = 20, hasMore, fetchMore } = paginationProps;
-  const [pagination, setPagination] = (0, import_react235.useState)({ pageIndex: 0, pageSize });
+  const [pagination, setPagination] = (0, import_react236.useState)({ pageIndex: 0, pageSize });
   const columnHelper = (0, import_react_table2.createColumnHelper)();
   const columns = Object.values(columnConfig);
   const columnDefs = columns.map((col) => {
@@ -38520,12 +38571,12 @@ function PaginatedTable({
     autoResetPageIndex: false
   });
   const { rows } = table.getRowModel();
-  const rowData = (0, import_react235.useMemo)(() => rows.map((r) => r.original), [rows]);
-  const onPageChange = (0, import_react235.useCallback)((page) => {
+  const rowData = (0, import_react236.useMemo)(() => rows.map((r) => r.original), [rows]);
+  const onPageChange = (0, import_react236.useCallback)((page) => {
     table.setPageIndex(page - 1);
   }, [table]);
-  return /* @__PURE__ */ (0, import_jsx_runtime344.jsxs)(VStack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(VStack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
       DataTable,
       {
         ariaLabel,
@@ -38537,7 +38588,7 @@ function PaginatedTable({
         slots
       }
     ),
-    !isError && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime344.jsx)(
+    !isError && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
       Pagination,
       {
         currentPage: table.getState().pagination.pageIndex + 1,
@@ -38552,10 +38603,10 @@ function PaginatedTable({
 }
 
 // src/icons/ChevronRightFill.tsx
-var import_jsx_runtime345 = require("react/jsx-runtime");
+var import_jsx_runtime346 = require("react/jsx-runtime");
 var ChevronRightFill = (_a) => {
   var _b = _a, { size = 18 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -38565,8 +38616,8 @@ var ChevronRightFill = (_a) => {
       width: size,
       height: size,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime345.jsx)("path", { d: "M6.75 4.5L11.25 9L6.75 13.5", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+        /* @__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)(
           "path",
           {
             d: "M6.75 4.5L11.25 9L6.75 13.5Z",
@@ -38585,34 +38636,34 @@ var ChevronRightFill_default = ChevronRightFill;
 var import_lucide_react17 = require("lucide-react");
 
 // src/components/DataTable/DataTableHeader.tsx
-var import_jsx_runtime346 = require("react/jsx-runtime");
+var import_jsx_runtime347 = 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_runtime346.jsxs)(VStack, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { justify: "space-between", align: "center", className: "Layer__DataTableHeader__Header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { pis: "md", align: "center", gap: "xl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { align: "center", gap: "sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Span, { weight: "bold", size: "lg", children: name }),
-          showCount && (totalCount ? /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Badge, { variant: "default" /* DEFAULT */, size: "medium" /* MEDIUM */, children: totalCount }) : /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(BadgeLoader, {}))
+  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, {}))
         ] }),
-        HeaderFilters && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(HeaderFilters, {})
+        HeaderFilters && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(HeaderFilters, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { pie: "md", align: "center", gap: "3xs", children: [
-        slotProps.SearchField && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(SearchField, __spreadValues({}, slotProps.SearchField)),
-        HeaderActions && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(HeaderActions, {})
+      /* @__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, {})
       ] })
     ] }),
-    Filters2 && /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(HStack, { pis: "md", pie: "md", justify: "space-between", align: "center", className: "Layer__DataTableHeader__Filters", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Filters2, {}),
-      slotProps.ClearFiltersButton && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(Button2, __spreadProps(__spreadValues({ variant: "outlined" }, slotProps.ClearFiltersButton), { children: "Clear All Filters" }))
+    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" }))
     ] })
   ] });
 };
 
 // src/components/Invoices/InvoicesTable/InvoicesTable.tsx
 var import_date_fns51 = require("date-fns");
-var import_jsx_runtime347 = require("react/jsx-runtime");
+var import_jsx_runtime348 = require("react/jsx-runtime");
 var COMPONENT_NAME10 = "InvoicesTable";
 var InvoiceStatusOptionConfig = {
   ["All" /* All */]: { label: "All", value: "All" /* All */ },
@@ -38633,12 +38684,12 @@ var AmountCell = ({ invoice }) => {
     case "WRITTEN_OFF" /* WrittenOff */:
     case "VOIDED" /* Voided */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(VStack, { children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(VStack, { children: /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(Span, { align: "right", children: totalAmount }) });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
-      return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(VStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Span, { align: "right", children: totalAmount }),
-        /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(Span, { align: "right", variant: "subtle", size: "sm", children: [
+      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: [
           outstandingBalance,
           " ",
           "outstanding"
@@ -38677,16 +38728,16 @@ var getColumnConfig = (onSelectInvoice) => ({
   ["Total" /* Total */]: {
     id: "Total" /* Total */,
     header: "Amount",
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(AmountCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(AmountCell, { invoice: row })
   },
   ["Status" /* Status */]: {
     id: "Status" /* Status */,
     header: "Status",
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(InvoiceStatusCell, { invoice: row })
+    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(InvoiceStatusCell, { invoice: row })
   },
   ["Expand" /* Expand */]: {
     id: "Expand" /* Expand */,
-    cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Button2, { inset: true, icon: true, onPress: () => onSelectInvoice(row), "aria-label": "View invoice", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(ChevronRightFill_default, {}) })
+    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, {}) })
   }
 });
 var UNPAID_STATUSES2 = ["SENT" /* Sent */, "PARTIALLY_PAID" /* PartiallyPaid */];
@@ -38715,8 +38766,8 @@ var getListInvoiceParams = ({ statusFilter }) => {
   }
 };
 var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
-  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = (0, import_react236.useState)(ALL_OPTION);
-  const listInvoiceParams = (0, import_react236.useMemo)(
+  const [selectedInvoiceStatusOption, setSelectedInvoiceStatusOption] = (0, import_react237.useState)(ALL_OPTION);
+  const listInvoiceParams = (0, import_react237.useMemo)(
     () => getListInvoiceParams({ statusFilter: selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value }),
     [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.value]
   );
@@ -38724,25 +38775,25 @@ 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_react236.useCallback)(() => {
+  const fetchMore = (0, import_react237.useCallback)(() => {
     if (hasMore) {
       void setSize(size + 1);
     }
   }, [hasMore, setSize, size]);
-  const paginationProps = (0, import_react236.useMemo)(() => {
+  const paginationProps = (0, import_react237.useMemo)(() => {
     return {
       pageSize: 10,
       hasMore,
       fetchMore
     };
   }, [fetchMore, hasMore]);
-  const options = (0, import_react236.useMemo)(() => Object.values(InvoiceStatusOptionConfig), []);
-  const SelectedValue = (0, import_react236.useMemo)(() => {
+  const options = (0, import_react237.useMemo)(() => Object.values(InvoiceStatusOptionConfig), []);
+  const SelectedValue = (0, import_react237.useMemo)(() => {
     const label = selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption == null ? void 0 : selectedInvoiceStatusOption.label]);
-  const StatusFilter = (0, import_react236.useCallback)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+  const StatusFilter = (0, import_react237.useCallback)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
       ComboBox,
       {
         className: "Layer__InvoicesTable__StatusFilter",
@@ -38758,27 +38809,27 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
     ),
     [SelectedValue, options, selectedInvoiceStatusOption]
   );
-  const CreateInvoiceButton = (0, import_react236.useCallback)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(Button2, { onPress: onCreateInvoice, children: [
+  const CreateInvoiceButton = (0, import_react237.useCallback)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime348.jsxs)(Button2, { onPress: onCreateInvoice, children: [
       "Create Invoice",
-      /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(import_lucide_react17.Plus, { size: 16 })
+      /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(import_lucide_react17.Plus, { size: 16 })
     ] }),
     [onCreateInvoice]
   );
-  const InvoicesTableEmptyState = (0, import_react236.useCallback)(() => {
+  const InvoicesTableEmptyState = (0, import_react237.useCallback)(() => {
     const isFiltered = selectedInvoiceStatusOption && selectedInvoiceStatusOption !== ALL_OPTION;
-    return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime348.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_runtime347.jsx)(import_lucide_react17.Search, {}) : /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(import_lucide_react17.HandCoins, {}),
+        icon: isFiltered ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(import_lucide_react17.Search, {}) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(import_lucide_react17.HandCoins, {}),
         spacing: true
       }
     );
   }, [selectedInvoiceStatusOption]);
-  const InvoicesTableErrorState = (0, import_react236.useCallback)(() => /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+  const InvoicesTableErrorState = (0, import_react237.useCallback)(() => /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
     DataState,
     {
       status: "failed" /* failed */,
@@ -38790,9 +38841,9 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
       spacing: true
     }
   ), [refetch]);
-  const columnConfig = (0, import_react236.useMemo)(() => getColumnConfig(onSelectInvoice), [onSelectInvoice]);
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(Container, { name: "InvoicesTable", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+  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)(
       DataTableHeader,
       {
         name: "Invoices",
@@ -38802,7 +38853,7 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
       PaginatedTable,
       {
         ariaLabel: "Invoices",
@@ -38822,38 +38873,38 @@ var InvoicesTable = ({ onCreateInvoice, onSelectInvoice }) => {
 };
 
 // src/components/Invoices/Invoices.tsx
-var import_jsx_runtime348 = require("react/jsx-runtime");
+var import_jsx_runtime349 = require("react/jsx-runtime");
 var unstable_Invoices = ({
   showTitle = true,
   stringOverrides
 }) => {
-  const [invoiceFormMode, setInvoiceFormMode] = (0, import_react237.useState)(null);
-  const goBackToInvoicesTable = (0, import_react237.useCallback)(() => {
+  const [invoiceFormMode, setInvoiceFormMode] = (0, import_react238.useState)(null);
+  const goBackToInvoicesTable = (0, import_react238.useCallback)(() => {
     setInvoiceFormMode(null);
   }, []);
-  const onCreateInvoice = (0, import_react237.useCallback)(() => {
+  const onCreateInvoice = (0, import_react238.useCallback)(() => {
     setInvoiceFormMode({ mode: "Create" /* Create */ });
   }, []);
-  const onSelectInvoice = (0, import_react237.useCallback)((invoice) => {
+  const onSelectInvoice = (0, import_react238.useCallback)((invoice) => {
     setInvoiceFormMode({ mode: "Update" /* Update */, invoice });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || "Invoices",
       showHeader: showTitle,
-      children: invoiceFormMode !== null ? /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(InvoicesTable, { onCreateInvoice, onSelectInvoice })
+      children: invoiceFormMode !== null ? /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(InvoiceDetail, __spreadProps(__spreadValues({}, invoiceFormMode), { onGoBack: goBackToInvoicesTable })) : /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(InvoicesTable, { onCreateInvoice, onSelectInvoice })
     }
   );
 };
 
 // src/providers/BankTransactionsProvider/BankTransactionsProvider.tsx
-var import_jsx_runtime349 = require("react/jsx-runtime");
+var import_jsx_runtime350 = require("react/jsx-runtime");
 var BankTransactionsProvider = ({
   children
 }) => {
   const bankTransactionsContextData = useAugmentedBankTransactions();
-  return /* @__PURE__ */ (0, import_jsx_runtime349.jsx)(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(BankTransactionsContext.Provider, { value: bankTransactionsContextData, children });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {