@npm_leadtech/legal-contracts-ui 0.59.3 → 0.59.5

package/dist/components/Button.utils.js

@@ -1,102 +1,46 @@
-const t = {
-  "primary-green": "btn-primary-green",
-  "primary-darkgreen": "btn-primary-darkgreen",
-  "primary-yellow": "btn-primary-yellow",
-  "primary-white": "btn-primary-white",
-  "secondary-green": "btn-secondary-green",
-  "secondary-yellow": "btn-secondary-yellow",
-  "secondary-red": "btn-secondary-red",
-  "secondary-black": "btn-secondary-black",
-  "tertiary-bold": "btn-tertiary-bold",
-  "tertiary-thin": "btn-tertiary-thin",
-  "tertiary-icon": "btn-tertiary-icon",
-  "tertiary-link": "btn-tertiary-link",
-  "icon-black": "btn-icon-black",
-  "icon-grey": "btn-icon-grey",
-  "icon-mobile": "btn-icon-mobile"
-}, o = {
-  "primary-green": "sm:btn-primary-green",
-  "primary-darkgreen": "sm:btn-primary-darkgreen",
-  "primary-yellow": "sm:btn-primary-yellow",
-  "primary-white": "sm:btn-primary-white",
-  "secondary-green": "sm:btn-secondary-green",
-  "secondary-yellow": "sm:btn-secondary-yellow",
-  "secondary-red": "sm:btn-secondary-red",
-  "secondary-black": "sm:btn-secondary-black",
-  "tertiary-bold": "sm:btn-tertiary-bold",
-  "tertiary-thin": "sm:btn-tertiary-thin",
-  "tertiary-icon": "sm:btn-tertiary-icon",
-  "tertiary-link": "sm:btn-tertiary-link",
-  "icon-black": "sm:btn-icon-black",
-  "icon-grey": "sm:btn-icon-grey",
-  "icon-mobile": "sm:btn-icon-mobile"
-}, b = {
-  "primary-green": "md:btn-primary-green",
-  "primary-darkgreen": "md:btn-primary-darkgreen",
-  "primary-yellow": "md:btn-primary-yellow",
-  "primary-white": "md:btn-primary-white",
-  "secondary-green": "md:btn-secondary-green",
-  "secondary-yellow": "md:btn-secondary-yellow",
-  "secondary-red": "md:btn-secondary-red",
-  "secondary-black": "md:btn-secondary-black",
-  "tertiary-bold": "md:btn-tertiary-bold",
-  "tertiary-thin": "md:btn-tertiary-thin",
-  "tertiary-icon": "md:btn-tertiary-icon",
-  "tertiary-link": "md:btn-tertiary-link",
-  "icon-black": "md:btn-icon-black",
-  "icon-grey": "md:btn-icon-grey",
-  "icon-mobile": "md:btn-icon-mobile"
-}, c = {
-  "primary-green": "lg:btn-primary-green",
-  "primary-darkgreen": "lg:btn-primary-darkgreen",
-  "primary-yellow": "lg:btn-primary-yellow",
-  "primary-white": "lg:btn-primary-white",
-  "secondary-green": "lg:btn-secondary-green",
-  "secondary-yellow": "lg:btn-secondary-yellow",
-  "secondary-red": "lg:btn-secondary-red",
-  "secondary-black": "lg:btn-secondary-black",
-  "tertiary-bold": "lg:btn-tertiary-bold",
-  "tertiary-thin": "lg:btn-tertiary-thin",
-  "tertiary-icon": "lg:btn-tertiary-icon",
-  "tertiary-link": "lg:btn-tertiary-link",
-  "icon-black": "lg:btn-icon-black",
-  "icon-grey": "lg:btn-icon-grey",
-  "icon-mobile": "lg:btn-icon-mobile"
-}, s = {
-  "primary-green": "xl:btn-primary-green",
-  "primary-darkgreen": "xl:btn-primary-darkgreen",
-  "primary-yellow": "xl:btn-primary-yellow",
-  "primary-white": "xl:btn-primary-white",
-  "secondary-green": "xl:btn-secondary-green",
-  "secondary-yellow": "xl:btn-secondary-yellow",
-  "secondary-red": "xl:btn-secondary-red",
-  "secondary-black": "xl:btn-secondary-black",
-  "tertiary-bold": "xl:btn-tertiary-bold",
-  "tertiary-thin": "xl:btn-tertiary-thin",
-  "tertiary-icon": "xl:btn-tertiary-icon",
-  "tertiary-link": "xl:btn-tertiary-link",
-  "icon-black": "xl:btn-icon-black",
-  "icon-grey": "xl:btn-icon-grey",
-  "icon-mobile": "xl:btn-icon-mobile"
-}, d = {
+const r = "inline-flex items-center justify-center gap-2 rounded-sm transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", d = {
+  "primary-green": `${r} bg-primary-700 hover:bg-primary-500 border border-transparent font-semibold text-white disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "primary-darkgreen": `${r} bg-primary-900 hover:bg-primary-800 border border-transparent font-semibold text-white disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "primary-yellow": `${r} bg-secondary-500 hover:bg-secondary-400 border border-transparent font-semibold text-neutral-900 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "primary-white": `${r} border border-transparent bg-white font-semibold text-neutral-900 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "secondary-green": `${r} border-2 border-primary-700 bg-white font-semibold text-primary-700 hover:bg-primary-100 hover:text-primary-800 disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "secondary-yellow": `${r} border-2 border-secondary-500 bg-transparent font-semibold text-neutral-900 hover:border-secondary-600 hover:bg-secondary-100 disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "secondary-red": `${r} border-2 border-error-500 bg-transparent font-semibold text-error-500 hover:bg-error-25 disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "secondary-black": `${r} border-2 border-neutral-600 bg-transparent font-semibold text-neutral-800 hover:bg-neutral-200 disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-200 disabled:text-neutral-400`,
+  "tertiary-bold": `${r} border border-transparent bg-transparent p-1.5! font-semibold text-primary-700 hover:bg-primary-200 hover:text-primary-500 disabled:cursor-not-allowed disabled:bg-white disabled:text-neutral-400`,
+  "tertiary-thin": `${r} border border-transparent bg-transparent p-1.5! font-normal text-neutral-800 hover:bg-primary-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-neutral-400`,
+  "tertiary-icon": `${r} border border-transparent bg-transparent p-1.5! font-medium text-neutral-800 hover:bg-primary-100 disabled:cursor-not-allowed disabled:bg-white disabled:text-neutral-400`,
+  "tertiary-link": `${r} border border-transparent bg-transparent text-primary-700 underline underline-offset-2 disabled:cursor-not-allowed disabled:bg-white disabled:text-neutral-400`,
+  "icon-black": `${r} border border-transparent bg-black font-semibold text-white hover:bg-neutral-800 disabled:cursor-not-allowed disabled:bg-neutral-400`,
+  "icon-grey": `${r} border-2 border-neutral-600 bg-transparent font-semibold text-neutral-800 hover:bg-neutral-200 disabled:cursor-not-allowed disabled:border-neutral-400 disabled:bg-white disabled:text-neutral-400`,
+  "icon-mobile": `${r} border-2 border-neutral-200 bg-transparent px-8! text-primary-700 !rounded-sm hover:bg-neutral-50 disabled:cursor-not-allowed disabled:border-neutral-400 disabled:bg-white disabled:text-neutral-400`
+}, o = (t, e) => e.split(" ").map((l) => `${t}:${l}`).join(" "), i = Object.fromEntries(
+  Object.entries(d).map(([t, e]) => [t, o("sm", e)])
+), u = Object.fromEntries(
+  Object.entries(d).map(([t, e]) => [t, o("md", e)])
+), p = Object.fromEntries(
+  Object.entries(d).map(([t, e]) => [t, o("lg", e)])
+), g = Object.fromEntries(
+  Object.entries(d).map(([t, e]) => [t, o("xl", e)])
+), c = {
   small: "px-3 py-1.5 text-small",
   default: "px-4 py-2.5 text-medium",
   large: "px-6 py-3 text-big"
-}, p = (i = "default", r = "primary-green", n = "left", y = !1, a) => {
-  const l = () => n === "top" ? "flex-col" : n === "right" ? "flex-row-reverse" : "flex-row";
+}, f = (t = "default", e = "primary-green", l = "left", n = !1, s) => {
+  const b = () => l === "top" ? "flex-col" : l === "right" ? "flex-row-reverse" : "flex-row";
   return [
-    y ? "" : "cursor-pointer",
+    n ? "" : "cursor-pointer",
     (() => {
-      if (typeof r == "string")
-        return t[r];
-      const e = [];
-      return r.initial && e.push(t[r.initial]), r.sm && e.push(o[r.sm]), r.md && e.push(b[r.md]), r.lg && e.push(c[r.lg]), r.xl && e.push(s[r.xl]), e.join(" ");
+      if (typeof e == "string")
+        return d[e];
+      const a = [];
+      return e.initial && a.push(d[e.initial]), e.sm && a.push(i[e.sm]), e.md && a.push(u[e.md]), e.lg && a.push(p[e.lg]), e.xl && a.push(g[e.xl]), a.join(" ");
     })(),
-    d[i],
-    l(),
-    a
+    c[t],
+    b(),
+    s
   ].join(" ");
 };
 export {
-  p as getButtonClasses
+  f as getButtonClasses
 };

package/dist/components/ContactBanner.d.ts

@@ -7,5 +7,6 @@ export declare interface ContactBannerProps {
     phoneNumber?: string;
     contactHoursText?: string;
     contactHours?: string;
+    isScrolled?: boolean;
 }
 

package/dist/components/ContactBanner.js

@@ -1,16 +1,28 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import "react";
 import { InfoIcon as r } from "./InfoIcon.js";
-const m = ({ contactText: s, phoneNumber: l, contactHoursText: t, contactHours: a }) => /* @__PURE__ */ e("section", { className: "flex w-full justify-center border-b border-neutral-200 bg-neutral-50 px-4 py-2", children: /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center justify-center gap-4 text-center text-neutral-900 md:text-left", children: [
-  s && /* @__PURE__ */ e("p", { className: "text-small hidden sm:block", children: s }),
-  /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(r, {}) }),
-  l && /* @__PURE__ */ e("a", { href: `tel:${l}`, className: "text-small block font-bold sm:hidden", children: l }),
-  l && /* @__PURE__ */ e("p", { className: "text-small hidden font-bold sm:block", children: l }),
-  /* @__PURE__ */ n("div", { className: "text-small flex items-center gap-1", children: [
-    t && /* @__PURE__ */ e("span", { className: "hidden sm:block", children: t }),
-    a && /* @__PURE__ */ e("span", { children: a })
-  ] })
-] }) });
+const o = ({
+  contactText: s,
+  phoneNumber: l,
+  contactHoursText: t,
+  contactHours: a,
+  isScrolled: i
+}) => /* @__PURE__ */ e(
+  "section",
+  {
+    className: `flex w-full justify-center border-b border-neutral-200 bg-neutral-50 px-4 transition-all duration-500 ease-in-out ${i ? "h-0 py-0" : "h-8.75 py-2"}`,
+    children: /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center justify-center gap-4 text-center text-neutral-900 md:text-left", children: [
+      s && /* @__PURE__ */ e("p", { className: "text-small hidden sm:block", children: s }),
+      /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(r, {}) }),
+      l && /* @__PURE__ */ e("a", { href: `tel:${l}`, className: "text-small block font-bold sm:hidden", children: l }),
+      l && /* @__PURE__ */ e("p", { className: "text-small hidden font-bold sm:block", children: l }),
+      /* @__PURE__ */ n("div", { className: "text-small flex items-center gap-1", children: [
+        t && /* @__PURE__ */ e("span", { className: "hidden sm:block", children: t }),
+        a && /* @__PURE__ */ e("span", { children: a })
+      ] })
+    ] })
+  }
+);
 export {
-  m as ContactBanner
+  o as ContactBanner
 };

package/dist/components/Header.d.ts

@@ -2,6 +2,14 @@ import { FC } from 'react';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 
+export interface ContactBannerProps {
+    contactText?: string;
+    phoneNumber?: string;
+    contactHoursText?: string;
+    contactHours?: string;
+    isScrolled?: boolean;
+}
+
 export interface FormattedLanguageItem {
     code: string;
     name: string;
@@ -18,6 +26,7 @@ export declare interface HeaderProps {
     languageSelectorProps?: LanguageSelectorProps;
     userActions: ReactNode;
     mobileMenu: Omit<MobileMenuProps, 'logo' | 'userActions' | 'searchBarProps'>;
+    contactBannerProps: Omit<ContactBannerProps, 'isScrolled'>;
 }
 
 export interface LanguageSelectorProps {

package/dist/components/Header.js

@@ -1,44 +1,63 @@
-import { jsxs as r, Fragment as m, jsx as e } from "react/jsx-runtime";
-import "react";
-import { MobileMenu as c } from "./MobileMenu.js";
-import { NavMenu as p } from "./NavMenu.js";
-import { LanguageSelector as s } from "./LanguageSelector.js";
-import { ScalatorIcon as x } from "./ScalatorIcon.js";
-import { SearchBar as o } from "./SearchBar.js";
-const v = ({
-  logo: a,
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as p, useEffect as f } from "react";
+import { ContactBanner as x } from "./ContactBanner.js";
+import { MobileMenu as h } from "./MobileMenu.js";
+import { NavMenu as u } from "./NavMenu.js";
+import { LanguageSelector as w } from "./LanguageSelector.js";
+import { ScalatorIcon as v } from "./ScalatorIcon.js";
+import { SearchBar as g } from "./SearchBar.js";
+const O = ({
+  logo: l,
   navMenu: d,
-  searchBarProps: i,
-  languageSelectorProps: l,
+  searchBarProps: a,
+  languageSelectorProps: i,
   userActions: n,
-  mobileMenu: t
-}) => /* @__PURE__ */ r(m, { children: [
-  /* @__PURE__ */ e("header", { className: "bg-primary-50", children: /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between px-4 py-4 text-neutral-800 md:px-8", children: [
-    /* @__PURE__ */ r("div", { className: "flex flex-1 items-center gap-8", children: [
-      a,
-      /* @__PURE__ */ e(p, { className: "hidden lg:block", ...d })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "text-medium hidden flex-wrap items-center gap-4 lg:flex xl:gap-6", children: [
-      /* @__PURE__ */ e(o, { ...i }),
-      l && /* @__PURE__ */ e("div", { className: "hidden xl:block", children: /* @__PURE__ */ e(s, { ...l }) }),
-      n
-    ] }),
-    /* @__PURE__ */ r(
-      "button",
+  mobileMenu: t,
+  contactBannerProps: c
+}) => {
+  const [o, m] = p(!1);
+  return f(() => {
+    const s = () => {
+      m(window.scrollY > 10);
+    };
+    return window.addEventListener("scroll", s, { passive: !0 }), () => {
+      window.removeEventListener("scroll", s);
+    };
+  }, []), /* @__PURE__ */ r("div", { className: "sticky top-0 z-1000 flex w-full flex-col", children: [
+    /* @__PURE__ */ e(x, { isScrolled: o, ...c }),
+    /* @__PURE__ */ e(
+      "header",
       {
-        className: "text-small text-primary-500 flex items-center justify-center gap-1 rounded border border-neutral-400 bg-white px-2 py-1 lg:hidden",
-        onClick: t.onOpen,
-        "aria-label": "Open menu",
-        "aria-expanded": t.isOpen,
-        children: [
-          t.openText,
-          /* @__PURE__ */ e(x, {})
-        ]
+        className: `transition-colors duration-300 ease-in-out ${o ? "bg-white shadow-md" : "bg-primary-50"}`,
+        children: /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between px-4 py-4 text-neutral-800 md:px-8", children: [
+          /* @__PURE__ */ r("div", { className: "flex flex-1 items-center gap-8", children: [
+            l,
+            /* @__PURE__ */ e(u, { className: "hidden lg:block", ...d })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "text-medium hidden flex-wrap items-center gap-4 lg:flex xl:gap-6", children: [
+            /* @__PURE__ */ e(g, { ...a }),
+            i && /* @__PURE__ */ e("div", { className: "hidden xl:block", children: /* @__PURE__ */ e(w, { ...i }) }),
+            n
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "text-small text-primary-500 flex items-center justify-center gap-1 rounded border border-neutral-400 bg-white px-2 py-1 lg:hidden",
+              onClick: t.onOpen,
+              "aria-label": "Open menu",
+              "aria-expanded": t.isOpen,
+              children: [
+                t.openText,
+                /* @__PURE__ */ e(v, {})
+              ]
+            }
+          )
+        ] })
       }
-    )
-  ] }) }),
-  /* @__PURE__ */ e(c, { ...t, logo: a, userActions: n, searchBarProps: i })
-] });
+    ),
+    /* @__PURE__ */ e(h, { ...t, logo: l, userActions: n, searchBarProps: a })
+  ] });
+};
 export {
-  v as Header
+  O as Header
 };

package/dist/components/Markdown.js

@@ -1,40 +1,40 @@
 import { jsx as r } from "react/jsx-runtime";
 import t from "react-markdown";
-import i from "remark-gfm";
-import { Anchor as p } from "./Anchor.js";
-import { Blockquote as a } from "./Blockquote.js";
-import { Code as d } from "./Code.js";
-import { Header1 as f } from "./Header1.js";
-import { Header2 as n } from "./Header2.js";
-import { Header3 as l } from "./Header3.js";
-import { Header4 as c } from "./Header4.js";
-import { OrderedList as s } from "./OrderedList.js";
-import { Paragraph as h } from "./Paragraph.js";
-import { TableRow as u, TableHeader as b, TableData as k, Table as H } from "./Table.js";
-import { UnorderedList as w } from "./UnorderedList.js";
-import { Video as T } from "./Video.js";
-import g from "../node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js";
+import i from "rehype-raw";
+import p from "remark-gfm";
+import { Anchor as a } from "./Anchor.js";
+import { Blockquote as d } from "./Blockquote.js";
+import { Code as f } from "./Code.js";
+import { Header1 as n } from "./Header1.js";
+import { Header2 as l } from "./Header2.js";
+import { Header3 as c } from "./Header3.js";
+import { Header4 as s } from "./Header4.js";
+import { OrderedList as h } from "./OrderedList.js";
+import { Paragraph as u } from "./Paragraph.js";
+import { TableRow as b, TableHeader as k, TableData as H, Table as w } from "./Table.js";
+import { UnorderedList as T } from "./UnorderedList.js";
+import { Video as g } from "./Video.js";
 const z = ({ content: o, className: e = "", useCustom: m = !0 }) => /* @__PURE__ */ r("div", { className: e, children: /* @__PURE__ */ r(
   t,
   {
-    rehypePlugins: [g],
-    remarkPlugins: [i],
+    rehypePlugins: [i],
+    remarkPlugins: [p],
     components: m ? {
-      h1: f,
-      h2: n,
-      h3: l,
-      h4: c,
-      p: h,
-      a: p,
-      ul: w,
-      ol: s,
-      code: d,
-      blockquote: a,
-      video: T,
-      table: H,
-      td: k,
-      th: b,
-      tr: u
+      h1: n,
+      h2: l,
+      h3: c,
+      h4: s,
+      p: u,
+      a,
+      ul: T,
+      ol: h,
+      code: f,
+      blockquote: d,
+      video: g,
+      table: w,
+      td: H,
+      th: k,
+      tr: b
     } : void 0,
     children: o
   }