npm - @intlayer/design-system - Versions diffs - 5.1.1 → 5.1.3 - Mend

@intlayer/design-system 5.1.1 → 5.1.3

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

Files changed (74) hide show

package/dist/.vite/manifest.json CHANGED Viewed

@@ -55,8 +55,8 @@
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts"
     ]
   },
-  "_index-BKE0uywA.js": {
-    "file": "index-BKE0uywA.js",
+  "_index-BTDHuTxL.js": {
+    "file": "index-BTDHuTxL.js",
     "name": "index"
   },
   "_index-BUe-qmA0.js": {
@@ -75,8 +75,8 @@
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts"
     ]
   },
-  "_index-CsenS2hX.cjs": {
-    "file": "index-CsenS2hX.cjs",
+  "_index-Db5Dym4h.cjs": {
+    "file": "index-Db5Dym4h.cjs",
     "name": "index"
   },
   "_index-cg9H6eBs.cjs": {
@@ -222,7 +222,7 @@
     "src": "src/components/Auth/ExternalsLoginButtons/ExternalsLoginButtons.tsx",
     "isEntry": true,
     "imports": [
-      "_index-CsenS2hX.cjs",
+      "_index-Db5Dym4h.cjs",
       "src/components/Button/Button.tsx",
       "src/components/Auth/ExternalsLoginButtons/assets/GithubLogo.tsx",
       "src/components/Auth/ExternalsLoginButtons/assets/GoogleLogo.tsx",
@@ -831,6 +831,7 @@
       "src/components/SwitchSelector/index.tsx",
       "src/components/LocaleSwitcherContentDropDown/localeSwitcher.content.ts",
       "src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx",
+      "src/components/MarkDownRender/index.tsx",
       "src/components/DictionaryFieldEditor/EnumKeyInput.tsx",
       "src/components/DictionaryFieldEditor/getIsEditableSection.ts",
       "src/components/DictionaryFieldEditor/NavigationView/navigationViewNode.content.ts"
@@ -864,7 +865,7 @@
     "isEntry": true,
     "imports": [
       "src/hooks/intlayerAPIHooks.ts",
-      "_index-CsenS2hX.cjs",
+      "_index-Db5Dym4h.cjs",
       "src/components/Button/Button.tsx",
       "src/components/Auth/ExternalsLoginButtons/externalsLoginButtons.content.ts",
       "src/components/Form/FormBase.tsx",
@@ -919,7 +920,7 @@
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "src/hooks/intlayerAPIHooks.ts",
-      "_index-CsenS2hX.cjs",
+      "_index-Db5Dym4h.cjs",
       "src/components/Button/Button.tsx",
       "src/components/Auth/ExternalsLoginButtons/externalsLoginButtons.content.ts",
       "src/components/Form/FormBase.tsx",
@@ -1060,7 +1061,7 @@
       "src/hooks/useScrollBlockage/useScrollBlockageStore.ts",
       "src/hooks/useAsync/useAsyncStateStore.tsx",
       "src/hooks/intlayerAPIHooks.ts",
-      "_index-CsenS2hX.cjs",
+      "_index-Db5Dym4h.cjs",
       "src/components/Button/Button.tsx",
       "src/components/Auth/ExternalsLoginButtons/externalsLoginButtons.content.ts",
       "src/components/Form/FormBase.tsx",
@@ -1099,7 +1100,6 @@
     "src": "src/components/DictionaryFieldEditor/StructureEditor.tsx",
     "isEntry": true,
     "imports": [
-      "src/components/Container/index.tsx",
       "src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"
     ]
   },

package/dist/components/Auth/ExternalsLoginButtons/ExternalsLoginButtons.cjs CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactIntlayer = require("react-intlayer");
-const index = require("../../../index-CsenS2hX.cjs");
+const index = require("../../../index-Db5Dym4h.cjs");
 require("@intlayer/config/client");
 const components_Button_Button = require("../../Button/Button.cjs");
 const components_Auth_ExternalsLoginButtons_assets_GithubLogo = require("./assets/GithubLogo.cjs");

package/dist/components/Auth/ExternalsLoginButtons/ExternalsLoginButtons.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDictionary } from "react-intlayer";
-import { i as intlayerAPI } from "../../../index-BKE0uywA.js";
+import { i as intlayerAPI } from "../../../index-BTDHuTxL.js";
 import "@intlayer/config/client";
 import { Button } from "../../Button/Button.mjs";
 import { GithubLogo } from "./assets/GithubLogo.mjs";

package/dist/components/Container/index.cjs CHANGED Viewed

@@ -55,7 +55,10 @@ const containerVariants = classVarianceAuthority.cva(
         primary: "border-primary dark:border-primary-dark",
         secondary: "border-secondary dark:border-secondary-dark",
         neutral: "border-neutral dark:border-neutral-dark",
-        text: "border-text dark:border-text-dark"
+        text: "border-text dark:border-text-dark",
+        error: "border-error dark:border-error-dark",
+        warning: "border-warning dark:border-warning-dark",
+        success: "border-success dark:border-success-dark"
       },
       background: {
         none: "bg-inherit",

package/dist/components/Container/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type PropsWithChildren,\n type HTMLAttributes,\n type FC,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n 'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n transparency: {\n none: '',\n full: 'bg-none',\n sm: 'dark:bg-opacity-90',\n md: 'dark:bg-opacity-70',\n lg: 'dark:bg-opacity-40',\n xl: 'dark:bg-opacity-20',\n },\n backgroundColor: {\n none: 'bg-card dark:bg-card-dark',\n primary: 'bg-primary dark:bg-primary-dark',\n secondary: 'bg-secondary dark:bg-secondary-dark',\n neutral: 'bg-neutral dark:bg-neutral-dark',\n text: 'bg-text dark:bg-text-dark',\n card: 'bg-card dark:bg-card-dark',\n contrast: 'bg-background-dark dark:bg-background',\n },\n padding: {\n none: 'p-0',\n sm: 'p-1',\n md: 'p-2',\n lg: 'p-3',\n xl: 'p-4',\n },\n separator: {\n without: '',\n x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n },\n border: {\n none: '',\n with: 'border-[1.5px]',\n },\n borderColor: {\n primary: 'border-primary dark:border-primary-dark',\n secondary: 'border-secondary dark:border-secondary-dark',\n neutral: 'border-neutral dark:border-neutral-dark',\n text: 'border-text dark:border-text-dark',\n },\n background: {\n none: 'bg-inherit',\n hoverable:\n '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n with: '',\n },\n gap: {\n none: 'gap-0',\n sm: 'gap-1',\n md: 'gap-3',\n lg: 'gap-5',\n xl: 'gap-8',\n '2xl': 'gap-10',\n },\n },\n\n defaultVariants: {\n roundedSize: 'md',\n border: 'none',\n borderColor: 'text',\n backgroundColor: 'card',\n transparency: 'md',\n padding: 'none',\n separator: 'without',\n gap: 'none',\n },\n }\n);\n\nexport type ContainerProps = PropsWithChildren<\n Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n border?: boolean;\n };\n\nexport const Container: FC<ContainerProps> = ({\n children,\n roundedSize,\n padding,\n transparency,\n separator,\n className,\n border,\n borderColor,\n backgroundColor,\n background,\n ...props\n}) => (\n <div\n className={cn(\n containerVariants({\n roundedSize,\n transparency,\n padding,\n separator,\n border:\n typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n background,\n backgroundColor,\n borderColor,\n className,\n })\n )}\n {...props}\n >\n {children}\n </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AASA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,~~MACR~~;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type PropsWithChildren,\n type HTMLAttributes,\n type FC,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n 'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n transparency: {\n none: '',\n full: 'bg-none',\n sm: 'dark:bg-opacity-90',\n md: 'dark:bg-opacity-70',\n lg: 'dark:bg-opacity-40',\n xl: 'dark:bg-opacity-20',\n },\n backgroundColor: {\n none: 'bg-card dark:bg-card-dark',\n primary: 'bg-primary dark:bg-primary-dark',\n secondary: 'bg-secondary dark:bg-secondary-dark',\n neutral: 'bg-neutral dark:bg-neutral-dark',\n text: 'bg-text dark:bg-text-dark',\n card: 'bg-card dark:bg-card-dark',\n contrast: 'bg-background-dark dark:bg-background',\n },\n padding: {\n none: 'p-0',\n sm: 'p-1',\n md: 'p-2',\n lg: 'p-3',\n xl: 'p-4',\n },\n separator: {\n without: '',\n x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n },\n border: {\n none: '',\n with: 'border-[1.5px]',\n },\n borderColor: {\n primary: 'border-primary dark:border-primary-dark',\n secondary: 'border-secondary dark:border-secondary-dark',\n neutral: 'border-neutral dark:border-neutral-dark',\n text: 'border-text dark:border-text-dark',\n error: 'border-error dark:border-error-dark',\n warning: 'border-warning dark:border-warning-dark',\n success: 'border-success dark:border-success-dark',\n },\n background: {\n none: 'bg-inherit',\n hoverable:\n '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n with: '',\n },\n gap: {\n none: 'gap-0',\n sm: 'gap-1',\n md: 'gap-3',\n lg: 'gap-5',\n xl: 'gap-8',\n '2xl': 'gap-10',\n },\n },\n\n defaultVariants: {\n roundedSize: 'md',\n border: 'none',\n borderColor: 'text',\n backgroundColor: 'card',\n transparency: 'md',\n padding: 'none',\n separator: 'without',\n gap: 'none',\n },\n }\n);\n\nexport type ContainerProps = PropsWithChildren<\n Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n border?: boolean;\n };\n\nexport const Container: FC<ContainerProps> = ({\n children,\n roundedSize,\n padding,\n transparency,\n separator,\n className,\n border,\n borderColor,\n backgroundColor,\n background,\n ...props\n}) => (\n <div\n className={cn(\n containerVariants({\n roundedSize,\n transparency,\n padding,\n separator,\n border:\n typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n background,\n backgroundColor,\n borderColor,\n className,\n })\n )}\n {...props}\n >\n {children}\n </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","jsx","cn"],"mappings":";;;;;AASA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;;"}

package/dist/components/Container/index.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ declare const containerVariants: (props?: ({
     padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
     separator?: "x" | "y" | "without" | "both" | null | undefined;
     border?: "none" | "with" | null | undefined;
-    borderColor?: "text" | "primary" | "secondary" | "neutral" | null | undefined;
+    borderColor?: "text" | "success" | "warning" | "error" | "primary" | "secondary" | "neutral" | null | undefined;
     background?: "none" | "hoverable" | "with" | null | undefined;
     gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Container/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,QAAA,MAAM,iBAAiB;;;;;;;;;;~~8EAiFtB~~,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CACvD,GACC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgCxC,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,QAAA,MAAM,iBAAiB;;;;;;;;;;8EAoFtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAC5C,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,QAAQ,CAAC,CACvD,GACC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,GAAG;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAgCxC,CAAC"}

package/dist/components/Container/index.mjs CHANGED Viewed

@@ -53,7 +53,10 @@ const containerVariants = cva(
         primary: "border-primary dark:border-primary-dark",
         secondary: "border-secondary dark:border-secondary-dark",
         neutral: "border-neutral dark:border-neutral-dark",
-        text: "border-text dark:border-text-dark"
+        text: "border-text dark:border-text-dark",
+        error: "border-error dark:border-error-dark",
+        warning: "border-warning dark:border-warning-dark",
+        success: "border-success dark:border-success-dark"
       },
       background: {
         none: "bg-inherit",

package/dist/components/Container/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type PropsWithChildren,\n type HTMLAttributes,\n type FC,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n 'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n transparency: {\n none: '',\n full: 'bg-none',\n sm: 'dark:bg-opacity-90',\n md: 'dark:bg-opacity-70',\n lg: 'dark:bg-opacity-40',\n xl: 'dark:bg-opacity-20',\n },\n backgroundColor: {\n none: 'bg-card dark:bg-card-dark',\n primary: 'bg-primary dark:bg-primary-dark',\n secondary: 'bg-secondary dark:bg-secondary-dark',\n neutral: 'bg-neutral dark:bg-neutral-dark',\n text: 'bg-text dark:bg-text-dark',\n card: 'bg-card dark:bg-card-dark',\n contrast: 'bg-background-dark dark:bg-background',\n },\n padding: {\n none: 'p-0',\n sm: 'p-1',\n md: 'p-2',\n lg: 'p-3',\n xl: 'p-4',\n },\n separator: {\n without: '',\n x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n },\n border: {\n none: '',\n with: 'border-[1.5px]',\n },\n borderColor: {\n primary: 'border-primary dark:border-primary-dark',\n secondary: 'border-secondary dark:border-secondary-dark',\n neutral: 'border-neutral dark:border-neutral-dark',\n text: 'border-text dark:border-text-dark',\n },\n background: {\n none: 'bg-inherit',\n hoverable:\n '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n with: '',\n },\n gap: {\n none: 'gap-0',\n sm: 'gap-1',\n md: 'gap-3',\n lg: 'gap-5',\n xl: 'gap-8',\n '2xl': 'gap-10',\n },\n },\n\n defaultVariants: {\n roundedSize: 'md',\n border: 'none',\n borderColor: 'text',\n backgroundColor: 'card',\n transparency: 'md',\n padding: 'none',\n separator: 'without',\n gap: 'none',\n },\n }\n);\n\nexport type ContainerProps = PropsWithChildren<\n Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n border?: boolean;\n };\n\nexport const Container: FC<ContainerProps> = ({\n children,\n roundedSize,\n padding,\n transparency,\n separator,\n className,\n border,\n borderColor,\n backgroundColor,\n background,\n ...props\n}) => (\n <div\n className={cn(\n containerVariants({\n roundedSize,\n transparency,\n padding,\n separator,\n border:\n typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n background,\n backgroundColor,\n borderColor,\n className,\n })\n )}\n {...props}\n >\n {children}\n </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":[],"mappings":";;;AASA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,~~MACR~~;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type PropsWithChildren,\n type HTMLAttributes,\n type FC,\n type DetailedHTMLProps,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n 'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n transparency: {\n none: '',\n full: 'bg-none',\n sm: 'dark:bg-opacity-90',\n md: 'dark:bg-opacity-70',\n lg: 'dark:bg-opacity-40',\n xl: 'dark:bg-opacity-20',\n },\n backgroundColor: {\n none: 'bg-card dark:bg-card-dark',\n primary: 'bg-primary dark:bg-primary-dark',\n secondary: 'bg-secondary dark:bg-secondary-dark',\n neutral: 'bg-neutral dark:bg-neutral-dark',\n text: 'bg-text dark:bg-text-dark',\n card: 'bg-card dark:bg-card-dark',\n contrast: 'bg-background-dark dark:bg-background',\n },\n padding: {\n none: 'p-0',\n sm: 'p-1',\n md: 'p-2',\n lg: 'p-3',\n xl: 'p-4',\n },\n separator: {\n without: '',\n x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n },\n border: {\n none: '',\n with: 'border-[1.5px]',\n },\n borderColor: {\n primary: 'border-primary dark:border-primary-dark',\n secondary: 'border-secondary dark:border-secondary-dark',\n neutral: 'border-neutral dark:border-neutral-dark',\n text: 'border-text dark:border-text-dark',\n error: 'border-error dark:border-error-dark',\n warning: 'border-warning dark:border-warning-dark',\n success: 'border-success dark:border-success-dark',\n },\n background: {\n none: 'bg-inherit',\n hoverable:\n '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n with: '',\n },\n gap: {\n none: 'gap-0',\n sm: 'gap-1',\n md: 'gap-3',\n lg: 'gap-5',\n xl: 'gap-8',\n '2xl': 'gap-10',\n },\n },\n\n defaultVariants: {\n roundedSize: 'md',\n border: 'none',\n borderColor: 'text',\n backgroundColor: 'card',\n transparency: 'md',\n padding: 'none',\n separator: 'without',\n gap: 'none',\n },\n }\n);\n\nexport type ContainerProps = PropsWithChildren<\n Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n border?: boolean;\n };\n\nexport const Container: FC<ContainerProps> = ({\n children,\n roundedSize,\n padding,\n transparency,\n separator,\n className,\n border,\n borderColor,\n backgroundColor,\n background,\n ...props\n}) => (\n <div\n className={cn(\n containerVariants({\n roundedSize,\n transparency,\n padding,\n separator,\n border:\n typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n background,\n backgroundColor,\n borderColor,\n className,\n })\n )}\n {...props}\n >\n {children}\n </div>\n);\n\nContainer.displayName = 'Container';\n"],"names":[],"mappings":";;;AASA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,MACZ;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,WACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AASO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;AAAA,QAC7D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,UAAU,cAAc;"}

