@npm_leadtech/legal-contracts-ui 0.84.1 → 0.84.2

package/dist/components/AiLegalDocumentReviewerTemplate.d.ts

@@ -110,6 +110,7 @@ export interface HowItWorksSectionProps {
 }
 
 export interface HowItWorksStep {
+    id: string;
     title: string;
     description: string;
     icon: ReactNode;

package/dist/components/ElectronicSignatureTemplate.d.ts

@@ -76,6 +76,7 @@ export interface HowItWorksSectionProps {
 }
 
 export interface HowItWorksStep {
+    id: string;
     title: string;
     description: string;
     icon: ReactNode;

package/dist/components/HowItWorksSection.d.ts

@@ -11,6 +11,7 @@ export declare interface HowItWorksSectionProps {
 }
 
 export declare interface HowItWorksStep {
+    id: string;
     title: string;
     description: string;
     icon: ReactNode;

package/dist/components/HowItWorksSection.js

@@ -1,26 +1,22 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { SectionHeading as t } from "./SectionHeading.js";
-const o = ({ media: r, title: i, description: s, steps: d }) => /* @__PURE__ */ e("section", { className: "bg-white px-4 py-16", children: /* @__PURE__ */ a("div", { className: "mx-auto grid w-full max-w-6xl gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
-  /* @__PURE__ */ e("div", { className: "relative order-2 overflow-hidden rounded-3xl shadow-[0_25px_80px_rgba(3,42,56,0.25)] lg:order-1", children: r }),
-  /* @__PURE__ */ a("div", { className: "order-1 space-y-6 lg:order-2", children: [
-    /* @__PURE__ */ e(t, { title: i, description: s, align: "start" }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: d.map((l) => /* @__PURE__ */ e(
-      "article",
-      {
-        className: "bg-neutral-25 rounded-lg p-5",
-        style: { boxShadow: "var(--shadow-small)" },
-        children: /* @__PURE__ */ a("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ e("span", { className: "inline-flex h-6 w-6 shrink-0 items-center justify-center", children: l.icon }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ e("p", { className: "text-medium font-bold text-neutral-800", children: l.title }),
-            /* @__PURE__ */ e("p", { className: "text-small text-neutral-800", children: l.description })
-          ] })
-        ] })
-      },
-      l.title
-    )) })
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { Markdown as c } from "./Markdown.js";
+const m = ({ media: a, title: d, description: i, steps: s }) => /* @__PURE__ */ e("section", { className: "bg-white", children: /* @__PURE__ */ l("div", { className: "mx-auto flex w-full flex-col gap-8 px-6 py-8 md:gap-12 lg:px-8 lg:py-12 xl:max-w-300 xl:flex-row xl:items-center xl:px-0", children: [
+  /* @__PURE__ */ e("div", { className: "relative order-2 overflow-hidden rounded-md shadow md:order-1 lg:mx-auto xl:shrink-0", children: a }),
+  /* @__PURE__ */ l("div", { className: "order-1 flex flex-col gap-6 text-neutral-800 md:order-2", children: [
+    /* @__PURE__ */ e("h2", { className: "text-super-large font-bold", children: d }),
+    /* @__PURE__ */ e(c, { className: "text-medium [&_p:last-child]:mb-0", content: i }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-3 xl:grid-cols-1", children: s.map((r) => /* @__PURE__ */ e("article", { className: "bg-neutral-25 rounded p-6", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-start gap-2", children: [
+      /* @__PURE__ */ l("div", { className: "flex justify-center gap-2", children: [
+        r.icon,
+        /* @__PURE__ */ e("p", { className: "text-medium font-bold", children: r.title })
+      ] }),
+      /* @__PURE__ */ l("p", { className: "text-small", children: [
+        r.description,
+        " "
+      ] })
+    ] }) }, r.id)) })
   ] })
 ] }) });
 export {
-  o as HowItWorksSection
+  m as HowItWorksSection
 };