@tesouro/embedded-components-react 0.5.160 → 0.5.163

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index430.js

@@ -1 +1,242 @@
+import { Scope as e } from "../../shared/data-access/dist/lib/scopes.js";
+import "../../shared/data-access/dist/index.js";
+import { dateStringToLocalDate as t } from "./index16.js";
+import { useMoniteContext as n } from "./index46.js";
+import { useCurrencies as r } from "./index62.js";
+import { usePayablePaymentIntentsAndRecords as i } from "./index140.js";
+import { MoniteScopedProviders as a } from "./index242.js";
+import { useUserPermissions as o } from "./index118.js";
+import { PayableStatusChip as s } from "./index231.js";
+import { CounterpartNameCellById as ee } from "./index248.js";
+import { GetNoRowsOverlay as c } from "./index251.js";
+import { AccessRestriction as l } from "./index252.js";
+import "./index254.js";
+import { DataTable as u, SortableHeader as d } from "./index256.js";
+import { hasSelectedText as te } from "./index257.js";
+import "./index334.js";
+import { isPayableInOCRProcessing as f } from "./index392.js";
+import "./index396.js";
+import { SummaryCardsFilters as p } from "./index422.js";
+import { PayablesFilterBar as m } from "./index423.js";
+import { usePayablesFilter as h } from "./index425.js";
+import { DEFAULT_SORTING as g, SORT_FIELD_BY_COLUMN_ID as _ } from "./index426.js";
+import { DueDateCell as v } from "./index428.js";
 import "./index429.js";
