@intlayer/design-system 8.4.3 → 8.4.5

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

@@ -1,2 +1,50 @@
-"use client";import{MultiSelect as e}from"../../Select/Multiselect.mjs";import{useFormField as t}from"../FormField.mjs";import{FormItemLayout as n}from"../layout/FormItemLayout.mjs";import{Form as r}from"../Form.mjs";import{jsx as i}from"react/jsx-runtime";import{useFormContext as a}from"react-hook-form";const o=({field:r,name:a,label:o,description:s,isRequired:c,info:l,showErrorMessage:u,children:d,...f})=>{let{error:p}=t();return i(n,{htmlFor:a,label:o,description:s,isRequired:c,info:l,showErrorMessage:u,"aria-invalid":!!p,children:i(e,{onValueChange:r.onChange,values:r.value,...f,children:d})})},s=({name:e,description:t,label:n,isRequired:s,info:c,showErrorMessage:l,children:u,...d})=>{let{control:f}=a();return i(r.Field,{control:f,name:e,render:({field:r})=>i(o,{field:r,name:e,label:n,description:t,isRequired:s,info:c,showErrorMessage:l,...d,children:u})})};export{s as MultiSelectElement};
+'use client';
+
+import { MultiSelect } from "../../Select/Multiselect.mjs";
+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/MultiselectElement.tsx
+const MultiSelectFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { error } = useFormField();
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(MultiSelect, {
+			onValueChange: field.onChange,
+			values: field.value,
+			...props,
+			children
+		})
+	});
+};
+const MultiSelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => /* @__PURE__ */ jsx(MultiSelectFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+export { MultiSelectElement };
 //# sourceMappingURL=MultiselectElement.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport { MultiSelect } from '@components/Select/Multiselect';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n  FormElementProps<typeof MultiSelect>,\n  'Element'\n> &\n  ComponentProps<typeof MultiSelect> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst MultiSelectFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\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      <MultiSelect\n        onValueChange={field.onChange}\n        values={field.value}\n        {...props}\n      >\n        {children}\n      </MultiSelect>\n    </FormItemLayout>\n  );\n};\n\nexport const MultiSelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <MultiSelectFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </MultiSelectFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":"kTAsBA,MAAM,GAA2B,CAC/B,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KACwD,CAC3D,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,cAAe,EAAM,SACrB,OAAQ,EAAM,MACd,GAAI,EAEH,WACW,CAAA,CACC,CAAA,EAIR,GAAsB,CACjC,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KACsB,CACzB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,WACuB,CAAA,CAE5B,CAAA"}
+{"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport { MultiSelect } from '@components/Select/Multiselect';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n  FormElementProps<typeof MultiSelect>,\n  'Element'\n> &\n  ComponentProps<typeof MultiSelect> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst MultiSelectFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\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      <MultiSelect\n        onValueChange={field.onChange}\n        values={field.value}\n        {...props}\n      >\n        {children}\n      </MultiSelect>\n    </FormItemLayout>\n  );\n};\n\nexport const MultiSelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <MultiSelectFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </MultiSelectFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,2BAA2B,EAC/B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC,gBAAD;EACE,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC,aAAD;GACE,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,GAAI;GAEH;GACW;EACC;;AAIrB,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK,OAAN;EACW;EACH;EACN,SAAS,EAAE,YACT,oBAAC,yBAAD;GACS;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;GACuB;EAE5B"}

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

@@ -1,2 +1,109 @@
-"use client";import{useItemSelector as e}from"../../../hooks/useItemSelector.mjs";import{InputIndicator as t,InputOTP as n,InputOTPGroup as r,InputOTPSeparator as i,InputOTPSlot as a}from"../../Input/OTPInput.mjs";import{useFormField as o}from"../FormField.mjs";import{FormItemLayout as s}from"../layout/FormItemLayout.mjs";import{Form as c}from"../Form.mjs";import{useEffect as l,useRef as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useFormContext as m}from"react-hook-form";const h=e=>e?.getAttribute(`aria-selected`)===`true`,g=({field:c,name:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,children:x,slots:S=6,maxLength:C=6,...w})=>{let{error:T}=o(),E=u([]),{choiceIndicatorPosition:D,calculatePosition:O}=e(E,{selector:h,isHoverable:!0});return l(()=>{O()},[]),f(s,{htmlFor:m,label:g,description:_,isRequired:v,info:y,showErrorMessage:b,"aria-invalid":!!T,children:f(n,{onChange:c.onChange,defaultValue:c.value,maxLength:C,pattern:`^[0-9]+$`,onActiveSlotChange:O,...w,children:x??p(d,{children:[p(r,{children:[f(a,{index:0,ref:e=>{E.current[0]=e}}),f(a,{index:1,ref:e=>{E.current[1]=e}}),f(a,{index:2,ref:e=>{E.current[2]=e}})]}),f(i,{}),p(r,{children:[f(a,{index:3,ref:e=>{E.current[3]=e}}),f(a,{index:4,ref:e=>{E.current[4]=e}}),f(a,{index:5,ref:e=>{E.current[5]=e}})]}),D&&f(t,{style:D})]})})})},_=({name:e,description:t,label:n,isRequired:r,info:i,showErrorMessage:a,children:o,slots:s=6,maxLength:l=6,...u})=>{let{control:d}=m();return f(c.Field,{control:d,name:e,render:({field:c})=>f(g,{field:c,name:e,label:n,description:t,isRequired:r,info:i,showErrorMessage:a,slots:s,maxLength:l,...u,children:o})})};export{_ as OTPElement};
+'use client';
+
+import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
+import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
+import { useFormField } from "../FormField.mjs";
+import { FormItemLayout } from "../layout/FormItemLayout.mjs";
+import { Form } from "../Form.mjs";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useFormContext } from "react-hook-form";
+
+//#region src/components/Form/elements/OTPElement.tsx
+const selector = (option) => option?.getAttribute("aria-selected") === "true";
+const OTPFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
+	const { error } = useFormField();
+	const optionsRefs = useRef([]);
+	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, {
+		selector,
+		isHoverable: true
+	});
+	useEffect(() => {
+		calculatePosition();
+	}, []);
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(InputOTP, {
+			onChange: field.onChange,
+			defaultValue: field.value,
+			maxLength,
+			pattern: "^[0-9]+$",
+			onActiveSlotChange: calculatePosition,
+			...props,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 0,
+						ref: (el) => {
+							optionsRefs.current[0] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 1,
+						ref: (el) => {
+							optionsRefs.current[1] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 2,
+						ref: (el) => {
+							optionsRefs.current[2] = el;
+						}
+					})
+				] }),
+				/* @__PURE__ */ jsx(InputOTPSeparator, {}),
+				/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 3,
+						ref: (el) => {
+							optionsRefs.current[3] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 4,
+						ref: (el) => {
+							optionsRefs.current[4] = el;
+						}
+					}),
+					/* @__PURE__ */ jsx(InputOTPSlot, {
+						index: 5,
+						ref: (el) => {
+							optionsRefs.current[5] = el;
+						}
+					})
+				] }),
+				choiceIndicatorPosition && /* @__PURE__ */ jsx(InputIndicator, { style: choiceIndicatorPosition })
+			] })
+		})
+	});
+};
+const OTPElement = ({ name, description, label, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => /* @__PURE__ */ jsx(OTPFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			slots,
+			maxLength,
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+export { OTPElement };
 //# sourceMappingURL=OTPElement.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport {\n  InputIndicator,\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from '@components/Input/OTPInput';\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n  Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n    /** Number of OTP slots (default: 6) */\n    slots?: number;\n  };\n\nconst selector = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\nconst OTPFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  slots = 6,\n  maxLength = 6,\n  ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\n\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    {\n      selector,\n      isHoverable: true,\n    }\n  );\n\n  useEffect(() => {\n    calculatePosition();\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      <InputOTP\n        onChange={field.onChange}\n        defaultValue={field.value}\n        maxLength={maxLength}\n        pattern=\"^[0-9]+$\"\n        onActiveSlotChange={calculatePosition}\n        {...(props as any)}\n      >\n        {children ?? (\n          <>\n            <InputOTPGroup>\n              <InputOTPSlot\n                index={0}\n                ref={(el) => {\n                  optionsRefs.current[0] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={1}\n                ref={(el) => {\n                  optionsRefs.current[1] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={2}\n                ref={(el) => {\n                  optionsRefs.current[2] = el!;\n                }}\n              />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot\n                index={3}\n                ref={(el) => {\n                  optionsRefs.current[3] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={4}\n                ref={(el) => {\n                  optionsRefs.current[4] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={5}\n                ref={(el) => {\n                  optionsRefs.current[5] = el!;\n                }}\n              />\n            </InputOTPGroup>\n            {choiceIndicatorPosition && (\n              <InputIndicator style={choiceIndicatorPosition} />\n            )}\n          </>\n        )}\n      </InputOTP>\n    </FormItemLayout>\n  );\n};\n\nexport const OTPElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  slots = 6,\n  maxLength = 6,\n  ...props\n}: OTPElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <OTPFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          slots={slots}\n          maxLength={maxLength}\n          {...props}\n        >\n          {children}\n        </OTPFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":"sgBA4BA,MAAM,EAAY,GAChB,GAAQ,aAAa,gBAAgB,GAAK,OAEtC,GAAmB,CACvB,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,QAAQ,EACR,YAAY,EACZ,GAAG,KACqD,CACxD,GAAM,CAAE,SAAU,GAAc,CAE1B,EAAc,EAAsB,EAAE,CAAC,CACvC,CAAE,0BAAyB,qBAAsB,EACrD,EACA,CACE,WACA,YAAa,GACd,CACF,CAMD,OAJA,MAAgB,CACd,GAAmB,EAClB,EAAE,CAAC,CAGJ,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,SAAU,EAAM,SAChB,aAAc,EAAM,MACT,YACX,QAAQ,WACR,mBAAoB,EACpB,GAAK,WAEJ,GACC,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACY,CAAA,CAAA,CAChB,EAAC,EAAD,EAAqB,CAAA,CACrB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACF,EAAC,EAAD,CACE,MAAO,EACP,IAAM,GAAO,CACX,EAAY,QAAQ,GAAK,GAE3B,CAAA,CACY,CAAA,CAAA,CACf,GACC,EAAC,EAAD,CAAgB,MAAO,EAA2B,CAAA,CAEnD,CAAA,CAAA,CAEI,CAAA,CACI,CAAA,EAIR,GAAc,CACzB,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,QAAQ,EACR,YAAY,EACZ,GAAG,KACmB,CACtB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBACX,QACI,YACX,GAAI,EAEH,WACe,CAAA,CAEpB,CAAA"}
+{"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport {\n  InputIndicator,\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from '@components/Input/OTPInput';\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n  Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n    /** Number of OTP slots (default: 6) */\n    slots?: number;\n  };\n\nconst selector = (option: HTMLElement) =>\n  option?.getAttribute('aria-selected') === 'true';\n\nconst OTPFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  slots = 6,\n  maxLength = 6,\n  ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\n\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    {\n      selector,\n      isHoverable: true,\n    }\n  );\n\n  useEffect(() => {\n    calculatePosition();\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      <InputOTP\n        onChange={field.onChange}\n        defaultValue={field.value}\n        maxLength={maxLength}\n        pattern=\"^[0-9]+$\"\n        onActiveSlotChange={calculatePosition}\n        {...(props as any)}\n      >\n        {children ?? (\n          <>\n            <InputOTPGroup>\n              <InputOTPSlot\n                index={0}\n                ref={(el) => {\n                  optionsRefs.current[0] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={1}\n                ref={(el) => {\n                  optionsRefs.current[1] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={2}\n                ref={(el) => {\n                  optionsRefs.current[2] = el!;\n                }}\n              />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot\n                index={3}\n                ref={(el) => {\n                  optionsRefs.current[3] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={4}\n                ref={(el) => {\n                  optionsRefs.current[4] = el!;\n                }}\n              />\n              <InputOTPSlot\n                index={5}\n                ref={(el) => {\n                  optionsRefs.current[5] = el!;\n                }}\n              />\n            </InputOTPGroup>\n            {choiceIndicatorPosition && (\n              <InputIndicator style={choiceIndicatorPosition} />\n            )}\n          </>\n        )}\n      </InputOTP>\n    </FormItemLayout>\n  );\n};\n\nexport const OTPElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  slots = 6,\n  maxLength = 6,\n  ...props\n}: OTPElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <OTPFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          slots={slots}\n          maxLength={maxLength}\n          {...props}\n        >\n          {children}\n        </OTPFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,YAAY,WAChB,QAAQ,aAAa,gBAAgB,KAAK;AAE5C,MAAM,mBAAmB,EACvB,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACqD;CACxD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;EACd,CACF;AAED,iBAAgB;AACd,qBAAmB;IAClB,EAAE,CAAC;AAEN,QACE,oBAAC,gBAAD;EACE,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC,UAAD;GACE,UAAU,MAAM;GAChB,cAAc,MAAM;GACT;GACX,SAAQ;GACR,oBAAoB;GACpB,GAAK;aAEJ,YACC;IACE,qBAAC,eAAD;KACE,oBAAC,cAAD;MACE,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;MAE3B;KACF,oBAAC,cAAD;MACE,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;MAE3B;KACF,oBAAC,cAAD;MACE,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;MAE3B;KACY;IAChB,oBAAC,mBAAD,EAAqB;IACrB,qBAAC,eAAD;KACE,oBAAC,cAAD;MACE,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;MAE3B;KACF,oBAAC,cAAD;MACE,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;MAE3B;KACF,oBAAC,cAAD;MACE,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;MAE3B;KACY;IACf,2BACC,oBAAC,gBAAD,EAAgB,OAAO,yBAA2B;IAEnD;GAEI;EACI;;AAIrB,MAAa,cAAc,EACzB,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK,OAAN;EACW;EACH;EACN,SAAS,EAAE,YACT,oBAAC,iBAAD;GACS;GACD;GACC;GACM;GACD;GACN;GACY;GACX;GACI;GACX,GAAI;GAEH;GACe;EAEpB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SearchInputElement.tsx"],"sourcesContent":["import { SearchInput } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype SearchInputElementProps = Omit<\n  FormElementProps<typeof SearchInput>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof SearchInput> & {\n      name: string;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const SearchInputElement: FC<SearchInputElementProps> = (props) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={SearchInput}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    {...props}\n  />\n);\n"],"mappings":"kJAeA,MAAa,EAAmD,GAC9D,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":"SearchInputElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SearchInputElement.tsx"],"sourcesContent":["import { SearchInput } from '@components/Input';\nimport type { ComponentProps, FC } from 'react';\nimport { FormElement, type FormElementProps } from './FormElement';\n\ntype SearchInputElementProps = Omit<\n  FormElementProps<typeof SearchInput>,\n  'Element'\n> &\n  Omit<\n    ComponentProps<typeof SearchInput> & {\n      name: string;\n    },\n    'aria-label' | 'aria-labelledby'\n  >;\n\nexport const SearchInputElement: FC<SearchInputElementProps> = (props) => (\n  <FormElement\n    id={props.name}\n    data-testid={props.name}\n    Element={SearchInput}\n    aria-labelledby={props.label ? `${props.name}-label` : undefined}\n    aria-label={props.label ? undefined : props.name}\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAeA,MAAa,sBAAmD,UAC9D,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/SelectElement.mjs

@@ -1,2 +1,50 @@
-"use client";import{Select as e}from"../../Select/Select.mjs";import{useFormField as t}from"../FormField.mjs";import{FormItemLayout as n}from"../layout/FormItemLayout.mjs";import{Form as r}from"../Form.mjs";import{jsx as i}from"react/jsx-runtime";import{useFormContext as a}from"react-hook-form";const o=({field:r,name:a,label:o,description:s,isRequired:c,info:l,showErrorMessage:u,children:d,...f})=>{let{error:p}=t();return i(n,{htmlFor:a,label:o,description:s,isRequired:c,info:l,showErrorMessage:u,"aria-invalid":!!p,children:i(e,{onValueChange:r.onChange,defaultValue:r.value,...f,children:d})})},s=({name:e,description:t,label:n,isRequired:s,info:c,showErrorMessage:l,children:u,...d})=>{let{control:f}=a();return i(r.Field,{control:f,name:e,render:({field:r})=>i(o,{field:r,name:e,label:n,description:t,isRequired:s,info:c,showErrorMessage:l,...d,children:u})})};export{s as SelectElement};
+'use client';
+
+import { Select } from "../../Select/Select.mjs";
+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/SelectElement.tsx
+const SelectFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { error } = useFormField();
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(Select, {
+			onValueChange: field.onChange,
+			defaultValue: field.value,
+			...props,
+			children
+		})
+	});
+};
+const SelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => /* @__PURE__ */ jsx(SelectFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+export { SelectElement };
 //# sourceMappingURL=SelectElement.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '@components/Select/Select';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n  ComponentProps<typeof Select> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst SelectFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\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      <Select\n        onValueChange={field.onChange}\n        defaultValue={field.value}\n        {...props}\n      >\n        {children}\n      </Select>\n    </FormItemLayout>\n  );\n};\n\nexport const SelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <SelectFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </SelectFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":"wSAmBA,MAAM,GAAsB,CAC1B,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KACwD,CAC3D,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CACE,cAAe,EAAM,SACrB,aAAc,EAAM,MACpB,GAAI,EAEH,WACM,CAAA,CACM,CAAA,EAIR,GAAiB,CAC5B,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KACsB,CACzB,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,WACkB,CAAA,CAEvB,CAAA"}
+{"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '@components/Select/Select';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n  ComponentProps<typeof Select> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst SelectFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SelectElementsProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\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      <Select\n        onValueChange={field.onChange}\n        defaultValue={field.value}\n        {...props}\n      >\n        {children}\n      </Select>\n    </FormItemLayout>\n  );\n};\n\nexport const SelectElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SelectElementsProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <SelectFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </SelectFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,sBAAsB,EAC1B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC,gBAAD;EACE,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC,QAAD;GACE,eAAe,MAAM;GACrB,cAAc,MAAM;GACpB,GAAI;GAEH;GACM;EACM;;AAIrB,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK,OAAN;EACW;EACH;EACN,SAAS,EAAE,YACT,oBAAC,oBAAD;GACS;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;GACkB;EAEvB"}

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

@@ -1,2 +1,49 @@
-"use client";import{SwitchSelector as e}from"../../SwitchSelector/index.mjs";import{useFormField as t}from"../FormField.mjs";import{FormItemLayout as n}from"../layout/FormItemLayout.mjs";import{Form as r}from"../Form.mjs";import{jsx as i}from"react/jsx-runtime";import{useFormContext as a}from"react-hook-form";const o=({field:r,name:a,label:o,description:s,isRequired:c,info:l,showErrorMessage:u,children:d,...f})=>{let{error:p}=t();return i(n,{htmlFor:a,label:o,description:s,isRequired:c,info:l,showErrorMessage:u,"aria-invalid":!!p,children:i(e,{...r,...f,children:d})})},s=({name:e,description:t,label:n,isRequired:s,info:c,showErrorMessage:l,children:u,...d})=>{let{control:f}=a();return i(r.Field,{control:f,name:e,render:({field:r})=>i(o,{field:r,name:e,label:n,description:t,isRequired:s,info:c,showErrorMessage:l,...d,children:u})})};export{s as SwitchSelectorElement};
+'use client';
+
+import { SwitchSelector } from "../../SwitchSelector/index.mjs";
+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/SwitchSelectorElement.tsx
+const SwitchSelectorFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { error } = useFormField();
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(SwitchSelector, {
+			...field,
+			...props,
+			children
+		})
+	});
+};
+const SwitchSelectorElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => /* @__PURE__ */ jsx(SwitchSelectorFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			...props,
+			children
+		})
+	});
+};
+
+//#endregion
+export { SwitchSelectorElement };
 //# sourceMappingURL=SwitchSelectorElement.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SwitchSelectorElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"sourcesContent":["'use client';\n\nimport { SwitchSelector } from '@components/SwitchSelector';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SwitchSelectorElementProps = Omit<\n  FormElementProps<typeof SwitchSelector>,\n  'Element'\n> &\n  ComponentProps<typeof SwitchSelector> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst SwitchSelectorFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SwitchSelectorElementProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\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      <SwitchSelector {...field} {...props}>\n        {children}\n      </SwitchSelector>\n    </FormItemLayout>\n  );\n};\n\nexport const SwitchSelectorElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SwitchSelectorElementProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <SwitchSelectorFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </SwitchSelectorFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":"uTAsBA,MAAM,GAA8B,CAClC,QACA,OACA,QACA,cACA,aACA,OACA,mBACA,WACA,GAAG,KAC+D,CAClE,GAAM,CAAE,SAAU,GAAc,CAEhC,OACE,EAAC,EAAD,CACE,QAAS,EACF,QACM,cACD,aACN,OACY,mBAClB,eAAc,CAAC,CAAC,WAEhB,EAAC,EAAD,CAAgB,GAAI,EAAO,GAAI,EAC5B,WACc,CAAA,CACF,CAAA,EAIR,GAAyB,CACpC,OACA,cACA,QACA,aACA,OACA,mBACA,WACA,GAAG,KAC6B,CAChC,GAAM,CAAE,WAAY,GAAgB,CAEpC,OACE,EAAC,EAAK,MAAN,CACW,UACH,OACN,QAAS,CAAE,WACT,EAAC,EAAD,CACS,QACD,OACC,QACM,cACD,aACN,OACY,mBAClB,GAAI,EAEH,WAC0B,CAAA,CAE/B,CAAA"}
