@npm_leadtech/legal-contracts-ui 0.99.8 → 0.101.0

package/dist/components/AboutUsTemplate.d.ts

@@ -24,7 +24,6 @@ export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'chil
     size?: ButtonSize;
     variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
-    href?: string;
 }
 
 export type ButtonSize = 'small' | 'default' | 'large';
@@ -35,7 +34,7 @@ export interface ContactUsSectionProps {
     header: SectionHeadingProps;
     contactOptions: Array<{
         title: string;
-        description: string;
+        description?: string;
         icon: ReactNode;
         helper?: string;
     }>;

package/dist/components/AboutUsTemplate.js

@@ -1,16 +1,16 @@
 import { jsxs as S, jsx as o } from "react/jsx-runtime";
-import { IntroSection as u } from "./IntroSection.js";
-import { MissionSection as x } from "./MissionSection.js";
-import { ValuesSection as b } from "./ValuesSection.js";
-import { Storyline as d } from "./Storyline.js";
-import { WeHelpSection as j } from "./WeHelpSection.js";
-import { GuidelinesSection as y } from "./GuidelinesSection.js";
-import { ExpertsSection as C } from "./ExpertsSection.js";
-import { TrustPilotSection as N } from "./TrustPilotSection.js";
-import { PartnersSection as P } from "./PartnersSection.js";
-import { CtaSection as T } from "./CtaSection.js";
-import { ContactUsSection as U } from "./ContactUsSection.js";
-import { Jumbotron2 as g } from "./Jumbotron2.js";
+import { MissionSection as u } from "./MissionSection.js";
+import { ValuesSection as x } from "./ValuesSection.js";
+import { Storyline as b } from "./Storyline.js";
+import { WeHelpSection as d } from "./WeHelpSection.js";
+import { GuidelinesSection as j } from "./GuidelinesSection.js";
+import { ExpertsSection as y } from "./ExpertsSection.js";
+import { TrustPilotSection as C } from "./TrustPilotSection.js";
+import { PartnersSection as N } from "./PartnersSection.js";
+import { CtaSection as P } from "./CtaSection.js";
+import { ContactUsSection as T } from "./ContactUsSection.js";
+import { Jumbotron2 as U } from "./Jumbotron2.js";
+import { IntroSection as g } from "./IntroSection.js";
 const v = ({
   jumbotron: t,
   intro: r,
@@ -25,18 +25,18 @@ const v = ({
   cta: l,
   contactUs: a
 }) => /* @__PURE__ */ S("main", { className: "mx-auto flex w-full flex-1 flex-col text-neutral-800", children: [
-  /* @__PURE__ */ o(g, { ...t }),
-  /* @__PURE__ */ o(u, { ...r, className: "bg-primary-50" }),
-  /* @__PURE__ */ o(x, { ...m }),
-  /* @__PURE__ */ o(b, { ...i }),
-  /* @__PURE__ */ o(d, { ...e }),
-  /* @__PURE__ */ o(j, { ...n }),
-  /* @__PURE__ */ o(y, { ...p }),
-  /* @__PURE__ */ o(C, { ...f }),
-  /* @__PURE__ */ o(N, { ...s }),
-  /* @__PURE__ */ o(P, { ...c }),
-  /* @__PURE__ */ o(T, { ...l }),
-  /* @__PURE__ */ o(U, { ...a })
+  /* @__PURE__ */ o(U, { ...t }),
+  /* @__PURE__ */ o(g, { ...r, className: "bg-primary-50" }),
+  /* @__PURE__ */ o(u, { ...m }),
+  /* @__PURE__ */ o(x, { ...i }),
+  /* @__PURE__ */ o(b, { ...e }),
+  /* @__PURE__ */ o(d, { ...n }),
+  /* @__PURE__ */ o(j, { ...p }),
+  /* @__PURE__ */ o(y, { ...f }),
+  /* @__PURE__ */ o(C, { ...s }),
+  /* @__PURE__ */ o(N, { ...c }),
+  /* @__PURE__ */ o(P, { ...l }),
+  /* @__PURE__ */ o(T, { ...a })
 ] });
 export {
   v as AboutUsTemplate

package/dist/components/AllDocumentsTemplate.d.ts

@@ -66,7 +66,6 @@ export interface DocumentItemProps {
     link: ReactNode;
     description: string;
     className?: string;
-    title: string;
 }
 
 export interface DocumentSectionProps {

package/dist/components/Button.d.ts

@@ -2,14 +2,13 @@ import { ComponentPropsWithRef } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-export declare const Button: ({ children, type, size, variant, iconPosition, className, disabled, href, ref, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ children, type, size, variant, iconPosition, className, disabled, ref, ...props }: ButtonProps) => JSX.Element;
 
 export declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
     variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
-    href?: string;
 }
 
 export type ButtonSize = 'small' | 'default' | 'large';

package/dist/components/Button.js

@@ -1,21 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
+import { getButtonClasses as p } from "./Button.utils.js";
 import "react";
-import { getButtonClasses as f } from "./Button.utils.js";
-const N = ({
+const x = ({
   children: o,
-  type: m = "button",
-  size: c = "default",
-  variant: u = "primary-green",
-  iconPosition: l = "left",
-  className: p,
+  type: r = "button",
+  size: s = "default",
+  variant: e = "primary-green",
+  iconPosition: a = "left",
+  className: n,
   disabled: t = !1,
-  href: s,
-  ref: r,
-  ...a
+  ref: m,
+  ...u
 }) => {
-  const n = f(c, u, l, t, p);
-  return s ? /* @__PURE__ */ e("a", { ref: r, href: s, className: n, ...a, children: o }) : /* @__PURE__ */ e("button", { ref: r, type: m, disabled: t, "aria-disabled": t, className: n, ...a, children: o });
+  const f = p(s, e, a, t, n);
+  return /* @__PURE__ */ l("button", { ref: m, type: r, disabled: t, "aria-disabled": t, className: f, ...u, children: o });
 };
 export {
-  N as Button
+  x as Button
 };

package/dist/components/CategoryProductTemplate.d.ts

@@ -47,7 +47,6 @@ export interface DocumentItemProps {
     link: ReactNode;
     description: string;
     className?: string;
-    title: string;
 }
 
 export interface DocumentSectionProps {

package/dist/components/ContactFormSection.d.ts

@@ -1,4 +1,60 @@
+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 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<ContactFormFieldProps, 'tooltip'>;
+    emailField: Omit<ContactFormFieldProps, 'tooltip'>;
+    referenceNumberField: ContactFormFieldProps;
+    subjectField: Omit<ContactFormFieldProps, 'tooltip'>;
+    messageField: Omit<ContactFormFieldProps, 'tooltip'>;
+    requiredFieldsText: string;
+    privacyField: Omit<ContactFormFieldProps, 'tooltip'>;
+    securityHint: string;
+    feedback?: {
+        type: 'success' | 'error';
+        message: string;
+        title?: string;
+        cta?: ReactNode;
+    };
+    button: ButtonProps;
+}
+
+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,104 @@
-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: [
-  /* @__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("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+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" })
   ] }),
-  /* @__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,
+  /* @__PURE__ */ s("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, children: [
+    i && /* @__PURE__ */ r(
+      "div",
       {
-        label: "Reference number",
-        id: "reference-number",
-        name: "reference-number",
-        type: "text",
-        placeholder: "e.g. 12345678",
-        tooltip: "Where to find your reference number"
+        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__ */ 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__ */ e(
-        "a",
+    /* @__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,
         {
-          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,
+          placeholder: a.placeholder,
+          options: p,
+          required: a.required
         }
-      )
-    ] }) }),
-    /* @__PURE__ */ e(
-      o,
+      ),
+      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: "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",
+        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"
       }
     ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        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" })
-      }
-    )
+    /* @__PURE__ */ r(q, { ...x, variant: "primary-green", className: "w-fit self-center" })
   ] })
 ] });
 export {
-  y as ContactFormSection
+  V 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;
-    link?: 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: r, helper: t, link: 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: r }) : /* @__PURE__ */ e("p", { className: "text-medium text-primary-800 font-bold", children: r }),
-    t && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: t })
+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;
-    link?: 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/ContactUsSection.d.ts

