@intlayer/design-system 4.0.2 → 4.0.3

package/README.md

@@ -17,7 +17,7 @@
   </a>
 </div>
 
-# @intlayer/design-system: NPM Package containing the UI library of Intlayer
+# @intlayer/design-system: Containing the UI library of Intlayer
 
 **Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.
 

package/dist/.vite/manifest.json

@@ -60,6 +60,14 @@
       "src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"
     ]
   },
+  "_index-Cg-S9ry9.cjs": {
+    "file": "index-Cg-S9ry9.cjs",
+    "name": "index",
+    "imports": [
+      "src/hooks/useGetElementOrWindow.ts",
+      "src/hooks/useScrollBlockage/useScrollBlockageStore.ts"
+    ]
+  },
   "_index-DFc7og1d.cjs": {
     "file": "index-DFc7og1d.cjs",
     "name": "index"
@@ -77,6 +85,14 @@
     "file": "index-DcWYZrJW.js",
     "name": "index"
   },
+  "_index-O_7rYrbW.js": {
+    "file": "index-O_7rYrbW.js",
+    "name": "index",
+    "imports": [
+      "src/hooks/useGetElementOrWindow.ts",
+      "src/hooks/useScrollBlockage/useScrollBlockageStore.ts"
+    ]
+  },
   "_jsx-runtime-CgFM7lM3.cjs": {
     "file": "jsx-runtime-CgFM7lM3.cjs",
     "name": "jsx-runtime"
@@ -85,14 +101,6 @@
     "file": "jsx-runtime-DQkoUcjV.js",
     "name": "jsx-runtime"
   },
-  "_shallow-lhDIFtEp.cjs": {
-    "file": "shallow-lhDIFtEp.cjs",
-    "name": "shallow"
-  },
-  "_shallow-m9BpCkKh.js": {
-    "file": "shallow-m9BpCkKh.js",
-    "name": "shallow"
-  },
   "_zod-BV4nCGJE.js": {
     "file": "zod-BV4nCGJE.js",
     "name": "zod"
@@ -641,10 +649,7 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "_index-DTCehvKe.cjs",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
       "src/components/DictionaryEditor/ValidDictionaryChangeButtons.tsx"
     ]
   },
@@ -700,8 +705,7 @@
       "_jsx-runtime-CgFM7lM3.cjs",
       "src/components/EditableField/EditableFieldInput.tsx",
       "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/utils/cn.ts",
-      "src/utils/dictionary.ts"
+      "src/utils/cn.ts"
     ]
   },
   "src/components/DictionaryEditor/NodeWrapper/TranslationWrapper.tsx": {
@@ -732,14 +736,12 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "src/hooks/intlayerAPIHooks.ts",
       "src/components/Form/FormBase.tsx",
       "src/components/Form/FormField.tsx",
       "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
       "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/DictionaryEditor/validDictionaryChangeButtonsSchema.ts"
     ]
@@ -750,27 +752,9 @@
     "src": "src/components/DictionaryEditor/index.tsx",
     "isEntry": true,
     "imports": [
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/DictionaryEditor/DictionaryEditor.tsx",
-      "src/utils/dictionary.ts"
-    ]
-  },
-  "src/components/DictionaryEditor/useEditedContentStore.ts": {
-    "file": "components/DictionaryEditor/useEditedContentStore.cjs",
-    "name": "components/DictionaryEditor/useEditedContentStore",
-    "src": "src/components/DictionaryEditor/useEditedContentStore.ts",
-    "isEntry": true,
-    "imports": [
-      "src/utils/dictionary.ts"
+      "src/components/DictionaryEditor/DictionaryEditor.tsx"
     ]
   },
