@npm_leadtech/legal-contracts-ui 0.176.3 → 0.176.4

package/dist/components/Checkbox.js

@@ -4,7 +4,7 @@ import r from "clsx";
 //#region lib/components/atoms/Checkbox.tsx
 var i = ({ dataQa: i, id: a, name: o, required: s = !1, children: c, checked: l, error: u = !1, ...d }) => /* @__PURE__ */ n("label", {
 	htmlFor: a,
-	className: "text-medium flex cursor-pointer items-center gap-2 text-neutral-800 select-none",
+	className: "text-medium flex cursor-pointer items-start gap-2 text-neutral-800 select-none",
 	children: [
 		/* @__PURE__ */ t("input", {
 			id: a,
@@ -16,11 +16,11 @@ var i = ({ dataQa: i, id: a, name: o, required: s = !1, children: c, checked: l,
 		}),
 		/* @__PURE__ */ t("div", {
 			"data-qa": i,
-			className: r("flex h-5.5 w-5.5 items-center justify-center rounded transition-colors", "peer-focus-visible:ring-primary-500 peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2", !u && !l && "hover:bg-primary-200 border border-neutral-800 bg-white", l && "border-primary-500 bg-primary-200 border-2", u && "border-error-500 bg-error-20 border"),
+			className: r("flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded transition-colors", "peer-focus-visible:ring-primary-500 peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2", !u && !l && "hover:bg-primary-200 border border-neutral-800 bg-white", l && "border-primary-500 bg-primary-200 border-2", u && "border-error-500 bg-error-20 border"),
 			children: l && /* @__PURE__ */ t(e, {})
 		}),
 		/* @__PURE__ */ t("span", {
-			className: "leading-tight text-neutral-800",
+			className: "min-w-0 leading-tight text-neutral-800",
 			children: c
 		})
 	]

package/dist/components/Input.js

@@ -75,17 +75,14 @@ var s = ({ dataQa: s, label: c, id: l, name: u, type: d = "text", placeholder: f
 			}),
 			_ && /* @__PURE__ */ a("p", {
 				id: `${l}-error-message`,
-				className: "text-small text-error-500 flex items-center gap-1",
-				children: [
-					/* @__PURE__ */ i(e, {
-						width: 20,
-						height: 20,
-						fill: "var(--color-error-500)",
-						"aria-hidden": "true"
-					}),
-					" ",
-					v
-				]
+				className: "text-small text-error-500 flex items-start gap-1",
+				children: [/* @__PURE__ */ i(e, {
+					className: "shrink-0",
+					width: 20,
+					height: 20,
+					fill: "var(--color-error-500)",
+					"aria-hidden": "true"
+				}), v]
 			})
 		]
 	});

package/dist/components/JumboDocs.d.ts

@@ -4,11 +4,15 @@ import { ReactNode } from 'react';
 export declare const JumboDocs: FC<JumboDocsProps>;
 
 export declare interface JumboDocsProps {
-    trustedBadge?: ReactNode;
+    trustedBadge?: TrustedBadgeProps;
     imagePreview: ReactNode | null;
     title: string;
     freeDocTexts: string[];
     pdfDownload: ReactNode;
     wordDownload: ReactNode;
 }
+
+export interface TrustedBadgeProps {
+    children: ReactNode;
+}
 

package/dist/components/JumboDocs.js

@@ -1,79 +1,80 @@
 "use client";
 "use client";
 import { LinkWrapper as e } from "./LinkWrapper.js";
-import { useEffect as t, useRef as n, useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { TrustedBadge as t } from "./TrustedBadge.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region lib/components/organisms/JumboDocs.tsx
-var s = ({ trustedBadge: s, imagePreview: c, freeDocTexts: l, title: u, pdfDownload: d, wordDownload: f }) => {
-	let [p, m] = r(!1), h = n(null);
-	return t(() => {
-		let e = h.current;
+var c = ({ trustedBadge: c, imagePreview: l, freeDocTexts: u, title: d, pdfDownload: f, wordDownload: p }) => {
+	let [m, h] = i(!1), g = r(null);
+	return n(() => {
+		let e = g.current;
 		if (!e) return;
 		let t = new IntersectionObserver(([e]) => {
-			m(!e.isIntersecting);
+			h(!e.isIntersecting);
 		}, { threshold: 0 });
 		return t.observe(e), () => {
 			t.disconnect();
 		};
-	}, []), /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("section", {
+	}, []), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("section", {
 		className: "bg-neutral-25 pt-8 text-neutral-800 sm:px-6 lg:px-8 xl:px-30",
-		children: /* @__PURE__ */ o("div", {
-			ref: h,
+		children: /* @__PURE__ */ s("div", {
+			ref: g,
 			className: "relative mx-auto flex max-w-300 flex-col items-center justify-center gap-8 rounded bg-white px-6 py-8 shadow-md sm:px-4 md:flex-row lg:px-14",
 			children: [
-				s,
-				/* @__PURE__ */ a("div", {
+				c && /* @__PURE__ */ o(t, { ...c }),
+				/* @__PURE__ */ o("div", {
 					className: "border border-neutral-200 shadow",
-					children: c
+					children: l
 				}),
-				/* @__PURE__ */ o("div", {
+				/* @__PURE__ */ s("div", {
 					className: "flex flex-col gap-8 self-start",
-					children: [/* @__PURE__ */ o("div", {
+					children: [/* @__PURE__ */ s("div", {
 						className: "flex flex-col gap-4",
 						children: [
-							/* @__PURE__ */ a("p", {
+							/* @__PURE__ */ o("p", {
 								className: "text-big md:text-large font-bold",
-								children: u
+								children: d
 							}),
-							/* @__PURE__ */ a("span", { className: "h-px w-full bg-neutral-200" }),
-							l.length > 0 && /* @__PURE__ */ a("ul", {
+							/* @__PURE__ */ o("span", { className: "h-px w-full bg-neutral-200" }),
+							u.length > 0 && /* @__PURE__ */ o("ul", {
 								className: "flex flex-col gap-4 md:gap-8",
-								children: l.map((e) => /* @__PURE__ */ o("li", {
+								children: u.map((e) => /* @__PURE__ */ s("li", {
 									className: "text-small flex gap-2",
-									children: [/* @__PURE__ */ a("span", {
+									children: [/* @__PURE__ */ o("span", {
 										className: "text-primary-500",
 										children: "•"
 									}), e]
 								}, e))
 							})
 						]
-					}), /* @__PURE__ */ o("div", {
+					}), /* @__PURE__ */ s("div", {
 						className: "flex w-full gap-4",
-						children: [/* @__PURE__ */ a(e, {
+						children: [/* @__PURE__ */ o(e, {
 							className: "w-full md:w-26.25",
 							variant: "secondary-black",
-							children: d
-						}), /* @__PURE__ */ a(e, {
+							children: f
+						}), /* @__PURE__ */ o(e, {
 							className: "w-full md:w-26.25",
 							variant: "secondary-black",
-							children: f
+							children: p
 						})]
 					})]
 				})
 			]
 		})
-	}), p && /* @__PURE__ */ o("div", {
+	}), m && /* @__PURE__ */ s("div", {
 		className: "fixed bottom-0 left-0 z-50 flex w-full gap-4 bg-white px-6 py-4 shadow sm:hidden",
-		children: [/* @__PURE__ */ a(e, {
+		children: [/* @__PURE__ */ o(e, {
 			className: "w-full",
 			variant: "secondary-black",
-			children: d
-		}), /* @__PURE__ */ a(e, {
+			children: f
+		}), /* @__PURE__ */ o(e, {
 			className: "w-full",
 			variant: "secondary-black",
-			children: f
+			children: p
 		})]
 	})] });
 };
 //#endregion
-export { s as JumboDocs };
+export { c as JumboDocs };

package/dist/components/LeadGateError.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+export declare const LeadGateError: FC<LeadGateErrorProps>;
+
+export declare interface LeadGateErrorProps {
+    heading: string;
+    description: string;
+    ctaLabel: string;
+    onRetry?: () => void;
+}
+

package/dist/components/LeadGateError.js

@@ -0,0 +1,41 @@
+import { ClearIcon as e } from "./ClearIcon.js";
+import { Button as t } from "./Button.js";
+import { Markdown as n } from "./Markdown.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/components/molecules/LeadGateError.tsx
+var a = ({ heading: a, description: o, ctaLabel: s, onRetry: c }) => /* @__PURE__ */ i("div", {
+	className: "mt-4 flex w-full flex-col",
+	children: [/* @__PURE__ */ r("span", { className: "h-px w-full bg-neutral-200" }), /* @__PURE__ */ i("div", {
+		className: "mt-10 flex w-full flex-col gap-10",
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex w-full flex-col items-center gap-4",
+			children: [/* @__PURE__ */ r("div", {
+				className: "bg-error-20 flex size-[74px] items-center justify-center rounded-full",
+				children: /* @__PURE__ */ r(e, {
+					width: 48,
+					height: 48,
+					fill: "var(--color-error-500)",
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ i("div", {
+				className: "flex w-full flex-col gap-2 text-center",
+				children: [/* @__PURE__ */ r("p", {
+					className: "text-big font-bold text-neutral-800",
+					children: a
+				}), /* @__PURE__ */ r(n, {
+					className: "text-medium w-auto! text-neutral-800 [&_p]:mb-0",
+					content: o
+				})]
+			})]
+		}), /* @__PURE__ */ r(t, {
+			type: "button",
+			variant: "primary-green",
+			className: "w-full",
+			dataQa: "lead_gate_retry",
+			onClick: c,
+			children: s
+		})]
+	})]
+});
+//#endregion
+export { a as LeadGateError };

package/dist/components/LeadGateModal.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+export declare const LeadGateModal: FC<LeadGateModalProps>;
+
+export declare interface LeadGateModalErrors {
+    email?: boolean;
+    hasAcceptedTerms?: boolean;
+}
+
+export declare interface LeadGateModalPayload {
+    email: string;
+    hasAcceptedTerms: boolean;
+    hasAcceptedMarketing: boolean;
+}
+
+export declare interface LeadGateModalProps {
+    description: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    emailErrorMessage: string;
+    termsLabel: string;
+    marketingLabel: string;
+    ctaLabel: string;
+    payload: LeadGateModalPayload;
+    errors?: LeadGateModalErrors;
+    onPayloadChange: (payload: LeadGateModalPayload) => void;
+    onSubmit?: () => void;
+}
+

package/dist/components/LeadGateModal.js

@@ -0,0 +1,87 @@
+import { Button as e } from "./Button.js";
+import { Markdown as t } from "./Markdown.js";
+import { Input as n } from "./Input.js";
+import { Checkbox as r } from "./Checkbox.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/components/molecules/LeadGateModal.tsx
+var o = (e) => {
+	!(e.target instanceof HTMLElement) || !e.target.closest("a") || e.stopPropagation();
+}, s = ({ description: s, emailLabel: c, emailPlaceholder: l, emailErrorMessage: u, termsLabel: d, marketingLabel: f, ctaLabel: p, payload: m, errors: h = {}, onPayloadChange: g, onSubmit: _ }) => /* @__PURE__ */ a("div", {
+	className: "mt-4 flex w-full flex-col gap-4",
+	children: [/* @__PURE__ */ i("span", { className: "h-px w-full bg-neutral-200" }), /* @__PURE__ */ a("form", {
+		className: "flex w-full flex-col gap-4",
+		noValidate: !0,
+		onSubmit: (e) => {
+			e.preventDefault(), _?.();
+		},
+		children: [
+			/* @__PURE__ */ i(t, {
+				className: "text-medium w-auto! text-center text-neutral-800 [&_p]:mb-0",
+				content: s
+			}),
+			/* @__PURE__ */ i(n, {
+				id: "lead-gate-email",
+				name: "email",
+				type: "email",
+				label: c,
+				placeholder: l,
+				dataQa: "lead_gate_email",
+				value: m.email,
+				error: h.email,
+				errorMessage: u,
+				onInputChange: (e) => {
+					g({
+						...m,
+						email: e
+					});
+				}
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ i(r, {
+					id: "lead-gate-terms",
+					name: "hasAcceptedTerms",
+					dataQa: "lead_gate_terms",
+					checked: m.hasAcceptedTerms,
+					error: h.hasAcceptedTerms,
+					onChange: (e) => {
+						g({
+							...m,
+							hasAcceptedTerms: e.currentTarget.checked
+						});
+					},
+					children: /* @__PURE__ */ i("span", {
+						className: "min-w-0",
+						onClick: o,
+						onKeyDown: o,
+						children: /* @__PURE__ */ i(t, {
+							className: "[&_p]:mb-0",
+							content: d
+						})
+					})
+				}), /* @__PURE__ */ i(r, {
+					id: "lead-gate-marketing",
+					name: "hasAcceptedMarketing",
+					dataQa: "lead_gate_marketing",
+					checked: m.hasAcceptedMarketing,
+					onChange: (e) => {
+						g({
+							...m,
+							hasAcceptedMarketing: e.currentTarget.checked
+						});
+					},
+					children: f
+				})]
+			}),
+			/* @__PURE__ */ i(e, {
+				type: "submit",
+				variant: "primary-green",
+				className: "w-full",
+				dataQa: "lead_gate_download",
+				children: p
+			})
+		]
+	})]
+});
+//#endregion
+export { s as LeadGateModal };

package/dist/components/LeadGateSuccess.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const LeadGateSuccess: FC<LeadGateSuccessProps>;
+
+export interface LeadGateSuccessFeatureItemProps {
+    icon?: ReactNode;
+    title: string;
+    description: string;
+}
+
+export declare interface LeadGateSuccessProps {
+    subtitle: string;
+    featureItems: LeadGateSuccessFeatureItemProps[];
+    ctaLabel: string;
+    footer: string;
+    illustration: ReactNode;
+    onCtaClick?: () => void;
+}
+

package/dist/components/LeadGateSuccess.js

@@ -0,0 +1,45 @@
+import { DocOutlineIcon as e } from "./DocOutlineIcon.js";
+import { Button as t } from "./Button.js";
+import { Markdown as n } from "./Markdown.js";
+import { LeadGateSuccessFeatureItem as r } from "./LeadGateSuccessFeatureItem.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/components/molecules/LeadGateSuccess.tsx
+var o = ({ subtitle: o, featureItems: s, ctaLabel: c, footer: l, illustration: u, onCtaClick: d }) => /* @__PURE__ */ a("div", {
+	className: "mt-6 flex w-full flex-col gap-6",
+	children: [
+		/* @__PURE__ */ i("div", {
+			className: "relative h-[227px] w-[302px] max-w-full overflow-hidden",
+			children: u
+		}),
+		/* @__PURE__ */ i("p", {
+			className: "text-medium text-primary-500 w-full text-center",
+			children: o
+		}),
+		/* @__PURE__ */ i("span", { className: "h-px w-full bg-neutral-200" }),
+		/* @__PURE__ */ i("ul", {
+			className: "flex w-full flex-col gap-4",
+			children: s.map((e) => /* @__PURE__ */ i(r, { ...e }, e.title))
+		}),
+		/* @__PURE__ */ a("div", {
+			className: "flex w-full flex-col gap-4",
+			children: [/* @__PURE__ */ a(t, {
+				type: "button",
+				variant: "primary-green",
+				className: "w-full",
+				dataQa: "lead_gate_success_cta",
+				onClick: d,
+				children: [/* @__PURE__ */ i(e, {
+					width: 22,
+					height: 22,
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}), c]
+			}), /* @__PURE__ */ i(n, {
+				className: "text-extra-small [&_strong]:text-primary-500 text-center text-neutral-600 [&_p]:mb-0",
+				content: l
+			})]
+		})
+	]
+});
+//#endregion
+export { o as LeadGateSuccess };

package/dist/components/LeadGateSuccessFeatureItem.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const LeadGateSuccessFeatureItem: FC<LeadGateSuccessFeatureItemProps>;
+
+export declare interface LeadGateSuccessFeatureItemProps {
+    icon?: ReactNode;
+    title: string;
+    description: string;
+}
+

package/dist/components/LeadGateSuccessFeatureItem.js

@@ -0,0 +1,20 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region lib/components/molecules/LeadGateSuccessFeatureItem.tsx
+var n = ({ icon: n, title: r, description: i }) => /* @__PURE__ */ t("li", {
+	className: "flex items-start gap-4",
+	children: [n == null ? null : /* @__PURE__ */ e("span", {
+		className: "mt-0.5 shrink-0",
+		children: n
+	}), /* @__PURE__ */ t("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-2",
+		children: [/* @__PURE__ */ e("p", {
+			className: "text-medium font-bold text-neutral-800",
+			children: r
+		}), /* @__PURE__ */ e("p", {
+			className: "text-small text-neutral-600",
+			children: i
+		})]
+	})]
+});
+//#endregion
+export { n as LeadGateSuccessFeatureItem };

package/dist/components/Preform.d.ts

@@ -25,7 +25,7 @@ export interface PreformOptionProps {
 }
 
 export declare interface PreformProps {
-    trustedBadge: ReactNode;
+    trustedBadge: TrustedBadgeProps;
     cta: ReactNode;
     radioFieldData?: RadioFieldData;
     inputFieldData?: InputFieldData;
@@ -46,4 +46,8 @@ export interface TooltipsProps {
     title: string;
     content: string;
 }
+
+export interface TrustedBadgeProps {
+    children: ReactNode;
+}
 

package/dist/components/Preform.js

@@ -3,58 +3,59 @@
 import { Input as e } from "./Input.js";
 import { LinkWrapper as t } from "./LinkWrapper.js";
 import { PreformOption as n } from "./PreformOption.js";
-import { Tooltips as r } from "./Tooltips.js";
-import { PreformMobile as i } from "./PreformMobile.js";
+import { TrustedBadge as r } from "./TrustedBadge.js";
+import { Tooltips as i } from "./Tooltips.js";
+import { PreformMobile as a } from "./PreformMobile.js";
 import "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region lib/components/organisms/Preform.tsx
-var c = ({ trustedBadge: c, cta: l, inputFieldData: u, radioFieldData: d, tooltips: f, hasMobileRadioField: p }) => /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("section", {
+var l = ({ trustedBadge: l, cta: u, inputFieldData: d, radioFieldData: f, tooltips: p, hasMobileRadioField: m }) => /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("section", {
 	className: "bg-neutral-25 hidden pt-10 text-neutral-800 sm:block sm:px-6 lg:px-8 xl:px-30",
-	children: /* @__PURE__ */ s("div", {
+	children: /* @__PURE__ */ c("div", {
 		className: "relative mx-auto flex max-w-300 flex-col gap-6 rounded bg-white px-6 pt-8 pb-6 shadow-md sm:items-center sm:gap-8 lg:px-26 xl:px-10",
 		children: [
-			c,
-			d?.isVisible && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("p", {
+			/* @__PURE__ */ s(r, { ...l }),
+			f?.isVisible && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("p", {
 				className: "text-large font-bold",
-				children: d.label
-			}), /* @__PURE__ */ s("div", {
+				children: f.label
+			}), /* @__PURE__ */ c("div", {
 				className: "flex w-full max-w-272 flex-wrap justify-center gap-2 sm:gap-4",
-				children: [d.options.map((e) => /* @__PURE__ */ o("div", {
+				children: [f.options.map((e) => /* @__PURE__ */ s("div", {
 					className: "w-[calc(25%-12px)] lg:w-[calc(20%-13px)] xl:w-[calc(16.66%-14px)]",
-					children: /* @__PURE__ */ o(n, {
+					children: /* @__PURE__ */ s(n, {
 						...e,
-						selected: e.value === d.radioSelected,
-						onClick: d.onClick
+						selected: e.value === f.radioSelected,
+						onClick: f.onClick
 					})
-				}, e.value)), u?.isVisible && /* @__PURE__ */ o("div", {
+				}, e.value)), d?.isVisible && /* @__PURE__ */ s("div", {
 					className: "mt-4 flex basis-full justify-center md:mt-0",
-					children: /* @__PURE__ */ o(e, {
-						id: u.id,
-						label: u.label,
-						name: u.name,
-						placeholder: u.placeholder,
-						value: u.value,
-						onInputChange: u.onChange,
-						"data-qa": u.dataQa
+					children: /* @__PURE__ */ s(e, {
+						id: d.id,
+						label: d.label,
+						name: d.name,
+						placeholder: d.placeholder,
+						value: d.value,
+						onInputChange: d.onChange,
+						"data-qa": d.dataQa
 					})
-				}, u.name)]
+				}, d.name)]
 			})] }),
-			/* @__PURE__ */ o(t, {
+			/* @__PURE__ */ s(t, {
 				variant: "primary-green",
-				children: l
+				children: u
 			}),
-			f.length > 0 && /* @__PURE__ */ o("div", {
+			p.length > 0 && /* @__PURE__ */ s("div", {
 				className: "flex flex-col gap-8",
-				children: f.map((e) => /* @__PURE__ */ o(r, { ...e }, e.title))
+				children: p.map((e) => /* @__PURE__ */ s(i, { ...e }, e.title))
 			})
 		]
 	})
-}), /* @__PURE__ */ o(i, {
-	cta: l,
-	trustedBadge: c,
-	inputFieldData: u,
-	radioFieldData: d,
-	hasMobileRadioField: p
+}), /* @__PURE__ */ s(a, {
+	cta: u,
+	trustedBadge: l,
+	inputFieldData: d,
+	radioFieldData: f,
+	hasMobileRadioField: m
 })] });
 //#endregion
-export { c as Preform };
+export { l as Preform };

package/dist/components/PreformMobile.d.ts

@@ -15,7 +15,7 @@ export type InputFieldData = {
 export declare const PreformMobile: FC<PreformMobileProps>;
 
 export declare interface PreformMobileProps {
-    trustedBadge: ReactNode;
+    trustedBadge: TrustedBadgeProps;
     radioFieldData?: RadioFieldData;
     inputFieldData?: InputFieldData;
     cta: ReactNode;
@@ -40,4 +40,8 @@ export type RadioFieldData = {
     radioSelected: string;
     onClick: (str: string) => void;
 };
+
+export interface TrustedBadgeProps {
+    children: ReactNode;
+}