@npm_leadtech/legal-contracts-ui 0.62.0 → 0.62.1

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/Preform.js

@@ -1,30 +1,93 @@
-import { jsx as l, jsxs as s, Fragment as a } from "react/jsx-runtime";
-import { TrustedBadge as n } from "./TrustedBadge.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(
+"use client";
+import { jsxs as r, Fragment as a, jsx as l } from "react/jsx-runtime";
+import { useState as g, useRef as w, useEffect as u } from "react";
+import { PreformOption as N } from "./PreformOption.js";
+import { Input as m } from "./Input.js";
+import { TrustedBadge as i } from "./TrustedBadge.js";
+import { Select as C } from "./Select.js";
+import { LinkWrapper as d } from "./LinkWrapper.js";
+const P = ({ trustedBadge: o, cta: h, inputFieldData: e, radioFieldData: n }) => {
+  const [f, v] = g(!1), x = w(null);
+  u(() => {
+    const s = x.current;
+    if (!s) return;
+    const c = new IntersectionObserver(
+      ([p]) => {
+        v(!p.isIntersecting);
+      },
+      { threshold: 0 }
+    );
+    return c.observe(s), () => {
+      c.disconnect();
+    };
+  }, []);
+  const t = (s) => /* @__PURE__ */ r("div", { className: `flex flex-col bg-white px-6 py-4 ${s ? "shadow" : ""}`, children: [
+    /* @__PURE__ */ l(
+      "label",
+      {
+        htmlFor: `${n?.name ?? ""}-${s ? "sticky" : "desktop"}`,
+        className: "text-medium mb-4 font-bold text-neutral-800",
+        children: n?.label
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: `flex items-center gap-4 ${s ? "flex-row" : "flex-col"}`, children: [
+      n?.isVisible && /* @__PURE__ */ l(
+        C,
+        {
+          id: `${n.name}-${s ? "sticky" : "desktop"}`,
+          name: n.name,
+          value: n.radioSelected,
+          options: n.options,
+          containerClassName: "w-full relative",
+          onChange: (c) => {
+            n.onClick(c.target.value);
+          }
+        }
+      ),
+      e?.isVisible && !s && /* @__PURE__ */ l("div", { className: "flex justify-center", children: /* @__PURE__ */ l(
+        m,
+        {
+          id: e.id,
+          label: e.label,
+          name: e.name,
+          placeholder: e.placeholder,
+          value: e.value,
+          onInputChange: e.onChange
+        }
+      ) }, e.name),
+      /* @__PURE__ */ l(d, { variant: "primary-green", className: s ? "w-fit text-nowrap" : "w-full", children: h })
+    ] }),
+    e?.isVisible && s && /* @__PURE__ */ l("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ l(
+      m,
+      {
+        id: `${e.id}-sticky`,
+        label: e.label,
+        name: e.name,
+        placeholder: e.placeholder,
+        value: e.value,
+        onInputChange: e.onChange
+      }
+    ) }, e.name)
+  ] }), b = n?.isVisible && /* @__PURE__ */ r(a, { children: [
+    /* @__PURE__ */ l("h2", { className: "text-medium sm:text-large font-bold", children: n.label }),
+    /* @__PURE__ */ r("div", { className: "flex w-full max-w-272 flex-wrap justify-center gap-2 sm:gap-4", children: [
+      n.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,
+            N,
             {
-              ...m,
-              selected: m.value === r.radioSelected,
-              onClick: r.onClick
+              ...s,
+              selected: s.value === n.radioSelected,
+              onClick: n.onClick
             }
           )
         },
-        m.value
+        s.value
       )),
       e?.isVisible && /* @__PURE__ */ l("div", { className: "mt-4 flex basis-full justify-center md:mt-0", children: /* @__PURE__ */ l(
-        o,
+        m,
         {
           id: e.id,
           label: e.label,
@@ -35,9 +98,20 @@ const b = ({ trustedBadge: c, cta: x, inputFieldData: e, radioFieldData: r }) =>
         }
       ) }, e.name)
     ] })
-  ] }),
-  /* @__PURE__ */ l(t, { variant: "primary-green", children: x })
-] }) });
+  ] });
+  return /* @__PURE__ */ r(a, { 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(i, { ...o }),
+      b,
+      /* @__PURE__ */ l(d, { variant: "primary-green", children: h })
+    ] }) }),
+    /* @__PURE__ */ l("section", { className: "bg-neutral-25 pt-10 text-neutral-800 sm:hidden", children: /* @__PURE__ */ r("div", { className: "relative mx-auto flex max-w-300 flex-col rounded bg-white pt-8 shadow-md", children: [
+      /* @__PURE__ */ l("div", { className: "px-6", children: /* @__PURE__ */ l(i, { ...o }) }),
+      /* @__PURE__ */ l("div", { ref: x, className: f ? "invisible" : void 0, children: t(!1) })
+    ] }) }),
+    f && /* @__PURE__ */ l("div", { className: "fixed bottom-0 left-0 z-50 w-full sm:hidden", children: t(!0) })
+  ] });
+};
 export {
-  b as Preform
+  P as Preform
 };

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,19 +1,28 @@
 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,
+const m = ({
+  label: t,
+  id: a,
+  name: u,
+  required: s = !1,
+  placeholder: d,
+  options: n,
+  containerClassName: c = "",
+  ...i
+}) => /* @__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: "*" })
   ] }),
   /* @__PURE__ */ l(
     "select",
     {
-      id: t,
+      id: a,
       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,
+      ...i,
       children: [
         /* @__PURE__ */ r("option", { value: "", disabled: !0, children: d }),
         n.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
@@ -22,5 +31,5 @@ const o = ({ label: a, id: t, name: u, required: s = !1, placeholder: d, options
   )
 ] });
 export {
-  o as Select
+  m as Select
 };