@pdfme/ui 1.1.3 → 1.1.5

package/dist/types/{src/Designer.d.ts → Designer.d.ts}

@@ -1,5 +1,5 @@
 import { Template, DesignerProps } from '@pdfme/common';
-import { BaseUIClass } from './class.js';
+import { BaseUIClass } from './class';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;

package/dist/types/{src/Form.d.ts → Form.d.ts}

@@ -1,5 +1,5 @@
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
+import { PreviewUI } from './class';
 declare class Form extends PreviewUI {
     private onChangeInputCallback?;
     constructor(props: PreviewProps);

package/dist/types/{src/Viewer.d.ts → Viewer.d.ts}

@@ -1,5 +1,5 @@
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
+import { PreviewUI } from './class';
 declare class Viewer extends PreviewUI {
     constructor(props: PreviewProps);
     protected render(): void;

package/dist/types/{src/class.d.ts → class.d.ts}

@@ -8,7 +8,7 @@ export declare abstract class BaseUIClass {
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "require" | "cancel" | "field" | "fieldName" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
+    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;

package/dist/types/{src/components → components}/CtlBar/Pager.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     pageCursor: number;
     pageNum: number;

package/dist/types/{src/components → components}/CtlBar/Zoom.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     zoomLevel: number;
     setZoomLevel: (zoom: number) => void;

package/dist/types/{src/components → components}/CtlBar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare type Props = {
     size: Size;

package/dist/types/{src/components → components}/Designer/Main/Mask.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare const Mask: ({ width, height }: Size) => JSX.Element;
 export default Mask;

package/dist/types/{src/components → components}/Designer/Main/Selecto.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
 declare const _Selecto: ({ container, continueSelect, onDragStart, onSelect, }: {
     container: HTMLElement | null;

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/TextPropEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{src/components → components}/Designer/Sidebar/DetailView/index.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
 }) => JSX.Element;

package/dist/types/{src/components → components}/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const SelectableSortableContainer: (props: Pick<SidebarProps, 'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
 export default SelectableSortableContainer;

package/dist/types/{src/components → components}/Designer/Sidebar/ListView/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { SidebarProps } from '../index.js';
+import { SidebarProps } from '../index';
 declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId' | 'changeSchemas'>) => JSX.Element;
 export default ListView;

package/dist/types/{src/components → components}/Designer/Sidebar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SchemaForUI, Size } from '@pdfme/common';
 export declare type SidebarProps = {
     height: number;

package/dist/types/{src/components → components}/Designer/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DesignerReactProps, Template } from '@pdfme/common';
 declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, }: {
     options?: {

package/dist/types/{src/components → components}/Divider.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Divider: () => JSX.Element;
 export default Divider;

package/dist/types/{src/components → components}/Error.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare const Error: ({ size, error }: {
     size: Size;

package/dist/types/{src/components → components}/Preview.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PreviewReactProps } from '@pdfme/common';
 declare const Preview: ({ template, inputs, size, onChangeInput }: PreviewReactProps) => JSX.Element;
 export default Preview;

package/dist/types/{src/components → components}/Schemas/BarcodeSchema.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI.js';
+import { SchemaUIProps } from './SchemaUI';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         rotate?: number | undefined;

package/dist/types/{src/components → components}/Schemas/ImageSchema.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI.js';
+import { SchemaUIProps } from './SchemaUI';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         rotate?: number | undefined;

package/dist/types/{src/components → components}/Schemas/SchemaUI.d.ts

@@ -10,5 +10,5 @@ export interface SchemaUIProps {
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     border: string;
     onChangeHoveringSchemaId?: ((id: string | null) => void) | undefined;
-} & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+} & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 export default _default;

package/dist/types/{src/components → components}/Schemas/TextSchema.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SchemaUIProps } from './SchemaUI.js';
+import { SchemaUIProps } from './SchemaUI';
 declare const _default: React.ForwardRefExoticComponent<SchemaUIProps & {
     schema: {
         backgroundColor?: string | undefined;

package/dist/types/{src/components → components}/Spinner.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Spinner: () => JSX.Element;
 export default Spinner;

package/dist/types/{src/components → components}/UnitPager.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@pdfme/common';
 declare type Props = {
     size: Size;

package/dist/types/{src/contexts.d.ts → contexts.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const I18nContext: import("react").Context<(key: "type" | "require" | "cancel" | "field" | "fieldName" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;

package/dist/types/{src/index.d.ts → index.d.ts}

@@ -1,6 +1,6 @@
-import Designer from './Designer.js';
-import Form from './Form.js';
-import Viewer from './Viewer.js';
+import Designer from './Designer';
+import Form from './Form';
+import Viewer from './Viewer';
 export { Designer, Viewer, Form };
 export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, } from '@pdfme/common';
 export { BLANK_PDF, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, } from '@pdfme/common';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -21,23 +21,15 @@
   "bugs": {
     "url": "https://github.com/pdfme/pdfme/issues"
   },
-  "main": "dist/cjs/src/index.js",
-  "module": "dist/esm/src/index.js",
-  "types": "dist/types/src/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/esm/src/index.js",
-      "require": "./dist/cjs/src/index.js"
-    }
-  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "engines": {
     "node": ">=14"
   },
   "scripts": {
-    "develop": "tsc -w",
-    "build": "npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
+    "develop": "webpack --watch --mode development",
+    "build": "NODE_ENV=production webpack --mode production",
     "clean": "rimraf dist",
     "lint": "tsc --noEmit",
     "test": "jest",
@@ -53,23 +45,24 @@
     "@scena/react-guides": "^0.16.0",
     "hotkeys-js": "^3.8.7",
     "pdfjs-dist": "^2.12.313",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-moveable": "^0.30.3",
-    "react-selecto": "^1.12.0",
-    "worker-loader": "^3.0.8"
+    "react-selecto": "^1.12.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/css-font-loading-module": "^0.0.7",
     "@types/pdfjs-dist": "^2.7.4",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest-canvas-mock": "^2.3.1",
-    "process": "^0.11.10"
+    "process": "^0.11.10",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "worker-loader": "^3.0.8"
   },
   "jest": {
     "setupFiles": [
@@ -90,7 +83,7 @@
     },
     "globals": {
       "ts-jest": {
-        "tsconfig": "tsconfig.esm.json"
+        "tsconfig": "tsconfig.json"
       }
     },
     "testMatch": [

package/src/Designer.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
-import { BaseUIClass } from './class.js';
-import { DESTROYED_ERR_MSG } from './constants.js';
-import { I18nContext, FontContext } from './contexts.js';
-import DesignerComponent from './components/Designer/index.js';
-import { cloneDeep } from './helper.js';
+import { BaseUIClass } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import DesignerComponent from './components/Designer/index';
+import { cloneDeep } from './helper';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
@@ -45,8 +45,7 @@ class Designer extends BaseUIClass {
 
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    const root = createRoot(this.domContainer);
-    root.render(
+    ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
           <DesignerComponent
@@ -66,7 +65,8 @@ class Designer extends BaseUIClass {
             size={this.size}
           />
         </FontContext.Provider>
-      </I18nContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
     );
   }
 }

package/src/Form.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
-import { DESTROYED_ERR_MSG } from './constants.js';
-import { I18nContext, FontContext } from './contexts.js';
-import Preview from './components/Preview.js';
+import { PreviewUI } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import Preview from './components/Preview';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; key: string }) => void;
@@ -20,8 +20,7 @@ class Form extends PreviewUI {
 
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    const root = createRoot(this.domContainer);
-    root.render(
+    ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
           <Preview
@@ -38,7 +37,8 @@ class Form extends PreviewUI {
             }}
           />
         </FontContext.Provider>
-      </I18nContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
     );
   }
 }

package/src/Viewer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class.js';
-import { DESTROYED_ERR_MSG } from './constants.js';
-import { I18nContext, FontContext } from './contexts.js';
-import Preview from './components/Preview.js';
+import { PreviewUI } from './class';
+import { DESTROYED_ERR_MSG } from './constants';
+import { I18nContext, FontContext } from './contexts';
+import Preview from './components/Preview';
 
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {
@@ -14,13 +14,13 @@ class Viewer extends PreviewUI {
 
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    const root = createRoot(this.domContainer);
-    root.render(
+    ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
           <Preview template={this.template} size={this.size} inputs={this.inputs} />
         </FontContext.Provider>
-      </I18nContext.Provider>
+      </I18nContext.Provider>,
+      this.domContainer
     );
   }
 }

package/src/class.ts

@@ -1,7 +1,7 @@
-import { createRoot } from 'react-dom/client';
-import { curriedI18n } from './i18n.js';
-import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
-import { debounce, flatten, cloneDeep } from './helper.js';
+import ReactDOM from 'react-dom';
+import { curriedI18n } from './i18n';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
+import { debounce, flatten, cloneDeep } from './helper';
 import {
   Template,
   Size,
@@ -134,8 +134,7 @@ export abstract class BaseUIClass {
 
   public destroy() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
-    const root = createRoot(this.domContainer);
-    root.unmount();
+    ReactDOM.unmountComponentAtNode(this.domContainer);
 
     this.resizeObserver.unobserve(this.domContainer);
     this.domContainer = null;

package/src/components/CtlBar/Pager.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { I18nContext } from '../../contexts.js';
+import { I18nContext } from '../../contexts';
 
 const btnStyle: React.CSSProperties = {
   cursor: 'pointer',

package/src/components/CtlBar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Pager from './Pager.js';
-import Zoom from './Zoom.js';
+import Pager from './Pager';
+import Zoom from './Zoom';
 import { Size } from '@pdfme/common';
 
 type Props = {

package/src/components/Designer/Main/Guides.tsx

@@ -1,7 +1,7 @@
 import React, { Ref } from 'react';
 import Guides from '@scena/react-guides';
 import { Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants.js';
+import { ZOOM, RULER_HEIGHT } from '../../../constants';
 
 const _Guides = ({
   paperSize,

package/src/components/Designer/Main/Mask.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Size } from '@pdfme/common';
-import { RULER_HEIGHT } from '../../../constants.js';
+import { RULER_HEIGHT } from '../../../constants';
 
 const Mask = ({ width, height }: Size) => (
   <div

package/src/components/Designer/Main/Selecto.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
-import { SELECTABLE_CLASSNAME } from '../../../constants.js';
+import { SELECTABLE_CLASSNAME } from '../../../constants';
 
 const _Selecto = ({
   container,

package/src/components/Designer/Main/index.tsx

@@ -9,15 +9,15 @@ import React, {
 } from 'react';
 import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants.js';
-import { usePrevious } from '../../../hooks.js';
-import { uuid, round, flatten } from '../../../helper.js';
-import Paper from '../../Paper.js';
-import SchemaUI from '../../Schemas/SchemaUI.js';
-import Selecto from './Selecto.js';
-import Moveable from './Moveable.js';
-import Guides from './Guides.js';
-import Mask from './Mask.js';
+import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { usePrevious } from '../../../hooks';
+import { uuid, round, flatten } from '../../../helper';
+import Paper from '../../Paper';
+import SchemaUI from '../../Schemas/SchemaUI';
+import Selecto from './Selecto';
+import Moveable from './Moveable';
+import Guides from './Guides';
+import Mask from './Mask';
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));

package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { readFiles } from '../../../../helper.js';
-import { I18nContext } from '../../../../contexts.js';
+import { readFiles } from '../../../../helper';
+import { I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 

package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { round } from '../../../../helper.js';
-import { SidebarProps } from '../index.js';
+import { round } from '../../../../helper';
+import { SidebarProps } from '../index';
 
 const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -7,7 +7,7 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
 } from '@pdfme/common';
-import { FontContext } from '../../../../contexts.js';
+import { FontContext } from '../../../../contexts';
 import { SidebarProps } from '..';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 

package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useRef, useCallback } from 'react';
 import { schemaTypes, SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
-import { I18nContext } from '../../../../contexts.js';
+import { SidebarProps } from '../index';
+import { I18nContext } from '../../../../contexts';
 
 const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
   <span

package/src/components/Designer/Sidebar/DetailView/index.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts.js';
-import Divider from '../../../Divider.js';
-import { SidebarProps } from '../index.js';
-import TextPropEditor from './TextPropEditor.js';
-import ExampleInputEditor from './ExampleInputEditor.js';
-import PositionAndSizeEditor from './PositionAndSizeEditor.js';
-import TypeAndKeyEditor from './TypeAndKeyEditor.js';
+import { I18nContext } from '../../../../contexts';
+import Divider from '../../../Divider';
+import { SidebarProps } from '../index';
+import TextPropEditor from './TextPropEditor';
+import ExampleInputEditor from './ExampleInputEditor';
+import PositionAndSizeEditor from './PositionAndSizeEditor';
+import TypeAndKeyEditor from './TypeAndKeyEditor';
 
 const DetailView = (
   props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {

package/src/components/Designer/Sidebar/ListView/Item.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
-import { I18nContext } from '../../../../contexts.js';
+import { I18nContext } from '../../../../contexts';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 interface Props {