@burdenoff/microfe-movethewheels 2026.929.4 → 2026.930.2

package/dist/components/CustomerPicker.js

@@ -14,11 +14,11 @@ var C = {
 	phone: "",
 	company: ""
 };
-function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCustomer: O, isLoading: k, error: A, onRetry: j, onOpenCustomers: M, selectedCustomer: N, onSearchQueryChange: P, disabled: F = !1 }) {
-	let [I, L] = y(!1), [R, z] = y(C), [B, V] = y(!1), [H, U] = y(null), W = () => {
-		U(null), z(C), L(!0);
-	}, G = () => {
-		B || L(!1);
+function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCustomer: O, isLoading: k, isLoadingMore: A = !1, error: j, onRetry: M, onLoadMore: N, hasMore: P = !1, totalCount: F, onOpenCustomers: I, selectedCustomer: L, onSearchQueryChange: R, disabled: z = !1 }) {
+	let [B, V] = y(!1), [H, U] = y(C), [W, G] = y(!1), [K, q] = y(null), J = () => {
+		q(null), U(C), V(!0);
+	}, Y = () => {
+		W || V(!1);
 	};
 	return /* @__PURE__ */ S("div", {
 		className: "space-y-2",
@@ -32,8 +32,8 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 					type: "button",
 					variant: "ghost",
 					size: "sm",
-					onClick: W,
-					disabled: F || k,
+					onClick: J,
+					disabled: z || k,
 					children: [/* @__PURE__ */ x(e, {
 						size: 14,
 						className: "mr-1"
@@ -55,37 +55,41 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 						" ",
 						e.email ? `(${e.email})` : ""
 					] }),
-					selectedOption: N,
+					selectedOption: L,
 					required: !0,
 					placeholder: k ? "Loading customers..." : "Select customer",
 					searchPlaceholder: "Search customers",
 					emptyText: "No customers found.",
-					disabled: F || !!A,
-					error: A ? "Customers could not be loaded" : void 0,
-					onSearchChange: P,
+					disabled: z || !!j,
+					error: j ? "Customers could not be loaded" : void 0,
+					onSearchChange: R,
+					hasMore: P,
+					totalCount: F,
+					onLoadMore: N,
+					loadingMore: A,
 					className: "flex-1"
-				}), A && /* @__PURE__ */ S(r, {
+				}), j && /* @__PURE__ */ S(r, {
 					type: "button",
 					variant: "outline",
 					size: "sm",
-					onClick: j,
+					onClick: M,
 					children: [/* @__PURE__ */ x(t, {
 						size: 14,
 						className: "mr-1"
 					}), "Retry"]
 				})]
 			}),