+{"version":3,"file":"SwitchSelectorElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"sourcesContent":["'use client';\n\nimport { SwitchSelector } from '@components/SwitchSelector';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SwitchSelectorElementProps = Omit<\n  FormElementProps<typeof SwitchSelector>,\n  'Element'\n> &\n  ComponentProps<typeof SwitchSelector> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst SwitchSelectorFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SwitchSelectorElementProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\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      <SwitchSelector {...field} {...props}>\n        {children}\n      </SwitchSelector>\n    </FormItemLayout>\n  );\n};\n\nexport const SwitchSelectorElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SwitchSelectorElementProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <SwitchSelectorFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </SwitchSelectorFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,8BAA8B,EAClC,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YAC+D;CAClE,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC,gBAAD;EACE,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC,gBAAD;GAAgB,GAAI;GAAO,GAAI;GAC5B;GACc;EACF;;AAIrB,MAAa,yBAAyB,EACpC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YAC6B;CAChC,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK,OAAN;EACW;EACH;EACN,SAAS,EAAE,YACT,oBAAC,4BAAD;GACS;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;GAC0B;EAE/B"}

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

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

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

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

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

@@ -1 +1,10 @@
-import{FormElement as e}from"./FormElement.mjs";import{EditableFieldInputElement as t}from"./EditableFieldInputElement.mjs";import{EditableFieldTextAreaElement as n}from"./EditableFieldTextAreaElement.mjs";import{InputElement as r}from"./InputElement.mjs";import{InputPasswordElement as i}from"./InputPasswordElement.mjs";import{OTPElement as a}from"./OTPElement.mjs";import{SearchInputElement as o}from"./SearchInputElement.mjs";import{TextAreaElement as s}from"./TextAreaElement.mjs";export{t as EditableFieldInputElement,n as EditableFieldTextAreaElement,e as FormElement,r as InputElement,i as InputPasswordElement,a as OTPElement,o as SearchInputElement,s as TextAreaElement};
+import { FormElement } from "./FormElement.mjs";
+import { EditableFieldInputElement } from "./EditableFieldInputElement.mjs";
+import { EditableFieldTextAreaElement } from "./EditableFieldTextAreaElement.mjs";
+import { InputElement } from "./InputElement.mjs";
+import { InputPasswordElement } from "./InputPasswordElement.mjs";
+import { OTPElement } from "./OTPElement.mjs";
+import { SearchInputElement } from "./SearchInputElement.mjs";
+import { TextAreaElement } from "./TextAreaElement.mjs";
+
+export { EditableFieldInputElement, EditableFieldTextAreaElement, FormElement, InputElement, InputPasswordElement, OTPElement, SearchInputElement, TextAreaElement };

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

