@npm_leadtech/legal-contracts-ui 0.119.0 → 0.122.0

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' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
+    variant?: 'default' | 'legal' | 'ratafia' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
 }
 

package/dist/components/Anchor.js

@@ -1,15 +1,16 @@
 import { jsx as d } from "react/jsx-runtime";
 import p from "clsx";
-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 = {
+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 = {
     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 = o[c] ?? o.default, a = t.startsWith("http") && !n && !u, h = (() => {
-    if (!n) return t;
+  }, f = s[c] ?? s.default, i = t.startsWith("http") && !o && !u, h = (() => {
+    if (!o) return t;
     try {
       return decodeURIComponent(t).replace(/\s/g, "");
     } catch {
@@ -22,12 +23,12 @@ const v = ({ children: i, variant: c = "default", className: l = "", ...r }) =>
       ...r,
       href: h,
       className: p(l, f),
-      target: a ? "_blank" : void 0,
-      rel: a ? "noopener noreferrer" : void 0,
-      children: i
+      target: i ? "_blank" : void 0,
+      rel: i ? "noopener noreferrer" : void 0,
+      children: a
     }
   );
 };
 export {
-  v as Anchor
+  b 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' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
+    variant?: 'default' | 'legal' | 'ratafia' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
 }
 

package/dist/components/Blockquote.js

@@ -1,13 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
-import l from "clsx";
-const b = ({ children: r, variant: e = "default" }) => {
+import { jsx as l } from "react/jsx-runtime";
+import o from "clsx";
+const s = ({ children: r, variant: a = "default" }) => {
   const t = {
-    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 });
+    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 });
 };
 export {
-  b as Blockquote
+  s as Blockquote
 };

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 p } from "./FooterNav.js";
+import { FooterNav as f } from "./FooterNav.js";
 const g = ({
   nav: r,
   contactInfo: t,
-  logoGray: i,
-  socialLinks: d,
-  legalLinks: c,
-  disclaimerText: x,
+  logoGray: d,
+  socialLinks: i,
+  legalLinks: x,
+  disclaimerText: c,
   copyrightText: n,
-  trustPilot: s,
-  languageSelector: m
-}) => /* @__PURE__ */ l("footer", { className: "text-neutral-25", children: [
+  trustPilot: m,
+  languageSelector: s
+}) => /* @__PURE__ */ l("footer", { className: "text-neutral-25 max-w-full overflow-x-hidden", 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(p, { ...a }, a.title)),
+    r.map((a) => /* @__PURE__ */ e(f, { ...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: !!m && /* @__PURE__ */ e("div", { className: "language-selector-mobile-container", children: m }) }),
+        /* @__PURE__ */ e("div", { className: "mb-8 xl:hidden", children: !!s && /* @__PURE__ */ e("div", { className: "language-selector-mobile-container", children: s }) }),
         /* @__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 = ({
           ] })
         ] })
       ] }),
-      !!s && /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: s })
+      !!m && /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: m })
     ] })
   ] }) }),
   /* @__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: [
-      i,
-      /* @__PURE__ */ e("div", { className: "flex gap-4", children: d?.map((a) => a) })
+      d,
+      /* @__PURE__ */ e("div", { className: "flex gap-4", children: i?.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: c?.map((a) => a) }),
-    /* @__PURE__ */ e("p", { className: "text-extra-small text-neutral-400", children: x }),
+    /* @__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("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' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
+    variant?: 'default' | 'legal' | 'ratafia' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
 }
 

package/dist/components/Header2.js

@@ -1,13 +1,14 @@
 import { jsx as a } from "react/jsx-runtime";
-import s from "clsx";
-const m = ({ children: e, variant: l = "default" }) => {
+import m from "clsx";
+const s = ({ 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: s("font-bold", x), children: e });
+  return /* @__PURE__ */ a("h2", { className: m("font-bold", x), children: e });
 };
 export {
-  m as Header2
+  s as Header2
 };

package/dist/components/HowItWorksTemplate.d.ts

@@ -29,23 +29,31 @@ 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: string;
+    description: ReactNode;
     icon: ReactNode;
 };
 
 export declare type HowItWorksProcessStep = {
     id: string;
     title: 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 howItWorksResourcesCtaLinkClassName = "font-semibold";
+
 export declare const HowItWorksTemplate: FC<HowItWorksTemplateProps>;
 
 export declare interface HowItWorksTemplateProps {

package/dist/components/HowItWorksTemplate.js

@@ -1,128 +1,124 @@
-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 { 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 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 })
+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("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 = {
+  /* @__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-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: [
+    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__ */ 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__ */ 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 })
       ] }),
       /* @__PURE__ */ e(
-        u,
+        g,
         {
           className: "bg-transparent",
-          containerClassName: "w-full !max-w-none flex-col gap-10 !px-0 !py-0 lg:flex-row lg:items-center",
-          image: l.image,
+          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-darkgreen",
+            variant: "primary-green",
             className: "text-medium mt-8 w-full justify-center font-bold",
-            ...l.cta
+            ...t.cta
           },
-          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 }),
+          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: [
-                  t.strong,
+                  s.strong,
                   " "
                 ] }),
