@npm_leadtech/legal-contracts-ui 0.165.2 → 0.165.3

package/dist/components/ContactFormSection.js

@@ -3,70 +3,70 @@ import { Textarea as b } from "./Textarea.js";
 import { Checkbox as v } from "./Checkbox.js";
 import { ClearIcon as y } from "./ClearIcon.js";
 import { DoneIcon as w } from "./DoneIcon.js";
-import { Input as n } from "./Input.js";
+import { Input as s } from "./Input.js";
 import { Select as j } from "./Select.js";
-import { Markdown as I } from "./Markdown.js";
-import { InfoIcon as S } from "./InfoIcon.js";
+import { Markdown as k } from "./Markdown.js";
+import { InfoIcon as I } from "./InfoIcon.js";
 import { Button as o } from "./Button.js";
-import { LinkWrapper as k } from "./LinkWrapper.js";
-const C = () => /* @__PURE__ */ e("div", { role: "status", "aria-live": "polite", className: "mt-6 flex items-center justify-center rounded py-6", children: /* @__PURE__ */ e("div", { className: "border-primary-500 h-[25px] w-[25px] animate-spin rounded-full border-3 border-t-transparent" }) }), L = ({ title: r, message: l, cta: i }) => /* @__PURE__ */ t("div", { role: "status", "aria-live": "polite", className: "flex flex-col items-center justify-center gap-8 px-4 py-3", children: [
+import { LinkWrapper as S } from "./LinkWrapper.js";
+const C = () => /* @__PURE__ */ e("div", { role: "status", "aria-live": "polite", className: "mt-6 flex items-center justify-center rounded py-6", children: /* @__PURE__ */ e("div", { className: "border-primary-500 h-[25px] w-[25px] animate-spin rounded-full border-3 border-t-transparent" }) }), q = ({ title: r, message: a, cta: l }) => /* @__PURE__ */ t("div", { role: "status", "aria-live": "polite", className: "flex flex-col items-center justify-center gap-8 px-4 py-3", children: [
   /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-2", children: [
     /* @__PURE__ */ e("div", { className: "bg-error-20 w-fit rounded-full p-3", children: /* @__PURE__ */ e(y, { width: 48, height: 48, fill: "var(--error-500)" }) }),
     /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-800", children: r }),
-    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-800", children: l })
+    /* @__PURE__ */ e("p", { "data-qa": "feedback-error-message", className: "text-medium text-neutral-800", children: a })
   ] }),
-  /* @__PURE__ */ e(o, { ...i, variant: "primary-green" })
-] }), B = ({ title: r, message: l, cta: i }) => /* @__PURE__ */ t("div", { role: "status", "aria-live": "polite", className: "flex flex-col items-center justify-center gap-8 px-4 py-3", children: [
+  /* @__PURE__ */ e(o, { ...l, variant: "primary-green" })
+] }), L = ({ title: r, message: a, cta: l }) => /* @__PURE__ */ t("div", { role: "status", "aria-live": "polite", className: "flex flex-col items-center justify-center gap-8 px-4 py-3", children: [
   /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-2", children: [
     /* @__PURE__ */ e("div", { className: "bg-primary-100 w-fit rounded-full p-3", children: /* @__PURE__ */ e(w, { width: 48, height: 48, fill: "var(--color-primary-500)" }) }),
     /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-800", children: r }),
-    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-800", children: l })
+    /* @__PURE__ */ e("p", { "data-qa": "feedback-success-message", className: "text-medium text-neutral-800", children: a })
   ] }),
-  /* @__PURE__ */ e(k, { className: "w-fit", children: i })
+  /* @__PURE__ */ e(S, { className: "w-fit", children: l })
 ] }), G = ({
   title: r,
-  subjectOptions: l,
-  fullNameField: i,
+  subjectOptions: a,
+  fullNameField: l,
   emailField: m,
   referenceNumberField: d,
   subjectField: p,
   messageField: f,
-  privacyField: s,
+  privacyField: c,
   requiredFieldsText: h,
-  securityHint: x,
-  status: a = "default",
-  successFeedback: u,
-  errorFeedback: N,
-  onSubmit: g,
-  button: c
+  securityHint: u,
+  status: i = "default",
+  successFeedback: x,
+  errorFeedback: g,
+  onSubmit: N,
+  button: n
 }) => /* @__PURE__ */ t("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
   /* @__PURE__ */ t("div", { className: "space-y-4", children: [
     /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: r }),
     /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
   ] }),
