npm - @intlayer/design-system - Versions diffs - 9.0.0-canary.0 → 9.0.0-canary.2 - Mend

@intlayer/design-system 9.0.0-canary.0 → 9.0.0-canary.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (249) hide show

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StructureView.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { EditableFieldInput } from '@components/EditableField';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getDefaultNode,\n getNodeChildren,\n getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n useConfiguration,\n useEditedContentActions,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId, TypedNode } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport type { ContentNode } from 'intlayer';\nimport { Plus, Trash } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\n\ntype NodeTypeViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n section,\n dictionaryLocalId,\n keyPath,\n onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n const locales = useConfiguration()?.internationalization?.locales ?? [];\n const nodeType = getNodeType(section);\n const children = getNodeChildren(section);\n\n const onNodeTypeChange = (content?: ContentNode) => {\n const transformedContent = getDefaultNode(\n nodeType,\n locales,\n content\n ) as ContentNode;\n\n onNodeTypeChangeProp(transformedContent);\n };\n\n if (\n nodeType === NodeTypes.TRANSLATION \|\|\n nodeType === NodeTypes.CONDITION \|\|\n nodeType === NodeTypes.GENDER \|\|\n nodeType === NodeTypes.ENUMERATION \|\|\n nodeType === NodeTypes.PLURAL\n ) {\n const firstKey = Object.keys(\n (section as unknown as TypedNode)[nodeType as keyof typeof section]\n )[0];\n const childrenKeyPath = [\n ...keyPath,\n { type: nodeType, key: firstKey },\n ] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeTypes.ARRAY) {\n const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeTypes.OBJECT) {\n return (\n <>\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n <div className=\"mt-6 ml-10\">\n <StructureView\n keyPath={keyPath}\n section={section}\n dictionaryLocalId={dictionaryLocalId}\n />\n </div>\n </>\n );\n }\n\n return (\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n }\n />\n );\n};\n\ntype NodeWrapperProps = {\n sectionKey?: string;\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n sectionKey,\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n const handleRenameNodeKey = (keyName: string) => {\n renameEditedContent(dictionaryLocalId, keyName, keyPath);\n const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n const newKeyPath: KeyPath[] = [\n ...prevKeyPath,\n { ...lastKeyPath, key: keyName } as KeyPath,\n ];\n setFocusedContentKeyPath(newKeyPath);\n };\n\n return (\n <Container\n transparency=\"xl\"\n roundedSize=\"xl\"\n className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n border\n borderColor=\"text\"\n background=\"none\"\n aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n onClick={() => setFocusedContentKeyPath(keyPath)}\n >\n <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n {typeof sectionKey === 'string' && (\n <div className=\"w-full\">\n <div className=\"flex w-full items-center justify-between gap-10\">\n <EditableFieldInput\n name=\"key\"\n aria-label=\"Key\"\n placeholder={titleInput.placeholder.value}\n defaultValue={sectionKey}\n onSave={(value) => handleRenameNodeKey(value)}\n variant=\"invisible\"\n />\n <Button\n label={deleteButton.label.value}\n variant=\"hoverable\"\n size=\"icon-sm\"\n color=\"text\"\n className=\"translate-x-2\"\n Icon={Trash}\n onClick={() => {\n addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n setFocusedContentKeyPath(parentKeyPath);\n }}\n />\n </div>\n\n <span className=\"ml-3 text-neutral text-sm\">\n ( {camelCaseToSentence(sectionKey)} )\n </span>\n </div>\n )}\n <NodeTypeView\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n section={section}\n onNodeTypeChange={(content) => {\n addEditedContent(dictionaryLocalId, content, keyPath);\n }}\n />\n </div>\n </Container>\n );\n};\n\ntype ObjectViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { addNodeButton } = useIntlayer('structure-view');\n const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n const { addEditedContent } = useEditedContentActions();\n\n if (!section \|\| typeof section !== 'object') {\n return <div>Not an object</div>;\n }\n\n return (\n <div className=\"flex flex-col gap-2 overflow-y-auto\">\n <ul className=\"mr-auto flex flex-col gap-4\">\n {Object.keys(section).map((key) => (\n <li\n key={`${JSON.stringify(keyPath)}-object-${key}`}\n className=\"flex w-full\"\n >\n <NodeView\n sectionKey={key}\n section={section?.[key as keyof typeof section]}\n keyPath={[...keyPath, { type: NodeTypes.OBJECT, key }]}\n dictionaryLocalId={dictionaryLocalId}\n />\n </li>\n ))}\n </ul>\n <Button\n label={addNodeButton.label.value}\n variant=\"hoverable\"\n size=\"md\"\n color=\"text\"\n Icon={Plus}\n className=\"flex-1\"\n onClick={() => {\n const newKey = 'newKey';\n const newKeyPath = [\n ...keyPath,\n { type: NodeTypes.OBJECT, key: newKey },\n ] as KeyPath[];\n addEditedContent(dictionaryLocalId, '', newKeyPath);\n setFocusedContentKeyPath(newKeyPath);\n }}\n >\n {addNodeButton.text}\n </Button>\n </div>\n );\n};\n\ntype StructureViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n if (\n !section \|\|\n typeof section !== 'object' \|\|\n typeof section.nodeType === 'string'\n ) {\n return (\n <NodeView\n sectionKey=\"content\"\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n }\n\n return (\n <ObjectView\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"StructureView.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { EditableFieldInput } from '@components/EditableField';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n getDefaultNode,\n getNodeChildren,\n getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n useConfiguration,\n useEditedContentActions,\n useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId, TypedNode } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport type { ContentNode } from 'intlayer';\nimport { Plus, Trash } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\n\ntype NodeTypeViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n section,\n dictionaryLocalId,\n keyPath,\n onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n const locales = useConfiguration()?.internationalization?.locales ?? [];\n const nodeType = getNodeType(section);\n const children = getNodeChildren(section);\n\n const onNodeTypeChange = (content?: ContentNode) => {\n const transformedContent = getDefaultNode(\n nodeType,\n locales,\n content\n ) as ContentNode;\n\n onNodeTypeChangeProp(transformedContent);\n };\n\n if (\n nodeType === NodeTypes.TRANSLATION \|\|\n nodeType === NodeTypes.CONDITION \|\|\n nodeType === NodeTypes.GENDER \|\|\n nodeType === NodeTypes.ENUMERATION \|\|\n nodeType === NodeTypes.PLURAL\n ) {\n const firstKey = Object.keys(\n (section as unknown as TypedNode)[nodeType as keyof typeof section]\n )[0];\n const childrenKeyPath = [\n ...keyPath,\n { type: nodeType, key: firstKey },\n ] as KeyPath[];\n\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeTypes.ARRAY) {\n const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n return (\n <div className=\"flex w-full flex-col gap-1\">\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n\n <NodeTypeView\n section={children}\n keyPath={childrenKeyPath}\n dictionaryLocalId={dictionaryLocalId}\n onNodeTypeChange={onNodeTypeChange}\n />\n </div>\n );\n }\n\n if (nodeType === NodeTypes.OBJECT) {\n return (\n <>\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(\n getDefaultNode(nodeType, locales) as ContentNode\n )\n }\n />\n <div className=\"mt-6 ml-10\">\n <StructureView\n keyPath={keyPath}\n section={section}\n dictionaryLocalId={dictionaryLocalId}\n />\n </div>\n </>\n );\n }\n\n return (\n <NodeTypeSelector\n section={section}\n onValueChange={(nodeType) =>\n onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n }\n />\n );\n};\n\ntype NodeWrapperProps = {\n sectionKey?: string;\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n sectionKey,\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { focusedContent, setFocusedContentKeyPath } =\n useFocusUnmergedDictionary();\n const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n const { titleInput, deleteButton } = useIntlayer('structure-view');\n\n const handleRenameNodeKey = (keyName: string) => {\n renameEditedContent(dictionaryLocalId, keyName, keyPath);\n const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n const lastKeyPath: KeyPath = keyPath[keyPath.length - 1]!;\n const newKeyPath: KeyPath[] = [\n ...prevKeyPath,\n { ...lastKeyPath, key: keyName } as KeyPath,\n ];\n setFocusedContentKeyPath(newKeyPath);\n };\n\n return (\n <Container\n transparency=\"xl\"\n roundedSize=\"2xl\"\n className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n border\n borderColor=\"text\"\n background=\"none\"\n aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n onClick={() => setFocusedContentKeyPath(keyPath)}\n >\n <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n {typeof sectionKey === 'string' && (\n <div className=\"w-full\">\n <div className=\"flex w-full items-center justify-between gap-10\">\n <EditableFieldInput\n name=\"key\"\n aria-label=\"Key\"\n placeholder={titleInput.placeholder.value}\n defaultValue={sectionKey}\n onSave={(value) => handleRenameNodeKey(value)}\n variant=\"invisible\"\n />\n <Button\n label={deleteButton.label.value}\n variant=\"hoverable\"\n size=\"icon-sm\"\n color=\"text\"\n className=\"translate-x-2\"\n Icon={Trash}\n onClick={() => {\n addEditedContent(dictionaryLocalId, undefined, keyPath);\n\n const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n setFocusedContentKeyPath(parentKeyPath);\n }}\n />\n </div>\n\n <span className=\"ml-3 text-neutral text-sm\">\n ( {camelCaseToSentence(sectionKey)} )\n </span>\n </div>\n )}\n <NodeTypeView\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n section={section}\n onNodeTypeChange={(content) => {\n addEditedContent(dictionaryLocalId, content, keyPath);\n }}\n />\n </div>\n </Container>\n );\n};\n\ntype ObjectViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n const { addNodeButton } = useIntlayer('structure-view');\n const { setFocusedContentKeyPath } = useFocusUnmergedDictionary();\n const { addEditedContent } = useEditedContentActions();\n\n if (!section \|\| typeof section !== 'object') {\n return <div>Not an object</div>;\n }\n\n return (\n <div className=\"flex flex-col gap-2 overflow-y-auto\">\n <ul className=\"mr-auto flex flex-col gap-4\">\n {Object.keys(section).map((key) => (\n <li\n key={`${JSON.stringify(keyPath)}-object-${key}`}\n className=\"flex w-full\"\n >\n <NodeView\n sectionKey={key}\n section={section?.[key as keyof typeof section]}\n keyPath={[...keyPath, { type: NodeTypes.OBJECT, key }]}\n dictionaryLocalId={dictionaryLocalId}\n />\n </li>\n ))}\n </ul>\n <Button\n label={addNodeButton.label.value}\n variant=\"hoverable\"\n size=\"md\"\n color=\"text\"\n Icon={Plus}\n className=\"flex-1\"\n onClick={() => {\n const newKey = 'newKey';\n const newKeyPath = [\n ...keyPath,\n { type: NodeTypes.OBJECT, key: newKey },\n ] as KeyPath[];\n addEditedContent(dictionaryLocalId, '', newKeyPath);\n setFocusedContentKeyPath(newKeyPath);\n }}\n >\n {addNodeButton.text}\n </Button>\n </div>\n );\n};\n\ntype StructureViewProps = {\n dictionaryLocalId: LocalDictionaryId;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n section,\n keyPath,\n dictionaryLocalId,\n}) => {\n if (\n !section \|\|\n typeof section !== 'object' \|\|\n typeof section.nodeType === 'string'\n ) {\n return (\n <NodeView\n sectionKey=\"content\"\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n }\n\n return (\n <ObjectView\n section={section}\n keyPath={keyPath}\n dictionaryLocalId={dictionaryLocalId}\n />\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/DictionaryFieldEditor/contentEditor.content.mjs ADDED Viewed

@@ -0,0 +1,79 @@
+import { t } from "intlayer";
+//#region src/components/DictionaryFieldEditor/contentEditor.content.ts
+const contentEditorContent = {
+	key: "content-editor",
+	content: {
+		itemPagination: { label: t({
+			en: "Item",
+			"en-GB": "Item",
+			fr: "Élément",
+			es: "Elemento",
+			de: "Element",
+			ja: "項目",
+			ko: "항목",
+			zh: "项目",
+			it: "Elemento",
+			pt: "Item",
+			hi: "आइटम",
+			ar: "عنصر",
+			ru: "Элемент",
+			tr: "Öğe",
+			pl: "Element",
+			id: "Item",
+			vi: "Mục",
+			uk: "Елемент"
+		}) },
+		variantSwitcher: { label: t({
+			en: "Variant",
+			"en-GB": "Variant",
+			fr: "Variante",
+			es: "Variante",
+			de: "Variante",
+			ja: "バリアント",
+			ko: "변형",
+			zh: "变体",
+			it: "Variante",
+			pt: "Variante",
+			hi: "वेरिएंट",
+			ar: "نوع",
+			ru: "Вариант",
+			tr: "Varyant",
+			pl: "Wariant",
+			id: "Varian",
+			vi: "Biến thể",
+			uk: "Варіант"
+		}) },
+		metaSwitcher: { label: t({
+			en: "Meta",
+			"en-GB": "Meta",
+			fr: "Méta",
+			es: "Meta",
+			de: "Meta",
+			ja: "メタ",
+			ko: "메타",
+			zh: "元",
+			it: "Meta",
+			pt: "Meta",
+			hi: "मेटा",
+			ar: "بيانات وصفية",
+			ru: "Мета",
+			tr: "Meta",
+			pl: "Meta",
+			id: "Meta",
+			vi: "Meta",
+			uk: "Мета"
+		}) }
+	},
+	title: "Content editor",
+	description: "Labels and controls for the dictionary content editor, including item pagination, variant switcher, and meta switcher used to navigate between sibling dictionaries sharing the same key.",
+	tags: [
+		"content editor",
+		"dictionary",
+		"navigation"
+	]
+};
+//#endregion
+export { contentEditorContent as default };
+//# sourceMappingURL=contentEditor.content.mjs.map

package/dist/esm/components/DictionaryFieldEditor/contentEditor.content.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"contentEditor.content.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/contentEditor.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst contentEditorContent = {\n key: 'content-editor',\n content: {\n itemPagination: {\n label: t({\n en: 'Item',\n 'en-GB': 'Item',\n fr: 'Élément',\n es: 'Elemento',\n de: 'Element',\n ja: '項目',\n ko: '항목',\n zh: '项目',\n it: 'Elemento',\n pt: 'Item',\n hi: 'आइटम',\n ar: 'عنصر',\n ru: 'Элемент',\n tr: 'Öğe',\n pl: 'Element',\n id: 'Item',\n vi: 'Mục',\n uk: 'Елемент',\n }),\n },\n variantSwitcher: {\n label: t({\n en: 'Variant',\n 'en-GB': 'Variant',\n fr: 'Variante',\n es: 'Variante',\n de: 'Variante',\n ja: 'バリアント',\n ko: '변형',\n zh: '变体',\n it: 'Variante',\n pt: 'Variante',\n hi: 'वेरिएंट',\n ar: 'نوع',\n ru: 'Вариант',\n tr: 'Varyant',\n pl: 'Wariant',\n id: 'Varian',\n vi: 'Biến thể',\n uk: 'Варіант',\n }),\n },\n metaSwitcher: {\n label: t({\n en: 'Meta',\n 'en-GB': 'Meta',\n fr: 'Méta',\n es: 'Meta',\n de: 'Meta',\n ja: 'メタ',\n ko: '메타',\n zh: '元',\n it: 'Meta',\n pt: 'Meta',\n hi: 'मेटा',\n ar: 'بيانات وصفية',\n ru: 'Мета',\n tr: 'Meta',\n pl: 'Meta',\n id: 'Meta',\n vi: 'Meta',\n uk: 'Мета',\n }),\n },\n },\n title: 'Content editor',\n description:\n 'Labels and controls for the dictionary content editor, including item pagination, variant switcher, and meta switcher used to navigate between sibling dictionaries sharing the same key.',\n tags: ['content editor', 'dictionary', 'navigation'],\n} satisfies Dictionary;\n\nexport default contentEditorContent;\n"],"mappings":";;;AAEA,MAAM,uBAAuB;CAC3B,KAAK;CACL,SAAS;EACP,gBAAgB,EACd,OAAO,EAAE;GACP,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,EACH;EACD,iBAAiB,EACf,OAAO,EAAE;GACP,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,EACH;EACD,cAAc,EACZ,OAAO,EAAE;GACP,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,EACH;EACF;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAkB;EAAc;EAAa;CACrD"}

package/dist/esm/components/Form/Form.mjs CHANGED Viewed

@@ -1,24 +1,4 @@
-import { Button } from "../Button/Button.mjs";
-import { FormItem } from "./FormItem.mjs";
-import { FormField } from "./FormField.mjs";
-import { FormLabelLayout } from "./layout/FormLabelLayout.mjs";
-import { FormElement } from "./elements/FormElement.mjs";
-import { EditableFieldInputElement } from "./elements/EditableFieldInputElement.mjs";
-import { EditableFieldTextAreaElement } from "./elements/EditableFieldTextAreaElement.mjs";
-import { InputElement } from "./elements/InputElement.mjs";
-import { InputPasswordElement } from "./elements/InputPasswordElement.mjs";
-import { OTPElement } from "./elements/OTPElement.mjs";
-import { SearchInputElement } from "./elements/SearchInputElement.mjs";
-import { TextAreaElement } from "./elements/TextAreaElement.mjs";
-import { AutoSizedTextAreaElement } from "./elements/AutoSizeTextAreaElement.mjs";
-import { CheckboxElement } from "./elements/CheckboxElement.mjs";
-import { MultiSelectElement } from "./elements/MultiselectElement.mjs";
-import { SelectElement } from "./elements/SelectElement.mjs";
-import { SwitchSelectorElement } from "./elements/SwitchSelectorElement.mjs";
 import { Form as Form$1 } from "./FormBase.mjs";
-import { FormControl } from "./FormControl.mjs";
-import { FormDescription } from "./FormDescription.mjs";
-import { FormMessage } from "./FormMessage.mjs";
 //#region src/components/Form/Form.tsx
 /**
@@ -32,34 +12,14 @@ import { FormMessage } from "./FormMessage.mjs";
 *  onSubmitError={onSubmitError}
 *  autoComplete
 * >
-*   <Form.Input name="name" label="Name" />
-*   <Form.Button type="submit" label="Click to submit">
+*   <FormInput name="name" label="Name" />
+*   <FormButton type="submit" label="Click to submit">
 *      Submit
-*   </Form.Button>
+*   </FormButton>
 * </Form>
 * ```
 */
 const Form = Form$1;
-Form.Description = FormDescription;
-Form.Control = FormControl;
-Form.Field = FormField;
-Form.Item = FormItem;
-Form.Label = FormLabelLayout;
-Form.Message = FormMessage;
-Form.Element = FormElement;
-Form.Input = InputElement;
-Form.InputPassword = InputPasswordElement;
-Form.Checkbox = CheckboxElement;
-Form.TextArea = TextAreaElement;
-Form.AutoSizedTextArea = AutoSizedTextAreaElement;
-Form.Button = Button;
-Form.Select = SelectElement;
-Form.MultiSelect = MultiSelectElement;
-Form.EditableFieldInput = EditableFieldInputElement;
-Form.EditableFieldTextArea = EditableFieldTextAreaElement;
-Form.SwitchSelector = SwitchSelectorElement;
-Form.OTP = OTPElement;
-Form.SearchInput = SearchInputElement;
 //#endregion
 export { Form };

package/dist/esm/components/Form/Form.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.mjs","names":["FormRoot"],"sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import { Button } from '../Button';\nimport {\n FormElement,\n InputElement,\n InputPasswordElement,\n TextAreaElement,\n} from './elements';\nimport { AutoSizedTextAreaElement } from './elements/AutoSizeTextAreaElement';\nimport { CheckboxElement } from './elements/CheckboxElement';\nimport { EditableFieldInputElement } from './elements/EditableFieldInputElement';\nimport { EditableFieldTextAreaElement } from './elements/EditableFieldTextAreaElement';\nimport { MultiSelectElement } from './elements/MultiselectElement';\nimport { OTPElement } from './elements/OTPElement';\nimport { SearchInputElement } from './elements/SearchInputElement';\nimport { SelectElement } from './elements/SelectElement';\nimport { SwitchSelectorElement } from './elements/SwitchSelectorElement';\nimport { Form as FormRoot } from './FormBase';\nimport { FormControl } from './FormControl';\nimport { FormDescription } from './FormDescription';\nimport { FormField } from './FormField';\nimport { FormItem } from './FormItem';\nimport { FormMessage } from './FormMessage';\nimport { FormLabelLayout } from './layout';\n\~~ntype FormType = typeof FormRoot & {\~~n Description: typeof FormDescription;\n Control: typeof FormControl;\n Field: typeof FormField;\n Item: typeof FormItem;\n Label: typeof FormLabelLayout;\n Message: typeof FormMessage;\n Element: typeof FormElement;\n Button: typeof Button;\n Input: typeof InputElement;\n InputPassword: typeof InputPasswordElement;\n Checkbox: typeof CheckboxElement;\n TextArea: typeof TextAreaElement;\n AutoSizedTextArea: typeof AutoSizedTextAreaElement;\n MultiSelect: typeof MultiSelectElement;\n Select: typeof SelectElement;\n EditableFieldInput: typeof EditableFieldInputElement;\n EditableFieldTextArea: typeof EditableFieldTextAreaElement;\n SwitchSelector: typeof SwitchSelectorElement;\n OTP: typeof OTPElement;\n SearchInput: typeof SearchInputElement;\n};\n\n/*\n Form components\n \n Example of usage:\n * ```jsx\n * <Form\n * schema={ZodSchema}\n * onSubmitSuccess={onSubmitSuccess}\n * onSubmitError={onSubmitError}\n * autoComplete\n * >\n * <~~Form.Input~~ name=\"name\" label=\"Name\" />\n * <~~Form.Button~~ type=\"submit\" label=\"Click to submit\">\n * Submit\n * </~~Form.Button~~>\n * </Form>\n * ```\n */\nexport const Form = FormRoot ~~as FormType~~;\nForm.Description = FormDescription;\nForm.Control = FormControl;\nForm.Field = FormField;\nForm.Item = FormItem;\nForm.Label = FormLabelLayout;\nForm.Message = FormMessage;\nForm.Element = FormElement;\nForm.Input = InputElement;\nForm.InputPassword = InputPasswordElement;\nForm.Checkbox = CheckboxElement;\nForm.TextArea = TextAreaElement;\nForm.AutoSizedTextArea = AutoSizedTextAreaElement;\nForm.Button = Button;\nForm.Select = SelectElement;\nForm.MultiSelect = MultiSelectElement;\nForm.EditableFieldInput = EditableFieldInputElement;\nForm.EditableFieldTextArea = EditableFieldTextAreaElement;\nForm.SwitchSelector = SwitchSelectorElement;\nForm.OTP = OTPElement;\nForm.SearchInput = SearchInputElement;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA~~,MAAa,OAAOA;AACpB,KAAK,cAAc;AACnB,KAAK,UAAU;AACf,KAAK,QAAQ;AACb,KAAK,OAAO;AACZ,KAAK,QAAQ;AACb,KAAK,UAAU;AACf,KAAK,UAAU;AACf,KAAK,QAAQ;AACb,KAAK,gBAAgB;AACrB,KAAK,WAAW;AAChB,KAAK,WAAW;AAChB,KAAK,oBAAoB;AACzB,KAAK,SAAS;AACd,KAAK,SAAS;AACd,KAAK,cAAc;AACnB,KAAK,qBAAqB;AAC1B,KAAK,wBAAwB;AAC7B,KAAK,iBAAiB;AACtB,KAAK,MAAM;AACX,KAAK,cAAc"}
1	+ {"version":3,"file":"Form.mjs","names":["FormRoot"],"sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import { Form as FormRoot } from './FormBase';\n\n/*\n Form components\n \n Example of usage:\n * ```jsx\n * <Form\n * schema={ZodSchema}\n * onSubmitSuccess={onSubmitSuccess}\n * onSubmitError={onSubmitError}\n * autoComplete\n * >\n * <FormInput name=\"name\" label=\"Name\" />\n * <FormButton type=\"submit\" label=\"Click to submit\">\n * Submit\n * </FormButton>\n * </Form>\n * ```\n */\nexport const Form = FormRoot;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,OAAOA"}

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

@@ -1,8 +1,7 @@
 'use client';
-import { useFormField } from "../FormField.mjs";
+import { FormField, 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";
@@ -45,7 +44,7 @@ const FormFieldElement = ({ field, name, label, Element, isRequired = false, inf
 */
 const FormElement = (props) => {
 	const { control } = useFormContext();
-	return /* @__PURE__ */ jsx(Form.Field, {
+	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name: props.name,
 		render: ({ field }) => /* @__PURE__ */ jsx(FormFieldElement, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { ~~Form~~ ~~} from '../Form';\nimport {~~ useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n layoutClassName?: string;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n layoutClassName,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n };\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n className={layoutClassName}\n >\n <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <~~Form.Field~~\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;AA4BA~~,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,iBACA,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC,gBAAD;EACE,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;EAChB,WAAW;YAEX,oBAAC,SAAD;GACE,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;GACC;EACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,~~KAAK,OAAN~~;EACW;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC,kBAAD;GAAkB,GAAI;GAAc;GAAS;EACpE"}
1	+ {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { FormField, useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n layoutClassName?: string;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n layoutClassName,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n };\n\n return (\n <FormItemLayout\n htmlFor={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n aria-invalid={!!error}\n className={layoutClassName}\n >\n <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <FormField\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":";;;;;;;;AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,iBACA,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC,gBAAD;EACE,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;EAChB,WAAW;YAEX,oBAAC,SAAD;GACE,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;GACC;EACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,WAAD;EACW;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC,kBAAD;GAAkB,GAAI;GAAc;GAAS;EACpE"}

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

@@ -1,9 +1,8 @@
 'use client';
 import { MultiSelect } from "../../Select/Multiselect.mjs";
-import { useFormField } from "../FormField.mjs";
+import { FormField, 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";
@@ -28,7 +27,7 @@ const MultiSelectFieldContent = ({ field, name, label, description, isRequired,
 };
 const MultiSelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
 	const { control } = useFormContext();
-	return /* @__PURE__ */ jsx(Form.Field, {
+	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
 		render: ({ field }) => /* @__PURE__ */ jsx(MultiSelectFieldContent, {

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

	@@ -1 +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":"~~;;;;;;;;;;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"}
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 { FormField, 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 <FormField\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":";;;;;;;;;AAqBA,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,WAAD;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 CHANGED Viewed

@@ -1,10 +1,9 @@
 'use client';
-import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
-import { useFormField } from "../FormField.mjs";
+import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
+import { FormField, 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";
@@ -85,7 +84,7 @@ const OTPFieldContent = ({ field, name, label, description, isRequired, info, sh
 };
 const OTPElement = ({ name, description, label, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
 	const { control } = useFormContext();
-	return /* @__PURE__ */ jsx(Form.Field, {
+	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
 		render: ({ field }) => /* @__PURE__ */ jsx(OTPFieldContent, {

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

	@@ -1 +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":"~~;;;;;;;;;;;;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"}
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 { FormField, 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 <FormField\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":";;;;;;;;;;;AA2BA,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,WAAD;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/SelectElement.mjs CHANGED Viewed

@@ -1,9 +1,8 @@
 'use client';
 import { Select } from "../../Select/Select.mjs";
-import { useFormField } from "../FormField.mjs";
+import { FormField, 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";
@@ -28,7 +27,7 @@ const SelectFieldContent = ({ field, name, label, description, isRequired, info,
 };
 const SelectElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
 	const { control } = useFormContext();
-	return /* @__PURE__ */ jsx(Form.Field, {
+	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
 		render: ({ field }) => /* @__PURE__ */ jsx(SelectFieldContent, {

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

	@@ -1 +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":"~~;;;;;;;;;;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"}
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 { FormField, 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 <FormField\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":";;;;;;;;;AAkBA,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,WAAD;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 CHANGED Viewed

@@ -1,9 +1,8 @@
 'use client';
 import { SwitchSelector } from "../../SwitchSelector/SwitchSelector.mjs";
-import { useFormField } from "../FormField.mjs";
+import { FormField, 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";
@@ -31,7 +30,7 @@ const SwitchSelectorFieldContent = ({ field, name, label, description, isRequire
 };
 const SwitchSelectorElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
 	const { control } = useFormContext();
-	return /* @__PURE__ */ jsx(Form.Field, {
+	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
 		render: ({ field }) => /* @__PURE__ */ jsx(SwitchSelectorFieldContent, {

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

	@@ -1 +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\n {...field}\n {...props}\n onChange={(value: any) => {\n field.onChange(value);\n props.onChange?.(value);\n }}\n >\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;GACE,GAAI;GACJ,GAAI;GACJ,WAAW,UAAe;AACxB,UAAM,SAAS,MAAM;AACrB,UAAM,WAAW,MAAM;;GAGxB;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"}
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 { FormField, 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\n {...field}\n {...props}\n onChange={(value: any) => {\n field.onChange(value);\n props.onChange?.(value);\n }}\n >\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 <FormField\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":";;;;;;;;;AAqBA,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;GACE,GAAI;GACJ,GAAI;GACJ,WAAW,UAAe;AACxB,UAAM,SAAS,MAAM;AACrB,UAAM,WAAW,MAAM;;GAGxB;GACc;EACF;;AAIrB,MAAa,yBAAyB,EACpC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YAC6B;CAChC,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,WAAD;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/index.mjs CHANGED Viewed

@@ -1,5 +1,24 @@
-import { useFormField } from "./FormField.mjs";
+import { Button } from "../Button/Button.mjs";
+import { FormItem } from "./FormItem.mjs";
+import { FormField, useFormField } from "./FormField.mjs";
+import { FormControl } from "./FormControl.mjs";
+import { FormDescription } from "./FormDescription.mjs";
+import { FormMessage } from "./FormMessage.mjs";
+import { FormLabelLayout } from "./layout/FormLabelLayout.mjs";
+import { FormElement } from "./elements/FormElement.mjs";
+import { AutoSizedTextAreaElement } from "./elements/AutoSizeTextAreaElement.mjs";
+import { CheckboxElement } from "./elements/CheckboxElement.mjs";
+import { EditableFieldInputElement } from "./elements/EditableFieldInputElement.mjs";
+import { EditableFieldTextAreaElement } from "./elements/EditableFieldTextAreaElement.mjs";
+import { InputElement } from "./elements/InputElement.mjs";
+import { InputPasswordElement } from "./elements/InputPasswordElement.mjs";
+import { MultiSelectElement } from "./elements/MultiselectElement.mjs";
+import { OTPElement } from "./elements/OTPElement.mjs";
+import { SearchInputElement } from "./elements/SearchInputElement.mjs";
+import { SelectElement } from "./elements/SelectElement.mjs";
+import { SwitchSelectorElement } from "./elements/SwitchSelectorElement.mjs";
+import { TextAreaElement } from "./elements/TextAreaElement.mjs";
 import { useForm } from "./FormBase.mjs";
 import { Form } from "./Form.mjs";
-export { Form, useForm, useFormField };
+export { Form, AutoSizedTextAreaElement as FormAutoSizedTextArea, Button as FormButton, CheckboxElement as FormCheckbox, FormControl, FormDescription, EditableFieldInputElement as FormEditableFieldInput, EditableFieldTextAreaElement as FormEditableFieldTextArea, FormElement, FormField, InputElement as FormInput, InputPasswordElement as FormInputPassword, FormItem, FormLabelLayout as FormLabel, FormMessage, MultiSelectElement as FormMultiSelect, OTPElement as FormOTP, SearchInputElement as FormSearchInput, SelectElement as FormSelect, SwitchSelectorElement as FormSwitchSelector, TextAreaElement as FormTextArea, useForm, useFormField };

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

@@ -1,10 +1,13 @@
 import { cn } from "../../../utils/cn.mjs";
+import { FormItem } from "../FormItem.mjs";
+import { FormControl } from "../FormControl.mjs";
+import { FormDescription } from "../FormDescription.mjs";
+import { FormMessage } from "../FormMessage.mjs";
 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, className }) => /* @__PURE__ */ jsxs(Form.Item, {
+const FormItemLayout = ({ label, description, isRequired, info, children, showErrorMessage = true, htmlFor, className }) => /* @__PURE__ */ jsxs(FormItem, {
 	className: cn("flex w-full flex-col flex-wrap gap-2 px-1 py-2", className),
 	children: [
 		(description || label) && /* @__PURE__ */ jsxs("div", {
@@ -14,10 +17,10 @@ const FormItemLayout = ({ label, description, isRequired, info, children, showEr
 				info,
 				htmlFor,
 				children: label
-			}), description && /* @__PURE__ */ jsx(Form.Description, { children: description })]
+			}), description && /* @__PURE__ */ jsx(FormDescription, { children: description })]
 		}),
-		/* @__PURE__ */ jsx(Form.Control, { children }),
-		showErrorMessage && /* @__PURE__ */ jsx(Form.Message, { "data-testid": "error-message" })
+		/* @__PURE__ */ jsx(FormControl, { children }),
+		showErrorMessage && /* @__PURE__ */ jsx(FormMessage, { "data-testid": "error-message" })
 	]
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport 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 className?: string;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n label,\n description,\n isRequired,\n info,\n children,\n showErrorMessage = true,\n htmlFor,\n className,\n}) => (\n <~~Form.Item~~\n className={cn('flex w-full flex-col flex-wrap gap-2 px-1 py-2', className)}\n >\n {(description \|\| label) && (\n <div className=\"flex max-w-full 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":"~~;;;;;;AAaA~~,MAAa,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,SACA,gBAEA,qBAAC,~~KAAK,MAAN~~;CACE,WAAW,GAAG,kDAAkD,UAAU;WAD5E;GAGI,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"}
1	+ {"version":3,"file":"FormItemLayout.mjs","names":[],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, ReactNode } from 'react';\nimport { FormControl } from '../FormControl';\nimport { FormDescription } from '../FormDescription';\nimport { FormItem } from '../FormItem';\nimport { FormMessage } from '../FormMessage';\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 className?: string;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n label,\n description,\n isRequired,\n info,\n children,\n showErrorMessage = true,\n htmlFor,\n className,\n}) => (\n <FormItem\n className={cn('flex w-full flex-col flex-wrap gap-2 px-1 py-2', className)}\n >\n {(description \|\| label) && (\n <div className=\"flex max-w-full 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 && <FormDescription>{description}</FormDescription>}\n </div>\n )}\n <FormControl>{children}</FormControl>\n\n {showErrorMessage && <FormMessage data-testid=\"error-message\" />}\n </FormItem>\n);\n"],"mappings":";;;;;;;;;AAgBA,MAAa,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,SACA,gBAEA,qBAAC,UAAD;CACE,WAAW,GAAG,kDAAkD,UAAU;WAD5E;GAGI,eAAe,UACf,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,iBAAD;IACc;IACN;IACG;cAER;IACe,GAEnB,eAAe,oBAAC,iBAAD,YAAkB,aAA8B,EAC5D;;EAER,oBAAC,aAAD,EAAc,UAAuB;EAEpC,oBAAoB,oBAAC,aAAD,EAAa,eAAY,iBAAkB;EACvD"}

package/dist/esm/components/LanguageBackground/LanguageBackground.mjs CHANGED Viewed

@@ -1,20 +1,15 @@
 'use client';
-import { Suspense, lazy, startTransition, useEffect, useState } from "react";
+import { useIsMounted } from "../../hooks/useIsMounted.mjs";
+import { Suspense, lazy } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/LanguageBackground/LanguageBackground.tsx
 const LazyLanguageSection = lazy(() => import("./LanguageSection.mjs").then((m) => ({ default: m.LanguageSection })));
 const LanguageBackground = ({ children }) => {
-	const [mounted, setMounted] = useState(false);
-	useEffect(() => {
-		startTransition(() => {
-			setMounted(true);
-		});
-	}, []);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx("div", {
 		className: "absolute top-0 left-0 -z-1 flex size-full items-center justify-center",
-		children: mounted && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyLanguageSection, { className: "mt-[30%]" }) })
+		children: useIsMounted() && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyLanguageSection, { className: "mt-[30%]" }) })
 	})] });
 };

package/dist/esm/components/LanguageBackground/LanguageBackground.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LanguageBackground.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageBackground.tsx"],"sourcesContent":["'use client';\n\nimport {\n type FC~~,\n~~ lazy~~,\n~~ type PropsWithChildren~~,\n~~ Suspense~~,\n startTransition,\n useEffect,\n useState,\n~~} from 'react';\n\nconst LazyLanguageSection = lazy(() =>\n import('./LanguageSection').then((m) => ({ default: m.LanguageSection }))\n);\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => {\n const ~~[mounted,~~ ~~setMounted]~~ = ~~useState~~(~~false~~);\n\n useEffect(() => {\n // startTransition defers the background as a low-priority update so the\n // sign-in form paints before React starts loading the flag section chunk.\n startTransition(() => {\n setMounted(true);\n });\n }, []);\n\n return (\n <>\n {children}\n <div className=\"absolute top-0 left-0 -z-1 flex size-full items-center justify-center\">\n {~~mounted~~ && (\n <Suspense>\n <LazyLanguageSection className=\"mt-[30%]\" />\n </Suspense>\n )}\n </div>\n </>\n );\n};\n"],"mappings":"~~;;;;;;AAYA~~,MAAM,sBAAsB,WAC1B,OAAO,yBAAqB,MAAM,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAC1E;AAED,MAAa,sBAA6C,EAAE,eAAe;~~CACzE~~,~~MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,iBAAgB;AAGd,wBAAsB;AACpB,cAAW,KAAK;IAChB;IACD,EAAE,CAAC;AAEN,~~QACE,8CACG,UACD,oBAAC,OAAD;EAAK,WAAU;~~YACZ~~,~~WACC~~,oBAAC,UAAD,YACE,oBAAC,qBAAD,EAAqB,WAAU,YAAa,GACnC;EAET,EACL"}
1	+ {"version":3,"file":"LanguageBackground.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageBackground.tsx"],"sourcesContent":["'use client';\n\nimport { useIsMounted } from '@hooks/useIsMounted';\nimport { type FC, lazy, type PropsWithChildren, Suspense } from 'react';\n\nconst LazyLanguageSection = lazy(() =>\n import('./LanguageSection').then((m) => ({ default: m.LanguageSection }))\n);\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => {\n const isMounted = useIsMounted();\n\n return (\n <>\n {children}\n <div className=\"absolute top-0 left-0 -z-1 flex size-full items-center justify-center\">\n {isMounted && (\n <Suspense>\n <LazyLanguageSection className=\"mt-[30%]\" />\n </Suspense>\n )}\n </div>\n </>\n );\n};\n"],"mappings":";;;;;;;AAKA,MAAM,sBAAsB,WAC1B,OAAO,yBAAqB,MAAM,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAC1E;AAED,MAAa,sBAA6C,EAAE,eAAe;AAGzE,QACE,8CACG,UACD,oBAAC,OAAD;EAAK,WAAU;YALD,cAMF,IACR,oBAAC,UAAD,YACE,oBAAC,qBAAD,EAAqB,WAAU,YAAa,GACnC;EAET,EACL"}

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
 'use client';
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector } from "../SwitchSelector/SwitchSelector.mjs";
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
 import { useMemo, useRef, useState } from "react";
 import { Check, Globe, MoveVertical } from "lucide-react";

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs CHANGED Viewed

@@ -50,7 +50,7 @@ const StrongRenderer = (props) => /* @__PURE__ */ jsx("strong", {
 const MemoizedCodeBlock = memo(({ className, children, isDarkMode, lang, ...rest }) => {
 	const content = String(children ?? "").replace(/\n$/, "");
 	if (!!!className) return /* @__PURE__ */ jsx("code", {
-		className: "rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm",
+		className: "scale-80 rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono",
 		children: content.replace(/&(?:amp;)?#(\d+);/g, (_, code) => String.fromCharCode(parseInt(code, 10)))
 	});
 	const language = className?.replace(/lang(?:uage)?-/, "") || "plaintext";