-  "src/components/DictionaryEditor/useEditionPanelStore.ts": {
-    "file": "components/DictionaryEditor/useEditionPanelStore.cjs",
-    "name": "components/DictionaryEditor/useEditionPanelStore",
-    "src": "src/components/DictionaryEditor/useEditionPanelStore.ts",
-    "isEntry": true
-  },
   "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx": {
     "file": "components/DictionaryEditor/validDictionaryChangeButtons.content.cjs",
     "name": "components/DictionaryEditor/validDictionaryChangeButtons.content",
@@ -790,21 +774,11 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "_index-DFc7og1d.cjs",
       "src/components/Toaster/Toast.tsx",
       "src/hooks/useGetAllDictionaries.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/Button/Button.tsx",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/Loader/index.tsx",
       "src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx",
       "src/components/DictionaryFieldEditor/DictionariesSelector/dictionariesSelector.content.ts"
@@ -928,22 +902,13 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "src/components/Button/Button.tsx",
       "src/components/Container/index.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
+      "src/components/Headers/index.tsx",
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "_index-DFc7og1d.cjs",
       "src/components/Toaster/Toast.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
-      "src/components/Headers/index.tsx",
       "src/components/DropDown/index.tsx",
       "src/components/Input/Input.tsx",
       "src/components/Input/InputPassword.tsx",
@@ -965,22 +930,10 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "src/components/EditableField/EditableFieldInput.tsx",
       "src/components/EditableField/EditableFieldTextArea.tsx",
       "src/utils/camelCase.ts",
-      "src/utils/dictionary.ts",
       "src/components/Button/Button.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
-      "src/hooks/useAsync/useAsyncStateStore.tsx",
-      "_index-DFc7og1d.cjs",
-      "src/components/Toaster/Toast.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/Label/index.tsx",
       "src/components/DictionaryFieldEditor/editorView.content.ts",
       "src/components/DictionaryFieldEditor/getIsEditableSection.ts",
@@ -995,22 +948,12 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "src/hooks/intlayerAPIHooks.ts",
-      "src/utils/dictionary.ts",
       "src/utils/object.ts",
       "src/components/Button/Button.tsx",
       "src/components/ContentEditor/ContentEditorTextArea.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/Container/index.tsx",
       "src/components/DropDown/index.tsx",
       "src/components/Input/Input.tsx",
@@ -1045,20 +988,6 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/Button/Button.tsx",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
-      "src/hooks/useAsync/useAsyncStateStore.tsx",
-      "_index-DFc7og1d.cjs",
-      "src/components/Toaster/Toast.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/IDE/MonacoCode.tsx"
     ]
   },
@@ -1079,23 +1008,9 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "src/utils/camelCase.ts",
-      "src/utils/dictionary.ts",
       "src/components/Accordion/Accordion.tsx",
       "src/components/Button/Button.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
-      "src/hooks/useAsync/useAsyncStateStore.tsx",
-      "_index-DFc7og1d.cjs",
-      "src/components/Toaster/Toast.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/DictionaryFieldEditor/getIsEditableSection.ts",
       "src/components/DictionaryFieldEditor/NavigationView/navigationViewNode.content.ts"
     ]
@@ -1113,21 +1028,7 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "src/components/Container/index.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/Button/Button.tsx",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
-      "src/hooks/useAsync/useAsyncStateStore.tsx",
-      "_index-DFc7og1d.cjs",
-      "src/components/Toaster/Toast.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx",
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx",
       "src/components/DictionaryFieldEditor/EditorView/EditorView.tsx",
@@ -1142,21 +1043,6 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
-      "src/utils/dictionary.ts",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/Button/Button.tsx",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
-      "src/hooks/useAsync/useAsyncStateStore.tsx",
-      "_index-DFc7og1d.cjs",
-      "src/components/Toaster/Toast.tsx",
-      "src/components/Form/FormBase.tsx",
-      "src/components/Form/FormField.tsx",
-      "_Form-CSMiPnjC.cjs",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/Select/Multiselect.tsx",
       "src/components/Select/Select.tsx",
       "src/components/DictionaryFieldEditor/nodeTypeSelector.content.ts"
@@ -1169,7 +1055,6 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
       "_index-DFc7og1d.cjs",
       "src/components/Button/Button.tsx",
       "src/components/Auth/ExternalsLoginButtons/externalsLoginButtons.content.ts",
@@ -1189,11 +1074,6 @@
       "src/components/Auth/ResetPasswordForm/resetPasswordContent.content.ts",
       "src/components/Auth/ResetPasswordForm/useResetPasswordSchema.content.ts",
       "src/components/Modal/Modal.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
-      "src/components/EditableField/EditableFieldInput.tsx",
-      "src/components/EditableField/EditableFieldTextArea.tsx",
-      "src/components/DictionaryEditor/validDictionaryChangeButtons.content.tsx",
       "src/components/DictionaryFieldEditor/SaveForm/saveForm.content.tsx",
       "src/components/DictionaryFieldEditor/SaveForm/SaveFormSchema.ts"
     ]
@@ -2224,7 +2104,7 @@
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
       "src/hooks/useGetElementOrWindow.ts",
