@npm_leadtech/legal-contracts-ui 0.181.2 → 0.182.1

package/dist/components/LeadGateErrorModal.d.ts

@@ -3,6 +3,10 @@ import { FC } from 'react';
 export declare const LeadGateErrorModal: FC<LeadGateErrorModalProps>;
 
 export declare interface LeadGateErrorModalProps {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    title: string;
+    closeLeadGateLabel: string;
     heading: string;
     description: string;
     ctaLabel: string;

package/dist/components/LeadGateErrorModal.js

@@ -1,41 +1,78 @@
+"use client";
+"use client";
 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";
+import { Modal as r } from "./Modal.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region lib/components/molecules/LeadGateErrorModal.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: "mx-auto flex w-full max-w-80 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)",
+var o = "lead-gate-modal-title", s = ({ isOpen: s, setIsOpen: c, title: l, closeLeadGateLabel: u, heading: d, description: f, ctaLabel: p, onRetry: m }) => /* @__PURE__ */ i(r, {
+	isOpen: s,
+	setIsOpen: c,
+	showClose: !1,
+	overlayVariant: "grey",
+	children: /* @__PURE__ */ a("div", {
+		className: "shadow-small flex w-[338px] max-w-[calc(100vw-3rem)] flex-col rounded-sm bg-white p-6 sm:w-96",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ i("div", {
+				className: "flex min-w-0 flex-1 items-center gap-1",
+				children: /* @__PURE__ */ i("h2", {
+					id: o,
+					className: "text-big min-w-0 flex-1 font-bold break-words text-neutral-800",
+					children: l
+				})
+			}), /* @__PURE__ */ i(t, {
+				type: "button",
+				variant: "tertiary-icon",
+				className: "shrink-0 p-0!",
+				dataQa: "lead_gate_close",
+				"aria-label": u,
+				onClick: () => {
+					c(!1);
+				},
+				children: /* @__PURE__ */ i(e, {
+					width: 24,
+					height: 24,
+					fill: "var(--color-neutral-800)",
 					"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__ */ a("div", {
+			className: "mt-4 flex w-full flex-col",
+			children: [/* @__PURE__ */ i("span", { className: "h-px w-full bg-neutral-200" }), /* @__PURE__ */ a("div", {
+				className: "mt-10 flex w-full flex-col gap-10",
+				children: [/* @__PURE__ */ a("div", {
+					className: "mx-auto flex w-full max-w-80 flex-col items-center gap-4",
+					children: [/* @__PURE__ */ i("div", {
+						className: "bg-error-20 flex size-[74px] items-center justify-center rounded-full",
+						children: /* @__PURE__ */ i(e, {
+							width: 48,
+							height: 48,
+							fill: "var(--color-error-500)",
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ a("div", {
+						className: "flex w-full flex-col gap-2 text-center",
+						children: [/* @__PURE__ */ i("p", {
+							className: "text-big font-bold text-neutral-800",
+							children: d
+						}), /* @__PURE__ */ i(n, {
+							className: "text-medium w-auto! text-neutral-800 [&_p]:mb-0",
+							content: f
+						})]
+					})]
+				}), /* @__PURE__ */ i(t, {
+					type: "button",
+					variant: "primary-green",
+					className: "w-full",
+					dataQa: "lead_gate_retry",
+					onClick: m,
+					children: p
 				})]
 			})]
-		}), /* @__PURE__ */ r(t, {
-			type: "button",
-			variant: "primary-green",
-			className: "w-full",
-			dataQa: "lead_gate_retry",
-			onClick: c,
-			children: s
 		})]
-	})]
+	})
 });
 //#endregion
-export { a as LeadGateErrorModal };
+export { s as LeadGateErrorModal };

package/dist/components/LeadGateModal.d.ts

@@ -14,6 +14,10 @@ export declare interface LeadGateModalPayload {
 }
 
 export declare interface LeadGateModalProps {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    title: string;
+    closeLeadGateLabel: string;
     description: string;
     emailLabel: string;
     emailPlaceholder: string;

package/dist/components/LeadGateModal.js

@@ -1,90 +1,128 @@
-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";
+"use client";
+"use client";
+import { ClearIcon as e } from "./ClearIcon.js";
+import { Button as t } from "./Button.js";
+import { Markdown as n } from "./Markdown.js";
+import { Input as r } from "./Input.js";
+import { Checkbox as i } from "./Checkbox.js";
+import { Modal as a } from "./Modal.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region lib/components/molecules/LeadGateModal.tsx
-var o = (e) => {
+var c = "lead-gate-modal-title", l = (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: _ }) => {
-	let v = !!(h.email || h.hasAcceptedTerms);
-	return /* @__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: v,
-					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
-							});
-						},
+}, u = ({ isOpen: u, setIsOpen: d, title: f, closeLeadGateLabel: p, description: m, emailLabel: h, emailPlaceholder: g, emailErrorMessage: _, termsLabel: v, marketingLabel: y, ctaLabel: b, payload: x, errors: S = {}, onPayloadChange: C, onSubmit: w }) => {
+	let T = !!(S.email || S.hasAcceptedTerms);
+	return /* @__PURE__ */ o(a, {
+		isOpen: u,
+		setIsOpen: d,
+		showClose: !1,
+		overlayVariant: "grey",
+		children: /* @__PURE__ */ s("div", {
+			className: "shadow-small flex w-[338px] max-w-[calc(100vw-3rem)] flex-col rounded-sm bg-white p-6 sm:w-96",
+			children: [/* @__PURE__ */ s("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex min-w-0 flex-1 items-center gap-1",
+					children: /* @__PURE__ */ o("h2", {
+						id: c,
+						className: "text-big min-w-0 flex-1 font-bold break-words text-neutral-800",
 						children: f
-					})]
-				}),
-				/* @__PURE__ */ i(e, {
-					type: "submit",
-					variant: "primary-green",
-					className: "w-full",
-					dataQa: "lead_gate_download",
-					children: p
-				})
-			]
-		})]
+					})
+				}), /* @__PURE__ */ o(t, {
+					type: "button",
+					variant: "tertiary-icon",
+					className: "shrink-0 p-0!",
+					dataQa: "lead_gate_close",
+					"aria-label": p,
+					onClick: () => {
+						d(!1);
+					},
+					children: /* @__PURE__ */ o(e, {
+						width: 24,
+						height: 24,
+						fill: "var(--color-neutral-800)",
+						"aria-hidden": "true"
+					})
+				})]
+			}), /* @__PURE__ */ s("div", {
+				className: "mt-4 flex w-full flex-col gap-4",
+				children: [/* @__PURE__ */ o("span", { className: "h-px w-full bg-neutral-200" }), /* @__PURE__ */ s("form", {
+					className: "flex w-full flex-col gap-4",
+					noValidate: !0,
+					onSubmit: (e) => {
+						e.preventDefault(), w?.();
+					},
+					children: [
+						/* @__PURE__ */ o(n, {
+							className: "text-medium w-auto! text-center text-neutral-800 [&_p]:mb-0",
+							content: m
+						}),
+						/* @__PURE__ */ o(r, {
+							id: "lead-gate-email",
+							name: "email",
+							type: "email",
+							label: h,
+							placeholder: g,
+							dataQa: "lead_gate_email",
+							value: x.email,
+							error: T,
+							errorMessage: _,
+							onInputChange: (e) => {
+								C({
+									...x,
+									email: e
+								});
+							}
+						}),
+						/* @__PURE__ */ s("div", {
+							className: "flex flex-col gap-4",
+							children: [/* @__PURE__ */ o(i, {
+								id: "lead-gate-terms",
+								name: "hasAcceptedTerms",
+								dataQa: "lead_gate_terms",
+								checked: x.hasAcceptedTerms,
+								error: S.hasAcceptedTerms,
+								onChange: (e) => {
+									C({
+										...x,
+										hasAcceptedTerms: e.currentTarget.checked
+									});
+								},
+								children: /* @__PURE__ */ o("span", {
+									className: "min-w-0",
+									onClick: l,
+									onKeyDown: l,
+									children: /* @__PURE__ */ o(n, {
+										className: "[&_p]:mb-0",
+										content: v
+									})
+								})
+							}), /* @__PURE__ */ o(i, {
+								id: "lead-gate-marketing",
+								name: "hasAcceptedMarketing",
+								dataQa: "lead_gate_marketing",
+								checked: x.hasAcceptedMarketing,
+								onChange: (e) => {
+									C({
+										...x,
+										hasAcceptedMarketing: e.currentTarget.checked
+									});
+								},
+								children: y
+							})]
+						}),
+						/* @__PURE__ */ o(t, {
+							type: "submit",
+							variant: "primary-green",
+							className: "w-full",
+							dataQa: "lead_gate_download",
+							children: b
+						})
+					]
+				})]
+			})]
+		})
 	});
 };
 //#endregion
