@intlayer/design-system 6.1.6 → 7.0.0-canary.1

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

@@ -0,0 +1,36 @@
+'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

@@ -0,0 +1 @@
+{"version":3,"file":"FormElementWrapper.mjs","names":["FormElementWrapper: FC<FormElementWrapperProps>"],"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,MAAaA,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,SAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;IACI;GACM"}

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"InputElement.mjs","names":["InputElement: FC<InputElementProps>"],"sources":["../../../../../src/components/Form/elements/InputElement.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { Input } from '../../../components/Input';\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,MAAaA,gBAAuC,UAClD,oBAAC;CACC,IAAI,MAAM;CACV,eAAa,MAAM;CACnB,SAAS;CACT,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,GAAI;EACJ"}

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPasswordElement.mjs","names":["InputPasswordElement: FC<InputPasswordElementProps>"],"sources":["../../../../../src/components/Form/elements/InputPasswordElement.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { InputPassword } from '../../Input';\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,MAAaA,wBAAuD,EAClE,aACA,GAAG,YAEH,oBAAC;CACC,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;EACJ"}

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

@@ -0,0 +1,40 @@
+'use client';
+
+
+import { useFormField } from "../FormField.mjs";
+import { FormItemLayout } from "../layout/FormItemLayout.mjs";
+import { MultiSelect } from "../../Select/Multiselect.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 MultiSelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children,...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => {
+			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
+				})
+			});
+		}
+	});
+};
+
+//#endregion
+export { MultiSelectElement };
+//# sourceMappingURL=MultiselectElement.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { MultiSelect } from '../../Select/Multiselect';\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\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        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    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,SACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YAAY;GACrB,MAAM,EAAE,UAAU,cAAc;AAEhC,UACE,oBAAC;IACC,SAAS;IACF;IACM;IACD;IACN;IACY;IAClB,gBAAc,CAAC,CAAC;cAEhB,oBAAC;KACC,eAAe,MAAM;KACrB,QAAQ,MAAM;KACd,GAAI;KAEH;MACW;KACC;;GAGrB"}

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

@@ -0,0 +1,40 @@
+'use client';
+
+
+import { useFormField } from "../FormField.mjs";
+import { FormItemLayout } from "../layout/FormItemLayout.mjs";
+import { Select } from "../../Select/Select.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 SelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children,...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => {
+			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
+				})
+			});
+		}
+	});
+};
+
+//#endregion
+export { SelectElement };
+//# sourceMappingURL=SelectElement.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Select } from '../../Select/Select';\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\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        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    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,SACA,GAAG,YACsB;CACzB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YAAY;GACrB,MAAM,EAAE,UAAU,cAAc;AAEhC,UACE,oBAAC;IACC,SAAS;IACF;IACM;IACD;IACN;IACY;IAClB,gBAAc,CAAC,CAAC;cAEhB,oBAAC;KACC,eAAe,MAAM;KACrB,cAAc,MAAM;KACpB,GAAI;KAEH;MACM;KACM;;GAGrB"}

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

@@ -0,0 +1,39 @@
+'use client';
+
+
+import { useFormField } from "../FormField.mjs";
+import { FormItemLayout } from "../layout/FormItemLayout.mjs";
+import { SwitchSelector } from "../../SwitchSelector/index.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 SwitchSelectorElement = ({ name, description, label, isRequired, info, showErrorMessage, children,...props }) => {
+	const { control } = useFormContext();
+	return /* @__PURE__ */ jsx(Form.Field, {
+		control,
+		name,
+		render: ({ field }) => {
+			const { error } = useFormField();
+			return /* @__PURE__ */ jsx(FormItemLayout, {
+				htmlFor: name,
+				label,
+				description,
+				isRequired,
+				info,
+				showErrorMessage,
+				"aria-invalid": !!error,
+				children: /* @__PURE__ */ jsx(SwitchSelector, {
+					...field,
+					...props,
+					children
+				})
+			});
+		}
+	});
+};
+
+//#endregion
+export { SwitchSelectorElement };
+//# sourceMappingURL=SwitchSelectorElement.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchSelectorElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { SwitchSelector } from '../../SwitchSelector';\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\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        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    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,yBAAyB,EACpC,MACA,aACA,OACA,YACA,MACA,kBACA,SACA,GAAG,YAC6B;CAChC,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YAAY;GACrB,MAAM,EAAE,UAAU,cAAc;AAEhC,UACE,oBAAC;IACC,SAAS;IACF;IACM;IACD;IACN;IACY;IAClB,gBAAc,CAAC,CAAC;cAEhB,oBAAC;KAAe,GAAI;KAAO,GAAI;KAC5B;MACc;KACF;;GAGrB"}

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

