@intlayer/design-system 5.1.4 → 5.1.6

package/dist/components/Container/index.mjs

@@ -1,89 +1,76 @@
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.mjs";
-const containerVariants = cva(
-  "flex flex-col p-10 text-text backdrop-blur dark:text-text-dark",
-  {
-    variants: {
-      roundedSize: {
-        none: "rounded-none",
-        sm: "rounded-sm",
-        md: "rounded-md",
-        lg: "rounded-lg",
-        xl: "rounded-xl",
-        "2xl": "rounded-2xl",
-        "3xl": "rounded-3xl",
-        full: "rounded-full"
-      },
-      transparency: {
-        none: "",
-        full: "bg-none",
-        sm: "dark:bg-opacity-90",
-        md: "dark:bg-opacity-70",
-        lg: "dark:bg-opacity-40",
-        xl: "dark:bg-opacity-20"
-      },
-      backgroundColor: {
-        none: "bg-card dark:bg-card-dark",
-        primary: "bg-primary dark:bg-primary-dark",
-        secondary: "bg-secondary dark:bg-secondary-dark",
-        neutral: "bg-neutral dark:bg-neutral-dark",
-        text: "bg-text dark:bg-text-dark",
-        card: "bg-card dark:bg-card-dark",
-        contrast: "bg-background-dark dark:bg-background"
-      },
-      padding: {
-        none: "p-0",
-        sm: "p-1",
-        md: "p-2",
-        lg: "p-3",
-        xl: "p-4"
-      },
-      separator: {
-        without: "",
-        x: "divide-x divide-dashed divide-text/20 dark:divide-text-dark/20",
-        y: "divide-y divide-dashed divide-text/20 dark:divide-text-dark/20",
-        both: "divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20"
-      },
-      border: {
-        none: "",
-        with: "border-[1.5px]"
-      },
-      borderColor: {
-        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",
-        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 dark:bg-inherit",
-        hoverable: "!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",
-        with: ""
-      },
-      gap: {
-        none: "gap-0",
-        sm: "gap-1",
-        md: "gap-3",
-        lg: "gap-5",
-        xl: "gap-8",
-        "2xl": "gap-10"
-      }
+const containerVariants = cva("flex text-text flex-col backdrop-blur", {
+  variants: {
+    roundedSize: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      "2xl": "rounded-2xl",
+      "3xl": "rounded-3xl",
+      full: "rounded-full"
+    },
+    transparency: {
+      none: "bg-card",
+      sm: "bg-card/90",
+      md: "bg-card/70",
+      lg: "bg-card/40",
+      xl: "bg-card/20",
+      full: ""
+    },
+    padding: {
+      none: "p-0",
+      sm: "p-1",
+      md: "p-2",
+      lg: "p-3",
+      xl: "p-4"
+    },
+    separator: {
+      without: "",
+      x: "divide-x divide-dashed divide-text/20",
+      y: "divide-y divide-dashed divide-text/20",
+      both: "divide-x divide-y divide-dashed divide-text/20"
     },
-    defaultVariants: {
-      roundedSize: "md",
-      border: "none",
-      borderColor: "text",
-      backgroundColor: "card",
-      transparency: "md",
-      padding: "none",
-      separator: "without",
-      gap: "none"
+    border: {
+      none: "",
+      with: "border-[1.5px]"
+    },
+    borderColor: {
+      primary: "border-primary",
+      secondary: "border-secondary",
+      neutral: "border-neutral",
+      text: "border-text ",
+      error: "border-error",
+      warning: "border-warning",
+      success: "border-success"
+    },
+    background: {
+      none: "bg-inherit",
+      hoverable: "!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",
+      with: ""
+    },
+    gap: {
+      none: "gap-0",
+      sm: "gap-1",
+      md: "gap-3",
+      lg: "gap-5",
+      xl: "gap-8",
+      "2xl": "gap-10"
     }
+  },
+  defaultVariants: {
+    roundedSize: "md",
+    border: "none",
+    borderColor: "text",
+    transparency: "md",
+    padding: "none",
+    separator: "without",
+    gap: "none"
   }
-);
+});
 const Container = ({
   children,
   roundedSize,
@@ -93,7 +80,6 @@ const Container = ({
   className,
   border,
   borderColor,
-  backgroundColor,
   background,
   ...props
 }) => /* @__PURE__ */ jsx(
@@ -107,7 +93,6 @@ const Container = ({
         separator,
         border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
         background,
-        backgroundColor,
         borderColor,
         className
       })
@@ -116,7 +101,6 @@ const Container = ({
     children
   }
 );
-Container.displayName = "Container";
 export {
   Container
 };

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

@@ -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        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 dark: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;"}
+{"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('flex text-text flex-col backdrop-blur', {\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: 'bg-card',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\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',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text ',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\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  defaultVariants: {\n    roundedSize: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\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  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        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":[],"mappings":";;;AASA,MAAM,oBAAoB,IAAI,yCAAyC;AAAA,EACrE,UAAU;AAAA,IACR,aAAa;AAAA,MACX,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,IACR;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,WACE;AAAA,MACF,MAAM;AAAA,IACR;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,SAAS;AAAA,IACT,WAAW;AAAA,IACX,KAAK;AAAA,EAAA;AAET,CAAC;AASM,MAAM,YAAgC,CAAC;AAAA,EAC5C;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,MACD,CAAA;AAAA,IACH;AAAA,IACC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;"}

package/dist/components/ContentEditor/ContentEditor.cjs

@@ -28,7 +28,7 @@ const ContentEditor = ({
       components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
       {
         className: utils_cn.cn(
-          "break-word m-3 inline w-full bg-transparent outline-none",
+          "break-word outline-hidden m-3 inline w-full bg-transparent",
           isEditing ? "cursor-text" : "cursor-pointer"
         ),
         onChange: handleOnContentChange,

package/dist/components/ContentEditor/ContentEditor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-none',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","jsxs","jsx","AutoSizedTextArea","cn","Check","X"],"mappings":";;;;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,qCAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACCH,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAA;AAAA,QAACG,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACAH,2BAAA;AAAA,QAACI,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;;"}
+{"version":3,"file":"ContentEditor.cjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word outline-hidden m-3 inline w-full bg-transparent',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","jsxs","jsx","AutoSizedTextArea","cn","Check","X"],"mappings":";;;;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,qCAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACCH,2BAAA,KAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAAC,2BAAA;AAAA,QAACG,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACAH,2BAAA;AAAA,QAACI,YAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;;"}

package/dist/components/ContentEditor/ContentEditor.mjs

@@ -26,7 +26,7 @@ const ContentEditor = ({
       AutoSizedTextArea,
       {
         className: cn(
-          "break-word m-3 inline w-full bg-transparent outline-none",
+          "break-word outline-hidden m-3 inline w-full bg-transparent",
           isEditing ? "cursor-text" : "cursor-pointer"
         ),
         onChange: handleOnContentChange,

package/dist/components/ContentEditor/ContentEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word m-3 inline w-full bg-transparent outline-none',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAA,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACC,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"ContentEditor.mjs","sources":["../../../src/components/ContentEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { AutoSizedTextArea } from '../TextArea/AutoSizeTextArea';\n\nexport type ContentEditorProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  isEditing?: boolean;\n} & HTMLAttributes<HTMLTextAreaElement>;\n\nexport const ContentEditor: FC<ContentEditorProps> = ({\n  children,\n  onContentChange,\n  isEditing,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.target.value ?? '');\n\n  return (\n    <div className=\"flex flex-row items-center justify-between gap-2\">\n      <AutoSizedTextArea\n        className={cn(\n          'break-word outline-hidden m-3 inline w-full bg-transparent',\n          isEditing ? 'cursor-text' : 'cursor-pointer'\n        )}\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        defaultValue={children}\n        {...props}\n      />\n      {isEdited && (\n        <div className=\"flex flex-row items-center justify-between gap-2\">\n          <Check\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleValid}\n          />\n          <X\n            className=\"cursor-pointer hover:scale-110\"\n            size={16}\n            onClick={handleCancel}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,OAAO,SAAS,EAAE;AAGhC,SAAA,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,gBAAgB;AAAA,QAC9B;AAAA,QACA,UAAU;AAAA,QAEV,SAAQ;AAAA,QACR,cAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,MAHC;AAAA,IAIP;AAAA,IACC,YACC,qBAAC,OAAI,EAAA,WAAU,oDACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/ContentEditor/ContentEditorTextArea.cjs

@@ -5,11 +5,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
 const ReactExports = require("react");
 const components_Button_Button = require("../Button/Button.cjs");
-const components_TextArea_AutoSizeTextArea = require("../TextArea/AutoSizeTextArea.cjs");
 require("clsx");
 require("tailwind-merge");
 require("../Input/Input.cjs");
 require("../Input/Checkbox.cjs");
+const components_TextArea_AutocompleteTextArea = require("../TextArea/AutocompleteTextArea.cjs");
 const ContentEditorTextArea = ({
   children,
   onContentChange,
@@ -39,7 +39,7 @@ const ContentEditorTextArea = ({
       className: "flex size-full flex-col items-center justify-between gap-2",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
+          components_TextArea_AutocompleteTextArea.AutoCompleteTextarea,
           {
             onChange: handleOnContentChange,
             variant: "invisible",

package/dist/components/ContentEditor/ContentEditorTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.cjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n  useEffect,\n} from 'react';\nimport { Button } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoSizedTextArea } from '../TextArea';\n\nexport type ContentEditorTextAreaProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  disabled?: boolean;\n  validate?: (content: string) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n    >\n      <AutoSizedTextArea\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","AutoSizedTextArea","Fragment","Button","Check","X"],"mappings":";;;;;;;;;;;;AAqBO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzCC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EAAA,GACnB,CAAC,QAAQ,CAAC;AAEP,QAAA,UAAU,WAAW,QAAQ,KAAK;AAGtC,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAA;AAAA,UAACC,qCAAA;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UAJC;AAAA,QAKP;AAAA,SACE,YAAY,sBACXF,2BAAA,KAAA,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YAEGA,2BAAA,KAAAG,qBAAA,EAAA,UAAA;AAAA,YAAAF,2BAAA;AAAA,cAACG,yBAAA;AAAA,cAAA;AAAA,gBACC,MAAMC,YAAA;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YACAJ,2BAAA;AAAA,cAACG,yBAAA;AAAA,cAAA;AAAA,gBACC,MAAME,YAAA;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IApCG;AAAA,EAsCP;AAEJ;;"}
+{"version":3,"file":"ContentEditorTextArea.cjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n  useEffect,\n} from 'react';\nimport { Button } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoCompleteTextarea } from '../TextArea';\n\nexport type ContentEditorTextAreaProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  disabled?: boolean;\n  validate?: (content: string) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useState","useEffect","jsxs","jsx","AutoCompleteTextarea","Fragment","Button","Check","X"],"mappings":";;;;;;;;;;;;AAqBO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAIA,aAAAA,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzCC,eAAAA,UAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EAAA,GACnB,CAAC,QAAQ,CAAC;AAEP,QAAA,UAAU,WAAW,QAAQ,KAAK;AAGtC,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAAC,2BAAA;AAAA,UAACC,yCAAA;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UAJC;AAAA,QAKP;AAAA,SACE,YAAY,sBACXF,2BAAA,KAAA,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YAEGA,2BAAA,KAAAG,qBAAA,EAAA,UAAA;AAAA,YAAAF,2BAAA;AAAA,cAACG,yBAAA;AAAA,cAAA;AAAA,gBACC,MAAMC,YAAA;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YACAJ,2BAAA;AAAA,cAACG,yBAAA;AAAA,cAAA;AAAA,gBACC,MAAME,YAAA;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IApCG;AAAA,EAsCP;AAEJ;;"}

package/dist/components/ContentEditor/ContentEditorTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,EAAE,EAGR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,sBAAsB,EAAqB,MAAM,aAAa,CAAC;AAE7E,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAwEhE,CAAC"}
+{"version":3,"file":"ContentEditorTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,EAAE,EAGR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,sBAAsB,EAAwB,MAAM,aAAa,CAAC;AAEhF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAC/B,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAwEhE,CAAC"}

package/dist/components/ContentEditor/ContentEditorTextArea.mjs

@@ -3,11 +3,11 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
 import { useState, useEffect } from "react";
 import { Button } from "../Button/Button.mjs";
-import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
 import "clsx";
 import "tailwind-merge";
 import "../Input/Input.mjs";
 import "../Input/Checkbox.mjs";
+import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
 const ContentEditorTextArea = ({
   children,
   onContentChange,
@@ -37,7 +37,7 @@ const ContentEditorTextArea = ({
       className: "flex size-full flex-col items-center justify-between gap-2",
       children: [
         /* @__PURE__ */ jsx(
-          AutoSizedTextArea,
+          AutoCompleteTextarea,
           {
             onChange: handleOnContentChange,
             variant: "invisible",

package/dist/components/ContentEditor/ContentEditorTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.mjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n  useEffect,\n} from 'react';\nimport { Button } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoSizedTextArea } from '../TextArea';\n\nexport type ContentEditorTextAreaProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  disabled?: boolean;\n  validate?: (content: string) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n    >\n      <AutoSizedTextArea\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAqBO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzC,YAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EAAA,GACnB,CAAC,QAAQ,CAAC;AAEP,QAAA,UAAU,WAAW,QAAQ,KAAK;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UAJC;AAAA,QAKP;AAAA,SACE,YAAY,sBACX,qBAAA,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YACA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IApCG;AAAA,EAsCP;AAEJ;"}
+{"version":3,"file":"ContentEditorTextArea.mjs","sources":["../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Check, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  useState,\n  type FC,\n  type ChangeEventHandler,\n  useEffect,\n} from 'react';\nimport { Button } from '../Button';\nimport { type AutoSizedTextAreaProps, AutoCompleteTextarea } from '../TextArea';\n\nexport type ContentEditorTextAreaProps = {\n  children: string;\n  onContentChange: (content: string) => void;\n  disabled?: boolean;\n  validate?: (content: string) => boolean;\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the div on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  useEffect(() => {\n    setNewValue(children);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        defaultValue={children}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div className=\"flex w-full items-center justify-end gap-2\">\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label=\"Validate\"\n                variant=\"hoverable\"\n                color=\"text\"\n                size=\"icon-sm\"\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel\"\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAqBO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiB,QAAQ;AACzD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,CAAC;AAClE,QAAM,WAAoB,aAAa;AAEvC,QAAM,eAAe,MAAM;AACzB,gBAAY,QAAQ;AACA,wBAAA,CAAC,SAAS,OAAO,CAAC;AAAA,EACxC;AACA,QAAM,cAAc,MAAM;AACxB,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,QAAM,wBAAiE,CAAC,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;AAEzC,YAAU,MAAM;AACd,gBAAY,QAAQ;AAAA,EAAA,GACnB,CAAC,QAAQ,CAAC;AAEP,QAAA,UAAU,WAAW,QAAQ,KAAK;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YAEV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,UAJC;AAAA,QAKP;AAAA,SACE,YAAY,sBACX,qBAAA,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,UAAA,YAEG,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAU,YAAY,CAAC;AAAA,gBACvB,SAAS;AAAA,cAAA;AAAA,YACX;AAAA,YACA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,GACF;AAAA,UAED;AAAA,QAAA,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IApCG;AAAA,EAsCP;AAEJ;"}

package/dist/components/DictionaryEditor/DictionaryEditor.cjs

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const ReactExports = require("react");
 const editorReact = require("@intlayer/editor-react");
-const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../index-cg9H6eBs.cjs");
-const components_DictionaryEditor_ValidDictionaryChangeButtons = require("./ValidDictionaryChangeButtons.cjs");
+const components_DictionaryFieldEditor_SaveForm_SaveForm = require("../DictionaryFieldEditor/SaveForm/SaveForm.cjs");
+const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../index-D02c1QrF.cjs");
 const DictionaryEditor = ({
   dictionary,
   mode,
@@ -14,7 +14,7 @@ const DictionaryEditor = ({
   const { editedContent, addEditedContent } = editorReact.useEditedContent();
   const { focusedContent, setFocusedContentKeyPath } = editorReact.useFocusDictionary();
   const focusedKeyPath = focusedContent?.keyPath;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between gap-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-between gap-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ ReactExports.createElement(
       components_DictionaryEditor_NodeWrapper_ArrayWrapper.NodeWrapper,
       {
@@ -32,7 +32,7 @@ const DictionaryEditor = ({
         onFocusKeyPath: setFocusedContentKeyPath
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(components_DictionaryEditor_ValidDictionaryChangeButtons.ValidDictionaryChangeButtons, { dictionary, mode })
+    /* @__PURE__ */ jsxRuntime.jsx(components_DictionaryFieldEditor_SaveForm_SaveForm.SaveForm, { dictionary, mode, className: "mb-4 flex-col" })
   ] });
 };
 exports.DictionaryEditor = DictionaryEditor;

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.cjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  mode: 'local' | 'remote';\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  mode,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex h-full flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent?.[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent?.[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <ValidDictionaryChangeButtons dictionary={dictionary} mode={mode} />\n    </div>\n  );\n};\n"],"names":["useEditedContent","useFocusDictionary","jsxs","jsx","createElement","NodeWrapper","ValidDictionaryChangeButtons"],"mappings":";;;;;;;;AAeO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,eAAe,iBAAiB,IAAIA,6BAAiB;AAC7D,QAAM,EAAE,gBAAgB,yBAAyB,IAAIC,+BAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAGrC,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAAC,+BAAC,OACC,EAAA,UAAAC,6BAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,gBAAgB,WAAW,GAAG,KAAK,YAAY;AAAA,QAClD;AAAA,QACA,eAAe,gBAAgB,WAAW,GAAG,GAAG;AAAA,QAChD;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACAF,2BAAAA,IAACG,yDAA6B,8BAAA,EAAA,YAAwB,KAAY,CAAA;AAAA,EAAA,GACpE;AAEJ;;"}
+{"version":3,"file":"DictionaryEditor.cjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { SaveForm } from '../DictionaryFieldEditor/SaveForm/SaveForm';\nimport { NodeWrapper } from './NodeWrapper';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  mode: ('local' | 'remote')[];\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  mode,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex flex-1 flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent?.[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent?.[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <SaveForm dictionary={dictionary} mode={mode} className=\"mb-4 flex-col\" />\n    </div>\n  );\n};\n"],"names":["useEditedContent","useFocusDictionary","jsxs","jsx","createElement","NodeWrapper","SaveForm"],"mappings":";;;;;;;;AAeO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,eAAe,iBAAiB,IAAIA,6BAAiB;AAC7D,QAAM,EAAE,gBAAgB,yBAAyB,IAAIC,+BAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAGrC,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAAC,+BAAC,OACC,EAAA,UAAAC,6BAAA;AAAA,MAACC,qDAAA;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,gBAAgB,WAAW,GAAG,KAAK,YAAY;AAAA,QAClD;AAAA,QACA,eAAe,gBAAgB,WAAW,GAAG,GAAG;AAAA,QAChD;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACCF,2BAAA,IAAAG,mDAAA,UAAA,EAAS,YAAwB,MAAY,WAAU,gBAAgB,CAAA;AAAA,EAAA,GAC1E;AAEJ;;"}

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

@@ -4,7 +4,7 @@ import { FC } from 'react';
 type DictionaryEditorProps = {
     dictionary: Dictionary;
     locale: Locales;
-    mode: 'local' | 'remote';
+    mode: ('local' | 'remote')[];
 };
 export declare const DictionaryEditor: FC<DictionaryEditorProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+BtD,CAAC"}
+{"version":3,"file":"DictionaryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,KAAK,qBAAqB,GAAG;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+BtD,CAAC"}

package/dist/components/DictionaryEditor/DictionaryEditor.mjs

@@ -2,8 +2,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { createElement } from "react";
 import { useEditedContent, useFocusDictionary } from "@intlayer/editor-react";
-import { N as NodeWrapper } from "../../index-BUe-qmA0.js";
-import { ValidDictionaryChangeButtons } from "./ValidDictionaryChangeButtons.mjs";
+import { SaveForm } from "../DictionaryFieldEditor/SaveForm/SaveForm.mjs";
+import { N as NodeWrapper } from "../../index-C57uA6Lk.js";
 const DictionaryEditor = ({
   dictionary,
   mode,
@@ -12,7 +12,7 @@ const DictionaryEditor = ({
   const { editedContent, addEditedContent } = useEditedContent();
   const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();
   const focusedKeyPath = focusedContent?.keyPath;
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col justify-between gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between gap-2", children: [
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ createElement(
       NodeWrapper,
       {
@@ -30,7 +30,7 @@ const DictionaryEditor = ({
         onFocusKeyPath: setFocusedContentKeyPath
       }
     ) }),
-    /* @__PURE__ */ jsx(ValidDictionaryChangeButtons, { dictionary, mode })
+    /* @__PURE__ */ jsx(SaveForm, { dictionary, mode, className: "mb-4 flex-col" })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"DictionaryEditor.mjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary, KeyPath } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { NodeWrapper } from './NodeWrapper';\nimport { ValidDictionaryChangeButtons } from './ValidDictionaryChangeButtons';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  mode: 'local' | 'remote';\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  mode,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex h-full flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent?.[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent?.[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <ValidDictionaryChangeButtons dictionary={dictionary} mode={mode} />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,eAAe,iBAAiB,IAAI,iBAAiB;AAC7D,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAGrC,SAAA,qBAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAA,oBAAC,OACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,gBAAgB,WAAW,GAAG,KAAK,YAAY;AAAA,QAClD;AAAA,QACA,eAAe,gBAAgB,WAAW,GAAG,GAAG;AAAA,QAChD;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACA,oBAAC,8BAA6B,EAAA,YAAwB,KAAY,CAAA;AAAA,EAAA,GACpE;AAEJ;"}
+{"version":3,"file":"DictionaryEditor.mjs","sources":["../../../src/components/DictionaryEditor/DictionaryEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport type { Dictionary } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { SaveForm } from '../DictionaryFieldEditor/SaveForm/SaveForm';\nimport { NodeWrapper } from './NodeWrapper';\n\ntype DictionaryEditorProps = {\n  dictionary: Dictionary;\n  locale: Locales;\n  mode: ('local' | 'remote')[];\n};\n\nexport const DictionaryEditor: FC<DictionaryEditorProps> = ({\n  dictionary,\n  mode,\n  ...props\n}) => {\n  const { editedContent, addEditedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n\n  return (\n    <div className=\"flex flex-1 flex-col justify-between gap-2\">\n      <div>\n        <NodeWrapper\n          {...props}\n          keyPath={[]}\n          key={JSON.stringify(\n            (editedContent?.[dictionary.key] ?? dictionary).content\n          )}\n          editedContent={editedContent?.[dictionary.key]?.content}\n          focusedKeyPath={focusedKeyPath}\n          section={dictionary.content}\n          onContentChange={(content) => {\n            addEditedContent(dictionary.key, content.newValue, content.keyPath);\n          }}\n          onFocusKeyPath={setFocusedContentKeyPath}\n        />\n      </div>\n      <SaveForm dictionary={dictionary} mode={mode} className=\"mb-4 flex-col\" />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAeO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,eAAe,iBAAiB,IAAI,iBAAiB;AAC7D,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AAExE,QAAM,iBAAiB,gBAAgB;AAGrC,SAAA,qBAAC,OAAI,EAAA,WAAU,8CACb,UAAA;AAAA,IAAA,oBAAC,OACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC;AAAA,QACV,KAAK,KAAK;AAAA,WACP,gBAAgB,WAAW,GAAG,KAAK,YAAY;AAAA,QAClD;AAAA,QACA,eAAe,gBAAgB,WAAW,GAAG,GAAG;AAAA,QAChD;AAAA,QACA,SAAS,WAAW;AAAA,QACpB,iBAAiB,CAAC,YAAY;AAC5B,2BAAiB,WAAW,KAAK,QAAQ,UAAU,QAAQ,OAAO;AAAA,QACpE;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,GAEpB;AAAA,IACC,oBAAA,UAAA,EAAS,YAAwB,MAAY,WAAU,gBAAgB,CAAA;AAAA,EAAA,GAC1E;AAEJ;"}

package/dist/components/DictionaryEditor/ItemLayout.cjs

@@ -16,10 +16,10 @@ const ItemLayout = ({
   {
     className: utils_cn.cn(
       "rounded-md p-2 transition",
-      "hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent",
-      level === 2 && "hover:bg-card/30 dark:hover:bg-card-dark/30",
+      "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent",
+      level === 2 && "hover:bg-card/30",
       level >= 3 && "",
-      isSelected === true && "bg-card/40 dark:bg-card-dark/40"
+      isSelected === true && "bg-card/40"
     ),
     ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.cjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","cn","Accordion","jsxs"],"mappings":";;;;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA;AAAA,MAACE,+BAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QACEC,2BAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,2BAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAH,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC,SAAA;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCD,2BAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,2BAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}
+{"version":3,"file":"ItemLayout.cjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","cn","Accordion","jsxs"],"mappings":";;;;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA;AAAA,MAACE,+BAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QACEC,2BAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,2BAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAH,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC,SAAA;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCD,2BAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,2BAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}

package/dist/components/DictionaryEditor/ItemLayout.mjs

@@ -14,10 +14,10 @@ const ItemLayout = ({
   {
     className: cn(
       "rounded-md p-2 transition",
-      "hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent",
-      level === 2 && "hover:bg-card/30 dark:hover:bg-card-dark/30",
+      "hover:bg-card/30 [&:has(.section:hover)]:bg-transparent",
+      level === 2 && "hover:bg-card/30",
       level >= 3 && "",
-      isSelected === true && "bg-card/40 dark:bg-card-dark/40"
+      isSelected === true && "bg-card/40"
     ),
     ...props,
     children: /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.mjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":[],"mappings":";;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QACE,qBAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACC,oBAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACC,oBAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}
+{"version":3,"file":"ItemLayout.mjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":[],"mappings":";;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QACE,qBAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACC,oBAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACC,oBAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}

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

@@ -3,6 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("@intlayer/core");
 require("../ItemLayout.cjs");
-const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../../index-cg9H6eBs.cjs");
+const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../../index-D02c1QrF.cjs");
 exports.ArrayWrapper = components_DictionaryEditor_NodeWrapper_ArrayWrapper.ArrayWrapper;
 //# sourceMappingURL=ArrayWrapper.cjs.map

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "@intlayer/core";
 import "../ItemLayout.mjs";
-import { A } from "../../../index-BUe-qmA0.js";
+import { A } from "../../../index-C57uA6Lk.js";
 export {
   A as ArrayWrapper
 };

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

@@ -3,6 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react");
 require("@intlayer/core");
-const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../../index-cg9H6eBs.cjs");
+const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../../index-D02c1QrF.cjs");
 exports.ConditionWrapper = components_DictionaryEditor_NodeWrapper_ArrayWrapper.ConditionWrapper;
 //# sourceMappingURL=ConditionWrapper.cjs.map

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "@intlayer/core";
-import { C } from "../../../index-BUe-qmA0.js";
+import { C } from "../../../index-C57uA6Lk.js";
 export {
   C as ConditionWrapper
 };

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

@@ -3,6 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react");
 require("@intlayer/core");
-const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../../index-cg9H6eBs.cjs");
+const components_DictionaryEditor_NodeWrapper_ArrayWrapper = require("../../../index-D02c1QrF.cjs");
 exports.EnumerationWrapper = components_DictionaryEditor_NodeWrapper_ArrayWrapper.EnumerationWrapper;
 //# sourceMappingURL=EnumerationWrapper.cjs.map

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "@intlayer/core";
-import { E } from "../../../index-BUe-qmA0.js";
+import { E } from "../../../index-C57uA6Lk.js";
 export {
   E as EnumerationWrapper
 };