@npm_leadtech/legal-contracts-ui 0.122.0 → 0.122.2

package/dist/components/AboutUsTemplate.d.ts

@@ -79,10 +79,10 @@ export interface IntroSectionProps {
 }
 
 export interface Jumbotron2Props {
-    title: string;
+    title: ReactNode;
     subtitle?: string;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     variant?: 'default' | 'contact';
 }
 

package/dist/components/ContactUsTemplate.d.ts

@@ -101,10 +101,10 @@ export declare interface ContactUsTemplateProps {
 export type IconPosition = 'left' | 'right' | 'top';
 
 export interface Jumbotron2Props {
-    title: string;
+    title: ReactNode;
     subtitle?: string;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     variant?: 'default' | 'contact';
 }
 

package/dist/components/FaqsTemplate.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { ReactNode } from 'react';
 
 export interface AsideNavMenuProps {
     menuItems: Array<{
@@ -33,10 +34,10 @@ export declare interface FaqsTemplateProps {
 }
 
 export interface Jumbotron2Props {
-    title: string;
+    title: ReactNode;
     subtitle?: string;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     variant?: 'default' | 'contact';
 }
 

package/dist/components/HeroImageShell.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+
+export declare const HeroImageShell: FC<HeroImageShellProps>;
+
+export declare interface HeroImageShellProps {
+    src: string | null;
+    alt: string;
+    priority?: boolean;
+}
+

package/dist/components/HeroImageShell.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+const r = { w: 1200, h: 900 }, h = "relative aspect-[4/3] w-full overflow-hidden rounded-2xl bg-neutral-100 shadow-[0_25px_60px_rgba(3,42,56,0.12)]", t = "relative w-full overflow-hidden rounded-2xl shadow-[0_25px_60px_rgba(3,42,56,0.12)]", a = ({ empty: l, children: o }) => /* @__PURE__ */ e("div", { className: l ? h : t, "aria-hidden": l ? !0 : void 0, children: l ? null : o }), n = ({ src: l, alt: o, priority: d }) => l ? /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+  "img",
+  {
+    src: l,
+    alt: o,
+    width: r.w,
+    height: r.h,
+    className: "h-auto w-full max-w-full object-cover",
+    ...d ? { loading: "eager" } : { loading: "lazy" }
+  }
+) }) : /* @__PURE__ */ e(a, { empty: !0 });
+export {
+  n as HeroImageShell
+};

package/dist/components/HowItWorksLawGeniusSection.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const HowItWorksLawGeniusSection: FC<HowItWorksLawGeniusSectionProps>;
+
+export declare interface HowItWorksLawGeniusSectionProps {
+    sectionTitle: string;
+    contentMarkdown: string;
+    descriptionMarkdown: string;
+    steps: ReactNode;
+    belowStepsMarkdown: string;
+    cta: ReactNode;
+    imageUrl: string | null;
+    imageAlt: string;
+}
+

package/dist/components/HowItWorksLawGeniusSection.js