package/dist/components/DictionaryFieldEditor/ContentEditor.cjs CHANGED Viewed

@@ -9,7 +9,10 @@ require("../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.cjs");
 const components_DictionaryFieldEditor_ContentEditorView_EditorView = require("./ContentEditorView/EditorView.cjs");
 const components_DictionaryFieldEditor_KeyPathBreadcrumb = require("./KeyPathBreadcrumb.cjs");
 const components_DictionaryFieldEditor_NavigationView_NavigationViewNode = require("./NavigationView/NavigationViewNode.cjs");
-const ContentEditor = ({ dictionary }) => {
+const ContentEditor = ({
+  dictionary,
+  isDarkMode
+}) => {
   const { content: dictionaryContent, key } = dictionary;
   const { editedContent } = editorReact.useEditedContent();
   const { focusedContent, setFocusedContentKeyPath } = editorReact.useFocusDictionary();
@@ -28,7 +31,7 @@ const ContentEditor = ({ dictionary }) => {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(components_LocaleSwitcherContentDropDown_LocaleSwitcherContent.LocaleSwitcherContent, {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 max-md:flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      typeof section === "object" && section && Object.keys(section).length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
         components_Container_index.Container,
         {
           border: true,
@@ -46,7 +49,14 @@ const ContentEditor = ({ dictionary }) => {
           )
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "top-6 flex h-full flex-1 flex-col gap-6 md:sticky", children: (focusedKeyPath?.length ?? 0) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_DictionaryFieldEditor_ContentEditorView_EditorView.EditorView, { dictionary, dictionaryKey: key }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "top-6 flex h-full flex-1 flex-col gap-6 md:sticky", children: /* @__PURE__ */ jsxRuntime.jsx(
+        components_DictionaryFieldEditor_ContentEditorView_EditorView.EditorView,
+        {
+          dictionary,
+          dictionaryKey: key,
+          isDarkMode
+        }
+      ) })
     ] })
   ] });
 };

