@saltcorn/markup 1.6.1-beta.0 → 1.7.0-alpha.0

package/dist/markup.test.js

@@ -1,123 +1,86 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const globals_1 = require("@jest/globals");
-const mjml_layout_1 = require("./mjml-layout");
-const tags = __importStar(require("./tags"));
-const mjml = __importStar(require("./mjml-tags"));
-const tabs_1 = __importDefault(require("./tabs"));
-const table_1 = __importDefault(require("./table"));
+import { describe, it } from "node:test";
+import { expect } from "@saltcorn/db-common/test_expect";
+import { transformTextStyle, transformLinkSize, applyTextStyle, renderMJML, } from "./mjml-layout.js";
+import * as tags from "./tags.js";
+import * as mjml from "./mjml-tags.js";
+import tabs from "./tabs.js";
+import mkTable from "./table.js";
 // import index = require("./index");
-const index_1 = __importDefault(require("./index"));
-const builder_1 = __importDefault(require("./builder"));
-const { post_btn, post_delete_btn, post_dropdown_item, settingsDropdown, localeDate, } = index_1.default;
+import index from "./index.js";
+import builder from "./builder.js";
+const { post_btn, post_delete_btn, post_dropdown_item, settingsDropdown, localeDate, } = index;
 const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
-(0, globals_1.describe)("tags", () => {
-    (0, globals_1.it)("renders", () => {
-        (0, globals_1.expect)(a({ href: "/" }, "Home")).toBe('<a href="/">Home</a>');
-        (0, globals_1.expect)(a({ href: "/" }, ["Home", " Sweet", " Home"])).toBe('<a href="/">Home Sweet Home</a>');
-        (0, globals_1.expect)(a({ href: "/", class: "centre" }, "Home")).toBe('<a href="/" class="centre">Home</a>');
-        (0, globals_1.expect)(input({ type: "text" })).toBe('<input type="text">');
-        (0, globals_1.expect)(div(5)).toBe("<div>5</div>");
-        (0, globals_1.expect)(div()).toBe("<div></div>");
-        (0, globals_1.expect)(div(null)).toBe("<div></div>");
-        (0, globals_1.expect)(div("Hello world")).toBe("<div>Hello world</div>");
-        (0, globals_1.expect)(div(["Hello world"])).toBe("<div>Hello world</div>");
-        (0, globals_1.expect)(i()).toBe("<i></i>");
-        (0, globals_1.expect)(hr()).toBe("<hr>");
-        (0, globals_1.expect)(div(["hello ", "world"])).toBe("<div>hello world</div>");
-        (0, globals_1.expect)(ul({ class: "foo" }, [false, "hello ", "world"])).toBe(`<ul class="foo">hello world</ul>`);
-        (0, globals_1.expect)(ul({ class: "foo" }, [["hello ", "world"]])).toBe(`<ul class="foo">hello world</ul>`);
-        (0, globals_1.expect)(i({ class: "fas fa-plus-square" })).toBe('<i class="fas fa-plus-square"></i>');
-        (0, globals_1.expect)(genericElement("div", { class: "foo" }, "Hello")).toBe('<div class="foo">Hello</div>');
-        (0, globals_1.expect)(genericElement("div", { onclick: `$("#bar").hide()` }, "Hello")).toBe('<div onclick="$(&quot;#bar&quot;).hide()">Hello</div>');
-    });
-    (0, globals_1.it)("class", () => {
-        (0, globals_1.expect)(div({ class: "foo" }, 5)).toBe('<div class="foo">5</div>');
-        (0, globals_1.expect)(div({ class: false }, 5)).toBe("<div>5</div>");
-        (0, globals_1.expect)(div({ class: "foo bar" }, 5)).toBe('<div class="foo bar">5</div>');
-        (0, globals_1.expect)(div({ class: ["foo", "bar"] }, 5)).toBe('<div class="foo bar">5</div>');
-        (0, globals_1.expect)(div({ class: ["foo", " "] }, 5)).toBe('<div class="foo  ">5</div>');
-        (0, globals_1.expect)(input({ class: ["foo", " "] })).toBe('<input class="foo  ">');
-        (0, globals_1.expect)(div({ class: ["foo bar", "", undefined, null, false, "baz"] }, 5)).toBe('<div class="foo bar baz">5</div>');
-        (0, globals_1.expect)(div({ class: [undefined, null, false] }, 5)).toBe("<div>5</div>");
-        (0, globals_1.expect)(hr({ class: "foo" })).toBe('<hr class="foo">');
-    });
-    (0, globals_1.it)("style", () => {
-        (0, globals_1.expect)(div({ style: "color:red;border:1px solid black" }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
-        (0, globals_1.expect)(div({ style: ["color:red", "border:1px solid black"] }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
-        (0, globals_1.expect)(div({ style: ["color:red", false, undefined, "border:1px solid black"] }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
-        (0, globals_1.expect)(div({ style: { color: "red", border: "1px solid black" } }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
-        (0, globals_1.expect)(div({ style: { marginRight: "1px", border: "1px solid black" } }, 5)).toBe('<div style="margin-right:1px;border:1px solid black">5</div>');
+describe("tags", () => {
+    it("renders", () => {
+        expect(a({ href: "/" }, "Home")).toBe('<a href="/">Home</a>');
+        expect(a({ href: "/" }, ["Home", " Sweet", " Home"])).toBe('<a href="/">Home Sweet Home</a>');
+        expect(a({ href: "/", class: "centre" }, "Home")).toBe('<a href="/" class="centre">Home</a>');
+        expect(input({ type: "text" })).toBe('<input type="text">');
+        expect(div(5)).toBe("<div>5</div>");
+        expect(div()).toBe("<div></div>");
+        expect(div(null)).toBe("<div></div>");
+        expect(div("Hello world")).toBe("<div>Hello world</div>");
+        expect(div(["Hello world"])).toBe("<div>Hello world</div>");
+        expect(i()).toBe("<i></i>");
+        expect(hr()).toBe("<hr>");
+        expect(div(["hello ", "world"])).toBe("<div>hello world</div>");
+        expect(ul({ class: "foo" }, [false, "hello ", "world"])).toBe(`<ul class="foo">hello world</ul>`);
+        expect(ul({ class: "foo" }, [["hello ", "world"]])).toBe(`<ul class="foo">hello world</ul>`);
+        expect(i({ class: "fas fa-plus-square" })).toBe('<i class="fas fa-plus-square"></i>');
+        expect(genericElement("div", { class: "foo" }, "Hello")).toBe('<div class="foo">Hello</div>');
+        expect(genericElement("div", { onclick: `$("#bar").hide()` }, "Hello")).toBe('<div onclick="$(&quot;#bar&quot;).hide()">Hello</div>');
+    });
+    it("class", () => {
+        expect(div({ class: "foo" }, 5)).toBe('<div class="foo">5</div>');
+        expect(div({ class: false }, 5)).toBe("<div>5</div>");
+        expect(div({ class: "foo bar" }, 5)).toBe('<div class="foo bar">5</div>');
+        expect(div({ class: ["foo", "bar"] }, 5)).toBe('<div class="foo bar">5</div>');
+        expect(div({ class: ["foo", " "] }, 5)).toBe('<div class="foo  ">5</div>');
+        expect(input({ class: ["foo", " "] })).toBe('<input class="foo  ">');
+        expect(div({ class: ["foo bar", "", undefined, null, false, "baz"] }, 5)).toBe('<div class="foo bar baz">5</div>');
+        expect(div({ class: [undefined, null, false] }, 5)).toBe("<div>5</div>");
+        expect(hr({ class: "foo" })).toBe('<hr class="foo">');
+    });
+    it("style", () => {
+        expect(div({ style: "color:red;border:1px solid black" }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        expect(div({ style: ["color:red", "border:1px solid black"] }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        expect(div({ style: ["color:red", false, undefined, "border:1px solid black"] }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        expect(div({ style: { color: "red", border: "1px solid black" } }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        expect(div({ style: { marginRight: "1px", border: "1px solid black" } }, 5)).toBe('<div style="margin-right:1px;border:1px solid black">5</div>');
         //border-top-left-radius
-        (0, globals_1.expect)(div({ style: { marginRight: "1px", borderTopLeftRadius: "3px" } }, 5)).toBe('<div style="margin-right:1px;border-top-left-radius:3px">5</div>');
-        (0, globals_1.expect)(hr({ style: { color: "red", display: null } }, 5)).toBe('<hr style="color:red">');
-        (0, globals_1.expect)(hr({ style: { color: "red", display: "" } }, 5)).toBe('<hr style="color:red">');
-        (0, globals_1.expect)(hr({ style: { color: "red", display: "none" } }, 5)).toBe('<hr style="color:red;display:none">');
-        (0, globals_1.expect)(hr({ style: { color: "", display: null } }, 5)).toBe("<hr>");
-        (0, globals_1.expect)(hr({ style: { color: "red" } }, 5)).toBe('<hr style="color:red">');
-        (0, globals_1.expect)(hr({ style: {} })).toBe("<hr>");
-        (0, globals_1.expect)(hr({ style: null })).toBe("<hr>");
-        (0, globals_1.expect)(div({ class: "foo", style: null })).toBe('<div class="foo"></div>');
-    });
-    (0, globals_1.it)("escaping", () => {
-        (0, globals_1.expect)(text("foo")).toBe("foo");
-        (0, globals_1.expect)(text_attr('" onMouseOver="alert(1);')).toBe("&quot; onMouseOver=&quot;alert(1);");
-        (0, globals_1.expect)(text(1)).toBe("1");
-        (0, globals_1.expect)(text(0)).toBe("0");
-        (0, globals_1.expect)(text("<script>alert(1);<script>")).toBe("&lt;script&gt;alert(1);&lt;script&gt;");
-        (0, globals_1.expect)(text("<p>alert<p>")).toBe("<p>alert<p>");
-        (0, globals_1.expect)(text("<kbd>ctrl<kbd>")).toBe("<kbd>ctrl<kbd>");
-        (0, globals_1.expect)(text('<span style="color:#2ecc71;">green</span>')).toBe('<span style="color:#2ecc71;">green</span>');
-        (0, globals_1.expect)(text('<article style="color:#2ecc71;">green</article>')).toBe("<article>green</article>");
-        (0, globals_1.expect)(text('<article style="color:#2ecc71;">green</article>', {
+        expect(div({ style: { marginRight: "1px", borderTopLeftRadius: "3px" } }, 5)).toBe('<div style="margin-right:1px;border-top-left-radius:3px">5</div>');
+        expect(hr({ style: { color: "red", display: null } }, 5)).toBe('<hr style="color:red">');
+        expect(hr({ style: { color: "red", display: "" } }, 5)).toBe('<hr style="color:red">');
+        expect(hr({ style: { color: "red", display: "none" } }, 5)).toBe('<hr style="color:red;display:none">');
+        expect(hr({ style: { color: "", display: null } }, 5)).toBe("<hr>");
+        expect(hr({ style: { color: "red" } }, 5)).toBe('<hr style="color:red">');
+        expect(hr({ style: {} })).toBe("<hr>");
+        expect(hr({ style: null })).toBe("<hr>");
+        expect(div({ class: "foo", style: null })).toBe('<div class="foo"></div>');
+    });
+    it("escaping", () => {
+        expect(text("foo")).toBe("foo");
+        expect(text_attr('" onMouseOver="alert(1);')).toBe("&quot; onMouseOver=&quot;alert(1);");
+        expect(text(1)).toBe("1");
+        expect(text(0)).toBe("0");
+        expect(text("<script>alert(1);<script>")).toBe("&lt;script&gt;alert(1);&lt;script&gt;");
+        expect(text("<p>alert<p>")).toBe("<p>alert<p>");
+        expect(text("<kbd>ctrl<kbd>")).toBe("<kbd>ctrl<kbd>");
+        expect(text('<span style="color:#2ecc71;">green</span>')).toBe('<span style="color:#2ecc71;">green</span>');
+        expect(text('<article style="color:#2ecc71;">green</article>')).toBe("<article>green</article>");
+        expect(text('<article style="color:#2ecc71;">green</article>', {
             article: ["style"],
         })).toBe('<article style="color:#2ecc71;">green</article>');
-        (0, globals_1.expect)(text('<progress onclick="foo()">green</progress>', {
+        expect(text('<progress onclick="foo()">green</progress>', {
             progress: ["onclick"],
         })).toBe('<progress onclick="foo()">green</progress>');
     });
 });
-(0, globals_1.describe)("mjml tags", () => {
-    (0, globals_1.it)("renders", () => {
-        (0, globals_1.expect)(mjml.mjml(mjml.body(mjml.section({ "background-color": "#f0f0f0" }, mjml.text("hello world"))))).toBe('<mjml><mj-body><mj-section background-color="#f0f0f0"><mj-text>hello world</mj-text></mj-section></mj-body></mjml>');
+describe("mjml tags", () => {
+    it("renders", () => {
+        expect(mjml.mjml(mjml.body(mjml.section({ "background-color": "#f0f0f0" }, mjml.text("hello world"))))).toBe('<mjml><mj-body><mj-section background-color="#f0f0f0"><mj-text>hello world</mj-text></mj-section></mj-body></mjml>');
     });
-    (0, globals_1.it)("renders emailButton with default style", () => {
+    it("renders emailButton with default style", () => {
         const result = mjml.emailButton({
             href: "https://example.com",
             title: "Click Me",
@@ -135,9 +98,9 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
 `
             .replace(/\s+/g, " ")
             .trim();
-        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+        expect(result.replace(/\s+/g, " ").trim()).toBe(expected);
     });
-    (0, globals_1.it)("renders emailButton with btn-primary style", () => {
+    it("renders emailButton with btn-primary style", () => {
         const result = mjml.emailButton({
             href: "https://example.com",
             title: "Click Me",
@@ -146,16 +109,16 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
         const expected = '<a rel="noopener" target="_blank" title="Click Me" href="https://example.com" style="background-color: #0d6efd; color: #ffffff; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;"> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i> <![endif]--> <span style="mso-text-raise: 15pt;">Click Me</span> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i> <![endif]--> </a>'
             .replace(/\s+/g, " ")
             .trim();
-        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+        expect(result.replace(/\s+/g, " ").trim()).toBe(expected);
     });
-    (0, globals_1.it)("renders emailButton with btn-outline-primary style", () => {
+    it("renders emailButton with btn-outline-primary style", () => {
         const result = mjml.emailButton({ href: "https://example.com", btnStyle: "btn-outline-primary" }, "Click Me");
         const expected = '<a rel="noopener" target="_blank" href="https://example.com" style="background-color: transparent; color: #0d6efd; border-color: #0d6efd;border-width:1px; border-style: solid; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;"> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i> <![endif]--> <span style="mso-text-raise: 15pt;">Click Me</span> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i> <![endif]--> </a>'
             .replace(/\s+/g, " ")
             .trim();
-        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+        expect(result.replace(/\s+/g, " ").trim()).toBe(expected);
     });
-    (0, globals_1.it)("renders emailButton with custom title and style", () => {
+    it("renders emailButton with custom title and style", () => {
         const result = mjml.emailButton({
             href: "https://example.com",
             title: "Custom Title",
@@ -165,34 +128,34 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
         const expected = '<a rel="noopener" target="_blank" title="Custom Title" href="https://example.com" style="color: #fff; background-color: #000; border-width: 1px; border-style: solid; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;"> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i> <![endif]--> <span style="mso-text-raise: 15pt;">Click Me</span> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i> <![endif]--> </a>'
             .replace(/\s+/g, " ")
             .trim();
-        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+        expect(result.replace(/\s+/g, " ").trim()).toBe(expected);
     });
 });
-(0, globals_1.describe)("tabs", () => {
-    (0, globals_1.it)("renders tabs with single content", () => {
-        const result = (0, tabs_1.default)({
+describe("tabs", () => {
+    it("renders tabs with single content", () => {
+        const result = tabs({
             Tab1: "Content1",
         });
-        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div></div>`);
+        expect(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div></div>`);
     });
-    (0, globals_1.it)("renders tabs with multiple contents", () => {
-        const result = (0, tabs_1.default)({ Tab1: "Content1", Tab2: "Content2" });
-        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#Tab2" id="Tab2-tab" role="tab" aria-controls="home" aria-selected="true">Tab2</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div><div class="tab-pane fade" id="Tab2" role="tabpanel" aria-labelledby="Tab2-tab">Content2</div></div>`);
+    it("renders tabs with multiple contents", () => {
+        const result = tabs({ Tab1: "Content1", Tab2: "Content2" });
+        expect(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#Tab2" id="Tab2-tab" role="tab" aria-controls="home" aria-selected="true">Tab2</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div><div class="tab-pane fade" id="Tab2" role="tabpanel" aria-labelledby="Tab2-tab">Content2</div></div>`);
     });
-    (0, globals_1.it)("renders tabs from an array of entries", () => {
-        const result = (0, tabs_1.default)([
+    it("renders tabs from an array of entries", () => {
+        const result = tabs([
             ["Tab1", "Content1"],
             ["Tab2", "Content2"],
         ]);
-        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#Tab2" id="Tab2-tab" role="tab" aria-controls="home" aria-selected="true">Tab2</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div><div class="tab-pane fade" id="Tab2" role="tabpanel" aria-labelledby="Tab2-tab">Content2</div></div>`);
+        expect(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#Tab2" id="Tab2-tab" role="tab" aria-controls="home" aria-selected="true">Tab2</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div><div class="tab-pane fade" id="Tab2" role="tabpanel" aria-labelledby="Tab2-tab">Content2</div></div>`);
     });
-    (0, globals_1.it)("handles empty tabs gracefully", () => {
-        const result = (0, tabs_1.default)({});
-        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"></ul><div class="tab-content"></div>`);
+    it("handles empty tabs gracefully", () => {
+        const result = tabs({});
+        expect(result).toBe(`<ul class="nav nav-tabs" role="tablist"></ul><div class="tab-content"></div>`);
     });
 });
-(0, globals_1.describe)("table", () => {
-    (0, globals_1.it)("renders a basic table", () => {
+describe("table", () => {
+    it("renders a basic table", () => {
         const headers = [
             { label: "Name", key: "name" },
             { label: "Age", key: "age" },
@@ -201,10 +164,10 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
             { name: "UserName1", age: 25, id: 1 },
             { name: "UserName2", age: 30, id: 2 },
         ];
-        const result = (0, table_1.default)(headers, rows);
-        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr data-row-id="1"><td>UserName1</td><td>25</td></tr><tr data-row-id="2"><td>UserName2</td><td>30</td></tr></tbody></table></div>`);
+        const result = mkTable(headers, rows);
+        expect(result).toBe(`<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr data-row-id="1"><td>UserName1</td><td>25</td></tr><tr data-row-id="2"><td>UserName2</td><td>30</td></tr></tbody></table></div>`);
     });
-    (0, globals_1.it)("renders a tramnsposed table", () => {
+    it("renders a tramnsposed table", () => {
         const headers = [
             {
                 label: "Name",
@@ -219,10 +182,10 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
             { name: "UserName1", age: 25 },
             { name: "UserName2", age: 30 },
         ];
-        const result = (0, table_1.default)(headers, rows, { transpose: true });
-        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><tbody><tr row-key="name"><th>Name</th><td>UserName1</td><td>UserName2</td></tr><tr row-key="age"><th>Age</th><td>25</td><td>30</td></tr></tbody></table></div>`);
+        const result = mkTable(headers, rows, { transpose: true });
+        expect(result).toBe(`<div class="table-responsive"><table class="table table-sm"><tbody><tr row-key="name"><th>Name</th><td>UserName1</td><td>UserName2</td></tr><tr row-key="age"><th>Age</th><td>25</td><td>30</td></tr></tbody></table></div>`);
     });
-    (0, globals_1.it)("renders a transposed table", () => {
+    it("renders a transposed table", () => {
         const headers = [
             {
                 label: "Name",
@@ -237,10 +200,10 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
             { name: "UserName1", age: 25 },
             { name: "UserName2", age: 30 },
         ];
-        const result = (0, table_1.default)(headers, rows, { transpose: true });
-        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><tbody><tr row-key="name"><th>Name</th><td>UserName1</td><td>UserName2</td></tr><tr row-key="age"><th>Age</th><td>25</td><td>30</td></tr></tbody></table></div>`);
+        const result = mkTable(headers, rows, { transpose: true });
+        expect(result).toBe(`<div class="table-responsive"><table class="table table-sm"><tbody><tr row-key="name"><th>Name</th><td>UserName1</td><td>UserName2</td></tr><tr row-key="age"><th>Age</th><td>25</td><td>30</td></tr></tbody></table></div>`);
     });
-    (0, globals_1.it)("renders a table with pagination", () => {
+    it("renders a table with pagination", () => {
         const headers = [
             { label: "Name", key: "name" },
             { label: "Age", key: "age" },
@@ -254,14 +217,14 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
             pages: 3,
             get_page_link: (page) => `?page=${page}`,
         };
-        const result = (0, table_1.default)(headers, rows, { pagination: paginationOpts });
-        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr data-row-id="1"><td>UserName1</td><td>25</td></tr><tr data-row-id="2"><td>UserName2</td><td>30</td></tr></tbody></table><ul class="pagination"><li class="page-item active"><span class="page-link link-style" onclick="?page=1" role="link">1</span></li><li class="page-item"><span class="page-link link-style" onclick="?page=2" role="link">2</span></li><li class="page-item"><span class="page-link link-style" onclick="?page=3" role="link">3</span></li></ul></div>`);
+        const result = mkTable(headers, rows, { pagination: paginationOpts });
+        expect(result).toBe(`<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr data-row-id="1"><td>UserName1</td><td>25</td></tr><tr data-row-id="2"><td>UserName2</td><td>30</td></tr></tbody></table><ul class="pagination"><li class="page-item active"><span class="page-link link-style" onclick="?page=1" role="link">1</span></li><li class="page-item"><span class="page-link link-style" onclick="?page=2" role="link">2</span></li><li class="page-item"><span class="page-link link-style" onclick="?page=3" role="link">3</span></li></ul></div>`);
     });
 });
-(0, globals_1.describe)("mjml-layout", () => {
-    (0, globals_1.describe)("transformTextStyle", () => {
-        (0, globals_1.it)("transforms text styles correctly", () => {
-            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("h1")).toEqual({
+describe("mjml-layout", () => {
+    describe("transformTextStyle", () => {
+        it("transforms text styles correctly", () => {
+            expect(transformTextStyle("h1")).toEqual({
                 "font-size": "2em",
                 "margin-top": "0.67em",
                 "margin-bottom": "0.67em",
@@ -269,35 +232,35 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 "margin-right": 0,
                 "font-weight": "bold",
             });
-            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("fw-bold")).toEqual({
+            expect(transformTextStyle("fw-bold")).toEqual({
                 "font-weight": "700 !important",
             });
-            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("text-muted")).toEqual({
+            expect(transformTextStyle("text-muted")).toEqual({
                 "--bs-text-opacity": "1",
                 color: "#858796 !important",
             });
         });
-        (0, globals_1.it)("returns an empty object for unknown styles", () => {
-            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("unknown-style")).toEqual({});
+        it("returns an empty object for unknown styles", () => {
+            expect(transformTextStyle("unknown-style")).toEqual({});
         });
     });
-    (0, globals_1.describe)("transformLinkSize", () => {
-        (0, globals_1.it)("transforms link sizes correctly", () => {
-            (0, globals_1.expect)((0, mjml_layout_1.transformLinkSize)("btn-lg")).toEqual({
+    describe("transformLinkSize", () => {
+        it("transforms link sizes correctly", () => {
+            expect(transformLinkSize("btn-lg")).toEqual({
                 padding: "0.5rem 1rem",
                 "font-size": "1.25rem",
             });
-            (0, globals_1.expect)((0, mjml_layout_1.transformLinkSize)("btn-sm")).toEqual({
+            expect(transformLinkSize("btn-sm")).toEqual({
                 padding: "0.25rem 0.5rem",
                 "font-size": "0.875rem",
             });
         });
-        (0, globals_1.it)("returns an empty object for unknown sizes", () => {
-            (0, globals_1.expect)((0, mjml_layout_1.transformLinkSize)("unkown-size")).toEqual({});
+        it("returns an empty object for unknown sizes", () => {
+            expect(transformLinkSize("unkown-size")).toEqual({});
         });
     });
-    (0, globals_1.describe)("applyTextStyle", () => {
-        (0, globals_1.it)("applies text style to block elements", () => {
+    describe("applyTextStyle", () => {
+        it("applies text style to block elements", () => {
             const segment = {
                 textStyle: "h1",
                 inline: false,
@@ -306,33 +269,33 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 },
             };
             const inner = "Hello World";
-            const result = (0, mjml_layout_1.applyTextStyle)(segment, inner);
-            (0, globals_1.expect)(result).toContain('<div style="');
-            (0, globals_1.expect)(result).toContain("font-size:2em");
-            (0, globals_1.expect)(result).toContain("color:red");
+            const result = applyTextStyle(segment, inner);
+            expect(result).toContain('<div style="');
+            expect(result).toContain("font-size:2em");
+            expect(result).toContain("color:red");
         });
-        (0, globals_1.it)("applies text styles to inline elements", () => {
+        it("applies text styles to inline elements", () => {
             const segment = {
                 textStyle: "fw-bold",
                 inline: true,
                 style: { color: "blue" },
             };
             const inner = "Hello World";
-            const result = (0, mjml_layout_1.applyTextStyle)(segment, inner);
-            (0, globals_1.expect)(result).toContain('<span style="');
-            (0, globals_1.expect)(result).toContain("font-weight:700 !important");
-            (0, globals_1.expect)(result).toContain("color:blue");
-            (0, globals_1.expect)(result).toContain("Hello World");
+            const result = applyTextStyle(segment, inner);
+            expect(result).toContain('<span style="');
+            expect(result).toContain("font-weight:700 !important");
+            expect(result).toContain("color:blue");
+            expect(result).toContain("Hello World");
         });
-        (0, globals_1.it)("returns inner content without wrapping if no styles are applied", () => {
+        it("returns inner content without wrapping if no styles are applied", () => {
             const segment = { textStyle: null, style: {} };
             const inner = "Hello World";
-            const result = (0, mjml_layout_1.applyTextStyle)(segment, inner);
-            (0, globals_1.expect)(result).toBe("Hello World");
+            const result = applyTextStyle(segment, inner);
+            expect(result).toBe("Hello World");
         });
     });
-    (0, globals_1.describe)("renderMJML", () => {
-        (0, globals_1.it)("renders a layout with an image", () => {
+    describe("renderMJML", () => {
+        it("renders a layout with an image", () => {
             const layout = {
                 type: "container",
                 contents: [
@@ -351,13 +314,13 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 isSubView: false,
                 get_base_url: () => "https://example.com",
             };
-            const result = (0, mjml_layout_1.renderMJML)({
+            const result = renderMJML({
                 layout,
                 req,
             });
-            (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><img style="width:100%" alt="Test Image" src="https://example.com/files/serve/1"></div></mj-raw></mj-section>`);
+            expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><img style="width:100%" alt="Test Image" src="https://example.com/files/serve/1"></div></mj-raw></mj-section>`);
         });
-        (0, globals_1.it)("renders a layout with a link", () => {
+        it("renders a layout with a link", () => {
             const layout = {
                 type: "container",
                 contents: [
@@ -369,7 +332,7 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                     },
                 ],
             };
-            const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
+            const result = renderMJML({ layout, req: { isSubView: false } });
             const expected = `<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><a rel="noopener" target="_blank" href="https://example.com" style="background-color: #0d6efd; color: #ffffff; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
         <!--[if mso]>
         <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
@@ -381,9 +344,9 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
     </a></div></mj-raw></mj-section>`
                 .replace(/\s+/g, " ")
                 .trim();
-            (0, globals_1.expect)(result.markup.replace(/\s+/g, " ").trim()).toBe(expected);
+            expect(result.markup.replace(/\s+/g, " ").trim()).toBe(expected);
         });
-        (0, globals_1.it)("renders a layout with nested containers", () => {
+        it("renders a layout with nested containers", () => {
             const layout = {
                 type: "container",
                 contents: [
@@ -399,7 +362,7 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                     },
                 ],
             };
-            const result = (0, mjml_layout_1.renderMJML)({
+            const result = renderMJML({
                 layout,
                 req: { isSubView: false },
             });
@@ -407,9 +370,9 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 .replace(/\s+/g, " ")
                 .trim();
             const recieved = result.markup.replace(/\s+/g, " ").trim();
-            (0, globals_1.expect)(recieved).toBe(expected);
+            expect(recieved).toBe(expected);
         });
-        (0, globals_1.it)("renders a layout with a card", () => {
+        it("renders a layout with a card", () => {
             const layout = {
                 type: "container",
                 contents: [
@@ -420,7 +383,7 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                     },
                 ],
             };
-            const result = (0, mjml_layout_1.renderMJML)({
+            const result = renderMJML({
                 layout,
                 req: { isSubView: false },
             });
@@ -428,9 +391,9 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 .replace(/\s+/g, " ")
                 .trim();
             const recieved = result.markup.replace(/\s+/g, " ").trim();
-            (0, globals_1.expect)(recieved).toBe(expected);
+            expect(recieved).toBe(expected);
         });
-        (0, globals_1.it)("renders a layout with tabs", () => {
+        it("renders a layout with tabs", () => {
             const layout = {
                 type: "tabs",
                 contents: [
@@ -443,7 +406,7 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                     },
                 ],
             };
-            const result = (0, mjml_layout_1.renderMJML)({
+            const result = renderMJML({
                 layout,
                 req: { isSubView: false },
             });
@@ -451,10 +414,10 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 .replace(/\s+/g, " ")
                 .trim();
             const recieved = result.markup.replace(/\s+/g, " ").trim();
-            (0, globals_1.expect)(recieved).toBe(expected);
+            expect(recieved).toBe(expected);
         });
     });
-    (0, globals_1.it)("renders a layout with a page header", () => {
+    it("renders a layout with a page header", () => {
         const layout = {
             type: "container",
             contents: [
@@ -465,10 +428,10 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 },
             ],
         };
-        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><h1>Welcome</h1><p>This is a test page header</p></div></mj-raw></mj-section>`);
+        const result = renderMJML({ layout, req: { isSubView: false } });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><h1>Welcome</h1><p>This is a test page header</p></div></mj-raw></mj-section>`);
     });
-    (0, globals_1.it)("renders layout with a table", () => {
+    it("renders layout with a table", () => {
         const layout = {
             type: "container",
             contents: [
@@ -489,13 +452,13 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 },
             ],
         };
-        const result = (0, mjml_layout_1.renderMJML)({
+        const result = renderMJML({
             layout,
             req: { isSubView: false },
         });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><table><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table></div></mj-raw></mj-section>`);
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><table><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table></div></mj-raw></mj-section>`);
     });
-    (0, globals_1.it)("renders a layout with a dropdown menu", () => {
+    it("renders a layout with a dropdown menu", () => {
         const layout = {
             type: "container",
             contents: [
@@ -514,10 +477,10 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 },
             ],
         };
-        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"></div></mj-raw></mj-section>`);
+        const result = renderMJML({ layout, req: { isSubView: false } });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"></div></mj-raw></mj-section>`);
     });
-    (0, globals_1.it)("renders a layout with conditional visibility based on role", () => {
+    it("renders a layout with conditional visibility based on role", () => {
         const layout = {
             type: "container",
             contents: [
@@ -532,20 +495,20 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
                 },
             ],
         };
-        const resultForAdmin = (0, mjml_layout_1.renderMJML)({
+        const resultForAdmin = renderMJML({
             layout,
             req: { isSubView: false },
             role: 1,
         });
-        const resultForUser = (0, mjml_layout_1.renderMJML)({
+        const resultForUser = renderMJML({
             layout,
             req: { isSubView: false },
             role: 2,
         });
-        (0, globals_1.expect)(resultForAdmin.markup).toContain(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Visible to allVisible to admins only</div></mj-raw></mj-section>`);
-        (0, globals_1.expect)(resultForUser.markup).toContain(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Visible to all</div></mj-raw></mj-section>`);
+        expect(resultForAdmin.markup).toContain(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Visible to allVisible to admins only</div></mj-raw></mj-section>`);
+        expect(resultForUser.markup).toContain(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Visible to all</div></mj-raw></mj-section>`);
     });
-    (0, globals_1.it)("renders a layout with a gradient background", () => {
+    it("renders a layout with a gradient background", () => {
         const layout = {
             type: "container",
             bgType: "Gradient",
@@ -554,52 +517,52 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
             gradDirection: 45,
             contents: [{ type: "blank", contents: "Gradient Background" }],
         };
-        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Gradient Background</div></mj-raw></mj-section>`);
+        const result = renderMJML({ layout, req: { isSubView: false } });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Gradient Background</div></mj-raw></mj-section>`);
     });
-    (0, globals_1.it)("renders a layout with a rotated container", () => {
+    it("renders a layout with a rotated container", () => {
         const layout = {
             type: "container",
             rotate: 45,
             contents: [{ type: "blank", contents: "Rotated Content" }],
         };
-        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Rotated Content</div></mj-raw></mj-section>`);
+        const result = renderMJML({ layout, req: { isSubView: false } });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Rotated Content</div></mj-raw></mj-section>`);
     });
-    (0, globals_1.it)("renders a layout with a custom class and CSS", () => {
+    it("renders a layout with a custom class and CSS", () => {
         const layout = {
             type: "container",
             customClass: "custom-container",
             customCSS: "border: 1px solid red;",
             contents: [{ type: "blank", contents: "Custom Styled Content" }],
         };
-        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
-        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Custom Styled Content</div></mj-raw></mj-section>`);
+        const result = renderMJML({ layout, req: { isSubView: false } });
+        expect(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Custom Styled Content</div></mj-raw></mj-section>`);
     });
 });
-(0, globals_1.describe)("index", () => {
-    (0, globals_1.describe)("post-bn", () => {
-        (0, globals_1.it)("renders a basic post button", () => {
+describe("index", () => {
+    describe("post-bn", () => {
+        it("renders a basic post button", () => {
             const result = post_btn("/submit", "Submit", "csrfToken123", {
                 btnClass: "btn-primary",
             });
-            (0, globals_1.expect)(result).toContain('<form action="/submit" method="post">');
-            (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
-            (0, globals_1.expect)(result).toContain('<button type="submit" class=" btn  btn-primary d-inline-block">Submit</button>');
-            (0, globals_1.expect)(result).toContain("</form>");
+            expect(result).toContain('<form action="/submit" method="post">');
+            expect(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
+            expect(result).toContain('<button type="submit" class=" btn  btn-primary d-inline-block">Submit</button>');
+            expect(result).toContain("</form>");
         });
-        (0, globals_1.it)("renders a basic post button", () => {
+        it("renders a basic post button", () => {
             const result = post_btn("/submit", "Submit", "csrfToken123", {
                 btnClass: "btn-primary",
             });
-            (0, globals_1.expect)(result).toContain('<form action="/submit" method="post">');
-            (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
-            (0, globals_1.expect)(result).toContain('<button type="submit" class=" btn  btn-primary d-inline-block">Submit</button>');
-            (0, globals_1.expect)(result).toContain("</form>");
+            expect(result).toContain('<form action="/submit" method="post">');
+            expect(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
+            expect(result).toContain('<button type="submit" class=" btn  btn-primary d-inline-block">Submit</button>');
+            expect(result).toContain("</form>");
         });
     });
-    (0, globals_1.describe)("post_delete_btn", () => {
-        (0, globals_1.it)("renders a delete button with confirmation", () => {
+    describe("post_delete_btn", () => {
+        it("renders a delete button with confirmation", () => {
             const req = {
                 csrfToken: () => "csrfToken123",
                 __: (str) => str,
@@ -607,67 +570,67 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
             };
             const result = post_delete_btn("/delete", req);
             const normalized = result.replace(/\s+/g, " ").trim();
-            (0, globals_1.expect)(normalized).toBe(`<form action=\"/delete\" method=\"post\"><input type=\"hidden\" name=\"_csrf\" value=\"csrfToken123\"><button type=\"submit\" class=\"btn btn-danger btn-sm\" onclick=\"return confirm('Are you sure?')\"><i class=\"fas fa-trash-alt\"></i></button></form>`
+            expect(normalized).toBe(`<form action=\"/delete\" method=\"post\"><input type=\"hidden\" name=\"_csrf\" value=\"csrfToken123\"><button type=\"submit\" class=\"btn btn-danger btn-sm\" onclick=\"return confirm('Are you sure?')\"><i class=\"fas fa-trash-alt\"></i></button></form>`
                 .replace(/\s+/g, " ")
                 .trim());
         });
     });
-    (0, globals_1.describe)("post_dropdown_item", () => {
-        (0, globals_1.it)("renders a dropdown item with confirmation", () => {
+    describe("post_dropdown_item", () => {
+        it("renders a dropdown item with confirmation", () => {
             const req = {
                 csrfToken: () => "csrfToken123",
                 __: (str) => str,
                 "Are you sure?": "Are you sure?",
             };
             const result = post_dropdown_item("/delete", "Delete", req, true);
-            (0, globals_1.expect)(result).toContain('<a class="dropdown-item"');
-            (0, globals_1.expect)(result).toContain("onclick=\"if(confirm('Are you sure?'))");
-            (0, globals_1.expect)(result).toContain("$('#delete').submit()\">Delete</a>");
-            (0, globals_1.expect)(result).toContain('<form id="delete" action="/delete" method="post">');
-            (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
+            expect(result).toContain('<a class="dropdown-item"');
+            expect(result).toContain("onclick=\"if(confirm('Are you sure?'))");
+            expect(result).toContain("$('#delete').submit()\">Delete</a>");
+            expect(result).toContain('<form id="delete" action="/delete" method="post">');
+            expect(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
         });
     });
-    (0, globals_1.describe)("settingsDropdown", () => {
-        (0, globals_1.it)("renders a settings dropdown", () => {
+    describe("settingsDropdown", () => {
+        it("renders a settings dropdown", () => {
             const result = settingsDropdown("dropdown1", "<a>Option 1</a>");
-            (0, globals_1.expect)(result).toContain('<div class="dropdown">');
-            (0, globals_1.expect)(result).toContain('<button class="btn btn-sm btn-outline-secondary"');
-            (0, globals_1.expect)(result).toContain('<div class="dropdown-menu dropdown-menu-end"');
-            (0, globals_1.expect)(result).toContain("<a>Option 1</a>");
+            expect(result).toContain('<div class="dropdown">');
+            expect(result).toContain('<button class="btn btn-sm btn-outline-secondary"');
+            expect(result).toContain('<div class="dropdown-menu dropdown-menu-end"');
+            expect(result).toContain("<a>Option 1</a>");
         });
     });
-    (0, globals_1.describe)("localeDate", () => {
-        (0, globals_1.it)("renders a localized date", () => {
+    describe("localeDate", () => {
+        it("renders a localized date", () => {
             const date = new Date("2023-01-01T00:00:00Z");
             const result = localeDate(date, {}, "en");
-            (0, globals_1.expect)(result).toContain('<time datetime="2023-01-01T00:00:00.000Z"');
-            (0, globals_1.expect)(result).toContain(">1/1/2023</time>");
+            expect(result).toContain('<time datetime="2023-01-01T00:00:00.000Z"');
+            expect(result).toContain(">1/1/2023</time>");
         });
-        (0, globals_1.it)("renders a localized date with custom options", () => {
+        it("renders a localized date with custom options", () => {
             const date = new Date("2023-01-01T00:00:00Z");
             const result = localeDate(date, { year: "numeric", month: "long", day: "numeric" }, "en");
-            (0, globals_1.expect)(result).toContain('<time datetime="2023-01-01T00:00:00.000Z"');
-            (0, globals_1.expect)(result).toContain(">January 1, 2023</time>");
+            expect(result).toContain('<time datetime="2023-01-01T00:00:00.000Z"');
+            expect(result).toContain(">January 1, 2023</time>");
         });
     });
 });
-(0, globals_1.describe)("builder", () => {
-    (0, globals_1.it)("renders the builder with default options", () => {
+describe("builder", () => {
+    it("renders the builder with default options", () => {
         const options = { someOption: "value" };
         const context = { someContent: "value" };
         const action = "/submit";
         const stepName = "step1";
         const layout = { type: "container", contents: [] };
         const csrfToken = "csrfToken123";
-        const result = (0, builder_1.default)({ options, context, action, stepName, layout }, csrfToken);
-        (0, globals_1.expect)(result).toContain('<div id="saltcorn-builder"></div>');
-        (0, globals_1.expect)(result).toContain('<form action="/submit" method="post" id="scbuildform">');
-        (0, globals_1.expect)(result).toContain('<input type="hidden" name="contextEnc"');
-        (0, globals_1.expect)(result).toContain('<input type="hidden" name="stepName" value="step1">');
-        (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123"');
-        (0, globals_1.expect)(result).toContain("builder.renderBuilder(");
-    });
-    (0, globals_1.it)("renders the builder with a version tag", () => {
+        const result = builder({ options, context, action, stepName, layout }, csrfToken);
+        expect(result).toContain('<div id="saltcorn-builder"></div>');
+        expect(result).toContain('<form action="/submit" method="post" id="scbuildform">');
+        expect(result).toContain('<input type="hidden" name="contextEnc"');
+        expect(result).toContain('<input type="hidden" name="stepName" value="step1">');
+        expect(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123"');
+        expect(result).toContain("builder.renderBuilder(");
+    });
+    it("renders the builder with a version tag", () => {
         const options = { someOptions: "value" };
         const context = { someContext: "value" };
         const action = "/submit";
@@ -675,11 +638,11 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
         const layout = { type: "container", contents: [] };
         const csrfToken = "csrfToken123";
         const version_tag = "v1.0.0";
-        const result = (0, builder_1.default)({ options, context, action, stepName, layout, version_tag }, csrfToken);
-        (0, globals_1.expect)(result).toContain('<script src="/static_assets/v1.0.0/builder_bundle.js"></script>');
-        (0, globals_1.expect)(result).toContain('<link rel="stylesheet" type="text/css" media="screen" href="/static_assets/v1.0.0/saltcorn-builder.css">');
+        const result = builder({ options, context, action, stepName, layout, version_tag }, csrfToken);
+        expect(result).toContain('<script src="/static_assets/v1.0.0/builder_bundle.js"></script>');
+        expect(result).toContain('<link rel="stylesheet" type="text/css" media="screen" href="/static_assets/v1.0.0/saltcorn-builder.css">');
     });
-    (0, globals_1.it)("renders the builder with custom mode", () => {
+    it("renders the builder with custom mode", () => {
         const options = { someOption: "value" };
         const context = { someOptions: "value" };
         const action = "/submit";
@@ -687,9 +650,9 @@ const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
         const layout = { type: "container", contents: [] };
         const csrfToken = "csrfToken123";
         const mode = "edit";
-        const result = (0, builder_1.default)({ options, context, action, stepName, layout, mode }, csrfToken);
-        (0, globals_1.expect)(result).toContain("builder.renderBuilder(");
-        (0, globals_1.expect)(result).toContain('"edit"');
+        const result = builder({ options, context, action, stepName, layout, mode }, csrfToken);
+        expect(result).toContain("builder.renderBuilder(");
+        expect(result).toContain('"edit"');
     });
 });
 //# sourceMappingURL=markup.test.js.map