-                t.text
+                s.text
               ] })
-            ] }, t.id)) }),
-            l.closing
+            ] }, s.id)) }),
+            t.closing
           ] })
         }
       )
     ] }) }),
-    r.map((t) => {
-      const { firstColumn: d, secondColumn: p } = h(t);
+    n.map((s) => {
+      const { firstColumn: d, secondColumn: x } = w(s);
       return /* @__PURE__ */ e(
-        m,
+        o,
         {
-          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",
+          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: p
+          secondColumn: x
         },
-        t.id
+        s.id
       );
     }),
     /* @__PURE__ */ e(
       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 }),
+        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: s.image,
-        sectionClassName: s.sectionClassName ?? "bg-primary-50 px-6 py-16 sm:px-10 lg:px-24 xl:px-0"
+        image: l.image,
+        sectionClassName: l.sectionClassName ?? "bg-neutral-25 px-6 pb-12 pt-16 sm:px-10 lg:px-ds-10xl"
       }
     ),
-    /* @__PURE__ */ e("section", { className: "bg-white px-6 py-16 sm:px-10 lg:px-24", children: /* @__PURE__ */ e(
-      m,
+    /* @__PURE__ */ e(
+      o,
       {
-        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 }),
+        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(
-            c,
+            r,
             {
-              size: "large",
-              variant: "primary-darkgreen",
-              className: "text-medium w-full justify-center font-bold",
-              ...n.cta
+              size: "small",
+              variant: "primary-green",
+              className: "text-small inline-flex w-auto justify-center font-bold",
+              ...m.cta
             }
           )
         ] })
       }
-    ) })
+    )
   ] });
 };
 export {
-  C as HowItWorksTemplate
+  L as HowItWorksTemplate,
+  S as howItWorksHeroCtaLinkClassName,
+  I as howItWorksLawGeniusBelowStepsMarkdownClassName,
+  _ as howItWorksLawGeniusCtaLinkClassName,
+  j as howItWorksResourcesCtaLinkClassName
 };

package/dist/components/IntroSection.js

@@ -1,18 +1,18 @@
-import { jsx as m, jsxs as o } from "react/jsx-runtime";
+import { jsx as s, jsxs as n } from "react/jsx-runtime";
 import { TwoColumnSection as e } from "./TwoColumnSection.js";
