@npm_leadtech/legal-contracts-ui 0.97.3 → 0.98.0

package/dist/components/AboutUsTemplate.d.ts

@@ -42,12 +42,8 @@ export interface ContactUsSectionProps {
 
 export interface CtaSectionProps {
     title: string;
-    paragraph?: ReactNode;
     cta: ButtonProps;
-    children?: ReactNode;
-    className?: string;
-    contentClassName?: string;
-    childrenClassName?: string;
+    children: ReactNode;
 }
 
 export interface ExpertsSectionProps {

package/dist/components/AiLegalDocumentReviewerTemplate.d.ts

@@ -5,13 +5,14 @@ export declare const AiLegalDocumentReviewerTemplate: FC<AiLegalDocumentReviewer
 
 export declare type AiLegalDocumentReviewerTemplateProps = {
     hero: Omit<Hero2SectionProps, 'variant'>;
-    howItWorks: HowItWorksSectionProps;
+    howItWorks: Omit<HowItWorksSectionProps, 'variant'>;
     fastAndSimple: Omit<FastAndSimpleSectionProps, 'variant'>;
+    conversion: ConversionSectionProps;
     insights: FeaturesSectionProps;
-    signAndSend: BannerTagSectionProps;
     trustPilot: ReactNode;
-    askQuestions: BannerTagSectionProps;
-    faq: FaqSectionProps;
+    askQuestions: Omit<BannerTagSectionProps, 'variant'>;
+    faq: Omit<FaqSectionProps, 'className'>;
+    toast?: ToastProps;
 };
 
 export interface BannerTagSectionProps {
@@ -24,6 +25,13 @@ export interface BannerTagSectionProps {
         middle: TagProps | null;
         bottom: TagProps | null;
     };
+    variant: 'esign' | 'ratafia';
+}
+
+export interface ConversionSectionProps {
+    icon: ReactNode;
+    title: string;
+    uploadZone: UploadZoneProps;
 }
 
 export interface FaqItemProps {
@@ -86,6 +94,7 @@ export interface HowItWorksSectionProps {
     title: string;
     description: string;
     steps: HowItWorksStep[];
+    variant: 'esign' | 'ratafia';
 }
 
 export interface HowItWorksStep {
@@ -109,6 +118,14 @@ export interface TagProps {
     className?: string;
 }
 
+export interface ToastProps {
+    show: boolean;
+    title: string;
+    message: string;
+    type?: 'success' | 'error' | 'default';
+    onClose: () => void;
+}
+
 export interface UploadZoneProps {
     uploadPromptText: string;
     addDocumentLabel: string;

package/dist/components/AiLegalDocumentReviewerTemplate.js

@@ -1,32 +1,33 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { ConversionSection as s } from "./ConversionSection.js";
 import { Hero2Section as f } from "./Hero2Section.js";
 import { HowItWorksSection as x } from "./HowItWorksSection.js";
-import { FastAndSimpleSection as u } from "./FastAndSimpleSection.js";
-import { FeaturesSection as S } from "./FeaturesSection.js";
-import { BannerTagSection as a } from "./BannerTagSection.js";
-import { FaqSection as d } from "./FaqSection.js";
-const y = ({
+import { FastAndSimpleSection as g } from "./FastAndSimpleSection.js";
+import { FeaturesSection as u } from "./FeaturesSection.js";
+import { BannerTagSection as S } from "./BannerTagSection.js";
+import { FaqSection as v } from "./FaqSection.js";
+import { Toast as w } from "./Toast.js";
+const H = ({
   hero: o,
-  howItWorks: r,
-  fastAndSimple: t,
+  howItWorks: t,
+  fastAndSimple: i,
+  conversion: e,
   insights: m,
-  signAndSend: i,
   trustPilot: n,
   askQuestions: l,
-  faq: s
-}) => {
-  const { ...c } = o;
-  return /* @__PURE__ */ p("main", { className: "flex w-full flex-col", children: [
-    /* @__PURE__ */ e(f, { ...c, variant: "ratafia" }),
-    /* @__PURE__ */ e(x, { ...r }),
-    /* @__PURE__ */ e(u, { ...t, variant: "ratafia" }),
-    /* @__PURE__ */ e(S, { ...m }),
-    /* @__PURE__ */ e(a, { ...i }),
-    /* @__PURE__ */ e("div", { className: "w-full max-w-254 md:h-34", children: n }),
-    /* @__PURE__ */ e(a, { ...l }),
-    /* @__PURE__ */ e("section", { className: "bg-neutral-25 px-6 py-16 sm:px-10 lg:px-32", children: /* @__PURE__ */ e(d, { ...s, className: "mx-auto max-w-6xl space-y-6" }) })
-  ] });
-};
+  faq: p,
+  toast: r
+}) => /* @__PURE__ */ c("main", { className: "bg-neutral-25 w-full flex-1", children: [
+  /* @__PURE__ */ a(f, { ...o, variant: "ratafia" }),
+  /* @__PURE__ */ a(x, { ...t, variant: "ratafia" }),
+  /* @__PURE__ */ a(g, { ...i, variant: "ratafia" }),
+  /* @__PURE__ */ a(u, { ...m }),
+  /* @__PURE__ */ a(s, { ...e }),
+  /* @__PURE__ */ a("section", { className: "bg-white px-6 py-8 lg:px-8 lg:py-12 xl:px-0", children: /* @__PURE__ */ a("div", { className: "mx-auto w-full max-w-254 md:h-34", children: n }) }),
+  /* @__PURE__ */ a(S, { ...l, variant: "ratafia" }),
+  /* @__PURE__ */ a(v, { ...p, className: "mx-auto max-w-250 px-6 py-12 lg:px-8 lg:pb-20 xl:px-0" }),
+  r && /* @__PURE__ */ a(w, { ...r })
+] });
 export {
-  y as AiLegalDocumentReviewerTemplate
+  H as AiLegalDocumentReviewerTemplate
 };

package/dist/components/BannerTagSection.d.ts

@@ -13,6 +13,7 @@ export declare interface BannerTagSectionProps {
         middle: TagProps | null;
         bottom: TagProps | null;
     };
+    variant: 'esign' | 'ratafia';
 }
 
 export interface TagProps {

package/dist/components/BannerTagSection.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import n from "clsx";
-import { Markdown as d } from "./Markdown.js";
-import { LinkWrapper as m } from "./LinkWrapper.js";
-const s = ({ title: r, icon: a, variant: i, className: o = "" }) => /* @__PURE__ */ t("div", { className: n("text-small flex items-center gap-1 rounded shadow-lg", {
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import d from "clsx";
+import { Markdown as m } from "./Markdown.js";
+import { LinkWrapper as p } from "./LinkWrapper.js";
+const s = ({ title: t, icon: r, variant: i, className: o = "" }) => /* @__PURE__ */ l("div", { className: d("text-small flex items-center gap-1 rounded shadow-lg", {
   default: "text-neutral-600 bg-neutral-25 p-2",
   highlight: "text-primary-500 font-bold bg-primary-100 border border-primary-300 p-1",
   dark: "text-white font-bold bg-primary-800 p-2"
 }[i], o), children: [
-  a,
-  r
-] }), b = ({ title: r, description: a, cta: i, rightImage: o, tags: l }) => /* @__PURE__ */ e("section", { className: "bg-white px-6 py-8 lg:px-8 lg:py-12 xl:px-0", children: /* @__PURE__ */ t("div", { className: "bg-neutral-25 mx-auto flex w-full max-w-298 rounded-2xl p-8 lg:gap-20 lg:px-16 lg:pt-12 lg:pb-0", children: [
-  /* @__PURE__ */ t("div", { className: "flex flex-col gap-8 lg:pb-12", children: [
-    /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ e("h3", { className: "text-super-large text-primary-900 font-bold", children: r }),
-      /* @__PURE__ */ e(d, { className: "text-medium text-neutral-800 [&_p:last-child]:mb-0", content: a })
+  r,
+  t
+] }), g = ({ title: t, description: r, cta: i, rightImage: o, tags: a, variant: n }) => /* @__PURE__ */ e("section", { className: "bg-white px-6 py-8 lg:px-8 lg:py-12 xl:px-0", children: /* @__PURE__ */ l("div", { className: "bg-neutral-25 mx-auto flex w-full max-w-298 rounded-2xl p-8 lg:gap-20 lg:px-16 lg:pt-12 lg:pb-0", children: [
+  /* @__PURE__ */ l("div", { className: "flex flex-col gap-8 lg:pb-12", children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ e("h3", { className: "text-super-large text-primary-900 font-bold", children: t }),
+      /* @__PURE__ */ e(m, { className: "text-medium text-neutral-800 [&_p:last-child]:mb-0", content: r })
     ] }),
-    /* @__PURE__ */ e(m, { className: "w-fit", variant: "primary-green", children: i })
+    /* @__PURE__ */ e(p, { className: "w-fit", variant: "primary-green", children: i })
   ] }),
-  /* @__PURE__ */ t("div", { className: "relative hidden shrink-0 self-end lg:block", children: [
-    /* @__PURE__ */ e("div", { className: "overflow-hidden", children: o }),
-    l.top && /* @__PURE__ */ e(s, { ...l.top, className: "absolute -top-3 left-20" }),
-    l.middle && /* @__PURE__ */ e(s, { ...l.middle, className: "absolute bottom-36 -left-4" }),
-    l.bottom && /* @__PURE__ */ e(s, { ...l.bottom, className: "absolute top-19 -right-4" })
+  /* @__PURE__ */ l("div", { className: "relative hidden shrink-0 self-end lg:block", children: [
+    /* @__PURE__ */ e("div", { className: d("overflow-hidden", n === "ratafia" && "rounded-t-md shadow-sm"), children: o }),
+    a.top && /* @__PURE__ */ e(s, { ...a.top, className: "absolute -top-3 left-50/100 translate-x-[-50%]" }),
+    a.middle && /* @__PURE__ */ e(s, { ...a.middle, className: "absolute bottom-36 -left-4" }),
+    a.bottom && /* @__PURE__ */ e(s, { ...a.bottom, className: "absolute top-19 -right-4" })
   ] })
 ] }) });
 export {
-  b as BannerTagSection
+  g as BannerTagSection
 };

package/dist/components/ConversionSection.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export declare const ConversionSection: FC<ConversionSectionProps>;
+
+export declare interface ConversionSectionProps {
+    icon: ReactNode;
+    title: string;
+    uploadZone: UploadZoneProps;
+}
+
+export interface UploadZoneProps {
+    uploadPromptText: string;
+    addDocumentLabel: string;
+    fileSizeText: string;
+    disclaimer: string;
+    containerClassName?: string;
+    onAddDocument?: () => void;
+    onDropDocument?: (e: React.DragEvent<HTMLDivElement>) => void;
+}
+

package/dist/components/ConversionSection.js

@@ -0,0 +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: [
+  /* @__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" })
+] }) });
+export {
+  n as ConversionSection
+};

package/dist/components/CtaSection.d.ts

@@ -13,36 +13,14 @@ 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 const CtaFeatureTag: FC<CtaFeatureTagProps>;
-
-export declare interface CtaFeatureTagProps {
-    icon: string;
-    text: string;
-    className?: string;
-}
-
-export declare const CtaSample: FC<CtaSampleProps>;
-
-export declare interface CtaSampleProps {
-    image: ReactNode;
-    children?: ReactNode;
-    className?: string;
-}
-
 export declare const CtaSection: FC<CtaSectionProps>;
 
 export declare interface CtaSectionProps {
     title: string;
-    paragraph?: ReactNode;
     cta: ButtonProps;
-    children?: ReactNode;
-    className?: string;
-    contentClassName?: string;
-    childrenClassName?: string;
+    children: ReactNode;
 }
 
-export declare const CtaSummarizedTag: FC<CtaFeatureTagProps>;
-
 export type IconPosition = 'left' | 'right' | 'top';
 
 export type ResponsiveButtonVariant = ButtonVariant | {

package/dist/components/CtaSection.js

@@ -1,53 +1,12 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Button as c } from "./Button.js";
-const p = ({
-  title: a,
-  paragraph: l,
-  cta: t,
-  children: s,
-  className: m = "",
-  contentClassName: i = "",
-  childrenClassName: d = "hidden lg:flex"
-}) => /* @__PURE__ */ e("section", { className: `flex w-full justify-center px-6 py-8 md:px-8 md:py-12 ${m}`, children: /* @__PURE__ */ r(
-  "div",
-  {
-    className: `bg-primary-50 mx-auto flex w-full max-w-6xl flex-col items-center rounded-[1.25rem] px-8 pt-8 pb-0 md:px-16 md:pt-12 md:pb-0 lg:flex-row lg:items-stretch lg:gap-20 xl:pr-20 xl:pl-16 ${i}`,
-    children: [
-      /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col items-start justify-center gap-8 pb-8 md:pb-12 lg:pb-[3rem]", children: [
-        /* @__PURE__ */ r("div", { className: "flex flex-col items-start gap-4", children: [
-          /* @__PURE__ */ e("h2", { className: "text-primary-900 text-[28px] leading-[32px] font-bold tracking-tight", children: a }),
-          !!l && /* @__PURE__ */ e("div", { className: "text-super-medium text-neutral-500", children: l })
-        ] }),
-        /* @__PURE__ */ e(c, { size: "large", variant: "primary-darkgreen", className: "px-4 py-2.5", ...t })
-      ] }),
-      !!s && /* @__PURE__ */ e("div", { className: `w-full justify-center lg:w-auto lg:items-end ${d}`, children: s })
-    ]
-  }
-) }), o = ({ image: a, children: l, className: t = "" }) => /* @__PURE__ */ r("div", { className: `relative flex items-end ${t}`, children: [
-  /* @__PURE__ */ e("div", { className: "[&_img]:rounded-t-[0.75rem] [&_img]:shadow-[0px_-2px_6px_0px_rgba(2,55,74,0.15)] md:[&_img]:max-w-[25rem] lg:[&_img]:max-h-[30rem]", children: a }),
-  l
-] }), g = ({ icon: a, text: l, className: t = "" }) => /* @__PURE__ */ r(
-  "div",
-  {
-    className: `bg-primary-50 border-primary-200 shadow-small absolute flex items-center justify-center gap-1 rounded-md border p-1 ${t}`,
-    children: [
-      /* @__PURE__ */ e("img", { src: a, alt: "", role: "img", className: "h-4 w-4" }),
-      /* @__PURE__ */ e("span", { className: "text-primary-900 text-small font-bold", children: l })
-    ]
-  }
-), u = ({ icon: a, text: l, className: t = "" }) => /* @__PURE__ */ r(
-  "div",
-  {
-    className: `shadow-small absolute flex items-center justify-center gap-1 rounded-md bg-neutral-50 p-2 ${t}`,
-    children: [
-      /* @__PURE__ */ e("img", { src: a, alt: "", role: "img", className: "h-5 w-5" }),
-      /* @__PURE__ */ e("span", { className: "text-small text-neutral-500", children: l })
-    ]
-  }
-);
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Button as t } from "./Button.js";
+const d = ({ title: r, cta: l, children: s }) => /* @__PURE__ */ e("section", { className: "px-4 py-16", children: /* @__PURE__ */ a("div", { className: "bg-primary-50 mx-auto max-w-6xl rounded-3xl p-10 shadow-sm lg:flex lg:items-center lg:gap-10", children: [
+  /* @__PURE__ */ a("div", { className: "flex-1 space-y-6", children: [
+    /* @__PURE__ */ e("p", { className: "text-super-large text-primary-900 font-bold", children: r }),
+    /* @__PURE__ */ e(t, { size: "large", variant: "primary-darkgreen", ...l })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "mt-10 lg:mt-0", children: /* @__PURE__ */ e("div", { className: "relative rounded-3xl bg-white shadow-lg", children: s }) })
+] }) });
 export {
-  u as CtaFeatureTag,
-  o as CtaSample,
-  p as CtaSection,
-  g as CtaSummarizedTag
+  d as CtaSection
 };

package/dist/components/ElectronicSignatureTemplate.d.ts

@@ -11,18 +11,19 @@ export interface BannerTagSectionProps {
         middle: TagProps | null;
         bottom: TagProps | null;
     };
+    variant: 'esign' | 'ratafia';
 }
 
 export declare const ElectronicSignatureTemplate: FC<ElectronicSignatureTemplateProps>;
 
 export declare interface ElectronicSignatureTemplateProps {
     hero: Omit<Hero2SectionProps, 'variant'>;
-    howItWorks: HowItWorksSectionProps;
+    howItWorks: Omit<HowItWorksSectionProps, 'variant'>;
     fastAndSimple: Omit<FastAndSimpleSectionProps, 'variant'>;
     benefits: FeaturesSectionProps;
     trustPilot: ReactNode;
-    signAndSend: BannerTagSectionProps;
-    faq: FaqSectionProps;
+    signAndSend: Omit<BannerTagSectionProps, 'variant'>;
+    faq: Omit<FaqSectionProps, 'className'>;
     toast?: ToastProps;
 }
 
@@ -86,6 +87,7 @@ export interface HowItWorksSectionProps {
     title: string;
     description: string;
     steps: HowItWorksStep[];
+    variant: 'esign' | 'ratafia';
 }
 
 export interface HowItWorksStep {

package/dist/components/ElectronicSignatureTemplate.js

@@ -1,30 +1,30 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
 import { Hero2Section as s } from "./Hero2Section.js";
 import { HowItWorksSection as c } from "./HowItWorksSection.js";
 import { FastAndSimpleSection as x } from "./FastAndSimpleSection.js";
-import { FeaturesSection as f } from "./FeaturesSection.js";
-import { BannerTagSection as g } from "./BannerTagSection.js";
+import { FeaturesSection as g } from "./FeaturesSection.js";
+import { BannerTagSection as f } from "./BannerTagSection.js";
 import { Toast as S } from "./Toast.js";
 import { FaqSection as u } from "./FaqSection.js";
-const b = ({
-  hero: r,
-  howItWorks: i,
-  fastAndSimple: m,
-  benefits: t,
-  trustPilot: a,
+const T = ({
+  hero: o,
+  howItWorks: r,
+  fastAndSimple: t,
+  benefits: a,
+  trustPilot: m,
   signAndSend: n,
   faq: l,
   toast: e
 }) => /* @__PURE__ */ p("main", { className: "bg-neutral-25 w-full flex-1", children: [
-  /* @__PURE__ */ o(s, { ...r, variant: "esign" }),
-  /* @__PURE__ */ o(c, { ...i }),
-  /* @__PURE__ */ o(x, { ...m, variant: "esign" }),
-  /* @__PURE__ */ o(f, { ...t }),
-  /* @__PURE__ */ o("section", { className: "bg-white px-6 py-8 lg:px-8 lg:py-12 xl:px-0", children: /* @__PURE__ */ o("div", { className: "mx-auto w-full max-w-254 md:h-34", children: a }) }),
-  /* @__PURE__ */ o(g, { ...n }),
-  /* @__PURE__ */ o(u, { ...l, className: "mx-auto max-w-4xl px-4 py-16" }),
-  e && /* @__PURE__ */ o(S, { ...e })
+  /* @__PURE__ */ i(s, { ...o, variant: "esign" }),
+  /* @__PURE__ */ i(c, { ...r, variant: "esign" }),
+  /* @__PURE__ */ i(x, { ...t, variant: "esign" }),
+  /* @__PURE__ */ i(g, { ...a }),
+  /* @__PURE__ */ i("section", { className: "bg-white px-6 py-8 lg:px-8 lg:py-12 xl:px-0", children: /* @__PURE__ */ i("div", { className: "mx-auto w-full max-w-254 md:h-34", children: m }) }),
+  /* @__PURE__ */ i(f, { ...n, variant: "esign" }),
+  /* @__PURE__ */ i(u, { ...l, className: "mx-auto max-w-250 px-6 py-12 lg:px-8 lg:pb-20 xl:px-0" }),
+  e && /* @__PURE__ */ i(S, { ...e })
 ] });
 export {
-  b as ElectronicSignatureTemplate
+  T as ElectronicSignatureTemplate
 };

package/dist/components/FastAndSimpleSection.js

@@ -3,8 +3,8 @@ import t from "clsx";
 import { Markdown as n } from "./Markdown.js";
 const g = ({
   bgImage: r,
-  title: o,
-  description: s,
+  title: s,
+  description: o,
   benefits: c,
   variant: d
 }) => {
@@ -14,13 +14,13 @@ const g = ({
     {
       className: t(
         "relative mx-auto flex w-full max-w-300 flex-col gap-8 overflow-hidden rounded-2xl p-6 md:p-8 lg:p-12",
-        l && "from-primary-900 to-primary-800 bg-linear-to-r",
+        l && "bg-ratafia",
         !l && "bg-neutral-50"
       ),
       children: [
         !!r && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute top-35/100 -right-35 md:-right-50 lg:top-0 lg:right-5", children: r }),
         /* @__PURE__ */ i("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ e("p", { className: t("text-super-large font-bold", l ? "text-white" : "text-neutral-900"), children: o }),
+          /* @__PURE__ */ e("p", { className: t("text-super-large font-bold", l ? "text-white" : "text-neutral-900"), children: s }),
           /* @__PURE__ */ e(
             n,
             {
@@ -28,7 +28,7 @@ const g = ({
                 "text-medium [&_a]:text-primary-700 [&_p:last-child]:mb-0",
                 l ? "text-white" : "text-neutral-800"
               ),
-              content: s
+              content: o
             }
           )
         ] }),

package/dist/components/Hero2Section.js

@@ -1,75 +1,73 @@
-import { jsxs as l, jsx as a, Fragment as d } from "react/jsx-runtime";
-import { UploadZone as p } from "./UploadZone.js";
+import { jsxs as l, Fragment as p, jsx as a } from "react/jsx-runtime";
+import { UploadZone as f } from "./UploadZone.js";
 import t from "clsx";
-import { Markdown as h } from "./Markdown.js";
-const u = ({
-  title: n,
-  description: m,
-  highlights: o,
+import { renderRatafiaTitle as h } from "./Hero2SectionTitle.utils.js";
+import { Markdown as s } from "./Markdown.js";
+const v = ({
+  title: i,
+  description: o,
+  highlights: c,
   variant: x,
-  uploadZone: c,
-  bgLeft: r,
-  bgRight: s
+  uploadZone: d,
+  bgLeft: n,
+  bgRight: m
 }) => {
   const e = x === "ratafia";
   return /* @__PURE__ */ l(
     "section",
     {
       className: t(
-        "relative flex justify-center overflow-hidden",
-        e && "bg-primary-900 isolate px-6 py-16 text-white sm:px-10 lg:px-24",
+        "relative flex justify-center overflow-hidden px-6 pt-10 pb-20 md:pb-20 lg:px-8 lg:pt-20 xl:gap-20 xl:px-0",
+        e && "bg-ratafia",
         !e && "bg-neutral-50"
       ),
       children: [
-        e ? /* @__PURE__ */ l("div", { className: "pointer-events-none absolute inset-0", children: [
-          /* @__PURE__ */ a("div", { className: "from-primary-800/70 via-primary-900 to-primary-900 absolute inset-0 bg-linear-to-br" }),
-          /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-white/10 mix-blend-lighten" })
-        ] }) : /* @__PURE__ */ l(d, { children: [
-          !!r && /* @__PURE__ */ a("div", { className: "absolute -left-25 hidden lg:block xl:left-0", children: r }),
-          !!s && /* @__PURE__ */ a("div", { className: "absolute -right-15 bottom-0 xl:right-5", children: s })
+        !e && /* @__PURE__ */ l(p, { children: [
+          !!n && /* @__PURE__ */ a("div", { className: "absolute -left-25 hidden lg:block xl:left-0", children: n }),
+          !!m && /* @__PURE__ */ a("div", { className: "absolute -right-15 bottom-0 xl:right-5", children: m })
         ] }),
-        /* @__PURE__ */ l("div", { className: "mx-auto flex max-w-300 shrink flex-col gap-10 px-6 pt-10 pb-20 md:flex-row md:items-center md:pb-26 lg:px-8 lg:pt-20 xl:gap-20 xl:px-0", children: [
+        /* @__PURE__ */ l("div", { className: "mx-auto flex max-w-300 shrink flex-col gap-10 md:flex-row md:items-center xl:gap-20", children: [
           /* @__PURE__ */ l("div", { className: "flex flex-col gap-4", children: [
             /* @__PURE__ */ a(
               "h1",
               {
                 className: t(
                   "text-extra-large leading-tight font-bold",
-                  e && "text-white",
-                  !e && "text-primary-900"
+                  !e && "text-primary-900",
+                  e && "text-white"
                 ),
-                children: n
+                children: e ? h(i) : i
               }
             ),
             /* @__PURE__ */ a(
-              h,
+              s,
               {
                 className: t("text-medium [&_p:last-child]:mb-0", e ? "text-white" : "text-neutral-800"),
-                content: m
+                content: o
               }
             ),
-            /* @__PURE__ */ a("div", { className: "flex gap-4", children: o.map((i) => /* @__PURE__ */ l(
+            /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-4", children: c.map((r) => /* @__PURE__ */ l(
               "span",
               {
                 className: t(
-                  "text-small flex flex-nowrap items-center gap-1 rounded p-1",
+                  "text-small flex flex-nowrap items-center gap-1 rounded px-2 py-1",
                   e && "bg-primary-50 text-primary-800 font-semibold",
                   !e && "bg-primary-800 text-primary-50"
                 ),
                 children: [
-                  i.icon,
-                  i.label
+                  /* @__PURE__ */ a("span", { className: "flex shrink-0", children: r.icon }),
+                  /* @__PURE__ */ a(s, { content: r.label, className: "text-small [&_p:last-child]:mb-0" })
                 ]
               },
-              i.id
+              r.id
             )) })
           ] }),
-          /* @__PURE__ */ a(p, { ...c, containerClassName: "md:min-w-85 lg:min-w-115 xl:min-w-140" })
+          /* @__PURE__ */ a(f, { ...d, containerClassName: "md:min-w-85 lg:min-w-115 xl:min-w-140" })
         ] })
       ]
     }
   );
 };
 export {
-  u as Hero2Section
+  v as Hero2Section
 };

package/dist/components/Hero2SectionTitle.utils.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+
+export declare const renderRatafiaTitle: (title: string) => ReactNode[];
+

package/dist/components/Hero2SectionTitle.utils.js

@@ -0,0 +1,18 @@
+import { jsx as _ } from "react/jsx-runtime";
+import m from "clsx";
+const p = /<span class=(?:"([^"]*)"|'([^']*)')>([\s\S]*?)<\/span>/g, A = /<[^>]*>/g, T = "jumbotron-ratafia-content__title__text__icon", f = "inline-flex items-center text-primary-900 font-extrabold bg-secondary-300 px-1.5 rounded-sm", d = (n) => {
+  const e = [];
+  let t = 0;
+  for (const s of n.matchAll(p)) {
+    const a = s.index;
+    a > t && e.push(n.slice(t, a));
+    const o = s[1] || s[2] || "", c = s[3].replaceAll(A, ""), l = `ratafia-title-${String(a)}-${o}-${c}`, r = o.split(" ").includes(T), i = m(o, r && f);
+    e.push(
+      /* @__PURE__ */ _("span", { className: i, children: c }, l)
+    ), t = a + s[0].length;
+  }
+  return t < n.length && e.push(n.slice(t)), e;
+};
+export {
+  d as renderRatafiaTitle
+};

package/dist/components/HowItWorksSection.d.ts

@@ -8,6 +8,7 @@ export declare interface HowItWorksSectionProps {
     title: string;
     description: string;
     steps: HowItWorksStep[];
+    variant: 'esign' | 'ratafia';
 }
 
 export declare interface HowItWorksStep {