@npm_leadtech/legal-contracts-ui 0.124.0 → 0.124.1

package/dist/components/AboutUsTemplate.d.ts

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

package/dist/components/AllDocumentsTemplate.d.ts

@@ -96,6 +96,7 @@ export interface FaqSectionProps {
 export interface ImageWithPreviewProps {
     small: ReactNode;
     large: ReactNode;
+    onZoomClick?: () => void;
 }
 
 export interface JumboCardProps {

package/dist/components/Anchor.d.ts

@@ -3,6 +3,6 @@ import { JSX } from 'react/jsx-runtime';
 export declare const Anchor: ({ children, variant, className, ...props }: AnchorProps) => JSX.Element;
 
 export interface AnchorProps extends React.ComponentProps<'a'> {
-    variant?: 'default' | 'legal' | 'ratafia' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
+    variant?: 'default' | 'legal' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
 }
 

package/dist/components/Anchor.js

@@ -1,16 +1,15 @@
 import { jsx as d } from "react/jsx-runtime";
 import p from "clsx";
-const b = ({ children: a, variant: c = "default", className: l = "", ...r }) => {
-  const t = r.href || "", n = t.toLowerCase(), u = n.startsWith("mailto:"), o = n.startsWith("tel:"), e = "cursor-pointer text-primary-700", s = {
+const v = ({ children: i, variant: c = "default", className: l = "", ...r }) => {
+  const t = r.href || "", s = t.toLowerCase(), u = s.startsWith("mailto:"), n = s.startsWith("tel:"), e = "cursor-pointer text-primary-700", o = {
     default: "text-neutral-900 underline",
     legal: e,
-    ratafia: "cursor-pointer text-primary-200 underline decoration-white/40 underline-offset-2 hover:text-white",
     "about-us": e,
     pricing: "cursor-pointer text-neutral-900",
     unsubscribe: e,
     cookies: "text-white"
-  }, f = s[c] ?? s.default, i = t.startsWith("http") && !o && !u, h = (() => {
-    if (!o) return t;
+  }, f = o[c] ?? o.default, a = t.startsWith("http") && !n && !u, h = (() => {
+    if (!n) return t;
     try {
       return decodeURIComponent(t).replace(/\s/g, "");
     } catch {
@@ -23,12 +22,12 @@ const b = ({ children: a, variant: c = "default", className: l = "", ...r }) =>
       ...r,
       href: h,
       className: p(l, f),
-      target: i ? "_blank" : void 0,
-      rel: i ? "noopener noreferrer" : void 0,
-      children: a
+      target: a ? "_blank" : void 0,
+      rel: a ? "noopener noreferrer" : void 0,
+      children: i
     }
   );
 };
 export {
-  b as Anchor
+  v as Anchor
 };

package/dist/components/Blockquote.d.ts

@@ -3,6 +3,6 @@ import { JSX } from 'react/jsx-runtime';
 export declare const Blockquote: ({ children, variant }: BlockquoteProps) => JSX.Element;
 
 export interface BlockquoteProps extends React.ComponentProps<'blockquote'> {
-    variant?: 'default' | 'legal' | 'ratafia' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
+    variant?: 'default' | 'legal' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
 }
 

package/dist/components/Blockquote.js

@@ -1,13 +1,13 @@
-import { jsx as l } from "react/jsx-runtime";
-import o from "clsx";
-const s = ({ children: r, variant: a = "default" }) => {
+import { jsx as o } from "react/jsx-runtime";
+import l from "clsx";
+const b = ({ children: r, variant: e = "default" }) => {
   const t = {
-    default: "my-4 border-l-4 border-gray-300 pl-4 text-gray-700 italic",
-    "about-us": "my-4 text-gray-700 italic bg-neutral-25 pt-4 px-4 pb-0.5",
-    unsubscribe: "my-4 border-l-4 border-neutral-300 pl-4 text-neutral-700 italic"
-  }, e = t[a] ?? t.default;
-  return /* @__PURE__ */ l("blockquote", { className: o("my-4 italic", e), children: r });
+    default: "border-l-4 border-gray-300 pl-4 text-gray-700 ",
+    "about-us": "text-gray-700 bg-neutral-25 pt-4 px-4 pb-0.5",
+    unsubscribe: "border-l-4 border-neutral-300 pl-4 text-neutral-700"
+  }, a = t[e] ?? t.default;
+  return /* @__PURE__ */ o("blockquote", { className: l("my-4 italic", a), children: r });
 };
 export {
-  s as Blockquote
+  b as Blockquote
 };

package/dist/components/ContactUsTemplate.d.ts

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

package/dist/components/ContentItem.d.ts

@@ -38,6 +38,7 @@ export interface DefaultSubtypeDocumentProps extends BaseSubtypeDocumentProps {
 export interface ImageWithPreviewProps {
     small: ReactNode;
     large: ReactNode;
+    onZoomClick?: () => void;
 }
 
 export interface LinkedProductProps {

package/dist/components/FaqsTemplate.d.ts

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

package/dist/components/Footer.js

@@ -1,23 +1,23 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import "react";
 import { PhoneButton as o } from "./PhoneButton.js";
-import { FooterNav as f } from "./FooterNav.js";
+import { FooterNav as p } from "./FooterNav.js";
 const g = ({
   nav: r,
   contactInfo: t,
-  logoGray: d,
-  socialLinks: i,
-  legalLinks: x,
-  disclaimerText: c,
+  logoGray: i,
+  socialLinks: d,
+  legalLinks: c,
+  disclaimerText: x,
   copyrightText: n,
-  trustPilot: m,
-  languageSelector: s
-}) => /* @__PURE__ */ l("footer", { className: "text-neutral-25 max-w-full overflow-x-hidden", children: [
+  trustPilot: s,
+  languageSelector: m
+}) => /* @__PURE__ */ l("footer", { className: "text-neutral-25", children: [
   /* @__PURE__ */ e("div", { className: "bg-primary-900", children: /* @__PURE__ */ l("div", { className: "mx-auto flex w-full max-w-300 flex-col items-start gap-8 px-6 py-10 md:grid md:grid-cols-3 lg:flex lg:flex-row lg:justify-between", children: [
-    r.map((a) => /* @__PURE__ */ e(f, { ...a }, a.title)),
+    r.map((a) => /* @__PURE__ */ e(p, { ...a }, a.title)),
     /* @__PURE__ */ l("div", { className: "flex flex-col gap-6 max-sm:w-full md:contents lg:flex", children: [
       /* @__PURE__ */ l("div", { className: "", children: [
-        /* @__PURE__ */ e("div", { className: "mb-8 xl:hidden", children: !!s && /* @__PURE__ */ e("div", { className: "language-selector-mobile-container", children: s }) }),
+        /* @__PURE__ */ e("div", { className: "mb-8 xl:hidden", children: !!m && /* @__PURE__ */ e("div", { className: "language-selector-mobile-container", children: m }) }),
         /* @__PURE__ */ l("div", { children: [
           /* @__PURE__ */ e("p", { className: "text-small hidden font-bold text-white sm:block", children: t.phoneNumber }),
           /* @__PURE__ */ e("div", { className: "mb-2 w-full text-center sm:hidden", children: /* @__PURE__ */ e(o, { phoneNumber: t.phoneNumber }) }),
@@ -28,17 +28,17 @@ const g = ({
           ] })
         ] })
       ] }),
-      !!m && /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: m })
+      !!s && /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: s })
     ] })
   ] }) }),
   /* @__PURE__ */ e("div", { className: "bg-neutral-900 px-6 py-8 text-neutral-400", children: /* @__PURE__ */ l("div", { className: "mx-auto flex w-full max-w-300 flex-col gap-6", children: [
     /* @__PURE__ */ l("div", { className: "flex flex-col items-start gap-6 md:flex-row md:justify-between", children: [
-      d,
-      /* @__PURE__ */ e("div", { className: "flex gap-4", children: i?.map((a) => a) })
+      i,
+      /* @__PURE__ */ e("div", { className: "flex gap-4", children: d?.map((a) => a) })
     ] }),
     /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-600" }),
-    /* @__PURE__ */ e("div", { className: "text-extra-small flex flex-wrap gap-4", children: x?.map((a) => a) }),
-    /* @__PURE__ */ e("p", { className: "text-extra-small text-neutral-400", children: c }),
+    /* @__PURE__ */ e("div", { className: "text-extra-small flex flex-wrap gap-4", children: c?.map((a) => a) }),
+    /* @__PURE__ */ e("p", { className: "text-extra-small text-neutral-400", children: x }),
     /* @__PURE__ */ e("p", { className: "text-extra-small text-neutral-400", children: n })
   ] }) })
 ] });

package/dist/components/Header2.d.ts

@@ -3,6 +3,6 @@ import { JSX } from 'react/jsx-runtime';
 export declare const Header2: ({ children, variant }: Header2Props) => JSX.Element;
 
 export interface Header2Props extends React.ComponentProps<'h2'> {
-    variant?: 'default' | 'legal' | 'ratafia' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
+    variant?: 'default' | 'legal' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
 }
 

package/dist/components/Header2.js

@@ -1,14 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
-import m from "clsx";
-const s = ({ children: e, variant: l = "default" }) => {
+import s from "clsx";
+const m = ({ children: e, variant: l = "default" }) => {
   const t = {
     default: "mt-5 mb-3 text-3xl text-gray-900",
     legal: "mt-5 -mx-ds-11xl mb-6 bg-white px-ds-11xl text-left text-neutral-800 text-3xl",
-    ratafia: "mt-4 mb-3 text-left text-xl font-bold text-white lg:text-2xl",
     unsubscribe: "mt-0 mb-0 w-full bg-white pb-4 pt-8 text-left text-3xl leading-tight text-neutral-900 font-sans tracking-tight md:text-4xl md:leading-8"
   }, x = t[l] ?? t.default;
-  return /* @__PURE__ */ a("h2", { className: m("font-bold", x), children: e });
+  return /* @__PURE__ */ a("h2", { className: s("font-bold", x), children: e });
 };
 export {
-  s as Header2
+  m as Header2
 };

package/dist/components/HomeTemplate.js

@@ -4,10 +4,10 @@ import { HeroSection as n } from "./HeroSection.js";
 import { MoreTemplatesSection as f } from "./MoreTemplatesSection.js";
 import { ProcessSection as l } from "./ProcessSection.js";
 import { CategoriesSection as S } from "./CategoriesSection.js";
-import { TrustSection as x } from "./TrustSection.js";
-import { FaqTeaserSection as T } from "./FaqTeaserSection.js";
-import { BlogSection as b } from "./BlogSection.js";
-import { RatafiaSection as g } from "./RatafiaSection.js";
+import { RatafiaSection as x } from "./RatafiaSection.js";
+import { TrustSection as T } from "./TrustSection.js";
+import { FaqTeaserSection as b } from "./FaqTeaserSection.js";
+import { BlogSection as g } from "./BlogSection.js";
 const M = ({
   hero: t,
   moreTemplates: m,
@@ -22,10 +22,10 @@ const M = ({
   /* @__PURE__ */ o(f, { ...m }),
   /* @__PURE__ */ o(l, { ...e }),
   r && /* @__PURE__ */ o(S, { ...r }),
-  /* @__PURE__ */ o(g, { ...i }),
-  /* @__PURE__ */ o(x, { ...p }),
-  /* @__PURE__ */ o(T, { ...s }),
-  /* @__PURE__ */ o(b, { className: "pt-10 pb-12 lg:pb-14", ...a })
+  /* @__PURE__ */ o(x, { ...i }),
+  /* @__PURE__ */ o(T, { ...p }),
+  /* @__PURE__ */ o(b, { ...s }),
+  /* @__PURE__ */ o(g, { className: "pt-10 pb-12 lg:pb-14", ...a })
 ] });
 export {
   M as HomeTemplate

package/dist/components/HowItWorksTemplate.d.ts

@@ -1,4 +1,17 @@
+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;
@@ -19,20 +32,18 @@ export declare type HowItWorksHeroBullet = {
 export declare type HowItWorksLawGeniusStep = {
     id: string;
     title: string;
-    descriptionMarkdown: string;
-    iconUrl: string | null;
-    iconAlt?: string;
+    description: string;
+    icon: ReactNode;
 };
 
 export declare type HowItWorksProcessStep = {
     id: string;
     title: string;
-    bodyMarkdown: string;
-    imageUrl: string | null;
-    imageAlt: string;
+    /** Column with text when not reversed; swap with image when `reverse` is true. */
+    body: ReactNode;
+    image: ReactNode;
     background: 'bg-white' | 'bg-neutral-25';
     reverse?: boolean;
-    imageFirstOnMobile?: boolean;
 };
 
 export declare const HowItWorksTemplate: FC<HowItWorksTemplateProps>;
@@ -41,40 +52,37 @@ export declare interface HowItWorksTemplateProps {
     hero: {
         eyebrow: string;
         title: string;
-        imageUrl: string | null;
-        imageAlt: string;
-        imagePriority?: boolean;
-        introMarkdown: string;
+        image: ReactNode;
+        intro: ReactNode;
         bullets: HowItWorksHeroBullet[];
-        closingMarkdown: string;
-        cta: {
-            href: string;
-            label: string;
-        };
+        closing: ReactNode;
+        cta: ButtonProps;
     };
     processSteps: HowItWorksProcessStep[];
     lawGenius: {
         title: string;
-        contentMarkdown: string;
+        content: string;
         steps: HowItWorksLawGeniusStep[];
-        belowStepsMarkdown: string;
-        imageUrl: string | null;
-        imageAlt: string;
-        cta: {
-            href: string;
-            label: string;
-        };
+        belowStepsSlot: ReactNode;
+        cta: ButtonProps;
+        image: ReactNode;
         sectionClassName?: string;
     };
     resources: {
         examples: HowItWorksExamplesProps;
-        supportBodyMarkdown: string;
-        imageUrl: string | null;
-        imageAlt: string;
-        cta: {
-            href: string;
-            label: string;
-        };
+        image: ReactNode;
+        supportBody: ReactNode;
+        cta: ButtonProps;
     };
 }
+
+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,144 +1,128 @@
-import { jsx as e, jsxs as r, Fragment as w } from "react/jsx-runtime";
-import { clsx as N } from "clsx";
-import { howItWorksLawGeniusCtaLinkClassName as b, howItWorksHeroCtaLinkClassName as k, howItWorksLawGeniusBelowStepsMarkdownClassName as y, howItWorksResourcesSupportBodyClassName as C, howItWorksResourcesCtaLinkClassName as v } from "./HowItWorksTemplateTokens.js";
-import { HeroImageShell as S } from "./HeroImageShell.js";
-import { RatafiaSection as M } from "./RatafiaSection.js";
-import { LawGeniusStepCard as I } from "./LawGeniusStepCard.js";
-import { ResourcesImageShell as L } from "./ResourcesImageShell.js";
-import { StepImageShell as W } from "./StepImageShell.js";
-import { Button as o } from "./Button.js";
-import { IntroSection as A } from "./IntroSection.js";
-import { Markdown as i } from "./Markdown.js";
-import { TwoColumnSection as c } from "./TwoColumnSection.js";
-import { LawGeniusImageShell as B } from "./LawGeniusImageShell.js";
-const U = (t) => {
-  const m = /* @__PURE__ */ r("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: /* @__PURE__ */ e(i, { variant: "legal", content: t.bodyMarkdown }) })
-  ] }), 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 }) });
-  return t.reverse ? { firstColumn: a, secondColumn: m } : { firstColumn: m, secondColumn: a };
-}, J = ({ hero: t, processSteps: m, lawGenius: a, resources: s }) => {
-  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(
-    o,
-    {
-      size: "large",
-      variant: "primary-green",
-      className: "text-medium w-full justify-center !rounded-md font-bold lg:w-auto",
-      children: /* @__PURE__ */ e("a", { href: a.cta.href, className: b, children: a.cta.label })
-    }
-  );
-  return /* @__PURE__ */ r("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__ */ r("div", { className: "mx-auto flex max-w-6xl flex-col gap-12", children: [
-      /* @__PURE__ */ r("div", { className: "text-center", children: [
-        /* @__PURE__ */ r("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 a, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { Button as c } from "./Button.js";
+import { IntroSection as u } from "./IntroSection.js";
+import { RatafiaSection as f } from "./RatafiaSection.js";
+import { TwoColumnSection as m } from "./TwoColumnSection.js";
+const g = ({ title: l, description: r, icon: s }) => /* @__PURE__ */ a("div", { className: "rounded-2xl bg-white/10 p-5", children: [
+  /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("span", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-white/20", children: s }),
+    /* @__PURE__ */ e("p", { className: "text-lg font-semibold", children: l })
+  ] }),
+  /* @__PURE__ */ e("p", { className: "text-small mt-3 text-white/85", children: r })
+] }), h = (l) => {
+  const r = /* @__PURE__ */ a("div", { className: "space-y-5 text-neutral-800 lg:w-1/2", children: [
+    /* @__PURE__ */ e("h2", { className: "font-lora text-3xl font-bold text-neutral-800", children: l.title }),
+    /* @__PURE__ */ e("div", { className: "text-medium space-y-4 text-neutral-800", children: l.body })
+  ] }), s = /* @__PURE__ */ e("div", { className: "relative aspect-560/408 w-full overflow-hidden rounded-2xl shadow-[0_25px_60px_rgba(3,42,56,0.15)] lg:w-1/2", children: l.image });
+  return l.reverse ? { firstColumn: s, secondColumn: r } : { firstColumn: r, secondColumn: s };
+}, C = ({ hero: l, processSteps: r, lawGenius: s, resources: n }) => {
+  const o = {
+    size: "large",
+    variant: "primary-white",
+    className: "text-medium w-full justify-center font-bold text-primary-900 lg:w-auto",
+    ...s.cta
+  }, { examples: i } = n;
+  return /* @__PURE__ */ a("main", { className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ e("section", { className: "bg-primary-50 px-6 py-16 sm:px-10 lg:px-24", children: /* @__PURE__ */ a("div", { className: "mx-auto flex max-w-6xl flex-col gap-12", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e("p", { className: "text-small font-semibold tracking-[0.3em] text-neutral-600 uppercase", children: l.eyebrow }),
+        /* @__PURE__ */ e("h1", { className: "font-lora mt-3 text-4xl text-neutral-800 sm:text-5xl", children: l.title })
       ] }),
       /* @__PURE__ */ e(
-        A,
+        u,
         {
           className: "bg-transparent",
-          containerClassName: "w-full !max-w-none flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-stretch",
-          image: /* @__PURE__ */ e(S, { src: t.imageUrl, alt: t.imageAlt, priority: t.imagePriority }),
+          containerClassName: "w-full !max-w-none flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-center",
+          image: l.image,
           cta: {
             size: "large",
-            variant: "primary-green",
+            variant: "primary-darkgreen",
             className: "text-medium mt-8 w-full justify-center font-bold",
-            children: /* @__PURE__ */ e("a", { href: t.cta.href, className: k, children: t.cta.label })
+            ...l.cta
           },
-          children: /* @__PURE__ */ r("div", { className: "text-medium space-y-4 [&_ul]:my-8 [&_ul]:list-disc [&_ul]:pl-[1.2rem]", children: [
-            d && /* @__PURE__ */ e(i, { variant: "legal", content: t.introMarkdown }),
-            /* @__PURE__ */ e("ul", { className: "text-medium space-y-3", children: t.bullets.map((l) => /* @__PURE__ */ r("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__ */ r("span", { children: [
-                /* @__PURE__ */ r("strong", { children: [
-                  l.strong,
+          children: /* @__PURE__ */ a("div", { className: "text-medium space-y-4", children: [
+            l.intro,
+            /* @__PURE__ */ e("ul", { className: "text-medium space-y-3", children: l.bullets.map((t) => /* @__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 rounded-full", "aria-hidden": !0 }),
+              /* @__PURE__ */ a("span", { children: [
+                /* @__PURE__ */ a("strong", { children: [
+                  t.strong,
                   " "
                 ] }),
-                l.text
+                t.text
               ] })
-            ] }, l.id)) }),
-            p && /* @__PURE__ */ e(i, { variant: "legal", content: t.closingMarkdown })
+            ] }, t.id)) }),
+            l.closing
           ] })
         }
       )
     ] }) }),
-    m.map((l) => {
-      const { firstColumn: u, secondColumn: h } = U(l);
+    r.map((t) => {
+      const { firstColumn: d, secondColumn: p } = h(t);
       return /* @__PURE__ */ e(
-        c,
+        m,
         {
-          className: `${l.background} lg:px-ds-10xl px-6 py-12 sm:px-10`,
-          containerClassName: N(
-            "!mx-auto !w-full !max-w-6xl !px-0 !py-0 !gap-8 md:!gap-10 lg:items-start",
-            l.imageFirstOnMobile ? "!flex-col-reverse md:!flex-row" : "!flex-col md:!flex-row"
-          ),
-          firstColumn: u,
-          secondColumn: h
+          className: `${t.background} px-6 py-16 sm:px-10 lg:px-24`,
+          containerClassName: "w-full !max-w-6xl flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-center",
+          firstColumn: d,
+          secondColumn: p
         },
-        l.id
+        t.id
       );
     }),
     /* @__PURE__ */ e(
-      M,
+      f,
       {
-        title: a.title,
-        content: a.contentMarkdown,
-        stepsSlot: /* @__PURE__ */ e(w, { children: a.steps.map((l) => /* @__PURE__ */ e(
-          I,
-          {
-            title: l.title,
-            descriptionMarkdown: l.descriptionMarkdown,
-            iconUrl: l.iconUrl,
-            iconAlt: l.iconAlt ?? ""
-          },
-          l.id
-        )) }),
-        belowStepsSlot: g ? /* @__PURE__ */ e(
-          i,
-          {
-            variant: "ratafia",
-            content: a.belowStepsMarkdown,
-            className: y
-          }
-        ) : null,
-        cta: f,
+        title: s.title,
+        content: s.content,
+        stepsSlot: /* @__PURE__ */ e(x, { children: s.steps.map((t) => /* @__PURE__ */ e(g, { ...t }, t.id)) }),
+        belowStepsSlot: s.belowStepsSlot,
+        cta: /* @__PURE__ */ e(c, { ...o }),
         skipCtaWrapper: !0,
-        image: /* @__PURE__ */ e(B, { src: a.imageUrl, alt: a.imageAlt }),
-        sectionClassName: a.sectionClassName ?? "bg-neutral-25 px-6 pt-16 pb-12 sm:px-10 lg:px-ds-10xl"
+        image: s.image,
+        sectionClassName: s.sectionClassName ?? "bg-primary-50 px-6 py-16 sm:px-10 lg:px-24 xl:px-0"
       }
     ),
-    /* @__PURE__ */ e(
-      c,
+    /* @__PURE__ */ e("section", { className: "bg-white px-6 py-16 sm:px-10 lg:px-24", children: /* @__PURE__ */ e(
+      m,
       {
-        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: /* @__PURE__ */ e(L, { src: s.imageUrl, alt: s.imageAlt }) }),
-        secondColumn: /* @__PURE__ */ r("div", { className: "w-full space-y-4 lg:basis-[52%]", children: [
-          n.eyebrow && /* @__PURE__ */ e("p", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: n.eyebrow }),
-          n.title && /* @__PURE__ */ e("h3", { className: "font-lora text-[2rem] leading-[1.2] font-bold text-neutral-800", children: n.title }),
-          x && /* @__PURE__ */ e("div", { className: `text-small space-y-3 text-neutral-700 ${C}`, children: /* @__PURE__ */ e(i, { variant: "legal", content: s.supportBodyMarkdown }) }),
-          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: [
-            /* @__PURE__ */ e("dt", { className: "font-semibold", children: l.label }),
-            /* @__PURE__ */ e("dd", { children: l.value })
-          ] }, `${l.label}-${l.value}`)) }),
-          n.footer && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: n.footer }),
+        className: "bg-transparent",
+        containerClassName: "w-full !max-w-6xl flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-stretch",
+        firstColumn: /* @__PURE__ */ a("div", { className: "space-y-6 rounded-3xl border border-neutral-100 p-8 shadow-[0_20px_60px_rgba(3,42,56,0.12)] lg:w-1/2", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e("p", { className: "text-sm font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: i.eyebrow }),
+            /* @__PURE__ */ e("h3", { className: "mt-2 text-3xl font-bold text-neutral-800", children: i.title })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "space-y-4", children: i.rows.map((t) => /* @__PURE__ */ a(
+            "div",
+            {
+              className: "text-medium flex items-center justify-between border-b border-neutral-100 pb-3",
+              children: [
+                /* @__PURE__ */ e("span", { className: "text-neutral-500", children: t.label }),
+                /* @__PURE__ */ e("span", { className: "font-semibold text-neutral-900", children: t.value })
+              ]
+            },
+            t.label
+          )) }),
+          /* @__PURE__ */ e("div", { className: "bg-neutral-25 rounded-2xl p-4 text-neutral-700", children: i.footer })
+        ] }),
+        secondColumn: /* @__PURE__ */ a("div", { className: "bg-neutral-25 space-y-6 rounded-3xl p-8 shadow-[0_25px_70px_rgba(3,42,56,0.15)] lg:w-1/2", children: [
+          /* @__PURE__ */ e("div", { className: "relative aspect-420/306 w-full overflow-hidden rounded-2xl", children: n.image }),
+          /* @__PURE__ */ e("div", { className: "space-y-4 text-neutral-800", children: n.supportBody }),
           /* @__PURE__ */ e(
-            o,
+            c,
             {
-              size: "small",
-              variant: "primary-green",
-              className: "text-small inline-flex w-auto justify-center font-bold",
-              children: /* @__PURE__ */ e("a", { href: s.cta.href, className: v, children: s.cta.label })
+              size: "large",
+              variant: "primary-darkgreen",
+              className: "text-medium w-full justify-center font-bold",
+              ...n.cta
             }
           )
         ] })
       }
-    )
+    ) })
   ] });
 };
 export {
-  J as HowItWorksTemplate
+  C as HowItWorksTemplate
 };

package/dist/components/ImageWithPreview.d.ts

@@ -6,5 +6,6 @@ export declare const ImageWithPreview: FC<ImageWithPreviewProps>;
 export declare interface ImageWithPreviewProps {
     small: ReactNode;
     large: ReactNode;
+    onZoomClick?: () => void;
 }