-export { s as LeadGateModal };
+export { u as LeadGateModal };

package/dist/components/LeadGateSuccessFeatureItem.d.ts

@@ -1,11 +1,15 @@
 import { FC } from 'react';
-import { ReactNode } from 'react';
+
+export declare type LeadGateMediaContent = {
+    url: string;
+    alternativeText?: string | null;
+};
 
 export declare const LeadGateSuccessFeatureItem: FC<LeadGateSuccessFeatureItemProps>;
 
 export declare interface LeadGateSuccessFeatureItemProps {
-    icon?: ReactNode;
     title: string;
     description: string;
+    icon?: LeadGateMediaContent | null;
 }
 

package/dist/components/LeadGateSuccessFeatureItem.js

@@ -1,20 +1,27 @@
 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", {
+var n = ({ url: t }) => /* @__PURE__ */ e("div", {
+	className: "bg-primary-500 h-6 w-6",
+	style: {
+		WebkitMask: `url(${t}) no-repeat center / contain`,
+		mask: `url(${t}) no-repeat center / contain`
+	},
+	"aria-hidden": "true"
+}), r = ({ icon: r, title: i, description: a }) => /* @__PURE__ */ t("li", {
 	className: "flex items-start gap-4",
-	children: [n != null && /* @__PURE__ */ e("span", {
+	children: [r?.url ? /* @__PURE__ */ e("span", {
 		className: "mt-0.5 shrink-0",
-		children: n
-	}), /* @__PURE__ */ t("div", {
+		children: /* @__PURE__ */ e(n, { url: r.url })
+	}) : null, /* @__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
+			children: i
 		}), /* @__PURE__ */ e("p", {
 			className: "text-small text-neutral-600",
-			children: i
+			children: a
 		})]
 	})]
 });
 //#endregion