package/dist/components/DictionaryFieldEditor/ContentEditor.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { EditorView } from './ContentEditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n const { content: dictionaryContent, key } = dictionary;\n const { editedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n const focusedKeyPath = focusedContent?.keyPath;\n\n const section = editedContent?.[key]?.content ?? dictionaryContent;\n\n return (\n <>\n <div className=\"flex items-center justify-between gap-2\">\n <KeyPathBreadcrumb\n dictionaryKey={key}\n keyPath={focusedKeyPath ?? []}\n onClickKeyPath={setFocusedContentKeyPath}\n />\n <div className=\"flex items-center gap-2\">\n <LocaleSwitcherContent />\n </div>\n </div>\n\n <div className=\"flex gap-2 max-md:flex-col\">\n <Container\n border\n background=\"none\"\n className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n roundedSize=\"xl\"\n transparency=\"sm\"\n >\n <NavigationViewNode\n keyPath={[]}\n section={section}\n dictionaryKey={key}\n />\n </Container>\n <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n ~~{(focusedKeyPath?.length ?? 0) > 0 && (~~\n ~~<EditorView~~ dictionary={dictionary} dictionaryKey={key} ~~/>\~~n )}\n </div>\n </div>\n </>\n );\n};\n"],"names":["useEditedContent","useFocusDictionary","jsxs","Fragment","jsx","KeyPathBreadcrumb","LocaleSwitcherContent","Container","NavigationViewNode","EditorView"],"mappings":";;;;;;;;;;;~~AAeO~~,MAAM,gBAAqC,CAAC,~~EAAE~~,~~iBAAiB~~;~~AACpE~~,QAAM,EAAE,SAAS,mBAAmB,IAAQ,IAAA;AACtC,QAAA,EAAE,cAAc,IAAIA,6BAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAIC,+BAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,gBAAgB,GAAG,GAAG,WAAW;AAEjD,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAACD,2BAAAA,KAAA,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAAE,2BAAA;AAAA,QAACC,mDAAA;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,qCACC,OAAI,EAAA,WAAU,2BACb,UAAAD,2BAAA,IAACE,wFAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IAEAJ,2BAAAA,KAAC,OAAI,EAAA,WAAU,~~8BACb~~,UAAA;AAAA,~~MAAAE~~,2BAAA;AAAA,QAACG,2BAAA;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAAH,2BAAA;AAAA,YAACI,mEAAA;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,~~MACCJ~~,~~2BAAA~~,~~IAAA~~,~~OAAA~~,~~EAAI~~,WAAU,~~qDACX~~,~~WAAgB~~,~~gBAAA~~,~~UAAU~~,~~KAAK~~,~~KAC9BA~~,~~2BAAA~~,~~IAAAK~~,~~0EAAA~~,~~EAAW~~,~~YAAwB~~,~~eAAe~~,~~KAAK~~,~~EAE5D,~~CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
1	+ {"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { EditorView } from './ContentEditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n isDarkMode?: boolean;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({\n dictionary,\n isDarkMode,\n}) => {\n const { content: dictionaryContent, key } = dictionary;\n const { editedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n const focusedKeyPath = focusedContent?.keyPath;\n\n const section = editedContent?.[key]?.content ?? dictionaryContent;\n\n return (\n <>\n <div className=\"flex items-center justify-between gap-2\">\n <KeyPathBreadcrumb\n dictionaryKey={key}\n keyPath={focusedKeyPath ?? []}\n onClickKeyPath={setFocusedContentKeyPath}\n />\n <div className=\"flex items-center gap-2\">\n <LocaleSwitcherContent />\n </div>\n </div>\n\n <div className=\"flex gap-2 max-md:flex-col\">\n {typeof section === 'object' &&\n section &&\n Object.keys(section).length > 0 && (\n <Container\n border\n background=\"none\"\n className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n roundedSize=\"xl\"\n transparency=\"sm\"\n >\n <NavigationViewNode\n keyPath={[]}\n section={section}\n dictionaryKey={key}\n />\n </Container>\n )}\n <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n <EditorView\n dictionary={dictionary}\n dictionaryKey={key}\n isDarkMode={isDarkMode}\n />\n </div>\n </div>\n </>\n );\n};\n"],"names":["useEditedContent","useFocusDictionary","jsxs","Fragment","jsx","KeyPathBreadcrumb","LocaleSwitcherContent","Container","NavigationViewNode","EditorView"],"mappings":";;;;;;;;;;;AAgBO,MAAM,gBAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAS,mBAAmB,IAAQ,IAAA;AACtC,QAAA,EAAE,cAAc,IAAIA,6BAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAIC,+BAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,gBAAgB,GAAG,GAAG,WAAW;AAEjD,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAACD,2BAAAA,KAAA,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAAE,2BAAA;AAAA,QAACC,mDAAA;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,qCACC,OAAI,EAAA,WAAU,2BACb,UAAAD,2BAAA,IAACE,wFAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IAEAJ,2BAAAA,KAAC,OAAI,EAAA,WAAU,8BACZ,UAAA;AAAA,MAAO,OAAA,YAAY,YAClB,WACA,OAAO,KAAK,OAAO,EAAE,SAAS,KAC5BE,2BAAA;AAAA,QAACG,2BAAA;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAAH,2BAAA;AAAA,YAACI,mEAAA;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,MAEJJ,2BAAAA,IAAC,OAAI,EAAA,WAAU,qDACb,UAAAA,2BAAA;AAAA,QAACK,8DAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,MAAA,EAEJ,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/ContentEditor.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { Dictionary } from '@intlayer/core';
 import { FC } from 'react';
 type NodeEditorProps = {
     dictionary: Dictionary;
+    isDarkMode?: boolean;
 };
 export declare const ContentEditor: FC<NodeEditorProps>;
 export {};

