@npm_leadtech/legal-contracts-ui 0.103.1 → 0.103.2

package/dist/components/AboutUsTemplate.d.ts

@@ -89,6 +89,7 @@ export interface Jumbotron2Props {
     subtitle?: string;
     className?: string;
     children?: React.ReactNode;
+    variant?: 'default' | 'contact';
 }
 
 export interface MissionSectionProps {

package/dist/components/CheckIcon.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export declare const CheckIcon: FC<React.SVGProps<SVGSVGElement>>;
+

package/dist/components/CheckIcon.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+const l = (i) => /* @__PURE__ */ o("svg", { width: "16", height: "16", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", ...i, children: /* @__PURE__ */ o(
+  "path",
+  {
+    fill: i.fill ?? "var(--color-primary-800)",
+    d: "M5.867 10.6 3.533 8.267A.66.66 0 1 0 2.6 9.2l3.089 3.089a.25.25 0 0 0 .355 0L13.4 4.933A.66.66 0 0 0 12.467 4z"
+  }
+) });
+export {
+  l as CheckIcon
+};

package/dist/components/Checkbox.d.ts

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

package/dist/components/Checkbox.js

@@ -1,18 +1,31 @@
-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: [
-  /* @__PURE__ */ e(
-    "input",
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import m from "clsx";
+import { CheckIcon as c } from "./CheckIcon.js";
+const u = ({
+  id: o,
+  name: s,
+  required: i = !1,
+  children: l,
+  checked: e,
+  error: t = !1,
+  ...n
+}) => /* @__PURE__ */ a("label", { htmlFor: o, className: "text-medium flex cursor-pointer items-center gap-2 text-neutral-800 select-none", children: [
+  /* @__PURE__ */ r("input", { id: o, name: s, type: "checkbox", required: i, className: "peer sr-only", ...n }),
+  /* @__PURE__ */ r(
+    "div",
     {
-      id: t,
-      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
+      className: m(
+        "flex h-5.5 w-5.5 items-center justify-center rounded transition-colors",
+        "peer-focus-visible:ring-primary-500 peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
+        !t && !e && "hover:bg-primary-200 border border-neutral-800 bg-white",
+        e && "border-primary-500 bg-primary-200 border-2",
+        t && "border-error-500 bg-error-20 border"
+      ),
+      children: e && /* @__PURE__ */ r(c, {})
     }
   ),
-  /* @__PURE__ */ e("span", { children: i })
+  /* @__PURE__ */ r("span", { className: "leading-tight text-neutral-800", children: l })
 ] });
 export {
-  n as Checkbox
+  u as Checkbox
 };

package/dist/components/ClearIcon.d.ts

@@ -0,0 +1,4 @@
+import * as React_2 from 'react';
+
+export declare const ClearIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
+

package/dist/components/ClearIcon.js

@@ -0,0 +1,12 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+const t = (r) => /* @__PURE__ */ i("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r, children: /* @__PURE__ */ i(
+  "path",
+  {
+    d: "M18.295 7.115C18.6844 6.72564 18.6844 6.09436 18.295 5.705C17.9056 5.31564 17.2744 5.31564 16.885 5.705L12 10.59L7.115 5.705C6.72564 5.31564 6.09436 5.31564 5.705 5.705C5.31564 6.09436 5.31564 6.72564 5.705 7.115L10.59 12L5.705 16.885C5.31564 17.2744 5.31564 17.9056 5.705 18.295C6.09436 18.6844 6.72564 18.6844 7.115 18.295L12 13.41L16.885 18.295C17.2744 18.6844 17.9056 18.6844 18.295 18.295C18.6844 17.9056 18.6844 17.2744 18.295 16.885L13.41 12L18.295 7.115Z",
+    fill: r.fill ?? "var(--color-primary-800)"
+  }
+) });
+export {
+  t as ClearIcon
+};

package/dist/components/ContactFormSection.d.ts

@@ -1,3 +1,5 @@
+import { ChangeEventHandler } from 'react';
+import { ComponentProps } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import { FC } from 'react';
 import { ReactNode } from 'react';
