@npm_leadtech/legal-contracts-ui 0.44.10 → 0.44.11

package/dist/components/AsideNavMenu.js

@@ -1,38 +1,17 @@
-"use client";
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { useState as n, useEffect as f } from "react";
-const p = ({ menuItems: r }) => {
-  const [a, c] = n(r[0]?.href || "");
-  return f(() => {
-    const e = new IntersectionObserver(
-      (l) => {
-        l.forEach((s) => {
-          s.isIntersecting && c(`#${s.target.id}`);
-        });
-      },
-      { rootMargin: "-10% 0px -80% 0px", threshold: 0.1 }
-    );
-    return r.forEach((l) => {
-      const s = l.href.replace("#", ""), i = document.getElementById(s);
-      i && e.observe(i);
-    }), () => {
-      e.disconnect();
-    };
-  }, [r]), r.length === 0 ? null : /* @__PURE__ */ t("aside", { className: "flex w-full flex-col gap-4 md:sticky md:h-fit md:w-55 lg:top-24", children: /* @__PURE__ */ t("ul", { className: "flex flex-col gap-1", children: r.map((e) => {
-    const l = a === e.href;
-    return /* @__PURE__ */ o(
-      "li",
+import { jsx as l, jsxs as t } from "react/jsx-runtime";
+const i = ({ menuItems: a }) => a.length === 0 ? null : /* @__PURE__ */ l("aside", { className: "flex w-full flex-col gap-4 lg:w-55", children: /* @__PURE__ */ l("ul", { children: a.map((r, e) => /* @__PURE__ */ t("li", { children: [
+  /* @__PURE__ */ t("a", { href: "#", className: "text-small flex items-center gap-4 px-0 py-4 text-left transition-colors", children: [
+    /* @__PURE__ */ l(
+      "span",
       {
-        className: `flex items-baseline gap-2 border-b border-neutral-200 ${l ? "text-primary-500 font-bold" : ""}`,
-        children: [
-          l && /* @__PURE__ */ t("div", { className: "bg-primary-500 h-1.5 w-1.5", style: { borderRadius: "50%" } }),
-          /* @__PURE__ */ t("a", { href: e.href, className: "text-small block w-full py-3 text-left", children: /* @__PURE__ */ t("span", { className: "inline-block w-full transition-all duration-300", children: e.label }) })
-        ]
-      },
-      e.label
-    );
-  }) }) });
-};
+        "aria-hidden": !0,
+        className: `h-1.5 w-1.5 rounded-full ${e == 0 ? "bg-primary-500" : "bg-primary-50"}`
+      }
+    ),
+    /* @__PURE__ */ l("span", { className: e == 0 ? "text-primary-500 font-bold" : "text-neutral-800", children: r.label })
+  ] }),
+  e < a.length - 1 && /* @__PURE__ */ l("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": !0 })
+] }, r.label)) }) });
 export {
-  p as AsideNavMenu
+  i as AsideNavMenu
 };

package/dist/components/{ArticlesSection.d.ts → BlogSection.d.ts}

@@ -2,16 +2,16 @@ import { ComponentPropsWithRef } from 'react';
 import { FC } from 'react';
 import { ReactNode } from 'react';
 
-export declare const ArticlesSection: FC<BlogSectionProps>;
+export declare const BlogSection: FC<BlogSectionProps>;
 
 export declare interface BlogSectionProps {
     header: SectionHeadingProps;
-    articles?: Array<{
+    articles: {
         title: string;
         image: ReactNode;
         excerpt: string;
         cta: ReactNode;
-    }>;
+    }[];
     cta: ButtonProps;
 }
 

package/dist/components/{ArticlesSection.js → BlogSection.js}

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import "react";
 import { SectionHeading as d } from "./SectionHeading.js";
 import { Button as s } from "./Button.js";