package/dist/components/DictionaryFieldEditor/ContentEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;~~CACxB~~,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,~~CA4C7C~~,CAAC"}
1	+ {"version":3,"file":"ContentEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,eAAe,CAqD7C,CAAC"}

package/dist/components/DictionaryFieldEditor/ContentEditor.mjs CHANGED Viewed

@@ -7,7 +7,10 @@ import "../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { EditorView } from "./ContentEditorView/EditorView.mjs";
 import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
 import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
-const ContentEditor = ({ dictionary }) => {
+const ContentEditor = ({
+  dictionary,
+  isDarkMode
+}) => {
   const { content: dictionaryContent, key } = dictionary;
   const { editedContent } = useEditedContent();
   const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();
@@ -26,7 +29,7 @@ const ContentEditor = ({ dictionary }) => {
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(LocaleSwitcherContent, {}) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-2 max-md:flex-col", children: [
-      /* @__PURE__ */ jsx(
+      typeof section === "object" && section && Object.keys(section).length > 0 && /* @__PURE__ */ jsx(
         Container,
         {
           border: true,
@@ -44,7 +47,14 @@ const ContentEditor = ({ dictionary }) => {
           )
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "top-6 flex h-full flex-1 flex-col gap-6 md:sticky", children: (focusedKeyPath?.length ?? 0) > 0 && /* @__PURE__ */ jsx(EditorView, { dictionary, dictionaryKey: key }) })
+      /* @__PURE__ */ jsx("div", { className: "top-6 flex h-full flex-1 flex-col gap-6 md:sticky", children: /* @__PURE__ */ jsx(
+        EditorView,
+        {
+          dictionary,
+          dictionaryKey: key,
+          isDarkMode
+        }
+      ) })
     ] })
   ] });
 };