@@ -0,0 +1,41 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { howItWorksLawGeniusBelowStepsMarkdownClassName as h } from "./HowItWorksTemplateTokens.js";
+import { LawGeniusImageShell as p } from "./LawGeniusImageShell.js";
+import { Markdown as t } from "./Markdown.js";
+const v = ({
+  sectionTitle: s,
+  contentMarkdown: m,
+  descriptionMarkdown: a,
+  steps: r,
+  belowStepsMarkdown: i,
+  cta: n,
+  imageUrl: c,
+  imageAlt: x
+}) => {
+  const o = a.trim().length > 0, d = i.trim().length > 0;
+  return /* @__PURE__ */ e("section", { className: "bg-neutral-25 lg:px-ds-10xl px-6 pt-16 pb-12 sm:px-10", children: /* @__PURE__ */ e("div", { className: "bg-law-genius-section mx-auto w-full max-w-6xl rounded-3xl px-8 pt-16 pb-8 text-white shadow-[0_25px_80px_rgba(3,42,56,0.35)] sm:px-10 sm:pt-16 sm:pb-10", children: /* @__PURE__ */ l("div", { className: "flex w-full flex-col gap-8 lg:gap-10", children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-4 text-center text-white", children: [
+      /* @__PURE__ */ e("h2", { className: "lg:text-super-large text-3xl font-bold lg:leading-tight", children: s }),
+      /* @__PURE__ */ e("div", { className: "[&_p]:text-medium [&_p]:text-white/80 [&_p:last-child]:mb-0", children: /* @__PURE__ */ e(t, { variant: "ratafia", content: m }) }),
+      o && /* @__PURE__ */ e("div", { className: "[&_p]:text-medium [&_p]:text-white/80 [&_p:last-child]:mb-0", children: /* @__PURE__ */ e(t, { variant: "ratafia", content: a }) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex w-full flex-col gap-8 lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(0,1.05fr)] lg:items-stretch lg:gap-10", children: [
+      /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-col gap-6", children: [
+        r,
+        d && /* @__PURE__ */ e(
+          t,
+          {
+            variant: "ratafia",
+            content: i,
+            className: h
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "w-full lg:w-fit", children: n })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "relative z-10 mx-auto flex min-h-0 w-full max-w-77 shrink-0 items-center justify-center overflow-hidden rounded-lg md:mx-0 md:max-w-none", children: /* @__PURE__ */ e(p, { src: c, alt: x }) })
+    ] })
+  ] }) }) });
+};
+export {
+  v as HowItWorksLawGeniusSection
+};

package/dist/components/HowItWorksTemplate.d.ts

@@ -1,27 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
 import { FC } from 'react';
