@npm_leadtech/legal-contracts-ui 0.99.0 → 0.99.2

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

package/dist/components/ContactMethodCard.js

@@ -1,11 +1,33 @@
-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 s, Fragment as r, jsx as a } from "react/jsx-runtime";
+import { LinkWrapper as n } from "./LinkWrapper.js";
+const h = ({ icon: l, label: t, helper: e, variant: i }) => /* @__PURE__ */ s("article", { className: "bg-neutral-25 flex flex-wrap gap-2 rounded-sm p-4 md:flex-col", children: [
+  i === "phone" && /* @__PURE__ */ s(r, { children: [
+    /* @__PURE__ */ s(n, { variant: "primary-green", className: "w-full md:hidden", children: [
+      l,
+      " ",
+      t
+    ] }),
+    /* @__PURE__ */ s("div", { className: "hidden gap-2 md:flex", children: [
+      /* @__PURE__ */ a("span", { className: "shrink-0", children: l }),
+      /* @__PURE__ */ s("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: t }) }),
+        e && /* @__PURE__ */ a("p", { className: "text-small mx-auto text-neutral-600 md:mx-0", children: e })
+      ] })
+    ] }),
+    e && /* @__PURE__ */ a("p", { className: "text-small mx-auto text-neutral-600 md:mx-0 md:hidden", children: e })
+  ] }),
+  i === "email" && /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ a("span", { className: "shrink-0", children: l }),
+    /* @__PURE__ */ s("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: t }) }),
+      e && /* @__PURE__ */ a("p", { className: "text-small text-neutral-600", children: e })
+    ] })
+  ] }),
+  i === "location" && /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ a("span", { className: "shrink-0", children: l }),
+    e && /* @__PURE__ */ a("p", { className: "text-small text-neutral-600", children: e })
   ] })
 ] });
 export {
-  i as ContactMethodCard
+  h as ContactMethodCard
 };

package/dist/components/ContactMethodsSection.d.ts

@@ -2,16 +2,16 @@ import { FC } from 'react';
 import { ReactNode } from 'react';
 
 export interface ContactMethod {
-    icon: React.ReactNode;
-    label: string;
+    id: string;
+    icon: ReactNode;
+    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,61 @@
+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;
+    icon: ReactNode;
+    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 +63,32 @@ export declare const ContactUsTemplate: FC<ContactUsTemplateProps>;
 export declare interface ContactUsTemplateProps {
     jumbotron: Jumbotron2Props;
     contactMethods: ContactMethodsSectionProps;
-    subjectOptions?: string[];
+    contactForm: ContactFormSectionProps;
+    faqSection: {
+        faqTitle: string;
+        faqItems: {
+            id: string;
+            question: string;
+            answer: 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,29 @@
-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 e } from "react/jsx-runtime";
+import { ContactFormSection as i } from "./ContactFormSection.js";
+import { Jumbotron2 as o } from "./Jumbotron2.js";
+import { ContactMethodsSection as c } from "./ContactMethodsSection.js";
+import { Markdown as d } from "./Markdown.js";
+import { LinkWrapper as p } from "./LinkWrapper.js";
+const v = ({
+  jumbotron: m,
+  contactMethods: t,
+  contactForm: s,
+  faqSection: l
+}) => /* @__PURE__ */ a("main", { className: "bg-primary-50 py-10 md:px-6 md:pb-20 lg:px-8 xl:px-0", children: /* @__PURE__ */ e("div", { className: "relative mx-auto flex w-full max-w-300 flex-col gap-12", children: [
+  /* @__PURE__ */ a(o, { ...m, className: "pb-0!" }),
+  /* @__PURE__ */ e("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(c, { ...t }),
+    /* @__PURE__ */ a("div", { className: "md:row-span-2", children: /* @__PURE__ */ a(i, { ...s }) }),
+    /* @__PURE__ */ e("div", { className: "flex flex-col gap-8 px-6", children: [
+      /* @__PURE__ */ a("h3", { className: "text-large text-primary-700 font-bold", children: l.faqTitle }),
+      /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: l.faqItems.map((r) => /* @__PURE__ */ e("div", { className: "flex flex-col gap-4 text-neutral-800", children: [
+        /* @__PURE__ */ a("h4", { className: "text-big font-bold", children: r.question }),
+        /* @__PURE__ */ a(d, { content: r.answer, className: "text-medium [&_p:last-child]:mb-0" })
+      ] }, r.id)) }),
+      /* @__PURE__ */ a(p, { className: "w-fit", variant: "secondary-green", children: l.faqCta })
+    ] })
   ] })
 ] }) });
 export {
-  n as ContactUsTemplate
+  v as ContactUsTemplate
 };