package/dist/components/DictionaryFieldEditor/ContentEditor.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { EditorView } from './ContentEditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({ dictionary }) => {\n const { content: dictionaryContent, key } = dictionary;\n const { editedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n const focusedKeyPath = focusedContent?.keyPath;\n\n const section = editedContent?.[key]?.content ?? dictionaryContent;\n\n return (\n <>\n <div className=\"flex items-center justify-between gap-2\">\n <KeyPathBreadcrumb\n dictionaryKey={key}\n keyPath={focusedKeyPath ?? []}\n onClickKeyPath={setFocusedContentKeyPath}\n />\n <div className=\"flex items-center gap-2\">\n <LocaleSwitcherContent />\n </div>\n </div>\n\n <div className=\"flex gap-2 max-md:flex-col\">\n <Container\n border\n background=\"none\"\n className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n roundedSize=\"xl\"\n transparency=\"sm\"\n >\n <NavigationViewNode\n keyPath={[]}\n section={section}\n dictionaryKey={key}\n />\n </Container>\n <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n ~~{(focusedKeyPath?.length ?? 0) > 0 && (~~\n ~~<EditorView~~ dictionary={dictionary} dictionaryKey={key} ~~/>\~~n )}\n </div>\n </div>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;~~AAeO~~,MAAM,gBAAqC,CAAC,~~EAAE~~,~~iBAAiB~~;~~AACpE~~,QAAM,EAAE,SAAS,mBAAmB,IAAQ,IAAA;AACtC,QAAA,EAAE,cAAc,IAAI,iBAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,gBAAgB,GAAG,GAAG,WAAW;AAEjD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,0BACC,OAAI,EAAA,WAAU,2BACb,UAAA,oBAAC,yBAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IAEA,qBAAC,OAAI,EAAA,WAAU,~~8BACb~~,UAAA;AAAA,~~MAAA~~;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,~~MACC~~,~~oBAAA~~,~~OAAA~~,~~EAAI~~,WAAU,~~qDACX~~,~~WAAgB~~,~~gBAAA~~,~~UAAU~~,~~KAAK~~,~~KAC9B~~,~~oBAAA~~,~~YAAA~~,~~EAAW~~,~~YAAwB~~,~~eAAe~~,~~KAAK,EAE5D,~~CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { EditorView } from './ContentEditorView/EditorView';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n dictionary: Dictionary;\n isDarkMode?: boolean;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({\n dictionary,\n isDarkMode,\n}) => {\n const { content: dictionaryContent, key } = dictionary;\n const { editedContent } = useEditedContent();\n const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n const focusedKeyPath = focusedContent?.keyPath;\n\n const section = editedContent?.[key]?.content ?? dictionaryContent;\n\n return (\n <>\n <div className=\"flex items-center justify-between gap-2\">\n <KeyPathBreadcrumb\n dictionaryKey={key}\n keyPath={focusedKeyPath ?? []}\n onClickKeyPath={setFocusedContentKeyPath}\n />\n <div className=\"flex items-center gap-2\">\n <LocaleSwitcherContent />\n </div>\n </div>\n\n <div className=\"flex gap-2 max-md:flex-col\">\n {typeof section === 'object' &&\n section &&\n Object.keys(section).length > 0 && (\n <Container\n border\n background=\"none\"\n className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n roundedSize=\"xl\"\n transparency=\"sm\"\n >\n <NavigationViewNode\n keyPath={[]}\n section={section}\n dictionaryKey={key}\n />\n </Container>\n )}\n <div className=\"top-6 flex h-full flex-1 flex-col gap-6 md:sticky\">\n <EditorView\n dictionary={dictionary}\n dictionaryKey={key}\n isDarkMode={isDarkMode}\n />\n </div>\n </div>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAgBO,MAAM,gBAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAS,mBAAmB,IAAQ,IAAA;AACtC,QAAA,EAAE,cAAc,IAAI,iBAAiB;AAC3C,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAEvC,QAAM,UAAU,gBAAgB,GAAG,GAAG,WAAW;AAEjD,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAe;AAAA,UACf,SAAS,kBAAkB,CAAC;AAAA,UAC5B,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,0BACC,OAAI,EAAA,WAAU,2BACb,UAAA,oBAAC,yBAAsB,EACzB,CAAA;AAAA,IAAA,GACF;AAAA,IAEA,qBAAC,OAAI,EAAA,WAAU,8BACZ,UAAA;AAAA,MAAO,OAAA,YAAY,YAClB,WACA,OAAO,KAAK,OAAO,EAAE,SAAS,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAM;AAAA,UACN,YAAW;AAAA,UACX,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,cAAa;AAAA,UAEb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS,CAAC;AAAA,cACV;AAAA,cACA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,MAEJ,oBAAC,OAAI,EAAA,WAAU,qDACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,MAAA,EAEJ,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.cjs CHANGED Viewed

