@npm_leadtech/legal-contracts-ui 0.153.0 → 0.154.0

package/dist/components/Anchor.js

@@ -1,6 +1,6 @@
 import { jsx as x } from "react/jsx-runtime";
 import m from "clsx";
-const w = ({ children: o, variant: l = "default", className: c = "", ...t }) => {
+const w = ({ children: l, variant: o = "default", className: c = "", ...t }) => {
   const e = t.href || "", n = e.toLowerCase(), u = n.startsWith("mailto:"), a = n.startsWith("tel:"), r = "cursor-pointer text-primary-700", i = {
     default: "text-neutral-900 underline",
     legal: r,
@@ -10,15 +10,15 @@ const w = ({ children: o, variant: l = "default", className: c = "", ...t }) =>
     unsubscribe: r,
     cookies: "text-white",
     story: "text-neutral-800 underline"
-  }, f = i[l] ?? i.default, h = e.startsWith("http"), d = (() => {
+  }, f = i[o] ?? i.default, h = e.startsWith("http"), d = (() => {
     if (!a) return e;
     try {
-      return decodeURIComponent(e).replace(/\s/g, "");
+      return decodeURIComponent(e).replaceAll(/\s/g, "");
     } catch {
-      return e.replace(/%20/g, "").replace(/\s/g, "");
+      return e.replaceAll("%20", "").replaceAll(/\s/g, "");
     }
   })(), s = t.target === "_blank" || h && !a && !u ? "_blank" : t.target, g = s === "_blank" ? "noopener noreferrer" : t.rel;
-  return /* @__PURE__ */ x("a", { ...t, href: d, className: m(c, f), target: s, rel: g, children: o });
+  return /* @__PURE__ */ x("a", { ...t, href: d, className: m(c, f), target: s, rel: g, children: l });
 };
 export {
   w as Anchor

package/dist/components/FaqItem.js

@@ -12,7 +12,7 @@ const I = ({
   variant: m,
   slug: c
 }) => {
-  const t = `toggle-${d().replace(/:/g, "")}`;
+  const t = `toggle-${d().replaceAll(":", "")}`;
   return /* @__PURE__ */ e("div", { id: c, className: "text-medium flex scroll-mt-24 flex-col rounded bg-white p-4 text-neutral-800 shadow", children: /* @__PURE__ */ r(p, { question: /* @__PURE__ */ e("h3", { className: "font-bold", children: n }), children: [
     /* @__PURE__ */ e(h, { content: l, className: "text-medium", variant: m ?? "default" }),
     o && /* @__PURE__ */ r("div", { className: "mt-4 rounded-lg bg-neutral-50 p-6", children: [

package/dist/components/FaqSection.js

@@ -5,7 +5,7 @@ import { Markdown as i } from "./Markdown.js";
 import { FaqItem as x } from "./FaqItem.js";
 const g = ({ title: l, description: o, faqItems: r, className: a = "", variant: c }) => {
   if (r.length === 0) return null;
-  const m = l.toLowerCase().replace(/\s+/g, "-");
+  const m = l.toLowerCase().replaceAll(/\s+/g, "-");
   return /* @__PURE__ */ s("div", { id: m, className: n("flex scroll-mt-24 flex-col gap-2 p-0.5 text-neutral-800", a), children: [
     /* @__PURE__ */ s("div", { className: "mb-4 flex flex-col", children: [
       /* @__PURE__ */ e("h2", { className: "text-super-large font-bold", children: l }),

package/dist/components/Input.js

@@ -19,7 +19,7 @@ const z = ({
   errorMessage: v,
   ...w
 }) => {
-  const [n, c] = p(!1), [N, a] = p(!1);
+  const [n, c] = p(!1), [N, r] = p(!1);
   return /* @__PURE__ */ t("div", { className: `flex flex-col gap-2 ${g}`, children: [
     /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ t("label", { htmlFor: l, className: "font-bold text-neutral-800", children: [
@@ -27,64 +27,58 @@ const z = ({
         " ",
         o && /* @__PURE__ */ e("span", { className: "text-neutral-800", children: "*" })
       ] }),
-      i && /* @__PURE__ */ t(
-        "span",
-        {
-          className: "group relative inline-flex",
-          onMouseLeave: () => {
-            a(!1);
-          },
-          children: [
-            /* @__PURE__ */ e(
-              "button",
-              {
-                className: "cursor-pointer rounded-full p-0",
-                type: "button",
-                "aria-expanded": n,
-                onClick: () => {
-                  a(!1), c((r) => !r);
-                },
-                children: /* @__PURE__ */ e(y, { "aria-hidden": "true" })
-              }
+      i && /* @__PURE__ */ t("span", { className: "group relative inline-flex", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: "cursor-pointer rounded-full p-0",
+            type: "button",
+            "aria-expanded": n,
+            onMouseEnter: () => {
+              r(!1);
+            },
+            onClick: () => {
+              r(!1), c((a) => !a);
+            },
+            children: /* @__PURE__ */ e(y, { "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: u(
+              "invisible absolute top-6 -left-21 z-10 w-max max-w-60 rounded bg-neutral-800 p-2 transition-opacity lg:max-w-80 xl:-left-15 xl:max-w-112",
+              "opacity-0",
+              !N && "group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100",
+              n && "visible opacity-100"
             ),
-            /* @__PURE__ */ t(
-              "span",
-              {
-                className: u(
-                  "invisible absolute top-6 -left-21 z-10 w-max max-w-60 rounded bg-neutral-800 p-2 transition-opacity lg:max-w-80 xl:-left-15 xl:max-w-112",
-                  "opacity-0",
-                  !N && "group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100",
-                  n && "visible opacity-100"
-                ),
-                role: "tooltip",
-                children: [
-                  /* @__PURE__ */ e(
-                    "span",
-                    {
-                      className: "absolute -top-1 right-[calc(100%-5.75rem)] h-2 w-2 translate-x-1/2 rotate-45 bg-neutral-800 xl:right-[calc(100%-4.25rem)]",
-                      "aria-hidden": "true"
-                    }
-                  ),
-                  /* @__PURE__ */ t("span", { className: "text-extra-small inline-flex items-center gap-2 px-1 py-2 leading-none font-bold text-white", children: [
-                    /* @__PURE__ */ e("span", { children: i }),
-                    /* @__PURE__ */ e(
-                      "button",
-                      {
-                        type: "button",
-                        className: "cursor-pointer p-0",
-                        onClick: () => {
-                          a(!0), c(!1);
-                        },
-                        children: /* @__PURE__ */ e(I, { width: 20, height: 20, fill: "white" })
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          ]
-        }
-      )
+            role: "tooltip",
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "absolute -top-1 right-[calc(100%-5.75rem)] h-2 w-2 translate-x-1/2 rotate-45 bg-neutral-800 xl:right-[calc(100%-4.25rem)]",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ t("span", { className: "text-extra-small inline-flex items-center gap-2 px-1 py-2 leading-none font-bold text-white", children: [
+                /* @__PURE__ */ e("span", { children: i }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    className: "cursor-pointer p-0",
+                    onClick: () => {
+                      r(!0), c(!1);
+                    },
+                    children: /* @__PURE__ */ e(I, { width: 20, height: 20, fill: "white" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ e(
       "input",
@@ -99,8 +93,8 @@ const z = ({
           "text-small focus-visible:outline-primary-500 w-full rounded border p-3 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
           s ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
         ),
-        onChange: (r) => {
-          b?.(r.target.value);
+        onChange: (a) => {
+          b?.(a.target.value);
         },
         ...w
       }

package/dist/components/Modal.js

@@ -1,64 +1,64 @@
 "use client";
-import { jsxs as a, Fragment as f, jsx as o } from "react/jsx-runtime";
+import { jsxs as t, Fragment as u, jsx as e } from "react/jsx-runtime";
 import { useEffect as m } from "react";
-import { createPortal as p } from "react-dom";
-import { CloseIcon as y } from "./CloseIcon.js";
-const w = ({ trigger: r, children: i, isOpen: t, setIsOpen: l, showClose: s, onTrigger: c }) => {
-  const d = () => {
-    c?.(), l(!0);
+import { createPortal as f } from "react-dom";
+import { CloseIcon as b } from "./CloseIcon.js";
+const x = ({ trigger: r, children: a, isOpen: o, setIsOpen: l, showClose: s, onTrigger: i }) => {
+  const c = () => {
+    i?.(), l(!0);
   }, n = () => {
     l(!1);
-  }, u = (e) => {
-    e.target === e.currentTarget && n();
   };
   return m(() => {
-    if (!t) return;
-    const e = document.body.style.overflow;
+    if (!o) return;
+    const d = document.body.style.overflow;
     return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = e;
+      document.body.style.overflow = d;
     };
-  }, [t]), /* @__PURE__ */ a(f, { children: [
-    !!r && /* @__PURE__ */ o(
+  }, [o]), /* @__PURE__ */ t(u, { children: [
+    !!r && /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         "aria-label": "zoom",
-        onClick: d,
+        onClick: c,
         className: "flex w-full cursor-pointer justify-center",
         children: r
       }
     ),
-    t && p(
-      /* @__PURE__ */ o(
+    o && f(
+      /* @__PURE__ */ t(
         "div",
         {
           role: "dialog",
           "aria-modal": "true",
-          "data-testid": "modal-backdrop",
           className: "bg-primary-900/80 fixed inset-0 z-1001 flex items-center justify-center",
-          onClick: u,
-          children: /* @__PURE__ */ o("div", { className: "pointer-events-none relative flex max-h-screen w-full items-start justify-center overflow-y-auto px-6 py-24", children: /* @__PURE__ */ a(
-            "div",
-            {
-              className: "pointer-events-auto relative",
-              onClick: (e) => {
-                e.stopPropagation();
-              },
-              children: [
-                s && /* @__PURE__ */ o(
-                  "button",
-                  {
-                    type: "button",
-                    className: "absolute top-4 right-4 z-10 cursor-pointer rounded-full p-2 transition-colors hover:bg-neutral-100 focus:outline-none",
-                    onClick: n,
-                    "aria-label": "Close",
-                    children: /* @__PURE__ */ o(y, {})
-                  }
-                ),
-                i
-              ]
-            }
-          ) })
+          children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                "data-testid": "modal-backdrop",
+                className: "absolute inset-0 cursor-default border-none bg-transparent p-0",
+                onClick: n,
+                "aria-label": "Close modal"
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "pointer-events-none relative flex max-h-screen w-full items-start justify-center overflow-y-auto px-6 py-24", children: /* @__PURE__ */ t("div", { className: "pointer-events-auto relative", children: [
+              s && /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "absolute top-4 right-4 z-10 cursor-pointer rounded-full p-2 transition-colors hover:bg-neutral-100 focus:outline-none",
+                  onClick: n,
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ e(b, {})
+                }
+              ),
+              a
+            ] }) })
+          ]
         }
       ),
       document.body
@@ -66,5 +66,5 @@ const w = ({ trigger: r, children: i, isOpen: t, setIsOpen: l, showClose: s, onT
   ] });
 };
 export {
-  w as Modal
+  x as Modal
 };

package/dist/components/NavMenuItem.js

@@ -1,83 +1,91 @@
 "use client";
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as p, useCallback as T, useRef as $, useEffect as j } from "react";
-import { ChevronDownIcon as P } from "./ChevronDownIcon.js";
-import { ChevronRightIcon as R } from "./ChevronRightIcon.js";
-const D = (l) => {
-  const { hasDropdown: g, isNested: w, isOpen: v, onToggle: i, dataQa: x } = l, [C, I] = p(!1), [b, u] = p(null), s = v ?? C, n = T(
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useState as v, useCallback as w, useRef as x, useEffect as C } from "react";
+import { ChevronDownIcon as D } from "./ChevronDownIcon.js";
+import { ChevronRightIcon as _ } from "./ChevronRightIcon.js";
+const q = (r) => {
+  const { hasDropdown: I, isNested: b, isOpen: N, onToggle: i, dataQa: k, onItemClick: c } = r, [L, O] = v(!1), [y, f] = v(null), l = N ?? L, n = w(
     (e) => {
-      e || u(null), i ? i(e) : I(e);
+      e || f(null), i ? i(e) : O(e);
     },
     [i]
-  ), r = $(null);
-  j(() => {
-    if (!s) return;
-    const e = (c) => {
-      r.current && !r.current.contains(c.target) && n(!1);
+  ), d = x(null);
+  C(() => {
+    if (!l) return;
+    const e = (u) => {
+      d.current && !d.current.contains(u.target) && n(!1);
     };
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [s, n]);
-  const m = {
+  }, [l, n]);
+  const p = {
     topLevel: {
       liClass: "relative py-2",
       triggerClass: "hover:text-neutral-600",
       dropdownPosition: "top-full left-0",
-      Icon: P
+      Icon: D
     },
     nested: {
       liClass: "relative",
       triggerClass: "p-1 hover:bg-primary-100 w-full rounded min-w-48.5",
       dropdownPosition: "top-0 left-full -mt-4 pl-6",
-      Icon: R
+      Icon: _
     }
-  }, o = w ? m.nested : m.topLevel, N = o.Icon, f = () => {
-    n(!1), l.onItemClick && l.onItemClick();
-  }, k = (e) => {
-    e.stopPropagation(), n(!s);
-  }, O = () => {
+  }, o = b ? p.nested : p.topLevel, E = o.Icon, s = w(() => {
+    n(!1), c && c();
+  }, [c, n]), h = x(null);
+  C(() => {
+    const e = h.current;
+    if (e)
+      return e.addEventListener("click", s), () => {
+        e.removeEventListener("click", s);
+      };
+  }, [s]);
+  const M = (e) => {
+    e.stopPropagation(), n(!l);
+  }, T = () => {
     globalThis.window.matchMedia("(hover: hover)").matches && n(!0);
-  }, y = () => {
+  }, $ = () => {
     globalThis.window.matchMedia("(hover: hover)").matches && n(!1);
   };
-  if (g) {
-    const { dropdownItems: e, label: c } = l;
-    return /* @__PURE__ */ d(
+  if (I) {
+    const { dropdownItems: e, label: u } = r;
+    return /* @__PURE__ */ m(
       "li",
       {
-        ref: r,
+        ref: d,
         className: o.liClass,
-        onMouseEnter: O,
-        onMouseLeave: y,
+        onMouseEnter: T,
+        onMouseLeave: $,
         children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ m(
             "button",
             {
-              "data-qa": x,
+              "data-qa": k,
               className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 text-nowrap text-neutral-800 transition-colors ${o.triggerClass}`,
               "aria-haspopup": "menu",
-              "aria-expanded": s,
-              onClick: k,
+              "aria-expanded": l,
+              onClick: M,
               children: [
-                /* @__PURE__ */ t("span", { className: "text-medium", children: c }),
-                /* @__PURE__ */ t(N, { fill: "#000", width: 20, height: 20 })
+                /* @__PURE__ */ t("span", { className: "text-medium", children: u }),
+                /* @__PURE__ */ t(E, { fill: "#000", width: 20, height: 20 })
               ]
             }
           ),
           /* @__PURE__ */ t(
             "div",
             {
-              className: `absolute z-50 min-w-48 transition-all duration-200 ${o.dropdownPosition} ${s ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+              className: `absolute z-50 min-w-48 transition-all duration-200 ${o.dropdownPosition} ${l ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
               children: /* @__PURE__ */ t("div", { className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ t("ul", { className: "flex flex-col gap-2", children: e.map((a) => /* @__PURE__ */ t(
-                D,
+                q,
                 {
                   ...a,
                   isNested: !0,
-                  onItemClick: f,
-                  isOpen: b === a.id,
-                  onToggle: (E) => {
-                    u(E ? a.id : null);
+                  onItemClick: s,
+                  isOpen: y === a.id,
+                  onToggle: (R) => {
+                    f(R ? a.id : null);
                   }
                 },
                 a.id
@@ -88,18 +96,18 @@ const D = (l) => {
       }
     );
   }
-  const { link: L, tag: h, bold: M } = l;
-  return /* @__PURE__ */ t("li", { className: o.liClass, onClick: f, children: /* @__PURE__ */ d(
+  const { link: j, tag: g, bold: P } = r;
+  return /* @__PURE__ */ t("li", { ref: h, className: o.liClass, children: /* @__PURE__ */ m(
     "span",
     {
       className: `text-small relative flex w-full items-center gap-1 text-nowrap text-neutral-800 transition-colors ${o.triggerClass} `,
       children: [
-        /* @__PURE__ */ t("span", { className: `text-medium flex-1 ${M ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: L }),
-        h && /* @__PURE__ */ t("span", { className: "bg-secondary-200 text-extra-small flex h-4.5 w-5.25 items-center justify-center rounded align-middle font-bold", children: h })
+        /* @__PURE__ */ t("span", { className: `text-medium flex-1 ${P ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: j }),
+        g && /* @__PURE__ */ t("span", { className: "bg-secondary-200 text-extra-small flex h-4.5 w-5.25 items-center justify-center rounded align-middle font-bold", children: g })
       ]
     }
   ) });
 };
 export {
-  D as NavMenuItem
+  q as NavMenuItem
 };

package/dist/components/PricingPlanCard.js

@@ -1,7 +1,7 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { Markdown as d } from "./Markdown.js";
-import { LinkWrapper as p } from "./LinkWrapper.js";
-const x = ({ variant: r, title: i, subtitle: s, items: o, cta: n }) => {
+import { LinkWrapper as m } from "./LinkWrapper.js";
+const x = ({ variant: r, title: i, subtitle: s, items: o, cta: t }) => {
   const a = {
     Primary: {
       container: "bg-neutral-25",
@@ -14,14 +14,14 @@ const x = ({ variant: r, title: i, subtitle: s, items: o, cta: n }) => {
       button: "primary-yellow"
     }
   }, c = { Primary: "bg-primary-100 p-2 rounded-lg", Secondary: "bg-secondary-200 p-2 rounded-lg" };
-  return /* @__PURE__ */ t("div", { className: `${a[r].container} flex h-full flex-col gap-6 rounded-2xl p-6`, children: [
+  return /* @__PURE__ */ n("div", { className: `${a[r].container} flex h-full flex-col gap-6 rounded-2xl p-6`, children: [
     /* @__PURE__ */ e("span", { className: `text-big w-fit rounded-lg px-4 py-2 font-bold ${a[r].chip}`, children: i }),
     /* @__PURE__ */ e("p", { className: "text-medium font-bold text-neutral-800", children: s }),
     /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200" }),
-    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-4", children: o.map((l) => /* @__PURE__ */ t(
+    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-6", children: o.map((l) => /* @__PURE__ */ n(
       "li",
       {
-        className: `flex items-start gap-2 ${l.isHighlighted ? c[l.cardStyles || "Primary"] : ""}`,
+        className: `text-small flex items-start gap-2 ${l.isHighlighted ? c[l.cardStyles || "Primary"] : ""}`,
         children: [
           /* @__PURE__ */ e("div", { className: "pt-0.5", children: l.image }),
           /* @__PURE__ */ e(d, { content: l.text, className: "mb-0!", variant: "legal" })
@@ -29,13 +29,13 @@ const x = ({ variant: r, title: i, subtitle: s, items: o, cta: n }) => {
       },
       l.id
     )) }),
-    n != null && /* @__PURE__ */ e(
-      p,
+    t != null && /* @__PURE__ */ e(
+      m,
       {
         size: "large",
         variant: a[r].button,
         className: "text-medium w-fit justify-center font-bold",
-        children: n
+        children: t
       }
     )
   ] });

package/dist/components/UploadZone.js

@@ -10,12 +10,13 @@ const b = ({
   fileSizeText: o,
   disclaimer: i,
   onAddDocument: r,
-  onDropDocument: m,
-  containerClassName: s = "",
+  onDropDocument: s,
+  containerClassName: m = "",
   dataQa: p
 }) => /* @__PURE__ */ l(
   "div",
   {
+    role: "presentation",
     onDragOver: (e) => {
       e.preventDefault();
     },
@@ -23,11 +24,11 @@ const b = ({
       e.preventDefault();
     },
     onDrop: (e) => {
-      e.preventDefault(), m?.(e);
+      e.preventDefault(), s?.(e);
     },
     className: c(
       "group rounded-3xl bg-neutral-200/50 p-4 backdrop-blur-xs md:max-w-80 lg:max-w-120 xl:max-w-140",
-      s
+      m
     ),
     children: [
       /* @__PURE__ */ t("input", { type: "file", id: "file-upload", className: "sr-only", onChange: r, multiple: !0 }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-contracts-ui",
-  "version": "0.153.0",
+  "version": "0.154.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",