@@ -13,6 +15,17 @@ 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 | ButtonProps;
+}
+
 export declare interface ContactFormFieldProps {
     label: string;
     id: string;
@@ -20,6 +33,7 @@ export declare interface ContactFormFieldProps {
     placeholder?: string;
     required?: boolean;
     tooltip?: string;
+    error?: boolean;
     errorMessage?: string;
 }
 
@@ -31,23 +45,36 @@ export declare interface ContactFormSectionProps {
         label: string;
         value: string;
     }[];
-    fullNameField: Omit<ContactFormFieldProps, 'tooltip'>;
-    emailField: Omit<ContactFormFieldProps, 'tooltip'>;
-    referenceNumberField: ContactFormFieldProps;
-    subjectField: Omit<ContactFormFieldProps, 'tooltip'>;
-    messageField: Omit<ContactFormFieldProps, 'tooltip'>;
+    fullNameField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    emailField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    referenceNumberField: ContactFormTextFieldProps;
+    subjectField: ContactFormSelectFieldProps;
+    messageField: ContactFormTextareaFieldProps;
     requiredFieldsText: string;
-    privacyField: Omit<ContactFormFieldProps, 'tooltip'>;
+    privacyField: ContactFormCheckboxFieldProps;
     securityHint: string;
-    feedback?: {
-        type: 'success' | 'error';
-        message: string;
-        title?: string;
-        cta?: ReactNode;
-    };
+    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 | {

package/dist/components/ContactFormSection.js

@@ -1,104 +1,74 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { Textarea as g } from "./Textarea.js";
-import { Checkbox as y } from "./Checkbox.js";
-import { Input as m } from "./Input.js";
-import { Select as u } from "./Select.js";
-import { Markdown as M } from "./Markdown.js";
-import { Item as N } from "./Item.js";
-import { InfoIcon as v } from "./InfoIcon.js";
-import { Button as q } from "./Button.js";
-const V = ({
-  title: n,
-  subjectOptions: p,
-  fullNameField: o,
-  emailField: l,
-  referenceNumberField: e,
-  subjectField: a,
-  messageField: t,
-  privacyField: d,
-  requiredFieldsText: c,
-  securityHint: h,
-  feedback: i,
-  button: x
-}) => /* @__PURE__ */ s("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
-  /* @__PURE__ */ s("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ r("p", { className: "text-big font-bold text-neutral-600", children: n }),
-    /* @__PURE__ */ r("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Textarea as b } from "./Textarea.js";
+import { Checkbox as v } from "./Checkbox.js";
+import { ClearIcon as y } from "./ClearIcon.js";
+import { DoneIcon as w } from "./DoneIcon.js";
+import { Input as n } from "./Input.js";
+import { Select as j } from "./Select.js";
+import { Markdown as I } from "./Markdown.js";
+import { InfoIcon as S } from "./InfoIcon.js";
+import { Button as o } from "./Button.js";
+import { LinkWrapper as k } from "./LinkWrapper.js";
+const C = () => /* @__PURE__ */ e("div", { role: "status", "aria-live": "polite", className: "mt-6 flex items-center justify-center rounded py-6", children: /* @__PURE__ */ e("div", { className: "border-primary-500 h-[25px] w-[25px] animate-spin rounded-full border-3 border-t-transparent" }) }), L = ({ title: r, message: l, cta: i }) => /* @__PURE__ */ t("div", { role: "status", "aria-live": "polite", className: "flex flex-col items-center justify-center gap-8 px-4 py-3", children: [
+  /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ e("div", { className: "bg-error-20 w-fit rounded-full p-3", children: /* @__PURE__ */ e(y, { width: 48, height: 48, fill: "var(--error-500)" }) }),
+    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-800", children: r }),
+    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-800", children: l })
   ] }),
-  /* @__PURE__ */ s("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, children: [
-    i && /* @__PURE__ */ r(
+  /* @__PURE__ */ e(o, { ...i, variant: "primary-green" })
+] }), B = ({ title: r, message: l, cta: i }) => /* @__PURE__ */ t("div", { role: "status", "aria-live": "polite", className: "flex flex-col items-center justify-center gap-8 px-4 py-3", children: [
+  /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ e("div", { className: "bg-primary-100 w-fit rounded-full p-3", children: /* @__PURE__ */ e(w, { width: 48, height: 48, fill: "var(--primary-500)" }) }),
+    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-800", children: r }),
+    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-800", children: l })
+  ] }),
+  /* @__PURE__ */ e(k, { className: "w-fit", children: i })
+] }), G = ({
+  title: r,
+  subjectOptions: l,
+  fullNameField: i,
+  emailField: m,
+  referenceNumberField: d,
+  subjectField: p,
+  messageField: f,
+  privacyField: s,
+  requiredFieldsText: h,
+  securityHint: x,
+  status: a = "default",
+  successFeedback: u,
+  errorFeedback: N,
+  onSubmit: g,
+  button: c
+}) => /* @__PURE__ */ t("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
+  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: r }),
+    /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+  ] }),
+  a === "loading" && /* @__PURE__ */ e(C, {}),
+  a === "error" && /* @__PURE__ */ e(L, { ...N }),
+  a === "success" && /* @__PURE__ */ e(B, { ...u }),
+  a === "default" && /* @__PURE__ */ t("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, onSubmit: g, children: [
+    /* @__PURE__ */ e(n, { ...i, type: "text" }),
+    /* @__PURE__ */ e(n, { ...m, type: "email" }),
+    /* @__PURE__ */ e(n, { ...d }),
+    /* @__PURE__ */ e(j, { ...p, options: l }),
+    /* @__PURE__ */ e(b, { ...f }),
+    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-600", children: h }),
+    /* @__PURE__ */ e(v, { ...s, children: /* @__PURE__ */ e(I, { className: "text-medium [&_p:last-child]:mb-0", content: s.label }) }),
+    /* @__PURE__ */ t(
       "div",
-      {
-        role: "status",
-        "aria-live": "polite",
-        className: i.type === "success" ? "rounded border border-green-300 bg-green-50 px-4 py-3 text-green-900" : "rounded border border-red-300 bg-red-50 px-4 py-3 text-red-800",
-        children: i.message
-      }
-    ),
-    /* @__PURE__ */ s("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ r(m, { ...o, type: "text" }),
-      o.errorMessage && /* @__PURE__ */ r("p", { id: `${o.id}-error-message`, className: "text-small text-red-700", children: o.errorMessage })
-    ] }),
-    /* @__PURE__ */ s("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ r(m, { ...l, type: "email" }),
-      l.errorMessage && /* @__PURE__ */ r("p", { id: `${l.id}-error-message`, className: "text-small text-red-700", children: l.errorMessage })
-    ] }),
-    /* @__PURE__ */ s("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ r(
-        m,
-        {
-          label: e.label,
-          id: e.id,
-          name: e.name,
-          type: "text",
-          placeholder: e.placeholder,
-          tooltip: e.tooltip,
-          required: e.required
-        }
-      ),
-      e.errorMessage && /* @__PURE__ */ r("p", { id: `${e.id}-error-message`, className: "text-small text-red-700", children: e.errorMessage })
-    ] }),
-    /* @__PURE__ */ s("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ r(
-        u,
-        {
-          label: a.label,
-          id: a.id,
-          name: a.name,
-          placeholder: a.placeholder,
-          options: p,
-          required: a.required
-        }
-      ),
-      a.errorMessage && /* @__PURE__ */ r("p", { id: `${a.id}-error-message`, className: "text-small text-red-700", children: a.errorMessage })
-    ] }),
-    /* @__PURE__ */ s("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ r(
-        g,
-        {
-          label: t.label,
-          id: t.id,
-          name: t.name,
-          placeholder: t.placeholder,
-          required: t.required
-        }
-      ),
-      t.errorMessage && /* @__PURE__ */ r("p", { id: `${t.id}-error-message`, className: "text-small text-red-700", children: t.errorMessage })
-    ] }),
-    /* @__PURE__ */ r("p", { className: "text-medium text-neutral-600", children: c }),
-    /* @__PURE__ */ r("div", { className: "", children: /* @__PURE__ */ r(y, { id: d.id, name: d.name, required: !0, children: /* @__PURE__ */ r(M, { className: "text-medium [&_p:last-child]:mb-0", content: d.label }) }) }),
-    /* @__PURE__ */ r(
-      N,
       {
         id: "security-hint",
-        image: /* @__PURE__ */ r(v, { width: 24, height: 24, "aria-hidden": "true" }),
-        description: h,
-        className: "text-small flex items-start gap-2 rounded bg-neutral-50 p-4 text-neutral-600"
+        className: "text-small flex items-start gap-2 rounded bg-neutral-50 p-4 text-neutral-600",
+        children: [
+          /* @__PURE__ */ e(S, { width: 24, height: 24, "aria-hidden": "true" }),
+          /* @__PURE__ */ e("p", { children: x })
+        ]
       }
     ),