+import { useEffect as y, useMemo as b, useState as x } from "react";
+import { Loader2 as S } from "lucide-react";
+import { Fragment as C, jsx as w, jsxs as T } from "@emotion/react/jsx-runtime";
+import { useLingui as ne } from "@lingui/react";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index430.js
+var E = (e) => /* @__PURE__ */ w(a, { children: /* @__PURE__ */ w(D, { ...e }) }), D = ({ initialCounterpartId: a, onRowClick: E, onPay: D, openFileInput: O, setIsCreateInvoiceDialogOpen: k, openEditDialog: A, onSubmitted: j, onApproved: M, onCanceled: N }) => {
+	let { i18n: P } = ne(), { api: F, locale: I, queryClient: L, componentSettings: R } = n(), [z, B] = x(null), [V, H] = x(R.payables.pageSizeOptions?.[0] ?? 10), [U, W] = x(g), G = h({ initialCounterpartId: a }), [K, q] = x("");
+	y(() => {
+		let e = setTimeout(() => q(G.state.search), 300);
+		return () => clearTimeout(e);
+	}, [G.state.search]);
+	let { formatCurrencyToDisplay: J } = r(), Y = o().has(e.PayableReadOrg), X = U[0], Z = F.finops.getPayables.getQueryKey({ query: {
+		sort: X ? _[X.id] : void 0,
+		order: X?.desc ? "desc" : "asc",
+		limit: V,
+		pagination_token: z || void 0,
+		...G.queryParams,
+		search_text: K || G.queryParams.search_text || void 0
+	} }), { data: Q, isLoading: re, isError: ie, refetch: $ } = F.finops.getPayables.useQuery(Z, {
+		enabled: !!Y,
+		refetchInterval: F.finops.getPayables.getQueryData(Z, L)?.data.filter(f).length ? 2e3 : 3e4
+	}), ae = b(() => Q?.data?.filter((e) => e.status === "waiting_to_be_paid" || e.status === "partially_paid").map((e) => e.id), [Q?.data]), { payablesPaymentIntentsRecord: oe, refetch: se } = i(ae || []), ce = (e) => {
+		let t = typeof e == "function" ? e(U) : e;
+		W(t[0] && _[t[0].id] ? t : g), B(null);
+	}, le = b(() => [
+		{
+			accessorKey: "due_date",
+			header: ({ column: e }) => /* @__PURE__ */ w(d, {
+				column: e,
+				title: P._("Due date"),
+				ariaLabel: P._("Sort by due date")
+			}),
+			cell: ({ row: e }) => /* @__PURE__ */ w(v, { data: e.original })
+		},
+		{
+			accessorKey: "status",
+			header: ({ column: e }) => /* @__PURE__ */ w(d, {
+				column: e,
+				title: P._("Status"),
+				ariaLabel: P._("Sort by status")
+			}),
+			cell: ({ row: e }) => /* @__PURE__ */ w(s, {
+				status: e.original.status,
+				dueDate: e.original.due_date
+			})
+		},
+		{
+			accessorKey: "document_id",
+			header: ({ column: e }) => /* @__PURE__ */ w(d, {
+				column: e,
+				title: P._("Number"),
+				ariaLabel: P._("Sort by number")
+			}),
+			cell: ({ row: e }) => {
+				let t = e.original;
+				return f(t) ? /* @__PURE__ */ T("div", {
+					className: "ttw:flex ttw:items-center ttw:gap-2",
+					children: [/* @__PURE__ */ w(S, { className: "ttw:animate-spin ttw:size-5 ttw:shrink-0" }), /* @__PURE__ */ w("span", { children: t.document_id ? t.document_id : /* @__PURE__ */ T(C, { children: [
+						P._("Processing file"),
+						" '",
+						t.file?.name,
+						"'"
+					] }) })]
+				}) : /* @__PURE__ */ w("span", { children: t.document_id });
+			}
+		},
+		{
+			accessorKey: "counterpart_id",
+			header: P._("Vendor"),
+			cell: ({ row: e }) => {
+				let t = e.original;
+				return t.counterpart?.name ? /* @__PURE__ */ w("span", { children: t.counterpart.name }) : t.counterpart_id ? /* @__PURE__ */ w(ee, { counterpartId: t.counterpart_id }) : t.counterpart_raw_data?.name ? /* @__PURE__ */ w("span", { children: t.counterpart_raw_data.name }) : /* @__PURE__ */ w("span", {
+					style: { opacity: .4 },
+					children: "-"
+				});
+			}
+		},
+		{
+			accessorKey: "issued_at",
+			header: ({ column: e }) => /* @__PURE__ */ w(d, {
+				column: e,
+				title: P._("Issued on"),
+				ariaLabel: P._("Sort by issue date")
+			}),
+			cell: ({ row: e }) => {
+				let n = e.original.issued_at;
+				return n ? P.date(t(n), I.dateFormat) : "—";
+			}
+		},
+		{
+			accessorKey: "amount",
+			header: ({ column: e }) => /* @__PURE__ */ w("div", {
+				className: "ttw:flex ttw:justify-end",
+				children: /* @__PURE__ */ w(d, {
+					column: e,
+					title: P._("Total"),
+					ariaLabel: P._("Sort by total")
+				})
+			}),
+			cell: ({ row: e }) => {
+				let t = e.original.total_amount;
+				return /* @__PURE__ */ w("div", {
+					className: "ttw:text-right",
+					children: t ? J(t, e.original.currency ?? "USD") : ""
+				});
+			}
+		}
+	], [
+		P,
+		I.dateFormat,
+		J,
+		oe,
+		se,
+		D,
+		j,
+		M,
+		N,
+		$,
+		A
+	]);
+	if (y(() => {
+		B(null);
+	}, [G.queryParams]), !Y) return /* @__PURE__ */ w(l, {});
+	let ue = G.activeFilterCount > 0, de = !!K;
+	return /* @__PURE__ */ T("div", {
+		className: "ttw:flex ttw:flex-col ttw:overflow-hidden ttw:min-h-125",
+		children: [/* @__PURE__ */ w(p, {
+			selectedStatus: G.state.status.length === 0 ? "all" : G.state.status[0],
+			onChangeFilter: (e, t) => G.setState((e) => ({
+				...e,
+				status: t ? [t] : []
+			}))
+		}), /* @__PURE__ */ w(u, {
+			columns: le,
+			data: Q?.data ?? [],
+			sorting: U,
+			onSortingChange: ce,
+			pageSize: V,
+			onPageSizeChange: (e) => {
+				H(e), B(null);
+			},
+			nextPaginationToken: Q?.next_pagination_token ?? void 0,
+			prevPaginationToken: Q?.prev_pagination_token ?? void 0,
+			onPaginationTokenChange: (e) => B(e ?? null),
+			onRowClick: (e) => {
+				!te() && e.ocr_status !== "processing" && E?.(e.id);
+			},
+			filterComponent: /* @__PURE__ */ w(m, {
+				searchValue: G.state.search,
+				onSearchChange: (e) => G.setState((t) => ({
+					...t,
+					search: e
+				})),
+				activeFilterCount: G.activeFilterCount,
+				activeChips: G.activeChips,
+				onDismissChip: G.clearFilter,
+				onClearAll: G.clearAll,
+				activeDateField: G.state.activeDateField,
+				onActiveDateFieldChange: G.setActiveDateField,
+				allPresets: G.datePresets,
+				selectedDatePreset: G.state.datePreset,
+				dateFrom: G.state.dateFrom,
+				dateTo: G.state.dateTo,
+				onDateRangeChange: ({ from: e, to: t }) => G.setDateRange(e, t),
+				onDatePresetChange: G.setDatePreset,
+				statusOptions: G.statusOptions,
+				selectedStatus: G.state.status,
+				onStatusChange: (e) => G.setState((t) => ({
+					...t,
+					status: e
+				})),
+				amountMode: G.state.amountMode,
+				onAmountModeChange: (e) => G.setState((t) => ({
+					...t,
+					amountMode: e
+				})),
+				amountMin: G.state.amountMin,
+				amountMax: G.state.amountMax,
+				onAmountMinChange: (e) => G.setState((t) => ({
+					...t,
+					amountMin: e
+				})),
+				onAmountMaxChange: (e) => G.setState((t) => ({
+					...t,
+					amountMax: e
+				})),
+				vendorName: G.state.vendorName,
+				onVendorNameChange: (e) => G.setState((t) => ({
+					...t,
+					vendorName: e
+				})),
+				hasFile: G.state.hasFile,
+				onHasFileChange: (e) => G.setState((t) => ({
+					...t,
+					hasFile: e
+				}))
+			}),
+			children: /* @__PURE__ */ w(c, {
+				noDataTitle: P._("No bills yet"),
+				noDataDescription1: P._("You don't have any bills yet"),
+				filterTitle: P._("No bills found"),
+				isLoading: re,
+				isFiltering: ue,
+				isSearching: de,
+				isError: ie,
+				dataLength: Q?.data.length || 0,
+				onCreate: (e) => {
+					e === "New Invoice" ? k?.(!0) : e === "Upload File" && O?.();
+				},
+				refetch: $,
+				entityName: P._("Payable"),
+				type: "no-data=payables"
+			})
+		})]
+	});
+};
+//#endregion
+export { E as PayablesTable };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index431.js