@@ -9,17 +9,21 @@ const components_DictionaryFieldEditor_getIsEditableSection = require("../getIsE
 const components_DictionaryFieldEditor_ContentEditorView_TextEditor = require("./TextEditor.cjs");
 const EditorView = ({
   dictionaryKey,
-  dictionary
+  dictionary,
+  isDarkMode
 }) => {
   const { focusedContent } = editorReact.useFocusDictionary();
   const keyPath = focusedContent?.keyPath ?? [];
   const { editedContent } = editorReact.useEditedContent();
-  const editedSection = editedContent?.[dictionaryKey]?.content ? core.getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath) : void 0;
+  const editedSection = typeof editedContent?.[dictionaryKey]?.content === "undefined" ? void 0 : core.getContentNodeByKeyPath(
+    editedContent?.[dictionaryKey].content,
+    keyPath
+  );
   const dictionarySection = core.getContentNodeByKeyPath(
     dictionary.content,
     keyPath
   );
-  const section = editedSection ?? dictionarySection;
+  const section = typeof editedSection === "undefined" ? dictionarySection : editedSection;
   const isEditableSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(section);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isEditableSection && /* @__PURE__ */ jsxRuntime.jsx(
     components_Container_index.Container,
@@ -33,7 +37,8 @@ const EditorView = ({
         {
           keyPath,
           section,
-          dictionary
+          dictionary,
+          isDarkMode
         },
         keyPath.join(".")
       )

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditorView.cjs","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Dictionary, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useFocusDictionary, useEditedContent } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../../Container';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n dictionaryKey: string;\n dictionary: Dictionary;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n dictionaryKey,\n dictionary,\n}) => {\n const { focusedContent } = useFocusDictionary();\n const keyPath = focusedContent?.keyPath ?? [];\n\n const { editedContent } = useEditedContent();\n\n const editedSection = editedContent?.[dictionaryKey]?.content\n ? getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath)\n ~~: undefined~~;\n\n const dictionarySection = getContentNodeByKeyPath(\n dictionary.content,\n keyPath\n );\n const section = editedSection ?? dictionarySection;\n const isEditableSection = getIsEditableSection(section);\n\n return (\n <>\n {isEditableSection && (\n <Container\n border\n background=\"none\"\n className=\"h-full flex-1 overflow-hidden\"\n roundedSize=\"xl\"\n >\n <TextEditor\n key={keyPath.join('.')}\n keyPath={keyPath}\n section={section}\n dictionary={dictionary}\n />\n </Container>\n )}\n </>\n );\n};\n"],"names":["useFocusDictionary","useEditedContent","getContentNodeByKeyPath","getIsEditableSection","jsx","Container","TextEditor"],"mappings":";;;;;;;;;~~AAcO~~,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,eAAe,IAAIA,+BAAmB;AACxC,QAAA,UAAU,gBAAgB,WAAW,CAAC;AAEtC,QAAA,EAAE,cAAc,IAAIC,6BAAiB;~~AAErC~~,~~QAAA~~,~~gBAAgB~~,gBAAgB,aAAa,GAAG,~~UAClDC~~,~~KAAAA~~,~~wBAAwB~~,gBAAgB,aAAa,EAAE,~~SAAS~~,~~OAAO,IACvE~~;~~AAEJ~~,QAAM,oBAAoBA,KAAA;AAAA,IACxB,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,~~UAAU~~,~~iBAAiB~~;~~AAC3B~~,QAAA,oBAAoBC,2EAAqB,OAAO;AAEtD,+DAEK,UACC,qBAAAC,2BAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,YAAW;AAAA,MACX,WAAU;AAAA,MACV,aAAY;AAAA,MAEZ,UAAAD,2BAAA;AAAA,QAACE,8DAAA;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,~~QAHK~~,QAAQ,KAAK,GAAG;AAAA,MAAA;AAAA,~~IAIvB~~;AAAA,EAAA,GAGN;AAEJ;;"}
1	+ {"version":3,"file":"EditorView.cjs","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Dictionary, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useFocusDictionary, useEditedContent } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../../Container';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n dictionaryKey: string;\n dictionary: Dictionary;\n isDarkMode?: boolean;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n dictionaryKey,\n dictionary,\n isDarkMode,\n}) => {\n const { focusedContent } = useFocusDictionary();\n const keyPath = focusedContent?.keyPath ?? [];\n\n const { editedContent } = useEditedContent();\n\n const editedSection =\n typeof editedContent?.[dictionaryKey]?.content === 'undefined'\n ? undefined\n : getContentNodeByKeyPath(\n editedContent?.[dictionaryKey].content,\n keyPath\n );\n\n const dictionarySection = getContentNodeByKeyPath(\n dictionary.content,\n keyPath\n );\n const section =\n typeof editedSection === 'undefined' ? dictionarySection : editedSection;\n const isEditableSection = getIsEditableSection(section);\n\n return (\n <>\n {isEditableSection && (\n <Container\n border\n background=\"none\"\n className=\"h-full flex-1 overflow-hidden\"\n roundedSize=\"xl\"\n >\n <TextEditor\n key={keyPath.join('.')}\n keyPath={keyPath}\n section={section}\n dictionary={dictionary}\n isDarkMode={isDarkMode}\n />\n </Container>\n )}\n </>\n );\n};\n"],"names":["useFocusDictionary","useEditedContent","getContentNodeByKeyPath","getIsEditableSection","jsx","Container","TextEditor"],"mappings":";;;;;;;;;AAeO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,eAAe,IAAIA,+BAAmB;AACxC,QAAA,UAAU,gBAAgB,WAAW,CAAC;AAEtC,QAAA,EAAE,cAAc,IAAIC,6BAAiB;AAE3C,QAAM,gBACJ,OAAO,gBAAgB,aAAa,GAAG,YAAY,cAC/C,SACAC,KAAA;AAAA,IACE,gBAAgB,aAAa,EAAE;AAAA,IAC/B;AAAA,EACF;AAEN,QAAM,oBAAoBA,KAAA;AAAA,IACxB,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,UACJ,OAAO,kBAAkB,cAAc,oBAAoB;AACvD,QAAA,oBAAoBC,2EAAqB,OAAO;AAEtD,+DAEK,UACC,qBAAAC,2BAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,YAAW;AAAA,MACX,WAAU;AAAA,MACV,aAAY;AAAA,MAEZ,UAAAD,2BAAA;AAAA,QAACE,8DAAA;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAJK,QAAQ,KAAK,GAAG;AAAA,MAAA;AAAA,IAKvB;AAAA,EAAA,GAGN;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { FC } from 'react';
 type EditorViewProps = {
     dictionaryKey: string;
     dictionary: Dictionary;
+    isDarkMode?: boolean;
 };
 export declare const EditorView: FC<EditorViewProps>;
 export {};

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditorView.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAA2B,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,KAAK,eAAe,GAAG;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;~~CACxB~~,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,~~CAuC1C~~,CAAC"}
1	+ {"version":3,"file":"EditorView.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAA2B,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,KAAK,eAAe,GAAG;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA8C1C,CAAC"}

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.mjs CHANGED Viewed

@@ -7,17 +7,21 @@ import { getIsEditableSection } from "../getIsEditableSection.mjs";
 import { TextEditor } from "./TextEditor.mjs";
 const EditorView = ({
   dictionaryKey,
-  dictionary
+  dictionary,
+  isDarkMode
 }) => {
   const { focusedContent } = useFocusDictionary();
   const keyPath = focusedContent?.keyPath ?? [];
   const { editedContent } = useEditedContent();
-  const editedSection = editedContent?.[dictionaryKey]?.content ? getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath) : void 0;
+  const editedSection = typeof editedContent?.[dictionaryKey]?.content === "undefined" ? void 0 : getContentNodeByKeyPath(
+    editedContent?.[dictionaryKey].content,
+    keyPath
+  );
   const dictionarySection = getContentNodeByKeyPath(
     dictionary.content,
     keyPath
   );
-  const section = editedSection ?? dictionarySection;
+  const section = typeof editedSection === "undefined" ? dictionarySection : editedSection;
   const isEditableSection = getIsEditableSection(section);
   return /* @__PURE__ */ jsx(Fragment, { children: isEditableSection && /* @__PURE__ */ jsx(
     Container,
@@ -31,7 +35,8 @@ const EditorView = ({
         {
           keyPath,
           section,
-          dictionary
+          dictionary,
+          isDarkMode
         },
         keyPath.join(".")
       )

package/dist/components/DictionaryFieldEditor/ContentEditorView/EditorView.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditorView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Dictionary, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useFocusDictionary, useEditedContent } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../../Container';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n dictionaryKey: string;\n dictionary: Dictionary;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n dictionaryKey,\n dictionary,\n}) => {\n const { focusedContent } = useFocusDictionary();\n const keyPath = focusedContent?.keyPath ?? [];\n\n const { editedContent } = useEditedContent();\n\n const editedSection = editedContent?.[dictionaryKey]?.content\n ? getContentNodeByKeyPath(editedContent?.[dictionaryKey].content, keyPath)\n ~~: undefined~~;\n\n const dictionarySection = getContentNodeByKeyPath(\n dictionary.content,\n keyPath\n );\n const section = editedSection ?? dictionarySection;\n const isEditableSection = getIsEditableSection(section);\n\n return (\n <>\n {isEditableSection && (\n <Container\n border\n background=\"none\"\n className=\"h-full flex-1 overflow-hidden\"\n roundedSize=\"xl\"\n >\n <TextEditor\n key={keyPath.join('.')}\n keyPath={keyPath}\n section={section}\n dictionary={dictionary}\n />\n </Container>\n )}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;~~AAcO~~,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,eAAe,IAAI,mBAAmB;AACxC,QAAA,UAAU,gBAAgB,WAAW,CAAC;AAEtC,QAAA,EAAE,cAAc,IAAI,iBAAiB;~~AAErC~~,~~QAAA~~,~~gBAAgB~~,gBAAgB,aAAa,GAAG,~~UAClD~~,~~wBAAwB~~,gBAAgB,aAAa,EAAE,~~SAAS~~,~~OAAO,IACvE~~;~~AAEJ~~,QAAM,oBAAoB;AAAA,IACxB,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,~~UAAU~~,~~iBAAiB~~;~~AAC3B~~,QAAA,oBAAoB,qBAAqB,OAAO;AAEtD,yCAEK,UACC,qBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,YAAW;AAAA,MACX,WAAU;AAAA,MACV,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,~~QAHK~~,QAAQ,KAAK,GAAG;AAAA,MAAA;AAAA,~~IAIvB~~;AAAA,EAAA,GAGN;AAEJ;"}
1	+ {"version":3,"file":"EditorView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/ContentEditorView/EditorView.tsx"],"sourcesContent":["'use client';\n\nimport { type Dictionary, getContentNodeByKeyPath } from '@intlayer/core';\nimport { useFocusDictionary, useEditedContent } from '@intlayer/editor-react';\nimport { type FC } from 'react';\nimport { Container } from '../../Container';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { TextEditor } from './TextEditor';\n\ntype EditorViewProps = {\n dictionaryKey: string;\n dictionary: Dictionary;\n isDarkMode?: boolean;\n};\n\nexport const EditorView: FC<EditorViewProps> = ({\n dictionaryKey,\n dictionary,\n isDarkMode,\n}) => {\n const { focusedContent } = useFocusDictionary();\n const keyPath = focusedContent?.keyPath ?? [];\n\n const { editedContent } = useEditedContent();\n\n const editedSection =\n typeof editedContent?.[dictionaryKey]?.content === 'undefined'\n ? undefined\n : getContentNodeByKeyPath(\n editedContent?.[dictionaryKey].content,\n keyPath\n );\n\n const dictionarySection = getContentNodeByKeyPath(\n dictionary.content,\n keyPath\n );\n const section =\n typeof editedSection === 'undefined' ? dictionarySection : editedSection;\n const isEditableSection = getIsEditableSection(section);\n\n return (\n <>\n {isEditableSection && (\n <Container\n border\n background=\"none\"\n className=\"h-full flex-1 overflow-hidden\"\n roundedSize=\"xl\"\n >\n <TextEditor\n key={keyPath.join('.')}\n keyPath={keyPath}\n section={section}\n dictionary={dictionary}\n isDarkMode={isDarkMode}\n />\n </Container>\n )}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAeO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA,EAAE,eAAe,IAAI,mBAAmB;AACxC,QAAA,UAAU,gBAAgB,WAAW,CAAC;AAEtC,QAAA,EAAE,cAAc,IAAI,iBAAiB;AAE3C,QAAM,gBACJ,OAAO,gBAAgB,aAAa,GAAG,YAAY,cAC/C,SACA;AAAA,IACE,gBAAgB,aAAa,EAAE;AAAA,IAC/B;AAAA,EACF;AAEN,QAAM,oBAAoB;AAAA,IACxB,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,UACJ,OAAO,kBAAkB,cAAc,oBAAoB;AACvD,QAAA,oBAAoB,qBAAqB,OAAO;AAEtD,yCAEK,UACC,qBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,YAAW;AAAA,MACX,WAAU;AAAA,MACV,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAJK,QAAQ,KAAK,GAAG;AAAA,MAAA;AAAA,IAKvB;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/components/DictionaryFieldEditor/ContentEditorView/TextEditor.cjs CHANGED Viewed

@@ -5,8 +5,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const core = require("@intlayer/core");
 const editorReact = require("@intlayer/editor-react");
 const lucideReact = require("lucide-react");
+const ReactExports = require("react");
 const reactIntlayer = require("react-intlayer");
-require("react");
 require("../../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 require("../../../hooks/useAsync/useAsyncStateStore.cjs");
 const hooks_intlayerAPIHooks = require("../../../hooks/intlayerAPIHooks.cjs");
@@ -25,6 +25,7 @@ require("../../Input/Checkbox.cjs");
 const components_SwitchSelector_index = require("../../SwitchSelector/index.cjs");
 require("../../LocaleSwitcherContentDropDown/localeSwitcher.content.cjs");
 const components_LocaleSwitcherContentDropDown_LocaleSwitcherContentContext = require("../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.cjs");
+const components_MarkDownRender_index = require("../../MarkDownRender/index.cjs");
 const components_DictionaryFieldEditor_EnumKeyInput = require("../EnumKeyInput.cjs");
 const components_DictionaryFieldEditor_getIsEditableSection = require("../getIsEditableSection.cjs");
 const components_DictionaryFieldEditor_NavigationView_navigationViewNode_content = require("../NavigationView/navigationViewNode.content.cjs");
@@ -361,18 +362,50 @@ const ArrayTextEditor = ({
 const MarkdownTextEditor = ({
   section,
   keyPath,
-  dictionary
+  dictionary,
+  isDarkMode
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-    ContentEditorTextArea,
+  const [mode, setMode] = ReactExports.useState(
+    0
+    /* Edit */
+  );
+  const toggleContent2 = [
     {
-      variant: "default",
-      "aria-label": "Edit field",
-      keyPath: [...keyPath, { type: core.NodeType.Markdown }],
-      dictionary,
-      children: section[core.NodeType.Markdown]
+      content: "Edit",
+      value: 0
+      /* Edit */
+    },
+    {
+      content: "Preview",
+      value: 1
+      /* Preview */
     }
-  ) });
+  ];
+  const content = section[core.NodeType.Markdown];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col justify-center gap-6 p-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_SwitchSelector_index.SwitchSelector,
+      {
+        choices: toggleContent2,
+        value: mode,
+        onChange: setMode,
+        color: "text",
+        size: "sm",
+        className: "ml-auto"
+      }
+    ),
+    mode === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      ContentEditorTextArea,
+      {
+        variant: "default",
+        "aria-label": "Edit field",
+        keyPath: [...keyPath, { type: core.NodeType.Markdown }],
+        dictionary,
+        children: content
+      }
+    ),
+    mode === 1 && /* @__PURE__ */ jsxRuntime.jsx(components_MarkDownRender_index.MarkdownRenderer, { isDarkMode, children: content })
+  ] });
 };
 const NestedTextEditor = ({
   keyPath,
@@ -431,7 +464,8 @@ const NestedTextEditor = ({
 const TextEditor = ({
   section,
   keyPath,
-  dictionary
+  dictionary,
+  isDarkMode
 }) => {
   const { tsxNotEditable } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
   const nodeType = core.getNodeType(section);
@@ -490,7 +524,8 @@ const TextEditor = ({
         {
           dictionary,
           keyPath,
-          section
+          section,
+          isDarkMode
         }
       );
     }