-    /* @__PURE__ */ r(q, { ...x, variant: "primary-green", className: "w-fit self-center" })
+    /* @__PURE__ */ e(o, { ...c, className: "w-fit self-center", type: "submit", children: c.children })
   ] })
 ] });
 export {
-  V as ContactFormSection
+  G as ContactFormSection
 };

package/dist/components/ContactMethodCard.js

@@ -1,36 +1,37 @@
-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" }),
+import { jsxs as l, Fragment as r, jsx as a } from "react/jsx-runtime";
+import { SinglePhoneIcon as s } from "./SinglePhoneIcon.js";
+import { PhoneTalkIcon as m } from "./PhoneTalkIcon.js";
+import { MailFillIcon as c } from "./MailFillIcon.js";
+import { LocationIcon as o } from "./LocationIcon.js";
+import { LinkWrapper as n } from "./LinkWrapper.js";
+const v = ({ label: e, helper: i, variant: t }) => /* @__PURE__ */ l("article", { className: "bg-neutral-25 flex flex-wrap gap-2 rounded-sm p-4 md:flex-col", children: [
+  t === "phone" && /* @__PURE__ */ l(r, { children: [
+    /* @__PURE__ */ l(n, { variant: "primary-green", className: "w-full md:hidden", children: [
+      /* @__PURE__ */ a(s, { width: 22, height: 22, 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 })
+    /* @__PURE__ */ l("div", { className: "hidden gap-2 md:flex", children: [
+      /* @__PURE__ */ a("span", { className: "shrink-0", children: /* @__PURE__ */ a(m, { fill: "var(--primary-800)" }) }),
+      /* @__PURE__ */ l("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ a(n, { className: "justify-start! p-0! no-underline!", variant: "tertiary-link", children: /* @__PURE__ */ a("span", { className: "text-medium text-primary-800 font-bold", children: e }) }),
+        i && /* @__PURE__ */ a("p", { className: "text-small mx-auto text-neutral-600 md:mx-0", children: i })
       ] })
     ] }),
-    l && /* @__PURE__ */ a("p", { className: "text-small mx-auto text-neutral-600 md:mx-0 md:hidden", children: l })
+    i && /* @__PURE__ */ a("p", { className: "text-small mx-auto text-neutral-600 md:mx-0 md:hidden", children: i })
   ] }),
-  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 })
+  t === "email" && /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ a("span", { className: "shrink-0", children: /* @__PURE__ */ a(c, { fill: "var(--primary-800)" }) }),
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ a(n, { className: "justify-start! p-0!", variant: "tertiary-link", children: /* @__PURE__ */ a("span", { className: "text-medium text-primary-800 font-bold", children: e }) }),
+      i && /* @__PURE__ */ a("p", { className: "text-small text-neutral-600", children: i })
     ] })
   ] }),