-      "src/hooks/useScrollBlockage/index.tsx",
+      "_index-Cg-S9ry9.cjs",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "_index-DFc7og1d.cjs",
       "src/components/Toaster/Toast.tsx",
@@ -2269,7 +2149,7 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "src/hooks/useScrollBlockage/index.tsx",
+      "_index-Cg-S9ry9.cjs",
       "src/hooks/useScrollDetection.ts",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "_index-DFc7og1d.cjs",
@@ -2390,9 +2270,8 @@
     "isEntry": true,
     "imports": [
       "_jsx-runtime-CgFM7lM3.cjs",
-      "_shallow-lhDIFtEp.cjs",
+      "_index-Cg-S9ry9.cjs",
       "src/hooks/useDevice.ts",
-      "src/hooks/useScrollBlockage/index.tsx",
       "src/utils/isElementAtTopAndNotCovered.tsx",
       "src/components/Container/index.tsx",
       "src/components/MaxWidthSmoother/index.tsx",
@@ -2630,8 +2509,6 @@
       "src/components/RightDrawer/useRightDrawerStore.ts",
       "src/components/PressableSpan/PressableSpan.tsx",
       "src/components/ContentSelector/ContentSelector.tsx",
-      "src/components/DictionaryEditor/useEditedContentStore.ts",
-      "src/components/DictionaryEditor/useEditionPanelStore.ts",
       "src/components/DictionaryEditor/DictionaryEditor.tsx",
       "src/components/DictionaryFieldEditor/DictionariesSelector/DictionariesSelector.tsx",
       "src/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.tsx",
@@ -2703,8 +2580,7 @@
       "src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx",
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx",
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx",
-      "src/components/ClickOutsideDiv/index.tsx",
-      "src/utils/dictionary.ts"
+      "src/components/ClickOutsideDiv/index.tsx"
     ]
   },
   "src/hooks/index.ts": {
@@ -2715,7 +2591,7 @@
     "imports": [
       "src/hooks/useDevice.ts",
       "src/hooks/useGetElementOrWindow.ts",
-      "src/hooks/useScrollBlockage/index.tsx",
+      "_index-Cg-S9ry9.cjs",
       "src/hooks/useIsMounted.ts",
       "src/hooks/useScrollDetection.ts",
       "src/hooks/useAsync/useAsync.ts",
@@ -2839,7 +2715,7 @@
     "src": "src/hooks/useScrollBlockage/index.tsx",
     "isEntry": true,
     "imports": [
-      "_shallow-lhDIFtEp.cjs",
+      "_index-Cg-S9ry9.cjs",
       "src/hooks/useGetElementOrWindow.ts",
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts"
     ]
@@ -2857,7 +2733,7 @@
     "isEntry": true,
     "imports": [
       "src/hooks/useGetElementOrWindow.ts",
-      "src/hooks/useScrollBlockage/index.tsx"
+      "_index-Cg-S9ry9.cjs"
     ]
   },
   "src/tailwind.config.ts": {
@@ -2884,12 +2760,6 @@
     "src": "src/utils/cn.ts",
     "isEntry": true
   },
-  "src/utils/dictionary.ts": {
-    "file": "utils/dictionary.cjs",
-    "name": "utils/dictionary",
-    "src": "src/utils/dictionary.ts",
-    "isEntry": true
-  },
   "src/utils/isElementAtTopAndNotCovered.tsx": {
     "file": "utils/isElementAtTopAndNotCovered.cjs",
     "name": "utils/isElementAtTopAndNotCovered",

package/dist/components/Accordion/Accordion.cjs

@@ -21,7 +21,7 @@ const Accordion = ({
       setIsOpen(isOpenDefault);
     }
   }, [isOpenDefault]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
       components_Button_Button.Button,
       {

package/dist/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { useEffect, useState, type FC, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\ntype AccordionProps = {\n  header: ReactNode;\n  children: ReactNode;\n  isOpen?: boolean;\n} & ButtonProps;\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Whether the content is expanded or collapsed by default.\n *\n * @example\n * <Accordion header=\"Accordion Header\" isOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen: isOpenDefault = false,\n  onClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(isOpenDefault);\n  const isHidden = isOpen == undefined ? undefined : !isOpen;\n\n  useEffect(() => {\n    if (isOpenDefault != undefined) {\n      setIsOpen(isOpenDefault);\n    }\n  }, [isOpenDefault]);\n\n  return (\n    <div>\n      <Button\n        variant=\"hoverable\"\n        color=\"text\"\n        onClick={(e) => {\n          setIsOpen((prevIsOpen) => !prevIsOpen);\n          onClick?.(e);\n        }}\n        isFullWidth\n        className=\"flex items-center justify-between gap-2 bg-red-300\"\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isOpen ? 'rotate-0' : '-rotate-180'\n        )}\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        tabIndex={isHidden !== false ? undefined : -1}\n        isHidden={isHidden}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsx","Button","ChevronDown","cn","MaxHeightSmoother"],"mappings":";;;;;;;;;AA4BO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,QAAQ,gBAAgB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAIA,WAAAA,SAAS,aAAa;AAClD,QAAM,WAAW,UAAU,SAAY,SAAY,CAAC;AAEpDC,aAAAA,UAAU,MAAM;AACd,QAAI,iBAAiB,QAAW;AAC9B,gBAAU,aAAa;AAAA,IAAA;AAAA,EACzB,GACC,CAAC,aAAa,CAAC;AAElB,2DACG,OACC,EAAA,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAS,CAAC,MAAM;AACJ,oBAAA,CAAC,eAAe,CAAC,UAAU;AACrC,oBAAU,CAAC;AAAA,QACb;AAAA,QACA,aAAW;AAAA,QACX,WAAU;AAAA,QACV,WAAWC,YAAA;AAAA,QACX,eAAeC,SAAA;AAAA,UACb;AAAA,UACA,SAAS,aAAa;AAAA,QACxB;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEAH,2BAAA,kBAAA;AAAA,MAACI,mCAAA;AAAA,MAAA;AAAA,QACC,UAAU,aAAa,QAAQ,SAAY;AAAA,QAC3C;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { useEffect, useState, type FC, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\ntype AccordionProps = {\n  header: ReactNode;\n  children: ReactNode;\n  isOpen?: boolean;\n} & ButtonProps;\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Whether the content is expanded or collapsed by default.\n *\n * @example\n * <Accordion header=\"Accordion Header\" isOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen: isOpenDefault = false,\n  onClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(isOpenDefault);\n  const isHidden = isOpen == undefined ? undefined : !isOpen;\n\n  useEffect(() => {\n    if (isOpenDefault != undefined) {\n      setIsOpen(isOpenDefault);\n    }\n  }, [isOpenDefault]);\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant=\"hoverable\"\n        color=\"text\"\n        onClick={(e) => {\n          setIsOpen((prevIsOpen) => !prevIsOpen);\n          onClick?.(e);\n        }}\n        isFullWidth\n        className=\"flex items-center justify-between gap-2 bg-red-300\"\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isOpen ? 'rotate-0' : '-rotate-180'\n        )}\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        tabIndex={isHidden !== false ? undefined : -1}\n        isHidden={isHidden}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","Button","ChevronDown","cn","MaxHeightSmoother"],"mappings":";;;;;;;;;AA4BO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,QAAQ,gBAAgB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAIA,WAAAA,SAAS,aAAa;AAClD,QAAM,WAAW,UAAU,SAAY,SAAY,CAAC;AAEpDC,aAAAA,UAAU,MAAM;AACd,QAAI,iBAAiB,QAAW;AAC9B,gBAAU,aAAa;AAAA,IAAA;AAAA,EACzB,GACC,CAAC,aAAa,CAAC;AAGhB,SAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,UACb,UAAA;AAAA,IAAAC,2BAAA,kBAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAS,CAAC,MAAM;AACJ,oBAAA,CAAC,eAAe,CAAC,UAAU;AACrC,oBAAU,CAAC;AAAA,QACb;AAAA,QACA,aAAW;AAAA,QACX,WAAU;AAAA,QACV,WAAWC,YAAA;AAAA,QACX,eAAeC,SAAA;AAAA,UACb;AAAA,UACA,SAAS,aAAa;AAAA,QACxB;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEAH,2BAAA,kBAAA;AAAA,MAACI,mCAAA;AAAA,MAAA;AAAA,QACC,UAAU,aAAa,QAAQ,SAAY;AAAA,QAC3C;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}

package/dist/components/Accordion/Accordion.mjs

@@ -19,7 +19,7 @@ const Accordion = ({
       setIsOpen(isOpenDefault);
     }
   }, [isOpenDefault]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button,
       {

package/dist/components/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { useEffect, useState, type FC, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\ntype AccordionProps = {\n  header: ReactNode;\n  children: ReactNode;\n  isOpen?: boolean;\n} & ButtonProps;\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Whether the content is expanded or collapsed by default.\n *\n * @example\n * <Accordion header=\"Accordion Header\" isOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen: isOpenDefault = false,\n  onClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(isOpenDefault);\n  const isHidden = isOpen == undefined ? undefined : !isOpen;\n\n  useEffect(() => {\n    if (isOpenDefault != undefined) {\n      setIsOpen(isOpenDefault);\n    }\n  }, [isOpenDefault]);\n\n  return (\n    <div>\n      <Button\n        variant=\"hoverable\"\n        color=\"text\"\n        onClick={(e) => {\n          setIsOpen((prevIsOpen) => !prevIsOpen);\n          onClick?.(e);\n        }}\n        isFullWidth\n        className=\"flex items-center justify-between gap-2 bg-red-300\"\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isOpen ? 'rotate-0' : '-rotate-180'\n        )}\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        tabIndex={isHidden !== false ? undefined : -1}\n        isHidden={isHidden}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;;;AA4BO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,QAAQ,gBAAgB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAClD,QAAM,WAAW,UAAU,SAAY,SAAY,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,iBAAiB,QAAW;AAC9B,gBAAU,aAAa;AAAA,IAAA;AAAA,EACzB,GACC,CAAC,aAAa,CAAC;AAElB,gDACG,OACC,EAAA,UAAA;AAAA,IAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAS,CAAC,MAAM;AACJ,oBAAA,CAAC,eAAe,CAAC,UAAU;AACrC,oBAAU,CAAC;AAAA,QACb;AAAA,QACA,aAAW;AAAA,QACX,WAAU;AAAA,QACV,WAAW;AAAA,QACX,eAAe;AAAA,UACb;AAAA,UACA,SAAS,aAAa;AAAA,QACxB;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,aAAa,QAAQ,SAAY;AAAA,QAC3C;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"Accordion.mjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { useEffect, useState, type FC, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\ntype AccordionProps = {\n  header: ReactNode;\n  children: ReactNode;\n  isOpen?: boolean;\n} & ButtonProps;\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Whether the content is expanded or collapsed by default.\n *\n * @example\n * <Accordion header=\"Accordion Header\" isOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen: isOpenDefault = false,\n  onClick,\n  ...props\n}) => {\n  const [isOpen, setIsOpen] = useState(isOpenDefault);\n  const isHidden = isOpen == undefined ? undefined : !isOpen;\n\n  useEffect(() => {\n    if (isOpenDefault != undefined) {\n      setIsOpen(isOpenDefault);\n    }\n  }, [isOpenDefault]);\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant=\"hoverable\"\n        color=\"text\"\n        onClick={(e) => {\n          setIsOpen((prevIsOpen) => !prevIsOpen);\n          onClick?.(e);\n        }}\n        isFullWidth\n        className=\"flex items-center justify-between gap-2 bg-red-300\"\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isOpen ? 'rotate-0' : '-rotate-180'\n        )}\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        tabIndex={isHidden !== false ? undefined : -1}\n        isHidden={isHidden}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;AA4BO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,QAAQ,gBAAgB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAClD,QAAM,WAAW,UAAU,SAAY,SAAY,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,iBAAiB,QAAW;AAC9B,gBAAU,aAAa;AAAA,IAAA;AAAA,EACzB,GACC,CAAC,aAAa,CAAC;AAGhB,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,UACb,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAS,CAAC,MAAM;AACJ,oBAAA,CAAC,eAAe,CAAC,UAAU;AACrC,oBAAU,CAAC;AAAA,QACb;AAAA,QACA,aAAW;AAAA,QACX,WAAU;AAAA,QACV,WAAW;AAAA,QACX,eAAe;AAAA,UACb;AAAA,UACA,SAAS,aAAa;AAAA,QACxB;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU,aAAa,QAAQ,SAAY;AAAA,QAC3C;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/components/DictionaryEditor/DictionaryEditor.cjs

@@ -3,27 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
 const require$$0 = require("react");
-const shallow = require("../../shallow-lhDIFtEp.cjs");
+const editorReact = require("@intlayer/editor-react");
 const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../index-DTCehvKe.cjs");
-const components_DictionaryEditor_useEditedContentStore = require("./useEditedContentStore.cjs");
-const components_DictionaryEditor_useEditionPanelStore = require("./useEditionPanelStore.cjs");
 const components_DictionaryEditor_ValidDictionaryChangeButtons = require("./ValidDictionaryChangeButtons.cjs");
 const DictionaryEditor = ({
   dictionary,
   ...props
 }) => {
-  const { addEditedContent, editedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
-    shallow.useShallow((s) => ({
-      addEditedContent: s.addEditedContent,
-      editedContent: s.editedContent
-    }))
-  );
-  const { focusedContent, setFocusedContentKeyPath } = components_DictionaryEditor_useEditionPanelStore.useEditionPanelStore(
-    shallow.useShallow((s) => ({
-      focusedContent: s.focusedContent,
-      setFocusedContentKeyPath: s.setFocusedContentKeyPath
-    }))
-  );
+  const { editedContent, addEditedContent } = editorReact.useEditedContent();
+  const { focusedContent, setFocusedContentKeyPath } = editorReact.useFocusDictionary();
   const focusedKeyPath = focusedContent?.keyPath;
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ require$$0.createElement(

package/dist/components/DictionaryEditor/DictionaryEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.cjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { NodeWrapper } from './NodeWrapper';\nimport { useEditedContentStore } from './useEditedContentStore';\nimport { useEditionPanelStore } from './useEditionPanelStore';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  ...props\n}) => {\n  const { addEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      addEditedContent: s.addEditedContent,\n      editedContent: s.editedContent,\n    }))\n  );\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n    }))\n  );\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex h-full flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <ValidDictionaryChangeButtons dictionary={dictionary} />\n    </div>\n  );\n};\n"],"names":["useEditedContentStore","useShallow","useEditionPanelStore","jsxs","jsx","createElement","NodeWrapper","ValidDictionaryChangeButtons"],"mappings":";;;;;;;;;;AAiBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,EAAE,kBAAkB,cAAA,IAAkBA,kDAAA;AAAA,IAC1CC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,eAAe,EAAE;AAAA,IAAA,EACjB;AAAA,EACJ;AACM,QAAA,EAAE,gBAAgB,yBAAA,IAA6BC,iDAAA;AAAA,IACnDD,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,gBAAgB,EAAE;AAAA,MAClB,0BAA0B,EAAE;AAAA,IAAA,EAC5B;AAAA,EACJ;AAEA,QAAM,iBAAiB,gBAAgB;AAGrC,SAAAE,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAAC,iDAAC,OACC,EAAA,UAAAC,2BAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,cAAc,WAAW,GAAG,KAAK,YAAY;AAAA,QAChD;AAAA,QACA,eAAe,cAAc,WAAW,GAAG,GAAG;AAAA,QAC9C;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACAF,iDAACG,yDAAAA,gCAA6B,WAAwB,CAAA;AAAA,EAAA,GACxD;AAEJ;;"}
+{"version":3,"file":"DictionaryEditor.cjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex h-full flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <ValidDictionaryChangeButtons dictionary={dictionary} />\n    </div>\n  );\n};\n"],"names":["useEditedContent","useFocusDictionary","jsxs","jsx","createElement","NodeWrapper","ValidDictionaryChangeButtons"],"mappings":";;;;;;;;AAeO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,eAAe,iBAAiB,IAAIA,6BAAiB;AAC7D,QAAM,EAAE,gBAAgB,yBAAyB,IAAIC,+BAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAGrC,SAAAC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAAC,iDAAC,OACC,EAAA,UAAAC,2BAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,cAAc,WAAW,GAAG,KAAK,YAAY;AAAA,QAChD;AAAA,QACA,eAAe,cAAc,WAAW,GAAG,GAAG;AAAA,QAC9C;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACAF,iDAACG,yDAAAA,gCAA6B,WAAwB,CAAA;AAAA,EAAA,GACxD;AAEJ;;"}

