@intlayer/design-system 8.4.4 → 8.4.6

package/dist/esm/components/Form/FormBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  type UseFormProps,\n  useForm as useFormReactHookForm,\n  useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    return await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n  return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: z.infer<T>) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.issues.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n        noValidate\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodObject>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema as any),\n    ...props,\n  });\n\n  const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n    control: form.control,\n  });\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"mappings":"iOAuBA,MAAM,EAAgB,KAAO,IAGvB,GAAM,OAAO,EAAG,MAAS,WAEpB,MAAM,EAGR,EAGI,GAA6B,CACxC,SACA,SAAU,EACV,gBAAiB,EACjB,cAAe,EACf,YACA,WACA,eACA,GAAG,KACe,CAClB,IAAM,EAAW,KAAO,IAAuB,CAC7C,IAAM,EAAe,GAAQ,UAAU,EAAO,EAAI,CAChD,QAAS,GACT,KAAM,IAAA,GACP,CAGD,MAAM,EAAc,IAAe,EAAO,CAAC,CAEvC,EAAa,QACf,MAAM,EAAc,IAAsB,EAAa,KAAM,CAAC,CAE9D,MAAM,EACJ,IACM,MACF,EAAa,MAAM,OAAO,IAAK,GAAU,EAAM,QAAQ,CAAC,KAAK,KAAK,CACnE,CACF,CACF,EAIL,OACE,EAAC,EAAD,CAAc,GAAI,WAChB,EAAC,OAAD,CACE,UAAW,EAAG,wBAAyB,EAAU,CACjD,SAAU,EAAM,aAAa,EAAS,CACtC,aAAc,EAAe,KAAO,MACpC,WAAA,GAEC,WACI,CAAA,CACM,CAAA,EAIN,GACX,EACA,IACG,CACH,IAAM,EAAOA,EAAiC,CAC5C,SAAU,EAAY,EAAc,CACpC,GAAG,EACJ,CAAC,CAEI,CAAE,eAAc,cAAa,YAAW,WAAY,EAAa,CACrE,QAAS,EAAK,QACf,CAAC,CAEF,MAAO,CACL,OACA,eACA,cACA,YACA,UACD"}
+{"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  type UseFormProps,\n  useForm as useFormReactHookForm,\n  useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    return await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n  return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: z.infer<T>) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.issues.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n        noValidate\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodObject>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema as any),\n    ...props,\n  });\n\n  const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n    control: form.control,\n  });\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"mappings":";;;;;;;;AAuBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,KAAI,MAAM,OAAO,GAAG,SAAS,WAE3B,QAAO,MAAM;AAGf,QAAO;;AAGT,MAAa,QAA6B,EACxC,QACA,UAAU,cACV,iBAAiB,qBACjB,eAAe,mBACf,WACA,UACA,cACA,GAAG,YACe;CAClB,MAAM,WAAW,OAAO,WAAuB;EAC7C,MAAM,eAAe,QAAQ,UAAU,OAAO,IAAI;GAChD,SAAS;GACT,MAAM;GACP;AAGD,QAAM,cAAc,eAAe,OAAO,CAAC;AAE3C,MAAI,aAAa,QACf,OAAM,cAAc,sBAAsB,aAAa,KAAM,CAAC;MAE9D,OAAM,cACJ,oBACE,IAAI,MACF,aAAa,MAAM,OAAO,KAAK,UAAU,MAAM,QAAQ,CAAC,KAAK,KAAK,CACnE,CACF,CACF;;AAIL,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,QAAD;GACE,WAAW,GAAG,yBAAyB,UAAU;GACjD,UAAU,MAAM,aAAa,SAAS;GACtC,cAAc,eAAe,OAAO;GACpC;GAEC;GACI;EACM;;AAInB,MAAa,WACX,QACA,UACG;CACH,MAAM,OAAOA,UAAiC;EAC5C,UAAU,YAAY,OAAc;EACpC,GAAG;EACJ,CAAC;CAEF,MAAM,EAAE,cAAc,aAAa,WAAW,YAAY,aAAa,EACrE,SAAS,KAAK,SACf,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}

package/dist/esm/components/Form/FormControl.mjs

@@ -1,2 +1,20 @@
-"use client";import{useFormField as e}from"./FormField.mjs";import{jsx as t}from"react/jsx-runtime";import{Slot as n}from"@radix-ui/react-slot";const r=r=>{let{error:i,formItemId:a,formDescriptionId:o,formMessageId:s}=e();return t(n,{id:a,"aria-describedby":i?`${o} ${s}`:`${o}`,"aria-invalid":!!i,...r})};export{r as FormControl};
+'use client';
+
+import { useFormField } from "./FormField.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/Form/FormControl.tsx
+const FormControl = (props) => {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return /* @__PURE__ */ jsx(Slot, {
+		id: formItemId,
+		"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+		"aria-invalid": !!error,
+		...props
+	});
+};
+
+//#endregion
+export { FormControl };
 //# sourceMappingURL=FormControl.mjs.map

