@tesouro/embedded-components-react 0.5.228 → 0.5.230

package/dist/libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index25.js

@@ -1,106 +1,305 @@
-import { Button as e, Dialog as t, DialogContent as n, DialogDescription as r, DialogFooter as i, DialogHeader as a, DialogTitle as o, Input as s, Label as c, RadioGroup as l, RadioGroupItem as u, Textarea as d } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { RECEIVABLE_PAYMENT_DIALOG_LABELS_EN as f } from "./index4.js";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Accordion as e, AccordionContent as t, AccordionItem as n, AccordionTrigger as r, Badge as i, Button as a, Sheet as o, SheetContent as s, SheetDescription as c, SheetHeader as l, SheetTitle as u, Tooltip as d, TooltipContent as f, TooltipProvider as p, TooltipTrigger as m, cn as h } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ErrorState as g } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../shared/ui/dist/index.js";
+import { RECEIVABLE_DETAILS_PANEL_LABELS_EN as _ } from "./index9.js";
+import { ReceivableStatusBadge as v } from "./index18.js";
+import { ACTION_ICON as y, ACTION_LABEL_KEY as b, STATUS_ICON as x, headerIconButtonClass as S } from "./index19.js";
+import { AmountCell as C } from "./index20.js";
+import { ATTACHMENTS_ITEM_VALUE as w, AttachmentsItem as T } from "./index21.js";
+import { CloseButton as E } from "./index22.js";
+import { InfoRow as D } from "./index23.js";
+import { OverflowMenu as O } from "./index24.js";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { CircleAlert as M, EyeIcon as N, Repeat as P } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index25.js
-function h({ message: e }) {
-	return e ? /* @__PURE__ */ p("p", {
-		className: "ttw:text-sm ttw:text-destructive",
-		children: e
-	}) : null;
-}
-function g({ open: g, onOpenChange: _, values: v, errors: y, inProgress: b, onChange: x, onSubmit: S, onCancel: C, labels: w }) {
-	let T = {
-		...f,
-		...w
-	};
-	return /* @__PURE__ */ p(t, {
-		open: g,
-		onOpenChange: _,
-		children: /* @__PURE__ */ m(n, { children: [
-			/* @__PURE__ */ m(a, { children: [/* @__PURE__ */ p(o, { children: T.title }), /* @__PURE__ */ p(r, { children: T.description })] }),
-			/* @__PURE__ */ m("div", {
-				className: "ttw:flex ttw:flex-col ttw:gap-4",
-				children: [
-					y?.form && /* @__PURE__ */ p("p", {
-						className: "ttw:rounded-md ttw:bg-destructive/10 ttw:px-3 ttw:py-2 ttw:text-sm ttw:text-destructive",
-						children: y.form
-					}),
-					/* @__PURE__ */ m("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-						children: [/* @__PURE__ */ p(c, { children: T.modeLabel }), /* @__PURE__ */ m(l, {
-							className: "ttw:flex ttw:flex-row ttw:gap-6",
-							value: v.mode,
-							onValueChange: (e) => x({ mode: e }),
-							children: [/* @__PURE__ */ m("div", {
-								className: "ttw:flex ttw:items-center ttw:gap-2",
-								children: [/* @__PURE__ */ p(u, {
-									value: "full",
-									id: "receivable-payment-full"
-								}), /* @__PURE__ */ p(c, {
-									htmlFor: "receivable-payment-full",
-									children: T.fullPayment
-								})]
-							}), /* @__PURE__ */ m("div", {
-								className: "ttw:flex ttw:items-center ttw:gap-2",
-								children: [/* @__PURE__ */ p(u, {
-									value: "partial",
-									id: "receivable-payment-partial"
-								}), /* @__PURE__ */ p(c, {
-									htmlFor: "receivable-payment-partial",
-									children: T.partialPayment
-								})]
-							})]
-						})]
-					}),
-					v.mode === "partial" && /* @__PURE__ */ m("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+function F({ open: F, onOpenChange: I, details: L, unsupported: R, isLoading: z, isError: B, onActionClick: V, onClose: H, labels: U }) {
+	let W = {
+		..._,
+		...U
+	}, G = L?.panel, K = B ? {
+		title: W.errorTitle,
+		description: W.errorDescription
+	} : R, q = G?.amountTone === "danger", J = (e) => W[b[e]], Y = L ? x[L.status] : void 0;
+	return /* @__PURE__ */ A(o, {
+		open: F,
+		onOpenChange: I,
+		children: /* @__PURE__ */ j(s, {
+			showCloseButton: !1,
+			className: "ttw:w-180 ttw:overflow-y-auto ttw:p-0 ttw:sm:max-w-180",
+			children: [K || z || !L ? /* @__PURE__ */ A(E, {
+				label: W.closeButton,
+				onClose: H,
+				className: h(S, "ttw:absolute ttw:right-4 ttw:top-4 ttw:z-10")
+			}) : null, K ? /* @__PURE__ */ j("div", {
+				className: "ttw:p-6",
+				children: [/* @__PURE__ */ j(l, {
+					className: "ttw:sr-only",
+					children: [/* @__PURE__ */ A(u, { children: K.title }), /* @__PURE__ */ A(c, { children: W.hiddenDescription })]
+				}), /* @__PURE__ */ A(g, {
+					title: K.title,
+					description: K.description
+				})]
+			}) : z || !L || !G ? /* @__PURE__ */ j(l, {
+				className: "ttw:p-6",
+				children: [/* @__PURE__ */ A(u, { children: W.loadingTitle }), /* @__PURE__ */ A(c, {
+					className: "ttw:sr-only",
+					children: W.hiddenDescription
+				})]
+			}) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ j(l, {
+				className: "ttw:flex ttw:flex-row ttw:items-start ttw:justify-between ttw:gap-2 ttw:space-y-0 ttw:px-6 ttw:py-4",
+				children: [/* @__PURE__ */ j("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+					children: [
+						/* @__PURE__ */ A(u, {
+							className: "ttw:text-xl ttw:font-semibold ttw:text-foreground",
+							children: L.title
+						}),
+						G.subtitle ? /* @__PURE__ */ A("p", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: G.subtitle
+						}) : null,
+						/* @__PURE__ */ A(c, {
+							className: "ttw:sr-only",
+							children: W.hiddenDescription
+						})
+					]
+				}), /* @__PURE__ */ A(p, {
+					delayDuration: 500,
+					children: /* @__PURE__ */ j("div", {
+						className: "ttw:flex ttw:items-center ttw:gap-1.5",
 						children: [
-							/* @__PURE__ */ p(c, { children: T.amountPaidLabel }),
-							/* @__PURE__ */ p(s, {
-								inputMode: "decimal",
-								value: v.amountPaid,
-								onChange: (e) => x({ amountPaid: e.target.value })
-							}),
-							/* @__PURE__ */ p(h, { message: y?.amountPaid })
+							L.pdfUrl ? /* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(m, {
+								asChild: !0,
+								children: /* @__PURE__ */ A(a, {
+									asChild: !0,
+									variant: "ghost",
+									size: "icon",
+									className: S,
+									children: /* @__PURE__ */ A("a", {
+										href: L.pdfUrl,
+										target: "_blank",
+										rel: "noreferrer",
+										"aria-label": W.viewPdfButton,
+										children: /* @__PURE__ */ A(N, { className: "ttw:size-4" })
+									})
+								})
+							}), /* @__PURE__ */ A(f, { children: W.viewPdfButton })] }) : null,
+							G.overflowActions.length > 0 ? /* @__PURE__ */ A(O, {
+								actions: G.overflowActions,
+								triggerLabel: W.moreActionsLabel,
+								getActionLabel: J,
+								onSelect: (e) => V(e, L),
+								className: S
+							}) : null,
+							/* @__PURE__ */ j(d, { children: [/* @__PURE__ */ A(m, {
+								asChild: !0,
+								children: /* @__PURE__ */ A(E, {
+									label: W.closeButton,
+									onClose: H,
+									className: S
+								})
+							}), /* @__PURE__ */ A(f, { children: W.closeButton })] })
 						]
-					}),
-					v.mode === "full" && /* @__PURE__ */ m("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					})
+				})]
+			}), /* @__PURE__ */ j("div", {
+				className: "ttw:flex ttw:flex-col",
+				children: [/* @__PURE__ */ A("div", {
+					className: "ttw:px-6",
+					children: /* @__PURE__ */ j("div", {
+						className: h("ttw:flex ttw:flex-col ttw:gap-3 ttw:rounded-lg ttw:bg-muted ttw:p-4", q && "ttw:border ttw:border-red-200"),
 						children: [
-							/* @__PURE__ */ p(c, { children: T.paidAtLabel }),
-							/* @__PURE__ */ p(s, {
-								type: "date",
-								value: v.paidAt,
-								onChange: (e) => x({ paidAt: e.target.value })
+							/* @__PURE__ */ A("div", {
+								className: "ttw:flex ttw:flex-row ttw:flex-wrap ttw:gap-x-12 ttw:gap-y-2",
+								children: G.amountRows.map((e) => /* @__PURE__ */ A(C, {
+									row: e,
+									defaultTone: G.amountTone
+								}, e.label))
 							}),
-							/* @__PURE__ */ p(h, { message: y?.paidAt })
-						]
-					}),
-					/* @__PURE__ */ m("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-						children: [
-							/* @__PURE__ */ p(c, { children: T.commentLabel }),
-							/* @__PURE__ */ p(d, {
-								rows: 3,
-								value: v.comment,
-								onChange: (e) => x({ comment: e.target.value })
+							/* @__PURE__ */ j("div", {
+								className: "ttw:flex ttw:items-center ttw:gap-2",
+								children: [G.overdueLabel ? /* @__PURE__ */ j("span", {
+									className: "ttw:inline-flex ttw:items-center ttw:gap-1 ttw:rounded-full ttw:bg-red-100 ttw:px-2.5 ttw:py-0.5 ttw:text-xs ttw:font-medium ttw:text-red-700",
+									children: [/* @__PURE__ */ A(M, { className: "ttw:size-3" }), G.overdueLabel]
+								}) : /* @__PURE__ */ A(v, {
+									label: G.statusLabel,
+									tone: L.statusTone,
+									icon: Y ? /* @__PURE__ */ A(Y, { className: "ttw:size-3" }) : void 0
+								}), G.recurring ? /* @__PURE__ */ j(i, {
+									variant: "outline",
+									className: "ttw:gap-1 ttw:border-violet-200 ttw:bg-violet-50 ttw:text-violet-700",
+									children: [/* @__PURE__ */ A(P, { className: "ttw:size-3" }), W.recurringBadge]
+								}) : null]
+							}),
+							/* @__PURE__ */ j("div", {
+								className: "ttw:flex ttw:gap-12 ttw:text-sm",
+								children: [/* @__PURE__ */ j("div", {
+									className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+									children: [/* @__PURE__ */ A("span", {
+										className: "ttw:text-xs ttw:text-muted-foreground",
+										children: W.invoiceDateCaption
+									}), /* @__PURE__ */ A("span", {
+										className: "ttw:text-foreground",
+										children: G.issueDateLabel
+									})]
+								}), /* @__PURE__ */ j("div", {
+									className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+									children: [/* @__PURE__ */ A("span", {
+										className: "ttw:text-xs ttw:text-muted-foreground",
+										children: G.dueDateCaption
+									}), /* @__PURE__ */ A("span", {
+										className: "ttw:text-foreground",
+										children: G.dueDateLabel
+									})]
+								})]
 							}),
-							/* @__PURE__ */ p(h, { message: y?.comment })
+							G.primaryActions.length > 0 ? /* @__PURE__ */ A("div", {
+								className: "ttw:flex ttw:items-center ttw:gap-2 ttw:border-t ttw:border-border ttw:pt-3",
+								children: G.primaryActions.map((e, t) => {
+									let n = y[e], r = t === G.primaryActions.length - 1;
+									return /* @__PURE__ */ j(a, {
+										size: "sm",
+										variant: r ? "default" : "outline",
+										onClick: () => V(e, L),
+										children: [/* @__PURE__ */ A(n, { className: "ttw:size-4" }), J(e)]
+									}, e);
+								})
+							}) : null
 						]
 					})
-				]
-			}),
-			/* @__PURE__ */ m(i, { children: [/* @__PURE__ */ p(e, {
-				variant: "ghost",
-				onClick: C,
-				children: T.cancelButton
-			}), /* @__PURE__ */ p(e, {
-				loading: b,
-				onClick: S,
-				children: T.submitButton
-			})] })
-		] })
+				}), /* @__PURE__ */ j("div", {
+					className: "ttw:px-6",
+					children: [
+						G.paymentHistory ? /* @__PURE__ */ j("section", {
+							"aria-label": W.paymentHistoryHeading,
+							className: "ttw:border-b ttw:py-4",
+							children: [/* @__PURE__ */ A("h3", {
+								className: "ttw:mb-3 ttw:text-sm ttw:font-medium",
+								children: W.paymentHistoryHeading
+							}), G.paymentHistory.rows.length === 0 ? /* @__PURE__ */ A("p", {
+								className: h("ttw:text-sm", G.paymentHistory.emptyTone === "danger" ? "ttw:text-red-600" : "ttw:text-muted-foreground"),
+								children: W.paymentHistoryEmpty
+							}) : /* @__PURE__ */ j("div", {
+								className: "ttw:flex ttw:flex-col",
+								children: [G.paymentHistory.rows.map((e) => /* @__PURE__ */ j("div", {
+									className: "ttw:flex ttw:justify-between ttw:border-b ttw:border-border ttw:py-2 ttw:text-sm",
+									children: [/* @__PURE__ */ A("span", { children: e.dateLabel }), /* @__PURE__ */ A("span", { children: e.amountLabel })]
+								}, e.id)), /* @__PURE__ */ j("div", {
+									className: "ttw:flex ttw:justify-between ttw:py-2 ttw:text-sm ttw:font-medium",
+									children: [/* @__PURE__ */ A("span", { children: W.paymentHistoryTotalLabel }), /* @__PURE__ */ A("span", { children: G.paymentHistory.totalLabel })]
+								})]
+							})]
+						}) : null,
+						G.customerContact.length > 0 ? /* @__PURE__ */ j("section", {
+							"aria-label": W.customerDetailsHeading,
+							className: "ttw:border-b ttw:py-4",
+							children: [/* @__PURE__ */ A("h3", {
+								className: "ttw:mb-3 ttw:text-sm ttw:font-medium",
+								children: W.customerDetailsHeading
+							}), /* @__PURE__ */ A("div", {
+								className: "ttw:flex ttw:flex-col",
+								children: G.customerContact.map((e) => /* @__PURE__ */ A(D, { ...e }, e.label))
+							})]
+						}) : null,
+						/* @__PURE__ */ j(e, {
+							type: "multiple",
+							defaultValue: [w],
+							className: "ttw:w-full",
+							children: [
+								G.recurrenceItems ? /* @__PURE__ */ j(n, {
+									value: "recurrence",
+									children: [/* @__PURE__ */ A(r, { children: W.recurrenceHeading }), /* @__PURE__ */ A(t, { children: /* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:flex-col",
+										children: G.recurrenceItems.map((e) => /* @__PURE__ */ A(D, { ...e }, e.label))
+									}) })]
+								}) : null,
+								/* @__PURE__ */ j(n, {
+									value: "billing",
+									children: [/* @__PURE__ */ A(r, { children: W.billingHeading }), /* @__PURE__ */ A(t, { children: /* @__PURE__ */ A("div", {
+										className: "ttw:flex ttw:flex-col",
+										children: G.billingItems.map((e) => /* @__PURE__ */ A(D, { ...e }, e.label))
+									}) })]
+								}),
+								/* @__PURE__ */ j(n, {
+									value: "line-items",
+									children: [/* @__PURE__ */ A(r, { children: /* @__PURE__ */ j("span", {
+										className: "ttw:flex ttw:items-center ttw:gap-2",
+										children: [W.lineItemsHeading, /* @__PURE__ */ A(i, {
+											variant: "secondary",
+											className: "ttw:rounded-full",
+											children: G.lineItemsCountLabel
+										})]
+									}) }), /* @__PURE__ */ A(t, { children: /* @__PURE__ */ j("div", {
+										className: "ttw:flex ttw:flex-col ttw:text-sm",
+										children: [L.lineItems.length === 0 ? /* @__PURE__ */ A("p", {
+											className: "ttw:py-3 ttw:text-muted-foreground",
+											children: W.noLineItems
+										}) : L.lineItems.map((e) => /* @__PURE__ */ j("div", {
+											className: "ttw:flex ttw:items-start ttw:justify-between ttw:border-b ttw:border-border ttw:py-3",
+											children: [/* @__PURE__ */ j("div", {
+												className: "ttw:flex ttw:flex-col",
+												children: [/* @__PURE__ */ A("span", {
+													className: "ttw:font-medium",
+													children: e.name
+												}), /* @__PURE__ */ j("span", {
+													className: "ttw:text-muted-foreground",
+													children: [
+														e.quantityLabel,
+														" ",
+														W.lineItemMultiplier,
+														" ",
+														e.unitPriceLabel,
+														" ",
+														W.lineItemEaLabel
+													]
+												})]
+											}), /* @__PURE__ */ A("span", { children: e.totalLabel })]
+										}, e.id)), G.lineItemTotals.length > 0 ? /* @__PURE__ */ A("div", {
+											className: "ttw:flex ttw:flex-col ttw:gap-1 ttw:py-3",
+											children: G.lineItemTotals.map((e) => /* @__PURE__ */ j("div", {
+												className: h("ttw:flex ttw:justify-between", e.emphasis && "ttw:font-medium"),
+												children: [/* @__PURE__ */ A("span", { children: e.label }), /* @__PURE__ */ A("span", { children: e.value })]
+											}, e.label))
+										}) : null]
+									}) })]
+								}),
+								G.notes ? /* @__PURE__ */ j(n, {
+									value: "notes",
+									children: [/* @__PURE__ */ A(r, { children: /* @__PURE__ */ j("span", {
+										className: "ttw:flex ttw:items-center ttw:gap-2",
+										children: [W.notesHeading, /* @__PURE__ */ A(i, {
+											variant: "secondary",
+											className: "ttw:rounded-full",
+											children: G.notes.countLabel
+										})]
+									}) }), /* @__PURE__ */ A(t, { children: /* @__PURE__ */ j("div", {
+										className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:text-sm",
+										children: [G.notes.opening ? /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+											className: "ttw:mb-1 ttw:font-medium",
+											children: W.notesOpeningLabel
+										}), /* @__PURE__ */ A("p", {
+											className: "ttw:text-muted-foreground",
+											children: G.notes.opening
+										})] }) : null, G.notes.closing ? /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+											className: "ttw:mb-1 ttw:font-medium",
+											children: W.notesClosingLabel
+										}), /* @__PURE__ */ A("p", {
+											className: "ttw:text-muted-foreground",
+											children: G.notes.closing
+										})] }) : null]
+									}) })]
+								}) : null,
+								/* @__PURE__ */ A(T, {
+									attachments: G.attachments,
+									labels: W
+								})
+							]
+						})
+					]
+				})]
+			})] })]
+		})
 	});
 }
 //#endregion