-import { ReactNode } from 'react';
-
-export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
-    children: ReactNode;
-    size?: ButtonSize;
-    variant?: ResponsiveButtonVariant;
-    iconPosition?: IconPosition;
-}
-
-export type ButtonSize = 'small' | 'default' | 'large';
-
-export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
-
-export declare type HowItWorksExamplesProps = {
-    eyebrow: string;
-    title: string;
-    rows: {
-        label: string;
-        value: string;
-    }[];
-    footer: string;
-};
 
 export declare type HowItWorksHeroBullet = {
     id: string;
@@ -29,68 +6,74 @@ export declare type HowItWorksHeroBullet = {
     text: string;
 };
 
-export declare const howItWorksHeroCtaLinkClassName = "font-semibold text-white";
-
-export declare const howItWorksLawGeniusBelowStepsMarkdownClassName = "text-medium";
-
-export declare const howItWorksLawGeniusCtaLinkClassName = "font-semibold text-white";
-
 export declare type HowItWorksLawGeniusStep = {
     id: string;
     title: string;
-    description: ReactNode;
-    icon: ReactNode;
+    descriptionMarkdown: string;
+    iconUrl: string | null;
+    iconAlt?: string;
 };
 
 export declare type HowItWorksProcessStep = {
     id: string;
     title: string;
-    body: ReactNode;
-    image: ReactNode;
-    background: 'bg-white' | 'bg-neutral-25';
-    reverse?: boolean;
-    imageFirstOnMobile?: boolean;
+    bodyMarkdown: string;
 };
 
-export declare const howItWorksResourcesCtaLinkClassName = "font-semibold";
-
 export declare const HowItWorksTemplate: FC<HowItWorksTemplateProps>;
 
 export declare interface HowItWorksTemplateProps {
     hero: {
-        eyebrow: string;
-        title: string;
-        image: ReactNode;
-        intro: ReactNode;
+        jumbotronEyebrow: string;
+        jumbotronHeadline: string;
+        imageUrl: string | null;
+        imageAlt: string;
+        imagePriority?: boolean;
+        introMarkdown: string;
         bullets: HowItWorksHeroBullet[];
-        closing: ReactNode;
-        cta: ButtonProps;
+        closingMarkdown: string;
+        cta: {
+            href: string;
+            label: string;
+        };
+    };
+    processSteps: {
+        sectionTitle: string;
+        steps: HowItWorksProcessStep[];
+        imageUrl: string | null;
+        imageAlt: string;
     };
-    processSteps: HowItWorksProcessStep[];
     lawGenius: {
-        title: string;
-        content: string;
+        sectionTitle: string;
+        contentMarkdown: string;
+        descriptionMarkdown: string;
         steps: HowItWorksLawGeniusStep[];
-        belowStepsSlot: ReactNode;
-        cta: ButtonProps;
-        image: ReactNode;
-        sectionClassName?: string;
+        belowStepsMarkdown: string;
+        imageUrl: string | null;
+        imageAlt: string;
+        cta: {
+            href: string;
+            label: string;
+        };
     };
     resources: {
-        examples: HowItWorksExamplesProps;
-        image: ReactNode;
-        supportBody: ReactNode;
-        cta: ButtonProps;
+        sectionTitle: string;
+        supportTitle: string;
+        supportBodyMarkdown: string;
+        imageUrl: string | null;
+        imageAlt: string;
+        cta: {
+            href: string;
+            label: string;
+        };
+    };
+    relatedCategories?: {
+        title: string;
+        items: {
+            id: string;
+            name: string;
+            href: string;
+        }[];
     };
 }
-
-export type IconPosition = 'left' | 'right' | 'top';
-
-export type ResponsiveButtonVariant = ButtonVariant | {
-    initial?: ButtonVariant;
-    sm?: ButtonVariant;
-    md?: ButtonVariant;
-    lg?: ButtonVariant;
-    xl?: ButtonVariant;
-};
 

package/dist/components/HowItWorksTemplate.js

@@ -1,124 +1,98 @@
-import { jsxs as a, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { clsx as u } from "clsx";
-import { Button as r } from "./Button.js";
-import { IntroSection as g } from "./IntroSection.js";
-import { RatafiaSection as f } from "./RatafiaSection.js";
-import { TwoColumnSection as o } from "./TwoColumnSection.js";
-const S = "font-semibold text-white", _ = "font-semibold text-white", j = "font-semibold", I = "text-medium", h = ({ title: t, description: n, icon: l }) => /* @__PURE__ */ a("div", { className: "bg-neutral-25 flex flex-col gap-2 rounded-sm p-6", children: [
-  /* @__PURE__ */ a("div", { className: "flex w-full items-start gap-2", children: [
-    /* @__PURE__ */ e("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center [&_img]:h-5 [&_img]:w-5 [&_img]:object-contain [&_svg]:h-5 [&_svg]:w-5", children: l }),
-    /* @__PURE__ */ e("p", { className: "text-big min-w-0 flex-1 font-bold tracking-tight text-neutral-800", children: t })
-  ] }),
-  /* @__PURE__ */ e("div", { className: "text-small w-full min-w-0 tracking-tight text-neutral-800 [&_p:last-child]:mb-0 [&_strong]:font-bold", children: n })
-] }), w = (t) => {
-  const n = /* @__PURE__ */ a("div", { className: "min-w-0 space-y-4 text-neutral-800 lg:basis-[47%]", children: [
-    /* @__PURE__ */ e("h2", { className: "font-lora text-[2.05rem] leading-[1.15] font-bold text-neutral-800", children: t.title }),
-    /* @__PURE__ */ e("div", { className: "text-small space-y-3 text-neutral-700", children: t.body })
-  ] }), l = /* @__PURE__ */ e("div", { className: "w-full shrink-0 lg:w-1/2 lg:max-w-[50%]", children: t.image });
-  return t.reverse ? { firstColumn: l, secondColumn: n } : { firstColumn: n, secondColumn: l };
-}, L = ({ hero: t, processSteps: n, lawGenius: l, resources: m }) => {
-  const c = {
-    size: "large",
-    variant: "primary-green",
-    className: "!rounded-md text-medium w-full justify-center font-bold lg:w-auto",
-    ...l.cta
-  }, { examples: i } = m;
-  return /* @__PURE__ */ a("main", { className: "flex w-full max-w-full min-w-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ e("section", { className: "bg-primary-50 lg:px-ds-10xl px-6 pt-4 pb-12 sm:px-10", children: /* @__PURE__ */ a("div", { className: "mx-auto flex max-w-6xl flex-col gap-12", children: [
-      /* @__PURE__ */ a("div", { className: "text-center", children: [
-        /* @__PURE__ */ a("div", { className: "mx-auto inline-flex max-w-full flex-col items-center gap-2", children: [
-          /* @__PURE__ */ e("p", { className: "text-small font-semibold tracking-[0.3em] whitespace-nowrap text-neutral-600 uppercase", children: t.eyebrow }),
-          /* @__PURE__ */ e("span", { className: "h-px w-full max-w-[7.5rem] min-w-[5.5rem] shrink-0 bg-neutral-400", "aria-hidden": !0 })
-        ] }),
-        /* @__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 })
-      ] }),
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { howItWorksResourcesSupportBodyClassName as g } from "./HowItWorksTemplateTokens.js";
+import { HeroImageShell as f } from "./HeroImageShell.js";
+import { StepImageShell as N } from "./StepImageShell.js";
+import { HowItWorksLawGeniusSection as b } from "./HowItWorksLawGeniusSection.js";
+import { LawGeniusStepCard as v } from "./LawGeniusStepCard.js";
+import { ResourcesImageShell as u } from "./ResourcesImageShell.js";
+import { Jumbotron2 as y } from "./Jumbotron2.js";
+import { Markdown as n } from "./Markdown.js";
+import { LinkWrapper as o } from "./LinkWrapper.js";
+import { TwoColumnSection as s } from "./TwoColumnSection.js";
+import { IntroSection as k } from "./IntroSection.js";
+const B = ({
+  hero: a,
+  processSteps: m,
+  lawGenius: l,
+  resources: r,
+  relatedCategories: c = { title: "", items: [] }
+}) => {
+  const d = a.jumbotronHeadline.trim(), h = a.introMarkdown.trim().length > 0, p = a.closingMarkdown.trim().length > 0, x = r.supportBodyMarkdown.trim().length > 0;
+  return /* @__PURE__ */ i("div", { className: "bg-pampas", children: [
+    /* @__PURE__ */ e(y, { title: a.jumbotronEyebrow, subtitle: d.length > 0 ? d : void 0, children: /* @__PURE__ */ i("div", { className: "mx-auto max-w-6xl", children: [
+      h && /* @__PURE__ */ e("div", { className: "mb-8 text-center", children: /* @__PURE__ */ e(n, { variant: "legal", content: a.introMarkdown }) }),
+      /* @__PURE__ */ e("div", { className: "hero-image mb-8 flex justify-center", children: /* @__PURE__ */ e(f, { src: a.imageUrl, alt: a.imageAlt, priority: a.imagePriority }) }),
+      /* @__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: [
+        /* @__PURE__ */ e("span", { className: "bg-primary-green mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full", "aria-hidden": !0 }),
+        /* @__PURE__ */ e("div", { className: "text-small text-neutral-800", children: /* @__PURE__ */ e(n, { variant: "legal", content: `**${t.strong}** ${t.text}` }) })
+      ] }, t.id)) }),
+      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 }) }) }),
+      /* @__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 }) }) })
+    ] }) }),
+    /* @__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: [
+      /* @__PURE__ */ e("h2", { className: "text-h2 mb-8 text-center font-bold text-neutral-900", children: m.sectionTitle }),
       /* @__PURE__ */ e(
-        g,
+        s,
         {
-          className: "bg-transparent",
-          containerClassName: "w-full !max-w-none flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-stretch",
-          image: t.image,
-          cta: {
-            size: "large",
-            variant: "primary-green",
-            className: "text-medium mt-8 w-full justify-center font-bold",
-            ...t.cta
-          },
-          children: /* @__PURE__ */ a("div", { className: "text-medium space-y-4 [&_ul]:my-8 [&_ul]:list-disc [&_ul]:pl-[1.2rem]", children: [
-            t.intro,
-            /* @__PURE__ */ e("ul", { className: "text-medium space-y-3", children: t.bullets.map((s) => /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ e("span", { className: "bg-primary-600 mt-1 h-2.5 w-2.5", "aria-hidden": !0 }),
-              /* @__PURE__ */ a("span", { children: [
-                /* @__PURE__ */ a("strong", { children: [
-                  s.strong,
-                  " "
-                ] }),
-                s.text
-              ] })
-            ] }, s.id)) }),
-            t.closing
-          ] })
+          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: [
+            /* @__PURE__ */ e("span", { className: "text-h2 font-bold text-neutral-300", children: t.id }),
+            /* @__PURE__ */ i("div", { children: [
+              /* @__PURE__ */ e("h3", { className: "text-h3 mb-2 font-bold text-neutral-900", children: t.title }),
+              /* @__PURE__ */ e("div", { className: "text-small text-neutral-800", children: /* @__PURE__ */ e(n, { variant: "legal", content: t.bodyMarkdown }) })
+            ] })
+          ] }, t.id)) }),
+          secondColumn: /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(N, { src: m.imageUrl, alt: m.imageAlt }) })
         }
       )
     ] }) }),
