@intlayer/design-system 8.11.3 → 8.12.0-canary.0

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs

@@ -1,6 +1,5 @@
 'use client';
 
-import { ButtonColor } from "../../Button/Button.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAddDictionary } from "../../../api/hooks/dictionary.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryCreationForm.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.tsx"],"sourcesContent":["'use client';\n\nimport { useAddDictionary, useGetProjects } from '@api/index';\nimport { useSession } from '@api/useAuth';\nimport { ButtonColor } from '@components/Button';\nimport { Form, useForm } from '@components/Form';\nimport { MultiSelect } from '@components/Select';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  type DictionaryFormData,\n  useDictionarySchema,\n} from './useDictionaryFormSchema';\n\ntype DictionaryCreationFormProps = {\n  onDictionaryCreated?: () => void;\n};\n\nexport const DictionaryCreationForm: FC<DictionaryCreationFormProps> = ({\n  onDictionaryCreated,\n}) => {\n  const { session } = useSession();\n  const { project } = session ?? {};\n  const { mutate: addDictionary, isPending } = useAddDictionary();\n  const { data: projectsData } = useGetProjects();\n  const DictionarySchema = useDictionarySchema(String(project?.id));\n  const { form, isSubmitting } = useForm(DictionarySchema, {\n    defaultValues: {\n      projectIds: [project?.id],\n    },\n  });\n  const { keyInput, createDictionaryButton, projectInput } =\n    useIntlayer('dictionary-form');\n\n  const onSubmitSuccess = (data: DictionaryFormData) => {\n    addDictionary(\n      { dictionary: data },\n      {\n        onSuccess: () => {\n          onDictionaryCreated?.();\n        },\n      }\n    );\n  };\n\n  return (\n    <Form\n      schema={DictionarySchema}\n      onSubmitSuccess={onSubmitSuccess}\n      className=\"m-auto w-full max-w-[400px]\"\n      {...form}\n    >\n      <Form.Input\n        name=\"key\"\n        label={keyInput.label.value}\n        placeholder={keyInput.placeholder.value}\n        isRequired\n      />\n\n      <Form.MultiSelect name=\"projectIds\" label={projectInput.label.value}>\n        <MultiSelect.Trigger\n          getBadgeValue={(value) =>\n            projectsData?.data?.find((project) => String(project.id) === value)\n              ?.name ?? value\n          }\n        >\n          <MultiSelect.Input placeholder={projectInput.placeholder.value} />\n        </MultiSelect.Trigger>\n        <MultiSelect.Content>\n          <MultiSelect.List>\n            {projectsData?.data?.map((project) => (\n              <MultiSelect.Item\n                key={String(project.id)}\n                value={String(project.id)}\n              >\n                {project.name}\n              </MultiSelect.Item>\n            ))}\n          </MultiSelect.List>\n        </MultiSelect.Content>\n      </Form.MultiSelect>\n\n      <Form.Button\n        className=\"mt-12 ml-auto\"\n        type=\"submit\"\n        color={ButtonColor.TEXT}\n        isLoading={isSubmitting || isPending}\n        label={createDictionaryButton.ariaLabel.value}\n        isFullWidth\n      >\n        {createDictionaryButton.text}\n      </Form.Button>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,0BAA2D,EACtE,0BACI;CACJ,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,YAAY,WAAW,CAAC;CAChC,MAAM,EAAE,QAAQ,eAAe,cAAc,iBAAiB;CAC9D,MAAM,EAAE,MAAM,iBAAiB,eAAe;CAC9C,MAAM,mBAAmB,oBAAoB,OAAO,SAAS,EAAE,CAAC;CAChE,MAAM,EAAE,MAAM,iBAAiB,QAAQ,kBAAkB,EACvD,eAAe,EACb,YAAY,CAAC,SAAS,EAAE,EAC1B,EACF,CAAC;CACD,MAAM,EAAE,UAAU,wBAAwB,iBACxC,YAAY,iBAAiB;CAE/B,MAAM,mBAAmB,SAA6B;EACpD,cACE,EAAE,YAAY,KAAK,GACnB,EACE,iBAAiB;GACf,sBAAsB;EACxB,EACF,CACF;CACF;CAEA,OACE,qBAAC,MAAD;EACE,QAAQ;EACS;EACjB,WAAU;EACV,GAAI;YAJN;GAME,oBAAC,KAAK,OAAN;IACE,MAAK;IACL,OAAO,SAAS,MAAM;IACtB,aAAa,SAAS,YAAY;IAClC;GACD;GAED,qBAAC,KAAK,aAAN;IAAkB,MAAK;IAAa,OAAO,aAAa,MAAM;cAA9D,CACE,oBAAC,YAAY,SAAb;KACE,gBAAgB,UACd,cAAc,MAAM,MAAM,YAAY,OAAO,QAAQ,EAAE,MAAM,KAAK,GAC9D,QAAQ;eAGd,oBAAC,YAAY,OAAb,EAAmB,aAAa,aAAa,YAAY,MAAQ;IAC9C,IACrB,oBAAC,YAAY,SAAb,YACE,oBAAC,YAAY,MAAb,YACG,cAAc,MAAM,KAAK,YACxB,oBAAC,YAAY,MAAb;KAEE,OAAO,OAAO,QAAQ,EAAE;eAEvB,QAAQ;IACO,GAJX,OAAO,QAAQ,EAAE,CAIN,CACnB,EACe,GACC,EACL;;GAElB,oBAAC,KAAK,QAAN;IACE,WAAU;IACV,MAAK;IACL;IACA,WAAW,gBAAgB;IAC3B,OAAO,uBAAuB,UAAU;IACxC;cAEC,uBAAuB;GACb;EACT;;AAEV"}
+{"version":3,"file":"DictionaryCreationForm.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.tsx"],"sourcesContent":["'use client';\n\nimport { useAddDictionary, useGetProjects } from '@api/index';\nimport { useSession } from '@api/useAuth';\nimport { Form, useForm } from '@components/Form';\nimport { MultiSelect } from '@components/Select';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport {\n  type DictionaryFormData,\n  useDictionarySchema,\n} from './useDictionaryFormSchema';\n\ntype DictionaryCreationFormProps = {\n  onDictionaryCreated?: () => void;\n};\n\nexport const DictionaryCreationForm: FC<DictionaryCreationFormProps> = ({\n  onDictionaryCreated,\n}) => {\n  const { session } = useSession();\n  const { project } = session ?? {};\n  const { mutate: addDictionary, isPending } = useAddDictionary();\n  const { data: projectsData } = useGetProjects();\n  const DictionarySchema = useDictionarySchema(String(project?.id));\n  const { form, isSubmitting } = useForm(DictionarySchema, {\n    defaultValues: {\n      projectIds: [project?.id],\n    },\n  });\n  const { keyInput, createDictionaryButton, projectInput } =\n    useIntlayer('dictionary-form');\n\n  const onSubmitSuccess = (data: DictionaryFormData) => {\n    addDictionary(\n      { dictionary: data },\n      {\n        onSuccess: () => {\n          onDictionaryCreated?.();\n        },\n      }\n    );\n  };\n\n  return (\n    <Form\n      schema={DictionarySchema}\n      onSubmitSuccess={onSubmitSuccess}\n      className=\"m-auto w-full max-w-[400px]\"\n      {...form}\n    >\n      <Form.Input\n        name=\"key\"\n        label={keyInput.label.value}\n        placeholder={keyInput.placeholder.value}\n        isRequired\n      />\n\n      <Form.MultiSelect name=\"projectIds\" label={projectInput.label.value}>\n        <MultiSelect.Trigger\n          getBadgeValue={(value) =>\n            projectsData?.data?.find((project) => String(project.id) === value)\n              ?.name ?? value\n          }\n        >\n          <MultiSelect.Input placeholder={projectInput.placeholder.value} />\n        </MultiSelect.Trigger>\n        <MultiSelect.Content>\n          <MultiSelect.List>\n            {projectsData?.data?.map((project) => (\n              <MultiSelect.Item\n                key={String(project.id)}\n                value={String(project.id)}\n              >\n                {project.name}\n              </MultiSelect.Item>\n            ))}\n          </MultiSelect.List>\n        </MultiSelect.Content>\n      </Form.MultiSelect>\n\n      <Form.Button\n        className=\"mt-12 ml-auto\"\n        type=\"submit\"\n        color=\"text\"\n        isLoading={isSubmitting || isPending}\n        label={createDictionaryButton.ariaLabel.value}\n        isFullWidth\n      >\n        {createDictionaryButton.text}\n      </Form.Button>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,0BAA2D,EACtE,0BACI;CACJ,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,YAAY,WAAW,CAAC;CAChC,MAAM,EAAE,QAAQ,eAAe,cAAc,iBAAiB;CAC9D,MAAM,EAAE,MAAM,iBAAiB,eAAe;CAC9C,MAAM,mBAAmB,oBAAoB,OAAO,SAAS,EAAE,CAAC;CAChE,MAAM,EAAE,MAAM,iBAAiB,QAAQ,kBAAkB,EACvD,eAAe,EACb,YAAY,CAAC,SAAS,EAAE,EAC1B,EACF,CAAC;CACD,MAAM,EAAE,UAAU,wBAAwB,iBACxC,YAAY,iBAAiB;CAE/B,MAAM,mBAAmB,SAA6B;EACpD,cACE,EAAE,YAAY,KAAK,GACnB,EACE,iBAAiB;GACf,sBAAsB;EACxB,EACF,CACF;CACF;CAEA,OACE,qBAAC,MAAD;EACE,QAAQ;EACS;EACjB,WAAU;EACV,GAAI;YAJN;GAME,oBAAC,KAAK,OAAN;IACE,MAAK;IACL,OAAO,SAAS,MAAM;IACtB,aAAa,SAAS,YAAY;IAClC;GACD;GAED,qBAAC,KAAK,aAAN;IAAkB,MAAK;IAAa,OAAO,aAAa,MAAM;cAA9D,CACE,oBAAC,YAAY,SAAb;KACE,gBAAgB,UACd,cAAc,MAAM,MAAM,YAAY,OAAO,QAAQ,EAAE,MAAM,KAAK,GAC9D,QAAQ;eAGd,oBAAC,YAAY,OAAb,EAAmB,aAAa,aAAa,YAAY,MAAQ;IAC9C,IACrB,oBAAC,YAAY,SAAb,YACE,oBAAC,YAAY,MAAb,YACG,cAAc,MAAM,KAAK,YACxB,oBAAC,YAAY,MAAb;KAEE,OAAO,OAAO,QAAQ,EAAE;eAEvB,QAAQ;IACO,GAJX,OAAO,QAAQ,EAAE,CAIN,CACnB,EACe,GACC,EACL;;GAElB,oBAAC,KAAK,QAAN;IACE,WAAU;IACV,MAAK;IACL,OAAM;IACN,WAAW,gBAAgB;IAC3B,OAAO,uBAAuB,UAAU;IACxC;cAEC,uBAAuB;GACb;EACT;;AAEV"}

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs

@@ -1,12 +1,11 @@
 'use client';
 
-import { Loader } from "../../Loader/index.mjs";
-import { ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
-import { Checkbox } from "../../Input/Checkbox.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAuditContentDeclarationMetadata } from "../../../api/hooks/ai.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";
 import { useGetTags } from "../../../api/hooks/tag.mjs";
+import { Loader } from "../../Loader/index.mjs";
+import { Checkbox } from "../../Input/Checkbox.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { useForm as useForm$1 } from "../../Form/FormBase.mjs";
@@ -15,8 +14,8 @@ import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
 import { useEffect } from "react";
 import { WandSparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { useWatch } from "react-hook-form";
 import { AnimatePresence, motion } from "framer-motion";
 

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryDetailsForm.mjs","names":["useForm"],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useAuditContentDeclarationMetadata,\n  useGetProjects,\n  useGetTags,\n} from '@api/index';\nimport { useSession } from '@api/useAuth';\nimport { ButtonColor, ButtonSize, ButtonVariant } from '@components/Button';\nimport { Form, useForm } from '@components/Form';\nimport { Checkbox } from '@components/Input';\nimport { Loader } from '@components/Loader';\nimport { MultiSelect, Select } from '@components/Select';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { WandSparkles } from 'lucide-react';\nimport { type FC, useEffect } from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { useIntlayer } from 'react-intlayer';\nimport { useDictionaryDetailsSchema } from './useDictionaryDetailsSchema';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n  mode: ('local' | 'remote')[];\n};\n\nexport const DictionaryDetailsForm: FC<DictionaryDetailsProps> = ({\n  dictionary,\n  mode,\n}) => {\n  const { session } = useSession();\n  const { project } = session ?? {};\n  const { data: projectsData, isLoading: isLoadingProjects } =\n    useGetProjects() as any;\n  const { data: tagsData } = useGetTags() as any;\n\n  const projects = (projectsData?.data ?? []) as any[];\n  const allTags = (tagsData?.data ?? []) as any[];\n\n  const DictionaryDetailsSchema = useDictionaryDetailsSchema(\n    String(project?.id)\n  );\n  const { form, isSubmitting } = useForm(DictionaryDetailsSchema, {\n    defaultValues: {\n      ...dictionary,\n      location: dictionary.location ?? 'remote',\n    },\n  });\n  const { editedContent, setEditedDictionary } = useEditedContent();\n  const {\n    titleInput,\n    keyInput,\n    descriptionInput,\n    projectInput,\n    tagsSelect,\n    locationSelect,\n    importModeSelect,\n    filePathInput,\n    auditButton,\n  } = useIntlayer('dictionary-details');\n  const { mutate: auditContentDeclaration, isPending: isAuditing } =\n    useAuditContentDeclarationMetadata();\n  const updatedDictionary =\n    editedContent?.[dictionary.localId as LocalDictionaryId];\n\n  useEffect(() => {\n    form.reset({\n      ...dictionary,\n      tags: dictionary.tags ?? [],\n      location: dictionary.location ?? 'remote',\n    });\n  }, [dictionary, form?.reset]);\n\n  useEffect(() => {\n    if (typeof updatedDictionary === 'undefined') {\n      form.reset({\n        ...dictionary,\n        tags: dictionary.tags ?? [],\n        location: dictionary.location ?? 'remote',\n      });\n    }\n  }, [updatedDictionary]);\n\n  const handleOnAuditFile = () => {\n    const dictionaryToAudit = {\n      ...dictionary,\n      ...updatedDictionary,\n    };\n\n    auditContentDeclaration(\n      {\n        fileContent: JSON.stringify(dictionaryToAudit),\n      },\n      {\n        onSuccess: (response) => {\n          if (!response?.data) return;\n\n          const auditedDictionary = response.data.fileContent;\n\n          const merged = {\n            ...dictionaryToAudit,\n            ...auditedDictionary,\n            tags: auditedDictionary.tags ?? dictionaryToAudit.tags ?? [],\n          };\n\n          setEditedDictionary(merged as Dictionary);\n          form.reset(merged);\n        },\n      }\n    );\n  };\n\n  const watchedLocation = useWatch({\n    control: form.control,\n    name: 'location',\n  });\n  const isLocalChecked =\n    watchedLocation === 'local' || watchedLocation === 'hybrid';\n\n  return (\n    <Form\n      className=\"flex w-full flex-col gap-8\"\n      {...form}\n      schema={DictionaryDetailsSchema}\n    >\n      <div className=\"grid grid-cols-2 gap-8 max-md:grid-cols-1\">\n        <Form.EditableFieldInput\n          name=\"key\"\n          label={keyInput.label}\n          placeholder={keyInput.label.value}\n          description={keyInput.description}\n          disabled={isSubmitting}\n          isRequired\n          onSave={(value) => {\n            form.setValue('key', value, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              key: value,\n            });\n          }}\n        />\n        <Form.EditableFieldInput\n          name=\"title\"\n          label={titleInput.label}\n          placeholder={titleInput.placeholder.value}\n          description={titleInput.description}\n          disabled={isSubmitting}\n          onSave={(value) => {\n            form.setValue('title', value, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              title: value,\n            });\n          }}\n        />\n      </div>\n      <Form.EditableFieldTextArea\n        name=\"description\"\n        label={descriptionInput.label}\n        placeholder={descriptionInput.placeholder.value}\n        description={descriptionInput.description}\n        disabled={isSubmitting}\n        onSave={(value) => {\n          form.setValue('description', value, { shouldDirty: true });\n          setEditedDictionary({\n            ...dictionary,\n            ...(updatedDictionary ?? {}),\n            description: value,\n          });\n        }}\n      />\n      <div className=\"grid grid-cols-2 gap-8 px-1 max-md:grid-cols-1\">\n        <Form.Field\n          control={form.control}\n          name=\"location\"\n          render={({ field }) => {\n            const value = field.value;\n            const isLocal = value === 'local' || value === 'hybrid';\n            const isRemote = value === 'remote' || value === 'hybrid';\n\n            const handleLocalToggle = (isChecked: boolean) => {\n              if (!isChecked && !isRemote) return;\n\n              const newValue: Dictionary['location'] = isChecked\n                ? isRemote\n                  ? 'hybrid'\n                  : 'local'\n                : 'remote';\n\n              field.onChange(newValue);\n\n              const newFilePath = isChecked\n                ? (form.getValues('filePath') ?? dictionary.filePath)\n                : undefined;\n\n              if (!isChecked) {\n                form.setValue('filePath', undefined);\n              }\n\n              setEditedDictionary({\n                ...dictionary,\n                ...(updatedDictionary ?? {}),\n                location: newValue,\n                filePath: newFilePath,\n              });\n            };\n\n            const handleRemoteToggle = (isChecked: boolean) => {\n              if (!isChecked && !isLocal) return;\n\n              const newValue: Dictionary['location'] = isChecked\n                ? isLocal\n                  ? 'hybrid'\n                  : 'remote'\n                : 'local';\n\n              field.onChange(newValue);\n\n              setEditedDictionary({\n                ...dictionary,\n                ...(updatedDictionary ?? {}),\n                location: newValue,\n              });\n            };\n\n            return (\n              <Form.Item className=\"flex flex-col gap-2 px-1\">\n                <Form.Label className=\"ml-1\">{locationSelect.label}</Form.Label>\n                <div className=\"ml-2 flex items-center gap-4 py-2\">\n                  <Checkbox\n                    id=\"location-local\"\n                    name=\"location-local\"\n                    label={locationSelect.local.value}\n                    color=\"text\"\n                    checked={isLocal}\n                    disabled={\n                      !mode.includes('local') && !mode.includes('remote')\n                    }\n                    onChange={(e) => handleLocalToggle(e.target.checked)}\n                  />\n                  <Checkbox\n                    id=\"location-remote\"\n                    name=\"location-remote\"\n                    label={locationSelect.remote.value}\n                    color=\"text\"\n                    checked={isRemote}\n                    disabled={\n                      !mode.includes('remote') &&\n                      dictionary.location !== 'remote' &&\n                      dictionary.location !== 'hybrid'\n                    }\n                    onChange={(e) => handleRemoteToggle(e.target.checked)}\n                  />\n                </div>\n                <Form.Description>\n                  {locationSelect.testDescription}\n                </Form.Description>\n                <Form.Message />\n              </Form.Item>\n            );\n          }}\n        />\n\n        <AnimatePresence mode=\"wait\">\n          {isLocalChecked && (\n            <motion.div\n              key=\"filePath-input\"\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'auto' }}\n              exit={{ opacity: 0, height: 0 }}\n              transition={{ duration: 0.3 }}\n              className=\"overflow-hidden\"\n            >\n              <Form.Input\n                name=\"filePath\"\n                label={filePathInput.label.value}\n                placeholder={filePathInput.placeholder.value}\n                description={filePathInput.description.value}\n                disabled={isSubmitting || !isLocalChecked}\n                onChange={(e) => {\n                  const value = e.target.value;\n                  setEditedDictionary({\n                    ...dictionary,\n                    ...(updatedDictionary ?? {}),\n                    filePath: value,\n                  });\n                }}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n      <div className=\"grid grid-cols-2 gap-8 max-md:grid-cols-1\">\n        <Form.Select\n          name=\"importMode\"\n          label={importModeSelect.label.value}\n          description={importModeSelect.description.value}\n          onValueChange={(value) => {\n            form.setValue('importMode', value as any, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              importMode: value as any,\n            });\n          }}\n        >\n          <Select.Trigger>\n            <Select.Value placeholder={importModeSelect.label.value} />\n          </Select.Trigger>\n          <Select.Content>\n            <Select.Item value=\"static\">\n              {importModeSelect.static.value}\n            </Select.Item>\n            <Select.Item value=\"dynamic\">\n              {importModeSelect.dynamic.value}\n            </Select.Item>\n            <Select.Item value=\"live\">\n              {importModeSelect.live.value}\n            </Select.Item>\n          </Select.Content>\n        </Form.Select>\n      </div>\n      <div className=\"grid grid-cols-2 gap-8 max-md:grid-cols-1\">\n        <Form.MultiSelect\n          name=\"projectIds\"\n          label={projectInput.label.value}\n          description={projectInput.description}\n          onValueChange={(value) => {\n            const valueArray = [value].flat();\n            form.setValue('projectIds', valueArray, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              projectIds: valueArray,\n            });\n          }}\n        >\n          <MultiSelect.Trigger\n            getBadgeValue={(value) =>\n              projects?.find((project: any) => String(project.id) === value)\n                ?.name ?? value\n            }\n          >\n            <MultiSelect.Input placeholder={projectInput.placeholder.value} />\n          </MultiSelect.Trigger>\n          <MultiSelect.Content>\n            <Loader isLoading={isLoadingProjects}>\n              <MultiSelect.List>\n                {projects?.map((project: any) => (\n                  <MultiSelect.Item\n                    key={String(project.id)}\n                    value={String(project.id)}\n                  >\n                    {project.name}\n                  </MultiSelect.Item>\n                ))}\n              </MultiSelect.List>\n            </Loader>\n          </MultiSelect.Content>\n        </Form.MultiSelect>\n\n        <Form.MultiSelect\n          name=\"tags\"\n          label={tagsSelect.label.value}\n          description={tagsSelect.description}\n          onValueChange={(value) => {\n            const valueArray = [value].flat();\n            form.setValue('tags', valueArray, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              tags: valueArray,\n            });\n          }}\n        >\n          <MultiSelect.Trigger\n            getBadgeValue={(value) =>\n              allTags?.find((tag: any) => String(tag.key) === value)?.name ??\n              value\n            }\n          >\n            <MultiSelect.Input placeholder={tagsSelect.placeholder.value} />\n          </MultiSelect.Trigger>\n          <MultiSelect.Content>\n            <Loader isLoading={isLoadingProjects}>\n              <MultiSelect.List>\n                {allTags?.map((tag: any) => (\n                  <MultiSelect.Item\n                    key={String(tag.key)}\n                    value={String(tag.key)}\n                  >\n                    {tag.name ?? tag.key}\n                  </MultiSelect.Item>\n                ))}\n              </MultiSelect.List>\n            </Loader>\n          </MultiSelect.Content>\n        </Form.MultiSelect>\n      </div>\n\n      <div className=\"flex flex-wrap items-center justify-end gap-2 max-md:flex-col\">\n        <Form.Button\n          type=\"button\"\n          size={ButtonSize.ICON_MD}\n          label={auditButton.label.value}\n          Icon={WandSparkles}\n          variant={ButtonVariant.OUTLINE}\n          color={ButtonColor.TEXT}\n          className=\"max-md:w-full\"\n          onClick={handleOnAuditFile}\n          disabled={isSubmitting || isAuditing}\n          isLoading={isAuditing}\n        />\n      </div>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,yBAAqD,EAChE,YACA,WACI;CACJ,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,YAAY,WAAW,CAAC;CAChC,MAAM,EAAE,MAAM,cAAc,WAAW,sBACrC,eAAe;CACjB,MAAM,EAAE,MAAM,aAAa,WAAW;CAEtC,MAAM,WAAY,cAAc,QAAQ,CAAC;CACzC,MAAM,UAAW,UAAU,QAAQ,CAAC;CAEpC,MAAM,0BAA0B,2BAC9B,OAAO,SAAS,EAAE,CACpB;CACA,MAAM,EAAE,MAAM,iBAAiBA,UAAQ,yBAAyB,EAC9D,eAAe;EACb,GAAG;EACH,UAAU,WAAW,YAAY;CACnC,EACF,CAAC;CACD,MAAM,EAAE,eAAe,wBAAwB,iBAAiB;CAChE,MAAM,EACJ,YACA,UACA,kBACA,cACA,YACA,gBACA,kBACA,eACA,gBACE,YAAY,oBAAoB;CACpC,MAAM,EAAE,QAAQ,yBAAyB,WAAW,eAClD,mCAAmC;CACrC,MAAM,oBACJ,gBAAgB,WAAW;CAE7B,gBAAgB;EACd,KAAK,MAAM;GACT,GAAG;GACH,MAAM,WAAW,QAAQ,CAAC;GAC1B,UAAU,WAAW,YAAY;EACnC,CAAC;CACH,GAAG,CAAC,YAAY,MAAM,KAAK,CAAC;CAE5B,gBAAgB;EACd,IAAI,OAAO,sBAAsB,aAC/B,KAAK,MAAM;GACT,GAAG;GACH,MAAM,WAAW,QAAQ,CAAC;GAC1B,UAAU,WAAW,YAAY;EACnC,CAAC;CAEL,GAAG,CAAC,iBAAiB,CAAC;CAEtB,MAAM,0BAA0B;EAC9B,MAAM,oBAAoB;GACxB,GAAG;GACH,GAAG;EACL;EAEA,wBACE,EACE,aAAa,KAAK,UAAU,iBAAiB,EAC/C,GACA,EACE,YAAY,aAAa;GACvB,IAAI,CAAC,UAAU,MAAM;GAErB,MAAM,oBAAoB,SAAS,KAAK;GAExC,MAAM,SAAS;IACb,GAAG;IACH,GAAG;IACH,MAAM,kBAAkB,QAAQ,kBAAkB,QAAQ,CAAC;GAC7D;GAEA,oBAAoB,MAAoB;GACxC,KAAK,MAAM,MAAM;EACnB,EACF,CACF;CACF;CAEA,MAAM,kBAAkB,SAAS;EAC/B,SAAS,KAAK;EACd,MAAM;CACR,CAAC;CACD,MAAM,iBACJ,oBAAoB,WAAW,oBAAoB;CAErD,OACE,qBAAC,MAAD;EACE,WAAU;EACV,GAAI;EACJ,QAAQ;YAHV;GAKE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,KAAK,oBAAN;KACE,MAAK;KACL,OAAO,SAAS;KAChB,aAAa,SAAS,MAAM;KAC5B,aAAa,SAAS;KACtB,UAAU;KACV;KACA,SAAS,UAAU;MACjB,KAAK,SAAS,OAAO,OAAO,EAAE,aAAa,KAAK,CAAC;MACjD,oBAAoB;OAClB,GAAG;OACH,GAAI,qBAAqB,CAAC;OAC1B,KAAK;MACP,CAAC;KACH;IACD,IACD,oBAAC,KAAK,oBAAN;KACE,MAAK;KACL,OAAO,WAAW;KAClB,aAAa,WAAW,YAAY;KACpC,aAAa,WAAW;KACxB,UAAU;KACV,SAAS,UAAU;MACjB,KAAK,SAAS,SAAS,OAAO,EAAE,aAAa,KAAK,CAAC;MACnD,oBAAoB;OAClB,GAAG;OACH,GAAI,qBAAqB,CAAC;OAC1B,OAAO;MACT,CAAC;KACH;IACD,EACE;;GACL,oBAAC,KAAK,uBAAN;IACE,MAAK;IACL,OAAO,iBAAiB;IACxB,aAAa,iBAAiB,YAAY;IAC1C,aAAa,iBAAiB;IAC9B,UAAU;IACV,SAAS,UAAU;KACjB,KAAK,SAAS,eAAe,OAAO,EAAE,aAAa,KAAK,CAAC;KACzD,oBAAoB;MAClB,GAAG;MACH,GAAI,qBAAqB,CAAC;MAC1B,aAAa;KACf,CAAC;IACH;GACD;GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,KAAK,OAAN;KACE,SAAS,KAAK;KACd,MAAK;KACL,SAAS,EAAE,YAAY;MACrB,MAAM,QAAQ,MAAM;MACpB,MAAM,UAAU,UAAU,WAAW,UAAU;MAC/C,MAAM,WAAW,UAAU,YAAY,UAAU;MAEjD,MAAM,qBAAqB,cAAuB;OAChD,IAAI,CAAC,aAAa,CAAC,UAAU;OAE7B,MAAM,WAAmC,YACrC,WACE,WACA,UACF;OAEJ,MAAM,SAAS,QAAQ;OAEvB,MAAM,cAAc,YACf,KAAK,UAAU,UAAU,KAAK,WAAW,WAC1C;OAEJ,IAAI,CAAC,WACH,KAAK,SAAS,YAAY,MAAS;OAGrC,oBAAoB;QAClB,GAAG;QACH,GAAI,qBAAqB,CAAC;QAC1B,UAAU;QACV,UAAU;OACZ,CAAC;MACH;MAEA,MAAM,sBAAsB,cAAuB;OACjD,IAAI,CAAC,aAAa,CAAC,SAAS;OAE5B,MAAM,WAAmC,YACrC,UACE,WACA,WACF;OAEJ,MAAM,SAAS,QAAQ;OAEvB,oBAAoB;QAClB,GAAG;QACH,GAAI,qBAAqB,CAAC;QAC1B,UAAU;OACZ,CAAC;MACH;MAEA,OACE,qBAAC,KAAK,MAAN;OAAW,WAAU;iBAArB;QACE,oBAAC,KAAK,OAAN;SAAY,WAAU;mBAAQ,eAAe;QAAkB;QAC/D,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,oBAAC,UAAD;UACE,IAAG;UACH,MAAK;UACL,OAAO,eAAe,MAAM;UAC5B,OAAM;UACN,SAAS;UACT,UACE,CAAC,KAAK,SAAS,OAAO,KAAK,CAAC,KAAK,SAAS,QAAQ;UAEpD,WAAW,MAAM,kBAAkB,EAAE,OAAO,OAAO;SACpD,IACD,oBAAC,UAAD;UACE,IAAG;UACH,MAAK;UACL,OAAO,eAAe,OAAO;UAC7B,OAAM;UACN,SAAS;UACT,UACE,CAAC,KAAK,SAAS,QAAQ,KACvB,WAAW,aAAa,YACxB,WAAW,aAAa;UAE1B,WAAW,MAAM,mBAAmB,EAAE,OAAO,OAAO;SACrD,EACE;;QACL,oBAAC,KAAK,aAAN,YACG,eAAe,gBACA;QAClB,oBAAC,KAAK,SAAN,CAAe;OACN;;KAEf;IACD,IAED,oBAAC,iBAAD;KAAiB,MAAK;eACnB,kBACC,oBAAC,OAAO,KAAR;MAEE,SAAS;OAAE,SAAS;OAAG,QAAQ;MAAE;MACjC,SAAS;OAAE,SAAS;OAAG,QAAQ;MAAO;MACtC,MAAM;OAAE,SAAS;OAAG,QAAQ;MAAE;MAC9B,YAAY,EAAE,UAAU,GAAI;MAC5B,WAAU;gBAEV,oBAAC,KAAK,OAAN;OACE,MAAK;OACL,OAAO,cAAc,MAAM;OAC3B,aAAa,cAAc,YAAY;OACvC,aAAa,cAAc,YAAY;OACvC,UAAU,gBAAgB,CAAC;OAC3B,WAAW,MAAM;QACf,MAAM,QAAQ,EAAE,OAAO;QACvB,oBAAoB;SAClB,GAAG;SACH,GAAI,qBAAqB,CAAC;SAC1B,UAAU;QACZ,CAAC;OACH;MACD;KACS,GAtBN,gBAsBM;IAEC,EACd;;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,KAAK,QAAN;KACE,MAAK;KACL,OAAO,iBAAiB,MAAM;KAC9B,aAAa,iBAAiB,YAAY;KAC1C,gBAAgB,UAAU;MACxB,KAAK,SAAS,cAAc,OAAc,EAAE,aAAa,KAAK,CAAC;MAC/D,oBAAoB;OAClB,GAAG;OACH,GAAI,qBAAqB,CAAC;OAC1B,YAAY;MACd,CAAC;KACH;eAXF,CAaE,oBAAC,OAAO,SAAR,YACE,oBAAC,OAAO,OAAR,EAAc,aAAa,iBAAiB,MAAM,MAAQ,GAC5C,IAChB,qBAAC,OAAO,SAAR;MACE,oBAAC,OAAO,MAAR;OAAa,OAAM;iBAChB,iBAAiB,OAAO;MACd;MACb,oBAAC,OAAO,MAAR;OAAa,OAAM;iBAChB,iBAAiB,QAAQ;MACf;MACb,oBAAC,OAAO,MAAR;OAAa,OAAM;iBAChB,iBAAiB,KAAK;MACZ;KACC,IACL;;GACV;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,KAAK,aAAN;KACE,MAAK;KACL,OAAO,aAAa,MAAM;KAC1B,aAAa,aAAa;KAC1B,gBAAgB,UAAU;MACxB,MAAM,aAAa,CAAC,KAAK,EAAE,KAAK;MAChC,KAAK,SAAS,cAAc,YAAY,EAAE,aAAa,KAAK,CAAC;MAC7D,oBAAoB;OAClB,GAAG;OACH,GAAI,qBAAqB,CAAC;OAC1B,YAAY;MACd,CAAC;KACH;eAZF,CAcE,oBAAC,YAAY,SAAb;MACE,gBAAgB,UACd,UAAU,MAAM,YAAiB,OAAO,QAAQ,EAAE,MAAM,KAAK,GACzD,QAAQ;gBAGd,oBAAC,YAAY,OAAb,EAAmB,aAAa,aAAa,YAAY,MAAQ;KAC9C,IACrB,oBAAC,YAAY,SAAb,YACE,oBAAC,QAAD;MAAQ,WAAW;gBACjB,oBAAC,YAAY,MAAb,YACG,UAAU,KAAK,YACd,oBAAC,YAAY,MAAb;OAEE,OAAO,OAAO,QAAQ,EAAE;iBAEvB,QAAQ;MACO,GAJX,OAAO,QAAQ,EAAE,CAIN,CACnB,EACe;KACZ,GACW,EACL;QAElB,qBAAC,KAAK,aAAN;KACE,MAAK;KACL,OAAO,WAAW,MAAM;KACxB,aAAa,WAAW;KACxB,gBAAgB,UAAU;MACxB,MAAM,aAAa,CAAC,KAAK,EAAE,KAAK;MAChC,KAAK,SAAS,QAAQ,YAAY,EAAE,aAAa,KAAK,CAAC;MACvD,oBAAoB;OAClB,GAAG;OACH,GAAI,qBAAqB,CAAC;OAC1B,MAAM;MACR,CAAC;KACH;eAZF,CAcE,oBAAC,YAAY,SAAb;MACE,gBAAgB,UACd,SAAS,MAAM,QAAa,OAAO,IAAI,GAAG,MAAM,KAAK,GAAG,QACxD;gBAGF,oBAAC,YAAY,OAAb,EAAmB,aAAa,WAAW,YAAY,MAAQ;KAC5C,IACrB,oBAAC,YAAY,SAAb,YACE,oBAAC,QAAD;MAAQ,WAAW;gBACjB,oBAAC,YAAY,MAAb,YACG,SAAS,KAAK,QACb,oBAAC,YAAY,MAAb;OAEE,OAAO,OAAO,IAAI,GAAG;iBAEpB,IAAI,QAAQ,IAAI;MACD,GAJX,OAAO,IAAI,GAAG,CAIH,CACnB,EACe;KACZ,GACW,EACL;MACf;;GAEL,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,KAAK,QAAN;KACE,MAAK;KACL;KACA,OAAO,YAAY,MAAM;KACzB,MAAM;KACN;KACA;KACA,WAAU;KACV,SAAS;KACT,UAAU,gBAAgB;KAC1B,WAAW;IACZ;GACE;EACD;;AAEV"}
+{"version":3,"file":"DictionaryDetailsForm.mjs","names":["useForm"],"sources":["../../../../../src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useAuditContentDeclarationMetadata,\n  useGetProjects,\n  useGetTags,\n} from '@api/index';\nimport { useSession } from '@api/useAuth';\n\nimport { Form, useForm } from '@components/Form';\nimport { Checkbox } from '@components/Input';\nimport { Loader } from '@components/Loader';\nimport { MultiSelect, Select } from '@components/Select';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types/dictionary';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { WandSparkles } from 'lucide-react';\nimport { type FC, useEffect } from 'react';\nimport { useWatch } from 'react-hook-form';\nimport { useIntlayer } from 'react-intlayer';\nimport { useDictionaryDetailsSchema } from './useDictionaryDetailsSchema';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n  mode: ('local' | 'remote')[];\n};\n\nexport const DictionaryDetailsForm: FC<DictionaryDetailsProps> = ({\n  dictionary,\n  mode,\n}) => {\n  const { session } = useSession();\n  const { project } = session ?? {};\n  const { data: projectsData, isLoading: isLoadingProjects } =\n    useGetProjects() as any;\n  const { data: tagsData } = useGetTags() as any;\n\n  const projects = (projectsData?.data ?? []) as any[];\n  const allTags = (tagsData?.data ?? []) as any[];\n\n  const DictionaryDetailsSchema = useDictionaryDetailsSchema(\n    String(project?.id)\n  );\n  const { form, isSubmitting } = useForm(DictionaryDetailsSchema, {\n    defaultValues: {\n      ...dictionary,\n      location: dictionary.location ?? 'remote',\n    },\n  });\n  const { editedContent, setEditedDictionary } = useEditedContent();\n  const {\n    titleInput,\n    keyInput,\n    descriptionInput,\n    projectInput,\n    tagsSelect,\n    locationSelect,\n    importModeSelect,\n    filePathInput,\n    auditButton,\n  } = useIntlayer('dictionary-details');\n  const { mutate: auditContentDeclaration, isPending: isAuditing } =\n    useAuditContentDeclarationMetadata();\n  const updatedDictionary =\n    editedContent?.[dictionary.localId as LocalDictionaryId];\n\n  useEffect(() => {\n    form.reset({\n      ...dictionary,\n      tags: dictionary.tags ?? [],\n      location: dictionary.location ?? 'remote',\n    });\n  }, [dictionary, form?.reset]);\n\n  useEffect(() => {\n    if (typeof updatedDictionary === 'undefined') {\n      form.reset({\n        ...dictionary,\n        tags: dictionary.tags ?? [],\n        location: dictionary.location ?? 'remote',\n      });\n    }\n  }, [updatedDictionary]);\n\n  const handleOnAuditFile = () => {\n    const dictionaryToAudit = {\n      ...dictionary,\n      ...updatedDictionary,\n    };\n\n    auditContentDeclaration(\n      {\n        fileContent: JSON.stringify(dictionaryToAudit),\n      },\n      {\n        onSuccess: (response) => {\n          if (!response?.data) return;\n\n          const auditedDictionary = response.data.fileContent;\n\n          const merged = {\n            ...dictionaryToAudit,\n            ...auditedDictionary,\n            tags: auditedDictionary.tags ?? dictionaryToAudit.tags ?? [],\n          };\n\n          setEditedDictionary(merged as Dictionary);\n          form.reset(merged);\n        },\n      }\n    );\n  };\n\n  const watchedLocation = useWatch({\n    control: form.control,\n    name: 'location',\n  });\n  const isLocalChecked =\n    watchedLocation === 'local' || watchedLocation === 'hybrid';\n\n  return (\n    <Form\n      className=\"flex w-full flex-col gap-8\"\n      {...form}\n      schema={DictionaryDetailsSchema}\n    >\n      <div className=\"grid grid-cols-2 gap-8 max-md:grid-cols-1\">\n        <Form.EditableFieldInput\n          name=\"key\"\n          label={keyInput.label}\n          placeholder={keyInput.label.value}\n          description={keyInput.description}\n          disabled={isSubmitting}\n          isRequired\n          onSave={(value) => {\n            form.setValue('key', value, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              key: value,\n            });\n          }}\n        />\n        <Form.EditableFieldInput\n          name=\"title\"\n          label={titleInput.label}\n          placeholder={titleInput.placeholder.value}\n          description={titleInput.description}\n          disabled={isSubmitting}\n          onSave={(value) => {\n            form.setValue('title', value, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              title: value,\n            });\n          }}\n        />\n      </div>\n      <Form.EditableFieldTextArea\n        name=\"description\"\n        label={descriptionInput.label}\n        placeholder={descriptionInput.placeholder.value}\n        description={descriptionInput.description}\n        disabled={isSubmitting}\n        onSave={(value) => {\n          form.setValue('description', value, { shouldDirty: true });\n          setEditedDictionary({\n            ...dictionary,\n            ...(updatedDictionary ?? {}),\n            description: value,\n          });\n        }}\n      />\n      <div className=\"grid grid-cols-2 gap-8 px-1 max-md:grid-cols-1\">\n        <Form.Field\n          control={form.control}\n          name=\"location\"\n          render={({ field }) => {\n            const value = field.value;\n            const isLocal = value === 'local' || value === 'hybrid';\n            const isRemote = value === 'remote' || value === 'hybrid';\n\n            const handleLocalToggle = (isChecked: boolean) => {\n              if (!isChecked && !isRemote) return;\n\n              const newValue: Dictionary['location'] = isChecked\n                ? isRemote\n                  ? 'hybrid'\n                  : 'local'\n                : 'remote';\n\n              field.onChange(newValue);\n\n              const newFilePath = isChecked\n                ? (form.getValues('filePath') ?? dictionary.filePath)\n                : undefined;\n\n              if (!isChecked) {\n                form.setValue('filePath', undefined);\n              }\n\n              setEditedDictionary({\n                ...dictionary,\n                ...(updatedDictionary ?? {}),\n                location: newValue,\n                filePath: newFilePath,\n              });\n            };\n\n            const handleRemoteToggle = (isChecked: boolean) => {\n              if (!isChecked && !isLocal) return;\n\n              const newValue: Dictionary['location'] = isChecked\n                ? isLocal\n                  ? 'hybrid'\n                  : 'remote'\n                : 'local';\n\n              field.onChange(newValue);\n\n              setEditedDictionary({\n                ...dictionary,\n                ...(updatedDictionary ?? {}),\n                location: newValue,\n              });\n            };\n\n            return (\n              <Form.Item className=\"flex flex-col gap-2 px-1\">\n                <Form.Label className=\"ml-1\">{locationSelect.label}</Form.Label>\n                <div className=\"ml-2 flex items-center gap-4 py-2\">\n                  <Checkbox\n                    id=\"location-local\"\n                    name=\"location-local\"\n                    label={locationSelect.local.value}\n                    color=\"text\"\n                    checked={isLocal}\n                    disabled={\n                      !mode.includes('local') && !mode.includes('remote')\n                    }\n                    onChange={(e) => handleLocalToggle(e.target.checked)}\n                  />\n                  <Checkbox\n                    id=\"location-remote\"\n                    name=\"location-remote\"\n                    label={locationSelect.remote.value}\n                    color=\"text\"\n                    checked={isRemote}\n                    disabled={\n                      !mode.includes('remote') &&\n                      dictionary.location !== 'remote' &&\n                      dictionary.location !== 'hybrid'\n                    }\n                    onChange={(e) => handleRemoteToggle(e.target.checked)}\n                  />\n                </div>\n                <Form.Description>\n                  {locationSelect.testDescription}\n                </Form.Description>\n                <Form.Message />\n              </Form.Item>\n            );\n          }}\n        />\n\n        <AnimatePresence mode=\"wait\">\n          {isLocalChecked && (\n            <motion.div\n              key=\"filePath-input\"\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: 'auto' }}\n              exit={{ opacity: 0, height: 0 }}\n              transition={{ duration: 0.3 }}\n              className=\"overflow-hidden\"\n            >\n              <Form.Input\n                name=\"filePath\"\n                label={filePathInput.label.value}\n                placeholder={filePathInput.placeholder.value}\n                description={filePathInput.description.value}\n                disabled={isSubmitting || !isLocalChecked}\n                onChange={(e) => {\n                  const value = e.target.value;\n                  setEditedDictionary({\n                    ...dictionary,\n                    ...(updatedDictionary ?? {}),\n                    filePath: value,\n                  });\n                }}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n      <div className=\"grid grid-cols-2 gap-8 max-md:grid-cols-1\">\n        <Form.Select\n          name=\"importMode\"\n          label={importModeSelect.label.value}\n          description={importModeSelect.description.value}\n          onValueChange={(value) => {\n            form.setValue('importMode', value as any, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              importMode: value as any,\n            });\n          }}\n        >\n          <Select.Trigger>\n            <Select.Value placeholder={importModeSelect.label.value} />\n          </Select.Trigger>\n          <Select.Content>\n            <Select.Item value=\"static\">\n              {importModeSelect.static.value}\n            </Select.Item>\n            <Select.Item value=\"dynamic\">\n              {importModeSelect.dynamic.value}\n            </Select.Item>\n            <Select.Item value=\"live\">\n              {importModeSelect.live.value}\n            </Select.Item>\n          </Select.Content>\n        </Form.Select>\n      </div>\n      <div className=\"grid grid-cols-2 gap-8 max-md:grid-cols-1\">\n        <Form.MultiSelect\n          name=\"projectIds\"\n          label={projectInput.label.value}\n          description={projectInput.description}\n          onValueChange={(value) => {\n            const valueArray = [value].flat();\n            form.setValue('projectIds', valueArray, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              projectIds: valueArray,\n            });\n          }}\n        >\n          <MultiSelect.Trigger\n            getBadgeValue={(value) =>\n              projects?.find((project: any) => String(project.id) === value)\n                ?.name ?? value\n            }\n          >\n            <MultiSelect.Input placeholder={projectInput.placeholder.value} />\n          </MultiSelect.Trigger>\n          <MultiSelect.Content>\n            <Loader isLoading={isLoadingProjects}>\n              <MultiSelect.List>\n                {projects?.map((project: any) => (\n                  <MultiSelect.Item\n                    key={String(project.id)}\n                    value={String(project.id)}\n                  >\n                    {project.name}\n                  </MultiSelect.Item>\n                ))}\n              </MultiSelect.List>\n            </Loader>\n          </MultiSelect.Content>\n        </Form.MultiSelect>\n\n        <Form.MultiSelect\n          name=\"tags\"\n          label={tagsSelect.label.value}\n          description={tagsSelect.description}\n          onValueChange={(value) => {\n            const valueArray = [value].flat();\n            form.setValue('tags', valueArray, { shouldDirty: true });\n            setEditedDictionary({\n              ...dictionary,\n              ...(updatedDictionary ?? {}),\n              tags: valueArray,\n            });\n          }}\n        >\n          <MultiSelect.Trigger\n            getBadgeValue={(value) =>\n              allTags?.find((tag: any) => String(tag.key) === value)?.name ??\n              value\n            }\n          >\n            <MultiSelect.Input placeholder={tagsSelect.placeholder.value} />\n          </MultiSelect.Trigger>\n          <MultiSelect.Content>\n            <Loader isLoading={isLoadingProjects}>\n              <MultiSelect.List>\n                {allTags?.map((tag: any) => (\n                  <MultiSelect.Item\n                    key={String(tag.key)}\n                    value={String(tag.key)}\n                  >\n                    {tag.name ?? tag.key}\n                  </MultiSelect.Item>\n                ))}\n              </MultiSelect.List>\n            </Loader>\n          </MultiSelect.Content>\n        </Form.MultiSelect>\n      </div>\n\n      <div className=\"flex flex-wrap items-center justify-end gap-2 max-md:flex-col\">\n        <Form.Button\n          type=\"button\"\n          size=\"icon-md\"\n          label={auditButton.label.value}\n          Icon={WandSparkles}\n          variant=\"outline\"\n          color=\"text\"\n          className=\"max-md:w-full\"\n          onClick={handleOnAuditFile}\n          disabled={isSubmitting || isAuditing}\n          isLoading={isAuditing}\n        />\n      </div>\n    </Form>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs

@@ -1,11 +1,11 @@
 'use client';
 
+import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
-import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
 import { CopyToClipboard } from "../CopyToClipboard/index.mjs";
 import { LocaleSwitcherContentProvider } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { ContentEditor } from "./ContentEditor.mjs";
-import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
+import { TabSelector } from "../TabSelector/TabSelector.mjs";
 import { DictionaryDetailsForm } from "./DictionaryDetails/DictionaryDetailsForm.mjs";
 import { JSONEditor } from "./JSONEditor.mjs";
 import { SaveForm } from "./SaveForm/SaveForm.mjs";
@@ -13,8 +13,8 @@ import { StructureEditor } from "./StructureEditor.mjs";
 import { useEffect, useState } from "react";
 import { ArrowLeft } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 
 //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
 const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave, showReturnButton = true }) => {

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { CopyToClipboard } from '@components/CopyToClipboard';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { ArrowLeft } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  onSave?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n  showReturnButton?: boolean;\n};\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n  onSave,\n  showReturnButton = true,\n}) => {\n  const config = useConfiguration();\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { focusedContent, setFocusedContent } = useFocusUnmergedDictionary();\n  const { setLocaleDictionary } = useDictionariesRecordActions();\n  const [activeTab, setActiveTab] = useState<string>('content');\n\n  useEffect(() => {\n    setFocusedContent({\n      ...(focusedContent ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    });\n    setLocaleDictionary(dictionary);\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization?.locales ?? []}\n    >\n      <div className=\"relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden\">\n        {showReturnButton && (\n          <Button\n            onClick={onClickDictionaryList}\n            variant={ButtonVariant.HOVERABLE}\n            className=\"z-10 mr-auto mb-6 ml-5 shrink-0\"\n            color={ButtonColor.TEXT}\n            Icon={ArrowLeft}\n            label={returnToDictionaryList.label.value}\n          >\n            {returnToDictionaryList.text}\n          </Button>\n        )}\n\n        <div className=\"mb-22 flex min-h-0 flex-1 flex-col overflow-hidden\">\n          {/* Tab headers */}\n          <div className=\"sticky top-0 z-10 flex shrink-0 gap-3 rounded-xl bg-background/20 p-3 pb-4\">\n            <TabSelector\n              selectedChoice={activeTab}\n              tabs={[\n                ...(mode.includes('remote')\n                  ? [\n                      <button\n                        key=\"details\"\n                        className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                        data-active={activeTab === 'details'}\n                        onClick={() => setActiveTab('details')}\n                        type=\"button\"\n                      >\n                        Details\n                      </button>,\n                    ]\n                  : []),\n                <button\n                  key=\"structure\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'structure'}\n                  onClick={() => setActiveTab('structure')}\n                  type=\"button\"\n                >\n                  Structure\n                </button>,\n                <button\n                  key=\"content\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'content'}\n                  onClick={() => setActiveTab('content')}\n                  type=\"button\"\n                >\n                  Content\n                </button>,\n                <button\n                  key=\"json\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'json'}\n                  onClick={() => setActiveTab('json')}\n                  type=\"button\"\n                >\n                  JSON\n                </button>,\n              ]}\n              hoverable\n              color={TabSelectorColor.TEXT}\n            />\n          </div>\n          {/* Tab content — only active panel is mounted */}\n          <div className=\"min-h-0 flex-1 overflow-y-auto p-6\">\n            <div className=\"flex w-full min-w-0 flex-col items-stretch gap-6\">\n              {mode.includes('remote') && activeTab === 'details' && (\n                <DictionaryDetailsForm dictionary={dictionary} mode={mode} />\n              )}\n              {activeTab === 'structure' && (\n                <StructureEditor dictionary={dictionary} />\n              )}\n              {activeTab === 'content' && (\n                <ContentEditor\n                  dictionary={dictionary}\n                  isDarkMode={isDarkMode}\n                />\n              )}\n              {activeTab === 'json' && (\n                <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n              )}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"absolute bottom-3 z-20 w-full p-2\">\n          <Container\n            color=\"card\"\n            roundedSize=\"2xl\"\n            padding=\"sm\"\n            className=\"w-full shrink-0 flex-row flex-wrap items-center justify-end gap-10 bg-background/20 md:bottom-0\"\n          >\n            <CopyToClipboard\n              text={dictionary.id!}\n              className=\"text-nowrap text-neutral text-sm\"\n              size={9}\n            >\n              {dictionary.id}\n            </CopyToClipboard>\n            <SaveForm\n              dictionary={dictionary}\n              mode={mode}\n              onDelete={() => {\n                setFocusedContent(null);\n                onDelete?.();\n              }}\n              onSave={onSave}\n            />\n          </Container>\n        </div>\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAa,yBAAyD,EACpE,YACA,uBACA,YACA,MACA,UACA,QACA,mBAAmB,WACf;CACJ,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,2BAA2B,YAAY,yBAAyB;CACxE,MAAM,EAAE,gBAAgB,sBAAsB,2BAA2B;CACzE,MAAM,EAAE,wBAAwB,6BAA6B;CAC7D,MAAM,CAAC,WAAW,gBAAgB,SAAiB,SAAS;CAE5D,gBAAgB;EACd,kBAAkB;GAChB,GAAI,kBAAkB,CAAC;GACvB,eAAe,WAAW;GAC1B,mBAAmB,WAAW;EAChC,CAAC;EACD,oBAAoB,UAAU;CAChC,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,+BAAD;EACE,kBAAkB,QAAQ,sBAAsB,WAAW,CAAC;YAE5D,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,oBACC,oBAAC,QAAD;KACE,SAAS;KACT;KACA,WAAU;KACV;KACA,MAAM;KACN,OAAO,uBAAuB,MAAM;eAEnC,uBAAuB;IAClB;IAGV,qBAAC,OAAD;KAAK,WAAU;eAAf,CAEE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,aAAD;OACE,gBAAgB;OAChB,MAAM;QACJ,GAAI,KAAK,SAAS,QAAQ,IACtB,CACE,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,SAAS;SACrC,MAAK;mBACN;QAEO,GAPF,SAOE,CACV,IACA,CAAC;QACL,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,WAAW;SACvC,MAAK;mBACN;QAEO,GAPF,WAOE;QACR,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,SAAS;SACrC,MAAK;mBACN;QAEO,GAPF,SAOE;QACR,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,MAAM;SAClC,MAAK;mBACN;QAEO,GAPF,MAOE;OACV;OACA;OACA;MACD;KACE,IAEL,oBAAC,OAAD;MAAK,WAAU;gBACb,qBAAC,OAAD;OAAK,WAAU;iBAAf;QACG,KAAK,SAAS,QAAQ,KAAK,cAAc,aACxC,oBAAC,uBAAD;SAAmC;SAAkB;QAAO;QAE7D,cAAc,eACb,oBAAC,iBAAD,EAA6B,WAAa;QAE3C,cAAc,aACb,oBAAC,eAAD;SACc;SACA;QACb;QAEF,cAAc,UACb,oBAAC,YAAD;SAAwB;SAAwB;QAAa;OAE5D;;KACF,EACF;;IAEL,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,WAAD;MACE,OAAM;MACN,aAAY;MACZ,SAAQ;MACR,WAAU;gBAJZ,CAME,oBAAC,iBAAD;OACE,MAAM,WAAW;OACjB,WAAU;OACV,MAAM;iBAEL,WAAW;MACG,IACjB,oBAAC,UAAD;OACc;OACN;OACN,gBAAgB;QACd,kBAAkB,IAAI;QACtB,WAAW;OACb;OACQ;MACT,EACQ;;IACR;GACF;;CACwB;AAEnC"}
+{"version":3,"file":"DictionaryFieldEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { CopyToClipboard } from '@components/CopyToClipboard';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { ArrowLeft } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { TabSelector } from '../TabSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  onSave?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n  showReturnButton?: boolean;\n};\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n  onSave,\n  showReturnButton = true,\n}) => {\n  const config = useConfiguration();\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { focusedContent, setFocusedContent } = useFocusUnmergedDictionary();\n  const { setLocaleDictionary } = useDictionariesRecordActions();\n  const [activeTab, setActiveTab] = useState<string>('content');\n\n  useEffect(() => {\n    setFocusedContent({\n      ...(focusedContent ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    });\n    setLocaleDictionary(dictionary);\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization?.locales ?? []}\n    >\n      <div className=\"relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden\">\n        {showReturnButton && (\n          <Button\n            onClick={onClickDictionaryList}\n            variant=\"hoverable\"\n            className=\"z-10 mr-auto mb-6 ml-5 shrink-0\"\n            color=\"text\"\n            Icon={ArrowLeft}\n            label={returnToDictionaryList.label.value}\n          >\n            {returnToDictionaryList.text}\n          </Button>\n        )}\n\n        <div className=\"mb-22 flex min-h-0 flex-1 flex-col overflow-hidden\">\n          {/* Tab headers */}\n          <div className=\"sticky top-0 z-10 flex shrink-0 gap-3 rounded-xl bg-background/20 p-3 pb-4\">\n            <TabSelector\n              selectedChoice={activeTab}\n              tabs={[\n                ...(mode.includes('remote')\n                  ? [\n                      <button\n                        key=\"details\"\n                        className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                        data-active={activeTab === 'details'}\n                        onClick={() => setActiveTab('details')}\n                        type=\"button\"\n                      >\n                        Details\n                      </button>,\n                    ]\n                  : []),\n                <button\n                  key=\"structure\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'structure'}\n                  onClick={() => setActiveTab('structure')}\n                  type=\"button\"\n                >\n                  Structure\n                </button>,\n                <button\n                  key=\"content\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'content'}\n                  onClick={() => setActiveTab('content')}\n                  type=\"button\"\n                >\n                  Content\n                </button>,\n                <button\n                  key=\"json\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'json'}\n                  onClick={() => setActiveTab('json')}\n                  type=\"button\"\n                >\n                  JSON\n                </button>,\n              ]}\n              hoverable\n              color=\"text\"\n            />\n          </div>\n          {/* Tab content — only active panel is mounted */}\n          <div className=\"min-h-0 flex-1 overflow-y-auto p-6\">\n            <div className=\"flex w-full min-w-0 flex-col items-stretch gap-6\">\n              {mode.includes('remote') && activeTab === 'details' && (\n                <DictionaryDetailsForm dictionary={dictionary} mode={mode} />\n              )}\n              {activeTab === 'structure' && (\n                <StructureEditor dictionary={dictionary} />\n              )}\n              {activeTab === 'content' && (\n                <ContentEditor\n                  dictionary={dictionary}\n                  isDarkMode={isDarkMode}\n                />\n              )}\n              {activeTab === 'json' && (\n                <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n              )}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"absolute bottom-3 z-20 w-full p-2\">\n          <Container\n            color=\"card\"\n            roundedSize=\"2xl\"\n            padding=\"sm\"\n            className=\"w-full shrink-0 flex-row flex-wrap items-center justify-end gap-10 bg-background/20 md:bottom-0\"\n          >\n            <CopyToClipboard\n              text={dictionary.id!}\n              className=\"text-nowrap text-neutral text-sm\"\n              size={9}\n            >\n              {dictionary.id}\n            </CopyToClipboard>\n            <SaveForm\n              dictionary={dictionary}\n              mode={mode}\n              onDelete={() => {\n                setFocusedContent(null);\n                onDelete?.();\n              }}\n              onSave={onSave}\n            />\n          </Container>\n        </div>\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAa,yBAAyD,EACpE,YACA,uBACA,YACA,MACA,UACA,QACA,mBAAmB,WACf;CACJ,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,2BAA2B,YAAY,yBAAyB;CACxE,MAAM,EAAE,gBAAgB,sBAAsB,2BAA2B;CACzE,MAAM,EAAE,wBAAwB,6BAA6B;CAC7D,MAAM,CAAC,WAAW,gBAAgB,SAAiB,SAAS;CAE5D,gBAAgB;EACd,kBAAkB;GAChB,GAAI,kBAAkB,CAAC;GACvB,eAAe,WAAW;GAC1B,mBAAmB,WAAW;EAChC,CAAC;EACD,oBAAoB,UAAU;CAChC,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,+BAAD;EACE,kBAAkB,QAAQ,sBAAsB,WAAW,CAAC;YAE5D,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,oBACC,oBAAC,QAAD;KACE,SAAS;KACT,SAAQ;KACR,WAAU;KACV,OAAM;KACN,MAAM;KACN,OAAO,uBAAuB,MAAM;eAEnC,uBAAuB;IAClB;IAGV,qBAAC,OAAD;KAAK,WAAU;eAAf,CAEE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,aAAD;OACE,gBAAgB;OAChB,MAAM;QACJ,GAAI,KAAK,SAAS,QAAQ,IACtB,CACE,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,SAAS;SACrC,MAAK;mBACN;QAEO,GAPF,SAOE,CACV,IACA,CAAC;QACL,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,WAAW;SACvC,MAAK;mBACN;QAEO,GAPF,WAOE;QACR,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,SAAS;SACrC,MAAK;mBACN;QAEO,GAPF,SAOE;QACR,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,MAAM;SAClC,MAAK;mBACN;QAEO,GAPF,MAOE;OACV;OACA;OACA,OAAM;MACP;KACE,IAEL,oBAAC,OAAD;MAAK,WAAU;gBACb,qBAAC,OAAD;OAAK,WAAU;iBAAf;QACG,KAAK,SAAS,QAAQ,KAAK,cAAc,aACxC,oBAAC,uBAAD;SAAmC;SAAkB;QAAO;QAE7D,cAAc,eACb,oBAAC,iBAAD,EAA6B,WAAa;QAE3C,cAAc,aACb,oBAAC,eAAD;SACc;SACA;QACb;QAEF,cAAc,UACb,oBAAC,YAAD;SAAwB;SAAwB;QAAa;OAE5D;;KACF,EACF;;IAEL,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,WAAD;MACE,OAAM;MACN,aAAY;MACZ,SAAQ;MACR,WAAU;gBAJZ,CAME,oBAAC,iBAAD;OACE,MAAM,WAAW;OACjB,WAAU;OACV,MAAM;iBAEL,WAAW;MACG,IACjB,oBAAC,UAAD;OACc;OACN;OACN,gBAAgB;QACd,kBAAkB,IAAI;QACtB,WAAW;OACb;OACQ;MACT,EACQ;;IACR;GACF;;CACwB;AAEnC"}

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -1,12 +1,12 @@
-import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
+import { Button } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
 import { useState } from "react";
 import { ChevronRight, Plus } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";
@@ -46,7 +46,7 @@ const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 		className: "w-full",
 		onClick: () => setFocusedContentKeyPath(keyPath),
 		IconRight: ChevronRight,
-		children: camelCaseToSentence(keyPath[keyPath.length - 1].key)
+		children: camelCaseToSentence(keyPath[keyPath.length - 1]?.key)
 	});
 	if (typeof section === "object") {
 		if (nodeType === NodeTypes.REACT_NODE) return /* @__PURE__ */ jsx(Fragment$1, { children: "React Node" });

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { Accordion, type AccordionProps } from '@components/Accordion';\nimport {\n  Button,\n  ButtonColor,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '@components/Button';\nimport { useLocaleSwitcherContent } from '@components/LocaleSwitcherContentDropDown';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n  getContentNodeByKeyPath,\n  getEmptyNode,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n  useEditedContentActions,\n  useEditorLocale,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport type { ContentNode, Dictionary } from 'intlayer';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { type FC, type ReactNode, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype GatedAccordionProps = AccordionProps & { children: ReactNode };\n\n// Renders children only after the accordion is first opened (mount-once pattern).\n// Prevents the entire recursive subtree from mounting on initial render.\nconst GatedAccordion: FC<GatedAccordionProps> = ({\n  children,\n  onToggle,\n  ...props\n}) => {\n  const [hasOpened, setHasOpened] = useState(false);\n  return (\n    <Accordion\n      {...props}\n      onToggle={(isOpen) => {\n        if (isOpen && !hasOpened) setHasOpened(true);\n        onToggle?.(isOpen);\n      }}\n    >\n      {hasOpened ? children : null}\n    </Accordion>\n  );\n};\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  section: ContentNode;\n  dictionary: Dictionary;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionary,\n}) => {\n  const { selectedLocales } = useLocaleSwitcherContent();\n\n  const currentLocale = useEditorLocale();\n  const section = getContentNodeByKeyPath(sectionProp, keyPath, currentLocale);\n  const { addEditedContent } = useEditedContentActions();\n  const { setFocusedContentKeyPath, focusedContent } =\n    useFocusUnmergedDictionary();\n  const { addNewElement, goToField } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n  const getIsSelected = (keyPath: KeyPath[]) =>\n    (focusedContent?.keyPath?.length ?? 0) > 0 &&\n    isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n  const isEditableSubSection = getIsEditableSection(section);\n\n  if (!section) return <></>;\n\n  if (isEditableSubSection) {\n    return (\n      <Button\n        label={goToField.label.value}\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        className=\"w-full\"\n        onClick={() => setFocusedContentKeyPath(keyPath)}\n        IconRight={ChevronRight}\n      >\n        {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n      </Button>\n    );\n  }\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeTypes.REACT_NODE) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeTypes.TRANSLATION) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {selectedLocales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeTypes.TRANSLATION, key: translationKey },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={translationKey}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionary={dictionary}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (\n      nodeType === NodeTypes.ENUMERATION ||\n      nodeType === NodeTypes.PLURAL ||\n      nodeType === NodeTypes.CONDITION\n    ) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as any)[nodeType as unknown as keyof typeof section]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: nodeType, key },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={key}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionary={dictionary}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeTypes.ARRAY) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as unknown as ContentNode[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeTypes.ARRAY, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  key={JSON.stringify(childKeyPath)}\n                  label={`${goToField.label.value} ${index}`}\n                  variant={ButtonVariant.HOVERABLE}\n                  color={ButtonColor.TEXT}\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                  isActive={getIsSelected(childKeyPath)}\n                >\n                  Item {index}\n                </Button>\n              );\n            }\n\n            return (\n              <GatedAccordion\n                key={JSON.stringify(childKeyPath)}\n                label={`${goToField.label.value} ${index}`}\n                header={`Item ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              >\n                <div className=\"mt-2 flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionary={dictionary}\n                    />\n                  </div>\n                </div>\n              </GatedAccordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant={ButtonVariant.HOVERABLE}\n            color={ButtonColor.NEUTRAL}\n            textAlign={ButtonTextAlign.LEFT}\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeTypes.ARRAY,\n                  key: (section as unknown as ContentNode[]).length,\n                },\n              ];\n              const sectionArray = section as unknown as ContentNode[];\n              const emptySectionEl =\n                getEmptyNode(\n                  sectionArray[\n                    (sectionArray.length - 1) as keyof typeof sectionArray\n                  ] as ContentNode\n                ) ?? '';\n              addEditedContent(\n                dictionary.localId as LocalDictionaryId,\n                emptySectionEl,\n                newKeyPath,\n                false\n              );\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    if (typeof section.nodeType === 'string') {\n      const childKeyPath: KeyPath[] = [\n        ...keyPath,\n        { type: section.nodeType } as KeyPath,\n      ];\n\n      return (\n        <NavigationViewNode\n          keyPath={childKeyPath}\n          section={sectionProp}\n          dictionary={dictionary}\n        />\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeTypes.OBJECT, key },\n          ];\n\n          const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <GatedAccordion\n              key={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"mt-2 flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionary={dictionary}\n                  />\n                </div>\n              </div>\n            </GatedAccordion>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"NavigationViewNode.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { Accordion, type AccordionProps } from '@components/Accordion';\nimport { Button } from '@components/Button';\nimport { useLocaleSwitcherContent } from '@components/LocaleSwitcherContentDropDown';\nimport { camelCaseToSentence } from '@intlayer/config/client';\nimport {\n  getContentNodeByKeyPath,\n  getEmptyNode,\n  getNodeType,\n} from '@intlayer/core/dictionaryManipulator';\nimport { isSameKeyPath } from '@intlayer/core/utils';\nimport {\n  useEditedContentActions,\n  useEditorLocale,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { LocalDictionaryId } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport type { ContentNode, Dictionary } from 'intlayer';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { type FC, type ReactNode, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\ntype GatedAccordionProps = AccordionProps & { children: ReactNode };\n\n// Renders children only after the accordion is first opened (mount-once pattern).\n// Prevents the entire recursive subtree from mounting on initial render.\nconst GatedAccordion: FC<GatedAccordionProps> = ({\n  children,\n  onToggle,\n  ...props\n}) => {\n  const [hasOpened, setHasOpened] = useState(false);\n  return (\n    <Accordion\n      {...props}\n      onToggle={(isOpen) => {\n        if (isOpen && !hasOpened) setHasOpened(true);\n        onToggle?.(isOpen);\n      }}\n    >\n      {hasOpened ? children : null}\n    </Accordion>\n  );\n};\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  section: ContentNode;\n  dictionary: Dictionary;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionary,\n}) => {\n  const { selectedLocales } = useLocaleSwitcherContent();\n\n  const currentLocale = useEditorLocale();\n  const section = getContentNodeByKeyPath(sectionProp, keyPath, currentLocale);\n  const { addEditedContent } = useEditedContentActions();\n  const { setFocusedContentKeyPath, focusedContent } =\n    useFocusUnmergedDictionary();\n  const { addNewElement, goToField } = useIntlayer('navigation-view');\n  const nodeType = getNodeType(section);\n  const getIsSelected = (keyPath: KeyPath[]) =>\n    (focusedContent?.keyPath?.length ?? 0) > 0 &&\n    isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n  const isEditableSubSection = getIsEditableSection(section);\n\n  if (!section) return <></>;\n\n  if (isEditableSubSection) {\n    return (\n      <Button\n        label={goToField.label.value}\n        variant=\"hoverable\"\n        color=\"text\"\n        className=\"w-full\"\n        onClick={() => setFocusedContentKeyPath(keyPath)}\n        IconRight={ChevronRight}\n      >\n        {camelCaseToSentence(keyPath[keyPath.length - 1]?.key as string)}\n      </Button>\n    );\n  }\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeTypes.REACT_NODE) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeTypes.TRANSLATION) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {selectedLocales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeTypes.TRANSLATION, key: translationKey },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={translationKey}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionary={dictionary}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (\n      nodeType === NodeTypes.ENUMERATION ||\n      nodeType === NodeTypes.PLURAL ||\n      nodeType === NodeTypes.CONDITION\n    ) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as any)[nodeType as unknown as keyof typeof section]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: nodeType, key },\n            ];\n\n            return (\n              <NavigationViewNode\n                key={key}\n                keyPath={childKeyPath}\n                section={sectionProp}\n                dictionary={dictionary}\n              />\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeTypes.ARRAY) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as unknown as ContentNode[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeTypes.ARRAY, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  key={JSON.stringify(childKeyPath)}\n                  label={`${goToField.label.value} ${index}`}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                  isActive={getIsSelected(childKeyPath)}\n                >\n                  Item {index}\n                </Button>\n              );\n            }\n\n            return (\n              <GatedAccordion\n                key={JSON.stringify(childKeyPath)}\n                label={`${goToField.label.value} ${index}`}\n                header={`Item ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              >\n                <div className=\"mt-2 flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionary={dictionary}\n                    />\n                  </div>\n                </div>\n              </GatedAccordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeTypes.ARRAY,\n                  key: (section as unknown as ContentNode[]).length,\n                },\n              ];\n              const sectionArray = section as unknown as ContentNode[];\n              const emptySectionEl =\n                getEmptyNode(\n                  sectionArray[\n                    (sectionArray.length - 1) as keyof typeof sectionArray\n                  ] as ContentNode\n                ) ?? '';\n              addEditedContent(\n                dictionary.localId as LocalDictionaryId,\n                emptySectionEl,\n                newKeyPath,\n                false\n              );\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    if (typeof section.nodeType === 'string') {\n      const childKeyPath: KeyPath[] = [\n        ...keyPath,\n        { type: section.nodeType } as KeyPath,\n      ];\n\n      return (\n        <NavigationViewNode\n          keyPath={childKeyPath}\n          section={sectionProp}\n          dictionary={dictionary}\n        />\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeTypes.OBJECT, key },\n          ];\n\n          const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <GatedAccordion\n              key={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"mt-2 flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionary={dictionary}\n                  />\n                </div>\n              </div>\n            </GatedAccordion>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs

@@ -1,17 +1,16 @@
 'use client';
 
 import { cn } from "../../../utils/cn.mjs";
-import { ButtonColor, ButtonVariant } from "../../Button/Button.mjs";
 import { useAuth } from "../../../api/useAuth/useAuth.mjs";
 import { useDeleteDictionary, usePushDictionaries } from "../../../api/hooks/dictionary.mjs";
 import { useWriteDictionary } from "../../../api/hooks/editor.mjs";
 import { Form } from "../../Form/Form.mjs";
-import { Modal, ModalSize } from "../../Modal/Modal.mjs";
+import { Modal } from "../../Modal/Modal.mjs";
 import { useState } from "react";
 import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 
 //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SaveForm.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useAuth,\n  useDeleteDictionary,\n  usePushDictionaries,\n  useWriteDictionary,\n} from '@api/index';\nimport { ButtonColor, ButtonVariant } from '@components/Button';\nimport { Form } from '@components/Form';\nimport { Modal, ModalSize } from '@components/Modal';\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport {\n  useDictionariesRecordActions,\n  useEditedContent,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { cn } from '@utils/cn';\nimport {\n  ArrowUpFromLine,\n  Download,\n  RotateCcw,\n  Save,\n  Trash,\n} from 'lucide-react';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type FormHTMLAttributes,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n  mode: ('local' | 'remote')[];\n  onDelete?: () => void;\n  onSave?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n  dictionary,\n  mode,\n  className,\n  onDelete,\n  onSave,\n  ...props\n}) => {\n  const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n  const { setLocaleDictionary } = useDictionariesRecordActions();\n  const { mutate: deleteDictionary, isPending: isDeleting } =\n    useDeleteDictionary();\n  const { mutate: writeDictionary, isPending: isWriting } =\n    useWriteDictionary();\n  const { mutate: pushDictionaries, isPending: isPushing } =\n    usePushDictionaries();\n  const isLoading = isWriting || isPushing;\n\n  const { editedContent, restoreEditedContent } = useEditedContent();\n  const {\n    deleteButton,\n    resetButton,\n    saveButton,\n    publishButton,\n    downloadButton,\n    confirmation,\n  } = useIntlayer('save-dictionary-details');\n  const { isAuthenticated } = useAuth();\n\n  const editedDictionary = editedContent?.[dictionary.localId!];\n\n  const isEdited =\n    editedDictionary &&\n    JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n  const isDistantDictionary =\n    typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n  const handleSaveDictionaryConfirmation = async () => {\n    if (!editedContent?.[dictionary.localId!]) return;\n\n    const updatedDictionary = {\n      ...dictionary,\n      ...editedContent?.[dictionary.localId!],\n    };\n\n    writeDictionary(\n      {\n        dictionary: updatedDictionary,\n      },\n      {\n        onSuccess: () => {\n          setLocaleDictionary(editedContent?.[dictionary.localId!]);\n          restoreEditedContent(dictionary.localId!);\n          setIsFormatAlertModalOpen(false);\n          onSave?.();\n        },\n      }\n    );\n  };\n\n  const handlePushDictionary = () => {\n    const updatedDictionary = {\n      ...dictionary,\n      ...editedContent?.[dictionary.localId!],\n    };\n\n    pushDictionaries(\n      { dictionaries: [updatedDictionary] },\n      {\n        onSuccess: (res) => {\n          if (res) {\n            setLocaleDictionary(updatedDictionary);\n            restoreEditedContent(dictionary.localId!);\n            onSave?.();\n          }\n        },\n      }\n    );\n  };\n\n  const handleDeleteDictionary = () => {\n    if (!dictionary.id) return;\n\n    deleteDictionary(\n      {\n        dictionaryId: dictionary.id,\n      },\n      {\n        onSuccess: (res) => {\n          if (res) {\n            onDelete?.();\n          }\n        },\n      }\n    );\n  };\n\n  return (\n    <>\n      <Modal\n        isOpen={isFormatAlertModalOpen}\n        title={confirmation.title.value}\n        size={ModalSize.MD}\n        onClose={() => setIsFormatAlertModalOpen(false)}\n        padding=\"md\"\n      >\n        <form className=\"size-full\">\n          <p className=\"py-4 text-neutral text-sm\">{confirmation.message}</p>\n\n          <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n            <Form.Button\n              label={confirmation.cancelButton.label.value}\n              disabled={!isEdited || isLoading}\n              color={ButtonColor.TEXT}\n              className=\"max-md:w-full\"\n              variant={ButtonVariant.OUTLINE}\n              onClick={() => setIsFormatAlertModalOpen(false)}\n            >\n              {confirmation.cancelButton.text}\n            </Form.Button>\n            <Form.Button\n              label={confirmation.confirmButton.label.value}\n              disabled={!isEdited || isLoading}\n              Icon={Save}\n              color={ButtonColor.TEXT}\n              className=\"max-md:w-full\"\n              isLoading={isPushing}\n              onClick={handleSaveDictionaryConfirmation}\n            >\n              {confirmation.confirmButton.text}\n            </Form.Button>\n          </div>\n        </form>\n      </Modal>\n      <form className={cn('flex justify-end gap-2', className)} {...props}>\n        {mode.includes('remote') &&\n          isDistantDictionary &&\n          onDelete &&\n          isAuthenticated && (\n            <Form.Button\n              label={deleteButton.label.value}\n              Icon={Trash}\n              color={ButtonColor.ERROR}\n              variant={ButtonVariant.OUTLINE}\n              className=\"max-md:w-full\"\n              isLoading={isDeleting}\n              onClick={handleDeleteDictionary}\n            >\n              {deleteButton.text}\n            </Form.Button>\n          )}\n        {isEdited && (\n          <Form.Button\n            label={resetButton.label.value}\n            disabled={!isEdited}\n            Icon={RotateCcw}\n            variant={ButtonVariant.OUTLINE}\n            color={ButtonColor.TEXT}\n            className=\"max-md:w-full\"\n            onClick={() => restoreEditedContent(dictionary.localId!)}\n          >\n            {resetButton.text}\n          </Form.Button>\n        )}\n        {mode.includes('local') && (\n          <Form.Button\n            label={downloadButton.label.value}\n            disabled={!isEdited || isLoading}\n            Icon={Download}\n            color={ButtonColor.TEXT}\n            variant={\n              isAuthenticated ? ButtonVariant.OUTLINE : ButtonVariant.DEFAULT\n            }\n            className=\"max-md:w-full\"\n            isLoading={isWriting}\n            onClick={() => setIsFormatAlertModalOpen(true)}\n          >\n            {downloadButton.text}\n          </Form.Button>\n        )}\n        {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n          <Form.Button\n            label={publishButton.label.value}\n            disabled={isLoading}\n            Icon={ArrowUpFromLine}\n            color={ButtonColor.TEXT}\n            className=\"max-md:w-full\"\n            isLoading={isPushing}\n            onClick={handlePushDictionary}\n          >\n            {publishButton.text}\n          </Form.Button>\n        )}\n        {mode.includes('remote') &&\n          isAuthenticated &&\n          isDistantDictionary &&\n          isEdited && (\n            <Form.Button\n              label={saveButton.label.value}\n              disabled={!isEdited || isLoading}\n              Icon={Save}\n              color=\"text\"\n              className=\"max-md:w-full\"\n              isLoading={isPushing}\n              onClick={handlePushDictionary}\n            >\n              {saveButton.text}\n            </Form.Button>\n          )}\n      </form>\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SaveForm.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useAuth,\n  useDeleteDictionary,\n  usePushDictionaries,\n  useWriteDictionary,\n} from '@api/index';\nimport { Form } from '@components/Form';\nimport { Modal } from '@components/Modal';\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport {\n  useDictionariesRecordActions,\n  useEditedContent,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { cn } from '@utils/cn';\nimport {\n  ArrowUpFromLine,\n  Download,\n  RotateCcw,\n  Save,\n  Trash,\n} from 'lucide-react';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type FormHTMLAttributes,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n  mode: ('local' | 'remote')[];\n  onDelete?: () => void;\n  onSave?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n  dictionary,\n  mode,\n  className,\n  onDelete,\n  onSave,\n  ...props\n}) => {\n  const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n  const { setLocaleDictionary } = useDictionariesRecordActions();\n  const { mutate: deleteDictionary, isPending: isDeleting } =\n    useDeleteDictionary();\n  const { mutate: writeDictionary, isPending: isWriting } =\n    useWriteDictionary();\n  const { mutate: pushDictionaries, isPending: isPushing } =\n    usePushDictionaries();\n  const isLoading = isWriting || isPushing;\n\n  const { editedContent, restoreEditedContent } = useEditedContent();\n  const {\n    deleteButton,\n    resetButton,\n    saveButton,\n    publishButton,\n    downloadButton,\n    confirmation,\n  } = useIntlayer('save-dictionary-details');\n  const { isAuthenticated } = useAuth();\n\n  const editedDictionary = editedContent?.[dictionary.localId!];\n\n  const isEdited =\n    editedDictionary &&\n    JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n  const isDistantDictionary =\n    typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n  const handleSaveDictionaryConfirmation = async () => {\n    if (!editedContent?.[dictionary.localId!]) return;\n\n    const updatedDictionary = {\n      ...dictionary,\n      ...editedContent?.[dictionary.localId!],\n    };\n\n    writeDictionary(\n      {\n        dictionary: updatedDictionary,\n      },\n      {\n        onSuccess: () => {\n          setLocaleDictionary(editedContent?.[dictionary.localId!]);\n          restoreEditedContent(dictionary.localId!);\n          setIsFormatAlertModalOpen(false);\n          onSave?.();\n        },\n      }\n    );\n  };\n\n  const handlePushDictionary = () => {\n    const updatedDictionary = {\n      ...dictionary,\n      ...editedContent?.[dictionary.localId!],\n    };\n\n    pushDictionaries(\n      { dictionaries: [updatedDictionary] },\n      {\n        onSuccess: (res) => {\n          if (res) {\n            setLocaleDictionary(updatedDictionary);\n            restoreEditedContent(dictionary.localId!);\n            onSave?.();\n          }\n        },\n      }\n    );\n  };\n\n  const handleDeleteDictionary = () => {\n    if (!dictionary.id) return;\n\n    deleteDictionary(\n      {\n        dictionaryId: dictionary.id,\n      },\n      {\n        onSuccess: (res) => {\n          if (res) {\n            onDelete?.();\n          }\n        },\n      }\n    );\n  };\n\n  return (\n    <>\n      <Modal\n        isOpen={isFormatAlertModalOpen}\n        title={confirmation.title.value}\n        size=\"md\"\n        onClose={() => setIsFormatAlertModalOpen(false)}\n        padding=\"md\"\n      >\n        <form className=\"size-full\">\n          <p className=\"py-4 text-neutral text-sm\">{confirmation.message}</p>\n\n          <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n            <Form.Button\n              label={confirmation.cancelButton.label.value}\n              disabled={!isEdited || isLoading}\n              color=\"text\"\n              className=\"max-md:w-full\"\n              variant=\"outline\"\n              onClick={() => setIsFormatAlertModalOpen(false)}\n            >\n              {confirmation.cancelButton.text}\n            </Form.Button>\n            <Form.Button\n              label={confirmation.confirmButton.label.value}\n              disabled={!isEdited || isLoading}\n              Icon={Save}\n              color=\"text\"\n              className=\"max-md:w-full\"\n              isLoading={isPushing}\n              onClick={handleSaveDictionaryConfirmation}\n            >\n              {confirmation.confirmButton.text}\n            </Form.Button>\n          </div>\n        </form>\n      </Modal>\n      <form className={cn('flex justify-end gap-2', className)} {...props}>\n        {mode.includes('remote') &&\n          isDistantDictionary &&\n          onDelete &&\n          isAuthenticated && (\n            <Form.Button\n              label={deleteButton.label.value}\n              Icon={Trash}\n              color=\"error\"\n              variant=\"outline\"\n              className=\"max-md:w-full\"\n              isLoading={isDeleting}\n              onClick={handleDeleteDictionary}\n            >\n              {deleteButton.text}\n            </Form.Button>\n          )}\n        {isEdited && (\n          <Form.Button\n            label={resetButton.label.value}\n            disabled={!isEdited}\n            Icon={RotateCcw}\n            variant=\"outline\"\n            color=\"text\"\n            className=\"max-md:w-full\"\n            onClick={() => restoreEditedContent(dictionary.localId!)}\n          >\n            {resetButton.text}\n          </Form.Button>\n        )}\n        {mode.includes('local') && (\n          <Form.Button\n            label={downloadButton.label.value}\n            disabled={!isEdited || isLoading}\n            Icon={Download}\n            color=\"text\"\n            variant={isAuthenticated ? 'outline' : 'default'}\n            className=\"max-md:w-full\"\n            isLoading={isWriting}\n            onClick={() => setIsFormatAlertModalOpen(true)}\n          >\n            {downloadButton.text}\n          </Form.Button>\n        )}\n        {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n          <Form.Button\n            label={publishButton.label.value}\n            disabled={isLoading}\n            Icon={ArrowUpFromLine}\n            color=\"text\"\n            className=\"max-md:w-full\"\n            isLoading={isPushing}\n            onClick={handlePushDictionary}\n          >\n            {publishButton.text}\n          </Form.Button>\n        )}\n        {mode.includes('remote') &&\n          isAuthenticated &&\n          isDistantDictionary &&\n          isEdited && (\n            <Form.Button\n              label={saveButton.label.value}\n              disabled={!isEdited || isLoading}\n              Icon={Save}\n              color=\"text\"\n              className=\"max-md:w-full\"\n              isLoading={isPushing}\n              onClick={handlePushDictionary}\n            >\n              {saveButton.text}\n            </Form.Button>\n          )}\n      </form>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuCA,MAAa,YAAwC,EACnD,YACA,MACA,WACA,UACA,QACA,GAAG,YACC;CACJ,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAC1E,MAAM,EAAE,wBAAwB,6BAA6B;CAC7D,MAAM,EAAE,QAAQ,kBAAkB,WAAW,eAC3C,oBAAoB;CACtB,MAAM,EAAE,QAAQ,iBAAiB,WAAW,cAC1C,mBAAmB;CACrB,MAAM,EAAE,QAAQ,kBAAkB,WAAW,cAC3C,oBAAoB;CACtB,MAAM,YAAY,aAAa;CAE/B,MAAM,EAAE,eAAe,yBAAyB,iBAAiB;CACjE,MAAM,EACJ,cACA,aACA,YACA,eACA,gBACA,iBACE,YAAY,yBAAyB;CACzC,MAAM,EAAE,oBAAoB,QAAQ;CAEpC,MAAM,mBAAmB,gBAAgB,WAAW;CAEpD,MAAM,WACJ,oBACA,KAAK,UAAU,gBAAgB,MAAM,KAAK,UAAU,UAAU;CAEhE,MAAM,sBACJ,OAAQ,YAA6C,OAAO;CAE9D,MAAM,mCAAmC,YAAY;EACnD,IAAI,CAAC,gBAAgB,WAAW,UAAW;EAO3C,gBACE,EACE,YAAY;GANd,GAAG;GACH,GAAG,gBAAgB,WAAW;EAKA,EAC9B,GACA,EACE,iBAAiB;GACf,oBAAoB,gBAAgB,WAAW,QAAS;GACxD,qBAAqB,WAAW,OAAQ;GACxC,0BAA0B,KAAK;GAC/B,SAAS;EACX,EACF,CACF;CACF;CAEA,MAAM,6BAA6B;EACjC,MAAM,oBAAoB;GACxB,GAAG;GACH,GAAG,gBAAgB,WAAW;EAChC;EAEA,iBACE,EAAE,cAAc,CAAC,iBAAiB,EAAE,GACpC,EACE,YAAY,QAAQ;GAClB,IAAI,KAAK;IACP,oBAAoB,iBAAiB;IACrC,qBAAqB,WAAW,OAAQ;IACxC,SAAS;GACX;EACF,EACF,CACF;CACF;CAEA,MAAM,+BAA+B;EACnC,IAAI,CAAC,WAAW,IAAI;EAEpB,iBACE,EACE,cAAc,WAAW,GAC3B,GACA,EACE,YAAY,QAAQ;GAClB,IAAI,KACF,WAAW;EAEf,EACF,CACF;CACF;CAEA,OACE,8CACE,oBAAC,OAAD;EACE,QAAQ;EACR,OAAO,aAAa,MAAM;EAC1B,MAAK;EACL,eAAe,0BAA0B,KAAK;EAC9C,SAAQ;YAER,qBAAC,QAAD;GAAM,WAAU;aAAhB,CACE,oBAAC,KAAD;IAAG,WAAU;cAA6B,aAAa;GAAW,IAElE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,KAAK,QAAN;KACE,OAAO,aAAa,aAAa,MAAM;KACvC,UAAU,CAAC,YAAY;KACvB,OAAM;KACN,WAAU;KACV,SAAQ;KACR,eAAe,0BAA0B,KAAK;eAE7C,aAAa,aAAa;IAChB,IACb,oBAAC,KAAK,QAAN;KACE,OAAO,aAAa,cAAc,MAAM;KACxC,UAAU,CAAC,YAAY;KACvB,MAAM;KACN,OAAM;KACN,WAAU;KACV,WAAW;KACX,SAAS;eAER,aAAa,cAAc;IACjB,EACV;KACD;;CACD,IACP,qBAAC,QAAD;EAAM,WAAW,GAAG,0BAA0B,SAAS;EAAG,GAAI;YAA9D;GACG,KAAK,SAAS,QAAQ,KACrB,uBACA,YACA,mBACE,oBAAC,KAAK,QAAN;IACE,OAAO,aAAa,MAAM;IAC1B,MAAM;IACN,OAAM;IACN,SAAQ;IACR,WAAU;IACV,WAAW;IACX,SAAS;cAER,aAAa;GACH;GAEhB,YACC,oBAAC,KAAK,QAAN;IACE,OAAO,YAAY,MAAM;IACzB,UAAU,CAAC;IACX,MAAM;IACN,SAAQ;IACR,OAAM;IACN,WAAU;IACV,eAAe,qBAAqB,WAAW,OAAQ;cAEtD,YAAY;GACF;GAEd,KAAK,SAAS,OAAO,KACpB,oBAAC,KAAK,QAAN;IACE,OAAO,eAAe,MAAM;IAC5B,UAAU,CAAC,YAAY;IACvB,MAAM;IACN,OAAM;IACN,SAAS,kBAAkB,YAAY;IACvC,WAAU;IACV,WAAW;IACX,eAAe,0BAA0B,IAAI;cAE5C,eAAe;GACL;GAEd,KAAK,SAAS,QAAQ,KAAK,mBAAmB,CAAC,uBAC9C,oBAAC,KAAK,QAAN;IACE,OAAO,cAAc,MAAM;IAC3B,UAAU;IACV,MAAM;IACN,OAAM;IACN,WAAU;IACV,WAAW;IACX,SAAS;cAER,cAAc;GACJ;GAEd,KAAK,SAAS,QAAQ,KACrB,mBACA,uBACA,YACE,oBAAC,KAAK,QAAN;IACE,OAAO,WAAW,MAAM;IACxB,UAAU,CAAC,YAAY;IACvB,MAAM;IACN,OAAM;IACN,WAAU;IACV,WAAW;IACX,SAAS;cAER,WAAW;GACD;EAEb;GACN;AAEN"}

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs

@@ -1,14 +1,13 @@
 'use client';
 
+import { Button } from "../../Button/Button.mjs";
 import { Container } from "../../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
-import { InputVariant } from "../../Input/Input.mjs";
 import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
 import { Plus, Trash } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

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

@@ -1 +1 @@
-{"version":3,"file":"StructureView.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { EditableFieldInput } from '@components/EditableField';\nimport { InputVariant } from '@components/Input';\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={InputVariant.INVISIBLE}\n              />\n              <Button\n                label={deleteButton.label.value}\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.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={ButtonVariant.HOVERABLE}\n        size={ButtonSize.MD}\n        color={ButtonColor.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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"}
+{"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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"}

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs

@@ -1,7 +1,7 @@
 'use client';
 
+import { Button } from "../../Button/Button.mjs";
 import { Container } from "../../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { DropDown } from "../../DropDown/index.mjs";
 import { useVersionSwitcher } from "./VersionSwitcherContext.mjs";
 import { MoveVertical } from "lucide-react";

package/dist/esm/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VersionSwitcher.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonTextAlign,\n  ButtonVariant,\n} from '@components/Button';\nimport { Container } from '@components/Container';\nimport { DropDown, type PanelProps } from '@components/DropDown';\nimport { MoveVertical } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n  const { switchTo, versionSwitcherLabel, versionListLabel } =\n    useIntlayer('version-switcher');\n  const { selectedVersion, versions, setSelectedVersion } =\n    useVersionSwitcher();\n\n  if (versions.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={versionListLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          className=\"right-0 left-auto\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\n            border\n            roundedSize=\"2xl\"\n            borderColor=\"text\"\n            aria-label={versionSwitcherLabel.value}\n          >\n            <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n              {versions.reverse().map((version) => (\n                <li className=\"px-1.5 py-1\" key={version}>\n                  <Button\n                    onClick={() => setSelectedVersion(version)}\n                    label={`${switchTo} v${version}`}\n                    isActive={selectedVersion === version}\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    isFullWidth\n                    textAlign={ButtonTextAlign.LEFT}\n                    size={ButtonSize.SM}\n                  >\n                    <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm\">\n                      {version}\n                    </div>\n                  </Button>\n                </li>\n              ))}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,sBAAsB;AAE5B,MAAa,mBAA6C,EAAE,iBAAiB;CAC3E,MAAM,EAAE,UAAU,sBAAsB,qBACtC,YAAY,kBAAkB;CAChC,MAAM,EAAE,iBAAiB,UAAU,uBACjC,mBAAmB;CAErB,IAAI,SAAS,WAAW,GACtB,OAAO,+BAAI;CAGb,OACE,oBAAC,OAAD;EACE,WAAU;EACV,cAAY,iBAAiB;YAE7B,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;cAC5B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAQ,mBAAmB;KAAW,IACrD,oBAAC,cAAD,EAAc,WAAU,kBAAmB,EACxC;;GACW,IAElB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,WAAU;IACV,GAAI;cAEJ,oBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb;KACA,aAAY;KACZ,aAAY;KACZ,cAAY,qBAAqB;eAEjC,oBAAC,MAAD;MAAI,WAAU;gBACX,SAAS,QAAQ,EAAE,KAAK,YACvB,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,eAAe,mBAAmB,OAAO;QACzC,OAAO,GAAG,SAAS,IAAI;QACvB,UAAU,oBAAoB;QAC9B;QACA;QACA;QACA;QACA;kBAEA,oBAAC,OAAD;SAAK,WAAU;mBACZ;QACE;OACC;MACN,GAf6B,OAe7B,CACL;KACC;IACK;GACG,EACR;;CACP;AAET"}
+{"version":3,"file":"VersionSwitcher.mjs","names":[],"sources":["../../../../../src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { DropDown, type PanelProps } from '@components/DropDown';\nimport { MoveVertical } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useVersionSwitcher } from './VersionSwitcherContext';\n\nexport type VersionSwitcherProps = {\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'version-switcher';\n\nexport const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {\n  const { switchTo, versionSwitcherLabel, versionListLabel } =\n    useIntlayer('version-switcher');\n  const { selectedVersion, versions, setSelectedVersion } =\n    useVersionSwitcher();\n\n  if (versions.length === 0) {\n    return <></>;\n  }\n\n  return (\n    <div\n      className=\"rounded-xl border border-text text-text transition-colors\"\n      aria-label={versionListLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"px-2\">{selectedVersion ?? 'LTS'}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          className=\"right-0 left-auto\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\n            border\n            roundedSize=\"2xl\"\n            borderColor=\"text\"\n            aria-label={versionSwitcherLabel.value}\n          >\n            <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n              {versions.reverse().map((version) => (\n                <li className=\"px-1.5 py-1\" key={version}>\n                  <Button\n                    onClick={() => setSelectedVersion(version)}\n                    label={`${switchTo} v${version}`}\n                    isActive={selectedVersion === version}\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    isFullWidth\n                    textAlign=\"left\"\n                    size=\"sm\"\n                  >\n                    <div className=\"flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm\">\n                      {version}\n                    </div>\n                  </Button>\n                </li>\n              ))}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,sBAAsB;AAE5B,MAAa,mBAA6C,EAAE,iBAAiB;CAC3E,MAAM,EAAE,UAAU,sBAAsB,qBACtC,YAAY,kBAAkB;CAChC,MAAM,EAAE,iBAAiB,UAAU,uBACjC,mBAAmB;CAErB,IAAI,SAAS,WAAW,GACtB,OAAO,+BAAI;CAGb,OACE,oBAAC,OAAD;EACE,WAAU;EACV,cAAY,iBAAiB;YAE7B,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;cAC5B,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAQ,mBAAmB;KAAW,IACrD,oBAAC,cAAD,EAAc,WAAU,kBAAmB,EACxC;;GACW,IAElB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,WAAU;IACV,GAAI;cAEJ,oBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb;KACA,aAAY;KACZ,aAAY;KACZ,cAAY,qBAAqB;eAEjC,oBAAC,MAAD;MAAI,WAAU;gBACX,SAAS,QAAQ,EAAE,KAAK,YACvB,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,eAAe,mBAAmB,OAAO;QACzC,OAAO,GAAG,SAAS,IAAI;QACvB,UAAU,oBAAoB;QAC9B,SAAQ;QACR,OAAM;QACN;QACA,WAAU;QACV,MAAK;kBAEL,oBAAC,OAAD;SAAK,WAAU;mBACZ;QACE;OACC;MACN,GAf6B,OAe7B,CACL;KACC;IACK;GACG,EACR;;CACP;AAET"}

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

@@ -97,26 +97,6 @@ const Trigger = ({ children, identifier, className, label, ...props }) => /* @__
 	children
 });
 /**
-* Horizontal alignment options for the dropdown panel relative to the trigger
-*/
-let DropDownAlign = /* @__PURE__ */ function(DropDownAlign) {
-	/** Align panel to the start (left in LTR, right in RTL) of the trigger */
-	DropDownAlign["START"] = "start";
-	/** Align panel to the end (right in LTR, left in RTL) of the trigger */
-	DropDownAlign["END"] = "end";
-	return DropDownAlign;
-}({});
-/**
-* Vertical alignment options for the dropdown panel relative to the trigger
-*/
-let DropDownYAlign = /* @__PURE__ */ function(DropDownYAlign) {
-	/** Position panel below the trigger (default) */
-	DropDownYAlign["BELOW"] = "below";
-	/** Position panel above the trigger */
-	DropDownYAlign["ABOVE"] = "above";
-	return DropDownYAlign;
-}({});
-/**
 * DropDown.Panel Component
 *
 * The content area that appears when the dropdown is triggered.
@@ -140,12 +120,12 @@ let DropDownYAlign = /* @__PURE__ */ function(DropDownYAlign) {
 * </DropDown.Panel>
 *
 * // Right-aligned panel
-* <DropDown.Panel identifier="menu" align={DropDownAlign.END} isOverable>
+* <DropDown.Panel identifier="menu" align="end" isOverable>
 *   <div>Right-aligned content</div>
 * </DropDown.Panel>
 *
 * // Panel opening above the trigger
-* <DropDown.Panel identifier="menu" yAlign={DropDownYAlign.ABOVE} isOverable>
+* <DropDown.Panel identifier="menu" yAlign="above" isOverable>
 *   <div>Content appears above</div>
 * </DropDown.Panel>
 * ```
@@ -174,5 +154,5 @@ DropDown.Trigger = Trigger;
 DropDown.Panel = Panel;
 
 //#endregion
-export { DropDown, DropDownAlign, DropDownYAlign };
+export { DropDown };
 //# sourceMappingURL=index.mjs.map