-import { LinkWrapper as n } from "./LinkWrapper.js";
-const b = ({ image: i, children: l, cta: s, className: r, containerClassName: a }) => /* @__PURE__ */ m(
+import { LinkWrapper as o } from "./LinkWrapper.js";
+const c = ({ image: i, children: r, cta: m, className: a, containerClassName: l }) => /* @__PURE__ */ s(
   e,
   {
-    className: r ?? "",
-    containerClassName: a,
-    firstColumn: /* @__PURE__ */ m("div", { className: "mb-4 md:mr-6 md:mb-0 md:basis-42/100 lg:mr-10 lg:basis-39/100 xl:basis-36/100 [&_img]:h-auto [&_img]:w-full [&_img]:rounded-2xl xl:[&_img]:h-full xl:[&_img]:object-cover", children: i }),
-    secondColumn: /* @__PURE__ */ o("div", { className: "mt-4 basis-full md:mt-0 md:basis-56/100 lg:basis-59/100 xl:basis-60/100", children: [
-      l,
-      s && /* @__PURE__ */ m(n, { size: "large", variant: "primary-green", className: "mt-8", ...s })
+    className: a ?? "",
+    containerClassName: l,
+    firstColumn: /* @__PURE__ */ s("div", { className: "mb-4 min-h-0 w-full min-w-0 shrink-0 md:mr-6 md:mb-0 md:basis-42/100 lg:mr-10 lg:basis-39/100 xl:basis-36/100", children: i }),
+    secondColumn: /* @__PURE__ */ n("div", { className: "mt-4 basis-full md:mt-0 md:basis-56/100 lg:basis-59/100 xl:basis-60/100", children: [
+      r,
+      m && /* @__PURE__ */ s(o, { size: "large", variant: "primary-green", className: "mt-8", ...m })
     ] })
   }
 );
 export {
-  b as IntroSection
+  c as IntroSection
 };

package/dist/components/Markdown.d.ts

@@ -6,6 +6,6 @@ export declare interface MarkdownProps {
     content: string;
     className?: string;
     useCustom?: boolean;
-    variant?: 'default' | 'legal' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
+    variant?: 'default' | 'legal' | 'ratafia' | 'tooltip' | 'about-us' | 'pricing' | 'unsubscribe' | 'cookies';
 }
 

package/dist/components/OrderedList.d.ts

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

package/dist/components/OrderedList.js

@@ -1,13 +1,14 @@
-import { jsx as a } from "react/jsx-runtime";
-import i from "clsx";
-const o = ({ variant: s = "default", children: e }) => {
+import { jsx as i } from "react/jsx-runtime";
+import a from "clsx";
+const m = ({ variant: e = "default", children: l }) => {
   const t = {
-    default: "list-inside text-gray-900 space-y-2",
-    legal: "list-outside pl-8 text-neutral-800 space-y-4",
-    unsubscribe: " w-full list-outside space-y-2 pl-10 text-neutral-800"
-  }, l = t[s] ?? t.default;
-  return /* @__PURE__ */ a("ol", { className: i("mb-4 list-decimal", l), children: e });
+    default: "mb-4 list-inside list-decimal text-gray-900 space-y-2",
+    legal: "list-outside list-decimal pl-8 mb-4 text-neutral-800 space-y-4",
+    ratafia: "mb-3 list-outside list-decimal space-y-2 pl-5 text-white/85 marker:text-white/60",
+    unsubscribe: "mb-4 w-full list-outside list-decimal space-y-2 pl-10 text-neutral-800"
+  }, s = t[e] ?? t.default;
+  return /* @__PURE__ */ i("ol", { className: a("mb-4 list-decimal", s), children: l });
 };
 export {
-  o as OrderedList
+  m as OrderedList
 };

package/dist/components/Paragraph.d.ts

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

package/dist/components/Paragraph.js

@@ -1,12 +1,16 @@
 import { jsx as r } from "react/jsx-runtime";
-const n = ({ variant: a = "default", children: e }) => {
+const b = ({ variant: a = "default", children: e }) => {
   const t = {
     default: "mb-4",
     legal: "mb-4 text-neutral-800 last:mb-0 tracking-tight",
+    ratafia: "mb-3 text-white/85 last:mb-0 tracking-tight",
+    tooltip: "mb-4",
+    "about-us": "mb-4",
+    pricing: "mb-4",
     unsubscribe: "mb-0 w-full rounded-lg bg-neutral-25 px-6 pb-6 text-left text-base leading-6 text-neutral-800 md:text-lg lg:px-ds-11xl"
   }, l = t[a] ?? t.default;
   return /* @__PURE__ */ r("p", { className: l, children: e });
 };
 export {
-  n as Paragraph
+  b as Paragraph
 };

package/dist/components/RatafiaSection.js

@@ -1,45 +1,45 @@
 import { jsx as l, jsxs as e } from "react/jsx-runtime";
 import "react";
-import { clsx as o } from "clsx";
-import { Markdown as p } from "./Markdown.js";
+import { clsx as i } from "clsx";
+import { Markdown as o } from "./Markdown.js";
 import { LinkWrapper as f } from "./LinkWrapper.js";
 const j = ({
   title: m,
-  content: i,
-  benefits: s = [],
-  stepsSlot: t,
+  content: r,
+  benefits: t = [],
+  stepsSlot: d,
   belowStepsSlot: g,
-  cta: r,
-  image: c,
+  cta: s,
+  image: x,
   skipCtaWrapper: h = !1,
-  sectionClassName: d,
-  innerClassName: x
+  sectionClassName: c,
+  innerClassName: n
 }) => {
-  const n = "bg-primary-50 px-6 py-10 lg:px-8 lg:py-12 xl:px-0", w = "from-primary-900 via-primary-700 to-primary-900 mx-auto flex flex-col justify-between gap-8 rounded-2xl bg-linear-to-bl p-6 text-white md:flex-row md:items-center md:gap-10 md:p-10 lg:gap-16 lg:p-16 xl:mx-auto xl:max-w-300";
-  if (t != null) {
-    const a = h ? /* @__PURE__ */ l("div", { className: "w-full lg:w-fit", children: r }) : /* @__PURE__ */ l(f, { className: "w-full lg:w-fit", children: r });
-    return /* @__PURE__ */ l("section", { className: d ?? n, children: /* @__PURE__ */ l("div", { className: o("from-primary-900 mx-auto w-full max-w-6xl rounded-3xl bg-linear-to-bl p-10 text-white shadow-[0_25px_80px_rgba(3,42,56,0.35)]", x), children: /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-8", children: [
+  const p = "bg-primary-50 px-6 pb-10 pt-16 lg:px-8 lg:pb-12 lg:pt-16 xl:px-0", w = "from-primary-900 via-primary-700 to-primary-900 mx-auto flex flex-col justify-between gap-8 rounded-2xl bg-linear-to-bl p-6 text-white md:flex-row md:items-center md:gap-10 md:p-10 lg:gap-16 lg:p-16 xl:mx-auto xl:max-w-300";
+  if (d != null) {
+    const a = h ? /* @__PURE__ */ l("div", { className: "w-full lg:w-fit", children: s }) : /* @__PURE__ */ l(f, { className: "w-full lg:w-fit", children: s });
+    return /* @__PURE__ */ l("section", { className: i("max-w-full overflow-x-hidden", c ?? p), children: /* @__PURE__ */ l("div", { className: i("bg-law-genius-section mx-auto w-full max-w-6xl rounded-3xl px-8 pb-8 pt-16 text-white shadow-[0_25px_80px_rgba(3,42,56,0.35)] sm:px-10 sm:pb-10 sm:pt-16", n), children: /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-8 lg:gap-10", children: [
       /* @__PURE__ */ e("div", { className: "flex flex-col gap-4 text-center text-white", children: [
         /* @__PURE__ */ l("h2", { className: "lg:text-super-large text-3xl font-bold lg:leading-tight", children: m }),
-        /* @__PURE__ */ l(p, { content: i, className: "[&_p]:text-medium [&_p]:text-white/80 [&_p:last-child]:mb-0" })
+        /* @__PURE__ */ l(o, { content: r, className: "[&_p]:text-medium [&_p]:text-white/80 [&_p:last-child]:mb-0" })
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-10 lg:grid lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-center", children: [
-        /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: [
-          t,
+      /* @__PURE__ */ e("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__ */ e("div", { className: "flex min-h-0 flex-col gap-6", children: [
+          d,
           g,
           a
         ] }),
-        /* @__PURE__ */ l("div", { className: "mx-auto flex w-full max-w-77 items-center justify-center md:mx-0 md:max-w-none md:min-w-0", children: c })
+        /* @__PURE__ */ l("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: x })
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ l("section", { className: d ?? n, children: /* @__PURE__ */ e("div", { className: o(w, x), children: [
+  return /* @__PURE__ */ l("section", { className: i("max-w-full overflow-x-hidden", c ?? p), children: /* @__PURE__ */ e("div", { className: i(w, n), children: [
     /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: [
         /* @__PURE__ */ l("h2", { className: "text-super-large leading-tight font-bold", children: m }),
-        /* @__PURE__ */ l(p, { content: i, className: "[&_p:last-child]:mb-0" })
+        /* @__PURE__ */ l(o, { content: r, className: "[&_p:last-child]:mb-0" })
       ] }),
-      s.length > 0 && /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-3", children: s.map((a) => /* @__PURE__ */ e(
+      t.length > 0 && /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-3", children: t.map((a) => /* @__PURE__ */ e(
         "span",
         {
           className: "bg-primary-50 text-small text-primary-800 flex flex-nowrap gap-1 rounded-md p-1 font-semibold",
@@ -50,9 +50,9 @@ const j = ({
         },
         a.id
       )) }),
-      /* @__PURE__ */ l(f, { className: "w-full md:w-fit", children: r })
+      /* @__PURE__ */ l(f, { className: "w-full md:w-fit", children: s })
     ] }),
-    /* @__PURE__ */ l("div", { className: "mx-auto w-full max-w-77 md:mx-0 md:min-w-74", children: c })
+    /* @__PURE__ */ l("div", { className: "mx-auto w-full max-w-77 md:mx-0 md:min-w-74", children: x })
   ] }) });
 };
 export {