@@ -1 +1,5 @@
-import{useFormField as e}from"./FormField.mjs";import{useForm as t}from"./FormBase.mjs";import{Form as n}from"./Form.mjs";export{n as Form,t as useForm,e as useFormField};
+import { useFormField } from "./FormField.mjs";
+import { useForm } from "./FormBase.mjs";
+import { Form } from "./Form.mjs";
+
+export { Form, useForm, useFormField };

package/dist/esm/components/Form/layout/FormItemLayout.mjs

@@ -1,2 +1,25 @@
-import{FormLabelLayout as e}from"./FormLabelLayout.mjs";import{Form as t}from"../Form.mjs";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({label:i,description:a,isRequired:o,info:s,children:c,showErrorMessage:l=!0,htmlFor:u})=>r(t.Item,{className:`flex w-full flex-col flex-wrap gap-2 px-1 py-2`,children:[(a||i)&&r(`div`,{className:`flex flex-col gap-1 p-1 leading-none`,children:[i&&n(e,{isRequired:o,info:s,htmlFor:u,children:i}),a&&n(t.Description,{children:a})]}),n(t.Control,{children:c}),l&&n(t.Message,{"data-testid":`error-message`})]});export{i as FormItemLayout};
+import { FormLabelLayout } from "./FormLabelLayout.mjs";
+import { Form } from "../Form.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Form/layout/FormItemLayout.tsx
+const FormItemLayout = ({ label, description, isRequired, info, children, showErrorMessage = true, htmlFor }) => /* @__PURE__ */ jsxs(Form.Item, {
+	className: "flex w-full flex-col flex-wrap gap-2 px-1 py-2",
+	children: [
+		(description || label) && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 p-1 leading-none",
+			children: [label && /* @__PURE__ */ jsx(FormLabelLayout, {
+				isRequired,
+				info,
+				htmlFor,
+				children: label
+			}), description && /* @__PURE__ */ jsx(Form.Description, { children: description })]
+		}),
+		/* @__PURE__ */ jsx(Form.Control, { children }),
+		showErrorMessage && /* @__PURE__ */ jsx(Form.Message, { "data-testid": "error-message" })
+	]
+});
+
+//#endregion
+export { FormItemLayout };
 //# sourceMappingURL=FormItemLayout.mjs.map

