umwd-components 0.1.826 → 0.1.828

package/dist/esm/node_modules/@react-pdf/render/lib/index.js

@@ -1,2081 +0,0 @@
-/*
- * UMWD-Components
- * @copyright Jelle Paulus
- * @license MIT
- */
-  
-import { Page, Text, Svg, Link, Canvas, List, Checkbox, Select, TextInput, FieldSet, Image, Note, Polyline, Polygon, Ellipse, Circle, G, Line, Rect, Path, TextInstance, Tspan, LinearGradient, RadialGradient } from '../../primitives/lib/index.js';
-import { isNil, matchPercent } from '../../fns/lib/index.js';
-import absPath from '../../../abs-svg-path/index.js';
-import parsePath from '../../../parse-svg-path/index.js';
-import normalize from '../../../normalize-svg-path/index.js';
-import colorString from '../../../color-string/index.js';
-
-const renderPath = (ctx, node) => {
-    const d = node.props?.d;
-    if (d)
-        ctx.path(node.props.d);
-};
-
-const KAPPA$3 = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);
-const renderRect = (ctx, node) => {
-    const x = node.props?.x || 0;
-    const y = node.props?.y || 0;
-    const rx = node.props?.rx || 0;
-    const ry = node.props?.ry || 0;
-    const width = node.props?.width || 0;
-    const height = node.props?.height || 0;
-    if (!width || !height)
-        return;
-    if (rx && ry) {
-        const krx = rx * KAPPA$3;
-        const kry = ry * KAPPA$3;
-        ctx.moveTo(x + rx, y);
-        ctx.lineTo(x - rx + width, y);
-        ctx.bezierCurveTo(x - rx + width + krx, y, x + width, y + ry - kry, x + width, y + ry);
-        ctx.lineTo(x + width, y + height - ry);
-        ctx.bezierCurveTo(x + width, y + height - ry + kry, x - rx + width + krx, y + height, x - rx + width, y + height);
-        ctx.lineTo(x + rx, y + height);
-        ctx.bezierCurveTo(x + rx - krx, y + height, x, y + height - ry + kry, x, y + height - ry);
-        ctx.lineTo(x, y + ry);
-        ctx.bezierCurveTo(x, y + ry - kry, x + rx - krx, y, x + rx, y);
-    }
-    else {
-        ctx.moveTo(x, y);
-        ctx.lineTo(x + width, y);
-        ctx.lineTo(x + width, y + height);
-        ctx.lineTo(x, y + height);
-    }
-    ctx.closePath();
-};
-
-const renderLine$1 = (ctx, node) => {
-    const { x1, x2, y1, y2 } = node.props || {};
-    ctx.moveTo(x1, y1);
-    ctx.lineTo(x2, y2);
-};
-
-const renderGroup = () => {
-    // noop
-};
-
-const KAPPA$2 = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);
-const drawEllipse = (ctx, rx, ry, cx = 0, cy = 0) => {
-    const x = cx - rx;
-    const y = cy - ry;
-    const ox = rx * KAPPA$2;
-    const oy = ry * KAPPA$2;
-    const xe = x + rx * 2;
-    const ye = y + ry * 2;
-    const xm = x + rx;
-    const ym = y + ry;
-    ctx.moveTo(x, ym);
-    ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-    ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-    ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-    ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-    ctx.closePath();
-};
-const renderEllipse = (ctx, node) => {
-    const { cx, cy, rx, ry } = node.props || {};
-    drawEllipse(ctx, rx, ry, cx, cy);
-};
-
-const renderCircle = (ctx, node) => {
-    const cx = node.props?.cx;
-    const cy = node.props?.cy;
-    const r = node.props?.r;
-    drawEllipse(ctx, r, r, cx, cy);
-};
-
-/* eslint-disable no-return-assign */
-const number = (n) => {
-    if (n > -1e21 && n < 1e21) {
-        return Math.round(n * 1e6) / 1e6;
-    }
-    throw new Error(`unsupported number: ${n}`);
-};
-const _renderGlyphs = (ctx, encoded, positions, x, y) => {
-    const commands = [];
-    const scale = ctx._fontSize / 1000;
-    let i;
-    let last = 0;
-    let hadOffset = false;
-    ctx.save();
-    // flip coordinate system
-    ctx.transform(1, 0, 0, -1, 0, ctx.page.height);
-    y = ctx.page.height - y;
-    // add current font to page if necessary
-    if (ctx.page.fonts[ctx._font.id] == null) {
-        ctx.page.fonts[ctx._font.id] = ctx._font.ref();
-    }
-    // begin the text object
-    ctx.addContent('BT');
-    // text position
-    ctx.addContent(`1 0 0 1 ${number(x)} ${number(y)} Tm`);
-    // font and font size
-    ctx.addContent(`/${ctx._font.id} ${number(ctx._fontSize)} Tf`);
-    // Adds a segment of text to the TJ command buffer
-    const addSegment = (cur) => {
-        if (last < cur) {
-            const hex = encoded.slice(last, cur).join('');
-            const advance = positions[cur - 1].xAdvance - positions[cur - 1].advanceWidth;
-            commands.push(`<${hex}> ${number(-advance)}`);
-        }
-        return (last = cur);
-    };
-    // Flushes the current TJ commands to the output stream
-    const flush = (s) => {
-        addSegment(s);
-        if (commands.length > 0) {
-            ctx.addContent(`[${commands.join(' ')}] TJ`);
-            return (commands.length = 0);
-        }
-    };
-    for (i = 0; i < positions.length; i += 1) {
-        // If we have an x or y offset, we have to break out of the current TJ command
-        // so we can move the text position.
-        const pos = positions[i];
-        if (pos.xOffset || pos.yOffset) {
-            // Flush the current buffer
-            flush(i);
-            // Move the text position and flush just the current character
-            ctx.addContent(`1 0 0 1 ${number(x + pos.xOffset * scale)} ${number(y + pos.yOffset * scale)} Tm`);
-            flush(i + 1);
-            hadOffset = true;
-        }
-        else {
-            // If the last character had an offset, reset the text position
-            if (hadOffset) {
-                ctx.addContent(`1 0 0 1 ${number(x)} ${number(y)} Tm`);
-                hadOffset = false;
-            }
-            // Group segments that don't have any advance adjustments
-            if (pos.xAdvance - pos.advanceWidth !== 0) {
-                addSegment(i + 1);
-            }
-        }
-        x += pos.xAdvance * scale;
-    }
-    // Flush any remaining commands
-    flush(i);
-    // end the text object
-    ctx.addContent('ET');
-    // restore flipped coordinate system
-    return ctx.restore();
-};
-const renderGlyphs = (ctx, glyphs, positions, x, y) => {
-    const scale = 1000 / ctx._fontSize;
-    const unitsPerEm = ctx._font.font.unitsPerEm || 1000;
-    const advanceWidthScale = 1000 / unitsPerEm;
-    // Glyph encoding and positioning
-    const encodedGlyphs = ctx._font.encodeGlyphs(glyphs);
-    const encodedPositions = positions.map((pos, i) => ({
-        xAdvance: pos.xAdvance * scale,
-        yAdvance: pos.yAdvance * scale,
-        xOffset: pos.xOffset,
-        yOffset: pos.yOffset,
-        advanceWidth: glyphs[i].advanceWidth * advanceWidthScale,
-    }));
-    return _renderGlyphs(ctx, encodedGlyphs, encodedPositions, x, y);
-};
-
-const renderRun$1 = (ctx, run) => {
-    if (!run.glyphs)
-        return;
-    if (!run.positions)
-        return;
-    const runAdvanceWidth = run.xAdvance;
-    const font = run.attributes.font?.[0];
-    const { fontSize, color, opacity } = run.attributes;
-    if (color)
-        ctx.fillColor(color);
-    ctx.fillOpacity(opacity);
-    if (font) {
-        ctx.font(font.type === 'STANDARD' ? font.fullName : font, fontSize);
-    }
-    try {
-        renderGlyphs(ctx, run.glyphs, run.positions, 0, 0);
-    }
-    catch (error) {
-        console.log(error);
-    }
-    ctx.translate(runAdvanceWidth, 0);
-};
-const renderSpan = (ctx, line, textAnchor, dominantBaseline) => {
-    ctx.save();
-    const x = line.box?.x || 0;
-    const y = line.box?.y || 0;
-    const font = line.runs[0]?.attributes.font?.[0];
-    const scale = line.runs[0]?.attributes?.scale || 1;
-    const width = line.xAdvance;
-    if (!font)
-        return;
-    const ascent = font.ascent * scale;
-    const xHeight = font.xHeight * scale;
-    const descent = font.descent * scale;
-    const capHeight = font.capHeight * scale;
-    let xTranslate = x;
-    let yTranslate = y;
-    switch (textAnchor) {
-        case 'middle':
-            xTranslate = x - width / 2;
-            break;
-        case 'end':
-            xTranslate = x - width;
-            break;
-        default:
-            xTranslate = x;
-            break;
-    }
-    switch (dominantBaseline) {
-        case 'middle':
-        case 'central':
-            yTranslate = y + capHeight / 2;
-            break;
-        case 'hanging':
-            yTranslate = y + capHeight;
-            break;
-        case 'mathematical':
-            yTranslate = y + xHeight;
-            break;
-        case 'text-after-edge':
-            yTranslate = y + descent;
-            break;
-        case 'text-before-edge':
-            yTranslate = y + ascent;
-            break;
-        default:
-            yTranslate = y;
-            break;
-    }
-    ctx.translate(xTranslate, yTranslate);
-    line.runs.forEach((run) => renderRun$1(ctx, run));
-    ctx.restore();
-};
-const renderSvgText = (ctx, node) => {
-    const children = node.children;
-    children.forEach((span) => renderSpan(ctx, span.lines[0], span.props.textAnchor, span.props.dominantBaseline));
-};
-
-const pairs = (values) => {
-    const result = [];
-    for (let i = 0; i < values.length; i += 2) {
-        result.push([values[i], values[i + 1]]);
-    }
-    return result;
-};
-/**
- * Parse svg-like points into number arrays
- *
- * @param points string ex. "20,30 50,60"
- * @returns points array ex. [[20, 30], [50, 60]]
- */
-const parsePoints = (points) => {
-    let values = (points || '')
-        .trim()
-        .replace(/,/g, ' ')
-        .replace(/(\d)-(\d)/g, '$1 -$2')
-        .split(/\s+/);
-    if (values.length % 2 !== 0) {
-        values = values.slice(0, -1);
-    }
-    const mappedValues = values.map(parseFloat);
-    return pairs(mappedValues);
-};
-
-const drawPolyline = (ctx, points) => {
-    if (points.length > 0) {
-        ctx.moveTo(points[0][0], points[0][1]);
-        points.slice(1).forEach((p) => ctx.lineTo(p[0], p[1]));
-    }
-};
-const renderPolyline = (ctx, node) => {
-    const points = parsePoints(node.props.points || '');
-    drawPolyline(ctx, points);
-};
-
-const renderPolygon = (ctx, node) => {
-    const points = parsePoints(node.props.points || '');
-    drawPolyline(ctx, points);
-    ctx.closePath();
-};
-
-const renderImage$1 = (ctx, node) => {
-    if (!node.box)
-        return;
-    if (!node.image?.data)
-        return;
-    const { x = 0, y = 0 } = node.props;
-    const { width, height, opacity } = node.style;
-    const paddingTop = node.box.paddingLeft || 0;
-    const paddingLeft = node.box.paddingLeft || 0;
-    if (width === 0 || height === 0) {
-        console.warn(`Image with src '${node.props.href}' skipped due to invalid dimensions`);
-        return;
-    }
-    if (typeof width === 'string' || typeof height === 'string') {
-        console.warn(`Image with src '${node.props.href}' skipped due to percentage width or height`);
-        return;
-    }
-    ctx.save();
-    ctx
-        .fillOpacity(opacity || 1)
-        .image(node.image.data, x + paddingLeft, y + paddingTop, {
-        width,
-        height,
-    });
-    ctx.restore();
-};
-
-// This constant is used to approximate a symmetrical arc using a cubic
-// Bezier curve.
-const KAPPA$1 = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);
-const clipNode = (ctx, node) => {
-    if (!node.box)
-        return;
-    if (!node.style)
-        return;
-    const { top, left, width, height } = node.box;
-    const { borderTopLeftRadius = 0, borderTopRightRadius = 0, borderBottomRightRadius = 0, borderBottomLeftRadius = 0, } = node.style;
-    // Border top
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const rtr = Math.min(borderTopRightRadius, 0.5 * width, 0.5 * height);
-    const ctr = rtr * (1.0 - KAPPA$1);
-    ctx.moveTo(left + rtr, top);
-    ctx.lineTo(left + width - rtr, top);
-    ctx.bezierCurveTo(left + width - ctr, top, left + width, top + ctr, left + width, top + rtr);
-    // Border right
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const rbr = Math.min(borderBottomRightRadius, 0.5 * width, 0.5 * height);
-    const cbr = rbr * (1.0 - KAPPA$1);
-    ctx.lineTo(left + width, top + height - rbr);
-    ctx.bezierCurveTo(left + width, top + height - cbr, left + width - cbr, top + height, left + width - rbr, top + height);
-    // Border bottom
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const rbl = Math.min(borderBottomLeftRadius, 0.5 * width, 0.5 * height);
-    const cbl = rbl * (1.0 - KAPPA$1);
-    ctx.lineTo(left + rbl, top + height);
-    ctx.bezierCurveTo(left + cbl, top + height, left, top + height - cbl, left, top + height - rbl);
-    // Border left
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const rtl = Math.min(borderTopLeftRadius, 0.5 * width, 0.5 * height);
-    const ctl = rtl * (1.0 - KAPPA$1);
-    ctx.lineTo(left, top + rtl);
-    ctx.bezierCurveTo(left, top + ctl, left + ctl, top, left + rtl, top);
-    ctx.closePath();
-    ctx.clip();
-};
-
-const applySingleTransformation = (ctx, transform, origin) => {
-    const { operation, value } = transform;
-    switch (operation) {
-        case 'scale': {
-            const [scaleX, scaleY] = value;
-            ctx.scale(scaleX, scaleY, { origin });
-            break;
-        }
-        case 'rotate': {
-            const [angle] = value;
-            ctx.rotate(angle, { origin });
-            break;
-        }
-        case 'translate': {
-            const [x, y = 0] = value;
-            ctx.translate(x, y, { origin });
-            break;
-        }
-        case 'skew': {
-            const [xAngle = 0, yAngle = 0] = value;
-            const radx = (xAngle * Math.PI) / 180;
-            const rady = (yAngle * Math.PI) / 180;
-            const tanx = Math.tan(radx);
-            const tany = Math.tan(rady);
-            let x = 0;
-            let y = 0;
-            if (origin != null) {
-                [x, y] = Array.from(origin);
-                const x1 = x + tanx * y;
-                const y1 = y + tany * x;
-                x -= x1;
-                y -= y1;
-            }
-            ctx.transform(1, tany, tanx, 1, x, y);
-            break;
-        }
-        case 'matrix': {
-            ctx.transform(...value);
-            break;
-        }
-        default: {
-            console.error(`Transform operation: '${operation}' doesn't supported`);
-        }
-    }
-};
-const applyTransformations = (ctx, node) => {
-    if (!node.origin)
-        return;
-    const { props, style } = node;
-    const origin = [node.origin.left, node.origin.top];
-    const propsTransform = 'transform' in props ? props.transform : undefined;
-    const operations = style?.transform || propsTransform || [];
-    operations.forEach((operation) => {
-        applySingleTransformation(ctx, operation, origin);
-    });
-};
-
-// From https://github.com/dy/svg-path-bounds/blob/master/index.js
-const getPathBoundingBox = (node) => {
-    const path = normalize(absPath(parsePath(node.props?.d || '')));
-    if (!path.length)
-        return [0, 0, 0, 0];
-    const bounds = [Infinity, Infinity, -Infinity, -Infinity];
-    for (let i = 0, l = path.length; i < l; i += 1) {
-        const points = path[i].slice(1);
-        for (let j = 0; j < points.length; j += 2) {
-            if (points[j + 0] < bounds[0])
-                bounds[0] = points[j + 0];
-            if (points[j + 1] < bounds[1])
-                bounds[1] = points[j + 1];
-            if (points[j + 0] > bounds[2])
-                bounds[2] = points[j + 0];
-            if (points[j + 1] > bounds[3])
-                bounds[3] = points[j + 1];
-        }
-    }
-    return bounds;
-};
-const getCircleBoundingBox = (node) => {
-    const r = node.props?.r || 0;
-    const cx = node.props?.cx || 0;
-    const cy = node.props?.cy || 0;
-    return [cx - r, cy - r, cx + r, cy + r];
-};
-const getEllipseBoundingBox = (node) => {
-    const cx = node.props?.cx || 0;
-    const cy = node.props?.cy || 0;
-    const rx = node.props?.rx || 0;
-    const ry = node.props?.ry || 0;
-    return [cx - rx, cy - ry, cx + rx, cy + ry];
-};
-const getLineBoundingBox = (node) => {
-    const x1 = node.props?.x1 || 0;
-    const y1 = node.props?.y1 || 0;
-    const x2 = node.props?.x2 || 0;
-    const y2 = node.props?.y2 || 0;
-    return [
-        Math.min(x1, x2),
-        Math.min(y1, y2),
-        Math.max(x1, x2),
-        Math.max(y1, y2),
-    ];
-};
-const getRectBoundingBox = (node) => {
-    const x = node.props?.x || 0;
-    const y = node.props?.y || 0;
-    const width = node.props?.width || 0;
-    const height = node.props?.height || 0;
-    return [x, y, x + width, y + height];
-};
-const max = (values) => Math.max(-Infinity, ...values);
-const min = (values) => Math.min(Infinity, ...values);
-const getPolylineBoundingBox = (node) => {
-    const points = parsePoints(node.props?.points);
-    const xValues = points.map((p) => p[0]);
-    const yValues = points.map((p) => p[1]);
-    return [min(xValues), min(yValues), max(xValues), max(yValues)];
-};
-const boundingBoxFns = {
-    [Rect]: getRectBoundingBox,
-    [Line]: getLineBoundingBox,
-    [Path]: getPathBoundingBox,
-    [Circle]: getCircleBoundingBox,
-    [Ellipse]: getEllipseBoundingBox,
-    [Polygon]: getPolylineBoundingBox,
-    [Polyline]: getPolylineBoundingBox,
-};
-const getBoundingBox = (node) => {
-    const boundingBoxFn = boundingBoxFns[node.type];
-    return boundingBoxFn ? boundingBoxFn(node) : [0, 0, 0, 0];
-};
-
-const setStrokeWidth = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('strokeWidth' in node.props))
-        return;
-    const lineWidth = node.props.strokeWidth;
-    if (lineWidth)
-        ctx.lineWidth(lineWidth);
-};
-const setStrokeColor = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('stroke' in node.props))
-        return;
-    const strokeColor = node.props.stroke;
-    if (strokeColor)
-        ctx.strokeColor(strokeColor);
-};
-const setOpacity = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('opacity' in node.props))
-        return;
-    const opacity = node.props.opacity;
-    if (!isNil(opacity))
-        ctx.opacity(opacity);
-};
-const setFillOpacity = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('fillOpacity' in node.props))
-        return;
-    const fillOpacity = node.props.fillOpacity || null;
-    if (!isNil(fillOpacity))
-        ctx.fillOpacity(fillOpacity);
-};
-const setStrokeOpacity = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('strokeOpacity' in node.props))
-        return;
-    const strokeOpacity = node.props?.strokeOpacity;
-    if (!isNil(strokeOpacity))
-        ctx.strokeOpacity(strokeOpacity);
-};
-const setLineJoin = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('strokeLinejoin' in node.props))
-        return;
-    const lineJoin = node.props.strokeLinejoin;
-    if (lineJoin)
-        ctx.lineJoin(lineJoin);
-};
-const setLineCap = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('strokeLinecap' in node.props))
-        return;
-    const lineCap = node.props?.strokeLinecap;
-    if (lineCap)
-        ctx.lineCap(lineCap);
-};
-const setLineDash = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('strokeDasharray' in node.props))
-        return;
-    const value = node.props?.strokeDasharray || null;
-    // @ts-expect-error check this works as expected
-    if (value)
-        ctx.dash(value.split(/[\s,]+/).map(Number));
-};
-const hasLinearGradientFill = (node) => {
-    if (!node.props)
-        return false;
-    if (!('fill' in node.props))
-        return false;
-    if (typeof node.props.fill === 'string')
-        return false;
-    return node.props.fill?.type === LinearGradient;
-};
-const hasRadialGradientFill = (node) => {
-    if (!node.props)
-        return false;
-    if (!('fill' in node.props))
-        return false;
-    if (typeof node.props.fill === 'string')
-        return false;
-    return node.props.fill?.type === RadialGradient;
-};
-function multiplyMatrices(m1, m2) {
-    const a = m1[0] * m2[0] + m1[2] * m2[1];
-    const b = m1[1] * m2[0] + m1[3] * m2[1];
-    const c = m1[0] * m2[2] + m1[2] * m2[3];
-    const d = m1[1] * m2[2] + m1[3] * m2[3];
-    const e = m1[0] * m2[4] + m1[2] * m2[5] + m1[4];
-    const f = m1[1] * m2[4] + m1[3] * m2[5] + m1[5];
-    return [a, b, c, d, e, f];
-}
-const transformGradient = (grad, transforms, bbox, units) => {
-    const matrices = transforms.map((transform) => {
-        switch (transform.operation) {
-            case 'scale': {
-                const value = transform.value;
-                return [value[0], 0, 0, value[1], 0, 0];
-            }
-            case 'translate': {
-                const value = transform.value;
-                let x = value[0] || 0;
-                let y = value[1] || 0;
-                if (units === 'objectBoundingBox') {
-                    x = (bbox[2] - bbox[0]) * x;
-                    y = (bbox[3] - bbox[1]) * y;
-                }
-                return [1, 0, 0, 1, x, y];
-            }
-            case 'rotate': {
-                const value = transform.value;
-                const cos = Math.cos(value[0]);
-                const sin = Math.sin(value[0]);
-                return [cos, sin, -sin, cos, 0, 0];
-            }
-            case 'skew': {
-                const value = transform.value;
-                return [1, Math.tan(value[0]), Math.tan(value[1]), 1, 0, 0];
-            }
-            case 'matrix': {
-                const value = transform.value;
-                let x = value[4] || 0;
-                let y = value[5] || 0;
-                if (units === 'objectBoundingBox') {
-                    x = (bbox[2] - bbox[0]) * x;
-                    y = (bbox[3] - bbox[1]) * y;
-                }
-                return [value[0], value[1], value[2], value[3], x, y];
-            }
-            default:
-                return [1, 0, 0, 1, 0, 0];
-        }
-    });
-    const matrix = matrices.reduce(multiplyMatrices, [1, 0, 0, 1, 0, 0]);
-    grad.setTransform(...matrix);
-};
-// Math simplified from https://github.com/devongovett/svgkit/blob/master/src/elements/SVGGradient.js#L104
-const setLinearGradientFill = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('fill' in node.props))
-        return;
-    const bbox = getBoundingBox(node);
-    const gradient = node.props?.fill;
-    if (!gradient)
-        return;
-    const units = gradient.props.gradientUnits || 'objectBoundingBox';
-    const transforms = gradient.props.gradientTransform || [];
-    let x1 = gradient.props.x1 || 0;
-    let y1 = gradient.props.y1 || 0;
-    let x2 = gradient.props.x2 || 1;
-    let y2 = gradient.props.y2 || 0;
-    if (units === 'objectBoundingBox') {
-        const m0 = bbox[2] - bbox[0];
-        const m3 = bbox[3] - bbox[1];
-        const m4 = bbox[0];
-        const m5 = bbox[1];
-        x1 = m0 * x1 + m4;
-        y1 = m3 * y1 + m5;
-        x2 = m0 * x2 + m4;
-        y2 = m3 * y2 + m5;
-    }
-    const grad = ctx.linearGradient(x1, y1, x2, y2);
-    transformGradient(grad, transforms, bbox, units);
-    gradient.children?.forEach((stop) => {
-        grad.stop(stop.props.offset, stop.props.stopColor, stop.props.stopOpacity);
-    });
-    ctx.fill(grad);
-};
-// Math simplified from https://github.com/devongovett/svgkit/blob/master/src/elements/SVGGradient.js#L155
-const setRadialGradientFill = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('fill' in node.props))
-        return;
-    const bbox = getBoundingBox(node);
-    const gradient = node.props?.fill;
-    if (!gradient)
-        return;
-    const units = gradient.props.gradientUnits || 'objectBoundingBox';
-    const transforms = gradient.props.gradientTransform || [];
-    let r = gradient.props.r || 0.5;
-    let cx = gradient.props.cx || 0.5;
-    let cy = gradient.props.cy || 0.5;
-    let fx = gradient.props.fx || cx;
-    let fy = gradient.props.fy || cy;
-    if (units === 'objectBoundingBox') {
-        const m0 = bbox[2] - bbox[0];
-        const m3 = bbox[3] - bbox[1];
-        const m4 = bbox[0];
-        const m5 = bbox[1];
-        r = r * m0;
-        cx = m0 * cx + m4;
-        cy = m3 * cy + m5;
-        fx = m0 * fx + m4;
-        fy = m3 * fy + m5;
-    }
-    const grad = ctx.radialGradient(cx, cy, 0, fx, fy, r);
-    transformGradient(grad, transforms, bbox, units);
-    gradient.children?.forEach((stop) => {
-        grad.stop(stop.props.offset, stop.props.stopColor, stop.props.stopOpacity);
-    });
-    ctx.fill(grad);
-};
-const setFillColor = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('fill' in node.props))
-        return;
-    const fillColor = node.props?.fill;
-    if (fillColor)
-        ctx.fillColor(fillColor);
-};
-const setFill = (ctx, node) => {
-    if (hasLinearGradientFill(node))
-        return setLinearGradientFill(ctx, node);
-    if (hasRadialGradientFill(node))
-        return setRadialGradientFill(ctx, node);
-    return setFillColor(ctx, node);
-};
-const draw = (ctx, node) => {
-    const props = node.props || {};
-    if ('fill' in props && 'stroke' in props && props.fill && props.stroke) {
-        ctx.fillAndStroke(props.fillRule);
-    }
-    else if ('fill' in props && props.fill) {
-        ctx.fill(props.fillRule);
-    }
-    else if ('stroke' in props && props.stroke) {
-        ctx.stroke();
-    }
-    else {
-        ctx.save();
-        ctx.opacity(0);
-        ctx.fill(null);
-        ctx.restore();
-    }
-};
-const noop = () => { };
-const renderFns$1 = {
-    [Tspan]: noop,
-    [TextInstance]: noop,
-    [Path]: renderPath,
-    [Rect]: renderRect,
-    [Line]: renderLine$1,
-    [G]: renderGroup,
-    [Text]: renderSvgText,
-    [Circle]: renderCircle,
-    [Image]: renderImage$1,
-    [Ellipse]: renderEllipse,
-    [Polygon]: renderPolygon,
-    [Polyline]: renderPolyline,
-};
-const renderNode$1 = (ctx, node) => {
-    const renderFn = renderFns$1[node.type];
-    if (renderFn) {
-        renderFn(ctx, node);
-    }
-    else {
-        console.warn(`SVG node of type ${node.type} is not currently supported`);
-    }
-};
-const drawNode = (ctx, node) => {
-    setLineCap(ctx, node);
-    setLineDash(ctx, node);
-    setLineJoin(ctx, node);
-    setStrokeWidth(ctx, node);
-    setStrokeColor(ctx, node);
-    setFill(ctx, node);
-    setStrokeOpacity(ctx, node);
-    setFillOpacity(ctx, node);
-    setOpacity(ctx, node);
-    applyTransformations(ctx, node);
-    renderNode$1(ctx, node);
-    draw(ctx, node);
-};
-const clipPath = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('clipPath' in node.props))
-        return;
-    const value = node.props.clipPath;
-    if (value) {
-        const children = value.children || [];
-        children.forEach((child) => renderNode$1(ctx, child));
-        ctx.clip();
-    }
-};
-const drawChildren = (ctx, node) => {
-    const children = node.children || [];
-    children.forEach((child) => {
-        ctx.save();
-        clipPath(ctx, child);
-        drawNode(ctx, child);
-        drawChildren(ctx, child);
-        ctx.restore();
-    });
-};
-const resolveAspectRatio = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { width, height } = node.box;
-    const { viewBox, preserveAspectRatio } = node.props;
-    const { meetOrSlice = 'meet', align = 'xMidYMid' } = preserveAspectRatio || {};
-    if (viewBox == null || width == null || height == null)
-        return;
-    const x = viewBox?.minX || 0;
-    const y = viewBox?.minY || 0;
-    const logicalWidth = viewBox?.maxX || width;
-    const logicalHeight = viewBox?.maxY || height;
-    const logicalRatio = logicalWidth / logicalHeight;
-    const physicalRatio = width / height;
-    const scaleX = width / logicalWidth;
-    const scaleY = height / logicalHeight;
-    if (align === 'none') {
-        ctx.scale(scaleX, scaleY);
-        ctx.translate(-x, -y);
-        return;
-    }
-    if ((logicalRatio < physicalRatio && meetOrSlice === 'meet') ||
-        (logicalRatio >= physicalRatio && meetOrSlice === 'slice')) {
-        ctx.scale(scaleY, scaleY);
-        switch (align) {
-            case 'xMinYMin':
-            case 'xMinYMid':
-            case 'xMinYMax':
-                ctx.translate(-x, -y);
-                break;
-            case 'xMidYMin':
-            case 'xMidYMid':
-            case 'xMidYMax':
-                ctx.translate(-x - (logicalWidth - (width * logicalHeight) / height) / 2, -y);
-                break;
-            default:
-                ctx.translate(-x - (logicalWidth - (width * logicalHeight) / height), -y);
-        }
-    }
-    else {
-        ctx.scale(scaleX, scaleX);
-        switch (align) {
-            case 'xMinYMin':
-            case 'xMidYMin':
-            case 'xMaxYMin':
-                ctx.translate(-x, -y);
-                break;
-            case 'xMinYMid':
-            case 'xMidYMid':
-            case 'xMaxYMid':
-                ctx.translate(-x, -y - (logicalHeight - (height * logicalWidth) / width) / 2);
-                break;
-            default:
-                ctx.translate(-x, -y - (logicalHeight - (height * logicalWidth) / width));
-        }
-    }
-};
-const moveToOrigin = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { top, left } = node.box;
-    const paddingLeft = node.box.paddingLeft || 0;
-    const paddingTop = node.box.paddingTop || 0;
-    ctx.translate(left + paddingLeft, top + paddingTop);
-};
-const renderSvg = (ctx, node) => {
-    ctx.save();
-    clipNode(ctx, node);
-    moveToOrigin(ctx, node);
-    resolveAspectRatio(ctx, node);
-    drawChildren(ctx, node);
-    ctx.restore();
-};
-
-const black = { value: '#000', opacity: 1 };
-// TODO: parse to number[] in layout to avoid this step
-const parseColor = (hex) => {
-    if (!hex)
-        return black;
-    const parsed = colorString.get(hex);
-    if (!parsed)
-        return black;
-    const value = colorString.to.hex(parsed.value.slice(0, 3));
-    const opacity = parsed.value[3];
-    return { value, opacity };
-};
-
-const DEST_REGEXP = /^#.+/;
-const isSrcId$1 = (src) => src.match(DEST_REGEXP);
-const renderAttachment = (ctx, attachment) => {
-    const { xOffset = 0, yOffset = 0, width, height, image } = attachment;
-    ctx.translate(-width + xOffset, -height + yOffset);
-    ctx.image(image, 0, 0, {
-        fit: [width, height],
-        align: 'center',
-        valign: 'bottom',
-    });
-};
-const renderAttachments = (ctx, run) => {
-    if (!run.glyphs)
-        return;
-    if (!run.positions)
-        return;
-    const font = run.attributes.font?.[0];
-    if (!font)
-        return;
-    ctx.save();
-    const space = font.glyphForCodePoint(0x20);
-    const objectReplacement = font.glyphForCodePoint(0xfffc);
-    let attachmentAdvance = 0;
-    for (let i = 0; i < run.glyphs.length; i += 1) {
-        const position = run.positions[i];
-        const glyph = run.glyphs[i];
-        attachmentAdvance += position.xAdvance || 0;
-        if (glyph.id === objectReplacement.id && run.attributes.attachment) {
-            ctx.translate(attachmentAdvance, position.yOffset || 0);
-            renderAttachment(ctx, run.attributes.attachment);
-            run.glyphs[i] = space;
-            attachmentAdvance = 0;
-        }
-    }
-    ctx.restore();
-};
-const renderRun = (ctx, run) => {
-    if (!run.glyphs)
-        return;
-    if (!run.positions)
-        return;
-    const font = run.attributes.font?.[0];
-    if (!font)
-        return;
-    const { fontSize, link } = run.attributes;
-    const color = parseColor(run.attributes.color);
-    const opacity = isNil(run.attributes.opacity)
-        ? color.opacity
-        : run.attributes.opacity;
-    const { height = 0, descent = 0, xAdvance = 0 } = run;
-    ctx.fillColor(color.value);
-    ctx.fillOpacity(opacity);
-    if (link) {
-        if (isSrcId$1(link)) {
-            ctx.goTo(0, -height - descent, xAdvance, height, link.slice(1));
-        }
-        else {
-            ctx.link(0, -height - descent, xAdvance, height, link);
-        }
-    }
-    renderAttachments(ctx, run);
-    ctx.font(font.type === 'STANDARD' ? font.fullName : font, fontSize);
-    try {
-        renderGlyphs(ctx, run.glyphs, run.positions, 0, 0);
-    }
-    catch (error) {
-        console.log(error);
-    }
-    ctx.translate(xAdvance, 0);
-};
-const renderBackground$1 = (ctx, rect, backgroundColor) => {
-    const color = parseColor(backgroundColor);
-    ctx.save();
-    ctx.fillOpacity(color.opacity);
-    ctx.rect(rect.x, rect.y, rect.width, rect.height);
-    ctx.fill(color.value);
-    ctx.restore();
-};
-const renderDecorationLine = (ctx, decorationLine) => {
-    ctx.save();
-    ctx.lineWidth(decorationLine.rect.height);
-    ctx.strokeOpacity(decorationLine.opacity);
-    if (/dashed/.test(decorationLine.style)) {
-        ctx.dash(3 * decorationLine.rect.height, {});
-    }
-    else if (/dotted/.test(decorationLine.style)) {
-        ctx.dash(decorationLine.rect.height, {});
-    }
-    if (/wavy/.test(decorationLine.style)) {
-        const dist = Math.max(2, decorationLine.rect.height);
-        let step = 1.1 * dist;
-        const stepCount = Math.floor(decorationLine.rect.width / (2 * step));
-        // Adjust step to fill entire width
-        const remainingWidth = decorationLine.rect.width - stepCount * 2 * step;
-        const adjustment = remainingWidth / stepCount / 2;
-        step += adjustment;
-        const cp1y = decorationLine.rect.y + dist;
-        const cp2y = decorationLine.rect.y - dist;
-        let { x } = decorationLine.rect;
-        ctx.moveTo(decorationLine.rect.x, decorationLine.rect.y);
-        for (let i = 0; i < stepCount; i += 1) {
-            ctx.bezierCurveTo(x + step, cp1y, x + step, cp2y, x + 2 * step, decorationLine.rect.y);
-            x += 2 * step;
-        }
-    }
-    else {
-        ctx.moveTo(decorationLine.rect.x, decorationLine.rect.y);
-        ctx.lineTo(decorationLine.rect.x + decorationLine.rect.width, decorationLine.rect.y);
-        if (/double/.test(decorationLine.style)) {
-            ctx.moveTo(decorationLine.rect.x, decorationLine.rect.y + decorationLine.rect.height * 2);
-            ctx.lineTo(decorationLine.rect.x + decorationLine.rect.width, decorationLine.rect.y + decorationLine.rect.height * 2);
-        }
-    }
-    ctx.stroke(decorationLine.color);
-    ctx.restore();
-};
-const renderLine = (ctx, line) => {
-    if (!line.box)
-        return;
-    const lineAscent = line.ascent || 0;
-    ctx.save();
-    ctx.translate(line.box.x, line.box.y + lineAscent);
-    for (let i = 0; i < line.runs.length; i += 1) {
-        const run = line.runs[i];
-        const isLastRun = i === line.runs.length - 1;
-        if (run.attributes.backgroundColor) {
-            const xAdvance = run.xAdvance ?? 0;
-            const overflowRight = isLastRun ? line.overflowRight ?? 0 : 0;
-            const backgroundRect = {
-                x: 0,
-                y: -lineAscent,
-                height: line.box.height,
-                width: xAdvance - overflowRight,
-            };
-            renderBackground$1(ctx, backgroundRect, run.attributes.backgroundColor);
-        }
-        renderRun(ctx, run);
-    }
-    ctx.restore();
-    ctx.save();
-    ctx.translate(line.box.x, line.box.y);
-    if (line.decorationLines) {
-        for (let i = 0; i < line.decorationLines.length; i += 1) {
-            const decorationLine = line.decorationLines[i];
-            renderDecorationLine(ctx, decorationLine);
-        }
-    }
-    ctx.restore();
-};
-const renderBlock = (ctx, block) => {
-    block.forEach((line) => {
-        renderLine(ctx, line);
-    });
-};
-const renderText = (ctx, node) => {
-    if (!node.box)
-        return;
-    if (!node.lines)
-        return;
-    const { top, left } = node.box;
-    const blocks = [node.lines];
-    const paddingTop = node.box?.paddingTop || 0;
-    const paddingLeft = node.box?.paddingLeft || 0;
-    const initialY = node.lines[0] ? node.lines[0].box.y : 0;
-    const offsetX = node.alignOffset || 0;
-    ctx.save();
-    ctx.translate(left + paddingLeft - offsetX, top + paddingTop - initialY);
-    blocks.forEach((block) => {
-        renderBlock(ctx, block);
-    });
-    ctx.restore();
-};
-
-const renderPage = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { width, height } = node.box;
-    const dpi = node.props?.dpi || 72;
-    const userUnit = dpi / 72;
-    ctx.addPage({ size: [width, height], margin: 0, userUnit });
-};
-
-const renderNote = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { top, left } = node.box;
-    const value = node?.children?.[0].value || '';
-    const color = node.style?.backgroundColor;
-    ctx.note(left, top, 0, 0, value, { color });
-};
-
-const embedImage = (ctx, node) => {
-    const src = node.image.data;
-    let image;
-    if (typeof src === 'string') {
-        image = ctx._imageRegistry[src];
-    }
-    if (!image) {
-        image = ctx.openImage(src);
-    }
-    if (!image.obj) {
-        image.embed(ctx);
-    }
-    return image;
-};
-
-const isNumeric = (n) => {
-    return !Number.isNaN(parseFloat(n)) && Number.isFinite(n);
-};
-const applyContainObjectFit = (cw, ch, iw, ih, px, py) => {
-    const cr = cw / ch;
-    const ir = iw / ih;
-    const pxp = matchPercent(px ?? null);
-    const pyp = matchPercent(py ?? null);
-    const pxv = pxp ? pxp.percent : 0.5;
-    const pyv = pyp ? pyp.percent : 0.5;
-    if (cr > ir) {
-        const height = ch;
-        const width = height * ir;
-        const yOffset = isNumeric(py) ? py : 0;
-        const xOffset = isNumeric(px) ? px : (cw - width) * pxv;
-        return { width, height, xOffset, yOffset };
-    }
-    const width = cw;
-    const height = width / ir;
-    const xOffset = isNumeric(px) ? px : 0;
-    const yOffset = isNumeric(py) ? py : (ch - height) * pyv;
-    return { width, height, yOffset, xOffset };
-};
-const applyNoneObjectFit = (cw, ch, iw, ih, px, py) => {
-    const width = iw;
-    const height = ih;
-    const pxp = matchPercent(px ?? null);
-    const pyp = matchPercent(py ?? null);
-    const pxv = pxp ? pxp.percent : 0.5;
-    const pyv = pyp ? pyp.percent : 0.5;
-    const xOffset = isNumeric(px) ? px : (cw - width) * pxv;
-    const yOffset = isNumeric(py) ? py : (ch - height) * pyv;
-    return { width, height, xOffset, yOffset };
-};
-const applyCoverObjectFit = (cw, ch, iw, ih, px, py) => {
-    const ir = iw / ih;
-    const cr = cw / ch;
-    const pxp = matchPercent(px ?? null);
-    const pyp = matchPercent(py ?? null);
-    const pxv = pxp ? pxp.percent : 0.5;
-    const pyv = pyp ? pyp.percent : 0.5;
-    if (cr > ir) {
-        const width = cw;
-        const height = width / ir;
-        const xOffset = isNumeric(px) ? px : 0;
-        const yOffset = isNumeric(py) ? py : (ch - height) * pyv;
-        return { width, height, yOffset, xOffset };
-    }
-    const height = ch;
-    const width = height * ir;
-    const xOffset = isNumeric(px) ? px : (cw - width) * pxv;
-    const yOffset = isNumeric(py) ? py : 0;
-    return { width, height, xOffset, yOffset };
-};
-const applyScaleDownObjectFit = (cw, ch, iw, ih, px, py) => {
-    const containDimension = applyContainObjectFit(cw, ch, iw, ih, px, py);
-    const noneDimension = applyNoneObjectFit(cw, ch, iw, ih, px, py);
-    return containDimension.width < noneDimension.width
-        ? containDimension
-        : noneDimension;
-};
-const applyFillObjectFit = (cw, ch, px, py) => {
-    return {
-        width: cw,
-        height: ch,
-        xOffset: matchPercent(px ?? null) ? 0 : px || 0,
-        yOffset: matchPercent(py ?? null) ? 0 : py || 0,
-    };
-};
-const resolveObjectFit = (type = 'fill', cw, ch, iw, ih, px, py) => {
-    switch (type) {
-        case 'contain':
-            return applyContainObjectFit(cw, ch, iw, ih, px, py);
-        case 'cover':
-            return applyCoverObjectFit(cw, ch, iw, ih, px, py);
-        case 'none':
-            return applyNoneObjectFit(cw, ch, iw, ih, px, py);
-        case 'scale-down':
-            return applyScaleDownObjectFit(cw, ch, iw, ih, px, py);
-        default:
-            return applyFillObjectFit(cw, ch, px, py);
-    }
-};
-
-const drawImage = (ctx, node, options) => {
-    if (!node.box)
-        return;
-    if (!node.image)
-        return;
-    const { left, top } = node.box;
-    const opacity = node.style?.opacity;
-    const objectFit = node.style?.objectFit;
-    const objectPositionX = node.style?.objectPositionX;
-    const objectPositionY = node.style?.objectPositionY;
-    const paddingTop = node.box.paddingTop || 0;
-    const paddingRight = node.box.paddingRight || 0;
-    const paddingBottom = node.box.paddingBottom || 0;
-    const paddingLeft = node.box.paddingLeft || 0;
-    const imageCache = options.imageCache || new Map();
-    const { width, height, xOffset, yOffset } = resolveObjectFit(objectFit, node.box.width - paddingLeft - paddingRight, node.box.height - paddingTop - paddingBottom, node.image.width, node.image.height, objectPositionX, objectPositionY);
-    if (node.image.data) {
-        if (width !== 0 && height !== 0) {
-            const cacheKey = node.image.key;
-            const image = imageCache.get(cacheKey) || embedImage(ctx, node);
-            if (cacheKey)
-                imageCache.set(cacheKey, image);
-            const imageOpacity = isNil(opacity) ? 1 : opacity;
-            ctx
-                .fillOpacity(imageOpacity)
-                .image(image, left + paddingLeft + xOffset, top + paddingTop + yOffset, {
-                width,
-                height,
-            });
-        }
-        else {
-            console.warn(`Image with src '${JSON.stringify(node.props.src || node.props.source)}' skipped due to invalid dimensions`);
-        }
-    }
-};
-const renderImage = (ctx, node, options) => {
-    ctx.save();
-    clipNode(ctx, node);
-    drawImage(ctx, node, options);
-    ctx.restore();
-};
-
-const CONTENT_COLOR = '#a1c6e7';
-const PADDING_COLOR = '#c4deb9';
-const MARGIN_COLOR = '#f8cca1';
-// TODO: Draw debug boxes using clipping to enhance quality
-const debugContent = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { left, top, width, height, paddingLeft = 0, paddingTop = 0, paddingRight = 0, paddingBottom = 0, borderLeftWidth = 0, borderTopWidth = 0, borderRightWidth = 0, borderBottomWidth = 0, } = node.box;
-    ctx
-        .fillColor(CONTENT_COLOR)
-        .opacity(0.5)
-        .rect(left + paddingLeft + borderLeftWidth, top + paddingTop + borderTopWidth, width - paddingLeft - paddingRight - borderRightWidth - borderLeftWidth, height - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth)
-        .fill();
-};
-const debugPadding = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { left, top, width, height, paddingLeft = 0, paddingTop = 0, paddingRight = 0, paddingBottom = 0, borderLeftWidth = 0, borderTopWidth = 0, borderRightWidth = 0, borderBottomWidth = 0, } = node.box;
-    ctx.fillColor(PADDING_COLOR).opacity(0.5);
-    // Padding top
-    ctx
-        .rect(left + paddingLeft + borderLeftWidth, top + borderTopWidth, width - paddingRight - paddingLeft - borderLeftWidth - borderRightWidth, paddingTop)
-        .fill();
-    // Padding left
-    ctx
-        .rect(left + borderLeftWidth, top + borderTopWidth, paddingLeft, height - borderTopWidth - borderBottomWidth)
-        .fill();
-    // Padding right
-    ctx
-        .rect(left + width - paddingRight - borderRightWidth, top + borderTopWidth, paddingRight, height - borderTopWidth - borderBottomWidth)
-        .fill();
-    // Padding bottom
-    ctx
-        .rect(left + paddingLeft + borderLeftWidth, top + height - paddingBottom - borderBottomWidth, width - paddingRight - paddingLeft - borderLeftWidth - borderRightWidth, paddingBottom)
-        .fill();
-};
-const debugMargin = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { left, top, width, height } = node.box;
-    const { marginLeft = 0, marginTop = 0, marginRight = 0, marginBottom = 0, } = node.box;
-    ctx.fillColor(MARGIN_COLOR).opacity(0.5);
-    // Margin top
-    ctx.rect(left, top - marginTop, width, marginTop).fill();
-    // Margin left
-    ctx
-        .rect(left - marginLeft, top - marginTop, marginLeft, height + marginTop + marginBottom)
-        .fill();
-    // Margin right
-    ctx
-        .rect(left + width, top - marginTop, marginRight, height + marginTop + marginBottom)
-        .fill();
-    // Margin bottom
-    ctx.rect(left, top + height, width, marginBottom).fill();
-};
-const debugText = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { left, top, width, height } = node.box;
-    const { marginLeft = 0, marginTop = 0, marginRight = 0, marginBottom = 0, } = node.box;
-    const roundedWidth = Math.round(width + marginLeft + marginRight);
-    const roundedHeight = Math.round(height + marginTop + marginBottom);
-    ctx
-        .fontSize(6)
-        .opacity(1)
-        .fillColor('black')
-        .text(`${roundedWidth} x ${roundedHeight}`, left - marginLeft, Math.max(top - marginTop - 4, 1), { width: Infinity });
-};
-const debugOrigin = (ctx, node) => {
-    if (node.origin) {
-        ctx
-            .circle(node.origin.left, node.origin.top, 3)
-            .fill('red')
-            .circle(node.origin.left, node.origin.top, 5)
-            .stroke('red');
-    }
-};
-const renderDebug = (ctx, node) => {
-    if (!node.props)
-        return;
-    if (!('debug' in node.props) || !node.props.debug)
-        return;
-    ctx.save();
-    debugContent(ctx, node);
-    debugPadding(ctx, node);
-    debugMargin(ctx, node);
-    debugText(ctx, node);
-    debugOrigin(ctx, node);
-    ctx.restore();
-};
-
-const availableMethods = [
-    'dash',
-    'clip',
-    'save',
-    'path',
-    'fill',
-    'font',
-    'text',
-    'rect',
-    'scale',
-    'moveTo',
-    'lineTo',
-    'stroke',
-    'rotate',
-    'circle',
-    'lineCap',
-    'opacity',
-    'ellipse',
-    'polygon',
-    'restore',
-    'lineJoin',
-    'fontSize',
-    'fillColor',
-    'lineWidth',
-    'translate',
-    'miterLimit',
-    'strokeColor',
-    'fillOpacity',
-    'roundedRect',
-    'fillAndStroke',
-    'strokeOpacity',
-    'bezierCurveTo',
-    'quadraticCurveTo',
-    'linearGradient',
-    'radialGradient',
-];
-const painter = (ctx) => {
-    const p = availableMethods.reduce((acc, prop) => ({
-        ...acc,
-        [prop]: (...args) => {
-            // @ts-expect-error ctx[prop] is a function
-            ctx[prop](...args);
-            return p;
-        },
-    }), {});
-    return p;
-};
-const renderCanvas = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { top, left, width, height } = node.box;
-    const paddingTop = node.box.paddingTop || 0;
-    const paddingLeft = node.box.paddingLeft || 0;
-    const paddingRight = node.box.paddingRight || 0;
-    const paddingBottom = node.box.paddingBottom || 0;
-    const availableWidth = width - paddingLeft - paddingRight;
-    const availableHeight = height - paddingTop - paddingBottom;
-    if (!availableWidth || !availableHeight) {
-        console.warn('Canvas element has null width or height. Please provide valid values via the `style` prop in order to correctly render it.');
-    }
-    ctx.save().translate(left + paddingLeft, top + paddingTop);
-    if (node.props.paint) {
-        node.props.paint(painter(ctx), availableWidth, availableHeight);
-    }
-    ctx.restore();
-};
-
-// Ref: https://www.w3.org/TR/css-backgrounds-3/#borders
-// This constant is used to approximate a symmetrical arc using a cubic Bezier curve.
-const KAPPA = 4.0 * ((Math.sqrt(2) - 1.0) / 3.0);
-const clipBorderTop = (ctx, layout, style, rtr, rtl) => {
-    const { top, left, width, height } = layout;
-    const { borderTopWidth, borderRightWidth, borderLeftWidth } = style;
-    // Clip outer top border edge
-    ctx.moveTo(left + rtl, top);
-    ctx.lineTo(left + width - rtr, top);
-    // Ellipse coefficients outer top right cap
-    const c0 = rtr * (1.0 - KAPPA);
-    // Clip outer top right cap
-    ctx.bezierCurveTo(left + width - c0, top, left + width, top + c0, left + width, top + rtr);
-    // Move down in case the margin exceedes the radius
-    const topRightYCoord = top + Math.max(borderTopWidth, rtr);
-    ctx.lineTo(left + width, topRightYCoord);
-    // Clip inner top right cap
-    ctx.lineTo(left + width - borderRightWidth, topRightYCoord);
-    // Ellipse coefficients inner top right cap
-    const innerTopRightRadiusX = Math.max(rtr - borderRightWidth, 0);
-    const innerTopRightRadiusY = Math.max(rtr - borderTopWidth, 0);
-    const c1 = innerTopRightRadiusX * (1.0 - KAPPA);
-    const c2 = innerTopRightRadiusY * (1.0 - KAPPA);
-    // Clip inner top right cap
-    ctx.bezierCurveTo(left + width - borderRightWidth, top + borderTopWidth + c2, left + width - borderRightWidth - c1, top + borderTopWidth, left + width - borderRightWidth - innerTopRightRadiusX, top + borderTopWidth);
-    // Clip inner top border edge
-    ctx.lineTo(left + Math.max(rtl, borderLeftWidth), top + borderTopWidth);
-    // Ellipse coefficients inner top left cap
-    const innerTopLeftRadiusX = Math.max(rtl - borderLeftWidth, 0);
-    const innerTopLeftRadiusY = Math.max(rtl - borderTopWidth, 0);
-    const c3 = innerTopLeftRadiusX * (1.0 - KAPPA);
-    const c4 = innerTopLeftRadiusY * (1.0 - KAPPA);
-    const topLeftYCoord = top + Math.max(borderTopWidth, rtl);
-    // Clip inner top left cap
-    ctx.bezierCurveTo(left + borderLeftWidth + c3, top + borderTopWidth, left + borderLeftWidth, top + borderTopWidth + c4, left + borderLeftWidth, topLeftYCoord);
-    ctx.lineTo(left, topLeftYCoord);
-    // Move down in case the margin exceedes the radius
-    ctx.lineTo(left, top + rtl);
-    // Ellipse coefficients outer top left cap
-    const c5 = rtl * (1.0 - KAPPA);
-    // Clip outer top left cap
-    ctx.bezierCurveTo(left, top + c5, left + c5, top, left + rtl, top);
-    ctx.closePath();
-    ctx.clip();
-    // Clip border top cap joins
-    if (borderRightWidth) {
-        const trSlope = -borderTopWidth / borderRightWidth;
-        ctx.moveTo(left + width / 2, trSlope * (-width / 2) + top);
-        ctx.lineTo(left + width, top);
-        ctx.lineTo(left, top);
-        ctx.lineTo(left, top + height);
-        ctx.closePath();
-        ctx.clip();
-    }
-    if (borderLeftWidth) {
-        const trSlope = -borderTopWidth / borderLeftWidth;
-        ctx.moveTo(left + width / 2, trSlope * (-width / 2) + top);
-        ctx.lineTo(left, top);
-        ctx.lineTo(left + width, top);
-        ctx.lineTo(left + width, top + height);
-        ctx.closePath();
-        ctx.clip();
-    }
-};
-const fillBorderTop = (ctx, layout, style, rtr, rtl) => {
-    const { top, left, width } = layout;
-    const { borderTopColor, borderTopWidth, borderTopStyle, borderRightWidth, borderLeftWidth, } = style;
-    const c0 = rtl * (1.0 - KAPPA);
-    const c1 = rtr * (1.0 - KAPPA);
-    ctx.moveTo(left, top + Math.max(rtl, borderTopWidth));
-    ctx.bezierCurveTo(left, top + c0, left + c0, top, left + rtl, top);
-    ctx.lineTo(left + width - rtr, top);
-    ctx.bezierCurveTo(left + width - c1, top, left + width, top + c1, left + width, top + rtr);
-    ctx.strokeColor(borderTopColor);
-    ctx.lineWidth(Math.max(borderRightWidth, borderTopWidth, borderLeftWidth) * 2);
-    if (borderTopStyle === 'dashed') {
-        ctx.dash(borderTopWidth * 2, { space: borderTopWidth * 1.2 });
-    }
-    else if (borderTopStyle === 'dotted') {
-        ctx.dash(borderTopWidth, { space: borderTopWidth * 1.2 });
-    }
-    ctx.stroke();
-    ctx.undash();
-};
-const clipBorderRight = (ctx, layout, style, rtr, rbr) => {
-    const { top, left, width, height } = layout;
-    const { borderTopWidth, borderRightWidth, borderBottomWidth } = style;
-    // Clip outer right border edge
-    ctx.moveTo(left + width, top + rtr);
-    ctx.lineTo(left + width, top + height - rbr);
-    // Ellipse coefficients outer bottom right cap
-    const c0 = rbr * (1.0 - KAPPA);
-    // Clip outer top right cap
-    ctx.bezierCurveTo(left + width, top + height - c0, left + width - c0, top + height, left + width - rbr, top + height);
-    // Move left in case the margin exceedes the radius
-    const topBottomXCoord = left + width - Math.max(borderRightWidth, rbr);
-    ctx.lineTo(topBottomXCoord, top + height);
-    // Clip inner bottom right cap
-    ctx.lineTo(topBottomXCoord, top + height - borderBottomWidth);
-    // Ellipse coefficients inner bottom right cap
-    const innerBottomRightRadiusX = Math.max(rbr - borderRightWidth, 0);
-    const innerBottomRightRadiusY = Math.max(rbr - borderBottomWidth, 0);
-    const c1 = innerBottomRightRadiusX * (1.0 - KAPPA);
-    const c2 = innerBottomRightRadiusY * (1.0 - KAPPA);
-    // Clip inner top right cap
-    ctx.bezierCurveTo(left + width - borderRightWidth - c1, top + height - borderBottomWidth, left + width - borderRightWidth, top + height - borderBottomWidth - c2, left + width - borderRightWidth, top + height - Math.max(rbr, borderBottomWidth));
-    // Clip inner right border edge
-    ctx.lineTo(left + width - borderRightWidth, top + Math.max(rtr, borderTopWidth));
-    // Ellipse coefficients inner top right cap
-    const innerTopRightRadiusX = Math.max(rtr - borderRightWidth, 0);
-    const innerTopRightRadiusY = Math.max(rtr - borderTopWidth, 0);
-    const c3 = innerTopRightRadiusX * (1.0 - KAPPA);
-    const c4 = innerTopRightRadiusY * (1.0 - KAPPA);
-    const topRightXCoord = left + width - Math.max(rtr, borderRightWidth);
-    // Clip inner top left cap
-    ctx.bezierCurveTo(left + width - borderRightWidth, top + borderTopWidth + c4, left + width - borderRightWidth - c3, top + borderTopWidth, topRightXCoord, top + borderTopWidth);
-    ctx.lineTo(topRightXCoord, top);
-    // Move right in case the margin exceedes the radius
-    ctx.lineTo(left + width - rtr, top);
-    // Ellipse coefficients outer top right cap
-    const c5 = rtr * (1.0 - KAPPA);
-    // Clip outer top right cap
-    ctx.bezierCurveTo(left + width - c5, top, left + width, top + c5, left + width, top + rtr);
-    ctx.closePath();
-    ctx.clip();
-    // Clip border right cap joins
-    if (borderTopWidth) {
-        const trSlope = -borderTopWidth / borderRightWidth;
-        ctx.moveTo(left + width / 2, trSlope * (-width / 2) + top);
-        ctx.lineTo(left + width, top);
-        ctx.lineTo(left + width, top + height);
-        ctx.lineTo(left, top + height);
-        ctx.closePath();
-        ctx.clip();
-    }
-    if (borderBottomWidth) {
-        const brSlope = borderBottomWidth / borderRightWidth;
-        ctx.moveTo(left + width / 2, brSlope * (-width / 2) + top + height);
-        ctx.lineTo(left + width, top + height);
-        ctx.lineTo(left + width, top);
-        ctx.lineTo(left, top);
-        ctx.closePath();
-        ctx.clip();
-    }
-};
-const fillBorderRight = (ctx, layout, style, rtr, rbr) => {
-    const { top, left, width, height } = layout;
-    const { borderRightColor, borderRightStyle, borderRightWidth, borderTopWidth, borderBottomWidth, } = style;
-    const c0 = rbr * (1.0 - KAPPA);
-    const c1 = rtr * (1.0 - KAPPA);
-    ctx.moveTo(left + width - rtr, top);
-    ctx.bezierCurveTo(left + width - c1, top, left + width, top + c1, left + width, top + rtr);
-    ctx.lineTo(left + width, top + height - rbr);
-    ctx.bezierCurveTo(left + width, top + height - c0, left + width - c0, top + height, left + width - rbr, top + height);
-    ctx.strokeColor(borderRightColor);
-    ctx.lineWidth(Math.max(borderRightWidth, borderTopWidth, borderBottomWidth) * 2);
-    if (borderRightStyle === 'dashed') {
-        ctx.dash(borderRightWidth * 2, { space: borderRightWidth * 1.2 });
-    }
-    else if (borderRightStyle === 'dotted') {
-        ctx.dash(borderRightWidth, { space: borderRightWidth * 1.2 });
-    }
-    ctx.stroke();
-    ctx.undash();
-};
-const clipBorderBottom = (ctx, layout, style, rbl, rbr) => {
-    const { top, left, width, height } = layout;
-    const { borderBottomWidth, borderRightWidth, borderLeftWidth } = style;
-    // Clip outer top border edge
-    ctx.moveTo(left + width - rbr, top + height);
-    ctx.lineTo(left + rbl, top + height);
-    // Ellipse coefficients outer top right cap
-    const c0 = rbl * (1.0 - KAPPA);
-    // Clip outer top right cap
-    ctx.bezierCurveTo(left + c0, top + height, left, top + height - c0, left, top + height - rbl);
-    // Move up in case the margin exceedes the radius
-    const bottomLeftYCoord = top + height - Math.max(borderBottomWidth, rbl);
-    ctx.lineTo(left, bottomLeftYCoord);
-    // Clip inner bottom left cap
-    ctx.lineTo(left + borderLeftWidth, bottomLeftYCoord);
-    // Ellipse coefficients inner top right cap
-    const innerBottomLeftRadiusX = Math.max(rbl - borderLeftWidth, 0);
-    const innerBottomLeftRadiusY = Math.max(rbl - borderBottomWidth, 0);
-    const c1 = innerBottomLeftRadiusX * (1.0 - KAPPA);
-    const c2 = innerBottomLeftRadiusY * (1.0 - KAPPA);
-    // Clip inner bottom left cap
-    ctx.bezierCurveTo(left + borderLeftWidth, top + height - borderBottomWidth - c2, left + borderLeftWidth + c1, top + height - borderBottomWidth, left + borderLeftWidth + innerBottomLeftRadiusX, top + height - borderBottomWidth);
-    // Clip inner bottom border edge
-    ctx.lineTo(left + width - Math.max(rbr, borderRightWidth), top + height - borderBottomWidth);
-    // Ellipse coefficients inner top left cap
-    const innerBottomRightRadiusX = Math.max(rbr - borderRightWidth, 0);
-    const innerBottomRightRadiusY = Math.max(rbr - borderBottomWidth, 0);
-    const c3 = innerBottomRightRadiusX * (1.0 - KAPPA);
-    const c4 = innerBottomRightRadiusY * (1.0 - KAPPA);
-    const bottomRightYCoord = top + height - Math.max(borderBottomWidth, rbr);
-    // Clip inner top left cap
-    ctx.bezierCurveTo(left + width - borderRightWidth - c3, top + height - borderBottomWidth, left + width - borderRightWidth, top + height - borderBottomWidth - c4, left + width - borderRightWidth, bottomRightYCoord);
-    ctx.lineTo(left + width, bottomRightYCoord);
-    // Move down in case the margin exceedes the radius
-    ctx.lineTo(left + width, top + height - rbr);
-    // Ellipse coefficients outer top left cap
-    const c5 = rbr * (1.0 - KAPPA);
-    // Clip outer top left cap
-    ctx.bezierCurveTo(left + width, top + height - c5, left + width - c5, top + height, left + width - rbr, top + height);
-    ctx.closePath();
-    ctx.clip();
-    // Clip border bottom cap joins
-    if (borderRightWidth) {
-        const brSlope = borderBottomWidth / borderRightWidth;
-        ctx.moveTo(left + width / 2, brSlope * (-width / 2) + top + height);
-        ctx.lineTo(left + width, top + height);
-        ctx.lineTo(left, top + height);
-        ctx.lineTo(left, top);
-        ctx.closePath();
-        ctx.clip();
-    }
-    if (borderLeftWidth) {
-        const trSlope = -borderBottomWidth / borderLeftWidth;
-        ctx.moveTo(left + width / 2, trSlope * (width / 2) + top + height);
-        ctx.lineTo(left, top + height);
-        ctx.lineTo(left + width, top + height);
-        ctx.lineTo(left + width, top);
-        ctx.closePath();
-        ctx.clip();
-    }
-};
-const fillBorderBottom = (ctx, layout, style, rbl, rbr) => {
-    const { top, left, width, height } = layout;
-    const { borderBottomColor, borderBottomStyle, borderBottomWidth, borderRightWidth, borderLeftWidth, } = style;
-    const c0 = rbl * (1.0 - KAPPA);
-    const c1 = rbr * (1.0 - KAPPA);
-    ctx.moveTo(left + width, top + height - rbr);
-    ctx.bezierCurveTo(left + width, top + height - c1, left + width - c1, top + height, left + width - rbr, top + height);
-    ctx.lineTo(left + rbl, top + height);
-    ctx.bezierCurveTo(left + c0, top + height, left, top + height - c0, left, top + height - rbl);
-    ctx.strokeColor(borderBottomColor);
-    ctx.lineWidth(Math.max(borderBottomWidth, borderRightWidth, borderLeftWidth) * 2);
-    if (borderBottomStyle === 'dashed') {
-        ctx.dash(borderBottomWidth * 2, { space: borderBottomWidth * 1.2 });
-    }
-    else if (borderBottomStyle === 'dotted') {
-        ctx.dash(borderBottomWidth, { space: borderBottomWidth * 1.2 });
-    }
-    ctx.stroke();
-    ctx.undash();
-};
-const clipBorderLeft = (ctx, layout, style, rbl, rtl) => {
-    const { top, left, width, height } = layout;
-    const { borderTopWidth, borderLeftWidth, borderBottomWidth } = style;
-    // Clip outer left border edge
-    ctx.moveTo(left, top + height - rbl);
-    ctx.lineTo(left, top + rtl);
-    // Ellipse coefficients outer top left cap
-    const c0 = rtl * (1.0 - KAPPA);
-    // Clip outer top left cap
-    ctx.bezierCurveTo(left, top + c0, left + c0, top, left + rtl, top);
-    // Move right in case the margin exceedes the radius
-    const topLeftCoordX = left + Math.max(borderLeftWidth, rtl);
-    ctx.lineTo(topLeftCoordX, top);
-    // Clip inner top left cap
-    ctx.lineTo(topLeftCoordX, top + borderTopWidth);
-    // Ellipse coefficients inner top left cap
-    const innerTopLeftRadiusX = Math.max(rtl - borderLeftWidth, 0);
-    const innerTopLeftRadiusY = Math.max(rtl - borderTopWidth, 0);
-    const c1 = innerTopLeftRadiusX * (1.0 - KAPPA);
-    const c2 = innerTopLeftRadiusY * (1.0 - KAPPA);
-    // Clip inner top right cap
-    ctx.bezierCurveTo(left + borderLeftWidth + c1, top + borderTopWidth, left + borderLeftWidth, top + borderTopWidth + c2, left + borderLeftWidth, top + Math.max(rtl, borderTopWidth));
-    // Clip inner left border edge
-    ctx.lineTo(left + borderLeftWidth, top + height - Math.max(rbl, borderBottomWidth));
-    // Ellipse coefficients inner bottom left cap
-    const innerBottomLeftRadiusX = Math.max(rbl - borderLeftWidth, 0);
-    const innerBottomLeftRadiusY = Math.max(rbl - borderBottomWidth, 0);
-    const c3 = innerBottomLeftRadiusX * (1.0 - KAPPA);
-    const c4 = innerBottomLeftRadiusY * (1.0 - KAPPA);
-    const bottomLeftXCoord = left + Math.max(rbl, borderLeftWidth);
-    // Clip inner top left cap
-    ctx.bezierCurveTo(left + borderLeftWidth, top + height - borderBottomWidth - c4, left + borderLeftWidth + c3, top + height - borderBottomWidth, bottomLeftXCoord, top + height - borderBottomWidth);
-    ctx.lineTo(bottomLeftXCoord, top + height);
-    // Move left in case the margin exceedes the radius
-    ctx.lineTo(left + rbl, top + height);
-    // Ellipse coefficients outer top right cap
-    const c5 = rbl * (1.0 - KAPPA);
-    // Clip outer top right cap
-    ctx.bezierCurveTo(left + c5, top + height, left, top + height - c5, left, top + height - rbl);
-    ctx.closePath();
-    ctx.clip();
-    // Clip border right cap joins
-    if (borderBottomWidth) {
-        const trSlope = -borderBottomWidth / borderLeftWidth;
-        ctx.moveTo(left + width / 2, trSlope * (width / 2) + top + height);
-        ctx.lineTo(left, top + height);
-        ctx.lineTo(left, top);
-        ctx.lineTo(left + width, top);
-        ctx.closePath();
-        ctx.clip();
-    }
-    if (borderBottomWidth) {
-        const trSlope = -borderTopWidth / borderLeftWidth;
-        ctx.moveTo(left + width / 2, trSlope * (-width / 2) + top);
-        ctx.lineTo(left, top);
-        ctx.lineTo(left, top + height);
-        ctx.lineTo(left + width, top + height);
-        ctx.closePath();
-        ctx.clip();
-    }
-};
-const fillBorderLeft = (ctx, layout, style, rbl, rtl) => {
-    const { top, left, height } = layout;
-    const { borderLeftColor, borderLeftStyle, borderLeftWidth, borderTopWidth, borderBottomWidth, } = style;
-    const c0 = rbl * (1.0 - KAPPA);
-    const c1 = rtl * (1.0 - KAPPA);
-    ctx.moveTo(left + rbl, top + height);
-    ctx.bezierCurveTo(left + c0, top + height, left, top + height - c0, left, top + height - rbl);
-    ctx.lineTo(left, top + rtl);
-    ctx.bezierCurveTo(left, top + c1, left + c1, top, left + rtl, top);
-    ctx.strokeColor(borderLeftColor);
-    ctx.lineWidth(Math.max(borderLeftWidth, borderTopWidth, borderBottomWidth) * 2);
-    if (borderLeftStyle === 'dashed') {
-        ctx.dash(borderLeftWidth * 2, { space: borderLeftWidth * 1.2 });
-    }
-    else if (borderLeftStyle === 'dotted') {
-        ctx.dash(borderLeftWidth, { space: borderLeftWidth * 1.2 });
-    }
-    ctx.stroke();
-    ctx.undash();
-};
-const shouldRenderBorders = (node) => node.box &&
-    (node.box.borderTopWidth ||
-        node.box.borderRightWidth ||
-        node.box.borderBottomWidth ||
-        node.box.borderLeftWidth);
-const renderBorders = (ctx, node) => {
-    if (!node.box)
-        return;
-    if (!shouldRenderBorders(node))
-        return;
-    const { width, height, borderTopWidth = 0, borderLeftWidth = 0, borderRightWidth = 0, borderBottomWidth = 0, } = node.box;
-    const { opacity = 1, borderTopColor = 'black', borderTopStyle = 'solid', borderLeftColor = 'black', borderLeftStyle = 'solid', borderRightColor = 'black', borderRightStyle = 'solid', borderBottomColor = 'black', borderBottomStyle = 'solid', } = node.style;
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const borderTopLeftRadius = node.style.borderTopLeftRadius || 0;
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const borderTopRightRadius = node.style.borderTopRightRadius || 0;
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const borderBottomLeftRadius = node.style.borderBottomLeftRadius || 0;
-    // @ts-expect-error this is always a number due to resolve border radius step
-    const borderBottomRightRadius = node.style.borderBottomRightRadius || 0;
-    const style = {
-        borderTopColor,
-        borderTopWidth,
-        borderTopStyle,
-        borderLeftColor,
-        borderLeftWidth,
-        borderLeftStyle,
-        borderRightColor,
-        borderRightWidth,
-        borderRightStyle,
-        borderBottomColor,
-        borderBottomWidth,
-        borderBottomStyle};
-    const rtr = Math.min(borderTopRightRadius, 0.5 * width, 0.5 * height);
-    const rtl = Math.min(borderTopLeftRadius, 0.5 * width, 0.5 * height);
-    const rbr = Math.min(borderBottomRightRadius, 0.5 * width, 0.5 * height);
-    const rbl = Math.min(borderBottomLeftRadius, 0.5 * width, 0.5 * height);
-    ctx.save();
-    ctx.strokeOpacity(opacity);
-    if (borderTopWidth) {
-        ctx.save();
-        clipBorderTop(ctx, node.box, style, rtr, rtl);
-        fillBorderTop(ctx, node.box, style, rtr, rtl);
-        ctx.restore();
-    }
-    if (borderRightWidth) {
-        ctx.save();
-        clipBorderRight(ctx, node.box, style, rtr, rbr);
-        fillBorderRight(ctx, node.box, style, rtr, rbr);
-        ctx.restore();
-    }
-    if (borderBottomWidth) {
-        ctx.save();
-        clipBorderBottom(ctx, node.box, style, rbl, rbr);
-        fillBorderBottom(ctx, node.box, style, rbl, rbr);
-        ctx.restore();
-    }
-    if (borderLeftWidth) {
-        ctx.save();
-        clipBorderLeft(ctx, node.box, style, rbl, rtl);
-        fillBorderLeft(ctx, node.box, style, rbl, rtl);
-        ctx.restore();
-    }
-    ctx.restore();
-};
-
-const drawBackground = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { top, left, width, height } = node.box;
-    const color = parseColor(node.style.backgroundColor);
-    const nodeOpacity = isNil(node.style?.opacity) ? 1 : node.style.opacity;
-    const opacity = Math.min(color.opacity, nodeOpacity);
-    ctx
-        .fillOpacity(opacity)
-        .fillColor(color.value)
-        .rect(left, top, width, height)
-        .fill();
-};
-const renderBackground = (ctx, node) => {
-    const hasBackground = !!node.box && !!node.style?.backgroundColor;
-    if (hasBackground) {
-        ctx.save();
-        clipNode(ctx, node);
-        drawBackground(ctx, node);
-        ctx.restore();
-    }
-};
-
-const isString = (value) => typeof value === 'string';
-const isSrcId = (value) => /^#.+/.test(value);
-const renderLink = (ctx, node, src) => {
-    if (!src || !node.box)
-        return;
-    const isId = isSrcId(src);
-    const method = isId ? 'goTo' : 'link';
-    const value = isId ? src.slice(1) : src;
-    const { top, left, width, height } = node.box;
-    ctx[method](left, top, width, height, value);
-};
-const setLink = (ctx, node) => {
-    const props = node.props || {};
-    if ('src' in props && isString(props.src))
-        return renderLink(ctx, node, props.src);
-    if ('href' in props && isString(props.href))
-        return renderLink(ctx, node, props.href);
-};
-
-const setDestination = (ctx, node) => {
-    if (!node.box)
-        return;
-    if (!node.props)
-        return;
-    if ('id' in node.props) {
-        ctx.addNamedDestination(node.props.id, 'XYZ', null, node.box.top, null);
-    }
-};
-
-const clean = (options) => {
-    const opt = { ...options };
-    // We need to ensure the elements are no present if not true
-    Object.entries(opt).forEach((pair) => {
-        if (!pair[1]) {
-            delete opt[pair[0]];
-        }
-    });
-    return opt;
-};
-const parseCommonFormOptions = (node) => {
-    // Common Options
-    return {
-        required: node.props?.required || false,
-        noExport: node.props?.noExport || false,
-        readOnly: node.props?.readOnly || false,
-        value: node.props?.value || undefined,
-        defaultValue: node.props?.defaultValue || undefined,
-    };
-};
-const parseTextInputOptions = (node, fieldSet) => {
-    return clean({
-        ...parseCommonFormOptions(node),
-        parent: fieldSet || undefined,
-        align: node.props?.align || 'left',
-        multiline: node.props?.multiline || undefined,
-        password: node.props?.password || false,
-        noSpell: node.props?.noSpell || false,
-        format: node.props?.format || undefined,
-        fontSize: node.props?.fontSize || undefined,
-        MaxLen: node.props?.maxLength || undefined,
-    });
-};
-const parseSelectAndListFieldOptions = (node) => {
-    return clean({
-        ...parseCommonFormOptions(node),
-        sort: node.props?.sort || false,
-        edit: node.props?.edit || false,
-        multiSelect: node.props?.multiSelect || false,
-        noSpell: node.props?.noSpell || false,
-        select: node.props?.select || [''],
-    });
-};
-const getAppearance = (ctx, codepoint, width, height) => {
-    const appearance = ctx.ref({
-        Type: 'XObject',
-        Subtype: 'Form',
-        BBox: [0, 0, width, height],
-        Resources: {
-            ProcSet: ['PDF', 'Text', 'ImageB', 'ImageC', 'ImageI'],
-            Font: {
-                ZaDi: ctx._acroform.fonts.ZaDi,
-            },
-        },
-    });
-    appearance.initDeflate();
-    appearance.write(`/Tx BMC\nq\n/ZaDi ${height * 0.8} Tf\nBT\n${width * 0.45} ${height / 4} Td (${codepoint}) Tj\nET\nQ\nEMC`);
-    appearance.end(null);
-    return appearance;
-};
-const parseCheckboxOptions = (ctx, node, fieldSet) => {
-    const { width, height } = node.box || {};
-    const onOption = node.props?.onState || 'Yes';
-    const offOption = node.props?.offState || 'Off';
-    const xMark = node.props?.xMark || false;
-    if (!Object.prototype.hasOwnProperty.call(ctx._acroform.fonts, 'ZaDi')) {
-        const ref = ctx.ref({
-            Type: 'Font',
-            Subtype: 'Type1',
-            BaseFont: 'ZapfDingbats',
-        });
-        ctx._acroform.fonts.ZaDi = ref;
-        ref.end(null);
-    }
-    const normalAppearance = {
-        [onOption]: getAppearance(ctx, xMark ? '8' : '4', width, height),
-        [offOption]: getAppearance(ctx, xMark ? ' ' : '8', width, height),
-    };
-    return clean({
-        ...parseCommonFormOptions(node),
-        backgroundColor: node.props?.backgroundColor || undefined,
-        borderColor: node.props?.borderColor || undefined,
-        parent: fieldSet || undefined,
-        value: `/${node.props?.checked === true ? onOption : offOption}`,
-        defaultValue: `/${node.props?.checked === true ? onOption : offOption}`,
-        AS: node.props?.checked === true ? onOption : offOption,
-        AP: { N: normalAppearance, D: normalAppearance },
-    });
-};
-
-const renderTextInput = (ctx, node, options) => {
-    if (!node.box)
-        return;
-    const { top, left, width, height } = node.box;
-    // Element's name
-    const name = node.props?.name || '';
-    const fieldSetOptions = options.fieldSets?.at(0);
-    if (!ctx._root.data.AcroForm) {
-        ctx.initForm();
-    }
-    ctx.formText(name, left, top, width, height, parseTextInputOptions(node, fieldSetOptions));
-};
-
-const renderSelect = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { top, left, width, height } = node.box;
-    // Element's name
-    const name = node.props?.name || '';
-    if (!ctx._root.data.AcroForm) {
-        ctx.initForm();
-    }
-    ctx.formCombo(name, left, top, width, height, parseSelectAndListFieldOptions(node));
-};
-
-const renderFieldSet = (ctx, node, options) => {
-    const name = node.props?.name || '';
-    if (!ctx._root.data.AcroForm) {
-        ctx.initForm();
-    }
-    const formField = ctx.formField(name);
-    const option = options;
-    if (!option.fieldSets) {
-        option.fieldSets = [formField];
-    }
-    else {
-        option.fieldSets.push(formField);
-    }
-};
-const cleanUpFieldSet = (_ctx, _node, options) => {
-    options.fieldSets.pop();
-};
-
-const renderList = (ctx, node) => {
-    if (!node.box)
-        return;
-    const { top, left, width, height } = node.box || {};
-    // Element's name
-    const name = ('name' in node.props ? node.props.name || '' : '');
-    if (!ctx._root.data.AcroForm) {
-        ctx.initForm();
-    }
-    ctx.formList(name, left, top, width, height, parseSelectAndListFieldOptions(node));
-};
-
-const renderCheckbox = (ctx, node, options) => {
-    if (!node.box)
-        return;
-    const { top, left, width, height } = node.box;
-    // Element's name
-    const name = node.props?.name || '';
-    const fieldSetOptions = options.fieldSets?.at(0);
-    if (!ctx._root.data.AcroForm) {
-        ctx.initForm();
-    }
-    ctx.formCheckbox(name, left, top, width, height, parseCheckboxOptions(ctx, node, fieldSetOptions));
-};
-
-const isRecursiveNode = (node) => node.type !== Text && node.type !== Svg;
-const renderChildren = (ctx, node, options) => {
-    ctx.save();
-    if (node.box) {
-        ctx.translate(node.box.left, node.box.top);
-    }
-    const children = node.children || [];
-    const renderChild = (child) => renderNode(ctx, child, options);
-    children.forEach(renderChild);
-    ctx.restore();
-};
-const renderFns = {
-    [Text]: renderText,
-    [Note]: renderNote,
-    [Image]: renderImage,
-    [FieldSet]: renderFieldSet,
-    [TextInput]: renderTextInput,
-    [Select]: renderSelect,
-    [Checkbox]: renderCheckbox,
-    [List]: renderList,
-    [Canvas]: renderCanvas,
-    [Svg]: renderSvg,
-    [Link]: setLink,
-};
-const cleanUpFns = {
-    [FieldSet]: cleanUpFieldSet,
-};
-const renderNode = (ctx, node, options) => {
-    const overflowHidden = node.style?.overflow === 'hidden';
-    const shouldRenderChildren = isRecursiveNode(node);
-    if (node.type === Page)
-        renderPage(ctx, node);
-    ctx.save();
-    if (overflowHidden)
-        clipNode(ctx, node);
-    applyTransformations(ctx, node);
-    renderBackground(ctx, node);
-    renderBorders(ctx, node);
-    const renderFn = renderFns[node.type];
-    if (renderFn)
-        renderFn(ctx, node, options);
-    if (shouldRenderChildren)
-        renderChildren(ctx, node, options);
-    const cleanUpFn = cleanUpFns[node.type];
-    if (cleanUpFn)
-        cleanUpFn(ctx, node, options);
-    setDestination(ctx, node);
-    renderDebug(ctx, node);
-    ctx.restore();
-};
-
-const addNodeBookmark = (ctx, node, pageNumber, registry) => {
-    if (!node.box)
-        return;
-    if (!node.props)
-        return;
-    if ('bookmark' in node.props && node.props.bookmark) {
-        const bookmark = node.props.bookmark;
-        const { title, parent, expanded, zoom, fit } = bookmark;
-        const outline = registry[parent] || ctx.outline;
-        const top = bookmark.top || node.box.top;
-        const left = bookmark.left || node.box.left;
-        const instance = outline.addItem(title, {
-            pageNumber,
-            expanded,
-            top,
-            left,
-            zoom,
-            fit,
-        });
-        registry[bookmark.ref] = instance;
-    }
-    if (!node.children)
-        return;
-    node.children.forEach((child) => addNodeBookmark(ctx, child, pageNumber, registry));
-};
-const addBookmarks = (ctx, root) => {
-    const registry = {};
-    const pages = root.children || [];
-    pages.forEach((page, i) => {
-        addNodeBookmark(ctx, page, i, registry);
-    });
-};
-
-const render = (ctx, doc) => {
-    const pages = doc.children || [];
-    const options = { imageCache: new Map(), fieldSets: [] };
-    pages.forEach((page) => renderNode(ctx, page, options));
-    addBookmarks(ctx, doc);
-    ctx.end();
-    return ctx;
-};
-
-export { render as default };