package/dist/components/DictionaryEditor/DictionaryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAwCtD,CAAC"}
+{"version":3,"file":"DictionaryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8BtD,CAAC"}

package/dist/components/DictionaryEditor/DictionaryEditor.mjs

@@ -1,27 +1,15 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
 import { createElement } from "react";
-import { u as useShallow } from "../../shallow-m9BpCkKh.js";
+import { useEditedContent, useFocusDictionary } from "@intlayer/editor-react";
 import { N as NodeWrapper } from "../../index-BdTa-9zc.js";
-import { useEditedContentStore } from "./useEditedContentStore.mjs";
-import { useEditionPanelStore } from "./useEditionPanelStore.mjs";
 import { ValidDictionaryChangeButtons } from "./ValidDictionaryChangeButtons.mjs";
 const DictionaryEditor = ({
   dictionary,
   ...props
 }) => {
-  const { addEditedContent, editedContent } = useEditedContentStore(
-    useShallow((s) => ({
-      addEditedContent: s.addEditedContent,
-      editedContent: s.editedContent
-    }))
-  );
-  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(
-    useShallow((s) => ({
-      focusedContent: s.focusedContent,
-      setFocusedContentKeyPath: s.setFocusedContentKeyPath
-    }))
-  );
+  const { editedContent, addEditedContent } = useEditedContent();
+  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();
   const focusedKeyPath = focusedContent?.keyPath;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col justify-between gap-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ createElement(

package/dist/components/DictionaryEditor/DictionaryEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.mjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { NodeWrapper } from './NodeWrapper';\nimport { useEditedContentStore } from './useEditedContentStore';\nimport { useEditionPanelStore } from './useEditionPanelStore';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  ...props\n}) => {\n  const { addEditedContent, editedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      addEditedContent: s.addEditedContent,\n      editedContent: s.editedContent,\n    }))\n  );\n  const { focusedContent, setFocusedContentKeyPath } = useEditionPanelStore(\n    useShallow((s) => ({\n      focusedContent: s.focusedContent,\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n    }))\n  );\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex h-full flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <ValidDictionaryChangeButtons dictionary={dictionary} />\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;AAiBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,EAAE,kBAAkB,cAAA,IAAkB;AAAA,IAC1C,WAAW,CAAC,OAAO;AAAA,MACjB,kBAAkB,EAAE;AAAA,MACpB,eAAe,EAAE;AAAA,IAAA,EACjB;AAAA,EACJ;AACM,QAAA,EAAE,gBAAgB,yBAAA,IAA6B;AAAA,IACnD,WAAW,CAAC,OAAO;AAAA,MACjB,gBAAgB,EAAE;AAAA,MAClB,0BAA0B,EAAE;AAAA,IAAA,EAC5B;AAAA,EACJ;AAEA,QAAM,iBAAiB,gBAAgB;AAGrC,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAAC,sCAAC,OACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,cAAc,WAAW,GAAG,KAAK,YAAY;AAAA,QAChD;AAAA,QACA,eAAe,cAAc,WAAW,GAAG,GAAG;AAAA,QAC9C;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACAA,sCAAC,gCAA6B,WAAwB,CAAA;AAAA,EAAA,GACxD;AAEJ;"}
+{"version":3,"file":"DictionaryEditor.mjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex h-full flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <ValidDictionaryChangeButtons dictionary={dictionary} />\n    </div>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;AAeO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,eAAe,iBAAiB,IAAI,iBAAiB;AAC7D,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAGrC,SAAAA,kCAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAAC,sCAAC,OACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,cAAc,WAAW,GAAG,KAAK,YAAY;AAAA,QAChD;AAAA,QACA,eAAe,cAAc,WAAW,GAAG,GAAG;AAAA,QAC9C;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACAA,sCAAC,gCAA6B,WAAwB,CAAA;AAAA,EAAA,GACxD;AAEJ;"}

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../jsx-runtime-CgFM7lM3.cjs");
+const core = require("@intlayer/core");
 require("../../EditableField/EditableFieldInput.cjs");
 const components_EditableField_EditableFieldTextArea = require("../../EditableField/EditableFieldTextArea.cjs");
 const utils_cn = require("../../../utils/cn.cjs");