package/dist/components/Input.js

@@ -8,14 +8,14 @@ const f = ({
   required: r = !1,
   tooltip: a,
   onInputChange: c,
-  containerClassName: d = "",
-  ...o
-}) => /* @__PURE__ */ e("div", { className: `flex flex-col gap-2 ${d}`, children: [
+  containerClassName: o = "",
+  ...d
+}) => /* @__PURE__ */ e("div", { className: `flex flex-col gap-2 ${o}`, children: [
   /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e("label", { htmlFor: t, className: "font-bold text-neutral-800", children: [
       n,
       " ",
-      r && /* @__PURE__ */ l("span", { className: "text-red-500", children: "*" })
+      r && /* @__PURE__ */ l("span", { className: "text-neutral-800", children: "*" })
     ] }),
     a && /* @__PURE__ */ l(
       "span",
@@ -39,7 +39,7 @@ const f = ({
       onChange: (x) => {
         c?.(x.target.value);
       },
-      ...o
+      ...d
     }
   )
 ] });

package/dist/components/Jumbotron2.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-const c = ({ title: r, subtitle: t, className: l, children: a }) => /* @__PURE__ */ e("section", { className: `text-center ${l ?? ""}`, children: /* @__PURE__ */ s("div", { className: "container mx-auto px-4 pb-10 md:px-8", children: [
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+const o = ({ title: r, subtitle: t, className: l, children: a }) => /* @__PURE__ */ s("section", { className: `mx-auto px-4 pb-10 text-center md:px-8 ${l ?? ""}`, children: [
   /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-2 text-neutral-600", children: [
     /* @__PURE__ */ e("h1", { className: "text-small font-bold", children: r }),
     /* @__PURE__ */ e("span", { className: "h-px w-24 bg-neutral-200", "aria-hidden": !0 })
   ] }),
   t && /* @__PURE__ */ e("h2", { className: "font-lora text-super-hero text-neutral-900", children: t }),
   a !== void 0 && /* @__PURE__ */ e("div", { className: "mt-4", children: a })
-] }) });
+] });
 export {
-  c as Jumbotron2
+  o as Jumbotron2
 };

package/dist/components/LocationIcon.js

@@ -1,12 +1,12 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import "react";
-const i = (r) => /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", ...r, children: /* @__PURE__ */ o(
+const t = (o) => /* @__PURE__ */ c("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", ...o, children: /* @__PURE__ */ c(
   "path",
   {
     d: "M10 17.77c-.194 0-.389-.034-.583-.103a1.533 1.533 0 01-.521-.313A32.581 32.581 0 016.5 14.917a18.06 18.06 0 01-1.74-2.303 10.96 10.96 0 01-1.062-2.145c-.243-.688-.365-1.344-.365-1.969 0-2.083.67-3.743 2.01-4.98C6.685 2.286 8.237 1.668 10 1.668c1.764 0 3.316.618 4.656 1.854 1.34 1.236 2.01 2.896 2.01 4.979 0 .625-.12 1.281-.364 1.969a10.956 10.956 0 01-1.062 2.146 18.056 18.056 0 01-1.74 2.302 32.567 32.567 0 01-2.396 2.437 1.533 1.533 0 01-.52.313c-.195.07-.39.104-.584.104zM10 10c.458 0 .85-.163 1.177-.49.327-.326.49-.718.49-1.177 0-.458-.163-.85-.49-1.177A1.605 1.605 0 0010 6.666c-.458 0-.85.164-1.177.49-.326.327-.49.719-.49 1.177 0 .459.164.851.49 1.177.326.327.719.49 1.177.49z",
-    fill: "var(--color-primary-800)"
+    fill: o.fill ?? "var(--color-primary-800)"
   }
 ) });
 export {
-  i as LocationIcon
+  t as LocationIcon
 };

package/dist/components/MailFillIcon.js