@@ -7,7 +7,7 @@ export declare interface ContactUsSectionProps {
     header: SectionHeadingProps;
     contactOptions: Array<{
         title: string;
-        description: string;
+        description?: string;
         icon: ReactNode;
         helper?: string;
     }>;

package/dist/components/ContactUsSection.js

@@ -1,21 +1,23 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { SectionHeading as s } from "./SectionHeading.js";
-const d = ({ header: a, contactOptions: t }) => t.length === 0 ? null : /* @__PURE__ */ e("section", { className: "bg-neutral-25 px-4 pt-16 pb-20", children: /* @__PURE__ */ r("div", { className: "mx-auto max-w-6xl space-y-10", children: [
-  /* @__PURE__ */ e(s, { ...a }),
-  /* @__PURE__ */ e("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: t.map((l) => /* @__PURE__ */ r(
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { SectionHeading as c } from "./SectionHeading.js";
+const n = ({ header: r, contactOptions: s }) => s.length === 0 ? null : /* @__PURE__ */ e("section", { className: "bg-neutral-25 px-4 pt-16 pb-20", children: /* @__PURE__ */ t("div", { className: "mx-auto max-w-6xl space-y-10", children: [
+  /* @__PURE__ */ e(c, { ...r, className: "px-6" }),
+  /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-6 sm:flex-row sm:items-start sm:justify-center", children: s.map((l) => /* @__PURE__ */ t(
     "article",
     {
-      className: "flex flex-col items-center gap-4 rounded-2xl bg-white p-6 text-center shadow-sm",
+      className: "flex h-36 w-52 flex-col items-center justify-center gap-4 rounded bg-white text-center shadow-sm",
       children: [
         /* @__PURE__ */ e("div", { className: "bg-primary-50 rounded-full p-3", children: l.icon }),
-        /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-900", children: l.title }),
-        /* @__PURE__ */ e("p", { className: "text-medium text-neutral-800", children: l.description }),
-        l.helper && /* @__PURE__ */ e("p", { className: "text-small text-neutral-600", children: l.helper })
+        /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ e("p", { className: "text-neutral-800", children: l.title }),
+          /* @__PURE__ */ e("p", { className: "text-neutral-800", children: l.description }),
+          l.helper && /* @__PURE__ */ e("p", { className: "text-neutral-800", children: l.helper })
+        ] })
       ]
     },
     l.title
   )) })
 ] }) });
 export {
-  d as ContactUsSection
+  n as ContactUsSection
 };

package/dist/components/ContactUsTemplate.d.ts

@@ -1,16 +1,60 @@
+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 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<ContactFormFieldProps, 'tooltip'>;
+    emailField: Omit<ContactFormFieldProps, 'tooltip'>;
+    referenceNumberField: ContactFormFieldProps;
+    subjectField: Omit<ContactFormFieldProps, 'tooltip'>;
+    messageField: Omit<ContactFormFieldProps, 'tooltip'>;
+    requiredFieldsText: string;
+    privacyField: Omit<ContactFormFieldProps, 'tooltip'>;
+    securityHint: string;
+    feedback?: {
+        type: 'success' | 'error';
+        message: string;
+        title?: string;
+        cta?: ReactNode;
+    };
+    button: ButtonProps;
+}
+
+export interface ContactMethod {
+    id: string;
+    label?: ReactNode;
     helper?: string;
-    link?: string;
+    variant: 'phone' | 'email' | 'location';
 }
 
 export interface ContactMethodsSectionProps {
     items: ContactMethod[];
-    title?: ReactNode;
 }
 
 export declare const ContactUsTemplate: FC<ContactUsTemplateProps>;
@@ -18,13 +62,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;
+};