@intlayer/design-system 8.9.4 → 8.9.6-canary.0

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

@@ -4,17 +4,17 @@ import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
 import { CopyToClipboard } from "../CopyToClipboard/index.mjs";
 import { LocaleSwitcherContentProvider } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
-import { Tab } from "../Tab/Tab.mjs";
 import { ContentEditor } from "./ContentEditor.mjs";
+import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
 import { DictionaryDetailsForm } from "./DictionaryDetails/DictionaryDetailsForm.mjs";
 import { JSONEditor } from "./JSONEditor.mjs";
 import { SaveForm } from "./SaveForm/SaveForm.mjs";
 import { StructureEditor } from "./StructureEditor.mjs";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ArrowLeft } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
 const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave, showReturnButton = true }) => {
@@ -22,6 +22,7 @@ const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode,
 	const { returnToDictionaryList } = useIntlayer("dictionary-field-editor");
 	const { focusedContent, setFocusedContent } = useFocusUnmergedDictionary();
 	const { setLocaleDictionary } = useDictionariesRecordActions();
+	const [activeTab, setActiveTab] = useState("content");
 	useEffect(() => {
 		setFocusedContent({
 			...focusedContent ?? {},
@@ -44,45 +45,66 @@ const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode,
 					label: returnToDictionaryList.label.value,
 					children: returnToDictionaryList.text
 				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "mb-22 min-h-0 flex-1",
-					children: /* @__PURE__ */ jsxs(Tab, {
-						defaultTab: "content",
-						variant: "ghost",
-						fullHeight: true,
-						headerClassName: "sticky top-0 z-10 rounded-xl bg-background/20 pb-4",
-						children: [
-							mode.includes("remote") && /* @__PURE__ */ jsx(Tab.Item, {
-								label: "Details",
-								value: "details",
-								children: /* @__PURE__ */ jsx(DictionaryDetailsForm, {
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-22 flex min-h-0 flex-1 flex-col overflow-hidden",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "sticky top-0 z-10 flex shrink-0 gap-3 rounded-xl bg-background/20 p-3 pb-4",
+						children: /* @__PURE__ */ jsx(TabSelector, {
+							selectedChoice: activeTab,
+							tabs: [
+								...mode.includes("remote") ? [/* @__PURE__ */ jsx("button", {
+									className: "cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none",
+									"data-active": activeTab === "details",
+									onClick: () => setActiveTab("details"),
+									type: "button",
+									children: "Details"
+								}, "details")] : [],
+								/* @__PURE__ */ jsx("button", {
+									className: "cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none",
+									"data-active": activeTab === "structure",
+									onClick: () => setActiveTab("structure"),
+									type: "button",
+									children: "Structure"
+								}, "structure"),
+								/* @__PURE__ */ jsx("button", {
+									className: "cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none",
+									"data-active": activeTab === "content",
+									onClick: () => setActiveTab("content"),
+									type: "button",
+									children: "Content"
+								}, "content"),
+								/* @__PURE__ */ jsx("button", {
+									className: "cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none",
+									"data-active": activeTab === "json",
+									onClick: () => setActiveTab("json"),
+									type: "button",
+									children: "JSON"
+								}, "json")
+							],
+							hoverable: true,
+							color: "text"
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "min-h-0 flex-1 overflow-y-auto p-6",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex w-full min-w-0 flex-col items-stretch gap-6",
+							children: [
+								mode.includes("remote") && activeTab === "details" && /* @__PURE__ */ jsx(DictionaryDetailsForm, {
 									dictionary,
 									mode
-								})
-							}),
-							/* @__PURE__ */ jsx(Tab.Item, {
-								label: "Structure",
-								value: "structure",
-								children: /* @__PURE__ */ jsx(StructureEditor, { dictionary })
-							}),
-							/* @__PURE__ */ jsx(Tab.Item, {
-								label: "Content",
-								value: "content",
-								children: /* @__PURE__ */ jsx(ContentEditor, {
+								}),
+								activeTab === "structure" && /* @__PURE__ */ jsx(StructureEditor, { dictionary }),
+								activeTab === "content" && /* @__PURE__ */ jsx(ContentEditor, {
 									dictionary,
 									isDarkMode
-								})
-							}),
-							/* @__PURE__ */ jsx(Tab.Item, {
-								label: "JSON",
-								value: "json",
-								children: /* @__PURE__ */ jsx(JSONEditor, {
+								}),
+								activeTab === "json" && /* @__PURE__ */ jsx(JSONEditor, {
 									dictionary,
 									isDarkMode
 								})
-							})
-						]
-					})
+							]
+						})
+					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "absolute bottom-3 z-20 w-full p-2",

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryFieldEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { CopyToClipboard } from '@components/CopyToClipboard';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { ArrowLeft } from 'lucide-react';\nimport { type FC, useEffect } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { Tab } from '../Tab';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  onSave?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n  showReturnButton?: boolean;\n};\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n  onSave,\n  showReturnButton = true,\n}) => {\n  const config = useConfiguration();\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { focusedContent, setFocusedContent } = useFocusUnmergedDictionary();\n  const { setLocaleDictionary } = useDictionariesRecordActions();\n\n  useEffect(() => {\n    setFocusedContent({\n      ...(focusedContent ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    });\n    setLocaleDictionary(dictionary);\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization?.locales ?? []}\n    >\n      <div className=\"relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden\">\n        {showReturnButton && (\n          <Button\n            onClick={onClickDictionaryList}\n            variant={ButtonVariant.HOVERABLE}\n            className=\"z-10 mr-auto mb-6 ml-5 shrink-0\"\n            color={ButtonColor.TEXT}\n            Icon={ArrowLeft}\n            label={returnToDictionaryList.label.value}\n          >\n            {returnToDictionaryList.text}\n          </Button>\n        )}\n\n        <div className=\"mb-22 min-h-0 flex-1\">\n          <Tab\n            defaultTab=\"content\"\n            variant=\"ghost\"\n            fullHeight\n            headerClassName=\"sticky top-0 z-10 rounded-xl bg-background/20 pb-4\"\n          >\n            {mode.includes('remote') && (\n              <Tab.Item label=\"Details\" value=\"details\">\n                <DictionaryDetailsForm dictionary={dictionary} mode={mode} />\n              </Tab.Item>\n            )}\n            <Tab.Item label=\"Structure\" value=\"structure\">\n              <StructureEditor dictionary={dictionary} />\n            </Tab.Item>\n            <Tab.Item label=\"Content\" value=\"content\">\n              <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n            </Tab.Item>\n            <Tab.Item label=\"JSON\" value=\"json\">\n              <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n            </Tab.Item>\n          </Tab>\n        </div>\n\n        <div className=\"absolute bottom-3 z-20 w-full p-2\">\n          <Container\n            color=\"card\"\n            roundedSize=\"2xl\"\n            padding=\"sm\"\n            className=\"w-full shrink-0 flex-row flex-wrap items-center justify-end gap-10 bg-background/20 md:bottom-0\"\n          >\n            <CopyToClipboard\n              text={dictionary.id!}\n              className=\"text-nowrap text-neutral text-sm\"\n              size={9}\n            >\n              {dictionary.id}\n            </CopyToClipboard>\n            <SaveForm\n              dictionary={dictionary}\n              mode={mode}\n              onDelete={() => {\n                setFocusedContent(null);\n                onDelete?.();\n              }}\n              onSave={onSave}\n            />\n          </Container>\n        </div>\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAa,yBAAyD,EACpE,YACA,uBACA,YACA,MACA,UACA,QACA,mBAAmB,WACf;CACJ,MAAM,SAAS,kBAAkB;CACjC,MAAM,EAAE,2BAA2B,YAAY,0BAA0B;CACzE,MAAM,EAAE,gBAAgB,sBAAsB,4BAA4B;CAC1E,MAAM,EAAE,wBAAwB,8BAA8B;CAE9D,gBAAgB;EACd,kBAAkB;GAChB,GAAI,kBAAkB,EAAE;GACxB,eAAe,WAAW;GAC1B,mBAAmB,WAAW;GAC/B,CAAC;EACF,oBAAoB,WAAW;IAC9B,EAAE,CAAC;CAEN,OACE,oBAAC,+BAAD;EACE,kBAAkB,QAAQ,sBAAsB,WAAW,EAAE;YAE7D,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,oBACC,oBAAC,QAAD;KACE,SAAS;KACT;KACA,WAAU;KACV;KACA,MAAM;KACN,OAAO,uBAAuB,MAAM;eAEnC,uBAAuB;KACjB;IAGX,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,KAAD;MACE,YAAW;MACX,SAAQ;MACR;MACA,iBAAgB;gBAJlB;OAMG,KAAK,SAAS,SAAS,IACtB,oBAAC,IAAI,MAAL;QAAU,OAAM;QAAU,OAAM;kBAC9B,oBAAC,uBAAD;SAAmC;SAAkB;SAAQ;QACpD;OAEb,oBAAC,IAAI,MAAL;QAAU,OAAM;QAAY,OAAM;kBAChC,oBAAC,iBAAD,EAA6B,YAAc;QAClC;OACX,oBAAC,IAAI,MAAL;QAAU,OAAM;QAAU,OAAM;kBAC9B,oBAAC,eAAD;SAA2B;SAAwB;SAAc;QACxD;OACX,oBAAC,IAAI,MAAL;QAAU,OAAM;QAAO,OAAM;kBAC3B,oBAAC,YAAD;SAAwB;SAAwB;SAAc;QACrD;OACP;;KACF;IAEN,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,WAAD;MACE,OAAM;MACN,aAAY;MACZ,SAAQ;MACR,WAAU;gBAJZ,CAME,oBAAC,iBAAD;OACE,MAAM,WAAW;OACjB,WAAU;OACV,MAAM;iBAEL,WAAW;OACI,GAClB,oBAAC,UAAD;OACc;OACN;OACN,gBAAgB;QACd,kBAAkB,KAAK;QACvB,YAAY;;OAEN;OACR,EACQ;;KACR;IACF;;EACwB"}
+{"version":3,"file":"DictionaryFieldEditor.mjs","names":[],"sources":["../../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { CopyToClipboard } from '@components/CopyToClipboard';\nimport {\n  useConfiguration,\n  useDictionariesRecordActions,\n  useFocusUnmergedDictionary,\n} from '@intlayer/editor-react';\nimport type { Dictionary } from '@intlayer/types/dictionary';\nimport { ArrowLeft } from 'lucide-react';\nimport { type FC, useEffect, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n  dictionary: Dictionary;\n  onClickDictionaryList?: () => void;\n  onDelete?: () => void;\n  onSave?: () => void;\n  isDarkMode?: boolean;\n  mode: ('local' | 'remote')[];\n  showReturnButton?: boolean;\n};\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n  dictionary,\n  onClickDictionaryList,\n  isDarkMode,\n  mode,\n  onDelete,\n  onSave,\n  showReturnButton = true,\n}) => {\n  const config = useConfiguration();\n  const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n  const { focusedContent, setFocusedContent } = useFocusUnmergedDictionary();\n  const { setLocaleDictionary } = useDictionariesRecordActions();\n  const [activeTab, setActiveTab] = useState<string>('content');\n\n  useEffect(() => {\n    setFocusedContent({\n      ...(focusedContent ?? {}),\n      dictionaryKey: dictionary.key,\n      dictionaryLocalId: dictionary.localId,\n    });\n    setLocaleDictionary(dictionary);\n  }, []);\n\n  return (\n    <LocaleSwitcherContentProvider\n      availableLocales={config?.internationalization?.locales ?? []}\n    >\n      <div className=\"relative flex h-full min-h-0 w-full flex-1 flex-col md:overflow-hidden\">\n        {showReturnButton && (\n          <Button\n            onClick={onClickDictionaryList}\n            variant={ButtonVariant.HOVERABLE}\n            className=\"z-10 mr-auto mb-6 ml-5 shrink-0\"\n            color={ButtonColor.TEXT}\n            Icon={ArrowLeft}\n            label={returnToDictionaryList.label.value}\n          >\n            {returnToDictionaryList.text}\n          </Button>\n        )}\n\n        <div className=\"mb-22 flex min-h-0 flex-1 flex-col overflow-hidden\">\n          {/* Tab headers */}\n          <div className=\"sticky top-0 z-10 flex shrink-0 gap-3 rounded-xl bg-background/20 p-3 pb-4\">\n            <TabSelector\n              selectedChoice={activeTab}\n              tabs={[\n                ...(mode.includes('remote')\n                  ? [\n                      <button\n                        key=\"details\"\n                        className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                        data-active={activeTab === 'details'}\n                        onClick={() => setActiveTab('details')}\n                        type=\"button\"\n                      >\n                        Details\n                      </button>,\n                    ]\n                  : []),\n                <button\n                  key=\"structure\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'structure'}\n                  onClick={() => setActiveTab('structure')}\n                  type=\"button\"\n                >\n                  Structure\n                </button>,\n                <button\n                  key=\"content\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'content'}\n                  onClick={() => setActiveTab('content')}\n                  type=\"button\"\n                >\n                  Content\n                </button>,\n                <button\n                  key=\"json\"\n                  className=\"cursor-pointer whitespace-nowrap rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none\"\n                  data-active={activeTab === 'json'}\n                  onClick={() => setActiveTab('json')}\n                  type=\"button\"\n                >\n                  JSON\n                </button>,\n              ]}\n              hoverable\n              color={TabSelectorColor.TEXT}\n            />\n          </div>\n          {/* Tab content — only active panel is mounted */}\n          <div className=\"min-h-0 flex-1 overflow-y-auto p-6\">\n            <div className=\"flex w-full min-w-0 flex-col items-stretch gap-6\">\n              {mode.includes('remote') && activeTab === 'details' && (\n                <DictionaryDetailsForm dictionary={dictionary} mode={mode} />\n              )}\n              {activeTab === 'structure' && (\n                <StructureEditor dictionary={dictionary} />\n              )}\n              {activeTab === 'content' && (\n                <ContentEditor\n                  dictionary={dictionary}\n                  isDarkMode={isDarkMode}\n                />\n              )}\n              {activeTab === 'json' && (\n                <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n              )}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"absolute bottom-3 z-20 w-full p-2\">\n          <Container\n            color=\"card\"\n            roundedSize=\"2xl\"\n            padding=\"sm\"\n            className=\"w-full shrink-0 flex-row flex-wrap items-center justify-end gap-10 bg-background/20 md:bottom-0\"\n          >\n            <CopyToClipboard\n              text={dictionary.id!}\n              className=\"text-nowrap text-neutral text-sm\"\n              size={9}\n            >\n              {dictionary.id}\n            </CopyToClipboard>\n            <SaveForm\n              dictionary={dictionary}\n              mode={mode}\n              onDelete={() => {\n                setFocusedContent(null);\n                onDelete?.();\n              }}\n              onSave={onSave}\n            />\n          </Container>\n        </div>\n      </div>\n    </LocaleSwitcherContentProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAa,yBAAyD,EACpE,YACA,uBACA,YACA,MACA,UACA,QACA,mBAAmB,WACf;CACJ,MAAM,SAAS,kBAAkB;CACjC,MAAM,EAAE,2BAA2B,YAAY,0BAA0B;CACzE,MAAM,EAAE,gBAAgB,sBAAsB,4BAA4B;CAC1E,MAAM,EAAE,wBAAwB,8BAA8B;CAC9D,MAAM,CAAC,WAAW,gBAAgB,SAAiB,UAAU;CAE7D,gBAAgB;EACd,kBAAkB;GAChB,GAAI,kBAAkB,EAAE;GACxB,eAAe,WAAW;GAC1B,mBAAmB,WAAW;GAC/B,CAAC;EACF,oBAAoB,WAAW;IAC9B,EAAE,CAAC;CAEN,OACE,oBAAC,+BAAD;EACE,kBAAkB,QAAQ,sBAAsB,WAAW,EAAE;YAE7D,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,oBACC,oBAAC,QAAD;KACE,SAAS;KACT;KACA,WAAU;KACV;KACA,MAAM;KACN,OAAO,uBAAuB,MAAM;eAEnC,uBAAuB;KACjB;IAGX,qBAAC,OAAD;KAAK,WAAU;eAAf,CAEE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,aAAD;OACE,gBAAgB;OAChB,MAAM;QACJ,GAAI,KAAK,SAAS,SAAS,GACvB,CACE,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,UAAU;SACtC,MAAK;mBACN;SAEQ,EAPH,UAOG,CACV,GACD,EAAE;QACN,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,YAAY;SACxC,MAAK;mBACN;SAEQ,EAPH,YAOG;QACT,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,UAAU;SACtC,MAAK;mBACN;SAEQ,EAPH,UAOG;QACT,oBAAC,UAAD;SAEE,WAAU;SACV,eAAa,cAAc;SAC3B,eAAe,aAAa,OAAO;SACnC,MAAK;mBACN;SAEQ,EAPH,OAOG;QACV;OACD;OACA;OACA;MACE,GAEN,oBAAC,OAAD;MAAK,WAAU;gBACb,qBAAC,OAAD;OAAK,WAAU;iBAAf;QACG,KAAK,SAAS,SAAS,IAAI,cAAc,aACxC,oBAAC,uBAAD;SAAmC;SAAkB;SAAQ;QAE9D,cAAc,eACb,oBAAC,iBAAD,EAA6B,YAAc;QAE5C,cAAc,aACb,oBAAC,eAAD;SACc;SACA;SACZ;QAEH,cAAc,UACb,oBAAC,YAAD;SAAwB;SAAwB;SAAc;QAE5D;;MACF,EACF;;IAEN,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,WAAD;MACE,OAAM;MACN,aAAY;MACZ,SAAQ;MACR,WAAU;gBAJZ,CAME,oBAAC,iBAAD;OACE,MAAM,WAAW;OACjB,WAAU;OACV,MAAM;iBAEL,WAAW;OACI,GAClB,oBAAC,UAAD;OACc;OACN;OACN,gBAAgB;QACd,kBAAkB,KAAK;QACvB,YAAY;;OAEN;OACR,EACQ;;KACR;IACF;;EACwB"}

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

@@ -1,15 +1,16 @@
 import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
-import { internationalization } from "@intlayer/config/built";
+import { useState } from "react";
 import { ChevronRight, Plus } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
+import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";
 import { camelCaseToSentence } from "@intlayer/config/client";
+import { internationalization } from "@intlayer/config/built";
 
 //#region src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx
 const traceKeys = [
@@ -17,6 +18,17 @@ const traceKeys = [
 	"id",
 	"nodeType"
 ];
+const GatedAccordion = ({ children, onToggle, ...props }) => {
+	const [hasOpened, setHasOpened] = useState(false);
+	return /* @__PURE__ */ jsx(Accordion, {
+		...props,
+		onToggle: (isOpen) => {
+			if (isOpen && !hasOpened) setHasOpened(true);
+			onToggle?.(isOpen);
+		},
+		children: hasOpened ? children : null
+	});
+};
 const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 	const { locales } = internationalization;
 	const section = getContentNodeByKeyPath(sectionProp, keyPath, useEditorLocale());
@@ -26,7 +38,7 @@ const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 	const nodeType = getNodeType(section);
 	const getIsSelected = (keyPath) => (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);
 	const isEditableSubSection = getIsEditableSection(section);
-	if (!section) return /* @__PURE__ */ jsx(Fragment, {});
+	if (!section) return /* @__PURE__ */ jsx(Fragment$1, {});
 	if (isEditableSubSection) return /* @__PURE__ */ jsx(Button, {
 		label: goToField.label.value,
 		variant: "hoverable",
@@ -37,7 +49,7 @@ const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 		children: camelCaseToSentence(keyPath[keyPath.length - 1].key)
 	});
 	if (typeof section === "object") {
-		if (nodeType === NodeTypes.REACT_NODE) return /* @__PURE__ */ jsx(Fragment, { children: "React Node" });
+		if (nodeType === NodeTypes.REACT_NODE) return /* @__PURE__ */ jsx(Fragment$1, { children: "React Node" });
 		if (nodeType === NodeTypes.TRANSLATION) return /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col justify-between gap-2",
 			children: locales.map((translationKey) => {
@@ -81,7 +93,7 @@ const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 					isActive: getIsSelected(childKeyPath),
 					children: ["Item ", index]
 				}, JSON.stringify(childKeyPath));
-				return /* @__PURE__ */ jsx(Accordion, {
+				return /* @__PURE__ */ jsx(GatedAccordion, {
 					label: `${goToField.label.value} ${index}`,
 					header: `Item ${index}`,
 					isActive: getIsSelected(childKeyPath),
@@ -139,7 +151,7 @@ const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 					IconRight: ChevronRight,
 					children: camelCaseToSentence(key)
 				}, key);
-				return /* @__PURE__ */ jsx(Accordion, {
+				return /* @__PURE__ */ jsx(GatedAccordion, {
 					label: `${goToField.label.value} ${key}`,
 					isActive: getIsSelected(childKeyPath),
 					onClick: () => setFocusedContentKeyPath(childKeyPath),
@@ -159,7 +171,7 @@ const NavigationViewNode = ({ section: sectionProp, keyPath, dictionary }) => {
 			})
 		});
 	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		"Error loading section --",
 		nodeType,
 		"--",

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

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

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

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

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

@@ -7,8 +7,8 @@ import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
 import { Plus, Trash } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
+import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
+import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { Form } from "../Form.mjs";

package/dist/esm/components/IDE/CodeFormatSelector.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useCodeContext } from "./CodeContext.mjs";
 import { Select } from "../Select/Select.mjs";
+import { useCodeContext } from "./CodeContext.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 

package/dist/esm/components/IDE/ContentDeclarationFormatSelector.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useCodeContext } from "./CodeContext.mjs";
 import { Select } from "../Select/Select.mjs";
+import { useCodeContext } from "./CodeContext.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 

package/dist/esm/components/IDE/PackageManagerSelector.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useCodeContext } from "./CodeContext.mjs";
 import { Select } from "../Select/Select.mjs";
+import { useCodeContext } from "./CodeContext.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 

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

@@ -3,7 +3,7 @@
 import { cn } from "../../utils/cn.mjs";
 import { Container } from "../Container/index.mjs";
 import { Flag } from "../Flags/Flag.mjs";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ALL_LOCALES, getHTMLTextDir, getLocaleName } from "intlayer";
 
@@ -56,9 +56,9 @@ const LanguageSection = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("section", {
 		className: cn("mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden", className),
 		...props,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsx("div", {
 			className: "relative flex w-full flex-col gap-5 py-3",
-			children: [
+			children: /* @__PURE__ */ jsxs(Suspense, { children: [
 				/* @__PURE__ */ jsx(LocalCardList, {
 					localeList: firstPart,
 					className: "horizontal-loop-1"
@@ -75,7 +75,7 @@ const LanguageSection = ({ className, ...props }) => {
 					localeList: fourthPart,
 					className: "horizontal-loop-2"
 				})
-			]
+			] })
 		})
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  ALL_LOCALES,\n  getHTMLTextDir,\n  getLocaleName,\n  type Locale,\n} from 'intlayer';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from 'react';\nimport { Container } from '../Container';\nimport { Flag } from '../Flags';\n\nconst shuffleArray = (array: string[], limit?: number) => {\n  const shuffled = [...array];\n\n  for (let i = shuffled.length - 1; i > 0; i--) {\n    const randomIndex = Math.floor(Math.random() * (i + 1));\n\n    [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];\n  }\n\n  return limit ? shuffled.slice(0, limit) : shuffled;\n};\n\nconst LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (\n  <div\n    className=\"group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105\"\n    {...props}\n  >\n    <Container\n      roundedSize=\"xl\"\n      className=\"flex flex-row items-center gap-5 p-3\"\n    >\n      <Flag\n        locale={locale as Locale}\n        className=\"max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0\"\n        width={640}\n        height={480}\n        loading=\"lazy\"\n      />\n      <span\n        dir={getHTMLTextDir(locale as Locale)}\n        lang={locale as Locale}\n        className=\"flex text-nowrap\"\n      >\n        {getLocaleName(locale as Locale)}\n      </span>\n    </Container>\n  </div>\n);\n\nconst LocalCardList: FC<{ localeList: string[]; className?: string }> = ({\n  localeList,\n  className,\n  ...props\n}) => (\n  <div className=\"relative flex w-full overflow-hidden\" {...props}>\n    <div\n      className={cn('inline-flex shrink-0 will-change-transform', className)}\n    >\n      {/* First set of cards */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-first-${index}`} locale={locale} />\n      ))}\n      {/* Duplicate set for seamless loop */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-second-${index}`} locale={locale} />\n      ))}\n    </div>\n  </div>\n);\n\nconst NUM_OF_LOCALES = 15;\n\nconst emptyArrayOfLocale: string[][] = new Array(4).fill(0).map(() => []);\nconst arrayOfLocale: string[][] = new Array(4)\n  .fill(0)\n  .map(() => shuffleArray(Object.values(ALL_LOCALES), NUM_OF_LOCALES));\n\nexport const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({\n  className,\n  ...props\n}) => {\n  const [localeList, setLocaleList] = useState(emptyArrayOfLocale);\n  const [firstPart, secondPart, thirdPart, fourthPart] = localeList;\n\n  useEffect(() => {\n    setLocaleList(arrayOfLocale);\n  }, []);\n\n  return (\n    <section\n      className={cn(\n        'mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative flex w-full flex-col gap-5 py-3\">\n        <LocalCardList localeList={firstPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={secondPart} className=\"horizontal-loop-2\" />\n        <LocalCardList localeList={thirdPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={fourthPart} className=\"horizontal-loop-2\" />\n      </div>\n    </section>\n  );\n};\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => (\n  <>\n    <div className=\"absolute top-0 left-0 z-0 flex size-full items-center justify-center\">\n      <LanguageSection className=\"mt-[30%]\" />\n    </div>\n    {children}\n  </>\n);\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,gBAAgB,OAAiB,UAAmB;CACxD,MAAM,WAAW,CAAC,GAAG,MAAM;CAE3B,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK;EAC5C,MAAM,cAAc,KAAK,MAAM,KAAK,QAAQ,IAAI,IAAI,GAAG;EAEvD,CAAC,SAAS,IAAI,SAAS,gBAAgB,CAAC,SAAS,cAAc,SAAS,GAAG;;CAG7E,OAAO,QAAQ,SAAS,MAAM,GAAG,MAAM,GAAG;;AAG5C,MAAM,aAAqC,EAAE,QAAQ,GAAG,YACtD,oBAAC,OAAD;CACE,WAAU;CACV,GAAI;WAEJ,qBAAC,WAAD;EACE,aAAY;EACZ,WAAU;YAFZ,CAIE,oBAAC,MAAD;GACU;GACR,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,GACF,oBAAC,QAAD;GACE,KAAK,eAAe,OAAiB;GACrC,MAAM;GACN,WAAU;aAET,cAAc,OAAiB;GAC3B,EACG;;CACR;AAGR,MAAM,iBAAmE,EACvE,YACA,WACA,GAAG,YAEH,oBAAC,OAAD;CAAK,WAAU;CAAuC,GAAI;WACxD,qBAAC,OAAD;EACE,WAAW,GAAG,8CAA8C,UAAU;YADxE,CAIG,WAAW,KAAK,QAAQ,UACvB,oBAAC,WAAD,EAAoD,QAAU,EAA9C,GAAG,OAAO,SAAS,QAA2B,CAC9D,EAED,WAAW,KAAK,QAAQ,UACvB,oBAAC,WAAD,EAAqD,QAAU,EAA/C,GAAG,OAAO,UAAU,QAA2B,CAC/D,CACE;;CACF;AAGR,MAAM,iBAAiB;AAEvB,MAAM,qBAAiC,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC;AACzE,MAAM,gBAA4B,IAAI,MAAM,EAAE,CAC3C,KAAK,EAAE,CACP,UAAU,aAAa,OAAO,OAAO,YAAY,EAAE,eAAe,CAAC;AAEtE,MAAa,mBAAoD,EAC/D,WACA,GAAG,YACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,WAAW,YAAY,WAAW,cAAc;CAEvD,gBAAgB;EACd,cAAc,cAAc;IAC3B,EAAE,CAAC;CAEN,OACE,oBAAC,WAAD;EACE,WAAW,GACT,mIACA,UACD;EACD,GAAI;YAEJ,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;KAAsB;IACtE,oBAAC,eAAD;KAAe,YAAY;KAAY,WAAU;KAAsB;IACvE,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;KAAsB;IACtE,oBAAC,eAAD;KAAe,YAAY;KAAY,WAAU;KAAsB;IACnE;;EACE;;AAId,MAAa,sBAA6C,EAAE,eAC1D,8CACE,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,iBAAD,EAAiB,WAAU,YAAa;CACpC,GACL,SACA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  ALL_LOCALES,\n  getHTMLTextDir,\n  getLocaleName,\n  type Locale,\n} from 'intlayer';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  Suspense,\n  useEffect,\n  useState,\n} from 'react';\nimport { Container } from '../Container';\nimport { Flag } from '../Flags';\n\nconst shuffleArray = (array: string[], limit?: number) => {\n  const shuffled = [...array];\n\n  for (let i = shuffled.length - 1; i > 0; i--) {\n    const randomIndex = Math.floor(Math.random() * (i + 1));\n\n    [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];\n  }\n\n  return limit ? shuffled.slice(0, limit) : shuffled;\n};\n\nconst LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (\n  <div\n    className=\"group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105\"\n    {...props}\n  >\n    <Container\n      roundedSize=\"xl\"\n      className=\"flex flex-row items-center gap-5 p-3\"\n    >\n      <Flag\n        locale={locale as Locale}\n        className=\"max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0\"\n        width={640}\n        height={480}\n        loading=\"lazy\"\n      />\n      <span\n        dir={getHTMLTextDir(locale as Locale)}\n        lang={locale as Locale}\n        className=\"flex text-nowrap\"\n      >\n        {getLocaleName(locale as Locale)}\n      </span>\n    </Container>\n  </div>\n);\n\nconst LocalCardList: FC<{ localeList: string[]; className?: string }> = ({\n  localeList,\n  className,\n  ...props\n}) => (\n  <div className=\"relative flex w-full overflow-hidden\" {...props}>\n    <div\n      className={cn('inline-flex shrink-0 will-change-transform', className)}\n    >\n      {/* First set of cards */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-first-${index}`} locale={locale} />\n      ))}\n      {/* Duplicate set for seamless loop */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-second-${index}`} locale={locale} />\n      ))}\n    </div>\n  </div>\n);\n\nconst NUM_OF_LOCALES = 15;\n\nconst emptyArrayOfLocale: string[][] = new Array(4).fill(0).map(() => []);\nconst arrayOfLocale: string[][] = new Array(4)\n  .fill(0)\n  .map(() => shuffleArray(Object.values(ALL_LOCALES), NUM_OF_LOCALES));\n\nexport const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({\n  className,\n  ...props\n}) => {\n  const [localeList, setLocaleList] = useState(emptyArrayOfLocale);\n  const [firstPart, secondPart, thirdPart, fourthPart] = localeList;\n\n  useEffect(() => {\n    setLocaleList(arrayOfLocale);\n  }, []);\n\n  return (\n    <section\n      className={cn(\n        'mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative flex w-full flex-col gap-5 py-3\">\n        <Suspense>\n          <LocalCardList localeList={firstPart} className=\"horizontal-loop-1\" />\n          <LocalCardList\n            localeList={secondPart}\n            className=\"horizontal-loop-2\"\n          />\n          <LocalCardList localeList={thirdPart} className=\"horizontal-loop-1\" />\n          <LocalCardList\n            localeList={fourthPart}\n            className=\"horizontal-loop-2\"\n          />\n        </Suspense>\n      </div>\n    </section>\n  );\n};\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => (\n  <>\n    <div className=\"absolute top-0 left-0 z-0 flex size-full items-center justify-center\">\n      <LanguageSection className=\"mt-[30%]\" />\n    </div>\n    {children}\n  </>\n);\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,gBAAgB,OAAiB,UAAmB;CACxD,MAAM,WAAW,CAAC,GAAG,MAAM;CAE3B,KAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK;EAC5C,MAAM,cAAc,KAAK,MAAM,KAAK,QAAQ,IAAI,IAAI,GAAG;EAEvD,CAAC,SAAS,IAAI,SAAS,gBAAgB,CAAC,SAAS,cAAc,SAAS,GAAG;;CAG7E,OAAO,QAAQ,SAAS,MAAM,GAAG,MAAM,GAAG;;AAG5C,MAAM,aAAqC,EAAE,QAAQ,GAAG,YACtD,oBAAC,OAAD;CACE,WAAU;CACV,GAAI;WAEJ,qBAAC,WAAD;EACE,aAAY;EACZ,WAAU;YAFZ,CAIE,oBAAC,MAAD;GACU;GACR,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,GACF,oBAAC,QAAD;GACE,KAAK,eAAe,OAAiB;GACrC,MAAM;GACN,WAAU;aAET,cAAc,OAAiB;GAC3B,EACG;;CACR;AAGR,MAAM,iBAAmE,EACvE,YACA,WACA,GAAG,YAEH,oBAAC,OAAD;CAAK,WAAU;CAAuC,GAAI;WACxD,qBAAC,OAAD;EACE,WAAW,GAAG,8CAA8C,UAAU;YADxE,CAIG,WAAW,KAAK,QAAQ,UACvB,oBAAC,WAAD,EAAoD,QAAU,EAA9C,GAAG,OAAO,SAAS,QAA2B,CAC9D,EAED,WAAW,KAAK,QAAQ,UACvB,oBAAC,WAAD,EAAqD,QAAU,EAA/C,GAAG,OAAO,UAAU,QAA2B,CAC/D,CACE;;CACF;AAGR,MAAM,iBAAiB;AAEvB,MAAM,qBAAiC,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC;AACzE,MAAM,gBAA4B,IAAI,MAAM,EAAE,CAC3C,KAAK,EAAE,CACP,UAAU,aAAa,OAAO,OAAO,YAAY,EAAE,eAAe,CAAC;AAEtE,MAAa,mBAAoD,EAC/D,WACA,GAAG,YACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,WAAW,YAAY,WAAW,cAAc;CAEvD,gBAAgB;EACd,cAAc,cAAc;IAC3B,EAAE,CAAC;CAEN,OACE,oBAAC,WAAD;EACE,WAAW,GACT,mIACA,UACD;EACD,GAAI;YAEJ,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,UAAD;IACE,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;KAAsB;IACtE,oBAAC,eAAD;KACE,YAAY;KACZ,WAAU;KACV;IACF,oBAAC,eAAD;KAAe,YAAY;KAAW,WAAU;KAAsB;IACtE,oBAAC,eAAD;KACE,YAAY;KACZ,WAAU;KACV;IACO;GACP;EACE;;AAId,MAAa,sBAA6C,EAAE,eAC1D,8CACE,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,iBAAD,EAAiB,WAAU,YAAa;CACpC,GACL,SACA"}

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

@@ -1,10 +1,10 @@
 'use client';
 
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/SwitchSelector.mjs";
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
 import { useMemo, useRef, useState } from "react";

package/dist/esm/components/Modal/Modal.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { useEffect } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawer } from "./useRightDrawer.mjs";

package/dist/esm/components/Tab/Tab.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Table/SmartTable.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
 import { Modal, ModalSize } from "../Modal/Modal.mjs";
+import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
 import { ExpandButton } from "./ExpandButton.mjs";
 import { Table } from "./Table.mjs";
 import { useTableWidths } from "./useTableWidths.mjs";

package/dist/esm/components/index.mjs

@@ -40,19 +40,8 @@ import { DropDown, DropDownAlign, DropDownYAlign } from "./DropDown/index.mjs";
 import { LocaleSwitcherContentProvider, useLocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { LocaleSwitcherContent } from "./LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
 import { Label } from "./Label/index.mjs";
-import { H1, H2, H3, H4, H5, H6 } from "./Headers/index.mjs";
-import { ExpandCollapse } from "./ExpandCollapse/ExpandCollapse.mjs";
-import { CodeBlock, CodeDefault } from "./IDE/CodeBlockClient.mjs";
 import { MultiSelect } from "./Select/Multiselect.mjs";
 import { Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator } from "./Select/Select.mjs";
-import { Code } from "./IDE/Code.mjs";
-import { TabSelector, TabSelectorColor } from "./TabSelector/TabSelector.mjs";
-import { Tab } from "./Tab/Tab.mjs";
-import { Modal, ModalSize } from "./Modal/Modal.mjs";
-import { Table } from "./Table/Table.mjs";
-import { SmartTable } from "./Table/SmartTable.mjs";
-import { Hr, Td, Th, Tr } from "./Table/TableElements.mjs";
-import { MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender/MarkDownRender.mjs";
 import { TextEditor, TextEditorContainer, traceKeys } from "./DictionaryFieldEditor/ContentEditorView/TextEditor.mjs";
 import { KeyPathBreadcrumb } from "./DictionaryFieldEditor/KeyPathBreadcrumb.mjs";
 import { ContentEditor } from "./DictionaryFieldEditor/ContentEditor.mjs";
@@ -61,10 +50,14 @@ import { InformationTag } from "./InformationTag/index.mjs";
 import { useForm } from "./Form/FormBase.mjs";
 import { Form } from "./Form/Form.mjs";
 import { DictionaryCreationForm } from "./DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs";
+import { TabSelector, TabSelectorColor } from "./TabSelector/TabSelector.mjs";
+import { H1, H2, H3, H4, H5, H6 } from "./Headers/index.mjs";
+import { Modal, ModalSize } from "./Modal/Modal.mjs";
 import { SaveForm } from "./DictionaryFieldEditor/SaveForm/SaveForm.mjs";
 import { DictionaryFieldEditor } from "./DictionaryFieldEditor/DictionaryFieldEditor.mjs";
 import { VersionSwitcherProvider, useVersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcherContext.mjs";
 import { VersionSwitcher } from "./DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.mjs";
+import { ExpandCollapse } from "./ExpandCollapse/ExpandCollapse.mjs";
 import { Flag } from "./Flags/Flag.mjs";
 import { flags_exports } from "./Flags/flags.mjs";
 import { Logo } from "./Logo/Logo.mjs";
@@ -88,12 +81,19 @@ import { Footer } from "./Footer/index.mjs";
 import { HeightResizer } from "./HeightResizer/index.mjs";
 import { HideShow } from "./HideShow/index.mjs";
 import { HTMLRenderer, getIntlayerHTMLOptions } from "./HTMLRender/HTMLRender.mjs";
+import { CodeBlock, CodeDefault } from "./IDE/CodeBlockClient.mjs";
+import { Code } from "./IDE/Code.mjs";
 import { FileList } from "./IDE/FileList.mjs";
 import { WithResizer } from "./WithResizer/index.mjs";
 import { IDE } from "./IDE/IDE.mjs";
 import { KeyboardScreenAdapter } from "./KeyboardScreenAdapter/index.mjs";
 import { LanguageBackground, LanguageSection } from "./LanguageBackground/index.mjs";
 import { LocaleSwitcher } from "./LocaleSwitcherDropDown/LocaleSwitcher.mjs";
+import { Tab } from "./Tab/Tab.mjs";
+import { Table } from "./Table/Table.mjs";
+import { SmartTable } from "./Table/SmartTable.mjs";
+import { Hr, Td, Th, Tr } from "./Table/TableElements.mjs";
+import { MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender/MarkDownRender.mjs";
 import { MaxWidthSmoother } from "./MaxWidthSmoother/index.mjs";
 import { DesktopNavbar } from "./Navbar/DesktopNavbar.mjs";
 import { Burger } from "./Navbar/Burger.mjs";