-export { n as LeadGateSuccessFeatureItem };
+export { r as LeadGateSuccessFeatureItem };

package/dist/components/LeadGateSuccessModal.d.ts

@@ -1,20 +1,28 @@
 import { FC } from 'react';
-import { ReactNode } from 'react';
 
-export interface LeadGateSuccessFeatureItemProps {
-    icon?: ReactNode;
+export declare type LeadGateMediaContent = {
+    url: string;
+    alternativeText?: string | null;
+};
+
+export declare interface LeadGateSuccessFeatureItemProps {
     title: string;
     description: string;
+    icon?: LeadGateMediaContent | null;
 }
 
 export declare const LeadGateSuccessModal: FC<LeadGateSuccessModalProps>;
 
 export declare interface LeadGateSuccessModalProps {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    title: string;
+    closeLeadGateLabel: string;
     subtitle: string;
     featureItems: LeadGateSuccessFeatureItemProps[];
     ctaLabel: string;
     footer: string;
-    illustration: ReactNode;
+    headerImage: LeadGateMediaContent | null;
     onCtaClick?: () => void;
 }
 

package/dist/components/LeadGateSuccessModal.js

@@ -1,45 +1,96 @@
-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";
+"use client";
+"use client";
+import { DoneCircleIcon as e } from "./DoneCircleIcon.js";
+import { DocOutlineIcon as t } from "./DocOutlineIcon.js";
+import { ClearIcon as n } from "./ClearIcon.js";
+import { Button as r } from "./Button.js";
+import { Markdown as i } from "./Markdown.js";
+import { Modal as a } from "./Modal.js";
+import { LeadGateSuccessFeatureItem as o } from "./LeadGateSuccessFeatureItem.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region lib/components/molecules/LeadGateSuccessModal.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, {
+var l = "lead-gate-modal-title", u = ({ isOpen: u, setIsOpen: d, title: f, closeLeadGateLabel: p, subtitle: m, featureItems: h, ctaLabel: g, footer: _, headerImage: v, onCtaClick: y }) => /* @__PURE__ */ s(a, {
+	isOpen: u,
+	setIsOpen: d,
+	showClose: !1,
+	overlayVariant: "grey",
+	children: /* @__PURE__ */ c("div", {
+		className: "shadow-small flex w-[338px] max-w-[calc(100vw-3rem)] flex-col rounded-sm bg-white p-6 sm:w-96",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex min-w-0 flex-1 items-center gap-1",
+				children: [/* @__PURE__ */ s(e, {
+					width: 20,
+					height: 20,
+					fill: "var(--color-primary-500)",
+					"aria-hidden": "true",
+					className: "shrink-0"
+				}), /* @__PURE__ */ s("h2", {
+					id: l,
+					className: "text-big min-w-0 flex-1 font-bold break-words text-neutral-800",
+					children: f
+				})]
+			}), /* @__PURE__ */ s(r, {
 				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",
+				variant: "tertiary-icon",
+				className: "shrink-0 p-0!",
+				dataQa: "lead_gate_close",
+				"aria-label": p,
+				onClick: () => {
+					d(!1);
+				},
+				children: /* @__PURE__ */ s(n, {
+					width: 24,
+					height: 24,
+					fill: "var(--color-neutral-800)",
 					"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
+				})
 			})]
-		})
-	]
+		}), /* @__PURE__ */ c("div", {
+			className: "mt-6 flex w-full flex-col gap-6",
+			children: [
+				/* @__PURE__ */ s("div", {
+					className: "relative h-[227px] w-[302px] max-w-full overflow-hidden",
+					children: v ? /* @__PURE__ */ s("img", {
+						src: v.url,
+						alt: v.alternativeText ?? "",
+						width: 302,
+						height: 227,
+						className: "h-full w-full object-contain"
+					}) : null
+				}),
+				/* @__PURE__ */ s("p", {
+					className: "text-medium text-primary-500 w-full text-center",
+					children: m
+				}),
+				/* @__PURE__ */ s("span", { className: "h-px w-full bg-neutral-200" }),
+				/* @__PURE__ */ s("ul", {
+					className: "flex w-full flex-col gap-4",
+					children: h.map((e) => /* @__PURE__ */ s(o, { ...e }, e.title))
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "flex w-full flex-col gap-4",
+					children: [/* @__PURE__ */ c(r, {
+						type: "button",
+						variant: "primary-green",
+						className: "w-full",
+						dataQa: "lead_gate_success_cta",
+						onClick: y,
+						children: [/* @__PURE__ */ s(t, {
+							width: 22,
+							height: 22,
+							fill: "currentColor",
+							"aria-hidden": "true"
+						}), g]
+					}), /* @__PURE__ */ s(i, {
+						className: "text-extra-small [&_strong]:text-primary-500 text-center text-neutral-600 [&_p]:mb-0",
+						content: _
+					})]
+				})
+			]
+		})]
+	})
 });
 //#endregion
