@pdfme/schemas 5.3.8 → 5.3.9-dev.1

package/src/tables/classes.ts

@@ -1,7 +1,7 @@
 import { Font, mm2pt, pt2mm } from '@pdfme/common';
 import type { Font as FontKitFont } from 'fontkit';
-import { splitTextToSize, getFontKitFont, widthOfTextAtSize } from '../text/helper';
-import type { Styles, TableInput, Settings, Section, StylesProps } from './types';
+import { splitTextToSize, getFontKitFont, widthOfTextAtSize } from '../text/helper.js';
+import type { Styles, TableInput, Settings, Section, StylesProps } from './types.js';
 
 type ContentSettings = { body: Row[]; head: Row[]; columns: Column[] };
 
@@ -175,7 +175,7 @@ async function calculateWidths(arg: { table: Table; font: Font; _cache: Map<any,
   // first resize attempt: with respect to minReadableWidth and minWidth
   if (resizeWidth) {
     resizeWidth = resizeColumns(resizableColumns, resizeWidth, (column) =>
-      Math.max(column.minReadableWidth, column.minWidth)
+      Math.max(column.minReadableWidth, column.minWidth),
     );
   }
 
@@ -257,7 +257,7 @@ function applyColSpans(table: Table) {
 
 async function fitContent(
   table: Table,
-  getFontKitFontByFontName: (fontName: string | undefined) => Promise<FontKitFont>
+  getFontKitFontByFontName: (fontName: string | undefined) => Promise<FontKitFont>,
 ) {
   const rowSpanHeight = { count: 0, height: 0 };
   for (const row of table.allRows()) {
@@ -293,7 +293,7 @@ async function fitContent(
 function resizeColumns(
   columns: Column[],
   resizeWidth: number,
-  getMinWidth: (column: Column) => number
+  getMinWidth: (column: Column) => number,
 ) {
   const initialResizeWidth = resizeWidth;
   const sumWrappedWidth = columns.reduce((acc, column) => acc + column.wrappedWidth, 0);
@@ -333,7 +333,7 @@ function resizeColumns(
 
 async function calculate(
   table: Table,
-  getFontKitFontByFontName: (fontName: string | undefined) => Promise<FontKitFont>
+  getFontKitFontByFontName: (fontName: string | undefined) => Promise<FontKitFont>,
 ) {
   for (const row of table.allRows()) {
     for (const column of table.columns) {
@@ -347,7 +347,7 @@ async function calculate(
 
       const longestWordWidth = getStringWidth(
         Object.assign(cell, { text: cell.text.join(' ').split(/\s+/) }),
-        fontKitFont
+        fontKitFont,
       );
       cell.minReadableWidth = longestWordWidth + hPadding;
 

package/src/tables/dynamicTemplate.ts

@@ -1,7 +1,7 @@
 import { Schema, BasePdf, CommonOptions } from '@pdfme/common';
-import { createSingleTable } from './tableHelper';
+import { createSingleTable } from './tableHelper.js';
 import { getBodyWithRange, getBody } from './helper.js';
-import { TableSchema } from './types';
+import { TableSchema } from './types.js';
 
 export const getDynamicHeightsForTable = async (
   value: string,
@@ -10,7 +10,7 @@ export const getDynamicHeightsForTable = async (
     basePdf: BasePdf;
     options: CommonOptions;
     _cache: Map<any, any>;
-  }
+  },
 ): Promise<number[]> => {
   if (args.schema.type !== 'table') return Promise.resolve([args.schema.height]);
   const schema = args.schema as TableSchema;

package/src/tables/helper.ts

@@ -10,7 +10,7 @@ import {
   VERTICAL_ALIGN_TOP,
   VERTICAL_ALIGN_MIDDLE,
   VERTICAL_ALIGN_BOTTOM,
-} from '../text/constants';
+} from '../text/constants.js';
 import { HEX_COLOR_PATTERN } from '../constants.js';
 
 export const getDefaultCellStyles = () => ({
@@ -112,7 +112,7 @@ export const getCellPropPanelSchema = (arg: {
       type: 'string',
       widget: 'color',
       props: {
-        disabledAlpha: true
+        disabledAlpha: true,
       },
       rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
     },
@@ -121,7 +121,7 @@ export const getCellPropPanelSchema = (arg: {
       type: 'string',
       widget: 'color',
       props: {
-        disabledAlpha: true
+        disabledAlpha: true,
       },
       rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
     },
@@ -130,7 +130,7 @@ export const getCellPropPanelSchema = (arg: {
       type: 'string',
       widget: 'color',
       props: {
-        disabledAlpha: true
+        disabledAlpha: true,
       },
       rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
     },
@@ -141,7 +141,7 @@ export const getCellPropPanelSchema = (arg: {
             type: 'string',
             widget: 'color',
             props: {
-              disabledAlpha: true
+              disabledAlpha: true,
             },
             rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
           },
@@ -194,7 +194,7 @@ export const getColumnStylesPropPanelSchema = ({
             },
           },
         }),
-      {}
+      {},
     ),
   },
 });
@@ -208,7 +208,7 @@ export const getBody = (value: string | string[][]): string[][] => {
 
 export const getBodyWithRange = (
   value: string | string[][],
-  range?: { start: number; end?: number | undefined }
+  range?: { start: number; end?: number | undefined },
 ) => {
   const body = getBody(value);
   if (!range) return body;

package/src/tables/pdfRender.ts

@@ -1,10 +1,10 @@
-import type { TableSchema } from './types';
+import type { TableSchema } from './types.js';
 import type { PDFRenderProps } from '@pdfme/common';
-import { Cell, Table, Row, Column } from './classes';
-import { rectangle } from '../shapes/rectAndEllipse';
-import cell from './cell';
-import { getBodyWithRange } from './helper';
-import { createSingleTable } from './tableHelper';
+import { Cell, Table, Row, Column } from './classes.js';
+import { rectangle } from '../shapes/rectAndEllipse.js';
+import cell from './cell.js';
+import { getBodyWithRange } from './helper.js';
+import { createSingleTable } from './tableHelper.js';
 
 type Pos = { x: number; y: number };
 
@@ -41,7 +41,7 @@ async function drawRow(
   table: Table,
   row: Row,
   cursor: Pos,
-  columns: Column[]
+  columns: Column[],
 ) {
   cursor.x = table.settings.margin.left;
   for (const column of columns) {
@@ -65,7 +65,7 @@ async function drawTableBorder(
   arg: PDFRenderProps<TableSchema>,
   table: Table,
   startPos: Pos,
-  cursor: Pos
+  cursor: Pos,
 ) {
   const lineWidth = table.settings.tableLineWidth;
   const lineColor = table.settings.tableLineColor;
@@ -112,7 +112,7 @@ export const pdfRender = async (arg: PDFRenderProps<TableSchema>) => {
 
   const body = getBodyWithRange(
     typeof value !== 'string' ? JSON.stringify(value || '[]') : value,
-    schema.__bodyRange
+    schema.__bodyRange,
   );
   const table = await createSingleTable(body, arg);
   await drawTable(arg, table);

package/src/tables/propPanel.ts

@@ -1,5 +1,5 @@
 import type { PropPanel } from '@pdfme/common';
-import type { TableSchema } from './types';
+import type { TableSchema } from './types.js';
 import { getFallbackFontName, DEFAULT_FONT_NAME } from '@pdfme/common';
 import {
   getDefaultCellStyles,

package/src/tables/tableHelper.ts

@@ -15,8 +15,8 @@ import type {
   TableInput,
   StylesProps,
   Section,
-} from './types';
-import { Cell, Column, Row, Table } from './classes';
+} from './types.js';
+import { Cell, Column, Row, Table } from './classes.js';
 
 type StyleProp = 'styles' | 'headStyles' | 'bodyStyles' | 'alternateRowStyles' | 'columnStyles';
 
@@ -51,7 +51,7 @@ function parseSection(
   sectionRows: string[][],
   columns: Column[],
   styleProps: StylesProps,
-  fallbackFontName: string
+  fallbackFontName: string,
 ): Row[] {
   const rowSpansLeftForColumn: { [key: string]: { left: number; times: number } } = {};
   const result = sectionRows.map((rawRow, rowIndex) => {
@@ -112,7 +112,7 @@ function cellStyles(
   column: Column,
   rowIndex: number,
   styles: StylesProps,
-  fallbackFontName: string
+  fallbackFontName: string,
 ) {
   let sectionStyles;
   if (sectionName === 'head') {
@@ -167,23 +167,26 @@ function mapCellStyle(style: CellStyle): Partial<Styles> {
 function getTableOptions(schema: TableSchema, body: string[][]): UserOptions {
   const columnStylesWidth = schema.headWidthPercentages.reduce(
     (acc, cur, i) => ({ ...acc, [i]: { cellWidth: schema.width * (cur / 100) } }),
-    {} as Record<number, Partial<Styles>>
+    {} as Record<number, Partial<Styles>>,
   );
 
   const columnStylesAlignment = Object.entries(schema.columnStyles.alignment || {}).reduce(
     (acc, [key, value]) => ({ ...acc, [key]: { alignment: value } }),
-    {} as Record<number, Partial<Styles>>
+    {} as Record<number, Partial<Styles>>,
   );
 
   const allKeys = new Set([
     ...Object.keys(columnStylesWidth).map(Number),
     ...Object.keys(columnStylesAlignment).map(Number),
   ]);
-  const columnStyles = Array.from(allKeys).reduce((acc, key) => {
-    const widthStyle = columnStylesWidth[key] || {};
-    const alignmentStyle = columnStylesAlignment[key] || {};
-    return { ...acc, [key]: { ...widthStyle, ...alignmentStyle } };
-  }, {} as Record<number, Partial<Styles>>);
+  const columnStyles = Array.from(allKeys).reduce(
+    (acc, key) => {
+      const widthStyle = columnStylesWidth[key] || {};
+      const alignmentStyle = columnStylesAlignment[key] || {};
+      return { ...acc, [key]: { ...widthStyle, ...alignmentStyle } };
+    },
+    {} as Record<number, Partial<Styles>>,
+  );
 
   return {
     head: [schema.head],
@@ -254,7 +257,7 @@ export function createSingleTable(body: string[][], args: CreateTableArgs) {
         'When specifying a custom PDF for basePdf, ' +
         'you cannot use features such as page breaks or re-layout of other elements.' +
         'To utilize these features, please define basePdf as follows:\n' +
-        '{ width: number; height: number; padding: [number, number, number, number]; }'
+        '{ width: number; height: number; padding: [number, number, number, number]; }',
     );
   }
 

package/src/tables/types.ts

@@ -1,4 +1,4 @@
-import type { ALIGNMENT, VERTICAL_ALIGNMENT } from '../text/types';
+import type { ALIGNMENT, VERTICAL_ALIGNMENT } from '../text/types.js';
 import type { Schema } from '@pdfme/common';
 
 export type Spacing = { top: number; right: number; bottom: number; left: number };

package/src/tables/uiRender.ts

@@ -4,7 +4,7 @@ import { px2mm } from '@pdfme/common';
 import { createSingleTable } from './tableHelper.js';
 import { getBody, getBodyWithRange } from './helper.js';
 import cell from './cell.js';
-import { Row } from './classes';
+import { Row } from './classes.js';
 
 const buttonSize = 30;
 
@@ -75,7 +75,7 @@ const calcResizedHeadWidthPercentages = (arg: {
 const setBorder = (
   div: HTMLDivElement,
   borderPosition: 'Top' | 'Left' | 'Right' | 'Bottom',
-  arg: UIRenderProps<TableSchema>
+  arg: UIRenderProps<TableSchema>,
 ) => {
   div.style[`border${borderPosition}`] = `${String(arg.schema.tableStyles.borderWidth)}mm solid ${
     arg.schema.tableStyles.borderColor
@@ -88,7 +88,7 @@ const drawBorder = (
   colIndex: number,
   rowIndex: number,
   rowsLength: number,
-  arg: UIRenderProps<TableSchema>
+  arg: UIRenderProps<TableSchema>,
 ) => {
   const isFirstColumn = colIndex === 0;
   const isLastColumn = colIndex === Object.values(row.cells).length - 1;
@@ -213,7 +213,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
 
   const handleChangeEditingPosition = (
     newPosition: { rowIndex: number; colIndex: number },
-    editingPosition: { rowIndex: number; colIndex: number }
+    editingPosition: { rowIndex: number; colIndex: number },
   ) => {
     resetEditingPosition();
     editingPosition.rowIndex = newPosition.rowIndex;
@@ -296,7 +296,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
         const newColumnWidthPercentage = 25;
         const totalCurrentWidth = schema.headWidthPercentages.reduce(
           (acc, width) => acc + width,
-          0
+          0,
         );
         const scalingRatio = (100 - newColumnWidthPercentage) / totalCurrentWidth;
         const scaledWidths = schema.headWidthPercentages.map((width) => width * scalingRatio);
@@ -329,7 +329,7 @@ export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
         onClick: () => {
           const totalWidthMinusRemoved = schema.headWidthPercentages.reduce(
             (sum, width, j) => (j !== i ? sum + width : sum),
-            0
+            0,
           );
 
           // TODO Should also remove the deleted columnStyles when deleting

package/src/text/constants.ts

@@ -1,4 +1,4 @@
-import { ALIGNMENT, VERTICAL_ALIGNMENT, DYNAMIC_FONT_SIZE_FIT } from './types';
+import { ALIGNMENT, VERTICAL_ALIGNMENT, DYNAMIC_FONT_SIZE_FIT } from './types.js';
 
 export const DEFAULT_FONT_SIZE = 13;
 

package/src/text/extraFormatter.ts

@@ -9,7 +9,7 @@ import {
   TextVerticalAlignBottomIcon,
   TextVerticalAlignMiddleIcon,
   TextVerticalAlignTopIcon,
-} from './icons';
+} from './icons/index.js';
 import {
   ALIGN_CENTER,
   ALIGN_RIGHT,
@@ -18,7 +18,7 @@ import {
   VERTICAL_ALIGN_BOTTOM,
   VERTICAL_ALIGN_MIDDLE,
   ALIGN_JUSTIFY,
-} from './constants';
+} from './constants.js';
 
 export enum Formatter {
   STRIKETHROUGH = 'strikethrough',

package/src/text/helper.ts

@@ -11,7 +11,7 @@ import {
   DEFAULT_FONT_NAME,
 } from '@pdfme/common';
 import { Buffer } from 'buffer';
-import type { TextSchema, FontWidthCalcValues } from './types';
+import type { TextSchema, FontWidthCalcValues } from './types.js';
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_CHARACTER_SPACING,
@@ -29,7 +29,7 @@ export const getBrowserVerticalFontAdjustments = (
   fontKitFont: FontKitFont,
   fontSize: number,
   lineHeight: number,
-  verticalAlignment: string
+  verticalAlignment: string,
 ) => {
   const { ascent, descent, unitsPerEm } = fontKitFont;
 
@@ -92,7 +92,7 @@ export const widthOfTextAtSize = (
   text: string,
   fontKitFont: FontKitFont,
   fontSize: number,
-  characterSpacing: number
+  characterSpacing: number,
 ) => {
   const { glyphs } = fontKitFont.layout(text);
   const scale = 1000 / fontKitFont.unitsPerEm;
@@ -112,7 +112,7 @@ const getCacheKey = (fontName: string) => `getFontKitFont-${fontName}`;
 export const getFontKitFont = async (
   fontName: string | undefined,
   font: Font,
-  _cache: Map<any, any>
+  _cache: Map<any, any>,
 ) => {
   const fntNm = fontName || getFallbackFontName(font);
   const cacheKey = getCacheKey(fntNm);
@@ -129,7 +129,7 @@ export const getFontKitFont = async (
   }
 
   const fontKitFont = fontkit.create(
-    fontData instanceof Buffer ? fontData : Buffer.from(fontData as ArrayBuffer)
+    fontData instanceof Buffer ? fontData : Buffer.from(fontData as ArrayBuffer),
   ) as fontkit.Font;
   _cache.set(cacheKey, fontKitFont);
 
@@ -281,7 +281,7 @@ export const calculateDynamicFontSize = ({
             line.replace('\n', ''),
             fontKitFont,
             size,
-            characterSpacing
+            characterSpacing,
           );
           const textWidthInMm = pt2mm(textWidth);
           totalWidthInMm = Math.max(totalWidthInMm, textWidthInMm);

package/src/text/index.ts

@@ -2,7 +2,7 @@ import type { Plugin } from '@pdfme/common';
 import { pdfRender } from './pdfRender.js';
 import { propPanel } from './propPanel.js';
 import { uiRender } from './uiRender.js';
-import type { TextSchema } from './types';
+import type { TextSchema } from './types.js';
 import { TextCursorInput } from 'lucide';
 import { createSvgStr } from '../utils.js';
 

package/src/text/pdfRender.ts

@@ -1,6 +1,6 @@
 import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
 import type { Font as FontKitFont } from 'fontkit';
-import type { TextSchema } from './types';
+import type { TextSchema } from './types.js';
 import {
   PDFRenderProps,
   ColorType,
@@ -49,12 +49,12 @@ const embedAndGetFontObj = async (arg: {
       return pdfDoc.embedFont(fontData, {
         subset: typeof v.subset === 'undefined' ? true : v.subset,
       });
-    })
+    }),
   );
 
   const fontObj = Object.keys(font).reduce(
     (acc, cur, i) => Object.assign(acc, { [cur]: fontValues[i] }),
-    {} as { [key: string]: PDFFont }
+    {} as { [key: string]: PDFFont },
   );
 
   _cache.set(pdfDoc, fontObj);
@@ -74,7 +74,7 @@ const getFontProp = ({
 }) => {
   const fontSize = schema.dynamicFontSize
     ? calculateDynamicFontSize({ textSchema: schema, fontKitFont, value })
-    : schema.fontSize ?? DEFAULT_FONT_SIZE;
+    : (schema.fontSize ?? DEFAULT_FONT_SIZE);
   const color = hex2PrintingColor(schema.fontColor || DEFAULT_FONT_COLOR, colorType);
 
   return {

package/src/text/propPanel.ts

@@ -5,7 +5,7 @@ import {
   PropPanelSchema,
   getFallbackFontName,
 } from '@pdfme/common';
-import type { TextSchema } from './types';
+import type { TextSchema } from './types.js';
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
@@ -20,7 +20,7 @@ import {
   DEFAULT_DYNAMIC_MAX_FONT_SIZE,
 } from './constants.js';
 import { DEFAULT_OPACITY, HEX_COLOR_PATTERN } from '../constants.js';
-import { getExtraFormatterSchema } from './extraFormatter';
+import { getExtraFormatterSchema } from './extraFormatter.js';
 
 const UseDynamicFontSize = (props: PropPanelWidgetProps) => {
   const { rootElement, changeSchemas, activeSchema, i18n } = props;

package/src/text/uiRender.ts

@@ -1,7 +1,7 @@
 import type * as CSS from 'csstype';
 import type { Font as FontKitFont } from 'fontkit';
 import { UIRenderProps, getDefaultFont } from '@pdfme/common';
-import type { TextSchema } from './types';
+import type { TextSchema } from './types.js';
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
@@ -70,7 +70,11 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   };
   const font = options?.font || getDefaultFont();
   const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
-  const textBlock = buildStyledTextContainer(arg, fontKitFont, usePlaceholder ? placeholder : value);
+  const textBlock = buildStyledTextContainer(
+    arg,
+    fontKitFont,
+    usePlaceholder ? placeholder : value,
+  );
 
   const processedText = replaceUnsupportedChars(value, fontKitFont);
 
@@ -82,7 +86,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
         (l, i) =>
           `<span style="letter-spacing:${
             String(value).length === i + 1 ? 0 : 'inherit'
-          };">${l}</span>`
+          };">${l}</span>`,
       )
       .join('');
     return;
@@ -115,7 +119,7 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
             fontKitFont,
             dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
             schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
-            schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
+            schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT,
           );
           textBlock.style.paddingTop = `${newTopAdj}px`;
           textBlock.style.marginBottom = `${newBottomAdj}px`;
@@ -150,7 +154,11 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   }
 };
 
-export const buildStyledTextContainer = (arg: UIRenderProps<TextSchema>, fontKitFont: FontKitFont, value: string) => {
+export const buildStyledTextContainer = (
+  arg: UIRenderProps<TextSchema>,
+  fontKitFont: FontKitFont,
+  value: string,
+) => {
   const { schema, rootElement, mode, options, _cache } = arg;
   const font = options?.font || getDefaultFont();
 
@@ -171,7 +179,7 @@ export const buildStyledTextContainer = (arg: UIRenderProps<TextSchema>, fontKit
     fontKitFont,
     dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE,
     schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
-    schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
+    schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT,
   );
 
   const topAdjustment = topAdj.toString();

package/src/utils.ts

@@ -45,7 +45,7 @@ export const convertForPdfLayoutProps = ({
 export const rotatePoint = (
   point: { x: number; y: number },
   pivot: { x: number; y: number },
-  angleDegrees: number
+  angleDegrees: number,
 ): { x: number; y: number } => {
   const angleRadians = degreesToRadians(angleDegrees);
 
@@ -148,10 +148,8 @@ const hex2CmykColor = (hexString: string | undefined) => {
 
 export const hex2PrintingColor = (color?: string | Color, colorType?: ColorType) => {
   // if color is already CMYK, RGB or Grayscale, does not required to convert
-  if (typeof color === 'object') return color
-  return colorType?.toLowerCase() == 'cmyk'
-    ? hex2CmykColor(color)
-    : hex2RgbColor(color);
+  if (typeof color === 'object') return color;
+  return colorType?.toLowerCase() == 'cmyk' ? hex2CmykColor(color) : hex2RgbColor(color);
 };
 
 export const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer> =>
@@ -212,21 +210,68 @@ export const createErrorElm = () => {
 };
 
 export const createSvgStr = (icon: IconNode, attrs?: Record<string, string>): string => {
-  const createElementString = (node: IconNode): string => {
-    const [tag, attributes, children = []] = node;
+  // In lucide 0.475.0, the icon is an array of elements, not a single SVG element
+  // We need to create an SVG wrapper and add the elements as children
 
-    const mergedAttributes = tag === 'svg' ? { ...attributes, ...attrs } : attributes;
+  // Handle non-array input
+  if (!Array.isArray(icon)) {
+    return String(icon);
+  }
+
+  // Create default SVG attributes
+  const svgAttrs = {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: '24',
+    height: '24',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '2',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    ...(attrs || {}),
+  };
+
+  // Format SVG attributes string
+  const svgAttrString = Object.entries(svgAttrs)
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ');
+
+  // Helper function to process a single element
+  const processElement = (element: any): string => {
+    if (!Array.isArray(element)) {
+      return String(element);
+    }
+
+    const [tag, attributes = {}, children = []] = element;
+    const tagName = String(tag);
 
-    const attrString = Object.entries(mergedAttributes)
+    // Format attributes string
+    const attrString = Object.entries(attributes)
       .map(([key, value]) => `${key}="${value}"`)
       .join(' ');
 
-    const childrenString = children
-      .map((child) => createElementString(child))
-      .join('');
+    // Process children recursively
+    let childrenString = '';
 
-    return `<${tag} ${attrString}>${childrenString}</${tag}>`;
+    if (Array.isArray(children) && children.length > 0) {
+      childrenString = children.map((child) => processElement(child)).join('');
+    }
+
+    // Return properly formatted element string
+    if (childrenString) {
+      return `<${tagName}${attrString ? ' ' + attrString : ''}>${childrenString}</${tagName}>`;
+    } else {
+      // Self-closing tag for empty children
+      return `<${tagName}${attrString ? ' ' + attrString : ''}/>`;
+    }
   };
 
-  return createElementString(icon);
-};
+  // Process all elements and join them
+  const elementsString = Array.isArray(icon)
+    ? icon.map((element) => processElement(element)).join('')
+    : processElement(icon);
+
+  // Return the complete SVG string
+  return `<svg ${svgAttrString}>${elementsString}</svg>`;
+};

package/tsconfig.cjs.json

@@ -7,4 +7,4 @@
     "declarationDir": "dist/types",
     "skipLibCheck": true
   }
-}
+}

package/tsconfig.esm.json

@@ -2,9 +2,10 @@
   "extends": "../../tsconfig.base",
   "compilerOptions": {
     "module": "ESNext",
+    "moduleResolution": "bundler",
     "outDir": "./dist/esm",
     "declaration": true,
     "declarationDir": "dist/types",
     "skipLibCheck": true
   }
-}
+}

package/tsconfig.node.json

@@ -2,9 +2,10 @@
   "extends": "../../tsconfig.base",
   "compilerOptions": {
     "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "outDir": "./dist/node",
     "declaration": true,
     "declarationDir": "dist/types",
     "skipLibCheck": true
   }
-}
+}

package/.eslintrc.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['../../eslint.base.js'],
-};