@npm_leadtech/legal-contracts-ui 0.101.2 → 0.101.4

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/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

@@ -23,7 +23,7 @@ export interface ContactFormCheckboxFieldProps extends Omit<ContactFormFieldProp
 export interface ContactFormFeedbackProps {
     message: string;
     title?: string;
-    cta?: ReactNode;
+    cta: ReactNode | ButtonProps;
 }
 
 export declare interface ContactFormFieldProps {
@@ -54,8 +54,8 @@ export declare interface ContactFormSectionProps {
     privacyField: ContactFormCheckboxFieldProps;
     securityHint: string;
     status?: 'default' | 'loading' | 'success' | 'error';
-    successFeedback?: ContactFormFeedbackProps;
-    errorFeedback?: ContactFormFeedbackProps;
+    successFeedback: ContactFormFeedbackProps;
+    errorFeedback: ContactFormFeedbackProps;
     onSubmit?: ComponentProps<'form'>['onSubmit'];
     button: ButtonProps;
 }

package/dist/components/ContactFormSection.js

@@ -1,114 +1,74 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Textarea as b } from "./Textarea.js";
-import { Checkbox as g } from "./Checkbox.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 v } from "./Select.js";
-import { Markdown as w } from "./Markdown.js";
-import { InfoIcon as y } from "./InfoIcon.js";
-import { Button as j } from "./Button.js";
-const q = ({
-  title: l,
-  subjectOptions: m,
-  fullNameField: o,
-  emailField: c,
-  referenceNumberField: p,
-  subjectField: h,
-  messageField: u,
-  privacyField: s,
-  requiredFieldsText: x,
-  securityHint: f,
-  status: d = "default",
-  successFeedback: r,
-  errorFeedback: a,
-  onSubmit: N,
-  button: i
-}) => d === "success" ? /* @__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: l }),
-    /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+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__ */ t(
-    "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: [
-        r?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: r.title }),
-        /* @__PURE__ */ e("p", { children: r?.message }),
-        r?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: r.cta })
-      ]
-    }
-  )
-] }) : d === "error" ? /* @__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: l }),
-    /* @__PURE__ */ e("div", { className: "h-px w-full bg-neutral-200", "aria-hidden": "true" })
+  /* @__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__ */ t(
-    "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: [
-        a?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: a.title }),
-        /* @__PURE__ */ e("p", { children: a?.message }),
-        a?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: a.cta })
-      ]
-    }
-  )
-] }) : d === "loading" ? /* @__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: l }),
-    /* @__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__ */ t("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
+  /* @__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: l }),
+    /* @__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" })
   ] }),
-  /* @__PURE__ */ t("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, onSubmit: N, children: [
-    /* @__PURE__ */ e(n, { ...o, type: "text" }),
-    /* @__PURE__ */ e(n, { ...c, type: "email" }),
-    /* @__PURE__ */ e(n, { ...p }),
-    /* @__PURE__ */ e(v, { ...h, options: m }),
-    /* @__PURE__ */ e(b, { ...u }),
-    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-600", children: x }),
-    /* @__PURE__ */ e(g, { ...s, children: /* @__PURE__ */ e(w, { className: "text-medium [&_p:last-child]:mb-0", content: s.label }) }),
+  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",
       {
         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: f })
+          /* @__PURE__ */ e(S, { width: 24, height: 24, "aria-hidden": "true" }),
+          /* @__PURE__ */ e("p", { children: x })
         ]
       }
     ),
-    /* @__PURE__ */ e(
-      j,
-      {
-        ...i,
-        variant: "primary-green",
-        className: "w-fit self-center",
-        type: i.type ?? "submit",
-        disabled: i.disabled,
-        children: i.children
-      }
-    )
+    /* @__PURE__ */ e(o, { ...c, className: "w-fit self-center", type: "submit", children: c.children })
   ] })
 ] });
 export {
-  q as ContactFormSection
+  G as ContactFormSection
 };

package/dist/components/ContactUsTemplate.d.ts

@@ -23,7 +23,7 @@ export interface ContactFormCheckboxFieldProps extends Omit<ContactFormFieldProp
 export interface ContactFormFeedbackProps {
     message: string;
     title?: string;
-    cta?: ReactNode;
+    cta: ReactNode | ButtonProps;
 }
 
 export interface ContactFormFieldProps {
@@ -52,8 +52,8 @@ export interface ContactFormSectionProps {
     privacyField: ContactFormCheckboxFieldProps;
     securityHint: string;
     status?: 'default' | 'loading' | 'success' | 'error';
-    successFeedback?: ContactFormFeedbackProps;
-    errorFeedback?: ContactFormFeedbackProps;
+    successFeedback: ContactFormFeedbackProps;
+    errorFeedback: ContactFormFeedbackProps;
     onSubmit?: ComponentProps<'form'>['onSubmit'];
     button: ButtonProps;
 }
@@ -95,6 +95,7 @@ export declare interface ContactUsTemplateProps {
         faqText: string;
         faqCta: ReactNode;
     };
+    bgImage: ReactNode | null;
 }
 
 export type IconPosition = 'left' | 'right' | 'top';
