@pdfme/ui 1.0.18 → 1.1.0

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 { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
-import Preview from './components/Preview';
+import { PreviewUI } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import Preview from './components/Preview.js';
 
 class Form extends PreviewUI {
   private onChangeInputCallback?: (arg: { index: number; value: string; key: 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 { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
-import Preview from './components/Preview';
+import { PreviewUI } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import Preview from './components/Preview.js';
 
 class Viewer extends PreviewUI {
   constructor(props: PreviewProps) {

package/src/class.ts

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
-import { curriedI18n } from './i18n';
-import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants';
-import { debounce, flatten, cloneDeep } from './helper';
+import { curriedI18n } from './i18n.js';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
+import { debounce, flatten, cloneDeep } from './helper.js';
 import {
   Template,
   Size,

package/src/components/CtlBar/Pager.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
-import left from '../../assets/icons/left.svg';
-import right from '../../assets/icons/right.svg';
-import { I18nContext } from '../../contexts';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { I18nContext } from '../../contexts.js';
 
 const btnStyle: React.CSSProperties = {
   cursor: 'pointer',
@@ -31,7 +30,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
         disabled={pageCursor <= 0}
         onClick={() => setPageCursor(pageCursor - 1)}
       >
-        <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
+        <ChevronLeftIcon width={20} height={20} color={'#fff'} />
       </button>
       <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 45, textAlign: 'center' }}>
         {pageCursor + 1}/{pageNum}
@@ -45,7 +44,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
         disabled={pageCursor + 1 >= pageNum}
         onClick={() => setPageCursor(pageCursor + 1)}
       >
-        <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
+        <ChevronRightIcon width={20} height={20} color={'#fff'} />
       </button>
     </div>
   );

package/src/components/CtlBar/Zoom.tsx

@@ -1,7 +1,5 @@
-import React, { useContext } from 'react';
-import { I18nContext } from '../../contexts';
-import add from '../../assets/icons/add.svg';
-import remove from '../../assets/icons/remove.svg';
+import React from 'react';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 
 const btnStyle: React.CSSProperties = {
   cursor: 'pointer',
@@ -21,7 +19,6 @@ type Props = {
 };
 
 const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
-  const i18n = useContext(I18nContext);
   const nextZoomOut = zoomLevel - zoomStep;
   const nextZoomIn = zoomLevel + zoomStep;
 
@@ -36,7 +33,7 @@ const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
         disabled={minZoom >= nextZoomOut}
         onClick={() => setZoomLevel(nextZoomOut)}
       >
-        <img src={remove} alt={i18n('zoomOut')} style={{ width: 20 }} />
+        <MinusIcon width={20} height={20} color={'#fff'} />
       </button>
       <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 50, textAlign: 'center' }}>
         {Math.round(zoomLevel * 100)}%
@@ -50,7 +47,7 @@ const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
         disabled={maxZoom < nextZoomIn}
         onClick={() => setZoomLevel(nextZoomIn)}
       >
-        <img src={add} alt={i18n('zoomIn')} style={{ width: 20 }} />
+        <PlusIcon width={20} height={20} color={'#fff'} />
       </button>
     </div>
   );

package/src/components/CtlBar/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Pager from './Pager';
-import Zoom from './Zoom';
+import Pager from './Pager.js';
+import Zoom from './Zoom.js';
 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';
+import { ZOOM, RULER_HEIGHT } from '../../../constants.js';
 
 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';
+import { RULER_HEIGHT } from '../../../constants.js';
 
 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';
+import { SELECTABLE_CLASSNAME } from '../../../constants.js';
 
 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';
-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';
+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';
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));

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

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { readFiles } from '../../../../helper';
-import { I18nContext } from '../../../../contexts';
+import { readFiles } from '../../../../helper.js';
+import { I18nContext } from '../../../../contexts.js';
 import { SidebarProps } from '..';
-import closeIcon from '../../../../assets/icons/close.svg';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const ExampleInputEditor = (
   props: Pick<SidebarProps, 'changeSchemas'> & { activeSchema: SchemaForUI }
@@ -39,7 +39,7 @@ const ExampleInputEditor = (
                   changeSchemas([{ key: 'data', value: '', schemaId: activeSchema.id }])
                 }
               >
-                <img src={closeIcon} alt="Close icon" width={10} />
+                <XMarkIcon width={10} height={10} />
               </button>
               <img style={{ maxHeight: 180 }} src={activeSchema.data} alt="Input Example" />
             </div>

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

@@ -1,15 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { round } from '../../../../helper';
-import { SidebarProps } from '..';
-import alignVerticalTop from '../../../../assets/icons/align-vertical-top.svg';
-import alignVerticalMiddle from '../../../../assets/icons/align-vertical-middle.svg';
-import alignVerticalBottom from '../../../../assets/icons/align-vertical-bottom.svg';
-import alignHorizontalRight from '../../../../assets/icons/align-horizontal-right.svg';
-import alignHorizontalLeft from '../../../../assets/icons/align-horizontal-left.svg';
-import alignHorizontalCenter from '../../../../assets/icons/align-horizontal-center.svg';
-import verticalDistribute from '../../../../assets/icons/vertical-distribute.svg';
-import horizontalDistribute from '../../../../assets/icons/horizontal-distribute.svg';
+import { round } from '../../../../helper.js';
+import { SidebarProps } from '../index.js';
 
 const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
@@ -30,6 +22,16 @@ const buttonStyle: CSSProperties = {
   cursor: 'pointer',
 };
 
+const svgBaseProp = {
+  style: { width: '100%', height: '100%' },
+  xmlns: 'http://www.w3.org/2000/svg',
+  enableBackground: 'new 0 0 24 24',
+  height: '24px',
+  viewBox: '0 0 24 24',
+  width: '24px',
+  fill: '#000000',
+};
+
 const PositionAndSizeEditor = (
   props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
@@ -99,14 +101,86 @@ const PositionAndSizeEditor = (
   };
 
   const layoutBtns: { id: string; icon: any; action: () => void }[] = [
-    { id: 'left', icon: alignHorizontalLeft, action: () => align('left') },
-    { id: 'center', icon: alignHorizontalCenter, action: () => align('center') },
-    { id: 'right', icon: alignHorizontalRight, action: () => align('right') },
-    { id: 'top', icon: alignVerticalTop, action: () => align('top') },
-    { id: 'middle', icon: alignVerticalMiddle, action: () => align('middle') },
-    { id: 'bottom', icon: alignVerticalBottom, action: () => align('bottom') },
-    { id: 'vertical', icon: verticalDistribute, action: () => distribute('vertical') },
-    { id: 'horizontal', icon: horizontalDistribute, action: () => distribute('horizontal') },
+    {
+      id: 'left',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z" />
+        </svg>
+      ),
+      action: () => align('left'),
+    },
+    {
+      id: 'center',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <polygon points="11,2 13,2 13,7 21,7 21,10 13,10 13,14 18,14 18,17 13,17 13,22 11,22 11,17 6,17 6,14 11,14 11,10 3,10 3,7 11,7" />
+        </svg>
+      ),
+      action: () => align('center'),
+    },
+    {
+      id: 'right',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z" />
+        </svg>
+      ),
+      action: () => align('right'),
+    },
+    {
+      id: 'top',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z" />
+        </svg>
+      ),
+      action: () => align('top'),
+    },
+    {
+      id: 'middle',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <polygon points="22,11 17,11 17,6 14,6 14,11 10,11 10,3 7,3 7,11 1.84,11 1.84,13 7,13 7,21 10,21 10,13 14,13 14,18 17,18 17,13 22,13" />
+        </svg>
+      ),
+      action: () => align('middle'),
+    },
+    {
+      id: 'bottom',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z" />
+        </svg>
+      ),
+      action: () => align('bottom'),
+    },
+    {
+      id: 'vertical',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z" />
+        </svg>
+      ),
+      action: () => distribute('vertical'),
+    },
+    {
+      id: 'horizontal',
+      icon: (
+        <svg {...svgBaseProp}>
+          <rect fill="none" height="24" width="24" />
+          <path d="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z" />
+        </svg>
+      ),
+      action: () => distribute('horizontal'),
+    },
   ];
 
   return (
@@ -114,7 +188,9 @@ const PositionAndSizeEditor = (
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
         {layoutBtns.map((b) => (
           <button key={b.id} title={b.id} onClick={b.action} style={buttonStyle}>
-            <img width={15} src={b.icon} />
+            <object width={15} height={15}>
+              {b.icon}
+            </object>
           </button>
         ))}
       </div>

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

@@ -7,9 +7,9 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
 } from '@pdfme/common';
-import { FontContext } from '../../../../contexts';
+import { FontContext } from '../../../../contexts.js';
 import { SidebarProps } from '..';
-import closeIcon from '../../../../assets/icons/close.svg';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 const inputStyle = {
   width: '90%',
@@ -60,7 +60,7 @@ const ColorInputSet = (props: {
             cursor: 'pointer',
           }}
         >
-          <img src={closeIcon} width={10} alt="Close icon" />
+          <XMarkIcon width={10} height={10} />
         </button>
       </div>
     </div>

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 '..';
-import { I18nContext } from '../../../../contexts';
+import { SidebarProps } from '../index.js';
+import { I18nContext } from '../../../../contexts.js';
 
 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';
-import Divider from '../../../Divider';
-import { SidebarProps } from '..';
-import TextPropEditor from './TextPropEditor';
-import ExampleInputEditor from './ExampleInputEditor';
-import PositionAndSizeEditor from './PositionAndSizeEditor';
-import TypeAndKeyEditor from './TypeAndKeyEditor';
+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';
 
 const DetailView = (
   props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {

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

@@ -1,8 +1,7 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
-import { I18nContext } from '../../../../contexts';
-import dragIcon from '../../../../assets/icons/drag.svg';
-import warningIcon from '../../../../assets/icons/warning.svg';
+import { I18nContext } from '../../../../contexts.js';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 interface Props {
   value: React.ReactNode;
@@ -73,7 +72,11 @@ const Item = React.memo(
               {...listeners}
               style={{ padding: '0.5rem', background: 'none', border: 'none', display: 'flex' }}
             >
-              <img style={{ cursor: 'grab' }} src={dragIcon} width={15} alt="Drag icon" />
+              <object style={{ cursor: 'grab' }} width={15}>
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16">
+                  <path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path>
+                </svg>
+              </object>
             </button>
             <div
               style={{
@@ -92,12 +95,7 @@ const Item = React.memo(
                 value
               ) : (
                 <span style={{ display: 'flex', alignItems: 'center' }}>
-                  <img
-                    alt="Warning icon"
-                    src={warningIcon}
-                    width={15}
-                    style={{ marginRight: '0.5rem' }}
-                  />
+                  <ExclamationTriangleIcon width={15} style={{ marginRight: '0.5rem' }} />
                   {status === 'is-warning' ? i18n('noKeyName') : value}
                   {status === 'is-danger' ? i18n('notUniq') : ''}
                 </span>

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

@@ -16,9 +16,9 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import Item from './Item';
-import SelectableSortableItem from './SelectableSortableItem';
-import { SidebarProps } from '../';
+import Item from './Item.js';
+import SelectableSortableItem from './SelectableSortableItem.js';
+import { SidebarProps } from '../index.js';
 
 const SelectableSortableContainer = (
   props: Pick<

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

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts';
-import Item from './Item';
-import { useMountStatus } from '../../../../hooks';
+import { I18nContext } from '../../../../contexts.js';
+import Item from './Item.js';
+import { useMountStatus } from '../../../../hooks.js';
 
 interface Props {
   isSelected: boolean;

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

@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
-import { ZOOM, RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants';
-import { I18nContext } from '../../../../contexts';
-import Divider from '../../../Divider';
-import SelectableSortableContainer from './SelectableSortableContainer';
-import { SidebarProps } from '..';
+import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants.js';
+import { I18nContext } from '../../../../contexts.js';
+import Divider from '../../../Divider.js';
+import SelectableSortableContainer from './SelectableSortableContainer.js';
+import { SidebarProps } from '../index.js';
 
 const ListView = (
   props: Pick<

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

@@ -1,11 +1,10 @@
 import React, { useState, useContext } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
-import { I18nContext } from '../../../contexts';
-import backIcon from '../../../assets/icons/back.svg';
-import forwardIcon from '../../../assets/icons/forward.svg';
-import ListView from './ListView';
-import DetailView from './DetailView';
+import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants.js';
+import { I18nContext } from '../../../contexts.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import ListView from './ListView/index.js';
+import DetailView from './DetailView/index.js';
 
 export type SidebarProps = {
   height: number;
@@ -61,10 +60,15 @@ const Sidebar = (props: SidebarProps) => {
             cursor: 'pointer',
             background: '#eee',
             width: 30,
+            height: 30,
           }}
           onClick={() => setOpen(!open)}
         >
-          <img src={open ? forwardIcon : backIcon} width={15} alt="Toggle icon" />
+          {open ? (
+            <ArrowRightIcon width={15} height={15} />
+          ) : (
+            <ArrowLeftIcon width={15} height={15} />
+          )}
         </button>
         <div
           style={{

package/src/components/Designer/index.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
 import { DesignerReactProps, Template, SchemaForUI } from '@pdfme/common';
-import Sidebar from './Sidebar';
-import Main from './Main';
-import { ZOOM, RULER_HEIGHT } from '../../constants';
-import { I18nContext } from '../../contexts';
+import Sidebar from './Sidebar/index.js';
+import Main from './Main/index.js';
+import { ZOOM, RULER_HEIGHT } from '../../constants.js';
+import { I18nContext } from '../../contexts.js';
 import {
   uuid,
   set,
@@ -18,11 +18,11 @@ import {
   getUniqSchemaKey,
   moveCommandToChangeSchemasArg,
   getPagesScrollTopByIndex,
-} from '../../helper';
-import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
-import Root from '../Root';
-import Error from '../Error';
-import CtlBar from '../CtlBar';
+} from '../../helper.js';
+import { useUIPreProcessor, useScrollPageCursor } from '../../hooks.js';
+import Root from '../Root.js';
+import Error from '../Error.js';
+import CtlBar from '../CtlBar/index.js';
 
 const TemplateEditor = ({
   template,

package/src/components/Error.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
-import { I18nContext } from '../contexts';
+import { I18nContext } from '../contexts.js';
 
 const Error = ({ size, error }: { size: Size; error: Error }) => {
   const i18n = useContext(I18nContext);

package/src/components/Paper.tsx

@@ -1,7 +1,7 @@
 import React, { MutableRefObject, ReactNode, useContext } from 'react';
 import { SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
-import { FontContext } from '../contexts';
-import { ZOOM, RULER_HEIGHT } from '../constants';
+import { FontContext } from '../contexts.js';
+import { ZOOM, RULER_HEIGHT } from '../constants.js';
 
 const Paper = (porps: {
   paperRefs: MutableRefObject<HTMLDivElement[]>;

package/src/components/Preview.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { PreviewReactProps, SchemaForUI } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../constants';
-import UnitPager from './UnitPager';
-import Root from './Root';
-import Error from './Error';
-import CtlBar from './CtlBar';
-import Paper from './Paper';
-import SchemaUI from './Schemas/SchemaUI';
-import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
-import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
+import { ZOOM, RULER_HEIGHT } from '../constants.js';
+import UnitPager from './UnitPager.js';
+import Root from './Root.js';
+import Error from './Error.js';
+import CtlBar from './CtlBar/index.js';
+import Paper from './Paper.js';
+import SchemaUI from './Schemas/SchemaUI.js';
+import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
+import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper.js';
 
 const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
   const rootRef = useRef<HTMLDivElement>(null);

package/src/components/Root.tsx

@@ -1,9 +1,8 @@
 import type {} from 'css-font-loading-module';
 import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
 import { Size } from '@pdfme/common';
-import { RULER_HEIGHT } from '../constants';
-import { FontContext } from '../contexts';
-import Spinner from './Spinner';
+import { FontContext } from '../contexts.js';
+import Spinner from './Spinner.js';
 
 type Props = { size: Size; scale: number; children: ReactNode };
 

package/src/components/Schemas/BarcodeSchema.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, Ref } from 'react';
 import { validateBarcodeInput, BarCodeType, BarcodeSchema } from '@pdfme/common';
-import { ZOOM } from '../../constants';
-import { SchemaUIProps } from './SchemaUI';
+import { ZOOM } from '../../constants.js';
+import { SchemaUIProps } from './SchemaUI.js';
 import ean8 from '../../assets/barcodeExamples/ean8.png';
 import ean13 from '../../assets/barcodeExamples/ean13.png';
 import code39 from '../../assets/barcodeExamples/code39.png';

package/src/components/Schemas/ImageSchema.tsx

@@ -1,9 +1,9 @@
-import React, { useState, forwardRef, ChangeEvent, useContext, Ref } from 'react';
+import React, { useState, forwardRef, ChangeEvent, Ref } from 'react';
 import { ImageSchema } from '@pdfme/common';
-import { SchemaUIProps } from './SchemaUI';
-import { readFiles } from '../../helper';
-import { ZOOM } from '../../constants';
-import closeIcon from '../../assets/icons/close.svg';
+import { SchemaUIProps } from './SchemaUI.js';
+import { readFiles } from '../../helper.js';
+import { ZOOM } from '../../constants.js';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 type Props = SchemaUIProps & { schema: ImageSchema };
 
@@ -55,7 +55,7 @@ const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
               onChange('');
             }}
           >
-            <img src={closeIcon} alt="Close icon" width={10} />
+            <XMarkIcon width={10} height={10} />
           </button>
         )}
       </div>