@npm_leadtech/legal-contracts-ui 0.124.4 → 0.124.6

package/dist/components/AboutUsTemplate.d.ts

@@ -31,6 +31,7 @@ export interface ContactUsSectionProps {
         icon: ReactNode;
         helper?: string;
         url?: string;
+        dataQa?: string;
     }>;
 }
 

package/dist/components/AiLegalDocumentReviewerTemplate.d.ts

@@ -32,6 +32,7 @@ export interface ConversionSectionProps {
     icon: ReactNode;
     title: string;
     uploadZone: UploadZoneProps;
+    dataQa?: string;
 }
 
 export interface FaqItemProps {
@@ -136,5 +137,6 @@ export interface UploadZoneProps {
     containerClassName?: string;
     onAddDocument?: () => void;
     onDropDocument?: (e: React.DragEvent<HTMLDivElement>) => void;
+    dataQa?: string;
 }
 

package/dist/components/Button.d.ts

@@ -2,13 +2,14 @@ import { ComponentPropsWithRef } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-export declare const Button: ({ children, type, size, variant, iconPosition, className, disabled, ref, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ children, type, size, variant, iconPosition, className, disabled, ref, dataQa, ...props }: ButtonProps) => JSX.Element;
 
 export declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
     variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
+    dataQa?: string;
 }
 
 export type ButtonSize = 'small' | 'default' | 'large';

package/dist/components/Button.js

@@ -1,20 +1,33 @@
-import { jsx as l } from "react/jsx-runtime";
-import { getButtonClasses as p } from "./Button.utils.js";
+import { jsx as p } from "react/jsx-runtime";
+import { getButtonClasses as c } from "./Button.utils.js";
 import "react";