@@ -1,36 +1 @@
-import { cn as e } from "./index48.js";
-import "react";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import * as n from "@radix-ui/react-popover";
-//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index431.js
-function r({ ...e }) {
-	return /* @__PURE__ */ t(n.Root, {
-		"data-slot": "popover",
-		...e
-	});
-}
-function i({ ref: e, ...r }) {
-	return /* @__PURE__ */ t(n.Trigger, {
-		"data-slot": "popover-trigger",
-		ref: e,
-		...r
-	});
-}
-i.displayName = n.Trigger.displayName;
-function a({ className: r, align: i = "center", sideOffset: a = 4, ...o }) {
-	return /* @__PURE__ */ t(n.Portal, { children: /* @__PURE__ */ t(n.Content, {
-		"data-slot": "popover-content",
-		align: i,
-		sideOffset: a,
-		className: e("ttw:bg-popover ttw:text-popover-foreground ttw:data-[state=open]:animate-in ttw:data-[state=closed]:animate-out ttw:data-[state=closed]:fade-out-0 ttw:data-[state=open]:fade-in-0 ttw:data-[state=closed]:zoom-out-95 ttw:data-[state=open]:zoom-in-95 ttw:data-[side=bottom]:slide-in-from-top-2 ttw:data-[side=left]:slide-in-from-right-2 ttw:data-[side=right]:slide-in-from-left-2 ttw:data-[side=top]:slide-in-from-bottom-2 ttw:z-1300 ttw:w-72 ttw:origin-(--radix-popover-content-transform-origin) ttw:rounded-md ttw:border ttw:p-4 ttw:shadow-md ttw:outline-hidden", r),
-		...o
-	}) });
-}
-function o({ ...e }) {
-	return /* @__PURE__ */ t(n.Anchor, {
-		"data-slot": "popover-anchor",
-		...e
-	});
-}
-//#endregion
-export { r as Popover, o as PopoverAnchor, a as PopoverContent, i as PopoverTrigger };
+import "./index430.js";

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index432.js

