@npm_leadtech/legal-contracts-ui 0.87.0 → 0.87.2

package/dist/components/Storyline.js

@@ -1,20 +1,40 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-const d = ({ title: t, text: r, storyItems: s }) => /* @__PURE__ */ e("section", { className: "bg-secondary-100 px-4 py-16", children: /* @__PURE__ */ l("div", { className: "mx-auto max-w-6xl rounded-3xl bg-white p-8 shadow-sm md:p-12", children: [
-  /* @__PURE__ */ l("div", { className: "space-y-4 text-neutral-800", children: [
-    /* @__PURE__ */ e("p", { className: "text-super-large font-bold text-neutral-900", children: t }),
-    /* @__PURE__ */ e("p", { className: "text-medium", children: r })
-  ] }),
-  /* @__PURE__ */ e("div", { className: "mt-10 space-y-10", children: s.map((a, c) => /* @__PURE__ */ l("div", { className: "flex gap-4 md:gap-6", children: [
-    /* @__PURE__ */ l("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ e("span", { className: "bg-primary-50 flex h-12 w-12 items-center justify-center rounded-full shadow-sm", children: a.icon }),
-      c !== s.length - 1 && /* @__PURE__ */ e("span", { className: "mt-2 h-full w-px bg-neutral-200", "aria-hidden": !0 })
-    ] }),
-    /* @__PURE__ */ l("article", { className: "bg-neutral-25 flex-1 rounded-2xl p-6 shadow-sm", children: [
-      /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-900", children: a.title }),
-      /* @__PURE__ */ e("p", { className: "text-medium mt-2 text-neutral-800", children: a.description })
-    ] })
-  ] }, a.title)) })
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+const i = ({ title: n, text: s, storyItems: l }) => /* @__PURE__ */ e("section", { className: "bg-secondary-100 p-6 md:px-6 md:py-12", children: /* @__PURE__ */ a("div", { className: "mx-auto max-w-6xl rounded-2xl bg-white p-6 md:p-12", children: [
+  /* @__PURE__ */ e("h2", { className: "pb-6 font-sans text-3xl font-bold tracking-tight text-neutral-800", children: n }),
+  /* @__PURE__ */ e("div", { className: "pb-2 font-sans text-base text-neutral-800 md:pb-6", children: s }),
+  /* @__PURE__ */ a("ul", { className: "relative mt-4 pl-6 md:mt-0", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "absolute top-0 bottom-0 left-1 w-0.5 bg-[repeating-linear-gradient(to_bottom,currentColor,currentColor_0.75rem,transparent_0.75rem,transparent_1.25rem)] text-neutral-400",
+        "aria-hidden": "true"
+      }
+    ),
+    l.map((t, r) => /* @__PURE__ */ a(
+      "li",
+      {
+        className: "bg-neutral-25 relative mt-4 flex list-none flex-col rounded-2xl p-6 first:mt-0 md:flex-row",
+        children: [
+          r === 0 && /* @__PURE__ */ e("div", { className: "absolute top-0 bottom-1/2 -left-6 z-0 w-2.5 bg-white", "aria-hidden": "true" }),
+          r === l.length - 1 && /* @__PURE__ */ e("div", { className: "absolute top-1/2 bottom-0 -left-6 z-0 w-2.5 bg-white", "aria-hidden": "true" }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "bg-primary-800 absolute top-1/2 -left-6 z-10 h-2.5 w-2.5 -translate-y-1/2 rounded-full",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-neutral-200 p-2", children: t.icon }),
+          /* @__PURE__ */ a("div", { className: "md:flex-1 md:pl-4", children: [
+            /* @__PURE__ */ e("p", { className: "mt-4 font-sans text-lg font-bold text-neutral-800 md:mt-0", children: t.title }),
+            /* @__PURE__ */ e("div", { className: "mt-2 font-sans text-base font-normal text-neutral-800", children: t.description })
+          ] })
+        ]
+      },
+      t.title
+    ))
+  ] })
 ] }) });
 export {
-  d as Storyline
+  i as Storyline
 };