@npm_leadtech/legal-contracts-ui 0.100.0 → 0.101.1

package/dist/components/Checkbox.d.ts

@@ -8,5 +8,6 @@ export declare interface CheckboxProps extends React.InputHTMLAttributes<HTMLInp
     name: string;
     required?: boolean;
     children: ReactNode;
+    error?: boolean;
 }
 

package/dist/components/Checkbox.js

@@ -1,18 +1,22 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-const n = ({ id: t, name: r, required: s = !1, children: i, ...l }) => /* @__PURE__ */ a("label", { className: "text-medium flex items-center gap-3 text-neutral-800", children: [
+import c from "clsx";
+const u = ({ id: r, name: t, required: o = !1, children: s, error: l = !1, ...i }) => /* @__PURE__ */ a("label", { className: "text-medium flex items-center gap-3 text-neutral-800", children: [
   /* @__PURE__ */ e(
     "input",
     {
-      id: t,
+      id: r,
       type: "checkbox",
-      name: r,
-      required: s,
-      className: "text-primary-700 focus-visible:outline-primary-500 h-5 w-5 rounded border-neutral-400 focus-visible:outline-2",
-      ...l
+      name: t,
+      required: o,
+      className: c(
+        "text-primary-700 focus-visible:outline-primary-500 h-5 w-5 rounded border focus-visible:outline-2",
+        l ? "border-error-500" : "border-neutral-400"
+      ),
+      ...i
     }
   ),
-  /* @__PURE__ */ e("span", { children: i })
+  /* @__PURE__ */ e("span", { children: s })
 ] });
 export {
-  n as Checkbox
+  u as Checkbox
 };

package/dist/components/ContactFormSection.d.ts

@@ -1,4 +1,86 @@
+import { ChangeEventHandler } from 'react';
+import { ComponentProps } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { FC } from 'react';
+import { ReactNode } from 'react';
 
-export declare const ContactFormSection: FC;
+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 interface ContactFormCheckboxFieldProps extends Omit<ContactFormFieldProps, 'placeholder' | 'tooltip'> {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+}
+
+export interface ContactFormFeedbackProps {
+    message: string;
+    title?: string;
+    cta?: ReactNode;
+}
+
+export declare interface ContactFormFieldProps {
+    label: string;
+    id: string;
+    name: string;
+    placeholder?: string;
+    required?: boolean;
+    tooltip?: string;
+    errorMessage?: string;
+}
+
+export declare const ContactFormSection: FC<ContactFormSectionProps>;
+
+export declare interface ContactFormSectionProps {
+    title: ReactNode;
+    subjectOptions: {
+        label: string;
+        value: string;
+    }[];
+    fullNameField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    emailField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    referenceNumberField: ContactFormTextFieldProps;
+    subjectField: ContactFormSelectFieldProps;
+    messageField: ContactFormTextareaFieldProps;
+    requiredFieldsText: string;
+    privacyField: ContactFormCheckboxFieldProps;
+    securityHint: string;
+    status?: 'default' | 'loading' | 'success' | 'error';
+    successFeedback?: ContactFormFeedbackProps;
+    errorFeedback?: ContactFormFeedbackProps;
+    onSubmit?: ComponentProps<'form'>['onSubmit'];
+    button: ButtonProps;
+}
+
+export interface ContactFormSelectFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
+    value: string;
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+}
+
+export interface ContactFormTextareaFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
+    value: string;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+}
+
+export interface ContactFormTextFieldProps extends ContactFormFieldProps {
+    value: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+}
+
+export type IconPosition = 'left' | 'right' | 'top';
+
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
 

package/dist/components/ContactFormSection.js

@@ -1,82 +1,179 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-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 = [
-  { label: "Billing and subscriptions", value: "billing-and-subscriptions" },
-  { label: "Technical support", value: "technical-support" },
-  { label: "Document customization", value: "document-customization" },
-  { label: "Account and security", value: "account-and-security" }
-], y = () => /* @__PURE__ */ r("section", { "aria-labelledby": "contact-form-heading", className: "flex-1 rounded-xl bg-white p-6 shadow-md lg:p-8", children: [
+import { Textarea as N } from "./Textarea.js";
+import { Checkbox as f } from "./Checkbox.js";
+import { Input as p } from "./Input.js";
+import { Select as M } from "./Select.js";
+import { Markdown as w } from "./Markdown.js";
+import { InfoIcon as y } from "./InfoIcon.js";
+import { Button as b } from "./Button.js";
+const _ = ({
+  title: m,
+  subjectOptions: x,
+  fullNameField: n,
+  emailField: o,
+  referenceNumberField: a,
+  subjectField: t,
+  messageField: s,
+  privacyField: l,
+  requiredFieldsText: g,
+  securityHint: u,
+  status: c = "default",
+  successFeedback: d,
+  errorFeedback: i,
+  onSubmit: v,
+  button: h
+}) => c === "success" ? /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
   /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ e("p", { id: "contact-form-heading", className: "text-big font-bold text-neutral-600", children: "Send Us a Message" }),
+    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
     /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
   ] }),
-  /* @__PURE__ */ r("form", { className: "mt-6 space-y-6", noValidate: !0, children: [
-    /* @__PURE__ */ e(a, { label: "Full Name", id: "full-name", name: "full-name", type: "text", placeholder: "e.g. John Doe", required: !0 }),
-    /* @__PURE__ */ e(a, { label: "Email", id: "email", name: "email", type: "email", placeholder: "example@email.com", required: !0 }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        label: "Reference number",
-        id: "reference-number",
-        name: "reference-number",
-        type: "text",
-        placeholder: "e.g. 12345678",
-        tooltip: "Where to find your reference number"
-      }
-    ),
-    /* @__PURE__ */ e(
-      n,
-      {
-        label: "Subject",
-        id: "subject",
-        name: "subject",
-        placeholder: "Select a subject",
-        options: c,
-        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(i, { id: "privacy", name: "privacy", required: !0, children: /* @__PURE__ */ r("span", { children: [
-      "I have read and accept the",
-      " ",
+  /* @__PURE__ */ r(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "mt-6 rounded border border-green-300 bg-green-50 px-4 py-3 text-green-900",
+      children: [
+        d?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: d.title }),
+        /* @__PURE__ */ e("p", { children: d?.message }),
+        d?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: d.cta })
+      ]
+    }
+  )
+] }) : c === "error" ? /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
+  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
+    /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+  ] }),
+  /* @__PURE__ */ r(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      className: "mt-6 rounded border border-red-300 bg-red-50 px-4 py-3 text-red-800",
+      children: [
+        i?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: i.title }),
+        /* @__PURE__ */ e("p", { children: i?.message }),
+        i?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: i.cta })
+      ]
+    }
+  )
+] }) : c === "loading" ? /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
+  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
+    /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+  ] }),
+  /* @__PURE__ */ e(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "mt-6 flex items-center justify-center rounded border border-neutral-200 bg-neutral-50 px-4 py-6 text-neutral-700",
+      children: /* @__PURE__ */ e("div", { className: "border-primary-500 h-[25px] w-[25px] animate-spin rounded-full border-3 border-t-transparent" })
+    }
+  )
+] }) : /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
+  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
+    /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+  ] }),
+  /* @__PURE__ */ r("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, onSubmit: v, children: [
+    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e(p, { ...n, type: "text", error: !!n.errorMessage }),
+      n.errorMessage && /* @__PURE__ */ e("p", { id: `${n.id}-error-message`, className: "text-small text-red-700", children: n.errorMessage })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e(p, { ...o, type: "email", error: !!o.errorMessage }),
+      o.errorMessage && /* @__PURE__ */ e("p", { id: `${o.id}-error-message`, className: "text-small text-red-700", children: o.errorMessage })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
       /* @__PURE__ */ e(
-        "a",
+        p,
         {
-          href: "https://www.lawdistrict.com/privacy-and-cookies-policy/",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "text-primary-700 underline-offset-2 hover:underline",
-          children: "Privacy and Cookies Policy."
+          label: a.label,
+          id: a.id,
+          name: a.name,
+          type: "text",
+          placeholder: a.placeholder,
+          tooltip: a.tooltip,
+          required: a.required,
+          value: a.value,
+          onChange: a.onChange,
+          error: !!a.errorMessage
         }
-      )
-    ] }) }),
-    /* @__PURE__ */ e(
-      o,
+      ),
+      a.errorMessage && /* @__PURE__ */ e("p", { id: `${a.id}-error-message`, className: "text-small text-red-700", children: a.errorMessage })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e(
+        M,
+        {
+          label: t.label,
+          id: t.id,
+          name: t.name,
+          placeholder: t.placeholder,
+          options: x,
+          required: t.required,
+          value: t.value,
+          onChange: t.onChange,
+          error: !!t.errorMessage
+        }
+      ),
+      t.errorMessage && /* @__PURE__ */ e("p", { id: `${t.id}-error-message`, className: "text-small text-red-700", children: t.errorMessage })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e(
+        N,
+        {
+          label: s.label,
+          id: s.id,
+          name: s.name,
+          placeholder: s.placeholder,
+          required: s.required,
+          value: s.value,
+          onChange: s.onChange,
+          error: !!s.errorMessage
+        }
+      ),
+      s.errorMessage && /* @__PURE__ */ e("p", { id: `${s.id}-error-message`, className: "text-small text-red-700", children: s.errorMessage })
+    ] }),
+    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-600", children: g }),
+    /* @__PURE__ */ e("div", { className: "", children: /* @__PURE__ */ e(
+      f,
+      {
+        id: l.id,
+        name: l.name,
+        required: l.required,
+        checked: l.checked,
+        onChange: l.onChange,
+        error: !!l.errorMessage,
+        children: /* @__PURE__ */ e(w, { className: "text-medium [&_p:last-child]:mb-0", content: l.label })
+      }
+    ) }),
+    /* @__PURE__ */ r(
+      "div",
       {
-        id: "ID",
-        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"
+        id: "security-hint",
+        className: "text-small flex items-start gap-2 rounded bg-neutral-50 p-4 text-neutral-600",
+        children: [
+          /* @__PURE__ */ e(y, { width: 24, height: 24, "aria-hidden": "true" }),
+          /* @__PURE__ */ e("p", { children: u })
+        ]
       }
     ),
     /* @__PURE__ */ e(
-      s,
+      b,
       {
-        type: "submit",
-        size: "large",
-        className: "bg-primary-500 hover:bg-primary-400 focus-visible:outline-primary-500 w-full justify-center text-white",
-        children: /* @__PURE__ */ e("span", { className: "text-medium font-bold text-white", children: "Send Message" })
+        ...h,
+        variant: "primary-green",
+        className: "w-fit self-center",
+        type: h.type ?? "submit",
+        disabled: h.disabled,
+        children: h.children
       }
     )
   ] })
 ] });
 export {
-  y as ContactFormSection
+  _ as ContactFormSection
 };