-export { o as LeadGateSuccessModal };
+export { u as LeadGateSuccessModal };

package/dist/components/index.d.ts

@@ -794,12 +794,21 @@ export declare interface LawGeniusStepCardProps {
 export declare const LeadGateErrorModal: FC<LeadGateErrorModalProps>;
 
 export declare interface LeadGateErrorModalProps {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    title: string;
+    closeLeadGateLabel: string;
     heading: string;
     description: string;
     ctaLabel: string;
     onRetry?: () => void;
 }
 
+export declare type LeadGateMediaContent = {
+    url: string;
+    alternativeText?: string | null;
+};
+
 export declare const LeadGateModal: FC<LeadGateModalProps>;
 
 export declare interface LeadGateModalErrors {
@@ -814,6 +823,10 @@ export declare interface LeadGateModalPayload {
 }
 
 export declare interface LeadGateModalProps {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    title: string;
+    closeLeadGateLabel: string;
     description: string;
     emailLabel: string;
     emailPlaceholder: string;
@@ -830,19 +843,23 @@ export declare interface LeadGateModalProps {
 export declare const LeadGateSuccessFeatureItem: FC<LeadGateSuccessFeatureItemProps>;
 
 export declare interface LeadGateSuccessFeatureItemProps {
-    icon?: ReactNode;
     title: string;
     description: string;
+    icon?: LeadGateMediaContent | null;
 }
 
 export declare const LeadGateSuccessModal: FC<LeadGateSuccessModalProps>;
 
 export declare interface LeadGateSuccessModalProps {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    title: string;
+    closeLeadGateLabel: string;
     subtitle: string;
     featureItems: LeadGateSuccessFeatureItemProps[];
     ctaLabel: string;
     footer: string;
-    illustration: ReactNode;
+    headerImage: LeadGateMediaContent | null;
     onCtaClick?: () => void;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-contracts-ui",
-  "version": "0.181.2",
+  "version": "0.182.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",