formica-ui-lib 1.0.340 → 1.0.341

package/dist/index.js

@@ -9636,28 +9636,43 @@ var Zo = ({ id: e, name: t, type: n = "text", value: r = "", placeholder: i = ""
 			}) : null
 		]
 	});
-}, $ = ({ id: e, label: t, errorMessage: n, hasError: r = !1, linkText: i, linkHref: a, onLinkClick: o, ...s }) => /* @__PURE__ */ u("div", {
-	className: "flex w-full flex-col gap-2",
-	children: [t || i ? /* @__PURE__ */ u("div", {
-		className: "flex items-center justify-between gap-4",
-		children: [t ? /* @__PURE__ */ u(v, {
-			as: "label",
-			htmlFor: e,
-			className: `text-sm ${r ? "text-accent!" : "text-primary"}`,
-			children: [r ? null : `${t}`, r && n ? `${n}` : null]
-		}) : /* @__PURE__ */ l("span", {}), i ? /* @__PURE__ */ l(v, {
-			as: "a",
-			href: a || "#",
-			onClick: o,
-			className: "text-xs text-secondaryActive underline underline-offset-2",
-			children: i
-		}) : null]
-	}) : null, /* @__PURE__ */ l(Zo, {
-		id: e,
-		hasError: r,
-		...s
-	})]
-}), zl = ({ title: e = "Personal & Project Information", idPrefix: t = "salesforce-customer", firstName: n = "", lastName: r = "", profession: i = "", companyName: a = "", projectType: o = "", projectSquareMetres: s = "", projectName: c = "", projectDetails: d = "", phoneNumber: f = "", email: p = "", confirmEmail: m = "", firstNamePlaceholder: h = "First Name*", lastNamePlaceholder: g = "Last Name*", professionPlaceholder: _ = "Profession*", companyNamePlaceholder: y = "Company Name*", projectTypePlaceholder: b = "Project Type", projectSquareMetresPlaceholder: x = "Project Square Metres", projectNamePlaceholder: S = "Project Name", projectDetailsPlaceholder: C = "Project Details", phoneNumberPlaceholder: w = "Phone Number*", emailPlaceholder: T = "Email*", confirmEmailPlaceholder: E = "Confirm Email*", professionOptions: D = [], projectTypeOptions: O = [], projectSquareMetresOptions: k = [], errors: A = {}, onFirstNameChange: j, onLastNameChange: M, onProfessionChange: N, onCompanyNameChange: P, onProjectTypeChange: F, onProjectSquareMetresChange: I, onProjectNameChange: L, onProjectDetailsChange: R, onPhoneNumberChange: z, onEmailChange: B, onConfirmEmailChange: V }) => /* @__PURE__ */ u("section", {
+}, $ = ({ id: e, label: t, errorMessage: n, hasError: i = !1, linkText: a, linkHref: o, onLinkClick: s, ariaDescribedBy: c, ...d }) => {
+	let f = r(), p = i && !!n, m = `${e || f}-field-error`, h = [c, p ? m : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ u("div", {
+		className: "flex w-full flex-col gap-2",
+		children: [
+			t || a ? /* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [t ? /* @__PURE__ */ l(v, {
+					as: "label",
+					htmlFor: e,
+					id: p ? m : void 0,
+					className: `text-sm ${i ? "text-accent!" : "text-primary"}`,
+					children: p ? n : t
+				}) : /* @__PURE__ */ l("span", {}), a ? /* @__PURE__ */ l(v, {
+					as: "a",
+					href: o || "#",
+					onClick: s,
+					className: "text-xs text-secondaryActive underline underline-offset-2",
+					children: a
+				}) : null]
+			}) : null,
+			/* @__PURE__ */ l(Zo, {
+				id: e,
+				hasError: i,
+				...d,
+				ariaDescribedBy: h
+			}),
+			!t && p ? /* @__PURE__ */ l(v, {
+				id: m,
+				role: "alert",
+				variant: "free",
+				className: "text-sm text-accent",
+				children: n
+			}) : null
+		]
+	});
+}, zl = ({ title: e = "Personal & Project Information", idPrefix: t = "salesforce-customer", firstName: n = "", lastName: r = "", profession: i = "", companyName: a = "", projectType: o = "", projectSquareMetres: s = "", projectName: c = "", projectDetails: d = "", phoneNumber: f = "", email: p = "", confirmEmail: m = "", firstNamePlaceholder: h = "First Name*", lastNamePlaceholder: g = "Last Name*", professionPlaceholder: _ = "Profession*", companyNamePlaceholder: y = "Company Name*", projectTypePlaceholder: b = "Project Type", projectSquareMetresPlaceholder: x = "Project Square Metres", projectNamePlaceholder: S = "Project Name", projectDetailsPlaceholder: C = "Project Details", phoneNumberPlaceholder: w = "Phone Number*", emailPlaceholder: T = "Email*", confirmEmailPlaceholder: E = "Confirm Email*", professionOptions: D = [], projectTypeOptions: O = [], projectSquareMetresOptions: k = [], errors: A = {}, onFirstNameChange: j, onLastNameChange: M, onProfessionChange: N, onCompanyNameChange: P, onProjectTypeChange: F, onProjectSquareMetresChange: I, onProjectNameChange: L, onProjectDetailsChange: R, onPhoneNumberChange: z, onEmailChange: B, onConfirmEmailChange: V }) => /* @__PURE__ */ u("section", {
 	className: "flex flex-col gap-6",
 	children: [/* @__PURE__ */ l(v, {
 		as: "h2",
@@ -13792,60 +13807,69 @@ var ld = (e, t = [], n = null) => t.map((t) => e[t]).filter((e) => !!e).map((e)
 			})
 		]
 	});
-}, ef = ({ paymentTypeTitle: e = "Select Payment Type", paymentTypeSelectorProps: t, cardNumber: n = "", expirationDate: r = "", securityCode: i = "", errors: a = {}, onCardNumberChange: o, onExpirationDateChange: s, onSecurityCodeChange: c, onCardNumberBlur: d, onExpirationDateBlur: f, onSecurityCodeBlur: p }) => /* @__PURE__ */ u("section", {
+}, ef = ({ paymentTypeTitle: e = "Select Payment Type", paymentTypeSelectorProps: t, cardNumber: n = "", expirationDate: r = "", securityCode: i = "", errors: a = {}, submitError: o, onCardNumberChange: s, onExpirationDateChange: c, onSecurityCodeChange: d, onCardNumberBlur: f, onExpirationDateBlur: p, onSecurityCodeBlur: m }) => /* @__PURE__ */ u("section", {
 	className: "flex w-full flex-col gap-6",
-	children: [/* @__PURE__ */ u("div", {
-		className: "flex flex-col gap-3",
-		children: [/* @__PURE__ */ l(v, {
-			as: "h2",
-			variant: "bold",
-			className: "text-primary",
-			children: e
-		}), /* @__PURE__ */ l(qd, { ...t })]
-	}), /* @__PURE__ */ u("div", {
-		className: "mt-10 flex flex-col gap-4",
-		children: [/* @__PURE__ */ l($, {
-			id: "payment-card-number",
-			name: "cardNumber",
-			placeholder: "Card Number",
-			ariaLabel: "Card number",
-			mask: "cardNumber",
-			autoComplete: "cc-number",
-			value: n,
-			hasError: !!a.cardNumber,
-			errorMessage: a.cardNumber,
-			onChange: o,
-			onBlur: d
-		}), /* @__PURE__ */ u("div", {
-			className: "grid grid-cols-2 gap-4",
+	children: [
+		/* @__PURE__ */ u("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ l(v, {
+				as: "h2",
+				variant: "bold",
+				className: "text-primary",
+				children: e
+			}), /* @__PURE__ */ l(qd, { ...t })]
+		}),
+		/* @__PURE__ */ u("div", {
+			className: "mt-10 flex flex-col gap-4",
 			children: [/* @__PURE__ */ l($, {
-				id: "payment-expiration-date",
-				name: "expirationDate",
-				placeholder: "MM/YY",
-				ariaLabel: "Expiration date (MM/YY)",
-				mask: "expirationDate",
-				autoComplete: "cc-exp",
-				value: r,
-				hasError: !!a.expirationDate,
-				errorMessage: a.expirationDate,
+				id: "payment-card-number",
+				name: "cardNumber",
+				placeholder: "Card Number",
+				ariaLabel: "Card number",
+				mask: "cardNumber",
+				autoComplete: "cc-number",
+				value: n,
+				hasError: !!a.cardNumber,
+				errorMessage: a.cardNumber,
 				onChange: s,
 				onBlur: f
-			}), /* @__PURE__ */ l($, {
-				id: "payment-security-code",
-				name: "securityCode",
-				placeholder: "CVC",
-				ariaLabel: "Security code (3 or 4 digits)",
-				mask: "digits",
-				maxDigits: 4,
-				autoComplete: "cc-csc",
-				value: i,
-				hasError: !!a.securityCode,
-				errorMessage: a.securityCode,
-				onChange: c,
-				onBlur: p
+			}), /* @__PURE__ */ u("div", {
+				className: "grid grid-cols-2 gap-4",
+				children: [/* @__PURE__ */ l($, {
+					id: "payment-expiration-date",
+					name: "expirationDate",
+					placeholder: "MM/YY",
+					ariaLabel: "Expiration date (MM/YY)",
+					mask: "expirationDate",
+					autoComplete: "cc-exp",
+					value: r,
+					hasError: !!a.expirationDate,
+					errorMessage: a.expirationDate,
+					onChange: c,
+					onBlur: p
+				}), /* @__PURE__ */ l($, {
+					id: "payment-security-code",
+					name: "securityCode",
+					placeholder: "CVC",
+					ariaLabel: "Security code (3 or 4 digits)",
+					mask: "digits",
+					maxDigits: 4,
+					autoComplete: "cc-csc",
+					value: i,
+					hasError: !!a.securityCode,
+					errorMessage: a.securityCode,
+					onChange: d,
+					onBlur: m
+				})]
 			})]
-		})]
-	})]
+		}),
+		o ? /* @__PURE__ */ l(v, {
+			role: "alert",
+			variant: "free",
+			className: "rounded-md border border-accent bg-accent/10 p-4 text-sm text-accent",
+			children: o
+		}) : null
+	]
 }), tf = ({ requiresPayment: e = !0, shippingMethodSelectorProps: t, cartPaymentPanelProps: n, checkoutProgressIndicatorProps: r, cartTotalsPanelProps: i }) => /* @__PURE__ */ l("section", {
 	className: "w-full flex justify-center mt-10 pb-16",
 	children: /* @__PURE__ */ u("div", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "formica-ui-lib",
   "private": false,
-  "version": "1.0.340",
+  "version": "1.0.341",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/tailwind.css",