discord-message-transcript-base 1.0.0

package/dist/core/markdown.js

@@ -0,0 +1,175 @@
+export function markdownToHTML(text, mentions, everyone, dateFormat) {
+    const codeBlock = [];
+    const codeLine = [];
+    // Code Block (```)
+    text = text.replace(/```(?:(\S+)\n)?([\s\S]+?)```/g, (_m, lang, code) => {
+        const rawLang = lang?.toLowerCase();
+        const normalizedLang = rawLang ? (LANGUAGE_ALIAS[rawLang] ?? rawLang) : null;
+        const language = normalizedLang && SUPPORTED_LANGUAGES.has(rawLang) ? normalizedLang : 'plaintext';
+        codeBlock.push(`<pre><code class="language-${language}">${code.trimEnd()}</code></pre>`);
+        return `%$%CODE!BLOCK!${codeBlock.length - 1}%$%`;
+    });
+    // Code line (`)
+    text = text.replace(/`([^`]+)`/g, (_m, code) => {
+        codeLine.push(`<code>${code}</code>`);
+        return `%$%CODE!LINE!${codeLine.length - 1}%$%`;
+    });
+    // Citation (> | >>>)
+    text = text.replace(/(^> ?.*(?:(?:\n^> ?.*)+)?)/gm, (match) => {
+        const cleanContent = match.split('\n').map(line => {
+            return line.replace(/^>+ ?/, '');
+        }).join('\n');
+        return `<blockquote class="quote-multi">${cleanContent}</blockquote>`;
+    });
+    // Headers (#)
+    text = text.replace(/^### (.*)(?=\n|$)/gm, `<h3>$1</h3>`);
+    text = text.replace(/^## (.*)(?=\n|$)/gm, `<h2>$1</h2>`);
+    text = text.replace(/^# (.*)(?=\n|$)/gm, `<h1>$1</h1>`);
+    // Subtext(-#)
+    text = text.replace(/^-# (.*)(?=\n|$)/gm, `<p class="subtext">$1</p>`);
+    // List (- | *)
+    text = text.replace(/^(\s*)[-*] (.*)(?=\n|$)/gm, (_m, indentation, text) => {
+        const isSubItem = indentation.length > 0;
+        const bullet = isSubItem ? '◦' : '•';
+        return `<p class="pList">${indentation}${bullet} ${text}</p>`;
+    });
+    // Spoiler (||)
+    text = text.replace(/\|\|(.*?)\|\|/gs, `<span class="spoilerMsg">$1</span>`);
+    // Bold & Italic (***)
+    text = text.replace(/\*\*\*(.*?)\*\*\*/gs, `<strong><em>$1</em></strong>`);
+    // Bold (**)
+    text = text.replace(/\*\*(.*?)\*\*/gs, `<strong>$1</strong>`);
+    // Underline(__)
+    text = text.replace(/__(.*?)__/gs, `<u>$1</u>`);
+    // Italic (*)
+    text = text.replace(/\*(.*?)\*/gs, `<em>$1</em>`);
+    text = text.replace(/\_(.*?)\_/gs, `<em>$1</em>`);
+    // Strikethrough (~~)
+    text = text.replace(/~~(.*?)~~/gs, `<s>$1</s>`);
+    // Links ([]() && https)
+    text = text.replace(/\[([^\]]+)\]\((https?:\/\/[^\s]+)\)/g, (_m, text, link) => `<a href="${link}" target="_blank">${text}</a>`);
+    text = text.replace(/(?<!href=")(https?:\/\/[^\s]+)/g, (_m, link) => `<a href="${link}" target="_blank">${link}</a>`);
+    // Mentions (@)
+    if (mentions.users.length != 0) {
+        const users = new Map(mentions.users.map(user => [user.id, user]));
+        text = text.replace(/<@!?(\d+)>/g, (_m, id) => {
+            let user = users.get(id);
+            return user ? `<span class="mention" style="color: ${user.color ?? "#dbdee1"}">@${user.name}</span> ` : `<span class="mention"><@${id}></span> `;
+        });
+    }
+    if (mentions.roles.length != 0) {
+        const roles = new Map(mentions.roles.map(role => [role.id, role]));
+        text = text.replace(/<@&(\d+)>/g, (_m, id) => {
+            const role = roles.get(id);
+            return role ? `<span class="mention" style="color: ${role.color}">@${role.name}</span> ` : `<span class="mention"><@&${id}></span> `;
+        });
+    }
+    if (mentions.channels.length != 0) {
+        const channels = new Map(mentions.channels.map(channel => [channel.id, channel]));
+        text = text.replace(/<#(\d+)>/g, (_m, id) => {
+            const channel = channels.get(id);
+            return channel && channel.name ? `<span class="mention">#${channel.name}</span> ` : `<span class="mention"><#${id}></span> `;
+        });
+    }
+    if (everyone) {
+        text = text.replace("@everyone", `<span class="mention">@everyone</span> `);
+        text = text.replace("@here", `<span class="mention">@here</span> `);
+    }
+    // Timestamp  
+    const { locale, timeZone } = dateFormat.resolvedOptions();
+    text = text.replace(/<t:(\d+)(?::([tTdDfFR]))?>/g, (_m, timestamp, format) => {
+        const date = new Date(parseInt(timestamp, 10) * 1000);
+        const style = format || 'f';
+        const isoString = date.toISOString();
+        const titleFormatter = new Intl.DateTimeFormat(locale, {
+            dateStyle: 'full',
+            timeStyle: 'full',
+            timeZone: timeZone,
+        });
+        const fullDateForTitle = titleFormatter.format(date);
+        if (style === 'R') {
+            const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+            const seconds = Math.floor((date.getTime() - Date.now()) / 1000);
+            const minutes = Math.floor(seconds / 60);
+            const hours = Math.floor(minutes / 60);
+            const days = Math.floor(hours / 24);
+            let relativeString;
+            if (Math.abs(days) > 30)
+                relativeString = rtf.format(Math.floor(days / 30.44), 'month');
+            else if (Math.abs(days) > 0)
+                relativeString = rtf.format(days, 'day');
+            else if (Math.abs(hours) > 0)
+                relativeString = rtf.format(hours, 'hour');
+            else if (Math.abs(minutes) > 0)
+                relativeString = rtf.format(minutes, 'minute');
+            else
+                relativeString = rtf.format(seconds, 'second');
+            return `<time datetime="${isoString}" title="${fullDateForTitle}">${relativeString}</time>`;
+        }
+        else if (isStyleKey(style)) {
+            const formatter = new Intl.DateTimeFormat(locale, {
+                ...styleOptions[style],
+                timeZone: timeZone,
+            });
+            const formattedDate = formatter.format(date);
+            return `<time datetime="${isoString}" title="${fullDateForTitle}">${formattedDate}</time>`;
+        }
+        return _m;
+    });
+    // Break Line
+    text = text.replace(/\n/g, '<br>');
+    // Clear Unecessary Break Line
+    text = text.replace(/(<\/(?:p|h[1-3]|blockquote)>)\s*<br>/g, '$1');
+    // Remove Placeholders
+    text = text.replace(/%\$%CODE!BLOCK!(\d+)%\$%/g, (_m, number) => {
+        return codeBlock[number];
+    });
+    text = text.replace(/%\$%CODE!LINE!(\d+)%\$%/g, (_m, number) => {
+        return codeLine[number];
+    });
+    return text;
+}
+// Check if styleKey is valid
+const styleOptions = {
+    't': { timeStyle: 'short' },
+    'T': { timeStyle: 'medium' },
+    'd': { dateStyle: 'short' },
+    'D': { dateStyle: 'long' },
+    'f': { dateStyle: 'long', timeStyle: 'short' },
+    'F': { dateStyle: 'full', timeStyle: 'short' },
+};
+function isStyleKey(key) {
+    return key in styleOptions;
+}
+// At least I hope
+const SUPPORTED_LANGUAGES = new Set([
+    'bash', 'sh', 'shell',
+    'c',
+    'cpp',
+    'css',
+    'javascript', 'js',
+    'typescript', 'ts',
+    'json',
+    'xml',
+    'yaml', 'yml',
+    'java',
+    'kotlin',
+    'php',
+    'python', 'py',
+    'ruby', 'rb',
+    'sql',
+    'lua',
+    'markdown', 'md',
+    'plaintext', 'txt'
+]);
+const LANGUAGE_ALIAS = {
+    sh: 'bash',
+    shell: 'bash',
+    js: 'javascript',
+    ts: 'typescript',
+    py: 'python',
+    rb: 'ruby',
+    md: 'markdown',
+    yml: 'yaml',
+    txt: 'plaintext'
+};