@@ -1,142 +1,36 @@
 import { cn as e } from "./index48.js";
-import { Button as t } from "./index55.js";
-import { useFileInput as n } from "./index214.js";
-import "./index222.js";
-import { Popover as r, PopoverContent as i, PopoverTrigger as a } from "./index431.js";
-import { useState as o } from "react";
-import { ChevronDownIcon as s, ChevronUpIcon as c, CloudUpload as l, Copy as u, Plus as d } from "lucide-react";
-import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
-import { toast as m } from "react-hot-toast";
-import { useLingui as h } from "@lingui/react";
+import "react";
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import * as n from "@radix-ui/react-popover";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index432.js
-var g = ({ isCreateAllowed: g, onCreateInvoice: _, handleFileUpload: v }) => {
-	let { i18n: y } = h(), [b, x] = o(!1), { FileInput: S, openFileInput: C, checkFileError: w } = n(), [T, E] = o(!1);
-	return /* @__PURE__ */ f("div", {
-		className: "Monite-Payables",
-		children: /* @__PURE__ */ p(r, {
-			open: b,
-			onOpenChange: x,
-			children: [/* @__PURE__ */ f(a, {
-				asChild: !0,
-				children: /* @__PURE__ */ p(t, {
-					size: "lg",
-					disabled: !g,
-					children: [y._("Add new bill"), f(b ? c : s, {})]
-				})
-			}), /* @__PURE__ */ p(i, {
-				align: "end",
-				className: "ttw:w-auto ttw:min-w-110 ttw:border-none ttw:p-6",
-				children: [/* @__PURE__ */ p("div", {
-					className: "ttw:w-110 ttw:flex ttw:flex-col ttw:gap-4",
-					onClick: (e) => {
-						e.preventDefault(), e.stopPropagation();
-					},
-					children: [
-						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
-							className: "ttw:text-xl ttw:font-semibold ttw:text-zinc-950",
-							children: y._("Upload bills")
-						}), /* @__PURE__ */ f("p", {
-							className: "ttw:text-sm ttw:font-normal ttw:text-zinc-500",
-							children: y._("Upload your bills and we'll automatically pull the details so you can review and approve.")
-						})] }),
-						/* @__PURE__ */ f("div", {
-							className: e("ttw:box-border ttw:cursor-pointer ttw:w-full ttw:h-36.5 ttw:flex ttw:flex-col ttw:items-center ttw:justify-center ttw:text-center ttw:border ttw:rounded-lg ttw:border-dashed ttw:border-zinc-200 ttw:bg-zinc-50", T && "ttw:bg-transparent"),
-							onDragOver: (e) => {
-								e.preventDefault(), E(!0);
-							},
-							onDragLeave: (e) => {
-								e.preventDefault(), E(!1);
-							},
-							onDrop: (e) => {
-								e.preventDefault(), E(!1);
-								let t = Array.from(e.dataTransfer.files);
-								if (t.length > 10) {
-									m.error(y._("You can only upload up to {fileCount} files at a time", { fileCount: 10 })), x(!1);
-									return;
-								}
-								t.forEach((e) => {
-									let t = w(e);
-									if (t) {
-										m.error(t);
-										return;
-									}
-									v(e);
-								}), x(!1);
-							},
-							onClick: C,
-							children: /* @__PURE__ */ p("div", {
-								className: "ttw:mx-auto ttw:flex ttw:flex-col ttw:items-center ttw:gap-2",
-								children: [
-									/* @__PURE__ */ f("div", {
-										className: "ttw:w-11 ttw:h-11 ttw:rounded-full ttw:bg-primary ttw:flex ttw:items-center ttw:justify-center",
-										children: /* @__PURE__ */ f(l, { className: "ttw:text-white ttw:size-5" })
-									}),
-									/* @__PURE__ */ p("p", {
-										className: "ttw:text-sm ttw:font-medium ttw:text-zinc-950",
-										children: [
-											y._("Drop your files here, or"),
-											" ",
-											/* @__PURE__ */ f("span", {
-												className: "ttw:text-primary ttw:underline",
-												children: y._("click to browse")
-											})
-										]
-									}),
-									/* @__PURE__ */ f("p", {
-										className: "ttw:text-xs ttw:font-normal ttw:text-zinc-500",
-										children: y._("PDF, PNG or JPG (max. 20MB)")
-									})
-								]
-							})
-						}),
-						/* @__PURE__ */ p("div", {
-							className: "ttw:flex ttw:flex-col",
-							children: [/* @__PURE__ */ f("h3", {
-								className: "ttw:text-primary ttw:text-sm ttw:font-semibold",
-								children: y._("Send via email")
-							}), /* @__PURE__ */ f("p", {
-								className: "ttw:text-zinc-500 ttw:font-normal ttw:text-sm",
-								children: y._("Email your bills here and they'll appear in your bill pay inbox, ready to review and pay.")
-							})]
-						}),
-						/* @__PURE__ */ p("div", {
-							className: "ttw:px-3 ttw:h-14 ttw:border ttw:border-zinc-200 ttw:rounded-lg ttw:flex ttw:items-center ttw:justify-between ttw:gap-6",
-							children: [/* @__PURE__ */ f("span", { children: y._("bills@business-banking.com") }), /* @__PURE__ */ p(t, {
-								type: "button",
-								variant: "ghost",
-								size: "sm",
-								className: "ttw:text-primary ttw:hover:bg-primary-foreground ttw:hover:text-primary",
-								onClick: () => {
-									navigator.clipboard.writeText("bills@business-banking.com"), m.success(y._("Email address copied to clipboard"));
-								},
-								children: [/* @__PURE__ */ f(u, {}), y._("Copy")]
-							})]
-						}),
-						/* @__PURE__ */ p("div", {
-							className: "ttw:flex ttw:flex-col ttw:gap-4",
-							children: [/* @__PURE__ */ f("h3", {
-								className: "ttw:text-sm ttw:font-semibold ttw:text-primary",
-								children: y._("Or add bill manually")
-							}), /* @__PURE__ */ p(t, {
-								onClick: () => {
-									x(!1), _();
-								},
-								className: "ttw:w-fit ttw:bg-primary-foreground ttw:hover:bg-primary-foreground ttw:text-primary",
-								children: [/* @__PURE__ */ f(d, {}), y._("Add new bill")]
-							})]
-						})
-					]
-				}), /* @__PURE__ */ f(S, {
-					"aria-label": y._("Upload payable files"),
-					multiple: !0,
-					onChange: (e) => {
-						let t = e.target.files;
-						t && v(t), x(!1);
-					}
-				})]
-			})]
-		})
+function r({ ...e }) {
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "popover",
+		...e
 	});
