@npm_leadtech/legal-contracts-ui 0.101.1 → 0.101.2

package/dist/components/Checkbox.d.ts

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

package/dist/components/Checkbox.js

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

package/dist/components/ContactFormSection.d.ts

@@ -33,6 +33,7 @@ export declare interface ContactFormFieldProps {
     placeholder?: string;
     required?: boolean;
     tooltip?: string;
+    error?: boolean;
     errorMessage?: string;
 }
 

package/dist/components/ContactFormSection.js

@@ -1,66 +1,66 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Textarea as N } from "./Textarea.js";
-import { Checkbox as f } from "./Checkbox.js";
-import { Input as p } from "./Input.js";
-import { Select as M } from "./Select.js";
+import { 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 { 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 b } from "./Button.js";
-const _ = ({
-  title: m,
-  subjectOptions: x,
-  fullNameField: n,
-  emailField: o,
-  referenceNumberField: a,
-  subjectField: t,
-  messageField: s,
-  privacyField: l,
-  requiredFieldsText: g,
-  securityHint: u,
-  status: c = "default",
-  successFeedback: d,
-  errorFeedback: i,
-  onSubmit: v,
-  button: h
-}) => c === "success" ? /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
-  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
+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" })
   ] }),
-  /* @__PURE__ */ r(
+  /* @__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: [
-        d?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: d.title }),
-        /* @__PURE__ */ e("p", { children: d?.message }),
-        d?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: d.cta })
+        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 })
       ]
     }
   )
-] }) : c === "error" ? /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
-  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
+] }) : 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__ */ r(
+  /* @__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: [
-        i?.title && /* @__PURE__ */ e("p", { className: "text-medium mb-1 font-bold", children: i.title }),
-        /* @__PURE__ */ e("p", { children: i?.message }),
-        i?.cta != null && /* @__PURE__ */ e("div", { className: "mt-2", children: i.cta })
+        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 })
       ]
     }
   )
-] }) : c === "loading" ? /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
-  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
+] }) : 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(
@@ -72,108 +72,43 @@ const _ = ({
       children: /* @__PURE__ */ e("div", { className: "border-primary-500 h-[25px] w-[25px] animate-spin rounded-full border-3 border-t-transparent" })
     }
   )
-] }) : /* @__PURE__ */ r("section", { className: "rounded-sm bg-white p-8 shadow-sm", children: [
-  /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ e("p", { className: "text-big font-bold text-neutral-600", children: m }),
+] }) : /* @__PURE__ */ 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__ */ r("form", { className: "mt-6 flex flex-col gap-6", noValidate: !0, onSubmit: v, children: [
-    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(p, { ...n, type: "text", error: !!n.errorMessage }),
-      n.errorMessage && /* @__PURE__ */ e("p", { id: `${n.id}-error-message`, className: "text-small text-red-700", children: n.errorMessage })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(p, { ...o, type: "email", error: !!o.errorMessage }),
-      o.errorMessage && /* @__PURE__ */ e("p", { id: `${o.id}-error-message`, className: "text-small text-red-700", children: o.errorMessage })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(
-        p,
-        {
-          label: a.label,
-          id: a.id,
-          name: a.name,
-          type: "text",
-          placeholder: a.placeholder,
-          tooltip: a.tooltip,
-          required: a.required,
-          value: a.value,
-          onChange: a.onChange,
-          error: !!a.errorMessage
-        }
-      ),
-      a.errorMessage && /* @__PURE__ */ e("p", { id: `${a.id}-error-message`, className: "text-small text-red-700", children: a.errorMessage })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(
-        M,
-        {
-          label: t.label,
-          id: t.id,
-          name: t.name,
-          placeholder: t.placeholder,
-          options: x,
-          required: t.required,
-          value: t.value,
-          onChange: t.onChange,
-          error: !!t.errorMessage
-        }
-      ),
-      t.errorMessage && /* @__PURE__ */ e("p", { id: `${t.id}-error-message`, className: "text-small text-red-700", children: t.errorMessage })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(
-        N,
-        {
-          label: s.label,
-          id: s.id,
-          name: s.name,
-          placeholder: s.placeholder,
-          required: s.required,
-          value: s.value,
-          onChange: s.onChange,
-          error: !!s.errorMessage
-        }
-      ),
-      s.errorMessage && /* @__PURE__ */ e("p", { id: `${s.id}-error-message`, className: "text-small text-red-700", children: s.errorMessage })
-    ] }),
-    /* @__PURE__ */ e("p", { className: "text-medium text-neutral-600", children: g }),
-    /* @__PURE__ */ e("div", { className: "", children: /* @__PURE__ */ e(
-      f,
-      {
-        id: l.id,
-        name: l.name,
-        required: l.required,
-        checked: l.checked,
-        onChange: l.onChange,
-        error: !!l.errorMessage,
-        children: /* @__PURE__ */ e(w, { className: "text-medium [&_p:last-child]:mb-0", content: l.label })
-      }
-    ) }),
-    /* @__PURE__ */ r(
+  /* @__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 }) }),
+    /* @__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: u })
+          /* @__PURE__ */ e("p", { children: f })
         ]
       }
     ),
     /* @__PURE__ */ e(
-      b,
+      j,
       {
-        ...h,
+        ...i,
         variant: "primary-green",
         className: "w-fit self-center",
-        type: h.type ?? "submit",
-        disabled: h.disabled,
-        children: h.children
+        type: i.type ?? "submit",
+        disabled: i.disabled,
+        children: i.children
       }
     )
   ] })
 ] });
 export {
-  _ as ContactFormSection
+  q as ContactFormSection
 };