package/dist/core/output.d.ts

@@ -0,0 +1,3 @@
+import { JsonData, Uploadable } from "../types/types.js";
+import Stream from 'stream';
+export declare function output(json: JsonData): Promise<string | Stream | Buffer | Uploadable>;

package/dist/core/output.js

@@ -0,0 +1,24 @@
+import { Readable } from 'stream';
+import { Html } from "../renderers/html/html.js";
+export async function output(json) {
+    const objectHTML = new Html(json);
+    const stringHTML = objectHTML.toHTML();
+    if (json.options.returnType == "string") {
+        return stringHTML;
+    }
+    const buffer = Buffer.from(stringHTML, 'utf-8');
+    if (json.options.returnType == "buffer") {
+        return buffer;
+    }
+    if (json.options.returnType == "stream") {
+        return Readable.from([stringHTML]);
+    }
+    if (json.options.returnType == "uploadable") {
+        return {
+            content: stringHTML,
+            contentType: 'text/html',
+            fileName: json.options.fileName
+        };
+    }
+    throw new Error("Return format or return type invalid!");
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { ConvertTranscriptOptions, ReturnTypeBase, OutputTypeBase } from "./types/types.js";
+export * from './types/types.js';
+export { CustomError } from "./core/error.js";
+export { output as outputBase } from "./core/output.js";
+/**
+ * Converts a JSON transcript string into an HTML transcript.
+ * Depending on the `returnType` option, this function can return a `string`, a `Buffer`, a `Stream`, or an `Uploadable` object.
+ *
+ * @param jsonString The JSON string representing the transcript data.
+ * @param options Configuration options for converting the transcript. See {@link ConvertTranscriptOptions} for details.
+ * @returns A promise that resolves to the HTML transcript in the specified format.
+ */
+export declare function renderHTMLFromJSON<T extends ReturnTypeBase = typeof ReturnTypeBase.String>(jsonString: string, options?: ConvertTranscriptOptions<T>): Promise<OutputTypeBase<T>>;

package/dist/index.js

@@ -0,0 +1,37 @@
+import { CustomError } from "./core/error.js";
+import { output } from "./core/output.js";
+import { ReturnTypeBase, ReturnFormat } from "./types/types.js";
+export * from './types/types.js';
+export { CustomError } from "./core/error.js";
+export { output as outputBase } from "./core/output.js";
+/**
+ * Converts a JSON transcript string into an HTML transcript.
+ * Depending on the `returnType` option, this function can return a `string`, a `Buffer`, a `Stream`, or an `Uploadable` object.
+ *
+ * @param jsonString The JSON string representing the transcript data.
+ * @param options Configuration options for converting the transcript. See {@link ConvertTranscriptOptions} for details.
+ * @returns A promise that resolves to the HTML transcript in the specified format.
+ */
+export async function renderHTMLFromJSON(jsonString, options = {}) {
+    try {
+        const jsonParse = JSON.parse(jsonString);
+        const json = {
+            ...jsonParse,
+            options: {
+                ...jsonParse.options,
+                returnFormat: ReturnFormat.HTML,
+                returnType: options?.returnType ?? ReturnTypeBase.String,
+                selfContained: options?.selfContained ?? false,
+                watermark: options.watermark ?? jsonParse.options.watermark
+            }
+        };
+        return await output(json);
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            throw new CustomError(`Error converting JSON to HTML: ${error.stack}`);
+        }
+        const unknowErrorMessage = String(error);
+        throw new CustomError(`Unknown error: ${unknowErrorMessage}`);
+    }
+}