@@ -0,0 +1,17 @@
+import { FormElement } from "./FormElement.mjs";
+import { TextArea } from "../../TextArea/TextArea.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

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaElement.mjs","names":["TextAreaElement: FC<TextAreaElementsProps>"],"sources":["../../../../../src/components/Form/elements/TextAreaElement.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { TextArea } from '../../TextArea/TextArea';\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,MAAaA,mBAA8C,UACzD,oBAAC;CACC,SAAS;CACT,IAAI,MAAM;CACV,mBAAiB,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;CACvD,cAAY,MAAM,QAAQ,SAAY,MAAM;CAC5C,eAAa,MAAM;CACnB,GAAI;EACJ"}

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

@@ -0,0 +1,8 @@
+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 { TextAreaElement } from "./TextAreaElement.mjs";
+
+export { EditableFieldInputElement, EditableFieldTextAreaElement, FormElement, InputElement, InputPasswordElement, TextAreaElement };

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,26 @@
+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, {
+	id: htmlFor,
+	className: "flex w-full flex-col gap-2 p-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

@@ -0,0 +1 @@
+{"version":3,"file":"FormItemLayout.mjs","names":["FormItemLayout: FC<FormItemLayoutProps>"],"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 id={htmlFor} className=\"flex w-full flex-col gap-2 p-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,MAAaA,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,cAEA,qBAAC,KAAK;CAAK,IAAI;CAAS,WAAU;;GAC9B,eAAe,UACf,qBAAC;GAAI,WAAU;cACZ,SACC,oBAAC;IACa;IACN;IACG;cAER;KACe,EAEnB,eAAe,oBAAC,KAAK,yBAAa,cAA+B;IAC9D;EAER,oBAAC,KAAK,WAAS,WAAwB;EAEtC,oBAAoB,oBAAC,KAAK,WAAQ,eAAY,kBAAkB;;EACvD"}

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

@@ -0,0 +1,20 @@
+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`,
+		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

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabelLayout.mjs","names":["FormLabelLayout: FC<FormLabelLayoutProps>"],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { FC, ReactNode } from 'react';\nimport { InformationTag } from '../../InformationTag';\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        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,MAAaA,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC;CAAI,WAAU;YACZ,YACC,qBAAC;EACU;EACT,IAAI,GAAG,QAAQ;EACf,WAAW,KAAK,aAAa,UAAU;aAEtC,UACD,oBAAC,gBAAyB,aAAc;GAC9B,EAEb,QAAQ,oBAAC,kBAAe,SAAS,OAAQ;EACtC"}

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"RequiredStar.mjs","names":["RequiredStar: FC<RequiredStarProps>"],"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,MAAaA,gBAAuC,EAAE,iBACpD,aACE,oBAAC;CAAK,cAAW;WAAyC;EAAQ,GAElE,iCAAK"}

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

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

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

@@ -0,0 +1,217 @@
+import { cn } from "../../utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Headers/index.tsx
+const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
+const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
+/**
+* Styled H1 Component
+*
+* Primary heading component for page titles and main content headers.
+* Does not include clickable anchor functionality.
+*/
+const StyledH1 = ({ className,...props }) => /* @__PURE__ */ jsx("h1", {
+	className: cn("mt-5 font-bold text-2xl", className),
+	...props
+});
+/**
+* Styled H2 Component
+*
+* Secondary heading component with anchor link functionality when wrapped.
+* Used for major section headers in content.
+*/
+const StyledH2 = ({ className,...props }) => /* @__PURE__ */ jsx("h2", {
+	className: cn("mt-16 mb-2 font-bold text-2xl", styledHeading, className),
+	...props
+});
+/**
+* Styled H3 Component
+*
+* Tertiary heading component with anchor link functionality when wrapped.
+* Used for subsection headers in content.
+*/
+const StyledH3 = ({ className,...props }) => /* @__PURE__ */ jsx("h3", {
+	className: cn("mt-5 mb-2 font-bold text-xl", styledHeading, className),
+	...props
+});
+/**
+* Styled H4 Component
+*
+* Quaternary heading component with anchor link functionality when wrapped.
+* Used for minor section headers in content.
+*/
+const StyledH4 = ({ className,...props }) => /* @__PURE__ */ jsx("h4", {
+	className: cn("mt-3 font-bold text-lg", styledHeading, className),
+	...props
+});
+/**
+* Styled H5 Component
+*
+* Fifth-level heading component with anchor link functionality when wrapped.
+* Used for detailed subsection headers in content.
+*/
+const StyledH5 = ({ className,...props }) => /* @__PURE__ */ jsx("h5", {
+	className: cn("mt-3 font-bold text-base", styledHeading, className),
+	...props
+});
+const StyledH6 = ({ className,...props }) => /* @__PURE__ */ jsx("h6", {
+	className: cn("mt-3 ml-3 font-bold text-base", styledHeading, className),
+	...props
+});
+/**
+* Utility function to generate URL-friendly ID from heading text
+* @param children - The heading text content
+* @returns URL-friendly string for use as element ID
+*/
+const getId = (children) => String(children).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").toLowerCase();
+/**
+* Utility function to smoothly scroll to an element by ID
+* @param id - The element ID to scroll to
+*/
+const scrollToHash = (id) => {
+	const y = (document.getElementById(id)?.getBoundingClientRect()?.top ?? 0) + window.scrollY - 150;
+	window.scrollTo({
+		top: y,
+		behavior: "smooth"
+	});
+};
+/**
+* Utility function to detect if the pseudo-element (#) after the heading was clicked
+* @param parentElem - The heading element
+* @param e - Mouse event
+* @returns Whether the after pseudo-element was clicked
+*/
+const afterClick = (parentElem, e) => {
+	const parentLeft = parentElem.getBoundingClientRect().left;
+	const parentTop = parentElem.getBoundingClientRect().top;
+	const after = window.getComputedStyle(parentElem, ":after");
+	const afterStart = parentLeft + parseInt(after.getPropertyValue("left"), 10);
+	const afterEnd = afterStart + parseInt(after.width, 10);
+	const afterYStart = parentTop + parseInt(after.getPropertyValue("top"), 10);
+	const afterYEnd = afterYStart + parseInt(after.height, 10);
+	const mouseX = e.clientX;
+	const mouseY = e.clientY;
+	return mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd;
+};
+/**
+* HeadingWrapper Component
+*
+* Internal wrapper component that adds anchor link functionality to headings.
+* Handles ID generation, click-to-copy URL behavior, and smooth scrolling.
+*
+* @component
+* @accessibility
+* - Generates URL-friendly IDs for deep linking
+* - Provides accessible labels for anchor link functionality
+* - Maintains proper heading hierarchy and semantics
+* - Supports keyboard navigation and screen readers
+*/
+const HeadingWrapper = ({ H, children, className, isClickable,...props }) => {
+	const id = typeof children === "string" ? getId(children) : void 0;
+	const onClick = (e) => {
+		const { id: id$1 } = e.currentTarget;
+		if (afterClick(e.currentTarget, e) && typeof id$1 === "string") {
+			const url = `${window.location.href.split("#")[0]}#${id$1}`;
+			navigator.clipboard.writeText(url);
+			scrollToHash(id$1);
+		}
+	};
+	return /* @__PURE__ */ jsx(H, {
+		id,
+		onClick: isClickable ? onClick : void 0,
+		"aria-label": isClickable ? `Click to scroll to section ${id} and copy the link to the clipboard` : void 0,
+		className: cn(isClickable && styledAfter, className),
+		...props,
+		children
+	});
+};
+/**
+* H1 Component
+*
+* Primary page heading component. Does not include clickable anchor functionality
+* as it's typically used for main page titles rather than content sections.
+*
+* @example
+* ```tsx
+* <H1>Welcome to Our Website</H1>
+* <H1 className="text-blue-600">Custom Styled Title</H1>
+* ```
+*/
+const H1 = ({ isClickable: _,...props }) => /* @__PURE__ */ jsx(StyledH1, { ...props });
+/**
+* H2 Component
+*
+* Secondary heading component with optional anchor link functionality.
+* Perfect for major section headers with deep-linking capabilities.
+*
+* @example
+* ```tsx
+* <H2>Getting Started</H2>
+* <H2 isClickable>API Reference</H2>
+* ```
+*/
+const H2 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+	H: StyledH2,
+	isClickable,
+	...props
+});
+/**
+* H3 Component
+*
+* Tertiary heading component with optional anchor link functionality.
+* Used for subsection headers within major sections.
+*
+* @example
+* ```tsx
+* <H3>Configuration Options</H3>
+* <H3 isClickable>Advanced Settings</H3>
+* ```
+*/
+const H3 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+	H: StyledH3,
+	isClickable,
+	...props
+});
+/**
+* H4 Component
+*
+* Fourth-level heading component with optional anchor link functionality.
+* Used for detailed section organization.
+*
+* @example
+* ```tsx
+* <H4>Implementation Details</H4>
+* <H4 isClickable>Code Examples</H4>
+* ```
+*/
+const H4 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+	H: StyledH4,
+	isClickable,
+	...props
+});
+/**
+* H5 Component
+*
+* Fifth-level heading component with optional anchor link functionality.
+* Used for fine-grained content organization.
+*
+* @example
+* ```tsx
+* <H5>Technical Notes</H5>
+* <H5 isClickable>Best Practices</H5>
+* ```
+*/
+const H5 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+	H: StyledH5,
+	isClickable,
+	...props
+});
+const H6 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+	H: StyledH6,
+	isClickable,
+	...props
+});
+
+//#endregion
+export { H1, H2, H3, H4, H5, H6 };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Headers/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["StyledH1: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH2: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH3: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH4: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH5: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH6: FC<HTMLAttributes<HTMLHeadingElement>>","HeadingWrapper: HeadingType","id","H1: FC<HeadingProps>","H2: FC<HeadingProps>","H3: FC<HeadingProps>","H4: FC<HeadingProps>","H5: FC<HeadingProps>","H6: FC<HeadingProps>"],"sources":["../../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\n/**\n * Styled H1 Component\n *\n * Primary heading component for page titles and main content headers.\n * Does not include clickable anchor functionality.\n */\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => <h1 className={cn('mt-5 font-bold text-2xl', className)} {...props} />;\n\n/**\n * Styled H2 Component\n *\n * Secondary heading component with anchor link functionality when wrapped.\n * Used for major section headers in content.\n */\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h2\n    className={cn('mt-16 mb-2 font-bold text-2xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H3 Component\n *\n * Tertiary heading component with anchor link functionality when wrapped.\n * Used for subsection headers in content.\n */\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h3\n    className={cn('mt-5 mb-2 font-bold text-xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H4 Component\n *\n * Quaternary heading component with anchor link functionality when wrapped.\n * Used for minor section headers in content.\n */\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h4\n    className={cn('mt-3 font-bold text-lg', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H5 Component\n *\n * Fifth-level heading component with anchor link functionality when wrapped.\n * Used for detailed subsection headers in content.\n */\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h5\n    className={cn('mt-3 font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h6\n    className={cn('mt-3 ml-3 font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Props for heading components\n */\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  /**\n   * Whether the heading should be clickable with anchor link functionality.\n   * Enables copy-to-clipboard URL behavior and smooth scrolling.\n   * @default false (for H1), true (for H2-H5)\n   */\n  isClickable?: boolean;\n};\n\n/**\n * Internal props for the HeadingWrapper component\n */\ninterface HeadingGlobalProps extends HeadingProps {\n  /** The styled heading component to render */\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n}\n\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\n/**\n * Utility function to generate URL-friendly ID from heading text\n * @param children - The heading text content\n * @returns URL-friendly string for use as element ID\n */\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\n/**\n * Utility function to smoothly scroll to an element by ID\n * @param id - The element ID to scroll to\n */\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\n/**\n * Utility function to detect if the pseudo-element (#) after the heading was clicked\n * @param parentElem - The heading element\n * @param e - Mouse event\n * @returns Whether the after pseudo-element was clicked\n */\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left;\n  const parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10);\n  const afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10);\n  const afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX;\n  const mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\n/**\n * HeadingWrapper Component\n *\n * Internal wrapper component that adds anchor link functionality to headings.\n * Handles ID generation, click-to-copy URL behavior, and smooth scrolling.\n *\n * @component\n * @accessibility\n * - Generates URL-friendly IDs for deep linking\n * - Provides accessible labels for anchor link functionality\n * - Maintains proper heading hierarchy and semantics\n * - Supports keyboard navigation and screen readers\n */\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\n/**\n * H1 Component\n *\n * Primary page heading component. Does not include clickable anchor functionality\n * as it's typically used for main page titles rather than content sections.\n *\n * @example\n * ```tsx\n * <H1>Welcome to Our Website</H1>\n * <H1 className=\"text-blue-600\">Custom Styled Title</H1>\n * ```\n */\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\n/**\n * H2 Component\n *\n * Secondary heading component with optional anchor link functionality.\n * Perfect for major section headers with deep-linking capabilities.\n *\n * @example\n * ```tsx\n * <H2>Getting Started</H2>\n * <H2 isClickable>API Reference</H2>\n * ```\n */\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\n\n/**\n * H3 Component\n *\n * Tertiary heading component with optional anchor link functionality.\n * Used for subsection headers within major sections.\n *\n * @example\n * ```tsx\n * <H3>Configuration Options</H3>\n * <H3 isClickable>Advanced Settings</H3>\n * ```\n */\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\n\n/**\n * H4 Component\n *\n * Fourth-level heading component with optional anchor link functionality.\n * Used for detailed section organization.\n *\n * @example\n * ```tsx\n * <H4>Implementation Details</H4>\n * <H4 isClickable>Code Examples</H4>\n * ```\n */\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\n\n/**\n * H5 Component\n *\n * Fifth-level heading component with optional anchor link functionality.\n * Used for fine-grained content organization.\n *\n * @example\n * ```tsx\n * <H5>Technical Notes</H5>\n * <H5 isClickable>Best Practices</H5>\n * ```\n */\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n\nexport const H6: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH6} isClickable={isClickable} {...props} />\n);\n"],"mappings":"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"}