package/dist/esm/components/Form/FormControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.mjs","names":[],"sources":["../../../../src/components/Form/FormControl.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps, FC } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormControl: FC<ComponentProps<typeof Slot>> = (props) => {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n};\n"],"mappings":"gJAMA,MAAa,EAAgD,GAAU,CACrE,GAAM,CAAE,QAAO,aAAY,oBAAmB,iBAC5C,GAAc,CAEhB,OACE,EAAC,EAAD,CACE,GAAI,EACJ,mBACG,EAEG,GAAG,EAAkB,GAAG,IADxB,GAAG,IAGT,eAAc,CAAC,CAAC,EAChB,GAAI,EACJ,CAAA"}
+{"version":3,"file":"FormControl.mjs","names":[],"sources":["../../../../src/components/Form/FormControl.tsx"],"sourcesContent":["'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps, FC } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormControl: FC<ComponentProps<typeof Slot>> = (props) => {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAMA,MAAa,eAAgD,UAAU;CACrE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAC5C,cAAc;AAEhB,QACE,oBAAC,MAAD;EACE,IAAI;EACJ,oBACE,CAAC,QACG,GAAG,sBACH,GAAG,kBAAkB,GAAG;EAE9B,gBAAc,CAAC,CAAC;EAChB,GAAI;EACJ"}

package/dist/esm/components/Form/FormDescription.mjs

@@ -1,2 +1,18 @@
-"use client";import{useFormField as e}from"./FormField.mjs";import{jsx as t}from"react/jsx-runtime";const n=n=>{let{formDescriptionId:r}=e();return t(`p`,{className:`text-neutral text-sm`,id:r,...n})};export{n as FormDescription};
+'use client';
+
+import { useFormField } from "./FormField.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormDescription.tsx
+const FormDescription = (props) => {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx("p", {
+		className: "text-neutral text-sm",
+		id: formDescriptionId,
+		...props
+	});
+};
+
+//#endregion
+export { FormDescription };
 //# sourceMappingURL=FormDescription.mjs.map

package/dist/esm/components/Form/FormDescription.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormDescription.mjs","names":[],"sources":["../../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n  props\n) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p className=\"text-neutral text-sm\" id={formDescriptionId} {...props} />\n  );\n};\n"],"mappings":"oGAKA,MAAa,EACX,GACG,CACH,GAAM,CAAE,qBAAsB,GAAc,CAE5C,OACE,EAAC,IAAD,CAAG,UAAU,uBAAuB,GAAI,EAAmB,GAAI,EAAS,CAAA"}
+{"version":3,"file":"FormDescription.mjs","names":[],"sources":["../../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n  props\n) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p className=\"text-neutral text-sm\" id={formDescriptionId} {...props} />\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAa,mBACX,UACG;CACH,MAAM,EAAE,sBAAsB,cAAc;AAE5C,QACE,oBAAC,KAAD;EAAG,WAAU;EAAuB,IAAI;EAAmB,GAAI;EAAS"}

package/dist/esm/components/Form/FormField.mjs

@@ -1,2 +1,35 @@
-"use client";import{FormItemContext as e}from"./FormItem.mjs";import{createContext as t,useContext as n,useMemo as r}from"react";import{jsx as i}from"react/jsx-runtime";import{Controller as a,useFormContext as o}from"react-hook-form";const s=t({}),c=({...e})=>i(s,{value:r(()=>({name:e.name}),[e.name]),children:i(a,{...e})}),l=()=>{let t=n(s),r=n(e),{getFieldState:i,formState:a}=o(),c=i(t.name,a);if(!t)throw Error(`useFormField should be used within <FormField>`);let{id:l}=r;return{id:l,name:t.name,formItemId:`${l}-form-item`,formDescriptionId:`${l}-form-item-description`,formMessageId:`${l}-form-item-message`,...c}};export{c as FormField,l as useFormField};
+'use client';
+
+import { FormItemContext } from "./FormItem.mjs";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Controller, useFormContext } from "react-hook-form";
+
+//#region src/components/Form/FormField.tsx
+const FormFieldContext = createContext({});
+const FormField = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(FormFieldContext, {
+		value: useMemo(() => ({ name: props.name }), [props.name]),
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+};
+const useFormField = () => {
+	const fieldContext = useContext(FormFieldContext);
+	const itemContext = useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+	const fieldState = getFieldState(fieldContext.name, formState);
+	if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+};
+
+//#endregion
+export { FormField, useFormField };
 //# sourceMappingURL=FormField.mjs.map

package/dist/esm/components/Form/FormField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/components/Form/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useMemo } from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  useFormContext,\n} from 'react-hook-form';\nimport { FormItemContext } from './FormItem';\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n);\n\nexport const FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const memoValue = useMemo(\n    () => ({\n      name: props.name,\n    }),\n    [props.name]\n  );\n\n  return (\n    <FormFieldContext value={memoValue}>\n      <Controller {...props} />\n    </FormFieldContext>\n  );\n};\n\nexport const useFormField = () => {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n"],"mappings":"0OAmBA,MAAM,EAAmB,EACvB,EAAE,CACH,CAEY,GAGX,CACA,GAAG,KAUD,EAAC,EAAD,CAAkB,MARF,OACT,CACL,KAAM,EAAM,KACb,EACD,CAAC,EAAM,KAAK,CACb,UAIG,EAAC,EAAD,CAAY,GAAI,EAAS,CAAA,CACR,CAAA,CAIV,MAAqB,CAChC,IAAM,EAAe,EAAW,EAAiB,CAC3C,EAAc,EAAW,EAAgB,CACzC,CAAE,gBAAe,aAAc,GAAgB,CAE/C,EAAa,EAAc,EAAa,KAAM,EAAU,CAE9D,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,CAGnE,GAAM,CAAE,MAAO,EAEf,MAAO,CACL,KACA,KAAM,EAAa,KACnB,WAAY,GAAG,EAAG,YAClB,kBAAmB,GAAG,EAAG,wBACzB,cAAe,GAAG,EAAG,oBACrB,GAAG,EACJ"}
+{"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/components/Form/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useMemo } from 'react';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  useFormContext,\n} from 'react-hook-form';\nimport { FormItemContext } from './FormItem';\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n);\n\nexport const FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  const memoValue = useMemo(\n    () => ({\n      name: props.name,\n    }),\n    [props.name]\n  );\n\n  return (\n    <FormFieldContext value={memoValue}>\n      <Controller {...props} />\n    </FormFieldContext>\n  );\n};\n\nexport const useFormField = () => {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n"],"mappings":";;;;;;;;AAmBA,MAAM,mBAAmB,cACvB,EAAE,CACH;AAED,MAAa,aAGX,EACA,GAAG,YACuC;AAQ1C,QACE,oBAAC,kBAAD;EAAkB,OARF,eACT,EACL,MAAM,MAAM,MACb,GACD,CAAC,MAAM,KAAK,CACb;YAIG,oBAAC,YAAD,EAAY,GAAI,OAAS;EACR;;AAIvB,MAAa,qBAAqB;CAChC,MAAM,eAAe,WAAW,iBAAiB;CACjD,MAAM,cAAc,WAAW,gBAAgB;CAC/C,MAAM,EAAE,eAAe,cAAc,gBAAgB;CAErD,MAAM,aAAa,cAAc,aAAa,MAAM,UAAU;AAE9D,KAAI,CAAC,aACH,OAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,EAAE,OAAO;AAEf,QAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;EACJ"}