@@ -1,12 +1,12 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import "react";
-const r = (i) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", viewBox: "0 0 20 20", ...i, children: /* @__PURE__ */ l(
+const a = (l) => /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", viewBox: "0 0 20 20", ...l, children: /* @__PURE__ */ i(
   "path",
   {
-    fill: "var(--color-primary-800)",
+    fill: l.fill ?? "var(--color-primary-800)",
     d: "M3.333 16.667q-.687 0-1.177-.49A1.6 1.6 0 0 1 1.666 15V5q0-.687.49-1.177t1.177-.49h13.334q.687 0 1.177.49T18.334 5v10q0 .687-.49 1.177t-1.178.49zM10 10.687q.104 0 .219-.03a.9.9 0 0 0 .218-.095l5.896-3.687a.69.69 0 0 0 .334-.604.68.68 0 0 0-.355-.625q-.354-.209-.729.02L10 9.167l-5.583-3.5q-.375-.228-.73-.01a.69.69 0 0 0-.354.615q0 .208.083.364a.56.56 0 0 0 .25.24l5.896 3.687a.87.87 0 0 0 .438.125"
   }
 ) });
 export {
-  r as MailFillIcon
+  a as MailFillIcon
 };

package/dist/components/NotFoundTemplate.d.ts

@@ -15,15 +15,15 @@ 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 ContactMethod {
-    icon: React.ReactNode;
-    label: string;
+    id: string;
+    icon: ReactNode;
+    label?: ReactNode;
     helper?: string;
-    href?: string;
+    variant: 'phone' | 'email' | 'location';
 }
 
 export interface ContactMethodsSectionProps {
     items: ContactMethod[];
-    title?: ReactNode;
 }
 
 export interface DocumentItemProps {

package/dist/components/NotFoundTemplate.js

@@ -1,19 +1,10 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { IntroSection as c } from "./IntroSection.js";
-import { Card as o } from "./Card.js";
-import { ContactMethodsSection as n } from "./ContactMethodsSection.js";
-import { DocumentItem as s } from "./DocumentItem.js";
-import { SearchBar as f } from "./SearchBar.js";
-const g = ({ intro: m, popularDocuments: r, searchBar: t, contactMethods: i }) => /* @__PURE__ */ l("main", { className: "flex-1", children: [
-  /* @__PURE__ */ e(c, { ...m }),
-  /* @__PURE__ */ e("div", { className: "bg-neutral-25 w-full", children: /* @__PURE__ */ l("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-16 lg:flex-row", children: [
-    /* @__PURE__ */ e(o, { title: r.title, children: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 pb-6", children: r.documents.map((a) => /* @__PURE__ */ e(s, { ...a, className: "w-48/100 shadow-none" }, a.id)) }) }),
-    /* @__PURE__ */ l("div", { className: "flex flex-1 flex-col gap-6", children: [
-      /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(f, { ...t }) }),
-      /* @__PURE__ */ e(n, { ...i })
-    ] })
-  ] }) })
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { IntroSection as r } from "./IntroSection.js";
+import { ContactMethodsSection as t } from "./ContactMethodsSection.js";
+const i = ({ intro: e, contactMethods: o }) => /* @__PURE__ */ a("main", { className: "flex-1", children: [
+  /* @__PURE__ */ l(r, { ...e }),
+  /* @__PURE__ */ l("div", { className: "bg-neutral-25 w-full", children: /* @__PURE__ */ l("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-8 px-6 py-16 lg:flex-row", children: /* @__PURE__ */ l("div", { className: "flex flex-1 flex-col gap-6", children: /* @__PURE__ */ l(t, { ...o }) }) }) })
 ] });
 export {
-  g as NotFoundTemplate
+  i as NotFoundTemplate
 };

package/dist/components/Select.js

@@ -13,7 +13,7 @@ const v = ({
   t && /* @__PURE__ */ l("label", { htmlFor: a, className: "text-medium font-bold text-neutral-800", children: [
     t,
     " ",
-    i && /* @__PURE__ */ e("span", { className: "text-red-500", children: "*" })
+    i && /* @__PURE__ */ e("span", { className: "text-neutral-800", children: "*" })
   ] }),
   /* @__PURE__ */ l("div", { className: "relative", children: [
     /* @__PURE__ */ l(

package/dist/components/Textarea.js

@@ -3,7 +3,7 @@ const i = ({ label: r, id: e, name: s, required: l = !1, placeholder: n, ...o })
   /* @__PURE__ */ t("label", { htmlFor: e, className: "text-medium font-bold text-neutral-800", children: [
     r,
     " ",
-    l && /* @__PURE__ */ a("span", { className: "text-red-500", children: "*" })
+    l && /* @__PURE__ */ a("span", { className: "text-neutral-800", children: "*" })
   ] }),
   /* @__PURE__ */ a(
     "textarea",