@intlayer/design-system 5.0.6 → 5.1.1

package/dist/components/DictionaryFieldEditor/EnumKeyInput.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useState, useEffect } from "react";
 import { Input } from "../Input/Input.mjs";
-import "../Input/InputPassword.mjs";
+import "lucide-react";
 import "../Input/Checkbox.mjs";
 import "../Select/Multiselect.mjs";
 import { Select } from "../Select/Select.mjs";
@@ -44,18 +44,18 @@ const EnumKeyInput = ({ value, onChange }) => {
     numberValue,
     onChange
   ]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-1", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { onValueChange: setComparator, defaultValue: initialComparator, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Trigger, { className: "w-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select a comparator" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Content, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "<", children: `<` }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "<=", children: `<=` }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "=", children: `=` }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: ">=", children: `>=` }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: ">", children: `>` })
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+    /* @__PURE__ */ jsxs(Select, { onValueChange: setComparator, defaultValue: initialComparator, children: [
+      /* @__PURE__ */ jsx(Select.Trigger, { className: "w-20", children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a comparator" }) }),
+      /* @__PURE__ */ jsxs(Select.Content, { children: [
+        /* @__PURE__ */ jsx(Select.Item, { value: "<", children: `<` }),
+        /* @__PURE__ */ jsx(Select.Item, { value: "<=", children: `<=` }),
+        /* @__PURE__ */ jsx(Select.Item, { value: "=", children: `=` }),
+        /* @__PURE__ */ jsx(Select.Item, { value: ">=", children: `>=` }),
+        /* @__PURE__ */ jsx(Select.Item, { value: ">", children: `>` })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsx(
       Input,
       {
         type: "number",

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

@@ -1 +1 @@
-{"version":3,"file":"EnumKeyInput.mjs","sources":["../../../src/components/DictionaryFieldEditor/EnumKeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState, type FC } from 'react';\nimport { Input } from '../Input';\nimport { Select } from '../Select';\n\nconst extractInitialState = (\n  value: string | number\n): { comparator: string | undefined; numberValue: string | undefined } => {\n  let comparator;\n  let numberValue;\n\n  if (typeof value === 'number' || !isNaN(Number(value))) {\n    // If value is a number or numeric string, set comparator to '=' and numberValue accordingly\n    comparator = '=';\n    numberValue = value.toString();\n  } else if (typeof value === 'string') {\n    // Define possible comparators\n    const comparators = ['<=', '>=', '<', '>', '='];\n    // Find the comparator that matches the start of the string\n    const matchedComparator = comparators.find((comp) =>\n      value.startsWith(comp)\n    );\n    if (matchedComparator) {\n      comparator = matchedComparator;\n      numberValue = value.slice(matchedComparator.length);\n    }\n  }\n\n  return { comparator, numberValue };\n};\n\ntype EnumKeyInputProps = {\n  value: string | number;\n  onChange: (value: string) => void;\n};\n\n/**\n * Example of values:\n * - `<1`\n * - `>-44.3`\n * - `=999`\n * - `<=1`\n * - `>=1`\n * - 88\n * - `-1`\n *\n */\nexport const EnumKeyInput: FC<EnumKeyInputProps> = ({ value, onChange }) => {\n  const { comparator: initialComparator, numberValue: initialNumberValue } =\n    useMemo(() => extractInitialState(value), [value]);\n  const [comparator, setComparator] = useState<string | null>(\n    initialComparator ?? null\n  );\n  const [numberValue, setNumberValue] = useState<string | null>(\n    initialNumberValue ?? null\n  );\n\n  useEffect(() => {\n    if (\n      comparator &&\n      numberValue &&\n      (comparator !== initialComparator || numberValue !== initialNumberValue)\n    ) {\n      const newValue = `${comparator}${numberValue}`;\n\n      onChange(newValue);\n    }\n  }, [\n    comparator,\n    initialComparator,\n    initialNumberValue,\n    numberValue,\n    onChange,\n  ]);\n\n  return (\n    <div className=\"flex gap-1\">\n      <Select onValueChange={setComparator} defaultValue={initialComparator}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder=\"Select a comparator\" />\n        </Select.Trigger>\n        <Select.Content>\n          <Select.Item value=\"<\">{`<`}</Select.Item>\n          <Select.Item value=\"<=\">{`<=`}</Select.Item>\n          <Select.Item value=\"=\">{`=`}</Select.Item>\n          <Select.Item value=\">=\">{`>=`}</Select.Item>\n          <Select.Item value=\">\">{`>`}</Select.Item>\n        </Select.Content>\n      </Select>\n      <Input\n        type=\"number\"\n        defaultValue={numberValue ?? undefined}\n        onChange={(e) => setNumberValue(e.target.value)}\n        className=\"w-full\"\n      />\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;AAMA,MAAM,sBAAsB,CAC1B,UACwE;AACpE,MAAA;AACA,MAAA;AAEA,MAAA,OAAO,UAAU,YAAY,CAAC,MAAM,OAAO,KAAK,CAAC,GAAG;AAEzC,iBAAA;AACb,kBAAc,MAAM,SAAS;AAAA,EAAA,WACpB,OAAO,UAAU,UAAU;AAEpC,UAAM,cAAc,CAAC,MAAM,MAAM,KAAK,KAAK,GAAG;AAE9C,UAAM,oBAAoB,YAAY;AAAA,MAAK,CAAC,SAC1C,MAAM,WAAW,IAAI;AAAA,IACvB;AACA,QAAI,mBAAmB;AACR,mBAAA;AACC,oBAAA,MAAM,MAAM,kBAAkB,MAAM;AAAA,IAAA;AAAA,EACpD;AAGK,SAAA,EAAE,YAAY,YAAY;AACnC;AAkBO,MAAM,eAAsC,CAAC,EAAE,OAAO,eAAe;AAC1E,QAAM,EAAE,YAAY,mBAAmB,aAAa,mBAAmB,IACrE,QAAQ,MAAM,oBAAoB,KAAK,GAAG,CAAC,KAAK,CAAC;AAC7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,qBAAqB;AAAA,EACvB;AACM,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,sBAAsB;AAAA,EACxB;AAEA,YAAU,MAAM;AACd,QACE,cACA,gBACC,eAAe,qBAAqB,gBAAgB,qBACrD;AACA,YAAM,WAAW,GAAG,UAAU,GAAG,WAAW;AAE5C,eAAS,QAAQ;AAAA,IAAA;AAAA,EACnB,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,cACb,UAAA;AAAA,IAAAA,kCAAA,KAAC,QAAO,EAAA,eAAe,eAAe,cAAc,mBAClD,UAAA;AAAA,MAACC,kCAAAA,IAAA,OAAO,SAAP,EAAe,WAAU,QACxB,UAACA,sCAAA,OAAO,OAAP,EAAa,aAAY,sBAAA,CAAsB,EAClD,CAAA;AAAA,MACAD,kCAAAA,KAAC,OAAO,SAAP,EACC,UAAA;AAAA,QAAAC,sCAAC,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,8CAC3B,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,8CAC7B,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,8CAC3B,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,8CAC7B,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,IAAA,CAAA;AAAA,MAAA,EAC9B,CAAA;AAAA,IAAA,GACF;AAAA,IACAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAc,eAAe;AAAA,QAC7B,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,QAC9C,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}
+{"version":3,"file":"EnumKeyInput.mjs","sources":["../../../src/components/DictionaryFieldEditor/EnumKeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState, type FC } from 'react';\nimport { Input } from '../Input';\nimport { Select } from '../Select';\n\nconst extractInitialState = (\n  value: string | number\n): { comparator: string | undefined; numberValue: string | undefined } => {\n  let comparator;\n  let numberValue;\n\n  if (typeof value === 'number' || !isNaN(Number(value))) {\n    // If value is a number or numeric string, set comparator to '=' and numberValue accordingly\n    comparator = '=';\n    numberValue = value.toString();\n  } else if (typeof value === 'string') {\n    // Define possible comparators\n    const comparators = ['<=', '>=', '<', '>', '='];\n    // Find the comparator that matches the start of the string\n    const matchedComparator = comparators.find((comp) =>\n      value.startsWith(comp)\n    );\n    if (matchedComparator) {\n      comparator = matchedComparator;\n      numberValue = value.slice(matchedComparator.length);\n    }\n  }\n\n  return { comparator, numberValue };\n};\n\ntype EnumKeyInputProps = {\n  value: string | number;\n  onChange: (value: string) => void;\n};\n\n/**\n * Example of values:\n * - `<1`\n * - `>-44.3`\n * - `=999`\n * - `<=1`\n * - `>=1`\n * - 88\n * - `-1`\n *\n */\nexport const EnumKeyInput: FC<EnumKeyInputProps> = ({ value, onChange }) => {\n  const { comparator: initialComparator, numberValue: initialNumberValue } =\n    useMemo(() => extractInitialState(value), [value]);\n  const [comparator, setComparator] = useState<string | null>(\n    initialComparator ?? null\n  );\n  const [numberValue, setNumberValue] = useState<string | null>(\n    initialNumberValue ?? null\n  );\n\n  useEffect(() => {\n    if (\n      comparator &&\n      numberValue &&\n      (comparator !== initialComparator || numberValue !== initialNumberValue)\n    ) {\n      const newValue = `${comparator}${numberValue}`;\n\n      onChange(newValue);\n    }\n  }, [\n    comparator,\n    initialComparator,\n    initialNumberValue,\n    numberValue,\n    onChange,\n  ]);\n\n  return (\n    <div className=\"flex gap-1\">\n      <Select onValueChange={setComparator} defaultValue={initialComparator}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder=\"Select a comparator\" />\n        </Select.Trigger>\n        <Select.Content>\n          <Select.Item value=\"<\">{`<`}</Select.Item>\n          <Select.Item value=\"<=\">{`<=`}</Select.Item>\n          <Select.Item value=\"=\">{`=`}</Select.Item>\n          <Select.Item value=\">=\">{`>=`}</Select.Item>\n          <Select.Item value=\">\">{`>`}</Select.Item>\n        </Select.Content>\n      </Select>\n      <Input\n        type=\"number\"\n        defaultValue={numberValue ?? undefined}\n        onChange={(e) => setNumberValue(e.target.value)}\n        className=\"w-full\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAMA,MAAM,sBAAsB,CAC1B,UACwE;AACpE,MAAA;AACA,MAAA;AAEA,MAAA,OAAO,UAAU,YAAY,CAAC,MAAM,OAAO,KAAK,CAAC,GAAG;AAEzC,iBAAA;AACb,kBAAc,MAAM,SAAS;AAAA,EAAA,WACpB,OAAO,UAAU,UAAU;AAEpC,UAAM,cAAc,CAAC,MAAM,MAAM,KAAK,KAAK,GAAG;AAE9C,UAAM,oBAAoB,YAAY;AAAA,MAAK,CAAC,SAC1C,MAAM,WAAW,IAAI;AAAA,IACvB;AACA,QAAI,mBAAmB;AACR,mBAAA;AACC,oBAAA,MAAM,MAAM,kBAAkB,MAAM;AAAA,IAAA;AAAA,EACpD;AAGK,SAAA,EAAE,YAAY,YAAY;AACnC;AAkBO,MAAM,eAAsC,CAAC,EAAE,OAAO,eAAe;AAC1E,QAAM,EAAE,YAAY,mBAAmB,aAAa,mBAAmB,IACrE,QAAQ,MAAM,oBAAoB,KAAK,GAAG,CAAC,KAAK,CAAC;AAC7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,qBAAqB;AAAA,EACvB;AACM,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,sBAAsB;AAAA,EACxB;AAEA,YAAU,MAAM;AACd,QACE,cACA,gBACC,eAAe,qBAAqB,gBAAgB,qBACrD;AACA,YAAM,WAAW,GAAG,UAAU,GAAG,WAAW;AAE5C,eAAS,QAAQ;AAAA,IAAA;AAAA,EACnB,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,WAAU,cACb,UAAA;AAAA,IAAA,qBAAC,QAAO,EAAA,eAAe,eAAe,cAAc,mBAClD,UAAA;AAAA,MAAC,oBAAA,OAAO,SAAP,EAAe,WAAU,QACxB,UAAC,oBAAA,OAAO,OAAP,EAAa,aAAY,sBAAA,CAAsB,EAClD,CAAA;AAAA,MACA,qBAAC,OAAO,SAAP,EACC,UAAA;AAAA,QAAA,oBAAC,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,4BAC3B,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,4BAC7B,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,KAAA;AAAA,4BAC3B,OAAO,MAAP,EAAY,OAAM,MAAM,UAAK,MAAA;AAAA,4BAC7B,OAAO,MAAP,EAAY,OAAM,KAAK,UAAI,IAAA,CAAA;AAAA,MAAA,EAC9B,CAAA;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAc,eAAe;AAAA,QAC7B,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,QAC9C,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}

package/dist/components/DictionaryFieldEditor/JSONEditor.cjs

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const editorReact = require("@intlayer/editor-react");
-const require$$0 = require("react");
+const ReactExports = require("react");
+const components_Container_index = require("../Container/index.cjs");
 const components_IDE_MonacoCode = require("../IDE/MonacoCode.cjs");
 const JSONEditor = ({ dictionary, isDarkMode }) => {
   const { setEditedContent, editedContent } = editorReact.useEditedContent();
@@ -14,24 +15,32 @@ const JSONEditor = ({ dictionary, isDarkMode }) => {
       return false;
     }
   };
-  const displayedContent = require$$0.useMemo(
+  const displayedContent = ReactExports.useMemo(
     () => editedContent?.[dictionary.key]?.content ?? dictionary?.content ?? {},
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [dictionary]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-    components_IDE_MonacoCode.MonacoCode,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_Container_index.Container,
     {
-      language: "json",
-      onChange: (content) => {
-        if (isValidJSON(content ?? "{}")) {
-          setEditedContent(dictionary.key, JSON.parse(content ?? "{}"));
+      background: "none",
+      border: true,
+      roundedSize: "xl",
+      className: "w-full overflow-hidden p-3",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        components_IDE_MonacoCode.MonacoCode,
+        {
+          language: "json",
+          onChange: (content) => {
+            if (isValidJSON(content ?? "{}")) {
+              setEditedContent(dictionary.key, JSON.parse(content ?? "{}"));
+            }
+          },
+          isDarkMode,
+          children: JSON.stringify(displayedContent, null, 2)
         }
-      },
-      isDarkMode,
-      children: JSON.stringify(displayedContent, null, 2)
+      )
     }
-  ) });
+  );
 };
 exports.JSONEditor = JSONEditor;
 //# sourceMappingURL=JSONEditor.cjs.map

package/dist/components/DictionaryFieldEditor/JSONEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport { useMemo, type FC } from 'react';\nimport { MonacoCode } from '../IDE/MonacoCode';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary, isDarkMode }) => {\n  const { setEditedContent, editedContent } = useEditedContent();\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent = useMemo(\n    () => editedContent?.[dictionary.key]?.content ?? dictionary?.content ?? {},\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dictionary]\n  );\n\n  return (\n    <div className=\"overflow-hidden rounded-md\">\n      <MonacoCode\n        language=\"json\"\n        onChange={(content) => {\n          if (isValidJSON(content ?? '{}')) {\n            setEditedContent(dictionary.key, JSON.parse(content ?? '{}'));\n          }\n        }}\n        isDarkMode={isDarkMode}\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </MonacoCode>\n    </div>\n  );\n};\n"],"names":["useEditedContent","useMemo","jsx","MonacoCode"],"mappings":";;;;;;AAUO,MAAM,aAAkC,CAAC,EAAE,YAAY,iBAAiB;AAC7E,QAAM,EAAE,kBAAkB,cAAc,IAAIA,6BAAiB;AAEvD,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEA,QAAM,mBAAmBC,WAAA;AAAA,IACvB,MAAM,gBAAgB,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAAA;AAAA,IAE1E,CAAC,UAAU;AAAA,EACb;AAGE,SAAAC,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,8BACb,UAAAA,2BAAA,kBAAA;AAAA,IAACC,0BAAA;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAU,CAAC,YAAY;AACjB,YAAA,YAAY,WAAW,IAAI,GAAG;AAChC,2BAAiB,WAAW,KAAK,KAAK,MAAM,WAAW,IAAI,CAAC;AAAA,QAAA;AAAA,MAEhE;AAAA,MACA;AAAA,MAEC,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,IAAA;AAAA,EAAA,GAE7C;AAEJ;;"}
+{"version":3,"file":"JSONEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import type { Dictionary } from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport { useMemo, type FC } from 'react';\nimport { Container } from '../Container';\nimport { MonacoCode } from '../IDE/MonacoCode';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary, isDarkMode }) => {\n  const { setEditedContent, editedContent } = useEditedContent();\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent = useMemo(\n    () => editedContent?.[dictionary.key]?.content ?? dictionary?.content ?? {},\n\n    [dictionary]\n  );\n\n  return (\n    <Container\n      background=\"none\"\n      border\n      roundedSize=\"xl\"\n      className=\"w-full overflow-hidden p-3\"\n    >\n      <MonacoCode\n        language=\"json\"\n        onChange={(content) => {\n          if (isValidJSON(content ?? '{}')) {\n            setEditedContent(dictionary.key, JSON.parse(content ?? '{}'));\n          }\n        }}\n        isDarkMode={isDarkMode}\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </MonacoCode>\n    </Container>\n  );\n};\n"],"names":["useEditedContent","useMemo","jsx","Container","MonacoCode"],"mappings":";;;;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,YAAY,iBAAiB;AAC7E,QAAM,EAAE,kBAAkB,cAAc,IAAIA,6BAAiB;AAEvD,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEA,QAAM,mBAAmBC,aAAA;AAAA,IACvB,MAAM,gBAAgB,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAAA,IAE1E,CAAC,UAAU;AAAA,EACb;AAGE,SAAAC,2BAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,YAAW;AAAA,MACX,QAAM;AAAA,MACN,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAAD,2BAAA;AAAA,QAACE,0BAAA;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAU,CAAC,YAAY;AACjB,gBAAA,YAAY,WAAW,IAAI,GAAG;AAChC,+BAAiB,WAAW,KAAK,KAAK,MAAM,WAAW,IAAI,CAAC;AAAA,YAAA;AAAA,UAEhE;AAAA,UACA;AAAA,UAEC,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3C;AAAA,EACF;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/JSONEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAGzC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiC1C,CAAC"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIzC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsC1C,CAAC"}

package/dist/components/DictionaryFieldEditor/JSONEditor.mjs

@@ -1,6 +1,7 @@
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsx } from "react/jsx-runtime";
 import { useEditedContent } from "@intlayer/editor-react";
 import { useMemo } from "react";
+import { Container } from "../Container/index.mjs";
 import { MonacoCode } from "../IDE/MonacoCode.mjs";
 const JSONEditor = ({ dictionary, isDarkMode }) => {
   const { setEditedContent, editedContent } = useEditedContent();
@@ -14,22 +15,30 @@ const JSONEditor = ({ dictionary, isDarkMode }) => {
   };
   const displayedContent = useMemo(
     () => editedContent?.[dictionary.key]?.content ?? dictionary?.content ?? {},
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [dictionary]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    MonacoCode,
+  return /* @__PURE__ */ jsx(
+    Container,
     {
-      language: "json",
-      onChange: (content) => {
-        if (isValidJSON(content ?? "{}")) {
-          setEditedContent(dictionary.key, JSON.parse(content ?? "{}"));
+      background: "none",
+      border: true,
+      roundedSize: "xl",
+      className: "w-full overflow-hidden p-3",
+      children: /* @__PURE__ */ jsx(
+        MonacoCode,
+        {
+          language: "json",
+          onChange: (content) => {
+            if (isValidJSON(content ?? "{}")) {
+              setEditedContent(dictionary.key, JSON.parse(content ?? "{}"));
+            }
+          },
+          isDarkMode,
+          children: JSON.stringify(displayedContent, null, 2)
         }
-      },
-      isDarkMode,
-      children: JSON.stringify(displayedContent, null, 2)
+      )
     }
-  ) });
+  );
 };
 export {
   JSONEditor

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

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import { Dictionary } from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport { useMemo, type FC } from 'react';\nimport { MonacoCode } from '../IDE/MonacoCode';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary, isDarkMode }) => {\n  const { setEditedContent, editedContent } = useEditedContent();\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent = useMemo(\n    () => editedContent?.[dictionary.key]?.content ?? dictionary?.content ?? {},\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dictionary]\n  );\n\n  return (\n    <div className=\"overflow-hidden rounded-md\">\n      <MonacoCode\n        language=\"json\"\n        onChange={(content) => {\n          if (isValidJSON(content ?? '{}')) {\n            setEditedContent(dictionary.key, JSON.parse(content ?? '{}'));\n          }\n        }}\n        isDarkMode={isDarkMode}\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </MonacoCode>\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;AAUO,MAAM,aAAkC,CAAC,EAAE,YAAY,iBAAiB;AAC7E,QAAM,EAAE,kBAAkB,cAAc,IAAI,iBAAiB;AAEvD,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,gBAAgB,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAAA;AAAA,IAE1E,CAAC,UAAU;AAAA,EACb;AAGE,SAAAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,8BACb,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAU,CAAC,YAAY;AACjB,YAAA,YAAY,WAAW,IAAI,GAAG;AAChC,2BAAiB,WAAW,KAAK,KAAK,MAAM,WAAW,IAAI,CAAC;AAAA,QAAA;AAAA,MAEhE;AAAA,MACA;AAAA,MAEC,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,IAAA;AAAA,EAAA,GAE7C;AAEJ;"}
+{"version":3,"file":"JSONEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/JSONEditor.tsx"],"sourcesContent":["import type { Dictionary } from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport { useMemo, type FC } from 'react';\nimport { Container } from '../Container';\nimport { MonacoCode } from '../IDE/MonacoCode';\n\ntype JSONEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const JSONEditor: FC<JSONEditorProps> = ({ dictionary, isDarkMode }) => {\n  const { setEditedContent, editedContent } = useEditedContent();\n\n  const isValidJSON = (jsonString: string): boolean => {\n    try {\n      JSON.parse(jsonString);\n      return true; // Valid JSON\n    } catch (_error) {\n      return false; // Invalid JSON\n    }\n  };\n\n  const displayedContent = useMemo(\n    () => editedContent?.[dictionary.key]?.content ?? dictionary?.content ?? {},\n\n    [dictionary]\n  );\n\n  return (\n    <Container\n      background=\"none\"\n      border\n      roundedSize=\"xl\"\n      className=\"w-full overflow-hidden p-3\"\n    >\n      <MonacoCode\n        language=\"json\"\n        onChange={(content) => {\n          if (isValidJSON(content ?? '{}')) {\n            setEditedContent(dictionary.key, JSON.parse(content ?? '{}'));\n          }\n        }}\n        isDarkMode={isDarkMode}\n      >\n        {JSON.stringify(displayedContent, null, 2)}\n      </MonacoCode>\n    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWO,MAAM,aAAkC,CAAC,EAAE,YAAY,iBAAiB;AAC7E,QAAM,EAAE,kBAAkB,cAAc,IAAI,iBAAiB;AAEvD,QAAA,cAAc,CAAC,eAAgC;AAC/C,QAAA;AACF,WAAK,MAAM,UAAU;AACd,aAAA;AAAA,aACA,QAAQ;AACR,aAAA;AAAA,IAAA;AAAA,EAEX;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,gBAAgB,WAAW,GAAG,GAAG,WAAW,YAAY,WAAW,CAAC;AAAA,IAE1E,CAAC,UAAU;AAAA,EACb;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,YAAW;AAAA,MACX,QAAM;AAAA,MACN,aAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAU,CAAC,YAAY;AACjB,gBAAA,YAAY,WAAW,IAAI,GAAG;AAChC,+BAAiB,WAAW,KAAK,KAAK,MAAM,WAAW,IAAI,CAAC;AAAA,YAAA;AAAA,UAEhE;AAAA,UACA;AAAA,UAEC,UAAK,KAAA,UAAU,kBAAkB,MAAM,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC3C;AAAA,EACF;AAEJ;"}

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const components_Breadcrumb_index = require("../Breadcrumb/index.cjs");
 const KeyPathBreadcrumb = ({
   keyPath,
@@ -14,10 +14,10 @@ const KeyPathBreadcrumb = ({
       onClick: () => onClickKeyPath(
         keyPath.slice(0, index + 1)
       ),
-      text: el.key.toString()
+      text: el.key?.toString() ?? ""
     }))
   ];
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     components_Breadcrumb_index.Breadcrumb,
     {
       links: formattedKeyPath,

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyPathBreadcrumb.cjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n  locale?: Locales;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n  locale,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key.toString(),\n    })),\n  ];\n\n  return (\n    <Breadcrumb\n      links={formattedKeyPath}\n      locale={locale}\n      elementType=\"location\"\n    />\n  );\n};\n"],"names":["jsx","Breadcrumb"],"mappings":";;;;AAYO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,IAAI,SAAS;AAAA,IAAA,EACtB;AAAA,EACJ;AAGE,SAAAA,2BAAA,kBAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,aAAY;AAAA,IAAA;AAAA,EACd;AAEJ;;"}
+{"version":3,"file":"KeyPathBreadcrumb.cjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n  locale?: Locales;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n  locale,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key?.toString() ?? '',\n    })),\n  ];\n\n  return (\n    <Breadcrumb\n      links={formattedKeyPath}\n      locale={locale}\n      elementType=\"location\"\n    />\n  );\n};\n"],"names":["jsx","Breadcrumb"],"mappings":";;;;AAYO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,KAAK,cAAc;AAAA,IAAA,EAC5B;AAAA,EACJ;AAGE,SAAAA,2BAAA;AAAA,IAACC,4BAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,aAAY;AAAA,IAAA;AAAA,EACd;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsx } from "react/jsx-runtime";
 import { Breadcrumb } from "../Breadcrumb/index.mjs";
 const KeyPathBreadcrumb = ({
   keyPath,
@@ -12,10 +12,10 @@ const KeyPathBreadcrumb = ({
       onClick: () => onClickKeyPath(
         keyPath.slice(0, index + 1)
       ),
-      text: el.key.toString()
+      text: el.key?.toString() ?? ""
     }))
   ];
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     Breadcrumb,
     {
       links: formattedKeyPath,

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

@@ -1 +1 @@
-{"version":3,"file":"KeyPathBreadcrumb.mjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n  locale?: Locales;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n  locale,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key.toString(),\n    })),\n  ];\n\n  return (\n    <Breadcrumb\n      links={formattedKeyPath}\n      locale={locale}\n      elementType=\"location\"\n    />\n  );\n};\n"],"names":["jsx"],"mappings":";;AAYO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,IAAI,SAAS;AAAA,IAAA,EACtB;AAAA,EACJ;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,aAAY;AAAA,IAAA;AAAA,EACd;AAEJ;"}
+{"version":3,"file":"KeyPathBreadcrumb.mjs","sources":["../../../src/components/DictionaryFieldEditor/KeyPathBreadcrumb.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { Breadcrumb, type BreadcrumbLink } from '../Breadcrumb';\n\ntype KeyPathBreadcrumbProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  onClickKeyPath: (keyPath: KeyPath[]) => void;\n  locale?: Locales;\n};\n\nexport const KeyPathBreadcrumb: FC<KeyPathBreadcrumbProps> = ({\n  keyPath,\n  dictionaryKey,\n  onClickKeyPath,\n  locale,\n}) => {\n  const formattedKeyPath: BreadcrumbLink[] = [\n    { text: dictionaryKey, onClick: () => onClickKeyPath([]) },\n    ...keyPath.map((el, index) => ({\n      onClick: () =>\n        onClickKeyPath(\n          keyPath\n            // With keyPath = [{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}, {type: NodeType.Object, key: '1'}]\n            // If index is 0 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}])\n            // If index is 1 -> onFocusKeyPath([{type: NodeType.Object, key: '0'}, {type: NodeType.Array, key: '0'}])\n            .slice(0, index + 1)\n        ),\n      text: el.key?.toString() ?? '',\n    })),\n  ];\n\n  return (\n    <Breadcrumb\n      links={formattedKeyPath}\n      locale={locale}\n      elementType=\"location\"\n    />\n  );\n};\n"],"names":[],"mappings":";;AAYO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAqC;AAAA,IACzC,EAAE,MAAM,eAAe,SAAS,MAAM,eAAe,CAAE,CAAA,EAAE;AAAA,IACzD,GAAG,QAAQ,IAAI,CAAC,IAAI,WAAW;AAAA,MAC7B,SAAS,MACP;AAAA,QACE,QAIG,MAAM,GAAG,QAAQ,CAAC;AAAA,MACvB;AAAA,MACF,MAAM,GAAG,KAAK,cAAc;AAAA,IAAA,EAC5B;AAAA,EACJ;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,aAAY;AAAA,IAAA;AAAA,EACd;AAEJ;"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const client = require("@intlayer/config/client");
 const core = require("@intlayer/core");
 const editorReact = require("@intlayer/editor-react");
 const lucideReact = require("lucide-react");
-const require$$0 = require("react");
+const ReactExports = require("react");
 const reactIntlayer = require("react-intlayer");
 const utils_camelCase = require("../../../utils/camelCase.cjs");
 const components_Accordion_Accordion = require("../../Accordion/Accordion.cjs");
@@ -24,26 +24,25 @@ const NavigationViewNode = ({
   const { setFocusedContentKeyPath, focusedContent } = editorReact.useFocusDictionary();
   const {
     addNewElement,
-    addNewField,
     goToElement,
     goToField,
     goToEnumeration,
     goToTranslation
   } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
-  const nodeType = core.getSectionType(section);
+  const nodeType = core.getNodeType(section);
   const isEditableSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(section);
-  const getIsSelected = require$$0.useCallback(
+  const getIsSelected = ReactExports.useCallback(
     (keyPath2) => (focusedContent?.keyPath?.length ?? 0) > 0 && core.isSameKeyPath(keyPath2, focusedContent?.keyPath ?? []),
     [focusedContent?.keyPath]
   );
-  if (isEditableSection) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "-" });
-  if (!section) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "-" });
+  if (isEditableSection) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "-" });
+  if (!section) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "-" });
   if (typeof section === "object") {
     if (nodeType === core.NodeType.ReactNode) {
-      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "React Node" });
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "React Node" });
     }
     if (nodeType === core.NodeType.Translation) {
-      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
         const childKeyPath = [
           ...keyPath,
           { type: core.NodeType.Translation, key: translationKey }
@@ -54,7 +53,7 @@ const NavigationViewNode = ({
         );
         const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
         if (isEditableSubSection) {
-          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(
             components_Button_Button.Button,
             {
               label: `${goToTranslation.label} ${translationKey}`,
@@ -69,14 +68,14 @@ const NavigationViewNode = ({
             translationKey
           );
         }
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(
           components_Accordion_Accordion.Accordion,
           {
             label: `${goToTranslation.label} ${translationKey}`,
             isActive: getIsSelected(childKeyPath),
             onClick: () => setFocusedContentKeyPath(childKeyPath),
             header: translationKey,
-            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsx(
               NavigationViewNode,
               {
                 keyPath: childKeyPath,
@@ -89,13 +88,13 @@ const NavigationViewNode = ({
         );
       }) });
     }
-    if (nodeType === core.NodeType.Enumeration) {
-      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: Object.keys(
-        section[core.NodeType.Enumeration]
+    if (nodeType === core.NodeType.Enumeration || nodeType === core.NodeType.Condition) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-2", children: Object.keys(
+        section[nodeType]
       ).map((key) => {
         const childKeyPath = [
           ...keyPath,
-          { type: core.NodeType.Enumeration, key }
+          { type: nodeType, key }
         ];
         const subSection = core.getContentNodeByKeyPath(
           sectionProp,
@@ -103,7 +102,7 @@ const NavigationViewNode = ({
         );
         const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
         if (isEditableSubSection) {
-          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(
             components_Button_Button.Button,
             {
               label: `${goToEnumeration.label} ${key}`,
@@ -118,14 +117,14 @@ const NavigationViewNode = ({
             key
           );
         }
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(
           components_Accordion_Accordion.Accordion,
           {
             label: `${goToEnumeration.label} ${key}`,
             isActive: getIsSelected(childKeyPath),
             onClick: () => setFocusedContentKeyPath(childKeyPath),
             header: key,
-            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsx(
               NavigationViewNode,
               {
                 keyPath: childKeyPath,
@@ -139,7 +138,7 @@ const NavigationViewNode = ({
       }) });
     }
     if (nodeType === core.NodeType.Array) {
-      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-between gap-2", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-2", children: [
         section.map((subSection, index) => {
           const childKeyPath = [
             ...keyPath,
@@ -147,7 +146,7 @@ const NavigationViewNode = ({
           ];
           const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
           if (isEditableSubSection) {
-            return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(
               components_Button_Button.Button,
               {
                 label: `${goToElement.label} ${index}`,
@@ -162,14 +161,14 @@ const NavigationViewNode = ({
               `${index}`
             );
           }
-          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(
             components_Accordion_Accordion.Accordion,
             {
               label: `${goToElement.label} ${index}`,
               isActive: getIsSelected(childKeyPath),
               onClick: () => setFocusedContentKeyPath(childKeyPath),
               header: index,
-              children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationViewNode,
                 {
                   keyPath: childKeyPath,
@@ -181,7 +180,7 @@ const NavigationViewNode = ({
             `${index}`
           );
         }),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           components_Button_Button.Button,
           {
             label: addNewElement.label.value,
@@ -196,7 +195,9 @@ const NavigationViewNode = ({
                   key: section.length
                 }
               ];
-              addEditedContent(dictionaryKey, {}, newKeyPath, false);
+              const sectionArray2 = section;
+              const sectionEl = sectionArray2[sectionArray2.length - 1] ?? "";
+              addEditedContent(dictionaryKey, sectionEl, newKeyPath, false);
               setFocusedContentKeyPath(newKeyPath);
             },
             Icon: lucideReact.Plus,
@@ -206,71 +207,50 @@ const NavigationViewNode = ({
       ] });
     }
     const sectionArray = Object.keys(section);
-    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full max-w-full flex-col justify-between gap-2", children: [
-      sectionArray.map((key) => {
-        const childKeyPath = [
-          ...keyPath,
-          { type: core.NodeType.Object, key }
-        ];
-        const subSection = core.getContentNodeByKeyPath(sectionProp, childKeyPath);
-        const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
-        if (isEditableSubSection) {
-          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-            components_Button_Button.Button,
-            {
-              label: `${goToField.label} ${key}`,
-              isActive: getIsSelected(childKeyPath),
-              variant: "hoverable",
-              color: "text",
-              className: "w-full",
-              onClick: () => setFocusedContentKeyPath(childKeyPath),
-              IconRight: lucideReact.ChevronRight,
-              children: utils_camelCase.camelCaseToSentence(key)
-            },
-            key
-          );
-        }
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          components_Accordion_Accordion.Accordion,
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-full flex-col justify-between gap-2", children: sectionArray.map((key) => {
+      const childKeyPath = [
+        ...keyPath,
+        { type: core.NodeType.Object, key }
+      ];
+      const subSection = core.getContentNodeByKeyPath(sectionProp, childKeyPath);
+      const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
+      if (isEditableSubSection) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          components_Button_Button.Button,
           {
             label: `${goToField.label} ${key}`,
             isActive: getIsSelected(childKeyPath),
+            variant: "hoverable",
+            color: "text",
+            className: "w-full",
             onClick: () => setFocusedContentKeyPath(childKeyPath),
-            header: utils_camelCase.camelCaseToSentence(key),
-            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-              NavigationViewNode,
-              {
-                keyPath: childKeyPath,
-                section: sectionProp,
-                dictionaryKey
-              }
-            ) }) })
+            IconRight: lucideReact.ChevronRight,
+            children: utils_camelCase.camelCaseToSentence(key)
           },
           key
         );
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-        components_Button_Button.Button,
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        components_Accordion_Accordion.Accordion,
         {
-          label: addNewField.label.value,
-          variant: "hoverable",
-          color: "neutral",
-          textAlign: "left",
-          onClick: () => {
-            const newKeyPath = [
-              ...keyPath,
-              { type: core.NodeType.Object, key: "newField" }
-            ];
-            addEditedContent(dictionaryKey, {}, newKeyPath, false);
-            setFocusedContentKeyPath(newKeyPath);
-          },
-          Icon: lucideReact.Plus,
-          children: addNewField.text
-        }
-      )
-    ] });
+          label: `${goToField.label} ${key}`,
+          isActive: getIsSelected(childKeyPath),
+          onClick: () => setFocusedContentKeyPath(childKeyPath),
+          header: utils_camelCase.camelCaseToSentence(key),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+            NavigationViewNode,
+            {
+              keyPath: childKeyPath,
+              section: sectionProp,
+              dictionaryKey
+            }
+          ) }) })
+        },
+        key
+      );
+    }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     "Error loading section --",
     nodeType,
     "--",