package/dist/renderers/html/css.d.ts

@@ -0,0 +1,11 @@
+export declare const DEFAULT_CSS = "\nbody {\n    background-color: #3a3c43;\n    color: #dbdee1;\n    font-family: \"Whitney\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n}\nheader {\n    height: fit-content;\n    border-bottom: 2px solid black;\n    margin-top: 2rem;\n    padding-left: 2rem;\n    padding-bottom: 1rem;\n    display: flex;\n    flex-direction: column;\n    display: flex;\n    flex-direction: row;\n}\na {\n    text-decoration: none;\n    color: #1E90FF;\n}\np {\n    margin: 0;\n}\nh1 {\n    margin: 0.5rem 0;\n}\nh2 {\n    margin: 0.3rem 0;\n}\nh3 {\n    margin: 0.15rem\n}\nh4 {\n    margin: 0;\n}\ncode {\n    border: 1px solid #202225;\n    border-radius: 0.25rem;\n}\nblockquote {\n    margin: 0.5rem 0;\n    border-left: 0.25rem solid #4f545c;\n    padding: 0.4rem 0.6rem;\n    border-radius: 0.25rem;\n    color: #9f9fa6;\n}\n.line {\n    display: flex;\n    align-items: baseline;\n    gap: 0.5rem\n}\n.badge {\n    background-color: #5865f2;\n    color: white;\n    font-weight: 600;\n    font-size: 80%;\n    padding: 0.1rem 0.35rem;\n    border-radius: 0.25rem;\n    letter-spacing: 0.03rem;\n    height: fit-content;\n    width: fit-content;\n    align-self: flex-start;\n}\n.badgeTag {\n    background-color: #747F8D50;\n    color: white;\n    font-weight: 600;\n    font-size: 70%;\n    padding: 0.1rem 0.35rem;\n    border-radius: 0.25rem;\n    letter-spacing: 0.03rem;\n    height: fit-content;\n    width: fit-content;\n    align-self: center;\n}\n.mention {\n    background-color: #5664fa41;\n    padding: 0.2rem;\n    border-radius: 0.25rem;\n    transition: background-color 0.2s ease;\n}\n.mention:hover {\n    background-color: #5664fa7e;\n}\n.guildInitialsIcon {\n    width: 7rem;\n    height: 7rem;\n    border-radius: 50%;\n    background-color: #4f545c;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 3rem;\n    font-weight: 600;\n}\n";
+export declare const MESSAGE_CSS = "\n.messageDiv {\n    display: flex;\n    flex-direction: column;\n    gap: 0.2rem;\n    padding: 0.5rem;\n    border-radius: 1rem;\n}\n.messageDiv.highlight, .messageDiv:hover {\n    background-color: #40434b;\n    transition: background-color 0.3s ease-in-out;\n}\n.messageBotton {\n    display: flex;\n    flex-direction: row;\n    gap: 1rem;\n    padding: 0.5rem;\n    border-radius: 0.25rem;\n}\n.messageImg {\n    width: 3.5rem; \n    height: 3.5rem; \n    border-radius: 50%;\n}\n.messageDivRight {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem\n}\n.messageUser {\n    display: flex;\n    flex-direction: row;\n    gap: 0.75rem;\n}\n.messageUsername {\n    margin: 0;\n}\n.messageTimeStamp {\n    color: #999999;\n    font-size: 77.5%;\n    align-self: center;\n}\n.messageContent {\n    line-height: 1.5;\n}\n.pList {\n    white-space: pre-wrap;\n}\n.subtext {\n    font-size: 85%;\n    color: #808080;\n}\n.spoilerMsg {\n    display: inline-block;\n    background-color: #202225;\n    color: #202225;\n    padding: 0 0.2rem;\n    border-radius: 0.2rem;\n    cursor: pointer;\n    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;\n}\n.spoilerMsg.revealed {\n    background-color: transparent;\n    color: inherit;\n}\n.messageReply {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #b5bac1;\n    cursor: pointer;\n    margin-left: 2rem;\n}\n.messageReplySvg {\n    flex-shrink: 0;\n    width: 2.25rem;\n    height: 2.25rem;\n    color: #b5bac1;\n}\n.messageReplyImg {\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n.messageReplyAuthor {\n    font-weight: 600;\n    color: #dbdee1;\n    margin-right: 0.3rem;\n}\n.badgeReply {\n    background-color: #5865f2;\n    color: white;\n    font-weight: 600;\n    font-size: 70%;\n    padding: 0.1rem 0.3rem;\n    border-radius: 0.25rem;\n    letter-spacing: 0.03rem;\n    height: fit-content;\n    align-self: center;\n    flex-shrink: 0;\n}\n.messageReplyText {\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: #b5bac1;\n    font-size: 0.75rem;\n}\n";
+export declare const EMBED_CSS = "\n.embed {\n    background-color: #2b2d31;\n    border: 0.15rem solid #2b2d31;\n    border-left: 0.25rem solid;\n    border-radius: 0.25rem;\n    padding: 0.5rem 0.75rem;\n    margin-top: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    max-width: 40rem;\n    min-width: 30rem;\n}\n.embed a {\n    color: #00aff4;\n    text-decoration: none;\n}\n.embed a:hover {\n    text-decoration: underline;\n}\n.embedHeader {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 0.5rem;\n}\n.embedHeaderLeft {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n}\n.embedHeaderLeftAuthor {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #ffffff;\n    margin-bottom: 0.5rem;\n}\n.embedHeaderLeftAuthorImg {\n    width: 1.5rem;\n    height: 1.5rem;\n    border-radius: 50%;\n}\n.embedHeaderLeftAuthorName {\n    color: #ffffff;\n    font-weight: 500;\n}\n.embedHeaderLeftTitle {\n    font-size: 1rem;\n    font-weight: bold;\n    color: #ffffff;\n    margin-bottom: 0.75rem;\n}\n.embedHeaderThumbnail {\n    max-width: 80px;\n    max-height: 80px;\n    object-fit: contain;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n}\n.embedDescription {\n    font-size: 0.875rem;\n    color: #dcddde;\n}\n.embedFields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n}\n.embedFieldsField {\n    flex: 1;\n    min-width: 150px;\n}\n.embedFieldsFieldTitle {\n    font-size: 0.75rem;\n    font-weight: bold;\n    color: #ffffff;\n    margin-bottom: 0.25rem;\n}\n.embedFieldsFieldValue {\n    font-size: 0.875rem;\n    color: #dcddde;\n}\n.embedImage {\n    margin-top: 0.5rem;\n    max-width: 100%;\n    height: auto;\n}\n.embedImage img {\n    max-width: 100%;\n    max-height: 300px;\n    object-fit: contain;\n    border-radius: 0.25rem;\n}\n.embedFooter {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.75rem;\n    color: #999999;\n    margin-top: 0.5rem;\n}\n.embedFooterImg {\n    width: 1.25rem;\n    height: 1.25rem;\n    border-radius: 50%;\n}\n.embedFooterText {\n    color: #999999;\n}\n";
+export declare const ATTACHMENT_CSS = "\n.attachmentImage, .attachmentVideo {\n    max-width: 400px;\n    height: auto;\n    border-radius: 0.25rem;\n    margin-top: 0.5rem;\n}\n.attachmentAudio {\n    width: 300px;\n    margin-top: 0.5rem;\n}\n.attachmentFile {\n    background-color: #2b2d31;\n    border: 1px solid #202225;\n    border-radius: 0.75rem;\n    padding: 0.75rem;\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    max-width: 400px;\n    margin-top: 0.5rem;\n    width: fit-content;\n}\n.attachmentFileIcon {\n    width: 2.5rem;\n    height: 2.5rem;\n    fill: #b9bbbe;\n    flex-shrink: 0;\n}\n.attachmentFileInfo {\n    display: flex;\n    flex-direction: column;\n    gap: 0.1rem;\n    overflow: hidden;\n    flex-grow: 1;\n}\n.attachmentFileName {\n    color: #ffffff;\n    text-decoration: none;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.attachmentFileSize {\n    font-size: 0.75rem;\n    color: #72767d;\n}\n.attachmentDownload {\n    display: block;\n    flex-shrink: 0;\n}\n.attachmentDownloadIcon {\n    width: 1.5rem;\n    height: 1.5rem;\n    fill: #b9bbbe;\n    transition: fill 0.2s ease;\n}\n.attachmentDownload:hover .attachmentDownloadIcon {\n    fill: #ffffff;\n}\n.spoilerAttachment {\n    position: relative;\n    display: inline-block;\n    border-radius: 0.5rem;\n    overflow: hidden;\n    cursor: pointer;\n}\n.spoilerAttachment .spoilerAttachmentContent {\n    filter: blur(64px);\n    pointer-events: none;\n    transition: filter 0.2s ease;\n    width: 100%;\n    height: 100%;\n}\n.spoilerAttachment .spoilerAttachmentOverlay {\n    position: absolute;\n    inset: 0;\n    background: rgba(32, 34, 37, 0.85);\n    color: #fff;\n    font-weight: 600;\n    letter-spacing: 0.05em;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    user-select: none;\n}\n.spoilerAttachment.revealed .spoilerAttachmentContent {\n    filter: none;\n    pointer-events: auto;\n}\n.spoilerAttachment.revealed .spoilerAttachmentOverlay {\n    display: none;\n}\n";
+export declare const ACTIONROW_CSS = "\n.actionRow {\n    display: flex;\n    gap: 0.5rem;\n    margin-top: 0.5rem;\n}\n";
+export declare const BUTTON_CSS = "\n.button {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0rem 0.8rem;\n    height: 2.5rem;\n    border-radius: 0.6rem;\n    color: white;\n    font-weight: 600;\n    cursor: pointer;\n    transition: filter 0.2s ease;\n}\n.button:hover {\n    filter: brightness(1.1);\n}\n.buttonEmoji {\n    font-size: 1.25rem;\n}\n.buttonLabel {\n    font-size: 0.875rem;\n}\n.buttonLink {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    color: white;\n    font-weight: 600;\n}\n.buttonLinkIcon {\n    width: 1.25rem;\n    height: 1.25rem;\n}\n";
+export declare const COMPONENTS_CSS = "\n.selector {\n    width: 100%;\n    position: relative;\n}\n.selectorInput {\n    background-color: #2b2d31;\n    border: 1px solid #202225;\n    border-radius: 0.75rem;\n    padding: 0.75rem;\n    min-width: 17.5rem;\n    cursor: pointer;\n    user-select: none;\n}\n.selectorInputText {\n    color: #808080;\n}\n.selectorOptionMenu {\n    display: none; \n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    background-color: #2b2d31;\n    border: 1px solid #202225;\n    border-radius: 1rem;\n    margin-top: 0.25rem;\n    padding: 0.5rem;\n    z-index: 10;\n    box-sizing: border-box;\n}\n.selector.active .selectorOptionMenu {\n    display: block;\n}\n.selectorOption {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.75rem;\n    border-radius: 0.75rem;\n    cursor: pointer;\n    transition: background-color 0.2s ease;\n}\n.selectorOption:hover {\n    background-color: #4f545c;\n}\n.selectorOptionEmoji {\n    font-size: 1.25rem;\n}\n.selectorOptionRight {\n    display: flex;\n    flex-direction: column;\n}\n.selectorOptionTitle {\n    font-weight: 500;\n}\n.selectorOptionDesc {\n    font-size: 0.75rem;\n    color: #808080;\n}\n";
+export declare const COMPONENTSV2_CSS = "\n.mediaGallery {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n    width: 100%;\n    max-width: 40rem;\n    aspect-ratio: 1 / 1;\n    padding: 0.35rem;\n    overflow: hidden;\n}\n.mediaGalleryItem {\n    flex-grow: 1;\n    flex-basis: 0;\n    min-width: 30%;\n    display: flex;\n}\n.mediaGalleryImg {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    border-radius: 1rem;\n}\n.container {\n    background-color: #2b2d31;\n    border-radius: 0.5rem;\n    padding: 1rem;\n    max-width: 40rem;\n    min-width: 30rem;\n    border-left: 0.25rem solid;\n}\n.section {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: 0.5rem 0;\n}\n.sectionRight {\n    margin-right: 0.5rem;\n    margin-left: 1rem;\n}\n.sectionThumbnail {\n    width: 5rem;\n    height: 5rem;\n    border-radius: 0.5rem;\n}\n.textDisplay {\n    padding: 0.5rem 0;\n}\n.separator {\n    border: 1px solid #808080;\n}\n";
+export declare const POLL_CSS = "\n.pollDiv {\n    background-color: #2b2d31;\n    border-radius: 0.5rem;\n    padding: 1rem;\n    margin-top: 0.5rem;\n    max-width: 40rem;\n    min-width: 25rem\n}\n.pollQuestion {\n    font-size: 1.1rem;\n    font-weight: bold;\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n.pollAnswers {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n.pollAnswer {\n    background-color: #3a3c42;\n    border-radius: 0.3rem;\n    padding: 0.75rem;\n    cursor: pointer;\n    border: 1px solid transparent;\n    transition: border-color 0.2s ease;\n    position: relative;\n    overflow: hidden;\n}\n.pollAnswer:hover {\n    border-color: #4d515a;\n}\n.pollAnswerBar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: #5664fa7a;\n    border-radius: 0.2rem;\n    z-index: 1;\n}\n.pollAnswerContent {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n.pollAnswerDetails {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n.pollAnswerEmoji {\n    font-size: 1.25rem;\n}\n.pollAnswerText {\n    font-weight: 500;\n}\n.pollAnswerVotes {\n    font-size: 0.8rem;\n    color: #b5bac1;\n    font-weight: bold;\n}\n.pollFooter {\n    margin-top: 1rem;\n    font-size: 0.75rem;\n    color: #949ba4;\n}\n";
+export declare const POLL_RESULT_EMBED_CSS = "\n.pollResultEmbed {\n    background-color: #2b2d31;\n    border-radius: 0.5rem;\n    padding: 1rem;\n    margin-top: 0.5rem;\n    border: 1px solid #3a3c42;\n    min-width: 20rem;\n    max-width: 40rem;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n}\n.pollResultEmbedWinner {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 1rem;\n    font-weight: 600;\n    margin-bottom: 0.4rem;\n}\n.pollResultEmbedCheckmark {\n    color: #57f287;\n    font-size: 1.1em;\n}\n.pollResultEmbedSubtitle {\n    font-size: 0.9rem;\n    color: #b5bac1;\n}\n.pollResultEmbedButtonDiv {\n    margin-right: 0.5rem;\n    margin-left: 1rem;\n    align-self: center;\n}\n.pollResultEmbedButton {\n    background-color: black;\n    color: white;\n    padding: 0.5rem 1rem;\n    border-radius: 0.3rem;\n    text-decoration: none;\n    font-weight: 500;\n    transition: background-color 0.2s ease;\n    cursor: pointer;\n}\n.pollResultEmbedButton:hover {\n    filter: brightness(1.1);\n}\n";
+export declare const REACTIONS_CSS = "\n.reactionsDiv {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.5rem;\n}\n.reaction {\n    align-items: center;\n    background-color: #2b2d31;\n    border: 1px solid #3a3c42;\n    border-radius: 1rem;\n    padding: 0.25rem 0.6rem;\n    font-size: 1rem;\n    color: #dcddde;\n    font-weight: bold;\n    cursor: pointer;\n}\n.reaction:hover {\n    filter: brightness(1.1);\n}\n";