@npm_leadtech/legal-contracts-ui 0.59.1 → 0.59.2

package/dist/components/ContactBanner.d.ts

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

package/dist/components/ContactBanner.js

@@ -1,26 +1,16 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import "react";
-import { useScroll as i } from "../shared/hooks/useScroll.js";
-import { InfoIcon as c } from "./InfoIcon.js";
-const h = ({ contactText: s, phoneNumber: l, contactHoursText: t, contactHours: a }) => {
-  const n = i(10);
-  return /* @__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 ${n ? "h-0 py-0" : "h-8.75 py-2"}`,
-      children: /* @__PURE__ */ r("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(c, {}) }),
-        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__ */ r("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 })
-        ] })
-      ] })
-    }
-  );
-};
+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 })
+  ] })
+] }) });
 export {
-  h as ContactBanner
+  m as ContactBanner
 };

package/dist/components/ContactFormSection.js

@@ -1,9 +1,9 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Input as a } from "./Input.js";
 import { Select as t } from "./Select.js";
 import { Textarea as i } from "./Textarea.js";
 import { Checkbox as l } from "./Checkbox.js";
 import { CommunicationIcon as n } from "./CommunicationIcon.js";
+import { Input as a } from "./Input.js";
 import { Item as o } from "./Item.js";
 import { Button as s } from "./Button.js";
 const c = [

package/dist/components/Header.js

@@ -1,54 +1,44 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, Fragment as m, jsx as e } from "react/jsx-runtime";
 import "react";
-import { MobileMenu as o } from "./MobileMenu.js";
-import { useScroll as c } from "../shared/hooks/useScroll.js";
-import { NavMenu as s } from "./NavMenu.js";
-import { LanguageSelector as p } from "./LanguageSelector.js";
+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 f } from "./SearchBar.js";
-const j = ({
-  logo: l,
+import { SearchBar as o } from "./SearchBar.js";
+const v = ({
+  logo: a,
   navMenu: d,
   searchBarProps: i,
-  languageSelectorProps: a,
+  languageSelectorProps: l,
   userActions: n,
   mobileMenu: t
-}) => {
-  const m = c(10);
-  return /* @__PURE__ */ r("div", { className: "sticky top-0 z-1000 flex w-full flex-col", children: [
-    /* @__PURE__ */ e(
-      "header",
+}) => /* @__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",
       {
-        className: `transition-colors duration-300 ease-in-out ${m ? "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(s, { 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(f, { ...i }),
-            a && /* @__PURE__ */ e("div", { className: "hidden xl:block", children: /* @__PURE__ */ e(p, { ...a }) }),
-            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(x, {})
-              ]
-            }
-          )
-        ] })
+        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, {})
+        ]
       }
-    ),
-    /* @__PURE__ */ e(o, { ...t, logo: l, userActions: n, searchBarProps: i })
-  ] });
-};
+    )
+  ] }) }),
+  /* @__PURE__ */ e(c, { ...t, logo: a, userActions: n, searchBarProps: i })
+] });
 export {
-  j as Header
+  v as Header
 };

package/dist/components/Input.d.ts

@@ -11,5 +11,6 @@ export declare interface InputProps extends React.InputHTMLAttributes<HTMLInputE
     placeholder?: string;
     required?: boolean;
     tooltip?: string;
+    onInputChange?: (str: string) => void;
 }
 

package/dist/components/Input.js