package/dist/esm/components/Form/layout/FormItemLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  showErrorMessage?: boolean;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n  label,\n  description,\n  isRequired,\n  info,\n  children,\n  showErrorMessage = true,\n  htmlFor,\n}) => (\n  <Form.Item className=\"flex w-full flex-col flex-wrap gap-2 px-1 py-2\">\n    {(description || label) && (\n      <div className=\"flex flex-col gap-1 p-1 leading-none\">\n        {label && (\n          <FormLabelLayout\n            isRequired={isRequired}\n            info={info}\n            htmlFor={htmlFor}\n          >\n            {label}\n          </FormLabelLayout>\n        )}\n        {description && <Form.Description>{description}</Form.Description>}\n      </div>\n    )}\n    <Form.Control>{children}</Form.Control>\n\n    {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n  </Form.Item>\n);\n"],"mappings":"6IAWA,MAAa,GAA2C,CACtD,QACA,cACA,aACA,OACA,WACA,mBAAmB,GACnB,aAEA,EAAC,EAAK,KAAN,CAAW,UAAU,0DAArB,EACI,GAAe,IACf,EAAC,MAAD,CAAK,UAAU,gDAAf,CACG,GACC,EAAC,EAAD,CACc,aACN,OACG,mBAER,EACe,CAAA,CAEnB,GAAe,EAAC,EAAK,YAAN,CAAA,SAAmB,EAA+B,CAAA,CAC9D,GAER,EAAC,EAAK,QAAN,CAAe,WAAwB,CAAA,CAEtC,GAAoB,EAAC,EAAK,QAAN,CAAc,cAAY,gBAAkB,CAAA,CACvD"}
+{"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  showErrorMessage?: boolean;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n  label,\n  description,\n  isRequired,\n  info,\n  children,\n  showErrorMessage = true,\n  htmlFor,\n}) => (\n  <Form.Item className=\"flex w-full flex-col flex-wrap gap-2 px-1 py-2\">\n    {(description || label) && (\n      <div className=\"flex flex-col gap-1 p-1 leading-none\">\n        {label && (\n          <FormLabelLayout\n            isRequired={isRequired}\n            info={info}\n            htmlFor={htmlFor}\n          >\n            {label}\n          </FormLabelLayout>\n        )}\n        {description && <Form.Description>{description}</Form.Description>}\n      </div>\n    )}\n    <Form.Control>{children}</Form.Control>\n\n    {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n  </Form.Item>\n);\n"],"mappings":";;;;;AAWA,MAAa,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,cAEA,qBAAC,KAAK,MAAN;CAAW,WAAU;WAArB;GACI,eAAe,UACf,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,iBAAD;IACc;IACN;IACG;cAER;IACe,GAEnB,eAAe,oBAAC,KAAK,aAAN,YAAmB,aAA+B,EAC9D;;EAER,oBAAC,KAAK,SAAN,EAAe,UAAwB;EAEtC,oBAAoB,oBAAC,KAAK,SAAN,EAAc,eAAY,iBAAkB;EACvD"}