-  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 })
+  t === "location" && /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ a("span", { className: "shrink-0", children: /* @__PURE__ */ a(o, { fill: "var(--primary-800)" }) }),
+    i && /* @__PURE__ */ a("p", { className: "text-small text-neutral-600", children: i })
   ] })
 ] });
 export {
-  y as ContactMethodCard
+  v as ContactMethodCard
 };

package/dist/components/ContactUsTemplate.d.ts

@@ -1,3 +1,5 @@
+import { ChangeEventHandler } from 'react';
+import { ComponentProps } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import { FC } from 'react';
 import { ReactNode } from 'react';
@@ -13,6 +15,17 @@ 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 | ButtonProps;
+}
+
 export interface ContactFormFieldProps {
     label: string;
     id: string;
@@ -20,6 +33,7 @@ export interface ContactFormFieldProps {
     placeholder?: string;
     required?: boolean;
     tooltip?: string;
+    error?: boolean;
     errorMessage?: string;
 }
 
@@ -29,23 +43,36 @@ export interface ContactFormSectionProps {
         label: string;
         value: string;
     }[];
-    fullNameField: Omit<ContactFormFieldProps, 'tooltip'>;
-    emailField: Omit<ContactFormFieldProps, 'tooltip'>;
-    referenceNumberField: ContactFormFieldProps;
-    subjectField: Omit<ContactFormFieldProps, 'tooltip'>;
-    messageField: Omit<ContactFormFieldProps, 'tooltip'>;
+    fullNameField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    emailField: Omit<ContactFormTextFieldProps, 'tooltip'>;
+    referenceNumberField: ContactFormTextFieldProps;
+    subjectField: ContactFormSelectFieldProps;
+    messageField: ContactFormTextareaFieldProps;
     requiredFieldsText: string;
-    privacyField: Omit<ContactFormFieldProps, 'tooltip'>;
+    privacyField: ContactFormCheckboxFieldProps;
     securityHint: string;
-    feedback?: {
-        type: 'success' | 'error';
-        message: string;
-        title?: string;
-        cta?: ReactNode;
-    };
+    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;
@@ -68,6 +95,7 @@ export declare interface ContactUsTemplateProps {
         faqText: string;
         faqCta: ReactNode;
     };
+    bgImage: ReactNode | null;
 }
 
 export type IconPosition = 'left' | 'right' | 'top';