-};
+}
+function i({ ref: e, ...r }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		"data-slot": "popover-trigger",
+		ref: e,
+		...r
+	});
+}
+i.displayName = n.Trigger.displayName;
+function a({ className: r, align: i = "center", sideOffset: a = 4, ...o }) {
+	return /* @__PURE__ */ t(n.Portal, { children: /* @__PURE__ */ t(n.Content, {
+		"data-slot": "popover-content",
+		align: i,
+		sideOffset: a,
+		className: e("ttw:bg-popover ttw:text-popover-foreground ttw:data-[state=open]:animate-in ttw:data-[state=closed]:animate-out ttw:data-[state=closed]:fade-out-0 ttw:data-[state=open]:fade-in-0 ttw:data-[state=closed]:zoom-out-95 ttw:data-[state=open]:zoom-in-95 ttw:data-[side=bottom]:slide-in-from-top-2 ttw:data-[side=left]:slide-in-from-right-2 ttw:data-[side=right]:slide-in-from-left-2 ttw:data-[side=top]:slide-in-from-bottom-2 ttw:z-1300 ttw:w-72 ttw:origin-(--radix-popover-content-transform-origin) ttw:rounded-md ttw:border ttw:p-4 ttw:shadow-md ttw:outline-hidden", r),
+		...o
+	}) });
+}
+function o({ ...e }) {
+	return /* @__PURE__ */ t(n.Anchor, {
+		"data-slot": "popover-anchor",
+		...e
+	});
+}
 //#endregion