package/dist/esm/components/Form/layout/FormLabelLayout.mjs

@@ -1,2 +1,21 @@
-import{InformationTag as e}from"../../InformationTag/index.mjs";import{FormLabel as t}from"../FormLabel.mjs";import{RequiredStar as n}from"./RequiredStar.mjs";import{clsx as r}from"clsx";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({children:o,isRequired:s,info:c,htmlFor:l,className:u})=>a(`div`,{className:`ml-1 flex gap-1 align-middle text-base leading-none`,children:[o&&a(t,{htmlFor:l,id:`${l}-label`,suppressHydrationWarning:!0,className:r(`font-bold`,u),children:[o,i(n,{isRequired:s})]}),c&&i(e,{content:c})]});export{o as FormLabelLayout};
+import { InformationTag } from "../../InformationTag/index.mjs";
+import { FormLabel } from "../FormLabel.mjs";
+import { RequiredStar } from "./RequiredStar.mjs";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Form/layout/FormLabelLayout.tsx
+const FormLabelLayout = ({ children, isRequired, info, htmlFor, className }) => /* @__PURE__ */ jsxs("div", {
+	className: "ml-1 flex gap-1 align-middle text-base leading-none",
+	children: [children && /* @__PURE__ */ jsxs(FormLabel, {
+		htmlFor,
+		id: `${htmlFor}-label`,
+		suppressHydrationWarning: true,
+		className: clsx("font-bold", className),
+		children: [children, /* @__PURE__ */ jsx(RequiredStar, { isRequired })]
+	}), info && /* @__PURE__ */ jsx(InformationTag, { content: info })]
+});
+
+//#endregion
+export { FormLabelLayout };
 //# sourceMappingURL=FormLabelLayout.mjs.map