-    n.map((s) => {
-      const { firstColumn: d, secondColumn: x } = w(s);
-      return /* @__PURE__ */ e(
-        o,
-        {
-          className: `${s.background} lg:px-ds-10xl px-6 py-12 sm:px-10`,
-          containerClassName: u(
-            "!mx-auto !w-full !max-w-6xl !px-0 !py-0 !gap-8 md:!gap-10 lg:items-start",
-            s.imageFirstOnMobile ? "!flex-col-reverse md:!flex-row" : "!flex-col md:!flex-row"
-          ),
-          firstColumn: d,
-          secondColumn: x
-        },
-        s.id
-      );
-    }),
     /* @__PURE__ */ e(
-      f,
+      b,
       {
-        title: l.title,
-        content: l.content,
-        stepsSlot: /* @__PURE__ */ e(p, { children: l.steps.map((s) => /* @__PURE__ */ e(h, { ...s }, s.id)) }),
-        belowStepsSlot: l.belowStepsSlot,
-        cta: /* @__PURE__ */ e(r, { ...c }),
-        skipCtaWrapper: !0,
-        image: l.image,
-        sectionClassName: l.sectionClassName ?? "bg-neutral-25 px-6 pb-12 pt-16 sm:px-10 lg:px-ds-10xl"
+        sectionTitle: l.sectionTitle,
+        contentMarkdown: l.contentMarkdown,
+        descriptionMarkdown: l.descriptionMarkdown,
+        steps: l.steps.map((t) => /* @__PURE__ */ e(
+          v,
+          {
+            title: t.title,
+            descriptionMarkdown: t.descriptionMarkdown,
+            iconUrl: t.iconUrl,
+            iconAlt: t.iconAlt ?? ""
+          },
+          t.id
+        )),
+        belowStepsMarkdown: l.belowStepsMarkdown,
+        imageUrl: l.imageUrl,
+        imageAlt: l.imageAlt,
+        cta: /* @__PURE__ */ e(o, { size: "large", variant: "primary-green", children: /* @__PURE__ */ e("a", { href: l.cta.href, children: l.cta.label }) })
       }
     ),