-const x = ({
+const B = ({
   children: o,
   type: r = "button",
-  size: s = "default",
-  variant: e = "primary-green",
-  iconPosition: a = "left",
+  size: a = "default",
+  variant: s = "primary-green",
+  iconPosition: e = "left",
   className: n,
   disabled: t = !1,
   ref: m,
-  ...u
+  dataQa: u,
+  ...f
 }) => {
-  const f = p(s, e, a, t, n);
-  return /* @__PURE__ */ l("button", { ref: m, type: r, disabled: t, "aria-disabled": t, className: f, ...u, children: o });
+  const l = c(a, s, e, t, n);
+  return /* @__PURE__ */ p(
+    "button",
+    {
+      "data-qa": u,
+      ref: m,
+      type: r,
+      disabled: t,
+      "aria-disabled": t,
+      className: l,
+      ...f,
+      children: o
+    }
+  );
 };
 export {
-  x as Button
+  B as Button
 };

package/dist/components/Checkbox.d.ts

@@ -4,6 +4,7 @@ import { ReactNode } from 'react';
 export declare const Checkbox: FC<CheckboxProps>;
 
 export declare interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    dataQa?: string;
     id: string;
     name: string;
     required?: boolean;

package/dist/components/Checkbox.js

@@ -1,31 +1,43 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import m from "clsx";
-import { CheckIcon as c } from "./CheckIcon.js";
-const u = ({
-  id: o,
-  name: s,
-  required: i = !1,
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import c from "clsx";
+import { CheckIcon as p } from "./CheckIcon.js";
+const d = ({
+  dataQa: s,
+  id: t,
+  name: i,
+  required: a = !1,
   children: l,
   checked: e,
-  error: t = !1,
+  error: o = !1,
   ...n
-}) => /* @__PURE__ */ a("label", { htmlFor: o, className: "text-medium flex cursor-pointer items-center gap-2 text-neutral-800 select-none", children: [
-  /* @__PURE__ */ r("input", { id: o, name: s, type: "checkbox", required: i, className: "peer sr-only", ...n }),
+}) => /* @__PURE__ */ m("label", { htmlFor: t, className: "text-medium flex cursor-pointer items-center gap-2 text-neutral-800 select-none", children: [
+  /* @__PURE__ */ r(
+    "input",
+    {
+      "data-qa": s,
+      id: t,
+      name: i,
+      type: "checkbox",
+      required: a,
+      className: "peer sr-only",
+      ...n
+    }
+  ),
   /* @__PURE__ */ r(
     "div",
     {
-      className: m(
+      className: c(
         "flex h-5.5 w-5.5 items-center justify-center rounded transition-colors",
         "peer-focus-visible:ring-primary-500 peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
-        !t && !e && "hover:bg-primary-200 border border-neutral-800 bg-white",
+        !o && !e && "hover:bg-primary-200 border border-neutral-800 bg-white",
         e && "border-primary-500 bg-primary-200 border-2",
-        t && "border-error-500 bg-error-20 border"
+        o && "border-error-500 bg-error-20 border"
       ),
-      children: e && /* @__PURE__ */ r(c, {})
+      children: e && /* @__PURE__ */ r(p, {})
     }
   ),
   /* @__PURE__ */ r("span", { className: "leading-tight text-neutral-800", children: l })
 ] });
 export {
-  u as Checkbox
+  d as Checkbox
 };

package/dist/components/ContactFormSection.d.ts

@@ -9,6 +9,7 @@ export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'chil
     size?: ButtonSize;
     variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
+    dataQa?: string;
 }
 
 export type ButtonSize = 'small' | 'default' | 'large';
@@ -27,6 +28,7 @@ export interface ContactFormFeedbackProps {
 }
 
 export declare interface ContactFormFieldProps {
+    dataQa: string;
     label: string;
     id: string;
     name: string;

package/dist/components/ContactUsSection.d.ts

@@ -11,6 +11,7 @@ export declare interface ContactUsSectionProps {
         icon: ReactNode;
         helper?: string;
         url?: string;
+        dataQa?: string;
     }>;
 }
 

package/dist/components/ContactUsSection.js

@@ -1,17 +1,17 @@
 import { jsx as l, jsxs as r } from "react/jsx-runtime";
-import a from "clsx";
+import t from "clsx";
 import { SectionHeading as c } from "./SectionHeading.js";
-const d = ({ header: t, contactOptions: s }) => s.length === 0 ? null : /* @__PURE__ */ l("section", { className: "bg-neutral-25 px-4 pt-16 pb-20", children: /* @__PURE__ */ r("div", { className: "mx-auto max-w-6xl space-y-10", children: [
-  /* @__PURE__ */ l(c, { ...t, className: "px-6" }),
-  /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-6 sm:flex-row sm:items-start sm:justify-center", children: s.map((e) => /* @__PURE__ */ r(
+const d = ({ header: s, contactOptions: a }) => a.length === 0 ? null : /* @__PURE__ */ l("section", { className: "bg-neutral-25 px-4 pt-16 pb-20", children: /* @__PURE__ */ r("div", { className: "mx-auto max-w-6xl space-y-10", children: [
+  /* @__PURE__ */ l(c, { ...s, className: "px-6" }),
+  /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-6 sm:flex-row sm:items-start sm:justify-center", children: a.map((e) => /* @__PURE__ */ r(
     "article",
     {
-      className: a(
+      className: t(
         "relative flex h-36 w-52 flex-col items-center justify-center gap-4 rounded bg-white text-center shadow-sm",
         e.url && 'cursor-pointer [&_a]:before:absolute [&_a]:before:inset-0 [&_a]:before:content-[""]'
       ),
       children: [
-        e.url && /* @__PURE__ */ l("a", { href: e.url, children: /* @__PURE__ */ l("span", { className: "sr-only", children: e.title }) }),
+        e.url && /* @__PURE__ */ l("a", { "data-qa": e.dataQa, href: e.url, children: /* @__PURE__ */ l("span", { className: "sr-only", children: e.title }) }),
         /* @__PURE__ */ l("div", { className: "bg-primary-50 rounded-full p-3", children: e.icon }),
         /* @__PURE__ */ r("div", { className: "flex flex-col items-center justify-center", children: [
           /* @__PURE__ */ l("p", { className: "text-neutral-800", children: e.title }),

package/dist/components/ContactUsTemplate.d.ts

@@ -9,6 +9,7 @@ export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'chil
     size?: ButtonSize;
     variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
+    dataQa?: string;
 }
 
 export type ButtonSize = 'small' | 'default' | 'large';
@@ -27,6 +28,7 @@ export interface ContactFormFeedbackProps {
 }
 
 export interface ContactFormFieldProps {
+    dataQa: string;
     label: string;
     id: string;
     name: string;

package/dist/components/ConversionSection.d.ts

@@ -7,6 +7,7 @@ export declare interface ConversionSectionProps {
     icon: ReactNode;
     title: string;
     uploadZone: UploadZoneProps;
+    dataQa?: string;
 }
 
 export interface UploadZoneProps {
@@ -17,5 +18,6 @@ export interface UploadZoneProps {
     containerClassName?: string;
     onAddDocument?: () => void;
     onDropDocument?: (e: React.DragEvent<HTMLDivElement>) => void;
+    dataQa?: string;
 }
 

package/dist/components/ConversionSection.js

@@ -1,12 +1,12 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { UploadZone as s } from "./UploadZone.js";
-const n = ({ icon: a, title: t, uploadZone: r }) => /* @__PURE__ */ e("section", { className: "bg-white px-6 py-8 xl:px-0", children: /* @__PURE__ */ l("div", { className: "bg-ratafia mx-auto flex w-full max-w-300 shrink flex-col gap-6 rounded-2xl p-6 md:flex-row md:items-center md:gap-10 md:p-8 lg:pe-10 lg:pl-16 xl:items-start xl:gap-20", children: [
+import { UploadZone as m } from "./UploadZone.js";
+const x = ({ icon: a, title: t, uploadZone: r, dataQa: s }) => /* @__PURE__ */ e("section", { className: "bg-white px-6 py-8 xl:px-0", children: /* @__PURE__ */ l("div", { className: "bg-ratafia mx-auto flex w-full max-w-300 shrink flex-col gap-6 rounded-2xl p-6 md:flex-row md:items-center md:gap-10 md:p-8 lg:pe-10 lg:pl-16 xl:items-start xl:gap-20", children: [
   /* @__PURE__ */ l("div", { className: "flex flex-col gap-4", children: [
     /* @__PURE__ */ e("span", { className: "xl:pt-12", children: a }),
     /* @__PURE__ */ e("h4", { className: "text-super-large md:text-extra-large font-bold text-white", children: t })
   ] }),
-  /* @__PURE__ */ e(s, { ...r, containerClassName: "md:min-w-77 lg:min-w-115" })
+  /* @__PURE__ */ e(m, { dataQa: s, ...r, containerClassName: "md:min-w-77 lg:min-w-115" })
 ] }) });
 export {
-  n as ConversionSection
+  x as ConversionSection
 };

package/dist/components/CookiesBar.d.ts

@@ -7,6 +7,7 @@ export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'chil
     size?: ButtonSize;
     variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
+    dataQa?: string;
 }
 
 export type ButtonSize = 'small' | 'default' | 'large';

package/dist/components/ElectronicSignatureTemplate.d.ts

@@ -129,5 +129,6 @@ export interface UploadZoneProps {
     containerClassName?: string;
     onAddDocument?: () => void;
     onDropDocument?: (e: React.DragEvent<HTMLDivElement>) => void;
+    dataQa?: string;
 }
 

package/dist/components/Footer.d.ts

@@ -20,6 +20,7 @@ export declare interface FooterProps {
         phoneNumber: string;
         contactHoursText: string;
         contactHours: string;
+        dataQa?: string;
     };
     logoGray?: ReactNode;
     socialLinks?: ReactNode[];

package/dist/components/Footer.js

@@ -1,7 +1,7 @@
 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 h } from "./FooterNav.js";
 const g = ({
   nav: r,
   contactInfo: t,
@@ -14,13 +14,13 @@ const g = ({
   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(f, { ...a }, a.title)),
+    r.map((a) => /* @__PURE__ */ e(h, { ...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__ */ 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 }) }),
+          /* @__PURE__ */ e("div", { className: "mb-2 w-full text-center sm:hidden", children: /* @__PURE__ */ e(o, { dataQa: t.dataQa, phoneNumber: t.phoneNumber }) }),
           /* @__PURE__ */ l("p", { className: "text-neutral-25 text-medium md:text-small text-center md:text-left", children: [
             t.contactHoursText,
             " ",

package/dist/components/Header.d.ts

@@ -34,6 +34,7 @@ export interface MobileContactInfo {
     phoneNumber: string;
     contactHoursLabel?: string;
     contactHours?: string;
+    dataQa?: string;
 }
 
 export interface MobileMenuProps {

package/dist/components/Hero2Section.d.ts

@@ -27,5 +27,6 @@ export interface UploadZoneProps {
     containerClassName?: string;
     onAddDocument?: () => void;
     onDropDocument?: (e: React.DragEvent<HTMLDivElement>) => void;
+    dataQa?: string;
 }
 

package/dist/components/HowItWorksLawGeniusSection.js

@@ -4,25 +4,25 @@ import { LawGeniusImageShell as p } from "./LawGeniusImageShell.js";
 import { Markdown as t } from "./Markdown.js";
 const v = ({
   sectionTitle: s,
-  contentMarkdown: r,
+  contentMarkdown: m,
   descriptionMarkdown: a,
-  steps: m,
+  steps: r,
   belowStepsMarkdown: i,
   cta: n,
   imageUrl: c,
   imageAlt: x
 }) => {
-  const d = a.trim().length > 0, o = 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-ratafia 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: [
+  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: r }) }),
-      d && /* @__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__ */ 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: [
-        m,
-        o && /* @__PURE__ */ e(
+        r,
+        d && /* @__PURE__ */ e(
           t,
           {
             variant: "ratafia",

package/dist/components/HowItWorksTemplate.d.ts

@@ -32,6 +32,7 @@ export declare type HowItWorksProcessStep = {
     imageAlt: string;
     background: 'bg-white' | 'bg-neutral-25';
     reverse?: boolean;
+    imageFirstOnMobile?: boolean;
 };
 
 export declare const HowItWorksTemplate: FC<HowItWorksTemplateProps>;

package/dist/components/HowItWorksTemplate.js

@@ -11,46 +11,46 @@ 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 = (a) => {
-  const m = /* @__PURE__ */ r("div", { className: "w-full min-w-0 space-y-4 text-neutral-800 md:shrink md:grow-0 md:basis-1/2 lg:basis-[47%]", children: [
-    /* @__PURE__ */ e("h2", { className: "font-lora text-[2.05rem] leading-[1.15] font-bold text-neutral-800", children: a.title }),
-    /* @__PURE__ */ e("div", { className: "text-small space-y-3 text-neutral-700", children: /* @__PURE__ */ e(i, { variant: "legal", content: a.bodyMarkdown }) })
-  ] }), t = /* @__PURE__ */ e("div", { className: "w-full min-w-0 md:shrink md:grow-0 md:basis-1/2 lg:w-1/2 lg:max-w-[50%] lg:basis-auto", children: /* @__PURE__ */ e(W, { src: a.imageUrl, alt: a.imageAlt }) });
-  return { firstColumn: m, secondColumn: t };
-}, K = ({ hero: a, processSteps: m, lawGenius: t, resources: n }) => {
-  const d = a.introMarkdown.trim().length > 0, p = a.closingMarkdown.trim().length > 0, x = n.supportBodyMarkdown.trim().length > 0, g = t.belowStepsMarkdown.trim().length > 0, { examples: s } = n, f = /* @__PURE__ */ e(
+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: "small",
+      size: "large",
       variant: "primary-green",
-      className: "text-small inline-flex w-fit justify-center !rounded-md font-bold",
-      children: /* @__PURE__ */ e("a", { href: t.cta.href, className: b, children: t.cta.label })
+      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: a.eyebrow }),
+          /* @__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: a.title })
+        /* @__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(
         A,
         {
           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: a.imageUrl, alt: a.imageAlt, priority: a.imagePriority }),
+          image: /* @__PURE__ */ e(S, { src: t.imageUrl, alt: t.imageAlt, priority: t.imagePriority }),
           cta: {
             size: "large",
             variant: "primary-green",
             className: "text-medium mt-8 w-full justify-center font-bold",
-            children: /* @__PURE__ */ e("a", { href: a.cta.href, className: k, children: a.cta.label })
+            children: /* @__PURE__ */ e("a", { href: t.cta.href, className: k, children: t.cta.label })
           },
           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: a.introMarkdown }),
-            /* @__PURE__ */ e("ul", { className: "text-medium space-y-3", children: a.bullets.map((l) => /* @__PURE__ */ r("li", { className: "flex items-start gap-2", 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: [
@@ -60,7 +60,7 @@ const U = (a) => {
                 l.text
               ] })
             ] }, l.id)) }),
-            p && /* @__PURE__ */ e(i, { variant: "legal", content: a.closingMarkdown })
+            p && /* @__PURE__ */ e(i, { variant: "legal", content: t.closingMarkdown })
           ] })
         }
       )
@@ -73,8 +73,7 @@ const U = (a) => {
           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",
-            "!flex-col-reverse lg:!flex-row",
-            l.reverse && "lg:!flex-row-reverse"
+            l.imageFirstOnMobile ? "!flex-col-reverse md:!flex-row" : "!flex-col md:!flex-row"
           ),
           firstColumn: u,
           secondColumn: h
@@ -85,9 +84,9 @@ const U = (a) => {
     /* @__PURE__ */ e(
       M,
       {
-        title: t.title,
-        content: t.contentMarkdown,
-        stepsSlot: /* @__PURE__ */ e(w, { children: t.steps.map((l) => /* @__PURE__ */ e(
+        title: a.title,
+        content: a.contentMarkdown,
+        stepsSlot: /* @__PURE__ */ e(w, { children: a.steps.map((l) => /* @__PURE__ */ e(
           I,
           {
             title: l.title,
@@ -101,14 +100,14 @@ const U = (a) => {
           i,
           {
             variant: "ratafia",
-            content: t.belowStepsMarkdown,
+            content: a.belowStepsMarkdown,
             className: y
           }
         ) : null,
         cta: f,
         skipCtaWrapper: !0,
-        image: /* @__PURE__ */ e(B, { src: t.imageUrl, alt: t.imageAlt }),
-        sectionClassName: t.sectionClassName ?? "bg-neutral-25 px-6 pt-16 pb-12 sm:px-10 lg:px-ds-10xl"
+        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"
       }
     ),
     /* @__PURE__ */ e(
@@ -116,23 +115,23 @@ const U = (a) => {
       {
         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: n.imageUrl, alt: n.imageAlt }) }),
+        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: [
-          s.eyebrow && /* @__PURE__ */ e("p", { className: "text-xs font-semibold tracking-[0.2em] text-neutral-500 uppercase", children: s.eyebrow }),
-          s.title && /* @__PURE__ */ e("h3", { className: "font-lora text-[2rem] leading-[1.2] font-bold text-neutral-800", children: s.title }),
-          x && /* @__PURE__ */ e("div", { className: `text-small space-y-3 text-neutral-700 ${C}`, children: /* @__PURE__ */ e(i, { variant: "legal", content: n.supportBodyMarkdown }) }),
-          s.rows.length > 0 && /* @__PURE__ */ e("dl", { className: "text-small space-y-2 text-neutral-700", children: s.rows.map((l) => /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-x-2", 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}`)) }),
-          s.footer && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: s.footer }),
+          n.footer && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: n.footer }),
           /* @__PURE__ */ e(
             o,
             {
               size: "small",
               variant: "primary-green",
               className: "text-small inline-flex w-auto justify-center font-bold",
-              children: /* @__PURE__ */ e("a", { href: n.cta.href, className: v, children: n.cta.label })
+              children: /* @__PURE__ */ e("a", { href: s.cta.href, className: v, children: s.cta.label })
             }
           )
         ] })
@@ -141,5 +140,5 @@ const U = (a) => {
   ] });
 };
 export {
-  K as HowItWorksTemplate
+  J as HowItWorksTemplate
 };

package/dist/components/Input.d.ts

@@ -4,6 +4,7 @@ import { HTMLInputTypeAttribute } from 'react';
 export declare const Input: FC<InputProps>;
 
 export declare interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    dataQa?: string;
     label: string;
     id: string;
     name: string;