package/dist/components/ContactUsTemplate.d.ts

@@ -33,6 +33,7 @@ export interface ContactFormFieldProps {
     placeholder?: string;
     required?: boolean;
     tooltip?: string;
+    error?: boolean;
     errorMessage?: string;
 }
 

package/dist/components/Input.d.ts

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

package/dist/components/Input.js

@@ -1,25 +1,27 @@
-import { jsxs as e, jsx as l } from "react/jsx-runtime";
-import f from "clsx";
-const h = ({
-  label: n,
-  id: r,
-  name: s,
-  type: o = "text",
-  placeholder: i,
+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,
+  id: l,
+  name: o,
+  type: i = "text",
+  placeholder: c,
   required: t = !1,
   tooltip: a,
-  onInputChange: u,
-  containerClassName: c = "",
-  error: d = !1,
+  onInputChange: d,
+  containerClassName: m = "",
+  error: n = !1,
+  errorMessage: u,
   ...x
-}) => /* @__PURE__ */ e("div", { className: `flex flex-col gap-2 ${c}`, children: [
+}) => /* @__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: r, className: "font-bold text-neutral-800", children: [
-      n,
+    /* @__PURE__ */ e("label", { htmlFor: l, className: "font-bold text-neutral-800", children: [
+      s,
       " ",
-      t && /* @__PURE__ */ l("span", { className: "text-neutral-800", children: "*" })
+      t && /* @__PURE__ */ r("span", { className: "text-neutral-800", children: "*" })
     ] }),
-    a && /* @__PURE__ */ l(
+    a && /* @__PURE__ */ r(
       "span",
       {
         className: "text-extra-small inline-flex h-5 w-5 items-center justify-center rounded-full border border-neutral-200 text-neutral-400",
@@ -29,25 +31,30 @@ const h = ({
       }
     )
   ] }),
-  /* @__PURE__ */ l(
+  /* @__PURE__ */ r(
     "input",
     {
-      id: r,
-      name: s,
-      type: o,
-      placeholder: i,
+      id: l,
+      name: o,
+      type: i,
+      placeholder: c,
       required: t,
-      className: f(
+      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",
-        d ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
+        n ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
       ),
-      onChange: (m) => {
-        u?.(m.target.value);
+      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
+  ] })
 ] });
 export {
-  h as Input
+  v as Input
 };

package/dist/components/Select.d.ts

@@ -14,5 +14,6 @@ export declare interface SelectProps extends React.SelectHTMLAttributes<HTMLSele
     }[];
     containerClassName?: string;
     error?: boolean;
+    errorMessage?: string;
 }
 

package/dist/components/Select.js

@@ -1,43 +1,50 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { ChevronDownIcon as m } from "./ChevronDownIcon.js";
 import p from "clsx";