@@ -1,21 +1,22 @@
-import { jsxs as e, jsx as l } from "react/jsx-runtime";
-const x = ({
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+const m = ({
   label: n,
-  id: t,
+  id: l,
   name: s,
   type: i = "text",
   placeholder: u,
   required: r = !1,
   tooltip: a,
-  ...c
+  onInputChange: c,
+  ...d
 }) => /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: [
   /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ e("label", { htmlFor: t, className: "text-medium font-bold text-neutral-800", children: [
+    /* @__PURE__ */ e("label", { htmlFor: l, className: "text-medium font-bold text-neutral-800", children: [
       n,
       " ",
-      r && /* @__PURE__ */ l("span", { className: "text-red-500", children: "*" })
+      r && /* @__PURE__ */ t("span", { className: "text-red-500", children: "*" })
     ] }),
-    a && /* @__PURE__ */ l(
+    a && /* @__PURE__ */ t(
       "span",
       {
         className: "text-extra-small inline-flex h-5 w-5 items-center justify-center rounded-full border border-neutral-200 text-neutral-400",
@@ -25,19 +26,22 @@ const x = ({
       }
     )
   ] }),
-  /* @__PURE__ */ l(
+  /* @__PURE__ */ t(
     "input",
     {
-      id: t,
+      id: l,
       name: s,
       type: i,
       placeholder: u,
       required: r,
-      className: "bg-neutral-25 text-small focus-visible:outline-primary-500 w-full rounded border border-neutral-200 px-4 py-2 text-neutral-800 placeholder:text-neutral-400 focus-visible:outline-2",
-      ...c
+      className: "bg-neutral-25 text-small focus-visible:outline-primary-500 w-full rounded border border-neutral-400 p-3 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
+      onChange: (o) => {
+        c?.(o.target.value);
+      },
+      ...d
     }
   )
 ] });
 export {
-  x as Input
+  m as Input
 };

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 "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";
+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";
 const z = ({ content: o, className: e = "", useCustom: m = !0 }) => /* @__PURE__ */ r("div", { className: e, children: /* @__PURE__ */ r(
   t,
   {
-    rehypePlugins: [i],
-    remarkPlugins: [p],
+    rehypePlugins: [g],
+    remarkPlugins: [i],
     components: m ? {
-      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
+      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
     } : void 0,
     children: o
   }

package/dist/components/Preform.d.ts

@@ -1,41 +1,41 @@
-import { ComponentPropsWithRef } from 'react';
 import { FC } from 'react';
 import { ReactNode } from 'react';
 
-export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
-    children: ReactNode;
-    size?: ButtonSize;
-    variant?: ResponsiveButtonVariant;
-    iconPosition?: IconPosition;
-}
-
-export type ButtonSize = 'small' | 'default' | 'large';
-
-export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
-
-export type IconPosition = 'left' | 'right' | 'top';
+export declare type InputFieldData = {
+    isVisible: boolean;
+    id: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (str: string) => void;
+};
 
 export declare const Preform: FC<PreformProps>;
 
 export interface PreformOptionProps {
     label: string;
-    selected: boolean;
+    value: string;
+    alternativeUrl: string;
     icon: ReactNode;
+    selected: boolean;
+    onClick?: (str: string) => void;
 }
 
 export declare interface PreformProps {
     trustedBadge: TrustedBadgeProps;
-    title?: string;
-    options: PreformOptionProps[];
-    cta: ButtonProps;
+    cta: ReactNode;
+    radioFieldData?: RadioFieldData;
+    inputFieldData?: InputFieldData;
 }
 
-export type ResponsiveButtonVariant = ButtonVariant | {
-    initial?: ButtonVariant;
-    sm?: ButtonVariant;
-    md?: ButtonVariant;
-    lg?: ButtonVariant;
-    xl?: ButtonVariant;
+export declare type RadioFieldData = {
+    isVisible: boolean;
+    label: string;
+    name: string;
+    options: PreformOptionProps[];
+    radioSelected: string;
+    onClick: (str: string) => void;
 };
 
 export interface TrustedBadgeProps {

package/dist/components/Preform.js

@@ -1,20 +1,42 @@
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { TrustedBadge as s } from "./TrustedBadge.js";
-import { PreformOption as p } from "./PreformOption.js";
-import { Button as c } from "./Button.js";
-const f = ({ trustedBadge: a, title: m, options: r, cta: t }) => /* @__PURE__ */ e("section", { className: "bg-neutral-25 pt-10 text-neutral-800 sm:px-6 lg:px-8 xl:px-30", children: /* @__PURE__ */ x("div", { className: "relative mx-auto flex max-w-300 flex-col gap-6 rounded bg-white px-6 pt-8 pb-6 shadow-md sm:items-center sm:gap-8 lg:px-26 xl:px-10", children: [
-  /* @__PURE__ */ e(s, { ...a }),
-  /* @__PURE__ */ e("h2", { className: "text-medium sm:text-large font-bold", children: m }),
-  /* @__PURE__ */ e("div", { className: "flex w-full max-w-272 flex-wrap justify-center gap-2 sm:gap-4", children: r.map((l) => /* @__PURE__ */ e(
-    "div",
-    {
-      className: "w-[calc(50%-4px)] sm:w-[calc(25%-12px)] lg:w-[calc(20%-13px)] xl:w-[calc(16.66%-14px)]",
-      children: /* @__PURE__ */ e(p, { ...l })
-    },
-    l.label
-  )) }),
-  /* @__PURE__ */ e(c, { ...t })
+import { jsx as l, jsxs as c, Fragment as a } from "react/jsx-runtime";
+import { TrustedBadge as n } from "./TrustedBadge.js";
+import { PreformOption as o } from "./PreformOption.js";
+import { Input as p } from "./Input.js";
+const d = ({ trustedBadge: r, cta: x, inputFieldData: e, radioFieldData: m }) => /* @__PURE__ */ l("section", { className: "bg-neutral-25 pt-10 text-neutral-800 sm:px-6 lg:px-8 xl:px-30", children: /* @__PURE__ */ c("div", { className: "relative mx-auto flex max-w-300 flex-col gap-6 rounded bg-white px-6 pt-8 pb-6 shadow-md sm:items-center sm:gap-8 lg:px-26 xl:px-10", children: [
+  /* @__PURE__ */ l(n, { ...r }),
+  m?.isVisible && /* @__PURE__ */ c(a, { children: [
+    /* @__PURE__ */ l("h2", { className: "text-medium sm:text-large font-bold", children: m.label }),
+    /* @__PURE__ */ c("div", { className: "flex w-full max-w-272 flex-wrap justify-center gap-2 sm:gap-4", children: [
+      m.options.map((s) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "w-[calc(50%-4px)] sm:w-[calc(25%-12px)] lg:w-[calc(20%-13px)] xl:w-[calc(16.66%-14px)]",
+          children: /* @__PURE__ */ l(
+            o,
+            {
+              ...s,
+              selected: s.value === m.radioSelected,
+              onClick: m.onClick
+            }
+          )
+        },
+        s.value
+      )),
+      e?.isVisible && /* @__PURE__ */ l("div", { className: "mt-4 flex basis-full justify-center md:mt-0", children: /* @__PURE__ */ l(
+        p,
+        {
+          id: e.id,
+          label: e.label,
+          name: e.name,
+          placeholder: e.placeholder,
+          value: e.value,
+          onInputChange: e.onChange
+        }
+      ) }, e.name)
+    ] })
+  ] }),
+  x
 ] }) });
 export {
-  f as Preform
+  d as Preform
 };

package/dist/components/PreformOption.d.ts

@@ -5,7 +5,10 @@ export declare const PreformOption: FC<PreformOptionProps>;
 
 export declare interface PreformOptionProps {
     label: string;
-    selected: boolean;
+    value: string;
+    alternativeUrl: string;
     icon: ReactNode;
+    selected: boolean;
+    onClick?: (str: string) => void;
 }
 

package/dist/components/PreformOption.js

@@ -1,21 +1,24 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import "react";
-const i = ({ label: o, selected: r, icon: l }) => /* @__PURE__ */ n(
+const m = ({ value: o, label: l, selected: r, icon: n, onClick: t }) => /* @__PURE__ */ i(
   "button",
   {
-    className: `group flex w-full cursor-pointer items-center gap-2 rounded border p-2 hover:bg-neutral-50 sm:flex-col sm:p-4 ${r ? "border-primary-900 border-2" : "border-neutral-200"}`,
+    className: `group flex w-full cursor-pointer items-center gap-2 rounded border-2 p-2 hover:bg-neutral-50 sm:flex-col sm:p-4 ${r ? "border-primary-900" : "border-neutral-200"}`,
+    onClick: () => {
+      t?.(o);
+    },
     children: [
-      /* @__PURE__ */ e("div", { className: "size-6 sm:size-12", children: l }),
+      /* @__PURE__ */ e("div", { className: "size-6 sm:size-12", children: n }),
       /* @__PURE__ */ e(
         "span",
         {
           className: `text-small inline-grid place-content-center text-neutral-800 group-hover:font-bold lg:h-9 lg:w-34 lg:align-middle ${r ? "font-bold" : "font-normal"}`,
-          children: o
+          children: l
         }
       )
     ]
   }
 );
 export {
-  i as PreformOption
+  m as PreformOption
 };

package/dist/components/ProductTemplate.d.ts

@@ -84,6 +84,16 @@ export interface ImageWithPreviewProps {
     large: ReactNode;
 }
 
+export type InputFieldData = {
+    isVisible: boolean;
+    id: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (str: string) => void;
+};
+
 export interface JumbotronProps {
     title: string;
     description: string;
@@ -97,15 +107,18 @@ export interface LinkedProductProps {
 
 export interface PreformOptionProps {
     label: string;
-    selected: boolean;
+    value: string;
+    alternativeUrl: string;
     icon: ReactNode;
+    selected: boolean;
+    onClick?: (str: string) => void;
 }
 
 export interface PreformProps {
     trustedBadge: TrustedBadgeProps;
-    title?: string;
-    options: PreformOptionProps[];
-    cta: ButtonProps;
+    cta: ReactNode;
+    radioFieldData?: RadioFieldData;
+    inputFieldData?: InputFieldData;
 }
 
 export interface PreviewDownloadProps {
@@ -148,6 +161,15 @@ export declare interface ProductTemplateProps {
     tryNowSection: TryNowSectionProps;
 }
 
+export type RadioFieldData = {
+    isVisible: boolean;
+    label: string;
+    name: string;
+    options: PreformOptionProps[];
+    radioSelected: string;
+    onClick: (str: string) => void;
+};
+
 export type ResponsiveButtonVariant = ButtonVariant | {
     initial?: ButtonVariant;
     sm?: ButtonVariant;