package/dist/esm/components/Form/layout/FormLabelLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabelLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { InformationTag } from '@components/InformationTag';\nimport { clsx } from 'clsx';\nimport type { FC, ReactNode } from 'react';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n  children?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  htmlFor?: string;\n  className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n  children,\n  isRequired,\n  info,\n  htmlFor,\n  className,\n}) => (\n  <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n    {children && (\n      <FormLabel\n        htmlFor={htmlFor}\n        id={`${htmlFor}-label`}\n        suppressHydrationWarning\n        className={clsx('font-bold', className)}\n      >\n        {children}\n        <RequiredStar isRequired={isRequired} />\n      </FormLabel>\n    )}\n    {info && <InformationTag content={info} />}\n  </div>\n);\n"],"mappings":"6OAcA,MAAa,GAA6C,CACxD,WACA,aACA,OACA,UACA,eAEA,EAAC,MAAD,CAAK,UAAU,+DAAf,CACG,GACC,EAAC,EAAD,CACW,UACT,GAAI,GAAG,EAAQ,QACf,yBAAA,GACA,UAAW,EAAK,YAAa,EAAU,UAJzC,CAMG,EACD,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC9B,GAEb,GAAQ,EAAC,EAAD,CAAgB,QAAS,EAAQ,CAAA,CACtC"}
+{"version":3,"file":"FormLabelLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { InformationTag } from '@components/InformationTag';\nimport { clsx } from 'clsx';\nimport type { FC, ReactNode } from 'react';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n  children?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  htmlFor?: string;\n  className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n  children,\n  isRequired,\n  info,\n  htmlFor,\n  className,\n}) => (\n  <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n    {children && (\n      <FormLabel\n        htmlFor={htmlFor}\n        id={`${htmlFor}-label`}\n        suppressHydrationWarning\n        className={clsx('font-bold', className)}\n      >\n        {children}\n        <RequiredStar isRequired={isRequired} />\n      </FormLabel>\n    )}\n    {info && <InformationTag content={info} />}\n  </div>\n);\n"],"mappings":";;;;;;;AAcA,MAAa,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf,CACG,YACC,qBAAC,WAAD;EACW;EACT,IAAI,GAAG,QAAQ;EACf;EACA,WAAW,KAAK,aAAa,UAAU;YAJzC,CAMG,UACD,oBAAC,cAAD,EAA0B,YAAc,EAC9B;KAEb,QAAQ,oBAAC,gBAAD,EAAgB,SAAS,MAAQ,EACtC"}