package/dist/components/ContactMethodCard.d.ts

@@ -1,10 +1,11 @@
 import { FC } from 'react';
+import { ReactNode } from 'react';
 
 export declare interface ContactMethod {
-    icon: React.ReactNode;
-    label: string;
+    id: string;
+    label?: ReactNode;
     helper?: string;
-    href?: string;
+    variant: 'phone' | 'email' | 'location';
 }
 
 export declare const ContactMethodCard: FC<ContactMethod>;

package/dist/components/ContactMethodCard.js

@@ -1,11 +1,36 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-const i = ({ icon: n, label: t, helper: r, href: d }) => /* @__PURE__ */ a("article", { className: "bg-neutral-25 flex items-center gap-4 rounded-lg border border-neutral-200 p-4", children: [
-  /* @__PURE__ */ e("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-white", "aria-hidden": "true", children: n }),
-  /* @__PURE__ */ a("div", { className: "flex-1", children: [
-    d ? /* @__PURE__ */ e("a", { href: d, className: "text-medium text-primary-800 font-bold underline-offset-4 hover:underline", children: t }) : /* @__PURE__ */ e("p", { className: "text-medium text-primary-800 font-bold", children: t }),
-    r && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: r })
+import { jsxs as i, Fragment as r, jsx as a } from "react/jsx-runtime";
+import { PhoneTalkIcon as n } from "./PhoneTalkIcon.js";
+import { MailFillIcon as m } from "./MailFillIcon.js";
+import { LocationIcon as c } from "./LocationIcon.js";
+import { LinkWrapper as t } from "./LinkWrapper.js";
+const y = ({ label: e, helper: l, variant: s }) => /* @__PURE__ */ i("article", { className: "bg-neutral-25 flex flex-wrap gap-2 rounded-sm p-4 md:flex-col", children: [
+  s === "phone" && /* @__PURE__ */ i(r, { children: [
+    /* @__PURE__ */ i(t, { variant: "primary-green", className: "w-full md:hidden", children: [
+      /* @__PURE__ */ a(n, { fill: "white" }),
+      " ",
+      e
+    ] }),
+    /* @__PURE__ */ i("div", { className: "hidden gap-2 md:flex", children: [
+      /* @__PURE__ */ a("span", { className: "shrink-0", children: /* @__PURE__ */ a(n, { fill: "var(--primary-800)" }) }),
+      /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ a(t, { className: "justify-start! p-0! no-underline!", variant: "tertiary-link", children: /* @__PURE__ */ a("span", { className: "text-medium text-primary-800 font-bold", children: e }) }),
+        l && /* @__PURE__ */ a("p", { className: "text-small mx-auto text-neutral-600 md:mx-0", children: l })
+      ] })
+    ] }),
+    l && /* @__PURE__ */ a("p", { className: "text-small mx-auto text-neutral-600 md:mx-0 md:hidden", children: l })
+  ] }),
+  s === "email" && /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ a("span", { className: "shrink-0", children: /* @__PURE__ */ a(m, { fill: "var(--primary-800)" }) }),
+    /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ a(t, { className: "justify-start! p-0!", variant: "tertiary-link", children: /* @__PURE__ */ a("span", { className: "text-medium text-primary-800 font-bold", children: e }) }),
+      l && /* @__PURE__ */ a("p", { className: "text-small text-neutral-600", children: l })
+    ] })
+  ] }),
+  s === "location" && /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ a("span", { className: "shrink-0", children: /* @__PURE__ */ a(c, { fill: "var(--primary-800)" }) }),
+    l && /* @__PURE__ */ a("p", { className: "text-small text-neutral-600", children: l })
   ] })
 ] });
 export {
-  i as ContactMethodCard
+  y as ContactMethodCard
 };