package/dist/esm/components/Form/FormItem.mjs

@@ -1,2 +1,24 @@
-"use client";import{createContext as e,useId as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=({id:e,...r})=>{let a=t(),o=e??a;return n(i,{value:{id:o},children:n(`div`,{className:`flex flex-col gap-2 p-2`,id:o,suppressHydrationWarning:!0,...r})})},i=e({});export{r as FormItem,i as FormItemContext};
+'use client';
+
+import { createContext, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormItem.tsx
+const FormItem = ({ id: idProp, ...props }) => {
+	const generatedId = useId();
+	const stableId = idProp ?? generatedId;
+	return /* @__PURE__ */ jsx(FormItemContext, {
+		value: { id: stableId },
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2 p-2",
+			id: stableId,
+			suppressHydrationWarning: true,
+			...props
+		})
+	});
+};
+const FormItemContext = createContext({});
+
+//#endregion
+export { FormItem, FormItemContext };
 //# sourceMappingURL=FormItem.mjs.map

package/dist/esm/components/Form/FormItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.mjs","names":[],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type FC, type HTMLAttributes, useId } from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n  id: idProp,\n  ...props\n}) => {\n  const generatedId = useId();\n  const stableId = idProp ?? generatedId;\n\n  const memoValue = {\n    id: stableId,\n  };\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div\n        className=\"flex flex-col gap-2 p-2\"\n        id={stableId}\n        suppressHydrationWarning\n        {...props}\n      />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"mappings":"sGAIA,MAAa,GAAgD,CAC3D,GAAI,EACJ,GAAG,KACC,CACJ,IAAM,EAAc,GAAO,CACrB,EAAW,GAAU,EAM3B,OACE,EAAC,EAAD,CAAiB,MALD,CAChB,GAAI,EACL,UAIG,EAAC,MAAD,CACE,UAAU,0BACV,GAAI,EACJ,yBAAA,GACA,GAAI,EACJ,CAAA,CACc,CAAA,EAQT,EAAkB,EAC7B,EAAE,CACH"}
+{"version":3,"file":"FormItem.mjs","names":[],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type FC, type HTMLAttributes, useId } from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n  id: idProp,\n  ...props\n}) => {\n  const generatedId = useId();\n  const stableId = idProp ?? generatedId;\n\n  const memoValue = {\n    id: stableId,\n  };\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div\n        className=\"flex flex-col gap-2 p-2\"\n        id={stableId}\n        suppressHydrationWarning\n        {...props}\n      />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"mappings":";;;;;;AAIA,MAAa,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAM3B,QACE,oBAAC,iBAAD;EAAiB,OALD,EAChB,IAAI,UACL;YAIG,oBAAC,OAAD;GACE,WAAU;GACV,IAAI;GACJ;GACA,GAAI;GACJ;EACc;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}

package/dist/esm/components/Form/FormLabel.mjs

@@ -1,2 +1,20 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{Label as t}from"../Label/index.mjs";import{useFormField as n}from"./FormField.mjs";import{jsx as r}from"react/jsx-runtime";const i=({className:i,...a})=>{let{error:o,formItemId:s}=n();return r(t,{className:e(`mb-2`,o&&`text-error`,i),htmlFor:s,...a})};export{i as FormLabel};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { Label } from "../Label/index.mjs";
+import { useFormField } from "./FormField.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormLabel.tsx
+const FormLabel = ({ className, ...props }) => {
+	const { error, formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(Label, {
+		className: cn("mb-2", error && "text-error", className),
+		htmlFor: formItemId,
+		...props
+	});
+};
+
+//#endregion
+export { FormLabel };
 //# sourceMappingURL=FormLabel.mjs.map

package/dist/esm/components/Form/FormLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.mjs","names":[],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, FC } from 'react';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn('mb-2', error && 'text-error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"mappings":"uLAOA,MAAa,GAA+C,CAC1D,YACA,GAAG,KACC,CACJ,GAAM,CAAE,QAAO,cAAe,GAAc,CAE5C,OACE,EAAC,EAAD,CACE,UAAW,EAAG,OAAQ,GAAS,aAAc,EAAU,CACvD,QAAS,EACT,GAAI,EACJ,CAAA"}
+{"version":3,"file":"FormLabel.mjs","names":[],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, FC } from 'react';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn('mb-2', error && 'text-error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAa,aAA+C,EAC1D,WACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,eAAe,cAAc;AAE5C,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,QAAQ,SAAS,cAAc,UAAU;EACvD,SAAS;EACT,GAAI;EACJ"}

package/dist/esm/components/Form/FormMessage.mjs

@@ -1,2 +1,22 @@
-"use client";import{useFormField as e}from"./FormField.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,...r})=>{let{error:i,formMessageId:a}=e(),o=i?String(i?.message??``):n;return o?t(`p`,{className:`font-medium text-error text-xs`,role:`alert`,id:a,...r,children:o}):null};export{n as FormMessage};
+'use client';
+
+import { useFormField } from "./FormField.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/FormMessage.tsx
+const FormMessage = ({ children, ...props }) => {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : children;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: "font-medium text-error text-xs",
+		role: "alert",
+		id: formMessageId,
+		...props,
+		children: body
+	});
+};
+
+//#endregion
+export { FormMessage };
 //# sourceMappingURL=FormMessage.mjs.map

package/dist/esm/components/Form/FormMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormMessage.mjs","names":[],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"font-medium text-error text-xs\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"mappings":"oGAKA,MAAa,GAAyD,CACpE,WACA,GAAG,KACC,CACJ,GAAM,CAAE,QAAO,iBAAkB,GAAc,CACzC,EAAO,EAAQ,OAAO,GAAO,SAAW,GAAG,CAAG,EAMpD,OAJK,EAKH,EAAC,IAAD,CACE,UAAU,iCACV,KAAK,QACL,GAAI,EACJ,GAAI,WAEH,EACC,CAAA,CAXG"}
+{"version":3,"file":"FormMessage.mjs","names":[],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"font-medium text-error text-xs\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAa,eAAyD,EACpE,UACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,kBAAkB,cAAc;CAC/C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,GAAG,GAAG;AAEpD,KAAI,CAAC,KACH,QAAO;AAGT,QACE,oBAAC,KAAD;EACE,WAAU;EACV,MAAK;EACL,IAAI;EACJ,GAAI;YAEH;EACC"}