-    /* @__PURE__ */ e(
-      o,
+    /* @__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(
+      s,
+      {
+        firstColumn: /* @__PURE__ */ i("div", { className: "flex flex-col justify-center", children: [
+          /* @__PURE__ */ e("h2", { className: "text-h2 mb-4 font-bold text-neutral-900", children: r.sectionTitle }),
+          /* @__PURE__ */ e("h3", { className: "text-h3 mb-4 font-bold text-neutral-900", children: r.supportTitle }),
+          x && /* @__PURE__ */ e("div", { className: `mb-6 ${g}`, children: /* @__PURE__ */ e(n, { variant: "legal", content: r.supportBodyMarkdown }) }),
+          /* @__PURE__ */ e(o, { size: "large", variant: "primary-green", children: /* @__PURE__ */ e("a", { href: r.cta.href, children: r.cta.label }) })
+        ] }),
+        secondColumn: /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(u, { src: r.imageUrl, alt: r.imageAlt }) })
+      }
+    ) }) }),
+    /* @__PURE__ */ i(
+      k,
       {
-        className: "bg-neutral-25 lg:px-ds-10xl px-6 py-12 sm:px-10",
-        containerClassName: "!mx-auto !w-full !max-w-6xl !items-start !gap-8 !px-0 !py-0 md:!gap-10 lg:!items-stretch",
-        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: m.image }),
-        secondColumn: /* @__PURE__ */ a("div", { className: "w-full space-y-4 lg:basis-[52%]", children: [
-          i.eyebrow && /* @__PURE__ */ e("p", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: i.eyebrow }),
-          i.title && /* @__PURE__ */ e("h3", { className: "font-lora text-[2rem] leading-[1.2] font-bold text-neutral-800", children: i.title }),
-          /* @__PURE__ */ e("div", { className: "text-small space-y-3 text-neutral-700", children: m.supportBody }),
-          i.footer && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: i.footer }),
-          /* @__PURE__ */ e(
-            r,
-            {
-              size: "small",
-              variant: "primary-green",
-              className: "text-small inline-flex w-auto justify-center font-bold",
-              ...m.cta
-            }
-          )
-        ] })
+        className: "bg-pampas py-12 md:py-16",
+        containerClassName: "max-w-6xl mx-auto px-4 md:px-8",
+        image: /* @__PURE__ */ e("div", { className: "text-center text-lg text-neutral-600", children: "[Categorías relacionadas placeholder]" }),
+        children: [
+          /* @__PURE__ */ e("h2", { className: "text-h2 mb-6 font-bold text-neutral-900", children: c.title }),
+          /* @__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)) })
+        ]
       }
     )
   ] });
 };
 export {
-  L as HowItWorksTemplate,
-  S as howItWorksHeroCtaLinkClassName,
-  I as howItWorksLawGeniusBelowStepsMarkdownClassName,
-  _ as howItWorksLawGeniusCtaLinkClassName,
-  j as howItWorksResourcesCtaLinkClassName
+  B as HowItWorksTemplate
 };

package/dist/components/HowItWorksTemplateTokens.d.ts

@@ -0,0 +1,12 @@
+/** Tailwind class strings for `next/link` / markdown in How It Works Strapi mappers (consumed by legal-contracts-web). */
+export declare const howItWorksHeroCtaLinkClassName = "font-semibold text-white";
+
+export declare const howItWorksLawGeniusBelowStepsMarkdownClassName = "text-medium";
+
+export declare const howItWorksLawGeniusCtaLinkClassName = "font-semibold text-white";
+
+export declare const howItWorksResourcesCtaLinkClassName = "font-semibold";
+
+/** Support column markdown: spacing for H2 vs body */
+export declare const howItWorksResourcesSupportBodyClassName = "[&_h2]:mb-8";
+

package/dist/components/HowItWorksTemplateTokens.js

@@ -0,0 +1,8 @@
+const s = "font-semibold text-white", o = "font-semibold text-white", t = "font-semibold", e = "text-medium", a = "[&_h2]:mb-8";
+export {
+  s as howItWorksHeroCtaLinkClassName,
+  e as howItWorksLawGeniusBelowStepsMarkdownClassName,
+  o as howItWorksLawGeniusCtaLinkClassName,
+  t as howItWorksResourcesCtaLinkClassName,
+  a as howItWorksResourcesSupportBodyClassName
+};

package/dist/components/Jumbotron2.d.ts

@@ -1,12 +1,13 @@
 import { FC } from 'react';
+import { ReactNode } from 'react';
 
 export declare const Jumbotron2: FC<Jumbotron2Props>;
 
 export declare interface Jumbotron2Props {
-    title: string;
+    title: ReactNode;
     subtitle?: string;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     variant?: 'default' | 'contact';
 }
 

package/dist/components/LawGeniusImageShell.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+export declare const LawGeniusImageShell: FC<LawGeniusImageShellProps>;
+
+export declare interface LawGeniusImageShellProps {
+    src: string | null;
+    alt: string;
+}
+

package/dist/components/LawGeniusImageShell.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+const a = { w: 898, h: 1100 }, i = "aspect-[449/550]", n = "relative w-full max-w-md overflow-hidden rounded-lg", r = `${n} bg-white`, o = `${n} bg-neutral-100 ${i}`, s = ({ empty: l, children: t }) => l ? /* @__PURE__ */ e("div", { className: o, "aria-hidden": !0 }) : /* @__PURE__ */ e("div", { className: r, children: t }), h = ({ src: l, alt: t }) => l ? /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(
+  "img",
+  {
+    src: l,
+    alt: t,
+    width: a.w,
+    height: a.h,
+    className: "h-auto w-full max-w-full object-cover",
+    loading: "lazy"
+  }
+) }) : /* @__PURE__ */ e(s, { empty: !0 });
+export {
+  h as LawGeniusImageShell
+};