package/dist/esm/components/Form/layout/RequiredStar.mjs

@@ -1,2 +1,11 @@
-import{Fragment as e,jsx as t}from"react/jsx-runtime";const n=({isRequired:n})=>n?t(`span`,{"aria-label":`Asterisk meaning the field is required`,children:`*`}):t(e,{});export{n as RequiredStar};
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/Form/layout/RequiredStar.tsx
+const RequiredStar = ({ isRequired }) => isRequired ? /* @__PURE__ */ jsx("span", {
+	"aria-label": "Asterisk meaning the field is required",
+	children: "*"
+}) : /* @__PURE__ */ jsx(Fragment, {});
+
+//#endregion
+export { RequiredStar };
 //# sourceMappingURL=RequiredStar.mjs.map

package/dist/esm/components/Form/layout/RequiredStar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RequiredStar.mjs","names":[],"sources":["../../../../../src/components/Form/layout/RequiredStar.tsx"],"sourcesContent":["import type { FC } from 'react';\n\ntype RequiredStarProps = {\n  isRequired?: boolean;\n};\n\nexport const RequiredStar: FC<RequiredStarProps> = ({ isRequired }) =>\n  isRequired ? (\n    <span aria-label=\"Asterisk meaning the field is required\">*</span>\n  ) : (\n    <></>\n  );\n"],"mappings":"sDAMA,MAAa,GAAuC,CAAE,gBACpD,EACE,EAAC,OAAD,CAAM,aAAW,kDAAyC,IAAQ,CAAA,CAElE,EAAA,EAAA,EAAK,CAAA"}
+{"version":3,"file":"RequiredStar.mjs","names":[],"sources":["../../../../../src/components/Form/layout/RequiredStar.tsx"],"sourcesContent":["import type { FC } from 'react';\n\ntype RequiredStarProps = {\n  isRequired?: boolean;\n};\n\nexport const RequiredStar: FC<RequiredStarProps> = ({ isRequired }) =>\n  isRequired ? (\n    <span aria-label=\"Asterisk meaning the field is required\">*</span>\n  ) : (\n    <></>\n  );\n"],"mappings":";;;AAMA,MAAa,gBAAuC,EAAE,iBACpD,aACE,oBAAC,QAAD;CAAM,cAAW;WAAyC;CAAQ,IAElE,gCAAK"}

