@npm_leadtech/legal-contracts-ui 0.122.2 → 0.122.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,10 +4,10 @@ import { HeroSection as n } from "./HeroSection.js";
4
4
  import { MoreTemplatesSection as f } from "./MoreTemplatesSection.js";
5
5
  import { ProcessSection as l } from "./ProcessSection.js";
6
6
  import { CategoriesSection as S } from "./CategoriesSection.js";
7
- import { RatafiaSection as x } from "./RatafiaSection.js";
8
- import { TrustSection as T } from "./TrustSection.js";
9
- import { FaqTeaserSection as b } from "./FaqTeaserSection.js";
10
- import { BlogSection as g } from "./BlogSection.js";
7
+ import { TrustSection as x } from "./TrustSection.js";
8
+ import { FaqTeaserSection as T } from "./FaqTeaserSection.js";
9
+ import { BlogSection as b } from "./BlogSection.js";
10
+ import { RatafiaSection as g } from "./RatafiaSection.js";
11
11
  const M = ({
12
12
  hero: t,
13
13
  moreTemplates: m,
@@ -22,10 +22,10 @@ const M = ({
22
22
  /* @__PURE__ */ o(f, { ...m }),
23
23
  /* @__PURE__ */ o(l, { ...e }),
24
24
  r && /* @__PURE__ */ o(S, { ...r }),
25
- /* @__PURE__ */ o(x, { ...i }),
26
- /* @__PURE__ */ o(T, { ...p }),
27
- /* @__PURE__ */ o(b, { ...s }),
28
- /* @__PURE__ */ o(g, { className: "pt-10 pb-12 lg:pb-14", ...a })
25
+ /* @__PURE__ */ o(g, { ...i }),
26
+ /* @__PURE__ */ o(x, { ...p }),
27
+ /* @__PURE__ */ o(T, { ...s }),
28
+ /* @__PURE__ */ o(b, { className: "pt-10 pb-12 lg:pb-14", ...a })
29
29
  ] });
30
30
  export {
31
31
  M as HomeTemplate
@@ -1,5 +1,15 @@
1
1
  import { FC } from 'react';
2
2
 
3
+ export declare type HowItWorksExamplesProps = {
4
+ eyebrow: string;
5
+ title: string;
6
+ rows: {
7
+ label: string;
8
+ value: string;
9
+ }[];
10
+ footer: string;
11
+ };
12
+
3
13
  export declare type HowItWorksHeroBullet = {
4
14
  id: string;
5
15
  strong: string;
@@ -18,14 +28,19 @@ export declare type HowItWorksProcessStep = {
18
28
  id: string;
19
29
  title: string;
20
30
  bodyMarkdown: string;
31
+ imageUrl: string | null;
32
+ imageAlt: string;
33
+ background: 'bg-white' | 'bg-neutral-25';
34
+ reverse?: boolean;
35
+ imageFirstOnMobile?: boolean;
21
36
  };
22
37
 
23
38
  export declare const HowItWorksTemplate: FC<HowItWorksTemplateProps>;
24
39
 
25
40
  export declare interface HowItWorksTemplateProps {
26
41
  hero: {
27
- jumbotronEyebrow: string;
28
- jumbotronHeadline: string;
42
+ eyebrow: string;
43
+ title: string;
29
44
  imageUrl: string | null;
30
45
  imageAlt: string;
31
46
  imagePriority?: boolean;
@@ -37,16 +52,10 @@ export declare interface HowItWorksTemplateProps {
37
52
  label: string;
38
53
  };
39
54
  };
40
- processSteps: {
41
- sectionTitle: string;
42
- steps: HowItWorksProcessStep[];
43
- imageUrl: string | null;
44
- imageAlt: string;
45
- };
55
+ processSteps: HowItWorksProcessStep[];
46
56
  lawGenius: {
47
- sectionTitle: string;
57
+ title: string;
48
58
  contentMarkdown: string;
49
- descriptionMarkdown: string;
50
59
  steps: HowItWorksLawGeniusStep[];
51
60
  belowStepsMarkdown: string;
52
61
  imageUrl: string | null;
@@ -55,10 +64,10 @@ export declare interface HowItWorksTemplateProps {
55
64
  href: string;
56
65
  label: string;
57
66
  };
67
+ sectionClassName?: string;
58
68
  };
59
69
  resources: {
60
- sectionTitle: string;
61
- supportTitle: string;
70
+ examples: HowItWorksExamplesProps;
62
71
  supportBodyMarkdown: string;
63
72
  imageUrl: string | null;
64
73
  imageAlt: string;
@@ -67,13 +76,5 @@ export declare interface HowItWorksTemplateProps {
67
76
  label: string;
68
77
  };
69
78
  };
70
- relatedCategories?: {
71
- title: string;
72
- items: {
73
- id: string;
74
- name: string;
75
- href: string;
76
- }[];
77
- };
78
79
  }
79
80
 
@@ -1,98 +1,144 @@
1
- import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
- import { howItWorksResourcesSupportBodyClassName as g } from "./HowItWorksTemplateTokens.js";
3
- import { HeroImageShell as f } from "./HeroImageShell.js";
4
- import { StepImageShell as N } from "./StepImageShell.js";
5
- import { HowItWorksLawGeniusSection as b } from "./HowItWorksLawGeniusSection.js";
6
- import { LawGeniusStepCard as v } from "./LawGeniusStepCard.js";
7
- import { ResourcesImageShell as u } from "./ResourcesImageShell.js";
8
- import { Jumbotron2 as y } from "./Jumbotron2.js";
9
- import { Markdown as n } from "./Markdown.js";
10
- import { LinkWrapper as o } from "./LinkWrapper.js";
11
- import { TwoColumnSection as s } from "./TwoColumnSection.js";
12
- import { IntroSection as k } from "./IntroSection.js";
13
- const B = ({
14
- hero: a,
15
- processSteps: m,
16
- lawGenius: l,
17
- resources: r,
18
- relatedCategories: c = { title: "", items: [] }
19
- }) => {
20
- const d = a.jumbotronHeadline.trim(), h = a.introMarkdown.trim().length > 0, p = a.closingMarkdown.trim().length > 0, x = r.supportBodyMarkdown.trim().length > 0;
21
- return /* @__PURE__ */ i("div", { className: "bg-pampas", children: [
22
- /* @__PURE__ */ e(y, { title: a.jumbotronEyebrow, subtitle: d.length > 0 ? d : void 0, children: /* @__PURE__ */ i("div", { className: "mx-auto max-w-6xl", children: [
23
- h && /* @__PURE__ */ e("div", { className: "mb-8 text-center", children: /* @__PURE__ */ e(n, { variant: "legal", content: a.introMarkdown }) }),
24
- /* @__PURE__ */ e("div", { className: "hero-image mb-8 flex justify-center", children: /* @__PURE__ */ e(f, { src: a.imageUrl, alt: a.imageAlt, priority: a.imagePriority }) }),
25
- /* @__PURE__ */ e("div", { className: "hero-bullets grid gap-6 md:grid-cols-2 md:gap-10", children: a.bullets.map((t) => /* @__PURE__ */ i("div", { className: "flex items-start gap-3", children: [
26
- /* @__PURE__ */ e("span", { className: "bg-primary-green mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full", "aria-hidden": !0 }),
27
- /* @__PURE__ */ e("div", { className: "text-small text-neutral-800", children: /* @__PURE__ */ e(n, { variant: "legal", content: `**${t.strong}** ${t.text}` }) })
28
- ] }, t.id)) }),
29
- p && /* @__PURE__ */ e("div", { className: "mt-8", children: /* @__PURE__ */ e("div", { className: "text-center text-base leading-relaxed", children: /* @__PURE__ */ e(n, { variant: "legal", content: a.closingMarkdown }) }) }),
30
- /* @__PURE__ */ e("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ e(o, { size: "large", variant: "primary-green", children: /* @__PURE__ */ e("a", { href: a.cta.href, children: a.cta.label }) }) })
31
- ] }) }),
32
- /* @__PURE__ */ e("section", { className: "px-4 py-12 md:px-8 lg:py-16", children: /* @__PURE__ */ i("div", { className: "mx-auto max-w-6xl", children: [
33
- /* @__PURE__ */ e("h2", { className: "text-h2 mb-8 text-center font-bold text-neutral-900", children: m.sectionTitle }),
1
+ import { jsx as e, jsxs as r, Fragment as w } from "react/jsx-runtime";
2
+ import { clsx as N } from "clsx";
3
+ import { howItWorksLawGeniusCtaLinkClassName as b, howItWorksHeroCtaLinkClassName as k, howItWorksLawGeniusBelowStepsMarkdownClassName as y, howItWorksResourcesSupportBodyClassName as C, howItWorksResourcesCtaLinkClassName as v } from "./HowItWorksTemplateTokens.js";
4
+ import { HeroImageShell as S } from "./HeroImageShell.js";
5
+ import { RatafiaSection as M } from "./RatafiaSection.js";
6
+ import { LawGeniusStepCard as I } from "./LawGeniusStepCard.js";
7
+ import { ResourcesImageShell as L } from "./ResourcesImageShell.js";
8
+ import { StepImageShell as W } from "./StepImageShell.js";
9
+ import { Button as o } from "./Button.js";
10
+ import { IntroSection as A } from "./IntroSection.js";
11
+ import { Markdown as i } from "./Markdown.js";
12
+ import { TwoColumnSection as c } from "./TwoColumnSection.js";
13
+ import { LawGeniusImageShell as B } from "./LawGeniusImageShell.js";
14
+ const U = (t) => {
15
+ const m = /* @__PURE__ */ r("div", { className: "min-w-0 space-y-4 text-neutral-800 lg:basis-[47%]", children: [
16
+ /* @__PURE__ */ e("h2", { className: "font-lora text-[2.05rem] leading-[1.15] font-bold text-neutral-800", children: t.title }),
17
+ /* @__PURE__ */ e("div", { className: "text-small space-y-3 text-neutral-700", children: /* @__PURE__ */ e(i, { variant: "legal", content: t.bodyMarkdown }) })
18
+ ] }), a = /* @__PURE__ */ e("div", { className: "w-full shrink-0 lg:w-1/2 lg:max-w-[50%]", children: /* @__PURE__ */ e(W, { src: t.imageUrl, alt: t.imageAlt }) });
19
+ return t.reverse ? { firstColumn: a, secondColumn: m } : { firstColumn: m, secondColumn: a };
20
+ }, J = ({ hero: t, processSteps: m, lawGenius: a, resources: s }) => {
21
+ const d = t.introMarkdown.trim().length > 0, p = t.closingMarkdown.trim().length > 0, x = s.supportBodyMarkdown.trim().length > 0, g = a.belowStepsMarkdown.trim().length > 0, { examples: n } = s, f = /* @__PURE__ */ e(
22
+ o,
23
+ {
24
+ size: "large",
25
+ variant: "primary-green",
26
+ className: "text-medium w-full justify-center !rounded-md font-bold lg:w-auto",
27
+ children: /* @__PURE__ */ e("a", { href: a.cta.href, className: b, children: a.cta.label })
28
+ }
29
+ );
30
+ return /* @__PURE__ */ r("main", { className: "flex w-full max-w-full min-w-0 flex-1 flex-col", children: [
31
+ /* @__PURE__ */ e("section", { className: "bg-primary-50 lg:px-ds-10xl px-6 pt-4 pb-12 sm:px-10", children: /* @__PURE__ */ r("div", { className: "mx-auto flex max-w-6xl flex-col gap-12", children: [
32
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
33
+ /* @__PURE__ */ r("div", { className: "mx-auto inline-flex max-w-full flex-col items-center gap-2", children: [
34
+ /* @__PURE__ */ e("p", { className: "text-small font-semibold tracking-[0.3em] whitespace-nowrap text-neutral-600 uppercase", children: t.eyebrow }),
35
+ /* @__PURE__ */ e("span", { className: "h-px w-full max-w-[7.5rem] min-w-[5.5rem] shrink-0 bg-neutral-400", "aria-hidden": !0 })
36
+ ] }),
37
+ /* @__PURE__ */ e("h1", { className: "font-lora mx-auto mt-12 max-w-[48rem] text-4xl leading-tight font-bold tracking-tight text-neutral-800 sm:text-5xl sm:leading-tight", children: t.title })
38
+ ] }),
34
39
  /* @__PURE__ */ e(
35
- s,
40
+ A,
36
41
  {
37
- firstColumn: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: m.steps.map((t) => /* @__PURE__ */ i("div", { className: "flex items-start gap-4", children: [
38
- /* @__PURE__ */ e("span", { className: "text-h2 font-bold text-neutral-300", children: t.id }),
39
- /* @__PURE__ */ i("div", { children: [
40
- /* @__PURE__ */ e("h3", { className: "text-h3 mb-2 font-bold text-neutral-900", children: t.title }),
41
- /* @__PURE__ */ e("div", { className: "text-small text-neutral-800", children: /* @__PURE__ */ e(n, { variant: "legal", content: t.bodyMarkdown }) })
42
- ] })
43
- ] }, t.id)) }),
44
- secondColumn: /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(N, { src: m.imageUrl, alt: m.imageAlt }) })
42
+ className: "bg-transparent",
43
+ containerClassName: "w-full !max-w-none flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-stretch",
44
+ image: /* @__PURE__ */ e(S, { src: t.imageUrl, alt: t.imageAlt, priority: t.imagePriority }),
45
+ cta: {
46
+ size: "large",
47
+ variant: "primary-green",
48
+ className: "text-medium mt-8 w-full justify-center font-bold",
49
+ children: /* @__PURE__ */ e("a", { href: t.cta.href, className: k, children: t.cta.label })
50
+ },
51
+ children: /* @__PURE__ */ r("div", { className: "text-medium space-y-4 [&_ul]:my-8 [&_ul]:list-disc [&_ul]:pl-[1.2rem]", children: [
52
+ d && /* @__PURE__ */ e(i, { variant: "legal", content: t.introMarkdown }),
53
+ /* @__PURE__ */ e("ul", { className: "text-medium space-y-3", children: t.bullets.map((l) => /* @__PURE__ */ r("li", { className: "flex items-start gap-2", children: [
54
+ /* @__PURE__ */ e("span", { className: "bg-primary-600 mt-1 h-2.5 w-2.5", "aria-hidden": !0 }),
55
+ /* @__PURE__ */ r("span", { children: [
56
+ /* @__PURE__ */ r("strong", { children: [
57
+ l.strong,
58
+ " "
59
+ ] }),
60
+ l.text
61
+ ] })
62
+ ] }, l.id)) }),
63
+ p && /* @__PURE__ */ e(i, { variant: "legal", content: t.closingMarkdown })
64
+ ] })
45
65
  }
46
66
  )
47
67
  ] }) }),
68
+ m.map((l) => {
69
+ const { firstColumn: u, secondColumn: h } = U(l);
70
+ return /* @__PURE__ */ e(
71
+ c,
72
+ {
73
+ className: `${l.background} lg:px-ds-10xl px-6 py-12 sm:px-10`,
74
+ containerClassName: N(
75
+ "!mx-auto !w-full !max-w-6xl !px-0 !py-0 !gap-8 md:!gap-10 lg:items-start",
76
+ l.imageFirstOnMobile ? "!flex-col-reverse md:!flex-row" : "!flex-col md:!flex-row"
77
+ ),
78
+ firstColumn: u,
79
+ secondColumn: h
80
+ },
81
+ l.id
82
+ );
83
+ }),
48
84
  /* @__PURE__ */ e(
49
- b,
85
+ M,
50
86
  {
51
- sectionTitle: l.sectionTitle,
52
- contentMarkdown: l.contentMarkdown,
53
- descriptionMarkdown: l.descriptionMarkdown,
54
- steps: l.steps.map((t) => /* @__PURE__ */ e(
55
- v,
87
+ title: a.title,
88
+ content: a.contentMarkdown,
89
+ stepsSlot: /* @__PURE__ */ e(w, { children: a.steps.map((l) => /* @__PURE__ */ e(
90
+ I,
56
91
  {
57
- title: t.title,
58
- descriptionMarkdown: t.descriptionMarkdown,
59
- iconUrl: t.iconUrl,
60
- iconAlt: t.iconAlt ?? ""
92
+ title: l.title,
93
+ descriptionMarkdown: l.descriptionMarkdown,
94
+ iconUrl: l.iconUrl,
95
+ iconAlt: l.iconAlt ?? ""
61
96
  },
62
- t.id
63
- )),
64
- belowStepsMarkdown: l.belowStepsMarkdown,
65
- imageUrl: l.imageUrl,
66
- imageAlt: l.imageAlt,
67
- cta: /* @__PURE__ */ e(o, { size: "large", variant: "primary-green", children: /* @__PURE__ */ e("a", { href: l.cta.href, children: l.cta.label }) })
97
+ l.id
98
+ )) }),
99
+ belowStepsSlot: g ? /* @__PURE__ */ e(
100
+ i,
101
+ {
102
+ variant: "ratafia",
103
+ content: a.belowStepsMarkdown,
104
+ className: y
105
+ }
106
+ ) : null,
107
+ cta: f,
108
+ skipCtaWrapper: !0,
109
+ image: /* @__PURE__ */ e(B, { src: a.imageUrl, alt: a.imageAlt }),
110
+ sectionClassName: a.sectionClassName ?? "bg-neutral-25 px-6 pt-16 pb-12 sm:px-10 lg:px-ds-10xl"
68
111
  }
69
112
  ),
70
- /* @__PURE__ */ e("section", { className: "px-4 py-12 md:px-8 lg:py-16", children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-6xl", children: /* @__PURE__ */ e(
71
- s,
72
- {
73
- firstColumn: /* @__PURE__ */ i("div", { className: "flex flex-col justify-center", children: [
74
- /* @__PURE__ */ e("h2", { className: "text-h2 mb-4 font-bold text-neutral-900", children: r.sectionTitle }),
75
- /* @__PURE__ */ e("h3", { className: "text-h3 mb-4 font-bold text-neutral-900", children: r.supportTitle }),
76
- x && /* @__PURE__ */ e("div", { className: `mb-6 ${g}`, children: /* @__PURE__ */ e(n, { variant: "legal", content: r.supportBodyMarkdown }) }),
77
- /* @__PURE__ */ e(o, { size: "large", variant: "primary-green", children: /* @__PURE__ */ e("a", { href: r.cta.href, children: r.cta.label }) })
78
- ] }),
79
- secondColumn: /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(u, { src: r.imageUrl, alt: r.imageAlt }) })
80
- }
81
- ) }) }),
82
- /* @__PURE__ */ i(
83
- k,
113
+ /* @__PURE__ */ e(
114
+ c,
84
115
  {
85
- className: "bg-pampas py-12 md:py-16",
86
- containerClassName: "max-w-6xl mx-auto px-4 md:px-8",
87
- image: /* @__PURE__ */ e("div", { className: "text-center text-lg text-neutral-600", children: "[Categorías relacionadas placeholder]" }),
88
- children: [
89
- /* @__PURE__ */ e("h2", { className: "text-h2 mb-6 font-bold text-neutral-900", children: c.title }),
90
- /* @__PURE__ */ e("ul", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: c.items.map((t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("a", { href: t.href, className: "text-primary-green hover:text-primary-green-dark block text-base underline", children: t.name }) }, t.id)) })
91
- ]
116
+ className: "bg-neutral-25 lg:px-ds-10xl px-6 py-12 sm:px-10",
117
+ containerClassName: "!mx-auto !w-full !max-w-6xl !items-start !gap-8 !px-0 !py-0 md:!gap-10 lg:!items-stretch",
118
+ firstColumn: /* @__PURE__ */ e("div", { className: "w-full min-w-0 shrink-0 rounded-2xl border border-neutral-100 bg-white p-4 lg:basis-[48%] lg:p-5", children: /* @__PURE__ */ e(L, { src: s.imageUrl, alt: s.imageAlt }) }),
119
+ secondColumn: /* @__PURE__ */ r("div", { className: "w-full space-y-4 lg:basis-[52%]", children: [
120
+ n.eyebrow && /* @__PURE__ */ e("p", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: n.eyebrow }),
121
+ n.title && /* @__PURE__ */ e("h3", { className: "font-lora text-[2rem] leading-[1.2] font-bold text-neutral-800", children: n.title }),
122
+ x && /* @__PURE__ */ e("div", { className: `text-small space-y-3 text-neutral-700 ${C}`, children: /* @__PURE__ */ e(i, { variant: "legal", content: s.supportBodyMarkdown }) }),
123
+ n.rows.length > 0 && /* @__PURE__ */ e("dl", { className: "text-small space-y-2 text-neutral-700", children: n.rows.map((l) => /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-x-2", children: [
124
+ /* @__PURE__ */ e("dt", { className: "font-semibold", children: l.label }),
125
+ /* @__PURE__ */ e("dd", { children: l.value })
126
+ ] }, `${l.label}-${l.value}`)) }),
127
+ n.footer && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: n.footer }),
128
+ /* @__PURE__ */ e(
129
+ o,
130
+ {
131
+ size: "small",
132
+ variant: "primary-green",
133
+ className: "text-small inline-flex w-auto justify-center font-bold",
134
+ children: /* @__PURE__ */ e("a", { href: s.cta.href, className: v, children: s.cta.label })
135
+ }
136
+ )
137
+ ] })
92
138
  }
93
139
  )
94
140
  ] });
95
141
  };
96
142
  export {
97
- B as HowItWorksTemplate
143
+ J as HowItWorksTemplate
98
144
  };