package/dist/components/LawGeniusStepCard.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+export declare const LawGeniusStepCard: FC<LawGeniusStepCardProps>;
+
+export declare interface LawGeniusStepCardProps {
+    title: string;
+    descriptionMarkdown: string;
+    iconUrl: string | null;
+    iconAlt?: string;
+}
+

package/dist/components/LawGeniusStepCard.js

@@ -0,0 +1,17 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Markdown as s } from "./Markdown.js";
+const m = ({
+  title: l,
+  descriptionMarkdown: i,
+  iconUrl: e,
+  iconAlt: n = ""
+}) => /* @__PURE__ */ a("div", { className: "bg-neutral-25 flex flex-col gap-2 rounded-sm p-6", children: [
+  /* @__PURE__ */ a("div", { className: "flex w-full items-start gap-2", children: [
+    /* @__PURE__ */ t("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center [&_img]:h-5 [&_img]:w-5 [&_img]:object-contain [&_svg]:h-5 [&_svg]:w-5", children: e ? /* @__PURE__ */ t("img", { src: e, alt: n, className: "h-5 w-5 object-contain" }) : /* @__PURE__ */ t("span", { className: "inline-block h-5 w-5 shrink-0", "aria-hidden": !0 }) }),
+    /* @__PURE__ */ t("p", { className: "text-big min-w-0 flex-1 font-bold tracking-tight text-neutral-800", children: l })
+  ] }),
+  /* @__PURE__ */ t("div", { className: "text-small w-full min-w-0 tracking-tight text-neutral-800 [&_p:last-child]:mb-0 [&_strong]:font-bold", children: /* @__PURE__ */ t(s, { variant: "legal", content: i }) })
+] });
+export {
+  m as LawGeniusStepCard
+};

