@npm_leadtech/legal-contracts-ui 0.63.0 → 0.63.2

package/dist/components/ContactFormSection.js

@@ -1,9 +1,9 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-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 { Textarea as t } from "./Textarea.js";
+import { Checkbox as i } from "./Checkbox.js";
+import { CommunicationIcon as l } from "./CommunicationIcon.js";
 import { Input as a } from "./Input.js";
+import { Select as n } from "./Select.js";
 import { Item as o } from "./Item.js";
 import { Button as s } from "./Button.js";
 const c = [
@@ -31,7 +31,7 @@ const c = [
       }
     ),
     /* @__PURE__ */ e(
-      t,
+      n,
       {
         label: "Subject",
         id: "subject",
@@ -41,9 +41,9 @@ const c = [
         required: !0
       }
     ),
-    /* @__PURE__ */ e(i, { label: "Your Message", id: "message", name: "message", placeholder: "Write your message here", required: !0 }),
+    /* @__PURE__ */ e(t, { label: "Your Message", id: "message", name: "message", placeholder: "Write your message here", required: !0 }),
     /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: "* Required fields" }),
-    /* @__PURE__ */ e(l, { id: "privacy", name: "privacy", required: !0, children: /* @__PURE__ */ r("span", { children: [
+    /* @__PURE__ */ e(i, { id: "privacy", name: "privacy", required: !0, children: /* @__PURE__ */ r("span", { children: [
       "I have read and accept the",
       " ",
       /* @__PURE__ */ e(
@@ -61,7 +61,7 @@ const c = [
       o,
       {
         id: "ID",
-        image: /* @__PURE__ */ e(n, { className: "size-5", "aria-hidden": "true" }),
+        image: /* @__PURE__ */ e(l, { className: "size-5", "aria-hidden": "true" }),
         description: "This information is required for the security verification process.",
         className: "text-small flex items-start gap-3 rounded bg-neutral-50 p-4 text-neutral-600"
       }

package/dist/components/Input.d.ts

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

package/dist/components/Input.js

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

package/dist/components/Preform.js

@@ -1,43 +1,57 @@
-import { jsx as l, jsxs as s, Fragment as a } from "react/jsx-runtime";
-import { TrustedBadge as n } from "./TrustedBadge.js";
+"use client";
+import { jsxs as r, Fragment as n, jsx as l } from "react/jsx-runtime";
+import "react";
+import { PreformMobile as x } from "./PreformMobile.js";
 import { PreformOption as p } from "./PreformOption.js";
-import { Input as o } from "./Input.js";
-import { LinkWrapper as t } from "./LinkWrapper.js";
-const b = ({ trustedBadge: c, cta: x, inputFieldData: e, radioFieldData: r }) => /* @__PURE__ */ l("section", { className: "bg-neutral-25 pt-10 text-neutral-800 sm:px-6 lg:px-8 xl:px-30", children: /* @__PURE__ */ s("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, { ...c }),
-  r?.isVisible && /* @__PURE__ */ s(a, { children: [
-    /* @__PURE__ */ l("h2", { className: "text-medium sm:text-large font-bold", children: r.label }),
-    /* @__PURE__ */ s("div", { className: "flex w-full max-w-272 flex-wrap justify-center gap-2 sm:gap-4", children: [
-      r.options.map((m) => /* @__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(
-            p,
-            {
-              ...m,
-              selected: m.value === r.radioSelected,
-              onClick: r.onClick
-            }
-          )
-        },
-        m.value
-      )),
-      e?.isVisible && /* @__PURE__ */ l("div", { className: "mt-4 flex basis-full justify-center md:mt-0", children: /* @__PURE__ */ l(
-        o,
-        {
-          id: e.id,
-          label: e.label,
-          name: e.name,
-          placeholder: e.placeholder,
-          value: e.value,
-          onInputChange: e.onChange
-        }
-      ) }, e.name)
-    ] })
-  ] }),
-  /* @__PURE__ */ l(t, { variant: "primary-green", children: x })
-] }) });
+import { TrustedBadge as a } from "./TrustedBadge.js";
+import { Input as f } from "./Input.js";
+import { LinkWrapper as i } from "./LinkWrapper.js";
+const u = ({ trustedBadge: c, cta: o, inputFieldData: e, radioFieldData: m }) => /* @__PURE__ */ r(n, { children: [
+  /* @__PURE__ */ l("section", { className: "bg-neutral-25 hidden pt-10 text-neutral-800 sm:block sm:px-6 lg:px-8 xl:px-30", children: /* @__PURE__ */ r("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(a, { ...c }),
+    m?.isVisible && /* @__PURE__ */ r(n, { children: [
+      /* @__PURE__ */ l("h2", { className: "text-medium sm:text-large font-bold", children: m.label }),
+      /* @__PURE__ */ r("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(
+              p,
+              {
+                ...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(
+          f,
+          {
+            id: e.id,
+            label: e.label,
+            name: e.name,
+            placeholder: e.placeholder,
+            value: e.value,
+            onInputChange: e.onChange
+          }
+        ) }, e.name)
+      ] })
+    ] }),
+    /* @__PURE__ */ l(i, { variant: "primary-green", children: o })
+  ] }) }),
+  /* @__PURE__ */ l(
+    x,
+    {
+      cta: o,
+      trustedBadge: c,
+      inputFieldData: e,
+      radioFieldData: m
+    }
+  )
+] });
 export {
-  b as Preform
+  u as Preform
 };

package/dist/components/PreformMobile.d.ts

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+export type InputFieldData = {
+    isVisible: boolean;
+    id: string;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (str: string) => void;
+};
+
+export declare const PreformMobile: FC<PreformMobileProps>;
+
+export declare interface PreformMobileProps {
+    trustedBadge: TrustedBadgeProps;
+    radioFieldData?: RadioFieldData;
+    inputFieldData?: InputFieldData;
+    cta: ReactNode;
+}
+
+export interface PreformOptionProps {
+    label: string;
+    value: string;
+    alternativeUrl: string | null;
+    icon: ReactNode;
+    selected: boolean;
+    onClick?: (str: string) => void;
+}
+
+export type RadioFieldData = {
+    isVisible: boolean;
+    label: string;
+    name: string;
+    options: PreformOptionProps[];
+    radioSelected: string;
+    onClick: (str: string) => void;
+};
+
+export interface TrustedBadgeProps {
+    children: ReactNode;
+}
+

package/dist/components/PreformMobile.js

@@ -0,0 +1,88 @@
+import { jsxs as o, Fragment as d, jsx as l } from "react/jsx-runtime";
+import { useState as x, useRef as v, useEffect as u } from "react";
+import { TrustedBadge as g } from "./TrustedBadge.js";
+import { Select as w } from "./Select.js";
+import { Input as f } from "./Input.js";
+import { LinkWrapper as N } from "./LinkWrapper.js";
+const y = ({ radioFieldData: r, inputFieldData: e, cta: h, trustedBadge: a }) => {
+  const [m, b] = x(!1), c = v(null);
+  u(() => {
+    const s = c.current;
+    if (!s) return;
+    const n = new IntersectionObserver(
+      ([i]) => {
+        b(!i.isIntersecting);
+      },
+      { threshold: 0 }
+    );
+    return n.observe(s), () => {
+      n.disconnect();
+    };
+  }, []);
+  const t = (s) => /* @__PURE__ */ o(
+    "div",
+    {
+      className: `flex flex-col bg-white px-6 pb-4 ${s ? "border-t border-neutral-100 pt-4 shadow-md" : ""}`,
+      children: [
+        /* @__PURE__ */ l(
+          "label",
+          {
+            htmlFor: `${r?.name ?? ""}-${s ? "sticky" : "mobile"}`,
+            className: "text-small mb-4 font-bold text-neutral-800",
+            children: r?.label
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: `flex gap-4 ${s ? "flex-row items-center" : "flex-col"}`, children: [
+          r?.isVisible && /* @__PURE__ */ l(
+            w,
+            {
+              id: `${r.name}-${s ? "sticky" : "mobile"}`,
+              name: r.name,
+              value: r.radioSelected,
+              options: r.options,
+              containerClassName: "w-full",
+              onChange: (n) => {
+                r.onClick(n.target.value);
+              }
+            }
+          ),
+          e?.isVisible && !s && /* @__PURE__ */ l("div", { className: "flex justify-center", children: /* @__PURE__ */ l(
+            f,
+            {
+              containerClassName: "w-full text-small",
+              id: `${e.id}-mobile`,
+              label: e.label,
+              name: `${e.name}-mobile`,
+              placeholder: e.placeholder,
+              value: e.value,
+              onInputChange: e.onChange
+            }
+          ) }, e.name),
+          /* @__PURE__ */ l(N, { variant: "primary-green", className: `text-small ${s ? "w-fit text-nowrap" : "w-full"}`, children: h })
+        ] }),
+        e?.isVisible && s && /* @__PURE__ */ l("div", { className: "mt-4 flex w-full justify-center", children: /* @__PURE__ */ l(
+          f,
+          {
+            containerClassName: "w-full text-small",
+            id: `${e.id}-mobile-sticky`,
+            label: e.label,
+            name: `${e.name}-mobile-sticky`,
+            placeholder: e.placeholder,
+            value: e.value,
+            onInputChange: e.onChange
+          }
+        ) }, e.name)
+      ]
+    }
+  );
+  return /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ l("section", { className: "bg-neutral-25 pt-10 text-neutral-800 sm:hidden", children: /* @__PURE__ */ o("div", { ref: c, className: "relative flex flex-col rounded bg-white pt-8 shadow", children: [
+      /* @__PURE__ */ l("div", { className: "px-6", children: /* @__PURE__ */ l(g, { ...a }) }),
+      /* @__PURE__ */ l("div", { className: m ? "hidden" : "block", children: t(!1) })
+    ] }) }),
+    m && /* @__PURE__ */ l("div", { className: "fixed bottom-0 left-0 z-50 w-full sm:hidden", children: t(!0) })
+  ] });
+};
+export {
+  y as PreformMobile
+};

package/dist/components/Select.d.ts

@@ -3,7 +3,7 @@ import { FC } from 'react';
 export declare const Select: FC<SelectProps>;
 
 export declare interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    label: string;
+    label?: string;
     id: string;
     name: string;
     required?: boolean;
@@ -12,5 +12,6 @@ export declare interface SelectProps extends React.SelectHTMLAttributes<HTMLSele
         label: string;
         value: string;
     }[];
+    containerClassName?: string;
 }
 

package/dist/components/Select.js

@@ -1,26 +1,38 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-const o = ({ label: a, id: t, name: u, required: s = !1, placeholder: d, options: n, ...c }) => /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
-  /* @__PURE__ */ l("label", { htmlFor: t, className: "text-medium font-bold text-neutral-800", children: [
-    a,
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { ChevronDownIcon as d } from "./ChevronDownIcon.js";
+const v = ({
+  label: t,
+  id: a,
+  name: s,
+  required: i = !1,
+  placeholder: n,
+  options: o,
+  containerClassName: c = "",
+  ...u
+}) => /* @__PURE__ */ l("div", { className: `flex flex-col gap-2 ${c}`, children: [
+  t && /* @__PURE__ */ l("label", { htmlFor: a, className: "text-medium font-bold text-neutral-800", children: [
+    t,
     " ",
-    s && /* @__PURE__ */ r("span", { className: "text-red-500", children: "*" })
+    i && /* @__PURE__ */ e("span", { className: "text-red-500", children: "*" })
   ] }),
-  /* @__PURE__ */ l(
-    "select",
-    {
-      id: t,
-      name: u,
-      required: !0,
-      defaultValue: "",
-      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,
-      children: [
-        /* @__PURE__ */ r("option", { value: "", disabled: !0, children: d }),
-        n.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
-      ]
-    }
-  )
+  /* @__PURE__ */ l("div", { className: "relative", children: [
+    /* @__PURE__ */ l(
+      "select",
+      {
+        id: a,
+        name: s,
+        required: !0,
+        className: "bg-neutral-25 text-small focus-visible:outline-primary-500 w-full appearance-none rounded border border-neutral-400 py-2 pr-10 pl-4 text-neutral-800 placeholder:text-neutral-400 focus-visible:outline-2",
+        ...u,
+        children: [
+          n && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: n }),
+          o.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ e(d, {}) })
+  ] })
 ] });
 export {
-  o as Select
+  v as Select
 };