@@ -104,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.js

@@ -1,60 +1,114 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { InfoIcon as h } from "./InfoIcon.js";
-import p from "clsx";
-const v = ({
-  label: s,
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import u from "clsx";
+import { QuestionOutlineIcon as N } from "./QuestionOutlineIcon.js";
+import { CloseIcon as y } from "./CloseIcon.js";
+import { InfoIcon as I } from "./InfoIcon.js";
+const $ = ({
+  label: m,
   id: l,
-  name: o,
-  type: i = "text",
-  placeholder: c,
-  required: t = !1,
-  tooltip: a,
-  onInputChange: d,
-  containerClassName: m = "",
-  error: n = !1,
-  errorMessage: u,
-  ...x
-}) => /* @__PURE__ */ e("div", { className: `flex flex-col gap-2 ${m}`, children: [
-  /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ e("label", { htmlFor: l, className: "font-bold text-neutral-800", children: [
-      s,
-      " ",
-      t && /* @__PURE__ */ r("span", { className: "text-neutral-800", children: "*" })
+  name: d,
+  type: f = "text",
+  placeholder: h,
+  required: i = !1,
+  tooltip: o,
+  onInputChange: x,
+  containerClassName: g = "",
+  error: s = !1,
+  errorMessage: b,
+  ...v
+}) => {
+  const [n, c] = p(!1), [w, r] = p(!1);
+  return /* @__PURE__ */ t("div", { className: `flex flex-col gap-2 ${g}`, children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ t("label", { htmlFor: l, className: "font-bold text-neutral-800", children: [
+        m,
+        " ",
+        i && /* @__PURE__ */ e("span", { className: "text-neutral-800", children: "*" })
+      ] }),
+      o && /* @__PURE__ */ t(
+        "span",
+        {
+          className: "group relative inline-flex",
+          onMouseLeave: () => {
+            r(!1);
+          },
+          children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                className: "cursor-pointer rounded-full p-0",
+                "aria-expanded": n,
+                onClick: () => {
+                  r(!1), c((a) => !a);
+                },
+                children: /* @__PURE__ */ e(N, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: u(
+                  "invisible absolute top-6 -left-21 z-10 w-max max-w-60 rounded bg-neutral-800 p-2 transition-opacity lg:max-w-80 xl:-left-15 xl:max-w-112",
+                  "opacity-0",
+                  !w && "group-focus-within:visible group-focus-within:opacity-100 group-hover:visible group-hover:opacity-100",
+                  n && "visible opacity-100"
+                ),
+                role: "tooltip",
+                children: [
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "absolute -top-1 right-[calc(100%-5.75rem)] h-2 w-2 translate-x-1/2 rotate-45 bg-neutral-800 xl:right-[calc(100%-4.25rem)]",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { className: "text-extra-small inline-flex items-center gap-2 px-1 py-2 leading-none font-bold text-white", children: [
+                    /* @__PURE__ */ e("span", { children: o }),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        className: "cursor-pointer p-0",
+                        onClick: () => {
+                          r(!0), c(!1);
+                        },
+                        children: /* @__PURE__ */ e(y, { width: 20, height: 20, fill: "white" })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
     ] }),
-    a && /* @__PURE__ */ r(
-      "span",
+    /* @__PURE__ */ e(
+      "input",
       {
-        className: "text-extra-small inline-flex h-5 w-5 items-center justify-center rounded-full border border-neutral-200 text-neutral-400",
-        title: a,
-        "aria-hidden": "true",
-        children: "?"
+        id: l,
+        name: d,
+        type: f,
+        placeholder: h,
+        required: i,
+        className: u(
+          "text-small focus-visible:outline-primary-500 w-full rounded border p-3 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
+          s ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
+        ),
+        onChange: (a) => {
+          x?.(a.target.value);
+        },
+        ...v
       }
-    )
-  ] }),
-  /* @__PURE__ */ r(
-    "input",
-    {
-      id: l,
-      name: o,
-      type: i,
-      placeholder: c,
-      required: t,
-      className: p(
-        "text-small focus-visible:outline-primary-500 w-full rounded border p-3 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
-        n ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
-      ),
-      onChange: (f) => {
-        d?.(f.target.value);
-      },
-      ...x
-    }
-  ),
-  n && /* @__PURE__ */ e("p", { id: `${l}-error-message`, className: "text-small text-error-500 flex items-center gap-1", children: [
-    /* @__PURE__ */ r(h, { width: 20, height: 20, fill: "var(--color-error-500)", "aria-hidden": "true" }),
-    " ",
-    u
-  ] })
-] });
+    ),
+    s && /* @__PURE__ */ t("p", { id: `${l}-error-message`, className: "text-small text-error-500 flex items-center gap-1", children: [
+      /* @__PURE__ */ e(I, { width: 20, height: 20, fill: "var(--color-error-500)", "aria-hidden": "true" }),
+      " ",
+      b
+    ] })
+  ] });
+};
 export {
-  v as Input
+  $ as Input
 };

package/dist/components/Jumbotron2.d.ts

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

package/dist/components/Jumbotron2.js

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

package/dist/components/QuestionOutlineIcon.d.ts

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

package/dist/components/QuestionOutlineIcon.js

@@ -0,0 +1,15 @@
+import { jsx as C } from "react/jsx-runtime";
+import "react";
+const n = ({
+  fill: o = "var(--color-primary-900)",
+  ...t
+}) => /* @__PURE__ */ C("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ C(
+  "path",
+  {
+    d: "M7.96665 12C8.19998 12 8.3972 11.9195 8.55831 11.7584C8.71942 11.5973 8.79998 11.4 8.79998 11.1667C8.79998 10.9334 8.71942 10.7362 8.55831 10.575C8.3972 10.4139 8.19998 10.3334 7.96665 10.3334C7.73331 10.3334 7.53609 10.4139 7.37498 10.575C7.21387 10.7362 7.13331 10.9334 7.13331 11.1667C7.13331 11.4 7.21387 11.5973 7.37498 11.7584C7.53609 11.9195 7.73331 12 7.96665 12ZM7.99998 14.6667C7.07776 14.6667 6.21109 14.4917 5.39998 14.1417C4.58887 13.7917 3.88331 13.3167 3.28331 12.7167C2.68331 12.1167 2.20831 11.4112 1.85831 10.6C1.50831 9.78893 1.33331 8.92226 1.33331 8.00004C1.33331 7.07782 1.50831 6.21115 1.85831 5.40004C2.20831 4.58893 2.68331 3.88337 3.28331 3.28337C3.88331 2.68337 4.58887 2.20837 5.39998 1.85837C6.21109 1.50837 7.07776 1.33337 7.99998 1.33337C8.9222 1.33337 9.78887 1.50837 10.6 1.85837C11.4111 2.20837 12.1166 2.68337 12.7166 3.28337C13.3166 3.88337 13.7916 4.58893 14.1416 5.40004C14.4916 6.21115 14.6666 7.07782 14.6666 8.00004C14.6666 8.92226 14.4916 9.78893 14.1416 10.6C13.7916 11.4112 13.3166 12.1167 12.7166 12.7167C12.1166 13.3167 11.4111 13.7917 10.6 14.1417C9.78887 14.4917 8.9222 14.6667 7.99998 14.6667ZM7.99998 13.3334C9.48887 13.3334 10.75 12.8167 11.7833 11.7834C12.8166 10.75 13.3333 9.48893 13.3333 8.00004C13.3333 6.51115 12.8166 5.25004 11.7833 4.21671C10.75 3.18337 9.48887 2.66671 7.99998 2.66671C6.51109 2.66671 5.24998 3.18337 4.21665 4.21671C3.18331 5.25004 2.66665 6.51115 2.66665 8.00004C2.66665 9.48893 3.18331 10.75 4.21665 11.7834C5.24998 12.8167 6.51109 13.3334 7.99998 13.3334ZM8.06665 5.13337C8.34442 5.13337 8.58609 5.22226 8.79165 5.40004C8.9972 5.57782 9.09998 5.80004 9.09998 6.06671C9.09998 6.31115 9.02498 6.52782 8.87498 6.71671C8.72498 6.9056 8.55553 7.08337 8.36665 7.25004C8.11109 7.47226 7.88609 7.71671 7.69165 7.98337C7.4972 8.25004 7.39998 8.55004 7.39998 8.88337C7.39998 9.03893 7.45831 9.16949 7.57498 9.27504C7.69165 9.3806 7.82776 9.43337 7.98331 9.43337C8.14998 9.43337 8.29165 9.37782 8.40831 9.26671C8.52498 9.1556 8.59998 9.01671 8.63331 8.85004C8.67776 8.61671 8.77776 8.40837 8.93331 8.22504C9.08887 8.04171 9.25554 7.86671 9.43331 7.70004C9.68887 7.4556 9.90831 7.18893 10.0916 6.90004C10.275 6.61115 10.3666 6.28893 10.3666 5.93337C10.3666 5.36671 10.1361 4.90282 9.67498 4.54171C9.21387 4.1806 8.67776 4.00004 8.06665 4.00004C7.64442 4.00004 7.24165 4.08893 6.85831 4.26671C6.47498 4.44448 6.18331 4.71671 5.98331 5.08337C5.90553 5.21671 5.88054 5.35837 5.90831 5.50837C5.93609 5.65837 6.01109 5.77226 6.13331 5.85004C6.28887 5.93893 6.44998 5.96671 6.61665 5.93337C6.78331 5.90004 6.9222 5.8056 7.03331 5.65004C7.15554 5.48337 7.30831 5.3556 7.49165 5.26671C7.67498 5.17782 7.86665 5.13337 8.06665 5.13337Z",
+    fill: o
+  }
+) });
+export {
+  n as QuestionOutlineIcon
+};