-export { g as ReceivablePaymentDialog, g as default };
+export { F as ReceivableDetailsPanel, F as default };

package/dist/libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index26.js

@@ -0,0 +1 @@
+import "./index25.js";

package/dist/libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index27.js

@@ -1,2 +1,48 @@
-import "react";
-import "react/jsx-runtime";
+import { cn as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index27.js
+function r({ label: r, value: i, className: a }) {
+	return /* @__PURE__ */ n("li", {
+		className: e("ttw:flex ttw:items-center ttw:justify-between", a),
+		children: [/* @__PURE__ */ t("span", { children: r }), /* @__PURE__ */ t("span", { children: i })]
+	});
+}
+function i({ totals: e, labels: i }) {
+	return /* @__PURE__ */ n("ul", {
+		className: "ttw:flex ttw:w-full ttw:list-none ttw:flex-col ttw:gap-1.5",
+		children: [
+			/* @__PURE__ */ t(r, {
+				label: i.subtotalLabel,
+				value: e.subtotal,
+				className: "ttw:text-sm ttw:font-normal"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: i.discountTotalLabel,
+				value: e.discount,
+				className: "ttw:text-sm ttw:font-normal"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: i.nonTaxableSubtotalLabel,
+				value: e.nonTaxableSubtotal,
+				className: "ttw:text-sm ttw:font-normal ttw:text-muted-foreground"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: i.taxableSubtotalLabel,
+				value: e.taxableSubtotal,
+				className: "ttw:text-sm ttw:font-normal ttw:text-muted-foreground"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: i.taxTotalLabel,
+				value: e.tax,
+				className: "ttw:text-sm ttw:font-normal"
+			}),
+			/* @__PURE__ */ t(r, {
+				label: i.totalLabel,
+				value: e.total,
+				className: "ttw:text-lg ttw:font-medium"
+			})
+		]
+	});
+}
+//#endregion
+export { i as ReceivableFormTotals };

package/dist/libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index28.js

@@ -1,4 +1,72 @@
-import "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import "./index27.js";
-import "react/jsx-runtime";
-import "lucide-react";
+import { Field as e, FieldContent as t, FieldDescription as n, FieldError as r, FieldLabel as i, Textarea as a, Typography as o } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/invoicing-widget/ui/dist/index28.js
+function l({ id: l, value: u, error: d, disabled: f, label: p, optionalSuffix: m, placeholder: h, description: g, onChange: _ }) {
+	return /* @__PURE__ */ s(e, { children: /* @__PURE__ */ c(t, { children: [
+		/* @__PURE__ */ c(i, {
+			htmlFor: l,
+			className: "ttw:text-nowrap",
+			children: [p, /* @__PURE__ */ s(o, {
+				variant: "body2",
+				component: "span",
+				color: "muted",
+				className: "ttw:leading-snug",
+				children: m
+			})]
+		}),
+		/* @__PURE__ */ s(a, {
+			id: l,
+			value: u,
+			disabled: f,
+			placeholder: h,
+			className: "ttw:h-26 ttw:resize-none",
+			"aria-invalid": !!d,
+			onChange: (e) => _(e.target.value)
+		}),
+		/* @__PURE__ */ s(n, { children: g }),
+		/* @__PURE__ */ s(r, { errors: d ? [{ message: d }] : [] })
+	] }) });
+}
+function u({ idPrefix: e, openingNote: t, closingNote: n, openingNoteError: r, closingNoteError: i, disabled: a, onOpeningNoteChange: u, onClosingNoteChange: d, labels: f }) {
+	return /* @__PURE__ */ c("div", {
+		className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:rounded-xl ttw:border ttw:border-border ttw:p-6",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-2.5 ttw:pb-4",
+				children: [/* @__PURE__ */ s(o, {
+					variant: "h4",
+					children: f.notesHeading
+				}), /* @__PURE__ */ s(o, {
+					variant: "body2",
+					color: "muted",
+					className: "ttw:font-medium",
+					children: f.notesDescription
+				})]
+			}),
+			/* @__PURE__ */ s(l, {
+				id: `${e}-opening-note`,
+				value: t,
+				error: r,
+				disabled: a,
+				label: f.openingNoteLabel,
+				optionalSuffix: f.optionalSuffix,
+				placeholder: f.openingNotePlaceholder,
+				description: f.openingNoteDescription,
+				onChange: u
+			}),
+			/* @__PURE__ */ s(l, {
+				id: `${e}-closing-note`,
+				value: n,
+				error: i,
+				disabled: a,
+				label: f.closingNoteLabel,
+				optionalSuffix: f.optionalSuffix,
+				placeholder: f.closingNotePlaceholder,
+				description: f.closingNoteDescription,
+				onChange: d
+			})
+		]
+	});
+}
+//#endregion
+export { u as ReceivableNotesSection };