@pdfme/ui 5.3.8-dev.29 → 5.3.8-dev.36

package/dist/types/Designer.d.ts

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

package/dist/types/Form.d.ts

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

package/dist/types/Viewer.d.ts

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

package/dist/types/components/Designer/Canvas/Guides.d.ts

@@ -1,9 +1,15 @@
 import React, { Ref } from 'react';
-import Guides from '@scena/react-guides';
 import { Size } from '@pdfme/common';
+interface GuidesInterface {
+    getGuides(): number[];
+    scroll(pos: number): void;
+    scrollGuides(pos: number): void;
+    loadGuides(guides: number[]): void;
+    resize(): void;
+}
 declare const _Guides: ({ paperSize, horizontalRef, verticalRef, }: {
     paperSize: Size;
-    horizontalRef: Ref<Guides> | undefined;
-    verticalRef: Ref<Guides> | undefined;
+    horizontalRef: Ref<GuidesInterface> | undefined;
+    verticalRef: Ref<GuidesInterface> | undefined;
 }) => React.JSX.Element;
 export default _Guides;

package/dist/types/components/Designer/Canvas/Moveable.d.ts

@@ -1,5 +1,52 @@
 import React from 'react';
-import { OnDrag, OnResize, OnRotate, OnRotateEnd, OnClick } from 'react-moveable';
+interface OnDrag {
+    target: HTMLElement | SVGElement;
+    left: number;
+    top: number;
+    beforeDelta: any;
+    beforeDist: any;
+    beforeTranslate: any;
+    delta: any;
+    dist: any;
+    transform: any;
+    translate: any;
+}
+interface OnResize {
+    target: HTMLElement | SVGElement;
+    width: number;
+    height: number;
+    direction: string;
+    offsetWidth: number;
+    offsetHeight: number;
+    dist: any;
+    delta: any;
+    transform: any;
+    translate: any;
+}
+interface OnRotate {
+    target: HTMLElement | SVGElement;
+    rotate: number;
+    beforeDist: any;
+    beforeDelta: any;
+    beforeRotate: any;
+    dist: any;
+    delta: any;
+    transform: any;
+}
+interface OnRotateEnd {
+    target: HTMLElement | SVGElement;
+}
+interface OnClick {
+    inputEvent: MouseEvent;
+    inputTarget: any;
+    isTarget: boolean;
+    containsTarget: boolean;
+    isDouble: boolean;
+    datas: any;
+    targets: any[];
+    clientX: number;
+    clientY: number;
+}
 type Props = {
     target: HTMLElement[];
     bounds: {

package/dist/types/components/Designer/Canvas/Selecto.d.ts

@@ -1,10 +1,21 @@
 import React from 'react';
-import { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
+interface OnDragStart {
+    inputEvent: MouseEvent;
+    stop: () => void;
+    isTrusted: boolean;
+}
+interface OnSelect {
+    selected: Element[];
+    added: Element[];
+    removed: Element[];
+    inputEvent: MouseEvent;
+    rect: DOMRect;
+}
 type Props = {
     container: HTMLElement | null;
     continueSelect: boolean;
-    onDragStart: (e: _OnDragStart) => void;
-    onSelect: (e: _OnSelect) => void;
+    onDragStart: (e: OnDragStart) => void;
+    onSelect: (e: OnSelect) => void;
 };
 declare const _Selecto: (props: Props) => React.JSX.Element;
 export default _Selecto;

package/dist/types/components/Designer/RightSidebar/DetailView/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SchemaForUI } from '@pdfme/common';
-import type { SidebarProps } from '../../../../types';
+import type { SidebarProps } from '../../../../types.js';
 type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
 };

package/dist/types/components/Designer/RightSidebar/ListView/SelectableSortableContainer.d.ts

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

package/dist/types/components/Designer/RightSidebar/ListView/index.d.ts

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

package/dist/types/components/Designer/RightSidebar/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { SidebarProps } from '../../../types';
+import type { SidebarProps } from '../../../types.js';
 declare const Sidebar: (props: SidebarProps) => React.JSX.Element;
 export default Sidebar;

package/dist/types/contexts.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+/// <reference types="react" resolution-mode="require"/>
 import { Plugins, UIOptions } from '@pdfme/common';
 export declare const I18nContext: import("react").Context<(key: "cancel" | "close" | "set" | "clear" | "field" | "fieldName" | "align" | "width" | "opacity" | "height" | "rotate" | "edit" | "required" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "type" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "validation.dateTimeFormat" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.showHead" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle" | "schemas.date.format" | "schemas.date.locale" | "schemas.select.options" | "schemas.select.optionPlaceholder" | "schemas.radioGroup.groupName", dict?: {
     cancel: string;

package/package.json

@@ -1,6 +1,7 @@
 {
+  "type": "module",
   "name": "@pdfme/ui",
-  "version": "5.3.8-dev.29",
+  "version": "5.3.8-dev.36",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -39,7 +40,7 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^10.0.0",
     "@pdfme/converter": "*",
-    "@scena/react-guides": "^0.16.0",
+    "@scena/react-guides": "^0.28.2",
     "antd": "^5.24.2",
     "form-render": "^2.2.16",
     "hotkeys-js": "^3.8.7",
@@ -66,7 +67,7 @@
     "process": "^0.11.10",
     "vite": "^5.0.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "@pdfme/common": "latest",

package/src/Designer.tsx

@@ -8,10 +8,10 @@ import {
   checkTemplate,
   PDFME_VERSION,
 } from '@pdfme/common';
-import { BaseUIClass } from './class';
+import { BaseUIClass } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
-import DesignerComponent from './components/Designer/index';
-import AppContextProvider from './components/AppContextProvider';
+import DesignerComponent from './components/Designer/index.js';
+import AppContextProvider from './components/AppContextProvider.js';
 
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;

package/src/Form.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
+import { PreviewUI } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
-import AppContextProvider from './components/AppContextProvider';
-import Preview from './components/Preview';
+import AppContextProvider from './components/AppContextProvider.js';
+import Preview from './components/Preview.js';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; name: string }) => void;

package/src/Viewer.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
-import { PreviewUI } from './class';
+import { PreviewUI } from './class.js';
 import { DESTROYED_ERR_MSG } from './constants.js';
-import Preview from './components/Preview';
-import AppContextProvider from './components/AppContextProvider';
+import Preview from './components/Preview.js';
+import AppContextProvider from './components/AppContextProvider.js';
 
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {

package/src/components/AppContextProvider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ConfigProvider as ThemeConfigProvider } from 'antd';
-import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from '../contexts';
-import { i18n, getDict } from '../i18n';
-import { defaultTheme } from '../theme';
+import { I18nContext, FontContext, PluginsRegistry, OptionsContext } from '../contexts.js';
+import { i18n, getDict } from '../i18n.js';
+import { defaultTheme } from '../theme.js';
 import type { Dict, Plugins, Font, Lang, UIOptions } from '@pdfme/common';
 
 type Props = {

package/src/components/CtlBar.tsx

@@ -6,8 +6,8 @@ import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
 
 import type { MenuProps } from 'antd';
 import { theme, Typography, Button, Dropdown } from 'antd';
-import { I18nContext } from '../contexts';
-import { getMaxZoom } from "../helper";
+import { I18nContext } from '../contexts.js';
+import { getMaxZoom } from "../helper.js";
 
 const { Text } = Typography;
 

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

@@ -1,7 +1,7 @@
 import React, { Ref } from 'react';
-import Guides from '@scena/react-guides';
+import GuidesComponent from '@scena/react-guides';
 import { ZOOM, Size } from '@pdfme/common';
-import { RULER_HEIGHT } from '../../../constants';
+import { RULER_HEIGHT } from '../../../constants.js';
 
 const guideStyle = (
   top: number,
@@ -17,31 +17,40 @@ const guideStyle = (
   background: '#333333',
 });
 
+// Define the interface for the Guides component
+interface GuidesInterface {
+  getGuides(): number[];
+  scroll(pos: number): void;
+  scrollGuides(pos: number): void;
+  loadGuides(guides: number[]): void;
+  resize(): void;
+}
+
 const _Guides = ({
   paperSize,
   horizontalRef,
   verticalRef,
 }: {
   paperSize: Size;
-  horizontalRef: Ref<Guides> | undefined;
-  verticalRef: Ref<Guides> | undefined;
+  horizontalRef: Ref<GuidesInterface> | undefined;
+  verticalRef: Ref<GuidesInterface> | undefined;
 }) => (
   <>
     <div
       className="ruler-container"
       style={guideStyle(-RULER_HEIGHT, -RULER_HEIGHT, RULER_HEIGHT, RULER_HEIGHT)}
     />
-    <Guides
+    <GuidesComponent
       zoom={ZOOM}
       style={guideStyle(-RULER_HEIGHT, 0, RULER_HEIGHT, paperSize.width)}
       type="horizontal"
-      ref={horizontalRef}
+      ref={horizontalRef as any}
     />
-    <Guides
+    <GuidesComponent
       zoom={ZOOM}
       style={guideStyle(0, -RULER_HEIGHT, paperSize.height, RULER_HEIGHT)}
       type="vertical"
-      ref={verticalRef}
+      ref={verticalRef as any}
     />
   </>
 );

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

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

package/src/components/Designer/Canvas/Moveable.tsx

@@ -1,7 +1,65 @@
 import React, { useEffect, forwardRef, Ref } from 'react';
-import Moveable, { OnDrag, OnResize, OnRotate, OnRotateEnd, OnClick } from 'react-moveable';
+import MoveableComponent from 'react-moveable';
 import { theme } from 'antd';
 
+// Define the types locally since they're not exported properly
+interface OnDrag {
+  target: HTMLElement | SVGElement;
+  left: number;
+  top: number;
+  // Add additional properties that might be used in the original library
+  beforeDelta: any;
+  beforeDist: any;
+  beforeTranslate: any;
+  delta: any;
+  dist: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnResize {
+  target: HTMLElement | SVGElement;
+  width: number;
+  height: number;
+  direction: string;
+  // Add additional properties that might be used in the original library
+  offsetWidth: number;
+  offsetHeight: number;
+  dist: any;
+  delta: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnRotate {
+  target: HTMLElement | SVGElement;
+  rotate: number;
+  // Add additional properties that might be used in the original library
+  beforeDist: any;
+  beforeDelta: any;
+  beforeRotate: any;
+  dist: any;
+  delta: any;
+  transform: any;
+}
+
+interface OnRotateEnd {
+  target: HTMLElement | SVGElement;
+}
+
+interface OnClick {
+  inputEvent: MouseEvent;
+  // Add additional properties that might be used in the original library
+  inputTarget: any;
+  isTarget: boolean;
+  containsTarget: boolean;
+  isDouble: boolean;
+  datas: any;
+  targets: any[];
+  clientX: number;
+  clientY: number;
+}
+
 type Props = {
   target: HTMLElement[];
   bounds: { left: number; top: number; bottom: number; right: number };
@@ -39,7 +97,8 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
   }, [props.target]);
 
   return (
-    <Moveable
+    // @ts-ignore
+    <MoveableComponent
       style={{ zIndex: 1 }}
       className={className}
       rootContainer={document ? document.body : undefined}
@@ -59,18 +118,18 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
       keepRatio={props.keepRatio}
       onRotate={props.onRotate}
       onRotateEnd={props.onRotateEnd}
-      onRotateGroup={({ events }) => {
+      onRotateGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onRotate);
       }}
       onRotateGroupEnd={props.onRotateGroupEnd}
       onDrag={props.onDrag}
-      onDragGroup={({ events }) => {
+      onDragGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onDrag);
       }}
       onDragEnd={props.onDragEnd}
       onDragGroupEnd={props.onDragGroupEnd}
       onResize={props.onResize}
-      onResizeGroup={({ events }) => {
+      onResizeGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onResize);
       }}
       onResizeEnd={props.onResizeEnd}

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

@@ -1,13 +1,28 @@
 import React, { useEffect } from 'react';
-import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
-import { SELECTABLE_CLASSNAME } from '../../../constants';
+import SelectoComponent from 'react-selecto';
+import { SELECTABLE_CLASSNAME } from '../../../constants.js';
 import { theme } from 'antd';
 
+// Define the types locally to match what's expected in Canvas/index.tsx
+interface OnDragStart {
+  inputEvent: MouseEvent;
+  stop: () => void;
+  isTrusted: boolean;
+}
+
+interface OnSelect {
+  selected: Element[];
+  added: Element[];
+  removed: Element[];
+  inputEvent: MouseEvent;
+  rect: DOMRect;
+}
+
 type Props = {
   container: HTMLElement | null;
   continueSelect: boolean;
-  onDragStart: (e: _OnDragStart) => void;
-  onSelect: (e: _OnSelect) => void;
+  onDragStart: (e: OnDragStart) => void;
+  onSelect: (e: OnSelect) => void;
 };
 
 const className = 'pdfme-selecto';
@@ -24,7 +39,7 @@ const _Selecto = (props: Props) => {
   }, [props.container]);
 
   return (
-    <Selecto
+    <SelectoComponent
       className={className}
       selectFromInside={false}
       selectByClick
@@ -34,7 +49,7 @@ const _Selecto = (props: Props) => {
       container={props.container}
       continueSelect={props.continueSelect}
       onDragStart={props.onDragStart}
-      onSelect={props.onSelect}
+      onSelect={(e: any) => props.onSelect(e as OnSelect)}
     />
   );
 };

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

@@ -10,22 +10,74 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
-import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
 import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf, replacePlaceholders } from '@pdfme/common';