@@ -77,6 +105,7 @@ export interface Jumbotron2Props {
     subtitle?: string;
     className?: string;
     children?: React.ReactNode;
+    variant?: 'default' | 'contact';
 }
 
 export type ResponsiveButtonVariant = ButtonVariant | {

package/dist/components/ContactUsTemplate.js

@@ -1,26 +1,36 @@
-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 })
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { ContactFormSection as o } from "./ContactFormSection.js";
+import { Jumbotron2 as s } from "./Jumbotron2.js";
+import { Markdown as m } from "./Markdown.js";
+import { ContactMethodsSection as d } from "./ContactMethodsSection.js";
+import { LinkWrapper as n } from "./LinkWrapper.js";
+const v = ({
+  jumbotron: t,
+  contactMethods: i,
+  contactForm: c,
+  faqSection: l,
+  bgImage: r
+}) => /* @__PURE__ */ a("main", { className: "bg-primary-50 relative flex-1 pt-10 pb-20 md:px-6 lg:px-8 xl:px-0", children: [
+  !!r && /* @__PURE__ */ e("div", { className: "absolute right-0 bottom-0 hidden md:block", children: r }),
+  /* @__PURE__ */ a("div", { className: "relative mx-auto flex w-full max-w-300 flex-col gap-12", children: [
+    /* @__PURE__ */ e(s, { ...t, className: "flex flex-col gap-4 pb-0!", variant: "contact", children: /* @__PURE__ */ e(
+      m,
+      {
+        content: t.children,
+        className: "text-medium text-neutral-600 [&_p:last-child]:mb-0"
+      }
+    ) }),
+    /* @__PURE__ */ a("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__ */ e(d, { ...i }),
+      /* @__PURE__ */ e("div", { className: "md:row-span-2", children: /* @__PURE__ */ e(o, { ...c }) }),
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-8 px-6", children: [
+        /* @__PURE__ */ e("h3", { className: "text-large text-primary-700 font-bold", children: l.faqTitle }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ e(m, { content: l.faqText, className: "text-medium text-neutral-800 [&_p:last-child]:mb-0" }) }),
+        /* @__PURE__ */ e(n, { className: "w-fit", variant: "secondary-green", children: l.faqCta })
+      ] })
     ] })
   ] })
-] }) });
+] });
 export {
-  N as ContactUsTemplate
+  v as ContactUsTemplate
 };

package/dist/components/DoneIcon.d.ts

@@ -0,0 +1,4 @@
+import * as React_2 from 'react';
+
+export declare const DoneIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
+

package/dist/components/DoneIcon.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+const l = (o) => /* @__PURE__ */ r("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o, children: /* @__PURE__ */ r(
+  "path",
+  {
+    d: "M8.79995 15.9L5.29995 12.4C4.91335 12.0134 4.28655 12.0134 3.89995 12.4C3.51335 12.7866 3.51335 13.4134 3.89995 13.8L8.53328 18.4333C8.68056 18.5806 8.91934 18.5806 9.06662 18.4333L20.1 7.39999C20.4866 7.01339 20.4866 6.38659 20.1 5.99999C19.7134 5.61339 19.0866 5.61339 18.7 5.99999L8.79995 15.9Z",
+    fill: o.fill ?? "var(--color-primary-800)"
+  }
+) });
+export {
+  l as DoneIcon
+};

package/dist/components/FaqsTemplate.d.ts

@@ -35,5 +35,6 @@ export interface Jumbotron2Props {
     subtitle?: string;
     className?: string;
     children?: React.ReactNode;
+    variant?: 'default' | 'contact';
 }
 

package/dist/components/Input.d.ts

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