package/dist/components/PricingTemplate.d.ts

@@ -39,10 +39,10 @@ export interface IntroSectionProps {
 }
 
 export interface Jumbotron2Props {
-    title: string;
+    title: ReactNode;
     subtitle?: string;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     variant?: 'default' | 'contact';
 }
 

package/dist/components/ResourcesImageShell.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+export declare const ResourcesImageShell: FC<ResourcesImageShellProps>;
+
+export declare interface ResourcesImageShellProps {
+    src: string | null;
+    alt: string;
+}
+

package/dist/components/ResourcesImageShell.js

@@ -0,0 +1,15 @@
+import { jsx as l } from "react/jsx-runtime";
+const o = { w: 840, h: 612 }, t = "relative aspect-420/306 w-full overflow-hidden rounded-2xl bg-neutral-100", a = "relative w-full overflow-hidden rounded-2xl", s = ({ empty: e, children: r }) => /* @__PURE__ */ l("div", { className: e ? t : a, "aria-hidden": e ? !0 : void 0, children: e ? null : r }), i = ({ src: e, alt: r }) => e ? /* @__PURE__ */ l(s, { children: /* @__PURE__ */ l(
+  "img",
+  {
+    src: e,
+    alt: r,
+    width: o.w,
+    height: o.h,
+    className: "h-auto w-full max-w-full object-cover",
+    loading: "lazy"
+  }
+) }) : /* @__PURE__ */ l(s, { empty: !0 });
+export {
+  i as ResourcesImageShell
+};