package/dist/esm/components/Form/elements/AutoSizeTextAreaElement.mjs

@@ -1,2 +1,15 @@
-import{AutoSizedTextArea as e}from"../../TextArea/AutoSizeTextArea.mjs";import{FormElement as t}from"./FormElement.mjs";import{jsx as n}from"react/jsx-runtime";const r=r=>n(t,{Element:e,id:r.name,"data-testid":r.name,...r});export{r as AutoSizedTextAreaElement};
+import { AutoSizedTextArea } from "../../TextArea/AutoSizeTextArea.mjs";
+import { FormElement } from "./FormElement.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/AutoSizeTextAreaElement.tsx
+const AutoSizedTextAreaElement = (props) => /* @__PURE__ */ jsx(FormElement, {
+	Element: AutoSizedTextArea,
+	id: props.name,
+	"data-testid": props.name,
+	...props
+});
+
+//#endregion
+export { AutoSizedTextAreaElement };
 //# sourceMappingURL=AutoSizeTextAreaElement.mjs.map

package/dist/esm/components/Form/elements/AutoSizeTextAreaElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/AutoSizeTextAreaElement.tsx"],"sourcesContent":["import { AutoSizedTextArea } from '@components/TextArea/AutoSizeTextArea';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype AutoSizedTextAreaElementsProps = Omit<\n  FormElementProps<typeof AutoSizedTextArea>,\n  'Element'\n> &\n  ComponentProps<typeof AutoSizedTextArea> & {\n    name: string;\n  };\n\nexport const AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps> = (\n  props\n) => (\n  <FormElement\n    Element={AutoSizedTextArea}\n    id={props.name}\n    data-testid={props.name}\n    {...props}\n  />\n);\n"],"mappings":"gKAYA,MAAa,EACX,GAEA,EAAC,EAAD,CACE,QAAS,EACT,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,GAAI,EACJ,CAAA"}
+{"version":3,"file":"AutoSizeTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/AutoSizeTextAreaElement.tsx"],"sourcesContent":["import { AutoSizedTextArea } from '@components/TextArea/AutoSizeTextArea';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype AutoSizedTextAreaElementsProps = Omit<\n  FormElementProps<typeof AutoSizedTextArea>,\n  'Element'\n> &\n  ComponentProps<typeof AutoSizedTextArea> & {\n    name: string;\n  };\n\nexport const AutoSizedTextAreaElement: FC<AutoSizedTextAreaElementsProps> = (\n  props\n) => (\n  <FormElement\n    Element={AutoSizedTextArea}\n    id={props.name}\n    data-testid={props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAYA,MAAa,4BACX,UAEA,oBAAC,aAAD;CACE,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,GAAI;CACJ"}

package/dist/esm/components/Form/elements/CheckboxElement.mjs

@@ -1,2 +1,26 @@
-import{Checkbox as e}from"../../Input/Checkbox.mjs";import{FormElement as t}from"./FormElement.mjs";import{jsx as n}from"react/jsx-runtime";const r=({inputLabel:t,value:r,onChange:i,...a})=>n(e,{...a,label:t,checked:!!r,onChange:i}),i=({autoComplete:e,...i})=>n(t,{Element:r,id:i.name,"data-testid":i.name,autoComplete:e,...i});export{i as CheckboxElement};
+import { Checkbox } from "../../Input/Checkbox.mjs";
+import { FormElement } from "./FormElement.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/CheckboxElement.tsx
+/**
+* Wrapper component that converts FormElement's value/onChange pattern
+* to checkbox's checked/onChange pattern
+*/
+const CheckboxComponent = ({ inputLabel, value, onChange, ...props }) => /* @__PURE__ */ jsx(Checkbox, {
+	...props,
+	label: inputLabel,
+	checked: Boolean(value),
+	onChange
+});
+const CheckboxElement = ({ autoComplete, ...props }) => /* @__PURE__ */ jsx(FormElement, {
+	Element: CheckboxComponent,
+	id: props.name,
+	"data-testid": props.name,
+	autoComplete,
+	...props
+});
+
+//#endregion
+export { CheckboxElement };
 //# sourceMappingURL=CheckboxElement.mjs.map