-export { g as CreatePayableMenu };
+export { r as Popover, o as PopoverAnchor, a as PopoverContent, i as PopoverTrigger };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index433.js

@@ -1 +1,142 @@
-import "./index432.js";
+import { cn as e } from "./index48.js";
+import { Button as t } from "./index55.js";
+import { useFileInput as n } from "./index215.js";
+import "./index223.js";
+import { Popover as r, PopoverContent as i, PopoverTrigger as a } from "./index432.js";
+import { useState as o } from "react";
+import { ChevronDownIcon as s, ChevronUpIcon as c, CloudUpload as l, Copy as u, Plus as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+import { toast as m } from "react-hot-toast";
+import { useLingui as h } from "@lingui/react";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index433.js
+var g = ({ isCreateAllowed: g, onCreateInvoice: _, handleFileUpload: v }) => {
+	let { i18n: y } = h(), [b, x] = o(!1), { FileInput: S, openFileInput: C, checkFileError: w } = n(), [T, E] = o(!1);
+	return /* @__PURE__ */ f("div", {
+		className: "Monite-Payables",
+		children: /* @__PURE__ */ p(r, {
+			open: b,
+			onOpenChange: x,
+			children: [/* @__PURE__ */ f(a, {
+				asChild: !0,
+				children: /* @__PURE__ */ p(t, {
+					size: "lg",
+					disabled: !g,
+					children: [y._("Add new bill"), f(b ? c : s, {})]
+				})
+			}), /* @__PURE__ */ p(i, {
+				align: "end",
+				className: "ttw:w-auto ttw:min-w-110 ttw:border-none ttw:p-6",
+				children: [/* @__PURE__ */ p("div", {
+					className: "ttw:w-110 ttw:flex ttw:flex-col ttw:gap-4",
+					onClick: (e) => {
+						e.preventDefault(), e.stopPropagation();
+					},
+					children: [
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
+							className: "ttw:text-xl ttw:font-semibold ttw:text-zinc-950",
+							children: y._("Upload bills")
+						}), /* @__PURE__ */ f("p", {
+							className: "ttw:text-sm ttw:font-normal ttw:text-zinc-500",
+							children: y._("Upload your bills and we'll automatically pull the details so you can review and approve.")
+						})] }),
+						/* @__PURE__ */ f("div", {
+							className: e("ttw:box-border ttw:cursor-pointer ttw:w-full ttw:h-36.5 ttw:flex ttw:flex-col ttw:items-center ttw:justify-center ttw:text-center ttw:border ttw:rounded-lg ttw:border-dashed ttw:border-zinc-200 ttw:bg-zinc-50", T && "ttw:bg-transparent"),
+							onDragOver: (e) => {
+								e.preventDefault(), E(!0);
+							},
+							onDragLeave: (e) => {
+								e.preventDefault(), E(!1);
+							},
+							onDrop: (e) => {
+								e.preventDefault(), E(!1);
+								let t = Array.from(e.dataTransfer.files);
+								if (t.length > 10) {
+									m.error(y._("You can only upload up to {fileCount} files at a time", { fileCount: 10 })), x(!1);
+									return;
+								}
+								t.forEach((e) => {
+									let t = w(e);
+									if (t) {
+										m.error(t);
+										return;
+									}
+									v(e);
+								}), x(!1);
+							},
+							onClick: C,
+							children: /* @__PURE__ */ p("div", {
+								className: "ttw:mx-auto ttw:flex ttw:flex-col ttw:items-center ttw:gap-2",
+								children: [
+									/* @__PURE__ */ f("div", {
+										className: "ttw:w-11 ttw:h-11 ttw:rounded-full ttw:bg-primary ttw:flex ttw:items-center ttw:justify-center",
+										children: /* @__PURE__ */ f(l, { className: "ttw:text-white ttw:size-5" })
+									}),
+									/* @__PURE__ */ p("p", {
+										className: "ttw:text-sm ttw:font-medium ttw:text-zinc-950",
+										children: [
+											y._("Drop your files here, or"),
+											" ",
+											/* @__PURE__ */ f("span", {
+												className: "ttw:text-primary ttw:underline",
+												children: y._("click to browse")
+											})
+										]
+									}),
+									/* @__PURE__ */ f("p", {
+										className: "ttw:text-xs ttw:font-normal ttw:text-zinc-500",
+										children: y._("PDF, PNG or JPG (max. 20MB)")
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "ttw:flex ttw:flex-col",
+							children: [/* @__PURE__ */ f("h3", {
+								className: "ttw:text-primary ttw:text-sm ttw:font-semibold",
+								children: y._("Send via email")
+							}), /* @__PURE__ */ f("p", {
+								className: "ttw:text-zinc-500 ttw:font-normal ttw:text-sm",
+								children: y._("Email your bills here and they'll appear in your bill pay inbox, ready to review and pay.")
+							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "ttw:px-3 ttw:h-14 ttw:border ttw:border-zinc-200 ttw:rounded-lg ttw:flex ttw:items-center ttw:justify-between ttw:gap-6",
+							children: [/* @__PURE__ */ f("span", { children: y._("bills@business-banking.com") }), /* @__PURE__ */ p(t, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								className: "ttw:text-primary ttw:hover:bg-primary-foreground ttw:hover:text-primary",
+								onClick: () => {
+									navigator.clipboard.writeText("bills@business-banking.com"), m.success(y._("Email address copied to clipboard"));
+								},
+								children: [/* @__PURE__ */ f(u, {}), y._("Copy")]
+							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-4",
+							children: [/* @__PURE__ */ f("h3", {
+								className: "ttw:text-sm ttw:font-semibold ttw:text-primary",
+								children: y._("Or add bill manually")
+							}), /* @__PURE__ */ p(t, {
+								onClick: () => {
+									x(!1), _();
+								},
+								className: "ttw:w-fit ttw:bg-primary-foreground ttw:hover:bg-primary-foreground ttw:text-primary",
+								children: [/* @__PURE__ */ f(d, {}), y._("Add new bill")]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ f(S, {
+					"aria-label": y._("Upload payable files"),
+					multiple: !0,
+					onChange: (e) => {
+						let t = e.target.files;
+						t && v(t), x(!1);
+					}
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { g as CreatePayableMenu };