-import { PluginsRegistry } from '../../../contexts';
+import { PluginsRegistry } from '../../../contexts.js';
 import { X } from 'lucide-react';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants';
-import { usePrevious } from '../../../hooks';
-import { uuid, round, flatten } from '../../../helper';
-import Paper from '../../Paper';
-import Renderer from '../../Renderer';
-import Selecto from './Selecto';
-import Moveable from './Moveable';
-import Guides from './Guides';
-import Mask from './Mask';
-import Padding from './Padding';
-import StaticSchema from '../../StaticSchema';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
+import { usePrevious } from '../../../hooks.js';
+import { uuid, round, flatten } from '../../../helper.js';
+import Paper from '../../Paper.js';
+import Renderer from '../../Renderer.js';
+import Selecto from './Selecto.js';
+import Moveable from './Moveable.js';
+import Guides from './Guides.js';
+import Mask from './Mask.js';
+import Padding from './Padding.js';
+import StaticSchema from '../../StaticSchema.js';
+
+// Define the interfaces locally since they're not exported properly
+interface OnDrag {
+  target: HTMLElement | SVGElement;
+  left: number;
+  top: number;
+  // Add additional properties that might be used in the original library
+  beforeDelta: any;
+  beforeDist: any;
+  beforeTranslate: any;
+  delta: any;
+  dist: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnResize {
+  target: HTMLElement | SVGElement;
+  width: number;
+  height: number;
+  direction: string;
+  // Add additional properties that might be used in the original library
+  offsetWidth: number;
+  offsetHeight: number;
+  dist: any;
+  delta: any;
+  transform: any;
+  translate: any;
+}
 
+interface OnRotate {
+  target: HTMLElement | SVGElement;
+  rotate: number;
+  // Add additional properties that might be used in the original library
+  beforeDist: any;
+  beforeDelta: any;
+  beforeRotate: any;
+  dist: any;
+  delta: any;
+  transform: any;
+}
+
+interface OnClick {
+  inputEvent: MouseEvent;
+  // Add additional properties that might be used in the original library
+  inputTarget: any;
+  isTarget: boolean;
+  containsTarget: boolean;
+  isDouble: boolean;
+  datas: any;
+  targets: any[];
+  clientX: number;
+  clientY: number;
+}
 
 const mm2px = (mm: number) => mm * 3.7795275591;
 
@@ -357,7 +409,9 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (paperRefs.current[pageCursor] === inputEvent.target) {
             onEdit([]);
           }
-          if (inputEvent.target?.id === DELETE_BTN_ID) {
+          // Check if the target is an HTMLElement and has an id property
+          const targetElement = inputEvent.target as HTMLElement;
+          if (targetElement && targetElement.id === DELETE_BTN_ID) {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}

package/src/components/Designer/LeftSidebar.tsx

@@ -7,10 +7,10 @@ import {
 import { theme, Button } from 'antd';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from "@dnd-kit/utilities";
-import Renderer from '../Renderer';
-import { LEFT_SIDEBAR_WIDTH } from '../../constants';
-import { PluginsRegistry } from '../../contexts';
-import PluginIcon from "./PluginIcon";
+import Renderer from '../Renderer.js';
+import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
+import { PluginsRegistry } from '../../contexts.js';
+import PluginIcon from "./PluginIcon.js";
 
 
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {

package/src/components/Designer/PluginIcon.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Plugin } from "@pdfme/common";
-import { OptionsContext } from '../../contexts';
+import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
 
 

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -11,7 +11,7 @@ import {
   AlignVerticalSpaceAround,
   AlignHorizontalSpaceAround,
 } from 'lucide-react'
-import { round } from '../../../../helper';
+import { round } from '../../../../helper.js';
 
 const AlignWidget = (props: PropPanelWidgetProps) => {
   const { activeElements, changeSchemas, schemas, pageSize, schema } = props;

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

@@ -1,15 +1,18 @@
-import FormRender, { useForm } from 'form-render';
+import { useForm } from 'form-render';
 import React, { useRef, useContext, useState, useEffect } from 'react';
 import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
-import type { SidebarProps } from '../../../../types';
+import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
-import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts';
-import { getSidebarContentHeight, debounce } from '../../../../helper';
+import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
+import { getSidebarContentHeight, debounce } from '../../../../helper.js';
 import { theme, Typography, Button, Divider } from 'antd';
-import AlignWidget from './AlignWidget';
-import WidgetRenderer from './WidgetRenderer';
-import ButtonGroupWidget from './ButtonGroupWidget';
-import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface";
+import AlignWidget from './AlignWidget.js';
+import WidgetRenderer from './WidgetRenderer.js';
+import ButtonGroupWidget from './ButtonGroupWidget.js';
+import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interface.js";
+
+// Import FormRender as a default import
+import FormRenderComponent from 'form-render';
 
 const { Text } = Typography;
 
@@ -272,7 +275,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           overflowX: 'hidden',
         }}
       >
-        <FormRender
+        {/* @ts-ignore */}
+        <FormRenderComponent
           form={form}
           schema={propPanelSchema}
           widgets={widgets}

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
-import { I18nContext } from '../../../../contexts';
+import { I18nContext } from '../../../../contexts.js';
 import { GripVertical, CircleAlert, Lock } from 'lucide-react'
 import { Button, Typography } from 'antd';