package/dist/components/ContactMethodsSection.d.ts

@@ -2,16 +2,15 @@ import { FC } from 'react';
 import { ReactNode } from 'react';
 
 export interface ContactMethod {
-    icon: React.ReactNode;
-    label: string;
+    id: string;
+    label?: ReactNode;
     helper?: string;
-    href?: string;
+    variant: 'phone' | 'email' | 'location';
 }
 
 export declare const ContactMethodsSection: FC<ContactMethodsSectionProps>;
 
 export declare interface ContactMethodsSectionProps {
     items: ContactMethod[];
-    title?: ReactNode;
 }
 

package/dist/components/ContactMethodsSection.js

@@ -1,7 +1,6 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Card as r } from "./Card.js";
-import { ContactMethodCard as c } from "./ContactMethodCard.js";
-const n = ({ items: t, title: a }) => /* @__PURE__ */ o("section", { "aria-labelledby": "contact-methods-heading", children: /* @__PURE__ */ o(r, { title: a, children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4", children: t.map((e) => /* @__PURE__ */ o(c, { ...e }, e.label)) }) }) });
+import { jsx as t } from "react/jsx-runtime";
+import { ContactMethodCard as s } from "./ContactMethodCard.js";
+const r = ({ items: e }) => /* @__PURE__ */ t("section", { className: "flex flex-col gap-4 rounded-sm bg-white p-6 shadow-sm", children: e.map((o) => /* @__PURE__ */ t(s, { ...o }, o.id)) });
 export {
-  n as ContactMethodsSection
+  r as ContactMethodsSection
 };

package/dist/components/ContactUsTemplate.d.ts

@@ -1,16 +1,86 @@
+import { ChangeEventHandler } from 'react';
+import { ComponentProps } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { FC } from 'react';
 import { ReactNode } from 'react';
 
-export interface ContactMethod {
-    icon: React.ReactNode;
+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 interface ContactFormCheckboxFieldProps extends Omit<ContactFormFieldProps, 'placeholder' | 'tooltip'> {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+}
+
+export interface ContactFormFeedbackProps {
+    message: string;
+    title?: string;
+    cta?: ReactNode;
+}
+
+export interface ContactFormFieldProps {
     label: string;
+    id: string;
+    name: string;
+    placeholder?: string;
+    required?: boolean;
+    tooltip?: string;
+    errorMessage?: string;
+}
+
+export interface ContactFormSectionProps {
+    title: ReactNode;
+    subjectOptions: {
+        label: string;
+        value: string;
+    }[];
+    fullNameField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    emailField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    referenceNumberField: ContactFormTextFieldProps;
+    subjectField: ContactFormSelectFieldProps;
+    messageField: ContactFormTextareaFieldProps;
+    requiredFieldsText: string;
+    privacyField: ContactFormCheckboxFieldProps;
+    securityHint: string;
+    status?: 'default' | 'loading' | 'success' | 'error';
+    successFeedback?: ContactFormFeedbackProps;
+    errorFeedback?: ContactFormFeedbackProps;
+    onSubmit?: ComponentProps<'form'>['onSubmit'];
+    button: ButtonProps;
+}
+
+export interface ContactFormSelectFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
+    value: string;
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+}
+
+export interface ContactFormTextareaFieldProps extends Omit<ContactFormFieldProps, 'tooltip'> {
+    value: string;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+}
+
+export interface ContactFormTextFieldProps extends ContactFormFieldProps {
+    value: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+}
+
+export interface ContactMethod {
+    id: string;
+    label?: ReactNode;
     helper?: string;
-    href?: string;
+    variant: 'phone' | 'email' | 'location';
 }
 
 export interface ContactMethodsSectionProps {
     items: ContactMethod[];
-    title?: ReactNode;
 }
 
 export declare const ContactUsTemplate: FC<ContactUsTemplateProps>;
@@ -18,13 +88,28 @@ export declare const ContactUsTemplate: FC<ContactUsTemplateProps>;
 export declare interface ContactUsTemplateProps {
     jumbotron: Jumbotron2Props;
     contactMethods: ContactMethodsSectionProps;
-    subjectOptions?: string[];
+    contactForm: ContactFormSectionProps;
+    faqSection: {
+        faqTitle: string;
+        faqText: string;
+        faqCta: ReactNode;
+    };
 }
 
+export type IconPosition = 'left' | 'right' | 'top';
+
 export interface Jumbotron2Props {
     title: string;
     subtitle?: string;
     className?: string;
     children?: React.ReactNode;
 }
+
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
 

package/dist/components/ContactUsTemplate.js

@@ -1,14 +1,26 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { ContactFormSection as a } from "./ContactFormSection.js";
-import { Jumbotron2 as t } from "./Jumbotron2.js";
-import { ContactMethodsSection as m } from "./ContactMethodsSection.js";
-const n = ({ jumbotron: o, contactMethods: r }) => /* @__PURE__ */ e("main", { className: "bg-primary-50 flex-1 px-4 py-12 lg:px-0", children: /* @__PURE__ */ l("div", { className: "relative mx-auto flex w-full max-w-6xl flex-col gap-12", children: [
-  /* @__PURE__ */ e(t, { ...o }),
-  /* @__PURE__ */ l("div", { className: "relative flex flex-col gap-10 lg:flex-row", children: [
-    /* @__PURE__ */ e("div", { className: "flex-1 space-y-8", children: /* @__PURE__ */ e(m, { ...r }) }),
-    /* @__PURE__ */ e(a, {})
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { ContactFormSection as i } from "./ContactFormSection.js";
+import { Jumbotron2 as o } from "./Jumbotron2.js";
+import { ContactMethodsSection as s } from "./ContactMethodsSection.js";
+import { Markdown as c } from "./Markdown.js";
+import { LinkWrapper as d } from "./LinkWrapper.js";
+const N = ({
+  jumbotron: r,
+  contactMethods: m,
+  contactForm: t,
+  faqSection: e
+}) => /* @__PURE__ */ a("main", { className: "bg-primary-50 flex-1 py-10 md:px-6 md:pb-20 lg:px-8 xl:px-0", children: /* @__PURE__ */ l("div", { className: "relative mx-auto flex w-full max-w-300 flex-col gap-12", children: [
+  /* @__PURE__ */ a(o, { ...r, className: "pb-0!" }),
+  /* @__PURE__ */ l("div", { className: "relative flex flex-col gap-10 md:grid md:grid-cols-2 md:items-start md:gap-x-10 md:gap-y-8 lg:gap-x-16 xl:gap-x-20", children: [
+    /* @__PURE__ */ a(s, { ...m }),
+    /* @__PURE__ */ a("div", { className: "md:row-span-2", children: /* @__PURE__ */ a(i, { ...t }) }),
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-8 px-6", children: [
+      /* @__PURE__ */ a("h3", { className: "text-large text-primary-700 font-bold", children: e.faqTitle }),
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ a(c, { content: e.faqText, className: "text-medium text-neutral-800 [&_p:last-child]:mb-0" }) }),
+      /* @__PURE__ */ a(d, { className: "w-fit", variant: "secondary-green", children: e.faqCta })
+    ] })
   ] })
 ] }) });
 export {
-  n as ContactUsTemplate
+  N as ContactUsTemplate
 };

package/dist/components/Input.d.ts

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