-const b = ({
-  label: t,
-  id: a,
+import { ChevronDownIcon as f } from "./ChevronDownIcon.js";
+import { InfoIcon as h } from "./InfoIcon.js";
+const N = ({
+  label: a,
+  id: l,
   name: s,
-  required: o = !1,
+  required: i = !1,
   placeholder: n,
-  options: i,
-  containerClassName: c = "",
-  error: u = !1,
-  ...d
-}) => /* @__PURE__ */ r("div", { className: `flex flex-col gap-2 ${c}`, children: [
-  t && /* @__PURE__ */ r("label", { htmlFor: a, className: "text-medium font-bold text-neutral-800", children: [
-    t,
+  options: c,
+  containerClassName: m = "",
+  error: o = !1,
+  errorMessage: d,
+  ...u
+}) => /* @__PURE__ */ r("div", { className: `flex flex-col gap-2 ${m}`, children: [
+  a && /* @__PURE__ */ r("label", { htmlFor: l, className: "text-medium font-bold text-neutral-800", children: [
+    a,
     " ",
-    o && /* @__PURE__ */ e("span", { className: "text-neutral-800", children: "*" })
+    i && /* @__PURE__ */ e("span", { className: "text-neutral-800", children: "*" })
   ] }),
   /* @__PURE__ */ r("div", { className: "relative", children: [
     /* @__PURE__ */ r(
       "select",
       {
-        id: a,
+        id: l,
         name: s,
         required: !0,
         className: p(
           "text-small focus-visible:outline-primary-500 w-full appearance-none rounded border py-2 pr-10 pl-4 text-neutral-800 placeholder:text-neutral-600 focus-visible:outline-2",
-          u ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
+          o ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
         ),
-        ...d,
+        ...u,
         children: [
           n && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: n }),
-          i.map((l) => /* @__PURE__ */ e("option", { value: l.value, children: l.label }, l.value))
+          c.map((t) => /* @__PURE__ */ e("option", { value: t.value, children: t.label }, t.value))
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ e(m, {}) })
+    /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ e(f, {}) })
+  ] }),
+  o && /* @__PURE__ */ r("p", { id: `${l}-error-message`, className: "text-small text-error-500 flex items-center gap-1", children: [
+    /* @__PURE__ */ e(h, { width: 20, height: 20, fill: "var(--color-error-500)", "aria-hidden": "true" }),
+    " ",
+    d
   ] })
 ] });
 export {
-  b as Select
+  N as Select
 };

package/dist/components/Textarea.d.ts

@@ -9,5 +9,6 @@ export declare interface TextareaProps extends React.TextareaHTMLAttributes<HTML
     required?: boolean;
     placeholder?: string;
     error?: boolean;
+    errorMessage?: string;
 }
 

package/dist/components/Textarea.js

@@ -1,34 +1,41 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import m from "clsx";
-const u = ({
-  label: a,
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import { InfoIcon as c } from "./InfoIcon.js";
+import x from "clsx";
+const h = ({
+  label: o,
   id: e,
-  name: o,
-  required: r = !1,
-  placeholder: s,
-  error: n = !1,
-  ...i
-}) => /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
-  /* @__PURE__ */ l("label", { htmlFor: e, className: "text-medium font-bold text-neutral-800", children: [
-    a,
+  name: s,
+  required: t = !1,
+  placeholder: n,
+  error: a = !1,
+  errorMessage: i,
+  ...m
+}) => /* @__PURE__ */ r("div", { className: "flex flex-col gap-2", children: [
+  /* @__PURE__ */ r("label", { htmlFor: e, className: "text-medium font-bold text-neutral-800", children: [
+    o,
     " ",
-    r && /* @__PURE__ */ t("span", { className: "text-neutral-800", children: "*" })
+    t && /* @__PURE__ */ l("span", { className: "text-neutral-800", children: "*" })
   ] }),
-  /* @__PURE__ */ t(
+  /* @__PURE__ */ l(
     "textarea",
     {
       id: e,
-      name: o,
-      required: r,
-      placeholder: s,
-      className: m(
+      name: s,
+      required: t,
+      placeholder: n,
+      className: x(
         "text-small focus-visible:outline-primary-500 min-h-32 w-full resize-none 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"
+        a ? "border-error-500 bg-error-25" : "bg-neutral-25 border-neutral-400"
       ),
-      ...i
+      ...m
     }
-  )
+  ),
+  a && /* @__PURE__ */ r("p", { id: `${e}-error-message`, className: "text-small text-error-500 flex items-center gap-1", children: [
+    /* @__PURE__ */ l(c, { width: 20, height: 20, fill: "var(--color-error-500)", "aria-hidden": "true" }),
+    " ",
+    i
+  ] })
 ] });
 export {
-  u as Textarea
+  h as Textarea
 };

package/dist/components/Toast.js

@@ -2,9 +2,9 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import f from "clsx";
 import { useState as h } from "react";
-import { InfoIcon as l } from "./InfoIcon.js";
 import { DoneCircleIcon as g } from "./DoneCircleIcon.js";
 import { CloseIcon as p } from "./CloseIcon.js";
+import { InfoIcon as l } from "./InfoIcon.js";
 const u = {
   success: {
     icon: /* @__PURE__ */ e(g, { fill: "white", width: 24, height: 24 }),

package/dist/components/index.d.ts

@@ -127,6 +127,7 @@ export declare interface CheckboxProps extends React.InputHTMLAttributes<HTMLInp
     required?: boolean;
     children: ReactNode;
     error?: boolean;
+    errorMessage?: string;
 }
 
 export declare const ChevronDownIcon: ({ fill, ...props }: React_2.SVGProps<SVGSVGElement>) => JSX.Element;
@@ -165,6 +166,7 @@ export declare interface ContactFormFieldProps {
     placeholder?: string;
     required?: boolean;
     tooltip?: string;
+    error?: boolean;
     errorMessage?: string;
 }
 
@@ -609,6 +611,7 @@ export declare interface InputProps extends React.InputHTMLAttributes<HTMLInputE
     onInputChange?: (str: string) => void;
     containerClassName?: string;
     error?: boolean;
+    errorMessage?: string;
 }
 
 export declare const InstagramIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
@@ -1086,6 +1089,7 @@ export declare interface SelectProps extends React.SelectHTMLAttributes<HTMLSele
     }[];
     containerClassName?: string;
     error?: boolean;
+    errorMessage?: string;
 }
 
 export declare const SinglePhoneIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
@@ -1139,6 +1143,7 @@ export declare interface TextareaProps extends React.TextareaHTMLAttributes<HTML
     required?: boolean;
     placeholder?: string;
     error?: boolean;
+    errorMessage?: string;
 }
 
 export declare const TikTokIcon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;