-  a === "loading" && /* @__PURE__ */ e(C, {}),
-  a === "error" && /* @__PURE__ */ e(L, { ...N }),
-  a === "success" && /* @__PURE__ */ e(B, { ...u }),
-  a === "default" && /* @__PURE__ */ t("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, onSubmit: g, children: [
-    /* @__PURE__ */ e(n, { ...i, type: "text" }),
-    /* @__PURE__ */ e(n, { ...m, type: "email" }),
-    /* @__PURE__ */ e(n, { ...d }),
-    /* @__PURE__ */ e(j, { ...p, options: l }),
+  i === "loading" && /* @__PURE__ */ e(C, {}),
+  i === "error" && /* @__PURE__ */ e(q, { ...g }),
+  i === "success" && /* @__PURE__ */ e(L, { ...x }),
+  i === "default" && /* @__PURE__ */ t("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, onSubmit: N, children: [
+    /* @__PURE__ */ e(s, { ...l, type: "text" }),
+    /* @__PURE__ */ e(s, { ...m, type: "email" }),
+    /* @__PURE__ */ e(s, { ...d }),
+    /* @__PURE__ */ e(j, { ...p, options: a }),
     /* @__PURE__ */ e(b, { ...f }),
     /* @__PURE__ */ e("p", { className: "text-medium text-neutral-600", children: h }),
-    /* @__PURE__ */ e(v, { ...s, children: /* @__PURE__ */ e(I, { className: "text-medium [&_p:last-child]:mb-0", content: s.label }) }),
+    /* @__PURE__ */ e(v, { ...c, children: /* @__PURE__ */ e(k, { className: "text-medium [&_p:last-child]:mb-0", content: c.label }) }),
     /* @__PURE__ */ t(
       "div",
       {
         id: "security-hint",
         className: "text-small flex items-start gap-2 rounded bg-neutral-50 p-4 text-neutral-600",
         children: [
-          /* @__PURE__ */ e(S, { width: 24, height: 24, "aria-hidden": "true" }),
-          /* @__PURE__ */ e("p", { children: x })
+          /* @__PURE__ */ e(I, { width: 24, height: 24, "aria-hidden": "true" }),
+          /* @__PURE__ */ e("p", { children: u })
         ]
       }
     ),
-    /* @__PURE__ */ e(o, { ...c, className: "w-fit self-center", type: "submit", children: c.children })
+    /* @__PURE__ */ e(o, { ...n, className: "w-fit self-center", type: "submit", children: n.children })
   ] })
 ] });
 export {

package/dist/components/CookiesBar.js

@@ -2,7 +2,7 @@ import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import "react";
 import { Button as m } from "./Button.js";
 import { Markdown as o } from "./Markdown.js";
-const n = ({ policyMessage: e, acceptButton: l }) => /* @__PURE__ */ t("aside", { className: "fixed bottom-0 left-0 z-9 w-full bg-neutral-900", children: /* @__PURE__ */ a("div", { className: "mx-auto flex w-full flex-col gap-6 p-6 md:flex-row md:items-center md:gap-10 md:py-6 xl:max-w-300 xl:px-0", children: [
+const n = ({ policyMessage: e, acceptButton: l }) => /* @__PURE__ */ t("aside", { className: "fixed bottom-0 left-0 z-51 w-full bg-neutral-900", children: /* @__PURE__ */ a("div", { className: "mx-auto flex w-full flex-col gap-6 p-6 md:flex-row md:items-center md:gap-10 md:py-6 xl:max-w-300 xl:px-0", children: [
   /* @__PURE__ */ t(o, { className: "text-small text-white [&_p:last-child]:mb-0", variant: "cookies", content: e }),
   /* @__PURE__ */ t(m, { variant: "primary-yellow", className: "w-full text-nowrap md:w-fit", ...l })
 ] }) });

package/dist/components/CtaSection.d.ts

@@ -8,9 +8,10 @@ export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yel
 export declare const CtaFeatureTag: FC<CtaFeatureTagProps>;
 
 export declare interface CtaFeatureTagProps {
-    icon: string;
+    icon: ReactNode;
     text: string;
     className?: string;
+    variant?: 'primary' | 'white';
 }
 
 export declare const CtaSample: FC<CtaSampleProps>;
@@ -33,8 +34,6 @@ export declare interface CtaSectionProps {
     childrenClassName?: string;
 }
 
-export declare const CtaSummarizedTag: FC<CtaFeatureTagProps>;
-
 export type IconPosition = 'left' | 'right' | 'top';
 
 export interface LinkWrapperProps {

package/dist/components/CtaSection.js

@@ -1,53 +1,48 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { LinkWrapper as c } from "./LinkWrapper.js";
-const x = ({
-  title: a,
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import i from "clsx";
+import { LinkWrapper as x } from "./LinkWrapper.js";
+const g = ({
+  title: r,
   paragraph: l,
-  cta: r,
-  children: m,
+  cta: t,
+  children: a,
   className: s = "",
-  contentClassName: i = "",
+  contentClassName: p = "",
   childrenClassName: d = "hidden lg:flex"
-}) => /* @__PURE__ */ e("section", { className: `flex w-full justify-center px-6 py-8 md:px-8 md:py-12 ${s}`, children: /* @__PURE__ */ t(
+}) => /* @__PURE__ */ e("section", { className: `flex w-full justify-center px-6 py-8 md:px-8 md:py-12 ${s}`, children: /* @__PURE__ */ m(
   "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}`,
+    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 ${p}`,
     children: [
-      /* @__PURE__ */ t("div", { className: "flex flex-1 flex-col items-start justify-center gap-8 pb-8 md:pb-12 lg:pb-[3rem]", children: [
-        /* @__PURE__ */ t("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 }),
+      /* @__PURE__ */ m("div", { className: "flex flex-1 flex-col items-start justify-center gap-8 pb-8 md:pb-12 lg:pb-[3rem]", children: [
+        /* @__PURE__ */ m("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: r }),
           !!l && /* @__PURE__ */ e("div", { className: "text-super-medium text-neutral-500", children: l })
         ] }),
-        /* @__PURE__ */ e(c, { size: "large", variant: "primary-darkgreen", className: "bg-primary-700 px-4 py-2.5", ...r })
+        /* @__PURE__ */ e(x, { size: "large", variant: "primary-darkgreen", className: "bg-primary-700 px-4 py-2.5", ...t })
       ] }),
-      !!m && /* @__PURE__ */ e("div", { className: `w-full justify-center lg:w-auto lg:items-end ${d}`, children: m })
+      !!a && /* @__PURE__ */ e("div", { className: `w-full justify-center lg:w-auto lg:items-end ${d}`, children: a })
     ]
   }
-) }), o = ({ image: a, children: l, className: r = "" }) => /* @__PURE__ */ t("div", { className: `relative flex items-end ${r}`, 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 }),
+) }), f = ({ image: r, children: l, className: t = "" }) => /* @__PURE__ */ m("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: r }),
   l
-] }), g = ({ icon: a, text: l, className: r = "" }) => /* @__PURE__ */ t(
+] }), u = ({ icon: r, text: l, className: t = "", variant: a = "primary" }) => /* @__PURE__ */ m(
   "div",
   {
-    className: `bg-primary-50 border-primary-200 shadow-small absolute flex items-center justify-center gap-1 rounded-md border p-1 ${r}`,
+    className: i(
+      "shadow-small absolute flex items-center justify-center gap-1 rounded-md p-2",
+      a === "primary" ? "bg-primary-100" : "bg-primary-800",
+      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 })
-    ]
-  }
-), f = ({ icon: a, text: l, className: r = "" }) => /* @__PURE__ */ t(
-  "div",
-  {
-    className: `shadow-small absolute flex items-center justify-center gap-1 rounded-md bg-neutral-50 p-2 ${r}`,
-    children: [
-      /* @__PURE__ */ e("img", { src: a, alt: "", role: "img", className: "h-5 w-5" }),
-      /* @__PURE__ */ e("span", { className: "text-small text-primary-500", children: l })
+      r,
+      /* @__PURE__ */ e("span", { className: i("text-small", a === "primary" ? "text-primary-500" : "text-white"), children: l })
     ]
   }
 );
 export {
-  f as CtaFeatureTag,
-  o as CtaSample,
-  x as CtaSection,
-  g as CtaSummarizedTag
+  u as CtaFeatureTag,
+  f as CtaSample,
+  g as CtaSection
 };

package/dist/components/HomeTemplate.d.ts

@@ -29,15 +29,6 @@ export interface CategoriesSectionProps {
     cta: ReactNode;
 }
 
-export interface ContinueEditingBannerProps {
-    latestApplicationInProgress?: LatestApplication;
-    editFormClicked?: (latestApplication: LatestApplication) => void;
-    token: string;
-    tagLine: string;
-    title: string;
-    buttonLabel: string;
-}
-
 export interface FaqTeaserSectionProps {
     header: SectionHeadingProps;
     questions: {
@@ -79,8 +70,6 @@ export declare interface HomeTemplateProps {
     trust: TrustSectionProps;
     faqTeaser: FaqTeaserSectionProps;
     articles: BlogSectionProps;
-    continueEditingBanner?: ContinueEditingBannerProps;
-    continueEditingBannerSlot?: ReactNode;
 }
 
 export interface ItemProps {
@@ -93,20 +82,6 @@ export interface ItemProps {
     className?: string;
 }
 
-export interface LatestApplication {
-    id: string;
-    state?: string;
-    link: string;
-    lastStep?: number;
-    continueFromHome?: boolean;
-    form: {
-        name: string;
-        url: string;
-        type: string;
-        subType?: string;
-    };
-}
-
 export interface LawGeniusSectionProps {
     title: string;
     content: string;

package/dist/components/HomeTemplate.js

@@ -1,36 +1,32 @@
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import "react";
-import { ContinueEditingBanner as n } from "./ContinueEditingBanner.js";
-import { HeroSection as S } from "./HeroSection.js";
-import { MoreTemplatesSection as x } from "./MoreTemplatesSection.js";
-import { ProcessSection as T } from "./ProcessSection.js";
-import { CategoriesSection as u } from "./CategoriesSection.js";
-import { TrustSection as b } from "./TrustSection.js";
-import { FaqTeaserSection as j } from "./FaqTeaserSection.js";
-import { BlogSection as C } from "./BlogSection.js";
-import { RatafiaSection as H } from "./RatafiaSection.js";
-const w = ({
-  hero: e,
-  moreTemplates: i,
-  process: p,
+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";
+const M = ({
+  hero: t,
+  moreTemplates: m,
+  process: e,
   categories: r,
-  ratafia: s,
-  trust: f,
-  faqTeaser: a,
-  articles: l,
-  continueEditingBanner: m,
-  continueEditingBannerSlot: t
+  ratafia: i,
+  trust: p,
+  faqTeaser: s,
+  articles: a
 }) => /* @__PURE__ */ c("main", { className: "flex-1", children: [
-  t ?? (m != null && /* @__PURE__ */ o(n, { ...m })),
-  /* @__PURE__ */ o(S, { ...e }),
-  /* @__PURE__ */ o(x, { ...i }),
-  /* @__PURE__ */ o(T, { ...p }),
-  r && /* @__PURE__ */ o(u, { ...r }),
-  /* @__PURE__ */ o(H, { ...s }),
-  /* @__PURE__ */ o(b, { ...f }),
-  /* @__PURE__ */ o(j, { ...a }),
-  /* @__PURE__ */ o(C, { className: "pt-10 pb-12 lg:pb-14", ...l })
+  /* @__PURE__ */ o(n, { ...t }),
+  /* @__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 })
 ] });
 export {
-  w as HomeTemplate
+  M as HomeTemplate
 };

package/dist/components/Preform.d.ts

@@ -30,6 +30,7 @@ export declare interface PreformProps {
     radioFieldData?: RadioFieldData;
     inputFieldData?: InputFieldData;
     tooltips: TooltipsProps[];
+    hasMobileRadioField?: boolean;
 }
 
 export declare type RadioFieldData = {

package/dist/components/Preform.js

@@ -1,13 +1,20 @@
 "use client";
 import { jsxs as c, Fragment as x, jsx as e } from "react/jsx-runtime";
 import "react";
-import { Tooltips as n } from "./Tooltips.js";
-import { PreformMobile as a } from "./PreformMobile.js";
-import { PreformOption as f } from "./PreformOption.js";
+import { Tooltips as a } from "./Tooltips.js";
+import { PreformMobile as f } from "./PreformMobile.js";
 import { TrustedBadge as i } from "./TrustedBadge.js";
-import { Input as h } from "./Input.js";
-import { LinkWrapper as t } from "./LinkWrapper.js";
-const k = ({ trustedBadge: s, cta: o, inputFieldData: l, radioFieldData: m, tooltips: p }) => /* @__PURE__ */ c(x, { children: [
+import { PreformOption as h } from "./PreformOption.js";
+import { Input as t } from "./Input.js";
+import { LinkWrapper as g } from "./LinkWrapper.js";
+const C = ({
+  trustedBadge: s,
+  cta: o,
+  inputFieldData: l,
+  radioFieldData: m,
+  tooltips: p,
+  hasMobileRadioField: n
+}) => /* @__PURE__ */ c(x, { children: [
   /* @__PURE__ */ e("section", { className: "bg-neutral-25 hidden pt-10 text-neutral-800 sm:block sm:px-6 lg:px-8 xl:px-30", children: /* @__PURE__ */ c("div", { className: "relative mx-auto flex max-w-300 flex-col gap-6 rounded bg-white px-6 pt-8 pb-6 shadow-md sm:items-center sm:gap-8 lg:px-26 xl:px-10", children: [
     /* @__PURE__ */ e(i, { ...s }),
     m?.isVisible && /* @__PURE__ */ c(x, { children: [
@@ -18,7 +25,7 @@ const k = ({ trustedBadge: s, cta: o, inputFieldData: l, radioFieldData: m, tool
           {
             className: "w-[calc(50%-4px)] sm:w-[calc(25%-12px)] lg:w-[calc(20%-13px)] xl:w-[calc(16.66%-14px)]",
             children: /* @__PURE__ */ e(
-              f,
+              h,
               {
                 ...r,
                 selected: r.value === m.radioSelected,
@@ -29,7 +36,7 @@ const k = ({ trustedBadge: s, cta: o, inputFieldData: l, radioFieldData: m, tool
           r.value
         )),
         l?.isVisible && /* @__PURE__ */ e("div", { className: "mt-4 flex basis-full justify-center md:mt-0", children: /* @__PURE__ */ e(
-          h,
+          t,
           {
             id: l.id,
             label: l.label,
@@ -42,19 +49,20 @@ const k = ({ trustedBadge: s, cta: o, inputFieldData: l, radioFieldData: m, tool
         ) }, l.name)
       ] })
     ] }),
-    /* @__PURE__ */ e(t, { variant: "primary-green", children: o }),
-    p.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: p.map((r) => /* @__PURE__ */ e(n, { ...r }, r.title)) })
+    /* @__PURE__ */ e(g, { variant: "primary-green", children: o }),
+    p.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: p.map((r) => /* @__PURE__ */ e(a, { ...r }, r.title)) })
   ] }) }),
   /* @__PURE__ */ e(
-    a,
+    f,
     {
       cta: o,
       trustedBadge: s,
       inputFieldData: l,
-      radioFieldData: m
+      radioFieldData: m,
+      hasMobileRadioField: n
     }
   )
 ] });
 export {
-  k as Preform
+  C as Preform
 };

package/dist/components/PreformMobile.d.ts

@@ -19,6 +19,7 @@ export declare interface PreformMobileProps {
     radioFieldData?: RadioFieldData;
     inputFieldData?: InputFieldData;
     cta: ReactNode;
+    hasMobileRadioField?: boolean;
 }
 
 export interface PreformOptionProps {

package/dist/components/PreformMobile.js

@@ -1,53 +1,71 @@
-import { jsxs as o, Fragment as d, jsx as l } from "react/jsx-runtime";
-import { useState as x, useRef as v, useEffect as u } from "react";
-import { TrustedBadge as g } from "./TrustedBadge.js";
-import { Select as w } from "./Select.js";
-import { Input as f } from "./Input.js";
-import { LinkWrapper as N } from "./LinkWrapper.js";
-const y = ({ radioFieldData: r, inputFieldData: e, cta: h, trustedBadge: a }) => {
-  const [m, b] = x(!1), c = v(null);
-  u(() => {
-    const s = c.current;
-    if (!s) return;
-    const n = new IntersectionObserver(
-      ([i]) => {
-        b(!i.isIntersecting);
+import { jsxs as c, Fragment as v, jsx as l } from "react/jsx-runtime";
+import { useState as w, useRef as p, useEffect as g } from "react";
+import { TrustedBadge as N } from "./TrustedBadge.js";
+import { Input as a } from "./Input.js";
+import { PreformOption as C } from "./PreformOption.js";
+import { Select as $ } from "./Select.js";
+import { LinkWrapper as I } from "./LinkWrapper.js";
+const R = ({
+  radioFieldData: r,
+  inputFieldData: e,
+  cta: d,
+  trustedBadge: i,
+  hasMobileRadioField: t
+}) => {
+  const [f, u] = w(!1), h = p(null);
+  g(() => {
+    const n = h.current;
+    if (!n) return;
+    const s = new IntersectionObserver(
+      ([m]) => {
+        u(!m.isIntersecting);
       },
       { threshold: 0 }
     );
-    return n.observe(s), () => {
-      n.disconnect();
+    return s.observe(n), () => {
+      s.disconnect();
     };
   }, []);
-  const t = (s) => /* @__PURE__ */ o(
+  const x = (n) => {
+    if (!r?.isVisible) return null;
+    const s = t && !n, m = `${r.name}-${n ? "sticky" : "mobile"}`;
+    return s ? /* @__PURE__ */ l("div", { className: "flex w-full flex-wrap justify-center gap-2", children: r.options.map((o) => /* @__PURE__ */ l("div", { className: "w-[calc(50%-4px)]", children: /* @__PURE__ */ l(
+      C,
+      {
+        ...o,
+        selected: o.value === r.radioSelected,
+        onClick: r.onClick
+      }
+    ) }, o.value)) }) : /* @__PURE__ */ l(
+      $,
+      {
+        id: m,
+        name: r.name,
+        value: r.radioSelected,
+        options: r.options,
+        containerClassName: "w-full",
+        onChange: (o) => {
+          r.onClick(o.target.value);
+        }
+      }
+    );
+  }, b = (n) => /* @__PURE__ */ c(
     "div",
     {
-      className: `flex flex-col bg-white px-6 pb-4 ${s ? "border-t border-neutral-100 pt-4 shadow-md" : ""}`,
+      className: `flex flex-col bg-white px-6 pb-4 ${n ? "border-t border-neutral-100 pt-4 shadow-md" : ""}`,
       children: [
-        /* @__PURE__ */ l(
+        t && !n ? /* @__PURE__ */ l("p", { className: "text-small mb-4 font-bold text-neutral-800", children: r?.label }) : /* @__PURE__ */ l(
           "label",
           {
-            htmlFor: `${r?.name ?? ""}-${s ? "sticky" : "mobile"}`,
+            htmlFor: `${r?.name ?? ""}-${n ? "sticky" : "mobile"}`,
             className: "text-small mb-4 font-bold text-neutral-800",
             children: r?.label
           }
         ),
-        /* @__PURE__ */ o("div", { className: `flex gap-4 ${s ? "flex-row items-center" : "flex-col"}`, children: [
-          r?.isVisible && /* @__PURE__ */ l(
-            w,
-            {
-              id: `${r.name}-${s ? "sticky" : "mobile"}`,
-              name: r.name,
-              value: r.radioSelected,
-              options: r.options,
-              containerClassName: "w-full",
-              onChange: (n) => {
-                r.onClick(n.target.value);
-              }
-            }
-          ),
-          e?.isVisible && !s && /* @__PURE__ */ l("div", { className: "flex justify-center", children: /* @__PURE__ */ l(
-            f,
+        /* @__PURE__ */ c("div", { className: `flex gap-4 ${n ? "flex-row items-center" : "flex-col"}`, children: [
+          x(n),
+          e?.isVisible && !n && /* @__PURE__ */ l("div", { className: "flex justify-center", children: /* @__PURE__ */ l(
+            a,
             {
               containerClassName: "w-full text-small",
               id: `${e.id}-mobile`,
@@ -58,10 +76,10 @@ const y = ({ radioFieldData: r, inputFieldData: e, cta: h, trustedBadge: a }) =>
               onInputChange: e.onChange
             }
           ) }, e.name),
-          /* @__PURE__ */ l(N, { variant: "primary-green", className: `text-small ${s ? "w-fit text-nowrap" : "w-full"}`, children: h })
+          /* @__PURE__ */ l(I, { variant: "primary-green", className: `text-small ${n ? "w-fit text-nowrap" : "w-full"}`, children: d })
         ] }),
-        e?.isVisible && s && /* @__PURE__ */ l("div", { className: "mt-4 flex w-full justify-center", children: /* @__PURE__ */ l(
-          f,
+        e?.isVisible && n && /* @__PURE__ */ l("div", { className: "mt-4 flex w-full justify-center", children: /* @__PURE__ */ l(
+          a,
           {
             containerClassName: "w-full text-small",
             id: `${e.id}-mobile-sticky`,
@@ -75,14 +93,14 @@ const y = ({ radioFieldData: r, inputFieldData: e, cta: h, trustedBadge: a }) =>
       ]
     }
   );
-  return /* @__PURE__ */ o(d, { children: [
-    /* @__PURE__ */ l("section", { className: "bg-neutral-25 pt-10 text-neutral-800 sm:hidden", children: /* @__PURE__ */ o("div", { ref: c, className: "relative flex flex-col rounded bg-white pt-8 shadow", children: [
-      /* @__PURE__ */ l("div", { className: "px-6", children: /* @__PURE__ */ l(g, { ...a }) }),
-      /* @__PURE__ */ l("div", { className: m ? "hidden" : "block", children: t(!1) })
+  return /* @__PURE__ */ c(v, { children: [
+    /* @__PURE__ */ l("section", { className: "bg-neutral-25 pt-10 text-neutral-800 sm:hidden", children: /* @__PURE__ */ c("div", { ref: h, className: "relative flex flex-col rounded bg-white pt-8 shadow", children: [
+      /* @__PURE__ */ l("div", { className: "px-6", children: /* @__PURE__ */ l(N, { ...i }) }),
+      /* @__PURE__ */ l("div", { className: f ? "hidden" : "block", children: b(!1) })
     ] }) }),
-    m && /* @__PURE__ */ l("div", { className: "fixed bottom-0 left-0 z-50 w-full sm:hidden", children: t(!0) })
+    f && /* @__PURE__ */ l("div", { className: "fixed bottom-0 left-0 z-50 w-full sm:hidden", children: b(!0) })
   ] });
 };
 export {
-  y as PreformMobile
+  R as PreformMobile
 };

package/dist/components/ProductTemplate.d.ts

@@ -129,6 +129,7 @@ export interface PreformProps {
     radioFieldData?: RadioFieldData;
     inputFieldData?: InputFieldData;
     tooltips: TooltipsProps[];
+    hasMobileRadioField?: boolean;
 }
 
 export interface PreviewDownloadProps {

package/dist/components/ProductTemplate.js

@@ -1,11 +1,11 @@
-import { jsxs as o, jsx as m } from "react/jsx-runtime";
+import { jsxs as r, jsx as m } from "react/jsx-runtime";
 import { Jumbotron as u } from "./Jumbotron.js";
 import { JumboDocs as g } from "./JumboDocs.js";
 import { Preform as h } from "./Preform.js";
 import { ProductInfo as N } from "./ProductInfo.js";
 import { BenefitsBar as b } from "./BenefitsBar.js";
-import { Breadcrumb as P } from "./Breadcrumb.js";
-import { TableOfContents as v } from "./TableOfContents.js";
+import { Breadcrumb as v } from "./Breadcrumb.js";
+import { TableOfContents as P } from "./TableOfContents.js";
 import { ContentItem as B } from "./ContentItem.js";
 import { FaqSection as T } from "./FaqSection.js";
 import { PreviewDownload as k } from "./PreviewDownload.js";
@@ -14,10 +14,10 @@ import { TryNowSection as F } from "./TryNowSection.js";
 import { FreeDocumentModal as I } from "./FreeDocumentModal.js";
 const M = ({
   jumbotron: p,
-  jumboDocs: r,
+  jumboDocs: o,
   preform: t,
-  productInfo: f,
-  benefitsBar: n,
+  productInfo: n,
+  benefitsBar: f,
   breadcrumb: s,
   tableOfContents: c,
   contentItems: x,
@@ -25,27 +25,27 @@ const M = ({
   previewDownload: w,
   previewSection: e,
   tryNowSection: l,
-  freeDocModal: i
-}) => /* @__PURE__ */ o("main", { className: "min-w-0 flex-1", children: [
+  freeDocModal: a
+}) => /* @__PURE__ */ r("main", { className: "min-w-0 flex-1", children: [
   /* @__PURE__ */ m(u, { ...p }),
-  r && /* @__PURE__ */ m(g, { ...r }),
+  o && /* @__PURE__ */ m(g, { ...o }),
   t && /* @__PURE__ */ m(h, { ...t }),
-  /* @__PURE__ */ m(N, { ...f }),
-  /* @__PURE__ */ m(b, { ...n }),
-  /* @__PURE__ */ m("section", { className: "px-4 pt-6 pb-10 text-neutral-800 md:px-6 lg:px-8 xl:px-30", children: /* @__PURE__ */ o("div", { className: "mx-auto flex w-full max-w-300 flex-col gap-6", children: [
-    /* @__PURE__ */ m(P, { ...s }),
-    /* @__PURE__ */ o("div", { className: "flex w-full min-w-0 items-start md:gap-4 lg:gap-26.5 xl:gap-31", children: [
-      /* @__PURE__ */ o("div", { className: "flex w-full max-w-100 min-w-0 flex-col gap-8 lg:max-w-137.5 xl:max-w-172.5", children: [
-        /* @__PURE__ */ m(v, { ...c }),
-        x.map((a) => /* @__PURE__ */ m(B, { ...a }, a.id)),
-        /* @__PURE__ */ m(T, { ...d })
+  /* @__PURE__ */ m(N, { ...n }),
+  /* @__PURE__ */ m(b, { ...f }),
+  /* @__PURE__ */ m("section", { className: "px-4 pt-6 pb-10 text-neutral-800 md:px-6 lg:px-8 xl:px-30", children: /* @__PURE__ */ r("div", { className: "mx-auto flex w-full max-w-300 flex-col gap-6", children: [
+    /* @__PURE__ */ m(v, { ...s }),
+    /* @__PURE__ */ r("div", { className: "flex w-full min-w-0 items-start md:gap-4 lg:gap-26.5 xl:gap-31", children: [
+      /* @__PURE__ */ r("div", { className: "flex w-full max-w-100 min-w-0 flex-col gap-8 lg:max-w-137.5 xl:max-w-172.5", children: [
+        /* @__PURE__ */ m(P, { ...c }),
+        x.map((i) => /* @__PURE__ */ m(B, { ...i }, i.id)),
+        /* @__PURE__ */ m(T, { ...d, variant: "legal" })
       ] }),
       /* @__PURE__ */ m("aside", { className: "sticky top-20 hidden pt-4 md:block", children: /* @__PURE__ */ m(k, { ...w }) })
     ] })
   ] }) }),
   e && /* @__PURE__ */ m(C, { ...e }),
   l && /* @__PURE__ */ m(F, { ...l }),
-  i && /* @__PURE__ */ m(I, { ...i })
+  a && /* @__PURE__ */ m(I, { ...a })
 ] });
 export {
   M as ProductTemplate

package/dist/components/Toast.js

@@ -18,8 +18,8 @@ const u = {
     icon: /* @__PURE__ */ e(l, { fill: "white", width: 24, height: 24 }),
     bg: "bg-neutral-500"
   }
-}, v = ({ show: i, title: s, message: c, type: a = "default", onClose: d }) => {
-  const [t, n] = h(i), o = u[a];
+}, v = ({ show: i, title: s, message: a, type: c = "default", onClose: d }) => {
+  const [t, n] = h(i), o = u[c];
   i && !t && n(!0);
   const m = () => {
     i || n(!1);
@@ -37,7 +37,7 @@ const u = {
         /* @__PURE__ */ e("div", { className: "shrink-0", children: o.icon }),
         /* @__PURE__ */ r("div", { className: "flex grow flex-col text-sm text-white", children: [
           /* @__PURE__ */ e("p", { className: "font-bold", children: s }),
-          /* @__PURE__ */ e("p", { children: c })
+          /* @__PURE__ */ e("p", { "data-qa": "toast-message", children: a })
         ] }),
         /* @__PURE__ */ e("button", { onClick: d, className: "cursor-pointer", children: /* @__PURE__ */ e(p, { fill: "white", className: "h-4 w-4" }) })
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-contracts-ui",
-  "version": "0.165.2",
+  "version": "0.165.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -294,10 +294,6 @@
       "import": "./dist/components/ContentItem.js",
       "types": "./dist/components/ContentItem.d.ts"
     },
-    "./components/ContinueEditingBanner": {
-      "import": "./dist/components/ContinueEditingBanner.js",
-      "types": "./dist/components/ContinueEditingBanner.d.ts"
-    },
     "./components/CookiesBar": {
       "import": "./dist/components/CookiesBar.js",
       "types": "./dist/components/CookiesBar.d.ts"

package/dist/components/ContinueEditingBanner.d.ts

@@ -1,27 +0,0 @@
-import { FC } from 'react';
-
-export declare const ContinueEditingBanner: FC<ContinueEditingBannerProps>;
-
-export declare interface ContinueEditingBannerProps {
-    latestApplicationInProgress?: LatestApplication;
-    editFormClicked?: (latestApplication: LatestApplication) => void;
-    token: string;
-    tagLine: string;
-    title: string;
-    buttonLabel: string;
-}
-
-export declare interface LatestApplication {
-    id: string;
-    state?: string;
-    link: string;
-    lastStep?: number;
-    continueFromHome?: boolean;
-    form: {
-        name: string;
-        url: string;
-        type: string;
-        subType?: string;
-    };
-}
-

package/dist/components/ContinueEditingBanner.js

@@ -1,31 +0,0 @@
-"use client";
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import "react";
-import { Button as m } from "./Button.js";
-const u = ({
-  latestApplicationInProgress: t,
-  editFormClicked: n,
-  tagLine: r,
-  title: a,
-  token: s,
-  buttonLabel: i
-}) => t == null || s.length === 0 ? null : /* @__PURE__ */ e("div", { className: "bg-primary-50 px-ds-sm py-0", children: /* @__PURE__ */ l("div", { className: "gap-ds-sm bg-neutral-white p-ds-lg flex flex-col items-center rounded-sm text-center", children: [
-  /* @__PURE__ */ l("div", { className: "gap-ds-2xs flex flex-col", children: [
-    /* @__PURE__ */ e("span", { className: "font-lora text-large text-primary-800 lg:text-super-large", children: a }),
-    /* @__PURE__ */ e("span", { className: "text-medium text-neutral-600", children: r })
-  ] }),
-  /* @__PURE__ */ e(
-    m,
-    {
-      "data-qa": "continue-editing-banner-button",
-      className: "lg:w-auto",
-      onClick: () => {
-        n?.(t);
-      },
-      children: i
-    }
-  )
-] }) });
-export {
-  u as ContinueEditingBanner
-};