package/dist/esm/components/Form/elements/CheckboxElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import { Checkbox } from '@components/Input';\nimport type { ChangeEvent, ComponentProps, FC, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n  ComponentProps<typeof Checkbox> & {\n    name: string;\n    inputLabel?: ReactNode;\n  };\n\ntype CheckboxComponentProps = Omit<\n  ComponentProps<typeof Checkbox>,\n  'label' | 'value' | 'onChange'\n> & {\n  name: string;\n  inputLabel?: ComponentProps<typeof Checkbox>['label'];\n  // FormElement passes value/onChange, but checkbox needs checked\n  value?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n};\n\n/**\n * Wrapper component that converts FormElement's value/onChange pattern\n * to checkbox's checked/onChange pattern\n */\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n  inputLabel,\n  value,\n  onChange,\n  ...props\n}) => (\n  <Checkbox\n    {...props}\n    label={inputLabel}\n    // Convert value (boolean) to checked prop\n    checked={Boolean(value)}\n    // Pass through onChange - it receives the event with target.checked\n    onChange={onChange}\n  />\n);\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={CheckboxComponent}\n    id={props.name}\n    data-testid={props.name}\n    autoComplete={autoComplete}\n    {...props}\n  />\n);\n"],"mappings":"4IAyBA,MAAM,GAAiD,CACrD,aACA,QACA,WACA,GAAG,KAEH,EAAC,EAAD,CACE,GAAI,EACJ,MAAO,EAEP,QAAS,EAAQ,EAEP,WACV,CAAA,CAGS,GAA6C,CACxD,eACA,GAAG,KAEH,EAAC,EAAD,CACE,QAAS,EACT,GAAI,EAAM,KACV,cAAa,EAAM,KACL,eACd,GAAI,EACJ,CAAA"}
+{"version":3,"file":"CheckboxElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/CheckboxElement.tsx"],"sourcesContent":["import { Checkbox } from '@components/Input';\nimport type { ChangeEvent, ComponentProps, FC, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype CheckboxElementProps = Omit<FormElementProps<typeof Checkbox>, 'Element'> &\n  ComponentProps<typeof Checkbox> & {\n    name: string;\n    inputLabel?: ReactNode;\n  };\n\ntype CheckboxComponentProps = Omit<\n  ComponentProps<typeof Checkbox>,\n  'label' | 'value' | 'onChange'\n> & {\n  name: string;\n  inputLabel?: ComponentProps<typeof Checkbox>['label'];\n  // FormElement passes value/onChange, but checkbox needs checked\n  value?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n};\n\n/**\n * Wrapper component that converts FormElement's value/onChange pattern\n * to checkbox's checked/onChange pattern\n */\nconst CheckboxComponent: FC<CheckboxComponentProps> = ({\n  inputLabel,\n  value,\n  onChange,\n  ...props\n}) => (\n  <Checkbox\n    {...props}\n    label={inputLabel}\n    // Convert value (boolean) to checked prop\n    checked={Boolean(value)}\n    // Pass through onChange - it receives the event with target.checked\n    onChange={onChange}\n  />\n);\n\nexport const CheckboxElement: FC<CheckboxElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={CheckboxComponent}\n    id={props.name}\n    data-testid={props.name}\n    autoComplete={autoComplete}\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;;;AAyBA,MAAM,qBAAiD,EACrD,YACA,OACA,UACA,GAAG,YAEH,oBAAC,UAAD;CACE,GAAI;CACJ,OAAO;CAEP,SAAS,QAAQ,MAAM;CAEb;CACV;AAGJ,MAAa,mBAA6C,EACxD,cACA,GAAG,YAEH,oBAAC,aAAD;CACE,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACL;CACd,GAAI;CACJ"}

package/dist/esm/components/Form/elements/EditableFieldInputElement.mjs

@@ -1,2 +1,17 @@
-import{EditableFieldInput as e}from"../../EditableField/EditableFieldInput.mjs";import{FormElement as t}from"./FormElement.mjs";import{jsx as n}from"react/jsx-runtime";const r=r=>n(t,{id:r.name,"data-testid":r.name,"aria-labelledby":r.label?`${r.name}-label`:void 0,"aria-label":r.label?void 0:r.name,Element:e,...r});export{r as EditableFieldInputElement};
+import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
+import { FormElement } from "./FormElement.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/EditableFieldInputElement.tsx
+const EditableFieldInputElement = (props) => /* @__PURE__ */ jsx(FormElement, {
+	id: props.name,
+	"data-testid": props.name,
+	"aria-labelledby": props.label ? `${props.name}-label` : void 0,
+	"aria-label": props.label ? void 0 : props.name,
+	Element: EditableFieldInput,
+	...props
+});
+
+//#endregion
+export { EditableFieldInputElement };
 //# sourceMappingURL=EditableFieldInputElement.mjs.map

package/dist/esm/components/Form/elements/EditableFieldInputElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"sourcesContent":["import { EditableFieldInput } from '@components/EditableField/EditableFieldInput';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n  FormElementProps<typeof EditableFieldInput>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof EditableFieldInput> & {\n      name: string;\n      description?: ReactNode;\n      placeholder?: string;\n      className?: string;\n      children?: ReactNode;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const EditableFieldInputElement = (\n  props: EditableFieldInputElementProps\n) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    Element={EditableFieldInput}\n    {...props}\n  />\n);\n"],"mappings":"wKAmBA,MAAa,EACX,GAEA,EAAC,EAAD,CACE,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,QAAS,EACT,GAAI,EACJ,CAAA"}
+{"version":3,"file":"EditableFieldInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"sourcesContent":["import { EditableFieldInput } from '@components/EditableField/EditableFieldInput';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldInputElementProps = Omit<\n  FormElementProps<typeof EditableFieldInput>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof EditableFieldInput> & {\n      name: string;\n      description?: ReactNode;\n      placeholder?: string;\n      className?: string;\n      children?: ReactNode;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const EditableFieldInputElement = (\n  props: EditableFieldInputElementProps\n) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    Element={EditableFieldInput}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAmBA,MAAa,6BACX,UAEA,oBAAC,aAAD;CACE,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;CACJ"}

package/dist/esm/components/Form/elements/EditableFieldTextAreaElement.mjs

@@ -1,2 +1,17 @@
-import{EditableFieldTextArea as e}from"../../EditableField/EditableFieldTextArea.mjs";import{FormElement as t}from"./FormElement.mjs";import{jsx as n}from"react/jsx-runtime";const r=r=>n(t,{id:r.name,"data-testid":r.name,"aria-labelledby":r.label?`${r.name}-label`:void 0,"aria-label":r.label?void 0:r.name,Element:e,...r});export{r as EditableFieldTextAreaElement};
+import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
+import { FormElement } from "./FormElement.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/EditableFieldTextAreaElement.tsx
+const EditableFieldTextAreaElement = (props) => /* @__PURE__ */ jsx(FormElement, {
+	id: props.name,
+	"data-testid": props.name,
+	"aria-labelledby": props.label ? `${props.name}-label` : void 0,
+	"aria-label": props.label ? void 0 : props.name,
+	Element: EditableFieldTextArea,
+	...props
+});
+
+//#endregion
+export { EditableFieldTextAreaElement };
 //# sourceMappingURL=EditableFieldTextAreaElement.mjs.map

package/dist/esm/components/Form/elements/EditableFieldTextAreaElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"sourcesContent":["import { EditableFieldTextArea } from '@components/EditableField/EditableFieldTextArea';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n  FormElementProps<typeof EditableFieldTextArea>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof EditableFieldTextArea> & {\n      name: string;\n      description?: ReactNode;\n      placeholder?: string;\n      className?: string;\n      children?: ReactNode;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const EditableFieldTextAreaElement = (\n  props: EditableFieldTextAreaElementProps\n) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    Element={EditableFieldTextArea}\n    {...props}\n  />\n);\n"],"mappings":"8KAmBA,MAAa,EACX,GAEA,EAAC,EAAD,CACE,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,QAAS,EACT,GAAI,EACJ,CAAA"}
+{"version":3,"file":"EditableFieldTextAreaElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"sourcesContent":["import { EditableFieldTextArea } from '@components/EditableField/EditableFieldTextArea';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype EditableFieldTextAreaElementProps = Omit<\n  FormElementProps<typeof EditableFieldTextArea>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof EditableFieldTextArea> & {\n      name: string;\n      description?: ReactNode;\n      placeholder?: string;\n      className?: string;\n      children?: ReactNode;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const EditableFieldTextAreaElement = (\n  props: EditableFieldTextAreaElementProps\n) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    Element={EditableFieldTextArea}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAmBA,MAAa,gCACX,UAEA,oBAAC,aAAD;CACE,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,SAAS;CACT,GAAI;CACJ"}

package/dist/esm/components/Form/elements/FormElement.mjs

@@ -1,2 +1,59 @@
-"use client";import{useFormField as e}from"../FormField.mjs";import{FormItemLayout as t}from"../layout/FormItemLayout.mjs";import{Form as n}from"../Form.mjs";import{jsx as r}from"react/jsx-runtime";import{useFormContext as i}from"react-hook-form";const a=({field:n,name:i,label:a,Element:o,isRequired:s=!1,info:c,description:l,showErrorMessage:u=!0,...d})=>{let{error:f}=e(),{value:p,onChange:m,...h}=n??{},g=d,_=g.value===void 0?p??``:g.value,v=(...e)=>{typeof m==`function`&&m(...e),typeof g.onChange==`function`&&g.onChange(...e)};return r(t,{htmlFor:i,label:a,description:l,isRequired:s,info:c,showErrorMessage:u,"aria-invalid":!!f,children:r(o,{"data-testid":`element`,id:i,...h,...d,value:_,onChange:v,children:d.children})})},o=e=>{let{control:t}=i();return r(n.Field,{control:t,name:e.name,render:({field:t})=>r(a,{...e,field:t})})};export{o as FormElement};
+'use client';
+
+import { useFormField } from "../FormField.mjs";
+import { FormItemLayout } from "../layout/FormItemLayout.mjs";
+import { Form } from "../Form.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+
+//#region src/components/Form/elements/FormElement.tsx
+const FormFieldElement = ({ field, name, label, Element, isRequired = false, info, description, showErrorMessage = true, ...props }) => {
+	const { error } = useFormField();
+	const { value: fieldValue, onChange: fieldOnChange, ...fieldRest } = field ?? {};
+	const propsAny = props;
+	const mergedValue = propsAny.value !== void 0 ? propsAny.value : fieldValue ?? "";
+	const mergedOnChange = (...args) => {
+		if (typeof fieldOnChange === "function") fieldOnChange(...args);
+		if (typeof propsAny.onChange === "function") propsAny.onChange(...args);
+	};
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(Element, {
+			"data-testid": "element",
+			id: name,
+			...fieldRest,
+			...props,
+			value: mergedValue,
+			onChange: mergedOnChange,
+			children: props.children
+		})
+	});
+};
+/**
+* FormElement is a component that allows you to create a form element with a label, description, error message, and validation.
+*
+* The Element prop is the type of the element that will be rendered.
+* This element will interact with the FormContext and will be controlled by the FormControl component.
+* The props used to control the element will be `value` and `onChange`.
+*/
+const FormElement = (props) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name: props.name,
+		render: ({ field }) => /* @__PURE__ */ jsx(FormFieldElement, {
+			...props,
+			field
+		})
+	});
+};
+
+//#endregion
+export { FormElement };
 //# sourceMappingURL=FormElement.mjs.map