-const x = ({ header: i, articles: t = [], cta: a }) => t.length === 0 ? null : /* @__PURE__ */ e("section", { className: "px-6 pt-16 pb-20", children: /* @__PURE__ */ r("div", { className: "mx-auto max-w-6xl space-y-8", children: [
+const x = ({ header: i, articles: t, cta: a }) => t.length === 0 ? null : /* @__PURE__ */ e("section", { className: "px-6 pt-16 pb-20", children: /* @__PURE__ */ r("div", { className: "mx-auto max-w-6xl space-y-8", children: [
   /* @__PURE__ */ e(d, { ...i }),
   /* @__PURE__ */ e("div", { className: "grid gap-6 md:grid-cols-2", children: t.map((l) => /* @__PURE__ */ r("article", { className: "flex flex-col rounded-sm bg-white shadow md:flex-row", children: [
     /* @__PURE__ */ e("div", { className: "relative h-48 shrink-0 overflow-hidden rounded-l-sm md:h-auto md:w-48", children: l.image }),
@@ -15,5 +15,5 @@ const x = ({ header: i, articles: t = [], cta: a }) => t.length === 0 ? null : /
   /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(s, { size: "large", variant: "secondary-green", ...a }) })
 ] }) });
 export {
-  x as ArticlesSection
+  x as BlogSection
 };

package/dist/components/CategoryProductTemplate.d.ts

@@ -4,12 +4,12 @@ import { ReactNode } from 'react';
 
 export interface BlogSectionProps {
     header: SectionHeadingProps;
-    articles?: Array<{
+    articles: {
         title: string;
         image: ReactNode;
         excerpt: string;
         cta: ReactNode;
-    }>;
+    }[];
     cta: ButtonProps;
 }
 

package/dist/components/CategoryProductTemplate.js

@@ -1,30 +1,30 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { JumboCard as n } from "./JumboCard.js";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { JumboCard as s } from "./JumboCard.js";
 import { DocumentCategories as p } from "./DocumentCategories.js";
 import { DocumentSection as f } from "./DocumentSection.js";
 import { Breadcrumb as d } from "./Breadcrumb.js";
 import { MarkdownSection as u } from "./MarkdownSection.js";
 import { FaqSection as x } from "./FaqSection.js";
-import { ArticlesSection as N } from "./ArticlesSection.js";
+import { BlogSection as g } from "./BlogSection.js";
 const y = ({
   jumbo: m,
   breadcrumb: a,
   categories: t,
   documentSections: i,
-  ctaSection: c,
-  faqSection: l,
-  articles: s
-}) => /* @__PURE__ */ e("main", { className: "mx-auto max-w-6xl flex-1", children: [
-  /* @__PURE__ */ r(n, { ...m }),
+  ctaSection: l,
+  faqSection: c,
+  articles: n
+}) => /* @__PURE__ */ o("main", { className: "mx-auto max-w-6xl flex-1", children: [
+  /* @__PURE__ */ r(s, { ...m }),
   /* @__PURE__ */ r(d, { ...a, className: "pb-4" }),
-  /* @__PURE__ */ e("div", { className: "container mx-auto flex flex-col justify-center gap-30 lg:flex-row", children: [
+  /* @__PURE__ */ o("div", { className: "container mx-auto flex flex-col justify-center gap-30 lg:flex-row", children: [
     /* @__PURE__ */ r(p, { ...t }),
-    /* @__PURE__ */ e("div", { className: "", children: [
-      i.map((o) => /* @__PURE__ */ r(f, { ...o }, o.id)),
+    /* @__PURE__ */ o("div", { className: "", children: [
+      i.map((e) => /* @__PURE__ */ r(f, { ...e }, e.id)),
       /* @__PURE__ */ r("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": !0 }),
-      /* @__PURE__ */ r(u, { ...c }),
-      /* @__PURE__ */ r(x, { ...l, className: "pb-6" }),
-      /* @__PURE__ */ r(N, { ...s })
+      /* @__PURE__ */ r(u, { ...l }),
+      /* @__PURE__ */ r(x, { ...c, className: "pb-6" }),
+      /* @__PURE__ */ r(g, { ...n })
     ] })
   ] })
 ] });

package/dist/components/FaqItem.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import "react";
 import { FaqItemWrapper as n } from "./FaqItemWrapper.js";
 import { Markdown as m } from "./Markdown.js";
-const l = ({ question: t, answer: o }) => /* @__PURE__ */ e("div", { className: "text-medium flex flex-col rounded bg-white p-4 text-neutral-800 shadow", children: /* @__PURE__ */ e(n, { question: /* @__PURE__ */ e("span", { className: "font-bold", children: t }), children: /* @__PURE__ */ e(m, { content: o, className: "text-medium" }) }) });
+const l = ({ question: t, answer: o }) => /* @__PURE__ */ e("div", { className: "text-medium flex flex-col rounded bg-white p-4 text-neutral-800 shadow", children: /* @__PURE__ */ e(n, { question: /* @__PURE__ */ e("p", { className: "font-bold", children: t }), children: /* @__PURE__ */ e(m, { content: o, className: "text-medium" }) }) });
 export {
   l as FaqItem
 };

package/dist/components/FaqItemWrapper.js

@@ -1,24 +1,32 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useId as i } from "react";
-import { ChevronDownIcon as a } from "./ChevronDownIcon.js";
-const d = ({ question: o, children: s }) => {
-  const r = i();
-  return /* @__PURE__ */ t("div", { className: "w-full", children: [
-    /* @__PURE__ */ e("input", { type: "checkbox", id: r, className: "peer sr-only" }),
+"use client";
+import { jsxs as t, Fragment as a, jsx as r } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { ChevronDownIcon as l } from "./ChevronDownIcon.js";
+const p = ({ question: n, children: s }) => {
+  const [e, i] = o(!1);
+  return /* @__PURE__ */ t(a, { children: [
     /* @__PURE__ */ t(
-      "label",
+      "button",
       {
-        htmlFor: r,
-        className: "flex w-full cursor-pointer items-center justify-between text-left peer-checked:[&_.chevron]:rotate-0",
+        onClick: () => {
+          i(!e);
+        },
+        "aria-expanded": e,
+        className: "flex w-full cursor-pointer items-center justify-between text-left",
         children: [
-          o,
-          /* @__PURE__ */ e(a, { className: "chevron size-6 -rotate-90 transition-transform duration-300" })
+          n,
+          /* @__PURE__ */ r(
+            l,
+            {
+              className: `size-6 -rotate-90 transition-transform duration-300 ${e ? "rotate-0" : ""}`
+            }
+          )
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: "grid grid-rows-[0fr] transition-all duration-300 peer-checked:grid-rows-[1fr]", children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "pt-4", children: s }) }) })
+    /* @__PURE__ */ r("div", { className: `grid transition-all duration-300 ${e ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`, children: /* @__PURE__ */ r("div", { className: "overflow-hidden", children: /* @__PURE__ */ r("div", { className: "pt-4", children: s }) }) })
   ] });
 };
 export {
-  d as FaqItemWrapper
+  p as FaqItemWrapper
 };

package/dist/components/FaqSection.js

@@ -1,18 +1,14 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import "react";
-import { Markdown as n } from "./Markdown.js";
+import { Markdown as c } from "./Markdown.js";
 import { FaqItem as m } from "./FaqItem.js";
-const p = ({ title: l, description: o, faqItems: r, className: s = "" }) => {
-  if (r.length === 0) return null;
-  const c = l.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ a("div", { id: c, className: `flex flex-col gap-2 text-neutral-800 ${s} p-0.5`, children: [
-    /* @__PURE__ */ a("div", { className: "mb-4 flex flex-col", children: [
-      /* @__PURE__ */ e("h3", { className: "text-super-large font-bold", children: l }),
-      o !== "" && /* @__PURE__ */ e(n, { content: o, className: "text-medium mt-6" })
-    ] }),
-    /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: r.map((t) => /* @__PURE__ */ e(m, { ...t }, t.question)) })
-  ] });
-};
+const d = ({ title: o, description: l, faqItems: r, className: n = "" }) => r.length === 0 ? null : /* @__PURE__ */ a("div", { className: `flex flex-col gap-2 text-neutral-800 ${n}`, children: [
+  /* @__PURE__ */ a("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ e("h3", { className: "text-super-large font-bold", children: o }),
+    l !== "" && /* @__PURE__ */ e(c, { content: l, className: "text-medium" })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: r.map((t) => /* @__PURE__ */ e(m, { ...t }, t.question)) })
+] });
 export {
-  p as FaqSection
+  d as FaqSection
 };

package/dist/components/FaqsTemplate.js

@@ -1,14 +1,14 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { jsx as l, jsxs as a } from "react/jsx-runtime";
 import { Jumbotron2 as x } from "./Jumbotron2.js";
 import { AsideNavMenu as i } from "./AsideNavMenu.js";
 import { FaqSection as p } from "./FaqSection.js";
-const d = ({ jumbotron: a, asideNavMenu: r, faqSections: o }) => /* @__PURE__ */ e("main", { className: "bg-primary-50 flex-1 px-4 py-10 text-neutral-800 md:px-8", children: /* @__PURE__ */ m("div", { className: "mx-auto flex w-full max-w-300 flex-col gap-10", children: [
-  /* @__PURE__ */ e(x, { ...a }),
-  /* @__PURE__ */ m("div", { className: "flex flex-col gap-10 md:flex-row md:gap-24", children: [
-    /* @__PURE__ */ e(i, { ...r }),
-    /* @__PURE__ */ e("div", { className: "flex flex-1 flex-col gap-10", children: o.map((l) => /* @__PURE__ */ e(p, { ...l }, l.title)) })
+const n = ({ jumbotron: m, asideNavMenu: r, faqSections: o }) => /* @__PURE__ */ l("main", { className: "bg-primary-50 flex-1 px-4 py-10 text-neutral-800 md:px-8", children: /* @__PURE__ */ a("div", { className: "mx-auto flex w-full max-w-300 flex-col gap-10", children: [
+  /* @__PURE__ */ l(x, { ...m }),
+  /* @__PURE__ */ a("div", { className: "flex flex-col gap-10 lg:flex-row lg:gap-24", children: [
+    /* @__PURE__ */ l(i, { ...r }),
+    /* @__PURE__ */ l("div", { className: "flex flex-1 flex-col gap-10", children: o.map((e) => /* @__PURE__ */ l(p, { ...e }, e.title)) })
   ] })
 ] }) });
 export {
-  d as FaqsTemplate
+  n as FaqsTemplate
 };

package/dist/components/HeroSection.d.ts

@@ -19,15 +19,15 @@ export declare interface HeroSectionProps {
     title: string;
     description?: string;
     cta: ButtonProps;
-    heroDocuments?: ItemProps[];
+    heroDocuments: ItemProps[];
     listTitle?: string;
-    listNote?: string;
     backgroundImage?: string;
 }
 
 export type IconPosition = 'left' | 'right' | 'top';
 
 export interface ItemProps {
+    id?: string;
     image: ReactNode;
     title?: string;
     description?: string;
@@ -35,5 +35,6 @@ export interface ItemProps {
     actions?: ReactNode;
     variant?: 'default' | 'card';
     className?: string;
+    titleClassName?: string;
 }
 

package/dist/components/HeroSection.js

@@ -1,38 +1,32 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import "react";
 import { Item as x } from "./Item.js";
-import { Button as o } from "./Button.js";
-const h = ({
+import { Button as n } from "./Button.js";
+const g = ({
   title: a,
-  description: s,
-  cta: i,
-  heroDocuments: c = [],
-  listTitle: m,
-  listNote: n,
+  description: i,
+  cta: s,
+  heroDocuments: m,
+  listTitle: c,
   backgroundImage: l
 }) => /* @__PURE__ */ e("section", { className: "bg-primary-50", children: /* @__PURE__ */ e(
   "div",
   {
-    className: "bg-none bg-size-[420px_442px] bg-bottom-right bg-no-repeat lg:bg-(image:--hero-bg)",
+    className: "bg-none bg-size-[420px_442px] bg-bottom-right bg-no-repeat xl:bg-(image:--hero-bg)",
     style: { "--hero-bg": l ? `url(${l})` : "none" },
-    children: /* @__PURE__ */ t("div", { className: "mx-auto flex max-w-6xl flex-col items-center px-6 py-12 lg:flex-row", children: [
-      /* @__PURE__ */ t("div", { className: "flex max-w-[486px] flex-1 flex-col items-center gap-6 text-center lg:items-start lg:text-left", children: [
-        /* @__PURE__ */ t("div", { className: "space-y-5", children: [
-          /* @__PURE__ */ e("h1", { className: "font-lora text-super-hero text-neutral-900", children: a }),
-          /* @__PURE__ */ e("p", { className: "text-big text-neutral-800", children: s })
-        ] }),
-        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { size: "large", ...i }) })
+    children: /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-6 px-6 py-10 md:px-20 lg:flex-row lg:gap-14 lg:px-8 lg:py-12 xl:justify-center xl:gap-20", children: [
+      /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-6 pb-6 text-center lg:items-start lg:text-left xl:max-w-115", children: [
+        /* @__PURE__ */ e("h1", { className: "font-lora text-hero md:text-super-hero text-neutral-900", children: a }),
+        /* @__PURE__ */ e("p", { className: "text-big text-neutral-800", children: i }),
+        /* @__PURE__ */ e(n, { variant: "primary-darkgreen", className: "w-full md:w-fit", ...s })
       ] }),
-      /* @__PURE__ */ t("div", { className: "flex w-full flex-1 flex-col items-center justify-center gap-4 rounded-lg p-6 lg:items-start lg:justify-start", children: [
-        /* @__PURE__ */ t("div", { className: "flex w-full max-w-[486px] items-center justify-between", children: [
-          /* @__PURE__ */ e("p", { className: "text-big text-primary-800 font-semibold", children: m }),
-          /* @__PURE__ */ e("span", { className: "text-extra-small text-neutral-600", children: n })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "grid w-full max-w-[486px] gap-2", children: c.map((r) => /* @__PURE__ */ e(x, { ...r, variant: "card" }, r.title)) })
+      /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center gap-4 md:w-full md:items-start md:justify-start xl:max-w-115", children: [
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ e("p", { className: "text-big text-primary-800 font-semibold", children: c }) }),
+        /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-2", children: m.map((r) => /* @__PURE__ */ e(x, { ...r, variant: "card" }, r.title)) })
       ] })
     ] })
   }
 ) });
 export {
-  h as HeroSection
+  g as HeroSection
 };

package/dist/components/HomeTemplate.d.ts

@@ -4,12 +4,12 @@ import { ReactNode } from 'react';
 
 export interface BlogSectionProps {
     header: SectionHeadingProps;
-    articles?: Array<{
+    articles: {
         title: string;
         image: ReactNode;
         excerpt: string;
         cta: ReactNode;
-    }>;
+    }[];
     cta: ButtonProps;
 }
 
@@ -49,9 +49,8 @@ export interface HeroSectionProps {
     title: string;
     description?: string;
     cta: ButtonProps;
-    heroDocuments?: ItemProps[];
+    heroDocuments: ItemProps[];
     listTitle?: string;
-    listNote?: string;
     backgroundImage?: string;
 }
 
@@ -68,19 +67,20 @@ export interface HomeStepsProps {
 export declare const HomeTemplate: FC<HomeTemplateProps>;
 
 export declare interface HomeTemplateProps {
-    hero?: HeroSectionProps;
-    moreTemplates?: PopularDocumentsProps;
-    process?: HomeStepsProps;
+    hero: HeroSectionProps;
+    moreTemplates: PopularDocumentsProps;
+    process: HomeStepsProps;
     categories?: CategoriesSectionProps;
-    ratafia?: LawGeniusSectionProps;
-    trust?: TrustSectionProps;
+    ratafia: LawGeniusSectionProps;
+    trust: TrustSectionProps;
     faqTeaser: FaqTeaserSectionProps;
-    articles?: BlogSectionProps;
+    articles: BlogSectionProps;
 }
 
 export type IconPosition = 'left' | 'right' | 'top';
 
 export interface ItemProps {
+    id?: string;
     image: ReactNode;
     title?: string;
     description?: string;
@@ -88,6 +88,7 @@ export interface ItemProps {
     actions?: ReactNode;
     variant?: 'default' | 'card';
     className?: string;
+    titleClassName?: string;
 }
 
 export interface LawGeniusSectionProps {
@@ -116,11 +117,7 @@ export interface SectionHeadingProps {
 
 export interface TrustSectionProps {
     header: SectionHeadingProps;
-    trustReasons?: Array<{
-        label: string;
-        icon?: ReactNode;
-    }>;
+    trustReasons: string[];
     cta: ButtonProps;
-    children?: ReactNode;
 }
 

package/dist/components/HomeTemplate.js

@@ -1,32 +1,32 @@
 import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import "react";
-import { HeroSection as S } from "./HeroSection.js";
-import { MoreTemplatesSection as s } from "./MoreTemplatesSection.js";
-import { ProcessSection as a } from "./ProcessSection.js";
+import { HeroSection as s } from "./HeroSection.js";
+import { MoreTemplatesSection as a } from "./MoreTemplatesSection.js";
+import { ProcessSection as S } from "./ProcessSection.js";
 import { CategoriesSection as l } from "./CategoriesSection.js";
 import { RatafiaSection as x } from "./RatafiaSection.js";
 import { TrustSection as T } from "./TrustSection.js";
 import { FaqTeaserSection as j } from "./FaqTeaserSection.js";
-import { ArticlesSection as H } from "./ArticlesSection.js";
-const b = ({
-  hero: r,
+import { BlogSection as u } from "./BlogSection.js";
+const P = ({
+  hero: t,
   moreTemplates: m,
-  process: t,
-  categories: i,
-  ratafia: e,
-  trust: n,
-  faqTeaser: c,
-  articles: p
+  process: e,
+  categories: r,
+  ratafia: i,
+  trust: p,
+  faqTeaser: n,
+  articles: c
 }) => /* @__PURE__ */ f("main", { className: "flex-1", children: [
-  r && /* @__PURE__ */ o(S, { ...r }),
-  m && /* @__PURE__ */ o(s, { ...m }),
-  t && /* @__PURE__ */ o(a, { ...t }),
-  i && /* @__PURE__ */ o(l, { ...i }),
-  e && /* @__PURE__ */ o(x, { ...e }),
-  n && /* @__PURE__ */ o(T, { ...n }),
-  /* @__PURE__ */ o(j, { ...c }),
-  p && /* @__PURE__ */ o(H, { ...p })
+  /* @__PURE__ */ o(s, { ...t }),
+  /* @__PURE__ */ o(a, { ...m }),
+  /* @__PURE__ */ o(S, { ...e }),
+  r && /* @__PURE__ */ o(l, { ...r }),
+  /* @__PURE__ */ o(x, { ...i }),
+  /* @__PURE__ */ o(T, { ...p }),
+  /* @__PURE__ */ o(j, { ...n }),
+  /* @__PURE__ */ o(u, { ...c })
 ] });
 export {
-  b as HomeTemplate
+  P as HomeTemplate
 };

package/dist/components/Item.d.ts

@@ -4,6 +4,7 @@ import { ReactNode } from 'react';
 export declare const Item: FC<ItemProps>;
 
 export declare interface ItemProps {
+    id?: string;
     image: ReactNode;
     title?: string;
     description?: string;
@@ -11,5 +12,6 @@ export declare interface ItemProps {
     actions?: ReactNode;
     variant?: 'default' | 'card';
     className?: string;
+    titleClassName?: string;
 }
 

package/dist/components/Item.js

@@ -1,32 +1,34 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import "react";
-const x = ({
-  image: t,
+const p = ({
+  id: t,
+  image: l,
   title: e,
   description: a,
-  documentUrl: l,
-  actions: d,
-  variant: n = "default",
-  className: m = ""
+  documentUrl: d,
+  actions: n,
+  variant: m = "default",
+  className: o = "",
+  titleClassName: c = ""
 }) => /* @__PURE__ */ s(
   "a",
   {
-    href: l,
+    href: d,
     className: `hover:bg-primary-50 flex cursor-pointer items-center gap-4 rounded-sm p-4 pl-6 ${{
       default: "",
       card: "border border-0.5 border-neutral-200 shadow-lg bg-white"
-    }[n]} ${m}`,
+    }[m]} ${o}`,
     children: [
-      t,
+      l,
       /* @__PURE__ */ s("div", { className: "flex-1", children: [
-        e && /* @__PURE__ */ r("p", { className: "text-medium font-semibold text-neutral-900", children: e }),
+        e && /* @__PURE__ */ r("p", { className: `text-medium font-semibold text-neutral-900 ${c}`, children: e }),
         a && /* @__PURE__ */ r("p", { className: "text-extra-small text-neutral-600", children: a })
       ] }),
-      /* @__PURE__ */ r("div", { children: d })
+      /* @__PURE__ */ r("div", { children: n })
     ]
   },
-  e
+  t ?? e
 );
 export {
-  x as Item
+  p as Item
 };

package/dist/components/MoreTemplatesSection.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { ReactNode } from 'react';
 
 export interface ItemProps {
+    id?: string;
     image: ReactNode;
     title?: string;
     description?: string;
@@ -9,6 +10,7 @@ export interface ItemProps {
     actions?: ReactNode;
     variant?: 'default' | 'card';
     className?: string;
+    titleClassName?: string;
 }
 
 export declare const MoreTemplatesSection: FC<PopularDocumentsProps>;