-const utils_dictionary = require("../../../utils/dictionary.cjs");
 const StringWrapper = ({
   keyPath,
   section,
@@ -12,7 +12,7 @@ const StringWrapper = ({
   onContentChange,
   onFocusKeyPath
 }) => {
-  const editedContentValue = utils_dictionary.getDictionaryValueByKeyPath(
+  const editedContentValue = core.getDictionaryValueByKeyPath(
     editedContent,
     keyPath
   );

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StringWrapper.cjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { EditableFieldTextArea } from '../..//EditableField';\nimport { cn } from '../../../utils/cn';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <EditableFieldTextArea\n        defaultValue={content}\n        onSave={(newValue) => onContentChange({ keyPath, newValue })}\n        onCancel={() => null}\n      />\n    </button>\n  );\n};\n"],"names":["getDictionaryValueByKeyPath","jsx","cn","EditableFieldTextArea"],"mappings":";;;;;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqBA,iBAAA;AAAA,IACzB;AAAA,IACA;AAAA,EACF;AAEI,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,qGAAS,UAAqB,wBAAA,CAAA;AAAA,EAAA;AAGhC,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,+CAAA;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,QAAQ,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAC3D,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"StringWrapper.cjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import { getDictionaryValueByKeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { EditableFieldTextArea } from '../..//EditableField';\nimport { cn } from '../../../utils/cn';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <EditableFieldTextArea\n        defaultValue={content}\n        onSave={(newValue) => onContentChange({ keyPath, newValue })}\n        onCancel={() => null}\n      />\n    </button>\n  );\n};\n"],"names":["getDictionaryValueByKeyPath","jsx","cn","EditableFieldTextArea"],"mappings":";;;;;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqBA,KAAA;AAAA,IACzB;AAAA,IACA;AAAA,EACF;AAEI,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,qGAAS,UAAqB,wBAAA,CAAA;AAAA,EAAA;AAGhC,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,+CAAA;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,QAAQ,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAC3D,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAEJ;;"}

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StringWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,KAAK,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IAC5D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwChD,CAAC"}
+{"version":3,"file":"StringWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,KAAK,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IAC5D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwChD,CAAC"}

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs

@@ -1,8 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../jsx-runtime-DQkoUcjV.js";
+import { getDictionaryValueByKeyPath } from "@intlayer/core";
 import "../../EditableField/EditableFieldInput.mjs";
 import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
 import { cn } from "../../../utils/cn.mjs";
-import { getDictionaryValueByKeyPath } from "../../../utils/dictionary.mjs";
 const StringWrapper = ({
   keyPath,
   section,

package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StringWrapper.mjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { EditableFieldTextArea } from '../..//EditableField';\nimport { cn } from '../../../utils/cn';\nimport { getDictionaryValueByKeyPath } from '../../../utils/dictionary';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <EditableFieldTextArea\n        defaultValue={content}\n        onSave={(newValue) => onContentChange({ keyPath, newValue })}\n        onCancel={() => null}\n      />\n    </button>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,EACF;AAEI,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,+EAAS,UAAqB,wBAAA,CAAA;AAAA,EAAA;AAGhC,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,QAAQ,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAC3D,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"StringWrapper.mjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx"],"sourcesContent":["import { getDictionaryValueByKeyPath } from '@intlayer/core';\nimport type { FC } from 'react';\nimport { EditableFieldTextArea } from '../..//EditableField';\nimport { cn } from '../../../utils/cn';\nimport type { NodeWrapperProps } from './index';\n\ntype StringWrapperProps = Omit<NodeWrapperProps, 'section'> & {\n  section: string;\n};\n\nexport const StringWrapper: FC<StringWrapperProps> = ({\n  keyPath,\n  section,\n  editedContent,\n  onContentChange,\n  onFocusKeyPath,\n}) => {\n  const editedContentValue = getDictionaryValueByKeyPath(\n    editedContent,\n    keyPath\n  );\n\n  if (editedContentValue && typeof editedContentValue !== 'string') {\n    return <>Error loading section</>;\n  }\n\n  const level = keyPath.length;\n\n  const content = editedContentValue ?? section;\n\n  return (\n    <button\n      className={cn(\n        'w-full rounded-md p-2 text-left transition',\n        'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n        level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n        level >= 3 && ''\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        onFocusKeyPath(keyPath);\n      }}\n    >\n      <EditableFieldTextArea\n        defaultValue={content}\n        onSave={(newValue) => onContentChange({ keyPath, newValue })}\n        onCancel={() => null}\n      />\n    </button>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;AAUO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,EACF;AAEI,MAAA,sBAAsB,OAAO,uBAAuB,UAAU;AAChE,+EAAS,UAAqB,wBAAA,CAAA;AAAA,EAAA;AAGhC,QAAM,QAAQ,QAAQ;AAEtB,QAAM,UAAU,sBAAsB;AAGpC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAChB;AAAA,MACA,SAAS,CAAC,MAAM;AACd,UAAE,gBAAgB;AAClB,uBAAe,OAAO;AAAA,MACxB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAc;AAAA,UACd,QAAQ,CAAC,aAAa,gBAAgB,EAAE,SAAS,UAAU;AAAA,UAC3D,UAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAEJ;"}