package/dist/esm/components/Form/elements/FormElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n  type ControllerRenderProps,\n  type FieldValues,\n  useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n  name: string;\n  Element: T;\n  label?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  showErrorMessage?: boolean;\n  focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n  ComponentProps<T> & {\n    field: ControllerRenderProps<FieldValues, string>;\n  };\n\nconst FormFieldElement = <T extends ElementType>({\n  field,\n  name,\n  label,\n  Element,\n  isRequired = false,\n  info,\n  description,\n  showErrorMessage = true,\n  ...props\n}: FormFieldElementProps<T>) => {\n  const { error } = useFormField();\n\n  // Ensure controlled inputs and merge onChange with RHF controller\n  const {\n    value: fieldValue,\n    onChange: fieldOnChange,\n    ...fieldRest\n  } = (field as unknown as {\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n  }) ?? {};\n\n  const propsAny = props as unknown as {\n    value?: unknown;\n    onChange?: (...args: unknown[]) => void;\n    children?: unknown;\n  };\n\n  const mergedValue =\n    propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n  const mergedOnChange = (...args: unknown[]) => {\n    if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n    if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n  };\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <Element\n        data-testid=\"element\"\n        id={name}\n        {...fieldRest}\n        {...props}\n        // Force controlled value to avoid uncontrolled-to-controlled warnings\n        value={mergedValue as never}\n        // Merge onChange so RHF stays in sync while allowing custom handlers\n        onChange={mergedOnChange as never}\n      >\n        {props.children}\n      </Element>\n    </FormItemLayout>\n  );\n};\n\n/**\n * FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n *\n * The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n  props: FormElementProps<T> & ComponentProps<T>\n) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={props.name}\n      render={({ field }) => <FormFieldElement {...props} field={field} />}\n    />\n  );\n};\n"],"mappings":"uPA2BA,MAAM,GAA2C,CAC/C,QACA,OACA,QACA,UACA,aAAa,GACb,OACA,cACA,mBAAmB,GACnB,GAAG,KAC2B,CAC9B,GAAM,CAAE,SAAU,GAAc,CAG1B,CACJ,MAAO,EACP,SAAU,EACV,GAAG,GACA,GAGC,EAAE,CAEF,EAAW,EAMX,EACJ,EAAS,QAAU,IAAA,GAA8B,GAAc,GAAhC,EAAS,MAEpC,GAAkB,GAAG,IAAoB,CACzC,OAAO,GAAkB,YAAY,EAAc,GAAG,EAAK,CAC3D,OAAO,EAAS,UAAa,YAAY,EAAS,SAAS,GAAG,EAAK,EAGzE,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,cAAY,UACZ,GAAI,EACJ,GAAI,EACJ,GAAI,EAEJ,MAAO,EAEP,SAAU,WAET,EAAM,SACC,CAAA,CACK,CAAA,EAWR,EACX,GACG,CACH,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACT,KAAM,EAAM,KACZ,QAAS,CAAE,WAAY,EAAC,EAAD,CAAkB,GAAI,EAAc,QAAS,CAAA,CACpE,CAAA"}
+{"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n  type ControllerRenderProps,\n  type FieldValues,\n  useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n  name: string;\n  Element: T;\n  label?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  showErrorMessage?: boolean;\n  focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n  ComponentProps<T> & {\n    field: ControllerRenderProps<FieldValues, string>;\n  };\n\nconst FormFieldElement = <T extends ElementType>({\n  field,\n  name,\n  label,\n  Element,\n  isRequired = false,\n  info,\n  description,\n  showErrorMessage = true,\n  ...props\n}: FormFieldElementProps<T>) => {\n  const { error } = useFormField();\n\n  // Ensure controlled inputs and merge onChange with RHF controller\n  const {\n    value: fieldValue,\n    onChange: fieldOnChange,\n    ...fieldRest\n  } = (field as unknown as {\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n  }) ?? {};\n\n  const propsAny = props as unknown as {\n    value?: unknown;\n    onChange?: (...args: unknown[]) => void;\n    children?: unknown;\n  };\n\n  const mergedValue =\n    propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n  const mergedOnChange = (...args: unknown[]) => {\n    if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n    if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n  };\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <Element\n        data-testid=\"element\"\n        id={name}\n        {...fieldRest}\n        {...props}\n        // Force controlled value to avoid uncontrolled-to-controlled warnings\n        value={mergedValue as never}\n        // Merge onChange so RHF stays in sync while allowing custom handlers\n        onChange={mergedOnChange as never}\n      >\n        {props.children}\n      </Element>\n    </FormItemLayout>\n  );\n};\n\n/**\n * FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n *\n * The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n  props: FormElementProps<T> & ComponentProps<T>\n) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={props.name}\n      render={({ field }) => <FormFieldElement {...props} field={field} />}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC,gBAAD;EACE,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC,SAAD;GACE,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;GACC;EACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK,OAAN;EACW;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC,kBAAD;GAAkB,GAAI;GAAc;GAAS;EACpE"}

package/dist/esm/components/Form/elements/FormElementWrapper.mjs

@@ -1,2 +1,35 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{FormProvider as t,useForm as n}from"react-hook-form";import{zodResolver as r}from"@hookform/resolvers/zod";import{z as i}from"zod/v4";const a=i.object({test:i.string().min(3,`test error`)}),o=i=>{let o=i.schema??a,s=n({resolver:r(o),values:i.values}),{children:c,onSubmit:l,...u}=i,d=(e,t)=>{o.safeParse(e).success&&l?.(t)};return e(t,{...s,children:e(`form`,{...u,onSubmit:e=>{e.preventDefault(),s.handleSubmit(t=>d(t,e))},children:c})})};export{o as FormElementWrapper};
+'use client';
+
+import { jsx } from "react/jsx-runtime";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod/v4";
+
+//#region src/components/Form/elements/FormElementWrapper.tsx
+const Schema = z.object({ test: z.string().min(3, "test error") });
+const FormElementWrapper = (props) => {
+	const objectFormSchema = props.schema ?? Schema;
+	const form = useForm({
+		resolver: zodResolver(objectFormSchema),
+		values: props.values
+	});
+	const { children, onSubmit, ...rest } = props;
+	const onSubmitForm = (values, event) => {
+		if (objectFormSchema.safeParse(values).success) onSubmit?.(event);
+	};
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx("form", {
+			...rest,
+			onSubmit: (e) => {
+				e.preventDefault();
+				form.handleSubmit((values) => onSubmitForm(values, e));
+			},
+			children
+		})
+	});
+};
+
+//#endregion
+export { FormElementWrapper };
 //# sourceMappingURL=FormElementWrapper.mjs.map