package/dist/esm/components/Form/layout/index.mjs

@@ -1 +1,4 @@
-import{FormLabelLayout as e}from"./FormLabelLayout.mjs";import{FormItemLayout as t}from"./FormItemLayout.mjs";export{t as FormItemLayout,e as FormLabelLayout};
+import { FormLabelLayout } from "./FormLabelLayout.mjs";
+import { FormItemLayout } from "./FormItemLayout.mjs";
+
+export { FormItemLayout, FormLabelLayout };

package/dist/esm/components/HTMLRender/HTMLRender.mjs

@@ -1,2 +1,68 @@
-import{Link as e}from"../Link/Link.mjs";import{H1 as t,H2 as n,H3 as r,H4 as i,H5 as a,H6 as o}from"../Headers/index.mjs";import{Fragment as s,jsx as c}from"react/jsx-runtime";import{renderHTML as l}from"react-intlayer";const u=()=>({components:{h1:e=>c(t,{isClickable:!0,...e}),h2:e=>c(n,{isClickable:!0,className:`mt-16`,...e}),h3:e=>c(r,{isClickable:!0,className:`mt-5`,...e}),h4:e=>c(i,{isClickable:!0,className:`mt-3`,...e}),h5:e=>c(a,{isClickable:!0,className:`mt-3`,...e}),h6:e=>c(o,{isClickable:!0,className:`mt-3`,...e}),a:t=>c(e,{isExternalLink:t.href?.startsWith(`http`),underlined:!0,label:``,...t,color:`neutral`})}}),d=({children:t,isDarkMode:n,locale:r,components:i})=>c(s,{children:l(t,{components:{...u(n??!1).components,a:t=>c(e,{isExternalLink:t.href?.startsWith(`http`),underlined:!0,locale:r,label:``,...t,color:`neutral`}),...i}})});export{d as HTMLRenderer,u as getIntlayerHTMLOptions};
+import { Link } from "../Link/Link.mjs";
+import { H1, H2, H3, H4, H5, H6 } from "../Headers/index.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { renderHTML } from "react-intlayer";
+
+//#region src/components/HTMLRender/HTMLRender.tsx
+const getIntlayerHTMLOptions = () => ({ components: {
+	h1: (props) => /* @__PURE__ */ jsx(H1, {
+		isClickable: true,
+		...props
+	}),
+	h2: (props) => /* @__PURE__ */ jsx(H2, {
+		isClickable: true,
+		className: "mt-16",
+		...props
+	}),
+	h3: (props) => /* @__PURE__ */ jsx(H3, {
+		isClickable: true,
+		className: "mt-5",
+		...props
+	}),
+	h4: (props) => /* @__PURE__ */ jsx(H4, {
+		isClickable: true,
+		className: "mt-3",
+		...props
+	}),
+	h5: (props) => /* @__PURE__ */ jsx(H5, {
+		isClickable: true,
+		className: "mt-3",
+		...props
+	}),
+	h6: (props) => /* @__PURE__ */ jsx(H6, {
+		isClickable: true,
+		className: "mt-3",
+		...props
+	}),
+	a: (props) => /* @__PURE__ */ jsx(Link, {
+		isExternalLink: props.href?.startsWith("http"),
+		underlined: true,
+		label: "",
+		...props,
+		color: "neutral"
+	})
+} });
+/**
+* HTMLRenderer Component
+*
+* A comprehensive HTML renderer that transforms HTML text into rich,
+* interactive content with custom styling and Intlayer integration.
+*/
+const HTMLRenderer = ({ children, isDarkMode, locale, components: componentsProp }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: renderHTML(children, { components: {
+		...getIntlayerHTMLOptions(isDarkMode ?? false).components,
+		a: (props) => /* @__PURE__ */ jsx(Link, {
+			isExternalLink: props.href?.startsWith("http"),
+			underlined: true,
+			locale,
+			label: "",
+			...props,
+			color: "neutral"
+		}),
+		...componentsProp
+	} }) });
+};
+
+//#endregion
+export { HTMLRenderer, getIntlayerHTMLOptions };
 //# sourceMappingURL=HTMLRender.mjs.map