-			A ? /* @__PURE__ */ S("div", {
+			j ? /* @__PURE__ */ S("div", {
 				className: "flex flex-wrap items-center gap-2",
 				children: [/* @__PURE__ */ x("p", {
 					role: "alert",
 					className: "text-sm text-status-error-text",
 					children: "Customers could not be loaded. Retry or add a customer to continue."
-				}), M && /* @__PURE__ */ x(r, {
+				}), I && /* @__PURE__ */ x(r, {
 					type: "button",
 					variant: "outline",
 					size: "sm",
-					onClick: M,
+					onClick: I,
 					children: "Open customer page"
 				})]
 			}) : !k && w.length === 0 ? /* @__PURE__ */ S("div", {
@@ -106,8 +110,8 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 					type: "button",
 					size: "sm",
 					className: "mt-3",
-					onClick: W,
-					disabled: F,
+					onClick: J,
+					disabled: z,
 					children: [/* @__PURE__ */ x(e, {
 						size: 14,
 						className: "mr-1.5"
@@ -115,34 +119,34 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 				})]
 			}) : null,
 			/* @__PURE__ */ x(i, {
-				open: I,
-				onOpenChange: (e) => e ? L(!0) : G(),
+				open: B,
+				onOpenChange: (e) => e ? V(!0) : Y(),
 				children: /* @__PURE__ */ S(a, { children: [/* @__PURE__ */ S(c, { children: [/* @__PURE__ */ x(l, { children: "Create customer" }), /* @__PURE__ */ x(o, { children: "Add the customer without leaving this order. They will be selected automatically." })] }), /* @__PURE__ */ S("form", {
 					onSubmit: async (e) => {
 						e.preventDefault(), e.stopPropagation();
-						let t = R.name.trim();
+						let t = H.name.trim();
 						if (!t) {
-							U("Customer name is required.");
+							q("Customer name is required.");
 							return;
 						}
-						V(!0), U(null);
+						G(!0), q(null);
 						try {
 							D(await O({
 								name: t,
-								type: R.type,
-								email: R.email.trim() || void 0,
-								phone: R.phone.trim() || void 0,
-								company: R.company.trim() || void 0
-							})), L(!1), z(C);
+								type: H.type,
+								email: H.email.trim() || void 0,
+								phone: H.phone.trim() || void 0,
+								company: H.company.trim() || void 0
+							})), V(!1), U(C);
 						} catch (e) {
-							U(e instanceof Error ? e.message : "Could not create the customer. Please try again.");
+							q(e instanceof Error ? e.message : "Could not create the customer. Please try again.");
 						} finally {
-							V(!1);
+							G(!1);
 						}
 					},
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ x(_, { message: H }),
+						/* @__PURE__ */ x(_, { message: K }),
 						/* @__PURE__ */ S("div", {
 							className: "space-y-2",
 							children: [/* @__PURE__ */ x(d, {
@@ -150,8 +154,8 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 								children: "Name"
 							}), /* @__PURE__ */ x(u, {
 								id: "quick-customer-name",
-								value: R.name,
-								onChange: (e) => z((t) => ({
+								value: H.name,
+								onChange: (e) => U((t) => ({
 									...t,
 									name: e.target.value
 								})),
@@ -166,8 +170,8 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 								htmlFor: "quick-customer-type",
 								children: "Customer type"
 							}), /* @__PURE__ */ S(f, {
-								value: R.type,
-								onValueChange: (e) => z((t) => ({
+								value: H.type,
+								onValueChange: (e) => U((t) => ({
 									...t,
 									type: e
 								})),
@@ -193,8 +197,8 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 								}), /* @__PURE__ */ x(u, {
 									id: "quick-customer-email",
 									type: "email",
-									value: R.email,
-									onChange: (e) => z((t) => ({
+									value: H.email,
+									onChange: (e) => U((t) => ({
 										...t,
 										email: e.target.value
 									})),
@@ -207,8 +211,8 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 									children: "Phone"
 								}), /* @__PURE__ */ x(u, {
 									id: "quick-customer-phone",
-									value: R.phone,
-									onChange: (e) => z((t) => ({
+									value: H.phone,
+									onChange: (e) => U((t) => ({
 										...t,
 										phone: e.target.value
 									})),
@@ -223,8 +227,8 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 								children: "Company"
 							}), /* @__PURE__ */ x(u, {
 								id: "quick-customer-company",
-								value: R.company,
-								onChange: (e) => z((t) => ({
+								value: H.company,
+								onChange: (e) => U((t) => ({
 									...t,
 									company: e.target.value
 								})),
@@ -232,26 +236,26 @@ function w({ customers: w, value: T, onValueChange: E, onCreated: D, createCusto
 							})]
 						}),
 						/* @__PURE__ */ S(s, { children: [
-							M && /* @__PURE__ */ x(r, {
+							I && /* @__PURE__ */ x(r, {
 								type: "button",
 								variant: "outline",
 								onClick: () => {
-									G(), M();
+									Y(), I();
 								},
-								disabled: B,
+								disabled: W,
 								children: "Use customer page"
 							}),
 							/* @__PURE__ */ x(r, {
 								type: "button",
 								variant: "outline",
-								onClick: G,
-								disabled: B,
+								onClick: Y,
+								disabled: W,
 								children: "Cancel"
 							}),
 							/* @__PURE__ */ S(r, {
 								type: "submit",
-								disabled: B,
-								children: [/* @__PURE__ */ x(e, { size: 16 }), B ? "Creating..." : "Create and select"]
+								disabled: W,
+								children: [/* @__PURE__ */ x(e, { size: 16 }), W ? "Creating..." : "Create and select"]
 							})
 						] })
 					]

package/dist/components/EntityCombobox.js

@@ -6,16 +6,16 @@ import { useDebouncedValue as d } from "../hooks/useDebouncedValue.js";
 import { useEffect as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/movethewheels/components/EntityCombobox.tsx
-function g({ value: g, onChange: _, options: v, loading: y = !1, getId: b, renderOption: x, getLabel: S, selectedOption: C = null, selectedLoading: w = !1, required: T = !1, placeholder: E = "Select…", searchPlaceholder: D = "Search…", emptyText: O = "No results found.", noneLabel: k = "None", disabled: A = !1, id: j, error: M, className: N, onSearchChange: P, hasMore: F = !1, totalCount: I }) {
-	let [L, R] = p(!1), [z, B] = p(""), V = d(z.trim(), 200);
+function g({ value: g, onChange: _, options: v, loading: y = !1, getId: b, renderOption: x, getLabel: S, selectedOption: C = null, selectedLoading: w = !1, required: T = !1, placeholder: E = "Select…", searchPlaceholder: D = "Search…", emptyText: O = "No results found.", noneLabel: k = "None", disabled: A = !1, id: j, error: M, className: N, onSearchChange: P, hasMore: F = !1, totalCount: I, onLoadMore: L, loadingMore: R = !1 }) {
+	let [z, B] = p(!1), [V, H] = p(""), U = d(V.trim(), 200);
 	f(() => {
-		P && P(V);
-	}, [V]);
-	let H = C ? S(C) : g ? w ? "Loading…" : g : E, U = n("w-full flex items-center justify-between gap-2 px-3 py-2", "bg-surface", "border border-default", "rounded-lg", "text-left text-sm text-text-primary", "focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)]", "disabled:bg-bg-sunken disabled:cursor-not-allowed", "transition-all duration-200", M && "border-[var(--color-status-error)]", !C && "text-text-tertiary", N), W = F && typeof I == "number" && I > v.length;
+		P && P(U);
+	}, [U]);
+	let W = C ? S(C) : g ? w ? "Loading…" : g : E, G = n("w-full flex items-center justify-between gap-2 px-3 py-2", "bg-surface", "border border-default", "rounded-lg", "text-left text-sm text-text-primary", "focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)]", "disabled:bg-bg-sunken disabled:cursor-not-allowed", "transition-all duration-200", M && "border-[var(--color-status-error)]", !C && "text-text-tertiary", N), K = !!(L && F);
 	return /* @__PURE__ */ h(c, {
-		open: L,
+		open: z,
 		onOpenChange: (e) => {
-			R(e), e || B("");
+			B(e), e || H("");
 		},
 		children: [/* @__PURE__ */ m(u, {
 			asChild: !0,
@@ -23,14 +23,14 @@ function g({ value: g, onChange: _, options: v, loading: y = !1, getId: b, rende
 				type: "button",
 				id: j,
 				role: "combobox",
-				"aria-expanded": L,
+				"aria-expanded": z,
 				"aria-required": T,
 				"aria-invalid": M ? !0 : void 0,
 				disabled: A,
-				className: U,
+				className: G,
 				children: [/* @__PURE__ */ m("span", {
 					className: "truncate",
-					children: H
+					children: W
 				}), /* @__PURE__ */ m(t, {
 					size: 16,
 					className: "shrink-0 text-text-tertiary",
@@ -44,8 +44,8 @@ function g({ value: g, onChange: _, options: v, loading: y = !1, getId: b, rende
 				shouldFilter: !1,
 				className: "bg-surface text-text-primary",
 				children: [P && /* @__PURE__ */ m(a, {
-					value: z,
-					onValueChange: B,
+					value: V,
+					onValueChange: H,
 					placeholder: D,
 					className: "text-text-primary placeholder:text-text-tertiary"
 				}), /* @__PURE__ */ h(s, { children: [
@@ -56,7 +56,7 @@ function g({ value: g, onChange: _, options: v, loading: y = !1, getId: b, rende
 					!T && /* @__PURE__ */ h(o, {
 						value: "__none__",
 						onSelect: () => {
-							_(""), R(!1);
+							_(""), B(!1);
 						},
 						className: "text-text-tertiary",
 						children: [/* @__PURE__ */ m(e, {
@@ -73,7 +73,7 @@ function g({ value: g, onChange: _, options: v, loading: y = !1, getId: b, rende
 						return /* @__PURE__ */ h(o, {
 							value: r,
 							onSelect: () => {
-								_(r), R(!1);
+								_(r), B(!1);
 							},
 							className: "text-text-primary",
 							children: [/* @__PURE__ */ m(e, {
@@ -86,15 +86,17 @@ function g({ value: g, onChange: _, options: v, loading: y = !1, getId: b, rende
 							})]
 						}, r);
 					}),
-					W && /* @__PURE__ */ h("div", {
-						className: "px-2 py-1.5 text-xs text-text-tertiary border-t border-border-seam",
-						children: [
-							"Showing ",
-							v.length,
-							" of ",
-							I,
-							P ? " — keep typing to narrow results." : "."
-						]
+					K && /* @__PURE__ */ m("div", {
+						className: "border-t border-border-seam p-2",
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							className: "w-full rounded-md px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/10 focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:opacity-60",
+							onClick: () => void L?.(),
+							disabled: y || R,
+							"aria-busy": R,
+							"aria-label": R ? "Loading more options" : `Load more options${typeof I == "number" ? ` (${v.length} of ${I} shown)` : ""}`,
+							children: R ? "Loading more…" : `Load more${typeof I == "number" ? ` (${v.length} of ${I})` : ""}`
+						})
 					})
 				] })]
 			})

package/dist/components/OrderItemRow.js

@@ -7,25 +7,30 @@ import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 function u(e, t) {
 	return e <= 0 ? "No stock recorded for this item." : t.length === 1 ? `${e.toLocaleString()} available at ${t[0].warehouseName}` : `${e.toLocaleString()} available across ${t.length} warehouses`;
 }
-function d({ item: d, index: f, products: p, productsLoading: m, onUpdate: h, onRemove: g }) {
-	let { product: _, isLoading: v } = t(d.productId || void 0), { levels: y, totalAvailable: b, isLoading: x } = n(d.productId || void 0), S = d.dimensions ?? {
+function d({ item: d, index: f, products: p, productsLoading: m, productsLoadingMore: h = !1, productsHasMore: g = !1, productsTotalCount: _, onLoadMoreProducts: v, errors: y = {}, onUpdate: b, onRemove: x }) {
+	let { product: S, isLoading: C } = t(d.productId || void 0), { levels: w, totalAvailable: T, isLoading: E } = n(d.productId || void 0), D = d.dimensions ?? {
 		length: 0,
 		width: 0,
 		height: 0,
 		unit: "cm"
-	}, C = (e) => {
+	}, O = (e) => {
 		if (!e) {
-			h(f, "productId", "");
+			b(f, "productId", "");
 			return;
 		}
 		let t = p.find((t) => t.id === e);
-		t && (h(f, "productId", t.id), h(f, "name", t.name), h(f, "sku", t.sku), h(f, "weight", t.weight), h(f, "value", t.value), h(f, "dimensions", t.dimensions));
-	}, w = (e, t) => {
-		h(f, "dimensions", {
-			...S,
+		t && (b(f, "productId", t.id), b(f, "name", t.name), b(f, "sku", t.sku), b(f, "weight", t.weight), b(f, "value", t.value), b(f, "dimensions", t.dimensions));
+	}, k = (e, t) => {
+		b(f, "dimensions", {
+			...D,
 			[e]: Number.parseFloat(t) || 0
 		});
-	};
+	}, A = (e) => y[e] ? /* @__PURE__ */ c("p", {
+		id: `item-${e}-${d.id}-error`,
+		className: "text-xs text-status-error-text",
+		role: "alert",
+		children: y[e]
+	}) : null;
 	return /* @__PURE__ */ l("div", {
 		className: "rounded-card border border-border-subtle bg-bg-surface p-4 shadow-elevation-1 sm:p-5",
 		"aria-labelledby": `order-item-${d.id}-title`,
@@ -43,7 +48,7 @@ function d({ item: d, index: f, products: p, productsLoading: m, onUpdate: h, on
 				variant: "ghost",
 				size: "icon",
 				className: "shrink-0 text-status-error-text",
-				onClick: () => g(f),
+				onClick: () => x(f),
 				"aria-label": `Remove item ${f + 1}`,
 				title: `Remove item ${f + 1}`,
 				children: /* @__PURE__ */ c(e, {
@@ -64,7 +69,7 @@ function d({ item: d, index: f, products: p, productsLoading: m, onUpdate: h, on
 						/* @__PURE__ */ c(o, {
 							id: `item-product-${d.id}`,
 							value: d.productId,
-							onChange: C,
+							onChange: O,
 							options: p,
 							loading: m,
 							getId: (e) => e.id,
@@ -81,16 +86,20 @@ function d({ item: d, index: f, products: p, productsLoading: m, onUpdate: h, on
 									]
 								})
 							] }),
-							selectedOption: _,
-							selectedLoading: v,
+							selectedOption: S,
+							selectedLoading: C,
 							placeholder: "Pick from your product catalog",
 							emptyText: "No products found.",
-							noneLabel: "Enter details manually"
+							noneLabel: "Enter details manually",
+							hasMore: g,
+							totalCount: _,
+							onLoadMore: v,
+							loadingMore: h
 						}),
-						d.productId && !x && /* @__PURE__ */ c("p", {
+						d.productId && !E && /* @__PURE__ */ c("p", {
 							className: "mt-2 text-xs text-text-secondary",
 							role: "status",
-							children: u(b, y)
+							children: u(T, w)
 						})
 					]
 				}),
@@ -99,68 +108,98 @@ function d({ item: d, index: f, products: p, productsLoading: m, onUpdate: h, on
 					children: [
 						/* @__PURE__ */ l("div", {
 							className: "space-y-2 lg:col-span-4",
-							children: [/* @__PURE__ */ c(a, {
-								htmlFor: `item-name-${d.id}`,
-								children: "Item name"
-							}), /* @__PURE__ */ c(i, {
-								id: `item-name-${d.id}`,
-								value: d.name,
-								onChange: (e) => h(f, "name", e.target.value),
-								placeholder: "Product name"
-							})]
+							children: [
+								/* @__PURE__ */ c(a, {
+									htmlFor: `item-name-${d.id}`,
+									children: "Item name"
+								}),
+								/* @__PURE__ */ c(i, {
+									id: `item-name-${d.id}`,
+									value: d.name,
+									onChange: (e) => b(f, "name", e.target.value),
+									placeholder: "Product name",
+									"aria-invalid": !!y.name,
+									"aria-describedby": y.name ? `item-name-${d.id}-error` : void 0
+								}),
+								A("name")
+							]
 						}),
 						/* @__PURE__ */ l("div", {
 							className: "space-y-2 lg:col-span-3",
-							children: [/* @__PURE__ */ c(a, {
-								htmlFor: `item-sku-${d.id}`,
-								children: "SKU"
-							}), /* @__PURE__ */ c(i, {
-								id: `item-sku-${d.id}`,
-								value: d.sku,
-								onChange: (e) => h(f, "sku", e.target.value),
-								placeholder: "SKU-001"
-							})]
+							children: [
+								/* @__PURE__ */ c(a, {
+									htmlFor: `item-sku-${d.id}`,
+									children: "SKU"
+								}),
+								/* @__PURE__ */ c(i, {
+									id: `item-sku-${d.id}`,
+									value: d.sku,
+									onChange: (e) => b(f, "sku", e.target.value),
+									placeholder: "SKU-001",
+									"aria-invalid": !!y.sku,
+									"aria-describedby": y.sku ? `item-sku-${d.id}-error` : void 0
+								}),
+								A("sku")
+							]
 						}),
 						/* @__PURE__ */ l("div", {
 							className: "space-y-2 lg:col-span-2",
-							children: [/* @__PURE__ */ c(a, {
-								htmlFor: `item-quantity-${d.id}`,
-								children: "Quantity"
-							}), /* @__PURE__ */ c(i, {
-								id: `item-quantity-${d.id}`,
-								type: "number",
-								min: "1",
-								value: d.quantity,
-								onChange: (e) => h(f, "quantity", parseInt(e.target.value, 10) || 1)
-							})]
+							children: [
+								/* @__PURE__ */ c(a, {
+									htmlFor: `item-quantity-${d.id}`,
+									children: "Quantity"
+								}),
+								/* @__PURE__ */ c(i, {
+									id: `item-quantity-${d.id}`,
+									type: "number",
+									min: "1",
+									value: d.quantity,
+									onChange: (e) => b(f, "quantity", parseInt(e.target.value, 10) || 1),
+									"aria-invalid": !!y.quantity,
+									"aria-describedby": y.quantity ? `item-quantity-${d.id}-error` : void 0
+								}),
+								A("quantity")
+							]
 						}),
 						/* @__PURE__ */ l("div", {
 							className: "space-y-2 lg:col-span-2",
-							children: [/* @__PURE__ */ c(a, {
-								htmlFor: `item-weight-${d.id}`,
-								children: "Weight (kg)"
-							}), /* @__PURE__ */ c(i, {
-								id: `item-weight-${d.id}`,
-								type: "number",
-								min: "0",
-								step: "0.1",
-								value: d.weight,
-								onChange: (e) => h(f, "weight", parseFloat(e.target.value) || 0)
-							})]
+							children: [
+								/* @__PURE__ */ c(a, {
+									htmlFor: `item-weight-${d.id}`,
+									children: "Weight (kg)"
+								}),
+								/* @__PURE__ */ c(i, {
+									id: `item-weight-${d.id}`,
+									type: "number",
+									min: "0",
+									step: "0.1",
+									value: d.weight,
+									onChange: (e) => b(f, "weight", parseFloat(e.target.value) || 0),
+									"aria-invalid": !!y.weight,
+									"aria-describedby": y.weight ? `item-weight-${d.id}-error` : void 0
+								}),
+								A("weight")
+							]
 						}),
 						/* @__PURE__ */ l("div", {
 							className: "space-y-2 lg:col-span-1",
-							children: [/* @__PURE__ */ c(a, {
-								htmlFor: `item-value-${d.id}`,
-								children: "Value ($)"
-							}), /* @__PURE__ */ c(i, {
-								id: `item-value-${d.id}`,
-								type: "number",
-								min: "0",
-								step: "0.01",
-								value: d.value,
-								onChange: (e) => h(f, "value", parseFloat(e.target.value) || 0)
-							})]
+							children: [
+								/* @__PURE__ */ c(a, {
+									htmlFor: `item-value-${d.id}`,
+									children: "Value ($)"
+								}),
+								/* @__PURE__ */ c(i, {
+									id: `item-value-${d.id}`,
+									type: "number",
+									min: "0",
+									step: "0.01",
+									value: d.value,
+									onChange: (e) => b(f, "value", parseFloat(e.target.value) || 0),
+									"aria-invalid": !!y.value,
+									"aria-describedby": y.value ? `item-value-${d.id}-error` : void 0
+								}),
+								A("value")
+							]
 						})
 					]
 				}),
@@ -171,7 +210,7 @@ function d({ item: d, index: f, products: p, productsLoading: m, onUpdate: h, on
 							className: "px-1 text-xs font-medium text-text-secondary",
 							children: [
 								"Dimensions (",
-								S.unit,
+								D.unit,
 								")"
 							]
 						}),
@@ -183,17 +222,23 @@ function d({ item: d, index: f, products: p, productsLoading: m, onUpdate: h, on
 								"height"
 							].map((e) => /* @__PURE__ */ l("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ c(a, {
-									htmlFor: `item-${e}-${d.id}`,
-									children: e.charAt(0).toUpperCase() + e.slice(1)
-								}), /* @__PURE__ */ c(i, {
-									id: `item-${e}-${d.id}`,
-									type: "number",
-									min: "0",
-									step: "0.1",
-									value: S[e],
-									onChange: (t) => w(e, t.target.value)
-								})]
+								children: [
+									/* @__PURE__ */ c(a, {
+										htmlFor: `item-${e}-${d.id}`,
+										children: e.charAt(0).toUpperCase() + e.slice(1)
+									}),
+									/* @__PURE__ */ c(i, {
+										id: `item-${e}-${d.id}`,
+										type: "number",
+										min: "0",
+										step: "0.1",
+										value: D[e],
+										onChange: (t) => k(e, t.target.value),
+										"aria-invalid": !!y[e],
+										"aria-describedby": y[e] ? `item-${e}-${d.id}-error` : void 0
+									}),
+									A(e)
+								]
 							}, e))
 						}),
 						/* @__PURE__ */ c("p", {