package/dist/esm/components/Form/elements/FormElementWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementWrapper.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n  test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n  schema?: z.ZodObject;\n  values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n  const objectFormSchema = props.schema ?? Schema;\n\n  const form = useForm<z.infer<typeof objectFormSchema>>({\n    resolver: zodResolver(objectFormSchema as any),\n    values: props.values,\n  });\n\n  const { children, onSubmit, ...rest } = props;\n\n  const onSubmitForm = (\n    values: z.infer<typeof objectFormSchema>,\n    event: FormEvent<HTMLFormElement>\n  ) => {\n    const parsedValues = objectFormSchema.safeParse(values);\n    if (parsedValues.success) {\n      onSubmit?.(event);\n    }\n  };\n\n  return (\n    <FormProvider {...form}>\n      <form\n        {...rest}\n        onSubmit={(e) => {\n          e.preventDefault();\n          form.handleSubmit((values) => onSubmitForm(values, e));\n        }}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n"],"mappings":"kMAOA,MAAM,EAAS,EAAE,OAAO,CACtB,KAAM,EAAE,QAAQ,CAAC,IAAI,EAAG,aAAa,CACtC,CAAC,CAOW,EAAmD,GAAU,CACxE,IAAM,EAAmB,EAAM,QAAU,EAEnC,EAAO,EAA0C,CACrD,SAAU,EAAY,EAAwB,CAC9C,OAAQ,EAAM,OACf,CAAC,CAEI,CAAE,WAAU,WAAU,GAAG,GAAS,EAElC,GACJ,EACA,IACG,CACkB,EAAiB,UAAU,EAAO,CACtC,SACf,IAAW,EAAM,EAIrB,OACE,EAAC,EAAD,CAAc,GAAI,WAChB,EAAC,OAAD,CACE,GAAI,EACJ,SAAW,GAAM,CACf,EAAE,gBAAgB,CAClB,EAAK,aAAc,GAAW,EAAa,EAAQ,EAAE,CAAC,EAGvD,WACI,CAAA,CACM,CAAA"}
+{"version":3,"file":"FormElementWrapper.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n  test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n  schema?: z.ZodObject;\n  values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n  const objectFormSchema = props.schema ?? Schema;\n\n  const form = useForm<z.infer<typeof objectFormSchema>>({\n    resolver: zodResolver(objectFormSchema as any),\n    values: props.values,\n  });\n\n  const { children, onSubmit, ...rest } = props;\n\n  const onSubmitForm = (\n    values: z.infer<typeof objectFormSchema>,\n    event: FormEvent<HTMLFormElement>\n  ) => {\n    const parsedValues = objectFormSchema.safeParse(values);\n    if (parsedValues.success) {\n      onSubmit?.(event);\n    }\n  };\n\n  return (\n    <FormProvider {...form}>\n      <form\n        {...rest}\n        onSubmit={(e) => {\n          e.preventDefault();\n          form.handleSubmit((values) => onSubmitForm(values, e));\n        }}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,SAAS,EAAE,OAAO,EACtB,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,aAAa,EACtC,CAAC;AAOF,MAAa,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,UAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,QAAD;GACE,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;GACI;EACM"}

package/dist/esm/components/Form/elements/InputElement.mjs

@@ -1,2 +1,17 @@
-import{Input as e}from"../../Input/Input.mjs";import{FormElement as t}from"./FormElement.mjs";import{jsx as n}from"react/jsx-runtime";const r=r=>n(t,{id:r.name,"data-testid":r.name,Element:e,"aria-labelledby":r.label?`${r.name}-label`:void 0,"aria-label":r.label?void 0:r.name,...r});export{r as InputElement};
+import { Input } from "../../Input/Input.mjs";
+import { FormElement } from "./FormElement.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/InputElement.tsx
+const InputElement = (props) => /* @__PURE__ */ jsx(FormElement, {
+	id: props.name,
+	"data-testid": props.name,
+	Element: Input,
+	"aria-labelledby": props.label ? `${props.name}-label` : void 0,
+	"aria-label": props.label ? void 0 : props.name,
+	...props
+});
+
+//#endregion
+export { InputElement };
 //# sourceMappingURL=InputElement.mjs.map

package/dist/esm/components/Form/elements/InputElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputElement.tsx"],"sourcesContent":["import { Input } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputElementProps = Omit<FormElementProps<typeof Input>, 'Element'> &\n  Omit<\n    ComponentProps<typeof Input> & {\n      name: string;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const InputElement: FC<InputElementProps> = (props) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={Input}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    {...props}\n  />\n);\n"],"mappings":"sIAYA,MAAa,EAAuC,GAClD,EAAC,EAAD,CACE,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,QAAS,EACT,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC5C,GAAI,EACJ,CAAA"}
+{"version":3,"file":"InputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputElement.tsx"],"sourcesContent":["import { Input } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputElementProps = Omit<FormElementProps<typeof Input>, 'Element'> &\n  Omit<\n    ComponentProps<typeof Input> & {\n      name: string;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const InputElement: FC<InputElementProps> = (props) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={Input}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAYA,MAAa,gBAAuC,UAClD,oBAAC,aAAD;CACE,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,SAAS;CACT,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,GAAI;CACJ"}

package/dist/esm/components/Form/elements/InputPasswordElement.mjs

@@ -1,2 +1,20 @@
-import{InputPassword as e}from"../../Input/InputPassword.mjs";import{FormElement as t}from"./FormElement.mjs";import{jsx as n}from"react/jsx-runtime";const r=({autoComplete:r,...i})=>n(t,{Element:e,id:i.name,"data-testid":i.name,"aria-labelledby":i.label?`${i.name}-label`:void 0,"aria-label":i.label?void 0:i.name,autoComplete:r,minLength:6,maxLength:255,...i});export{r as InputPasswordElement};
+import { InputPassword } from "../../Input/InputPassword.mjs";
+import { FormElement } from "./FormElement.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/elements/InputPasswordElement.tsx
+const InputPasswordElement = ({ autoComplete, ...props }) => /* @__PURE__ */ jsx(FormElement, {
+	Element: InputPassword,
+	id: props.name,
+	"data-testid": props.name,
+	"aria-labelledby": props.label ? `${props.name}-label` : void 0,
+	"aria-label": props.label ? void 0 : props.name,
+	autoComplete,
+	minLength: 6,
+	maxLength: 255,
+	...props
+});
+
+//#endregion
+export { InputPasswordElement };
 //# sourceMappingURL=InputPasswordElement.mjs.map

package/dist/esm/components/Form/elements/InputPasswordElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputPasswordElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import { InputPassword } from '@components/Input/InputPassword';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n  FormElementProps<typeof InputPassword>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof InputPassword> & {\n      name: string;\n      autoComplete: 'current-password' | 'new-password';\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={InputPassword}\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n"],"mappings":"sJAgBA,MAAa,GAAuD,CAClE,eACA,GAAG,KAEH,EAAC,EAAD,CACE,QAAS,EACT,GAAI,EAAM,KACV,cAAa,EAAM,KACnB,kBAAiB,EAAM,MAAQ,GAAG,EAAM,KAAK,QAAU,IAAA,GACvD,aAAY,EAAM,MAAQ,IAAA,GAAY,EAAM,KAC9B,eACd,UAAW,EACX,UAAW,IACX,GAAI,EACJ,CAAA"}
+{"version":3,"file":"InputPasswordElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import { InputPassword } from '@components/Input/InputPassword';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype InputPasswordElementProps = Omit<\n  FormElementProps<typeof InputPassword>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof InputPassword> & {\n      name: string;\n      autoComplete: 'current-password' | 'new-password';\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const InputPasswordElement: FC<InputPasswordElementProps> = ({\n  autoComplete,\n  ...props\n}) => (\n  <FormElement\n    Element={InputPassword}\n    id={props.name}\n    data-testid={props.name}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    autoComplete={autoComplete}\n    minLength={6}\n    maxLength={255}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAgBA,MAAa,wBAAuD,EAClE,cACA,GAAG,YAEH,oBAAC,aAAD;CACE,SAAS;CACT,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC9B;CACd,WAAW;CACX,WAAW;CACX,GAAI;CACJ"}