slack-blocks-to-jsx 0.1.4 → 0.1.6

package/dist/index.d.mts

@@ -991,6 +991,17 @@ type Props = {
     time?: Date;
     className?: string;
     style?: React.CSSProperties;
+    unstyled?: boolean;
+    data?: {
+        users?: {
+            id: string;
+            name: string;
+        }[];
+        channels?: {
+            id: string;
+            name: string;
+        }[];
+    };
 };
 declare const Message: (props: Props) => JSX.Element;
 

package/dist/index.d.ts

@@ -991,6 +991,17 @@ type Props = {
     time?: Date;
     className?: string;
     style?: React.CSSProperties;
+    unstyled?: boolean;
+    data?: {
+        users?: {
+            id: string;
+            name: string;
+        }[];
+        channels?: {
+            id: string;
+            name: string;
+        }[];
+    };
 };
 declare const Message: (props: Props) => JSX.Element;
 

package/dist/index.js

@@ -57,361 +57,26 @@ var parseEmojis = (text) => {
 
 // src/utils/slack_text_to_jsx.ts
 var import_html_react_parser = __toESM(require("html-react-parser"));
-
-// src/utils/slack_text_parser.ts
-var import_xregexp = __toESM(require("xregexp"));
-var known_commands = ["here", "channel", "group", "everyone"];
-var escapeTags = (string) => ["<", string.substring(1, string.length - 1), ">"].join("");
-var regex = {
-  new_line: import_xregexp.default.cache("\\n", "nsg"),
-  whitespace: import_xregexp.default.cache("\\s", "ns"),
-  characters: import_xregexp.default.cache("(?<mrkdwnCharacter>[\\*\\`\\~\\_]|&gt;)", "ng"),
-  user_mention: import_xregexp.default.cache(
-    "<@(((?<userID>[U|W][^|>]+)(\\|(?<userName>[^>]+))?)|(?<userNameWithoutID>[^>]+))>",
-    "ng"
-  ),
-  channel_mention: import_xregexp.default.cache(
-    "<#(((?<channelID>C[^|>]+)(\\|(?<channelName>[^>]+))?)|(?<channelNameWithoutID>[^>]+))>",
-    "ng"
-  ),
-  link: import_xregexp.default.cache("<(?<linkUrl>https?:[^|>]+)(\\|(?<linkHtml>[^>]+))?>", "ng"),
-  mail_to: import_xregexp.default.cache("<mailto:(?<mailTo>[^|>]+)(\\|(?<mailToName>[^>]+))?>", "ng"),
-  tel: import_xregexp.default.cache("<tel:(?<tel>[^|>]+)(\\|(?<telName>[^>]+))?>", "ng"),
-  subteam_command: import_xregexp.default.cache(
-    "<!subteam\\^(?<subteamID>S[^|>]+)(\\|(?<subteamName>[^>]+))?>",
-    "ng"
-  ),
-  command: import_xregexp.default.cache("<!(?<commandLiteral>[^|>]+)(\\|(?<commandName>[^>]+))?>", "ng")
-};
-var utility = {
-  replace_username: (match, users) => {
-    const userName = match.userName || match.userNameWithoutID || match.userID && users && users[match.userID];
-    if (userName) {
-      return `<span class="user-mention">@${userName}</span>`;
-    }
-    return escapeTags(match.toString());
-  },
-  replace_channel: (match, channels) => {
-    const channelName = match.channelName || match.channelNameWithoutID || match.channelID && channels && channels[match.channelID];
-    if (channelName) {
-      return `<span class="channel-mention">#${channelName}</span>`;
-    }
-    return escapeTags(match.toString());
-  },
-  replace_mailto: (match) => {
-    return `<a href="mailto:${match.mailTo}" target="_blank" rel="noopener noreferrer">${match.mailToName || match.mailTo}</a>`;
-  },
-  replace_tel: (match) => {
-    return `<a href="tel:${match.tel}" target="_blank" rel="noopener noreferrer">${match.telName || match.tel}</a>`;
-  },
-  replace_usergroup: (match, usergroups) => {
-    const userGroupName = match.subteamName || match.subteamID && usergroups && usergroups[match.subteamID];
-    if (userGroupName) {
-      return `${userGroupName}`;
-    }
-    return escapeTags(match.toString());
-  },
-  replace_command: (match) => {
-    if (match.commandLiteral && match.commandLiteral.startsWith("subteam")) {
-      return match.toString();
-    } else if (known_commands.includes(match.commandLiteral)) {
-      return `@${match.commandLiteral}`;
-    } else if (match.commandName) {
-      return `<${match.commandName}>`;
-    }
-    return `<${match.commandLiteral}>`;
-  },
-  build_opening_delimiter_regexp: (pattern, options) => {
-    const { prefixPattern = "", escapeDelimiter = true, spacePadded = false } = options;
-    const escapedDelimiter = escapeDelimiter ? import_xregexp.default.escape(pattern) : pattern;
-    return import_xregexp.default.cache(
-      `${spacePadded ? "(?<openingCapturedWhitespace>^|\\s)" : ""}${prefixPattern}${escapedDelimiter}`,
-      "ns"
-    );
-  },
-  build_closing_delimiter_regexp: (delimiter, options) => {
-    const { spacePadded = false, escapeDelimiter = true } = options;
-    const escapedDelimiter = escapeDelimiter ? import_xregexp.default.escape(delimiter) : delimiter;
-    return import_xregexp.default.cache(
-      `${escapedDelimiter}${spacePadded ? "(?<closingCapturedWhitespace>\\s|$)" : ""}`,
-      "ns"
-    );
-  },
-  increment_windows: (windows, offset) => {
-    windows.forEach((tagWindow) => {
-      tagWindow[0] += offset;
-      tagWindow[1] += offset;
-    });
-    return windows;
-  }
-};
-var patterns = {
-  inline_code_opening: '<code class="slack_inline_code">',
-  inline_code_closing: "</code>",
-  code_opening: '<pre class="slack_code">',
-  code_closing: "</pre>",
-  bold_opening: '<strong class="slack_bold">',
-  bold_closing: "</strong>",
-  strikethrough_opening: '<del class="slack_strikethrough">',
-  strikethrough_closing: "</del>",
-  italic_opening: '<i class="slack_italics">',
-  italic_closing: "</i>",
-  blockquote_opening: '<blockquote class="slack_blockquote">',
-  blockquote_closing: "</blockquote>",
-  inline_blockquote_opening: '<blockquote class="slack_inline_blockquote">',
-  inline_blockquote_closing: "</blockquote>",
-  line_break_tag_literal: "<br />"
-};
-var slack_text_parser = (text, options) => {
+var import_slack_markdown = require("slack-markdown");
+var slack_text_parser = import_slack_markdown.toHTML;
+var slack_text_to_jsx = (text, parse_options) => {
+  const { markdown, users, channels } = parse_options;
   if (!text)
-    return text;
-  let content = text;
-  const users = options.users || {};
-  const channels = options.channels || {};
-  const usergroups = options.usergroups || {};
-  const markdown = options.markdown;
-  content = import_xregexp.default.replace(text, regex.link, (match) => {
-    const slackMrkdwnPercentageCharsMap = {
-      "*": "%2A",
-      "&gt;": "%26gt;",
-      "`": "%27",
-      "~": "%7E",
-      _: "%5F"
-    };
-    const mrkdwnCharacter = match.mrkdwnCharacter;
-    const encodedLink = import_xregexp.default.replace(
-      match.linkUrl,
-      regex.characters,
-      (match2) => slackMrkdwnPercentageCharsMap[mrkdwnCharacter] || match2.mrkdwnCharacter
-    );
-    return `<a href="${encodedLink}" target="_blank" rel="noopener noreferrer">${match.linkHtml || encodedLink}</a>`;
-  });
-  if (markdown)
-    content = parse_markdown(content);
-  return import_xregexp.default.replaceEach(content, [
-    [regex.user_mention, (match) => utility.replace_username(match, users)],
-    [regex.channel_mention, (match) => utility.replace_channel(match, channels)],
-    [regex.mail_to, (match) => utility.replace_mailto(match)],
-    [regex.tel, (match) => utility.replace_tel(match)],
-    [regex.subteam_command, (match) => utility.replace_usergroup(match, usergroups)],
-    [regex.command, (match) => utility.replace_command(match)]
-  ]);
-};
-var parse_markdown = (text) => {
-  let expandedTextAndWindows = { text, windows: [[0, text.length]] };
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "*",
-    replacementOpeningLiteral: patterns.bold_opening,
-    replacementClosingLiteral: patterns.bold_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "~",
-    replacementOpeningLiteral: patterns.strikethrough_opening,
-    replacementClosingLiteral: patterns.strikethrough_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "_",
-    replacementOpeningLiteral: patterns.italic_opening,
-    replacementClosingLiteral: patterns.italic_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      spacePadded: true,
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "```",
-    replacementOpeningLiteral: patterns.code_opening,
-    replacementClosingLiteral: patterns.code_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      partitionWindowOnMatch: true,
-      replaceNewlines: true
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "`",
-    replacementOpeningLiteral: patterns.inline_code_opening,
-    replacementClosingLiteral: patterns.inline_code_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      partitionWindowOnMatch: true
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "&gt;&gt;&gt;",
-    replacementOpeningLiteral: patterns.blockquote_opening,
-    replacementClosingLiteral: patterns.blockquote_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      prefixPattern: "^\\s*",
-      endingPattern: "$",
-      replaceNewlines: true,
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "&gt;",
-    replacementOpeningLiteral: patterns.inline_blockquote_opening,
-    replacementClosingLiteral: patterns.inline_blockquote_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      prefixPattern: "^\\s*",
-      endingPattern: "\\n|$",
-      maxReplacements: 100
-    }
-  });
-  return expandedTextAndWindows.text;
-};
-var replace_characters = (input) => {
-  var _a;
-  const {
-    closedTagWindows,
-    delimiter,
-    options,
-    replacementClosingLiteral,
-    replacementOpeningLiteral,
-    text,
-    tagWindowIndex = 0,
-    tagWindowOffset = 0
-  } = input;
-  const partitionWindowOnMatch = options.partitionWindowOnMatch;
-  const spacePadded = options.spacePadded;
-  const asymmetric = options.endingPattern;
-  const replaceNewlines = options.replaceNewlines;
-  const prefixPattern = options.prefixPattern;
-  let maxReplacements = options.maxReplacements;
-  const openingDelimiterRegExp = utility.build_opening_delimiter_regexp(delimiter, {
-    spacePadded,
-    prefixPattern
-  });
-  const closingDelimiterRegExp = asymmetric ? utility.build_closing_delimiter_regexp((_a = options.endingPattern) != null ? _a : "", {
-    escapeDelimiter: false
-  }) : utility.build_closing_delimiter_regexp(delimiter, { spacePadded });
-  if (tagWindowIndex >= closedTagWindows.length || maxReplacements && maxReplacements <= 0) {
-    return {
-      text,
-      windows: closedTagWindows
-    };
-  }
-  const currentClosedTagWindow = closedTagWindows[tagWindowIndex];
-  const tagWindowStartIndex = currentClosedTagWindow == null ? void 0 : currentClosedTagWindow[0];
-  const tagWindowEndIndex = currentClosedTagWindow == null ? void 0 : currentClosedTagWindow[1];
-  if (tagWindowStartIndex >= tagWindowEndIndex || tagWindowStartIndex + tagWindowOffset > tagWindowEndIndex) {
-    return replace_characters({
-      text,
-      delimiter,
-      replacementClosingLiteral,
-      replacementOpeningLiteral,
-      closedTagWindows,
-      options,
-      tagWindowIndex: tagWindowIndex + 1
-    });
-  }
-  const openingMatch = import_xregexp.default.exec(
-    text,
-    openingDelimiterRegExp,
-    tagWindowStartIndex + tagWindowOffset
-  );
-  if (openingMatch && openingMatch.index < tagWindowEndIndex) {
-    const closingDelimiterLength = asymmetric ? 0 : delimiter.length;
-    const closingMatchMaxIndex = (tagWindowIndex === closedTagWindows.length - 1 && tagWindowEndIndex === text.length ? tagWindowEndIndex + 1 : tagWindowEndIndex) - closingDelimiterLength + 1;
-    let closingMatch = import_xregexp.default.exec(
-      text,
-      closingDelimiterRegExp,
-      openingMatch.index + delimiter.length
-    );
-    let nextClosingMatch = closingMatch && import_xregexp.default.exec(text, closingDelimiterRegExp, closingMatch.index + 1);
-    while (nextClosingMatch) {
-      const nextWhitespace = import_xregexp.default.exec(
-        text,
-        regex.whitespace,
-        closingMatch.index + delimiter.length
-      );
-      const crossedWhitespace = nextWhitespace && nextWhitespace.index < closingMatchMaxIndex;
-      if (nextClosingMatch.index >= closingMatchMaxIndex || crossedWhitespace) {
-        break;
-      }
-      closingMatch = nextClosingMatch;
-      nextClosingMatch = import_xregexp.default.exec(text, closingDelimiterRegExp, closingMatch.index + 1);
-    }
-    if (closingMatch && closingMatch.index < closingMatchMaxIndex) {
-      const afterDelimitersIndex = closingMatch.index + closingMatch[0].length;
-      const textBeforeDelimiter = text.slice(0, openingMatch.index);
-      const textAfterDelimiter = text.slice(afterDelimitersIndex);
-      const openingReplacementString = `${spacePadded ? openingMatch.openingCapturedWhitespace || " " : ""}${replacementOpeningLiteral}`;
-      const closingReplacementString = `${replacementClosingLiteral}${spacePadded ? closingMatch.closingCapturedWhitespace || " " : ""}${asymmetric ? closingMatch[0] : ""}`;
-      const textBetweenDelimiters = text.slice(
-        openingMatch.index + openingMatch[0].length,
-        closingMatch.index
-      );
-      const replacedTextBetweenDelimiters = replaceNewlines ? import_xregexp.default.replace(textBetweenDelimiters, regex.new_line, patterns.line_break_tag_literal) : textBetweenDelimiters;
-      const replacedDelimiterText = [
-        openingReplacementString,
-        replacedTextBetweenDelimiters,
-        closingReplacementString
-      ].join("");
-      const delimiterReplacementLength = delimiter.length + closingDelimiterLength;
-      const windowOffset = replacementOpeningLiteral.length + replacementClosingLiteral.length - delimiterReplacementLength + replacedTextBetweenDelimiters.length - textBetweenDelimiters.length;
-      const newUpperWindowLimit = tagWindowEndIndex + windowOffset;
-      const nextWindowIndex = partitionWindowOnMatch ? tagWindowIndex + 1 : tagWindowIndex;
-      const nextTagWindowOffset = partitionWindowOnMatch ? 0 : afterDelimitersIndex + windowOffset - tagWindowStartIndex + 1;
-      if (partitionWindowOnMatch) {
-        currentClosedTagWindow[1] = openingMatch.index;
-        closedTagWindows.splice(nextWindowIndex, 0, [
-          closingMatch.index + closingDelimiterLength + windowOffset,
-          newUpperWindowLimit
-        ]);
-      } else {
-        currentClosedTagWindow[1] = newUpperWindowLimit;
-      }
-      utility.increment_windows(closedTagWindows.slice(nextWindowIndex + 1), windowOffset);
-      if (maxReplacements) {
-        maxReplacements -= 1;
+    return null;
+  const html_string = slack_text_parser(text, {
+    slackCallbacks: {
+      user(data) {
+        const user = users.find((u) => u.id === data.id || u.name === data.name);
+        const label = (user == null ? void 0 : user.name) || data.id || data.name;
+        return `<span class="slack_user" data-user-id="${(user == null ? void 0 : user.id) || data.id}">@${label}</span>`;
+      },
+      channel(data) {
+        const channel = channels.find((c) => c.id === data.id || c.name === data.name);
+        const label = (channel == null ? void 0 : channel.name) || data.id || data.name;
+        return `<span class="slack_channel" data-channel-id="${(channel == null ? void 0 : channel.id) || data.id}">#${label}</span>`;
       }
-      return replace_characters({
-        text: [textBeforeDelimiter, replacedDelimiterText, textAfterDelimiter].join(""),
-        delimiter,
-        replacementOpeningLiteral,
-        replacementClosingLiteral,
-        closedTagWindows,
-        options: Object.assign({}, options, { maxReplacements }),
-        tagWindowIndex: nextWindowIndex,
-        tagWindowOffset: nextTagWindowOffset
-      });
     }
-  }
-  return replace_characters({
-    text,
-    delimiter,
-    replacementOpeningLiteral,
-    replacementClosingLiteral,
-    closedTagWindows,
-    options,
-    tagWindowIndex: tagWindowIndex + 1
   });
-};
-
-// src/utils/slack_text_to_jsx.ts
-var slack_text_to_jsx = (text, parse_options) => {
-  if (!text)
-    return null;
-  const html_string = slack_text_parser(text, { markdown: parse_options.markdown });
   return (0, import_html_react_parser.default)(html_string, { trim: false });
 };
 
@@ -489,15 +154,35 @@ var ImageElement = (props) => {
   ) });
 };
 
+// src/store/useGlobalData.ts
+var import_zustand = require("zustand");
+var useBearStore = (0, import_zustand.create)((set) => ({
+  users: [],
+  channels: [],
+  setUsers: (users) => set({ users }),
+  setChannels: (channels) => set({ channels })
+}));
+var useGlobalData = () => {
+  const { users, channels, setChannels, setUsers } = useBearStore();
+  return {
+    users,
+    channels,
+    setChannels,
+    setUsers
+  };
+};
+
 // src/components/composition_objects/text_object.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TextObject = (props) => {
   const { type, text, emoji, verbatim = false } = props.data;
   const { className = "" } = props;
-  const emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
+  const { channels, users } = useGlobalData();
+  let emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
+  emoji_parsed = emoji_parsed.replace(/&gt;/g, "> ").replace(/&lt;/g, "<");
   if (type === "plain_text")
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false, users, channels }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true, users, channels }) });
 };
 
 // src/components/elements/button_element.tsx
@@ -1160,6 +845,7 @@ var BlockWrapper = (props) => {
 };
 
 // src/message.tsx
+var import_react6 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Message = (props) => {
   const {
@@ -1169,12 +855,21 @@ var Message = (props) => {
     time = /* @__PURE__ */ new Date(),
     className = "",
     style,
-    showBlockKitDebug = false
+    showBlockKitDebug = false,
+    unstyled = false,
+    data = {}
   } = props;
+  const { setChannels, setUsers } = useGlobalData();
+  (0, import_react6.useEffect)(() => {
+    if (data.users)
+      setUsers(data.users);
+    if (data.channels)
+      setChannels(data.channels);
+  }, [data]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "section",
     {
-      className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${className}`,
+      className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${unstyled ? "styles_disabled" : "styles_enabled"} ${className}`,
       style,
       children: [
         showBlockKitDebug && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(

package/dist/index.mjs

@@ -21,361 +21,26 @@ var parseEmojis = (text) => {
 
 // src/utils/slack_text_to_jsx.ts
 import parse from "html-react-parser";
-
-// src/utils/slack_text_parser.ts
-import XRegExp from "xregexp";
-var known_commands = ["here", "channel", "group", "everyone"];
-var escapeTags = (string) => ["<", string.substring(1, string.length - 1), ">"].join("");
-var regex = {
-  new_line: XRegExp.cache("\\n", "nsg"),
-  whitespace: XRegExp.cache("\\s", "ns"),
-  characters: XRegExp.cache("(?<mrkdwnCharacter>[\\*\\`\\~\\_]|&gt;)", "ng"),
-  user_mention: XRegExp.cache(
-    "<@(((?<userID>[U|W][^|>]+)(\\|(?<userName>[^>]+))?)|(?<userNameWithoutID>[^>]+))>",
-    "ng"
-  ),
-  channel_mention: XRegExp.cache(
-    "<#(((?<channelID>C[^|>]+)(\\|(?<channelName>[^>]+))?)|(?<channelNameWithoutID>[^>]+))>",
-    "ng"
-  ),
-  link: XRegExp.cache("<(?<linkUrl>https?:[^|>]+)(\\|(?<linkHtml>[^>]+))?>", "ng"),
-  mail_to: XRegExp.cache("<mailto:(?<mailTo>[^|>]+)(\\|(?<mailToName>[^>]+))?>", "ng"),
-  tel: XRegExp.cache("<tel:(?<tel>[^|>]+)(\\|(?<telName>[^>]+))?>", "ng"),
-  subteam_command: XRegExp.cache(
-    "<!subteam\\^(?<subteamID>S[^|>]+)(\\|(?<subteamName>[^>]+))?>",
-    "ng"
-  ),
-  command: XRegExp.cache("<!(?<commandLiteral>[^|>]+)(\\|(?<commandName>[^>]+))?>", "ng")
-};
-var utility = {
-  replace_username: (match, users) => {
-    const userName = match.userName || match.userNameWithoutID || match.userID && users && users[match.userID];
-    if (userName) {
-      return `<span class="user-mention">@${userName}</span>`;
-    }
-    return escapeTags(match.toString());
-  },
-  replace_channel: (match, channels) => {
-    const channelName = match.channelName || match.channelNameWithoutID || match.channelID && channels && channels[match.channelID];
-    if (channelName) {
-      return `<span class="channel-mention">#${channelName}</span>`;
-    }
-    return escapeTags(match.toString());
-  },
-  replace_mailto: (match) => {
-    return `<a href="mailto:${match.mailTo}" target="_blank" rel="noopener noreferrer">${match.mailToName || match.mailTo}</a>`;
-  },
-  replace_tel: (match) => {
-    return `<a href="tel:${match.tel}" target="_blank" rel="noopener noreferrer">${match.telName || match.tel}</a>`;
-  },
-  replace_usergroup: (match, usergroups) => {
-    const userGroupName = match.subteamName || match.subteamID && usergroups && usergroups[match.subteamID];
-    if (userGroupName) {
-      return `${userGroupName}`;
-    }
-    return escapeTags(match.toString());
-  },
-  replace_command: (match) => {
-    if (match.commandLiteral && match.commandLiteral.startsWith("subteam")) {
-      return match.toString();
-    } else if (known_commands.includes(match.commandLiteral)) {
-      return `@${match.commandLiteral}`;
-    } else if (match.commandName) {
-      return `<${match.commandName}>`;
-    }
-    return `<${match.commandLiteral}>`;
-  },
-  build_opening_delimiter_regexp: (pattern, options) => {
-    const { prefixPattern = "", escapeDelimiter = true, spacePadded = false } = options;
-    const escapedDelimiter = escapeDelimiter ? XRegExp.escape(pattern) : pattern;
-    return XRegExp.cache(
-      `${spacePadded ? "(?<openingCapturedWhitespace>^|\\s)" : ""}${prefixPattern}${escapedDelimiter}`,
-      "ns"
-    );
-  },
-  build_closing_delimiter_regexp: (delimiter, options) => {
-    const { spacePadded = false, escapeDelimiter = true } = options;
-    const escapedDelimiter = escapeDelimiter ? XRegExp.escape(delimiter) : delimiter;
-    return XRegExp.cache(
-      `${escapedDelimiter}${spacePadded ? "(?<closingCapturedWhitespace>\\s|$)" : ""}`,
-      "ns"
-    );
-  },
-  increment_windows: (windows, offset) => {
-    windows.forEach((tagWindow) => {
-      tagWindow[0] += offset;
-      tagWindow[1] += offset;
-    });
-    return windows;
-  }
-};
-var patterns = {
-  inline_code_opening: '<code class="slack_inline_code">',
-  inline_code_closing: "</code>",
-  code_opening: '<pre class="slack_code">',
-  code_closing: "</pre>",
-  bold_opening: '<strong class="slack_bold">',
-  bold_closing: "</strong>",
-  strikethrough_opening: '<del class="slack_strikethrough">',
-  strikethrough_closing: "</del>",
-  italic_opening: '<i class="slack_italics">',
-  italic_closing: "</i>",
-  blockquote_opening: '<blockquote class="slack_blockquote">',
-  blockquote_closing: "</blockquote>",
-  inline_blockquote_opening: '<blockquote class="slack_inline_blockquote">',
-  inline_blockquote_closing: "</blockquote>",
-  line_break_tag_literal: "<br />"
-};
-var slack_text_parser = (text, options) => {
+import { toHTML } from "slack-markdown";
+var slack_text_parser = toHTML;
+var slack_text_to_jsx = (text, parse_options) => {
+  const { markdown, users, channels } = parse_options;
   if (!text)
-    return text;
-  let content = text;
-  const users = options.users || {};
-  const channels = options.channels || {};
-  const usergroups = options.usergroups || {};
-  const markdown = options.markdown;
-  content = XRegExp.replace(text, regex.link, (match) => {
-    const slackMrkdwnPercentageCharsMap = {
-      "*": "%2A",
-      "&gt;": "%26gt;",
-      "`": "%27",
-      "~": "%7E",
-      _: "%5F"
-    };
-    const mrkdwnCharacter = match.mrkdwnCharacter;
-    const encodedLink = XRegExp.replace(
-      match.linkUrl,
-      regex.characters,
-      (match2) => slackMrkdwnPercentageCharsMap[mrkdwnCharacter] || match2.mrkdwnCharacter
-    );
-    return `<a href="${encodedLink}" target="_blank" rel="noopener noreferrer">${match.linkHtml || encodedLink}</a>`;
-  });
-  if (markdown)
-    content = parse_markdown(content);
-  return XRegExp.replaceEach(content, [
-    [regex.user_mention, (match) => utility.replace_username(match, users)],
-    [regex.channel_mention, (match) => utility.replace_channel(match, channels)],
-    [regex.mail_to, (match) => utility.replace_mailto(match)],
-    [regex.tel, (match) => utility.replace_tel(match)],
-    [regex.subteam_command, (match) => utility.replace_usergroup(match, usergroups)],
-    [regex.command, (match) => utility.replace_command(match)]
-  ]);
-};
-var parse_markdown = (text) => {
-  let expandedTextAndWindows = { text, windows: [[0, text.length]] };
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "*",
-    replacementOpeningLiteral: patterns.bold_opening,
-    replacementClosingLiteral: patterns.bold_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "~",
-    replacementOpeningLiteral: patterns.strikethrough_opening,
-    replacementClosingLiteral: patterns.strikethrough_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "_",
-    replacementOpeningLiteral: patterns.italic_opening,
-    replacementClosingLiteral: patterns.italic_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      spacePadded: true,
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "```",
-    replacementOpeningLiteral: patterns.code_opening,
-    replacementClosingLiteral: patterns.code_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      partitionWindowOnMatch: true,
-      replaceNewlines: true
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "`",
-    replacementOpeningLiteral: patterns.inline_code_opening,
-    replacementClosingLiteral: patterns.inline_code_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      partitionWindowOnMatch: true
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "&gt;&gt;&gt;",
-    replacementOpeningLiteral: patterns.blockquote_opening,
-    replacementClosingLiteral: patterns.blockquote_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      prefixPattern: "^\\s*",
-      endingPattern: "$",
-      replaceNewlines: true,
-      maxReplacements: 100
-    }
-  });
-  expandedTextAndWindows = replace_characters({
-    text: expandedTextAndWindows.text,
-    delimiter: "&gt;",
-    replacementOpeningLiteral: patterns.inline_blockquote_opening,
-    replacementClosingLiteral: patterns.inline_blockquote_closing,
-    closedTagWindows: expandedTextAndWindows.windows,
-    options: {
-      prefixPattern: "^\\s*",
-      endingPattern: "\\n|$",
-      maxReplacements: 100
-    }
-  });
-  return expandedTextAndWindows.text;
-};
-var replace_characters = (input) => {
-  var _a;
-  const {
-    closedTagWindows,
-    delimiter,
-    options,
-    replacementClosingLiteral,
-    replacementOpeningLiteral,
-    text,
-    tagWindowIndex = 0,
-    tagWindowOffset = 0
-  } = input;
-  const partitionWindowOnMatch = options.partitionWindowOnMatch;
-  const spacePadded = options.spacePadded;
-  const asymmetric = options.endingPattern;
-  const replaceNewlines = options.replaceNewlines;
-  const prefixPattern = options.prefixPattern;
-  let maxReplacements = options.maxReplacements;
-  const openingDelimiterRegExp = utility.build_opening_delimiter_regexp(delimiter, {
-    spacePadded,
-    prefixPattern
-  });
-  const closingDelimiterRegExp = asymmetric ? utility.build_closing_delimiter_regexp((_a = options.endingPattern) != null ? _a : "", {
-    escapeDelimiter: false
-  }) : utility.build_closing_delimiter_regexp(delimiter, { spacePadded });
-  if (tagWindowIndex >= closedTagWindows.length || maxReplacements && maxReplacements <= 0) {
-    return {
-      text,
-      windows: closedTagWindows
-    };
-  }
-  const currentClosedTagWindow = closedTagWindows[tagWindowIndex];
-  const tagWindowStartIndex = currentClosedTagWindow == null ? void 0 : currentClosedTagWindow[0];
-  const tagWindowEndIndex = currentClosedTagWindow == null ? void 0 : currentClosedTagWindow[1];
-  if (tagWindowStartIndex >= tagWindowEndIndex || tagWindowStartIndex + tagWindowOffset > tagWindowEndIndex) {
-    return replace_characters({
-      text,
-      delimiter,
-      replacementClosingLiteral,
-      replacementOpeningLiteral,
-      closedTagWindows,
-      options,
-      tagWindowIndex: tagWindowIndex + 1
-    });
-  }
-  const openingMatch = XRegExp.exec(
-    text,
-    openingDelimiterRegExp,
-    tagWindowStartIndex + tagWindowOffset
-  );
-  if (openingMatch && openingMatch.index < tagWindowEndIndex) {
-    const closingDelimiterLength = asymmetric ? 0 : delimiter.length;
-    const closingMatchMaxIndex = (tagWindowIndex === closedTagWindows.length - 1 && tagWindowEndIndex === text.length ? tagWindowEndIndex + 1 : tagWindowEndIndex) - closingDelimiterLength + 1;
-    let closingMatch = XRegExp.exec(
-      text,
-      closingDelimiterRegExp,
-      openingMatch.index + delimiter.length
-    );
-    let nextClosingMatch = closingMatch && XRegExp.exec(text, closingDelimiterRegExp, closingMatch.index + 1);
-    while (nextClosingMatch) {
-      const nextWhitespace = XRegExp.exec(
-        text,
-        regex.whitespace,
-        closingMatch.index + delimiter.length
-      );
-      const crossedWhitespace = nextWhitespace && nextWhitespace.index < closingMatchMaxIndex;
-      if (nextClosingMatch.index >= closingMatchMaxIndex || crossedWhitespace) {
-        break;
-      }
-      closingMatch = nextClosingMatch;
-      nextClosingMatch = XRegExp.exec(text, closingDelimiterRegExp, closingMatch.index + 1);
-    }
-    if (closingMatch && closingMatch.index < closingMatchMaxIndex) {
-      const afterDelimitersIndex = closingMatch.index + closingMatch[0].length;
-      const textBeforeDelimiter = text.slice(0, openingMatch.index);
-      const textAfterDelimiter = text.slice(afterDelimitersIndex);
-      const openingReplacementString = `${spacePadded ? openingMatch.openingCapturedWhitespace || " " : ""}${replacementOpeningLiteral}`;
-      const closingReplacementString = `${replacementClosingLiteral}${spacePadded ? closingMatch.closingCapturedWhitespace || " " : ""}${asymmetric ? closingMatch[0] : ""}`;
-      const textBetweenDelimiters = text.slice(
-        openingMatch.index + openingMatch[0].length,
-        closingMatch.index
-      );
-      const replacedTextBetweenDelimiters = replaceNewlines ? XRegExp.replace(textBetweenDelimiters, regex.new_line, patterns.line_break_tag_literal) : textBetweenDelimiters;
-      const replacedDelimiterText = [
-        openingReplacementString,
-        replacedTextBetweenDelimiters,
-        closingReplacementString
-      ].join("");
-      const delimiterReplacementLength = delimiter.length + closingDelimiterLength;
-      const windowOffset = replacementOpeningLiteral.length + replacementClosingLiteral.length - delimiterReplacementLength + replacedTextBetweenDelimiters.length - textBetweenDelimiters.length;
-      const newUpperWindowLimit = tagWindowEndIndex + windowOffset;
-      const nextWindowIndex = partitionWindowOnMatch ? tagWindowIndex + 1 : tagWindowIndex;
-      const nextTagWindowOffset = partitionWindowOnMatch ? 0 : afterDelimitersIndex + windowOffset - tagWindowStartIndex + 1;
-      if (partitionWindowOnMatch) {
-        currentClosedTagWindow[1] = openingMatch.index;
-        closedTagWindows.splice(nextWindowIndex, 0, [
-          closingMatch.index + closingDelimiterLength + windowOffset,
-          newUpperWindowLimit
-        ]);
-      } else {
-        currentClosedTagWindow[1] = newUpperWindowLimit;
-      }
-      utility.increment_windows(closedTagWindows.slice(nextWindowIndex + 1), windowOffset);
-      if (maxReplacements) {
-        maxReplacements -= 1;
+    return null;
+  const html_string = slack_text_parser(text, {
+    slackCallbacks: {
+      user(data) {
+        const user = users.find((u) => u.id === data.id || u.name === data.name);
+        const label = (user == null ? void 0 : user.name) || data.id || data.name;
+        return `<span class="slack_user" data-user-id="${(user == null ? void 0 : user.id) || data.id}">@${label}</span>`;
+      },
+      channel(data) {
+        const channel = channels.find((c) => c.id === data.id || c.name === data.name);
+        const label = (channel == null ? void 0 : channel.name) || data.id || data.name;
+        return `<span class="slack_channel" data-channel-id="${(channel == null ? void 0 : channel.id) || data.id}">#${label}</span>`;
       }
-      return replace_characters({
-        text: [textBeforeDelimiter, replacedDelimiterText, textAfterDelimiter].join(""),
-        delimiter,
-        replacementOpeningLiteral,
-        replacementClosingLiteral,
-        closedTagWindows,
-        options: Object.assign({}, options, { maxReplacements }),
-        tagWindowIndex: nextWindowIndex,
-        tagWindowOffset: nextTagWindowOffset
-      });
     }
-  }
-  return replace_characters({
-    text,
-    delimiter,
-    replacementOpeningLiteral,
-    replacementClosingLiteral,
-    closedTagWindows,
-    options,
-    tagWindowIndex: tagWindowIndex + 1
   });
-};
-
-// src/utils/slack_text_to_jsx.ts
-var slack_text_to_jsx = (text, parse_options) => {
-  if (!text)
-    return null;
-  const html_string = slack_text_parser(text, { markdown: parse_options.markdown });
   return parse(html_string, { trim: false });
 };
 
@@ -453,15 +118,35 @@ var ImageElement = (props) => {
   ) });
 };
 
+// src/store/useGlobalData.ts
+import { create } from "zustand";
+var useBearStore = create((set) => ({
+  users: [],
+  channels: [],
+  setUsers: (users) => set({ users }),
+  setChannels: (channels) => set({ channels })
+}));
+var useGlobalData = () => {
+  const { users, channels, setChannels, setUsers } = useBearStore();
+  return {
+    users,
+    channels,
+    setChannels,
+    setUsers
+  };
+};
+
 // src/components/composition_objects/text_object.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var TextObject = (props) => {
   const { type, text, emoji, verbatim = false } = props.data;
   const { className = "" } = props;
-  const emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
+  const { channels, users } = useGlobalData();
+  let emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
+  emoji_parsed = emoji_parsed.replace(/&gt;/g, "> ").replace(/&lt;/g, "<");
   if (type === "plain_text")
-    return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false }) });
-  return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true }) });
+    return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false, users, channels }) });
+  return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true, users, channels }) });
 };
 
 // src/components/elements/button_element.tsx
@@ -1124,6 +809,7 @@ var BlockWrapper = (props) => {
 };
 
 // src/message.tsx
+import { useEffect as useEffect5 } from "react";
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var Message = (props) => {
   const {
@@ -1133,12 +819,21 @@ var Message = (props) => {
     time = /* @__PURE__ */ new Date(),
     className = "",
     style,
-    showBlockKitDebug = false
+    showBlockKitDebug = false,
+    unstyled = false,
+    data = {}
   } = props;
+  const { setChannels, setUsers } = useGlobalData();
+  useEffect5(() => {
+    if (data.users)
+      setUsers(data.users);
+    if (data.channels)
+      setChannels(data.channels);
+  }, [data]);
   return /* @__PURE__ */ jsx17("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs9(
     "section",
     {
-      className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${className}`,
+      className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${unstyled ? "styles_disabled" : "styles_enabled"} ${className}`,
       style,
       children: [
         showBlockKitDebug && /* @__PURE__ */ jsx17(

package/dist/style.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");#slack_blocks_to_jsx :is(.pointer-events-none){pointer-events:none}#slack_blocks_to_jsx :is(.visible){visibility:visible}#slack_blocks_to_jsx :is(.absolute){position:absolute}#slack_blocks_to_jsx :is(.relative){position:relative}#slack_blocks_to_jsx :is(.-left-3){left:-.75rem}#slack_blocks_to_jsx :is(.-right-\[5px\]){right:-5px}#slack_blocks_to_jsx :is(.-top-\[5px\]){top:-5px}#slack_blocks_to_jsx :is(.left-2){left:.5rem}#slack_blocks_to_jsx :is(.right-0){right:0}#slack_blocks_to_jsx :is(.right-1){right:.25rem}#slack_blocks_to_jsx :is(.top-0){top:0}#slack_blocks_to_jsx :is(.top-1\/2){top:50%}#slack_blocks_to_jsx :is(.top-2){top:.5rem}#slack_blocks_to_jsx :is(.top-\[24px\]){top:24px}#slack_blocks_to_jsx :is(.z-10){z-index:10}#slack_blocks_to_jsx :is(.z-20){z-index:20}#slack_blocks_to_jsx :is(.z-\[10\]){z-index:10}#slack_blocks_to_jsx :is(.my-1){margin-bottom:.25rem;margin-top:.25rem}#slack_blocks_to_jsx :is(.my-2){margin-bottom:.5rem;margin-top:.5rem}#slack_blocks_to_jsx :is(.mb-1){margin-bottom:.25rem}#slack_blocks_to_jsx :is(.mb-2){margin-bottom:.5rem}#slack_blocks_to_jsx :is(.ml-2){margin-left:.5rem}#slack_blocks_to_jsx :is(.mr-2){margin-right:.5rem}#slack_blocks_to_jsx :is(.mt-1){margin-top:.25rem}#slack_blocks_to_jsx :is(.mt-2){margin-top:.5rem}#slack_blocks_to_jsx :is(.block){display:block}#slack_blocks_to_jsx :is(.inline){display:inline}#slack_blocks_to_jsx :is(.flex){display:flex}#slack_blocks_to_jsx :is(.grid){display:grid}#slack_blocks_to_jsx :is(.h-3){height:.75rem}#slack_blocks_to_jsx :is(.h-5){height:1.25rem}#slack_blocks_to_jsx :is(.h-7){height:1.75rem}#slack_blocks_to_jsx :is(.h-9){height:2.25rem}#slack_blocks_to_jsx :is(.h-\[10px\]){height:10px}#slack_blocks_to_jsx :is(.h-\[14px\]){height:14px}#slack_blocks_to_jsx :is(.h-\[15px\]){height:15px}#slack_blocks_to_jsx :is(.h-\[28px\]){height:28px}#slack_blocks_to_jsx :is(.h-\[88px\]){height:88px}#slack_blocks_to_jsx :is(.h-\[9px\]){height:9px}#slack_blocks_to_jsx :is(.h-full){height:100%}#slack_blocks_to_jsx :is(.max-h-\[240px\]){max-height:240px}#slack_blocks_to_jsx :is(.min-h-\[28px\]){min-height:28px}#slack_blocks_to_jsx :is(.w-3){width:.75rem}#slack_blocks_to_jsx :is(.w-5){width:1.25rem}#slack_blocks_to_jsx :is(.w-9){width:2.25rem}#slack_blocks_to_jsx :is(.w-\[10px\]){width:10px}#slack_blocks_to_jsx :is(.w-\[15px\]){width:15px}#slack_blocks_to_jsx :is(.w-\[190px\]){width:190px}#slack_blocks_to_jsx :is(.w-\[27px\]){width:27px}#slack_blocks_to_jsx :is(.w-\[322px\]){width:322px}#slack_blocks_to_jsx :is(.w-\[88px\]){width:88px}#slack_blocks_to_jsx :is(.w-\[9px\]){width:9px}#slack_blocks_to_jsx :is(.w-full){width:100%}#slack_blocks_to_jsx :is(.min-w-\[56px\]){min-width:56px}#slack_blocks_to_jsx :is(.max-w-\[322px\]){max-width:322px}#slack_blocks_to_jsx :is(.max-w-\[600px\]){max-width:600px}#slack_blocks_to_jsx :is(.max-w-max){max-width:-moz-max-content;max-width:max-content}#slack_blocks_to_jsx :is(.shrink-0){flex-shrink:0}#slack_blocks_to_jsx :is(.grow){flex-grow:1}#slack_blocks_to_jsx :is(.-translate-y-1\/2){--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#slack_blocks_to_jsx :is(.transform){transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#slack_blocks_to_jsx :is(.cursor-pointer){cursor:pointer}#slack_blocks_to_jsx :is(.select-none){-webkit-user-select:none;-moz-user-select:none;user-select:none}#slack_blocks_to_jsx :is(.flex-col){flex-direction:column}#slack_blocks_to_jsx :is(.flex-wrap){flex-wrap:wrap}#slack_blocks_to_jsx :is(.items-center){align-items:center}#slack_blocks_to_jsx :is(.items-baseline){align-items:baseline}#slack_blocks_to_jsx :is(.justify-center){justify-content:center}#slack_blocks_to_jsx :is(.justify-between){justify-content:space-between}#slack_blocks_to_jsx :is(.gap-1){gap:.25rem}#slack_blocks_to_jsx :is(.gap-2){gap:.5rem}#slack_blocks_to_jsx :is(.gap-3){gap:.75rem}#slack_blocks_to_jsx :is(.gap-\[5px\]){gap:5px}#slack_blocks_to_jsx :is(.overflow-auto){overflow:auto}#slack_blocks_to_jsx :is(.overflow-hidden){overflow:hidden}#slack_blocks_to_jsx :is(.truncate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#slack_blocks_to_jsx :is(.whitespace-nowrap){white-space:nowrap}#slack_blocks_to_jsx :is(.break-words){overflow-wrap:break-word}#slack_blocks_to_jsx :is(.rounded){border-radius:.25rem}#slack_blocks_to_jsx :is(.rounded-\[2px\]){border-radius:2px}#slack_blocks_to_jsx :is(.rounded-\[6px\]){border-radius:6px}#slack_blocks_to_jsx :is(.rounded-full){border-radius:9999px}#slack_blocks_to_jsx :is(.rounded-lg){border-radius:.5rem}#slack_blocks_to_jsx :is(.rounded-md){border-radius:.375rem}#slack_blocks_to_jsx :is(.border){border-width:1px}#slack_blocks_to_jsx :is(.border-\[1\.5px\]){border-width:1.5px}#slack_blocks_to_jsx :is(.border-b){border-bottom-width:1px}#slack_blocks_to_jsx :is(.border-solid){border-style:solid}#slack_blocks_to_jsx :is(.border-black-primary){--tw-border-opacity:1;border-color:rgb(29 28 29/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-black-primary\.3){border-color:rgba(29,28,29,.3)}#slack_blocks_to_jsx :is(.border-black-secondary){--tw-border-opacity:1;border-color:rgb(97 96 97/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-gray-primary){--tw-border-opacity:1;border-color:rgb(221 221 221/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-green-primary){--tw-border-opacity:1;border-color:rgb(0 122 90/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-green-primary\.3){border-color:rgba(0,122,90,.3)}#slack_blocks_to_jsx :is(.border-red-primary){--tw-border-opacity:1;border-color:rgb(224 30 90/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-red-primary\.3){border-color:rgba(224,30,90,.3)}#slack_blocks_to_jsx :is(.bg-black-primary\/\[0\.13\]){background-color:rgba(29,28,29,.13)}#slack_blocks_to_jsx :is(.bg-gray-300){--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.bg-green-secondary){--tw-bg-opacity:1;background-color:rgb(32 162 113/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.bg-white-secondary){--tw-bg-opacity:1;background-color:rgb(248 248 248/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.object-cover){-o-object-fit:cover;object-fit:cover}#slack_blocks_to_jsx :is(.p-2){padding:.5rem}#slack_blocks_to_jsx :is(.px-2){padding-left:.5rem;padding-right:.5rem}#slack_blocks_to_jsx :is(.px-6){padding-left:1.5rem;padding-right:1.5rem}#slack_blocks_to_jsx :is(.px-\[3px\]){padding-left:3px;padding-right:3px}#slack_blocks_to_jsx :is(.py-1){padding-bottom:.25rem;padding-top:.25rem}#slack_blocks_to_jsx :is(.py-3){padding-bottom:.75rem;padding-top:.75rem}#slack_blocks_to_jsx :is(.py-\[1px\]){padding-bottom:1px;padding-top:1px}#slack_blocks_to_jsx :is(.pb-\[1px\]){padding-bottom:1px}#slack_blocks_to_jsx :is(.pr-3){padding-right:.75rem}#slack_blocks_to_jsx :is(.pr-7){padding-right:1.75rem}#slack_blocks_to_jsx :is(.pt-0){padding-top:0}#slack_blocks_to_jsx :is(.text-center){text-align:center}#slack_blocks_to_jsx :is(.text-\[10px\]){font-size:10px}#slack_blocks_to_jsx :is(.text-\[15px\]){font-size:15px}#slack_blocks_to_jsx :is(.text-\[8px\]){font-size:8px}#slack_blocks_to_jsx :is(.text-base){font-size:15px;line-height:1.46668}#slack_blocks_to_jsx :is(.text-small){font-size:13px;line-height:1.38461538}#slack_blocks_to_jsx :is(.text-xs){font-size:.75rem;line-height:1rem}#slack_blocks_to_jsx :is(.font-black){font-weight:900}#slack_blocks_to_jsx :is(.font-normal){font-weight:400}#slack_blocks_to_jsx :is(.font-semibold){font-weight:600}#slack_blocks_to_jsx :is(.uppercase){text-transform:uppercase}#slack_blocks_to_jsx :is(.leading-\[12\.5px\]){line-height:12.5px}#slack_blocks_to_jsx :is(.leading-\[17\.6px\]){line-height:17.6px}#slack_blocks_to_jsx :is(.leading-\[8px\]){line-height:8px}#slack_blocks_to_jsx :is(.text-black-primary){--tw-text-opacity:1;color:rgb(29 28 29/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-black-primary\.3){color:rgba(29,28,29,.3)}#slack_blocks_to_jsx :is(.text-black-primary\/\[0\.7\]){color:rgba(29,28,29,.7)}#slack_blocks_to_jsx :is(.text-black-secondary){--tw-text-opacity:1;color:rgb(97 96 97/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-blue-500){--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-blue-primary){--tw-text-opacity:1;color:rgb(18 100 163/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-green-primary){--tw-text-opacity:1;color:rgb(0 122 90/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-red-primary){--tw-text-opacity:1;color:rgb(224 30 90/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.underline){text-decoration-line:underline}#slack_blocks_to_jsx :is(.shadow-custom_shadow-1){--tw-shadow-color:rgba(29,28,29,.13) 0px 0px 0px 1px,rgba(0,0,0,.12) 0px 5px 10px 0px;--tw-shadow:var(--tw-shadow-colored)}#slack_blocks_to_jsx :is(.outline){outline-style:solid}#slack_blocks_to_jsx :is(.filter){filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.slack_blocks_to_jsx{font-family:Open Sans,sans-serif!important;white-space:pre-wrap!important}.slack_blocks_to_jsx *,.slack_blocks_to_jsx :after,.slack_blocks_to_jsx :before{border:0 solid #e5e7eb;box-sizing:border-box}.slack_blocks_to_jsx :after,.slack_blocks_to_jsx :before{--tw-content:""}.slack_blocks_to_jsx :host,.slack_blocks_to_jsx html{line-height:1.5;-webkit-text-size-adjust:100%;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}.slack_blocks_to_jsx body{line-height:inherit;margin:0}.slack_blocks_to_jsx hr{border-top-width:1px;color:inherit;height:0}.slack_blocks_to_jsx abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.slack_blocks_to_jsx h1,.slack_blocks_to_jsx h2,.slack_blocks_to_jsx h3,.slack_blocks_to_jsx h4,.slack_blocks_to_jsx h5,.slack_blocks_to_jsx h6{font-size:inherit;font-weight:inherit}.slack_blocks_to_jsx a{color:inherit;text-decoration:inherit}.slack_blocks_to_jsx b,.slack_blocks_to_jsx strong{font-weight:bolder}.slack_blocks_to_jsx code,.slack_blocks_to_jsx kbd,.slack_blocks_to_jsx pre,.slack_blocks_to_jsx samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}.slack_blocks_to_jsx small{font-size:80%}.slack_blocks_to_jsx sub,.slack_blocks_to_jsx sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}.slack_blocks_to_jsx sub{bottom:-.25em}.slack_blocks_to_jsx sup{top:-.5em}.slack_blocks_to_jsx table{border-collapse:collapse;border-color:inherit;text-indent:0}.slack_blocks_to_jsx button,.slack_blocks_to_jsx input,.slack_blocks_to_jsx optgroup,.slack_blocks_to_jsx select,.slack_blocks_to_jsx textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}.slack_blocks_to_jsx button,.slack_blocks_to_jsx select{text-transform:none}.slack_blocks_to_jsx [type=button],.slack_blocks_to_jsx [type=reset],.slack_blocks_to_jsx [type=submit],.slack_blocks_to_jsx button{-webkit-appearance:button;background-color:initial;background-image:none}.slack_blocks_to_jsx :-moz-focusring{outline:auto}.slack_blocks_to_jsx :-moz-ui-invalid{box-shadow:none}.slack_blocks_to_jsx progress{vertical-align:initial}.slack_blocks_to_jsx ::-webkit-inner-spin-button,.slack_blocks_to_jsx ::-webkit-outer-spin-button{height:auto}.slack_blocks_to_jsx [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.slack_blocks_to_jsx ::-webkit-search-decoration{-webkit-appearance:none}.slack_blocks_to_jsx ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.slack_blocks_to_jsx summary{display:list-item}.slack_blocks_to_jsx blockquote,.slack_blocks_to_jsx dd,.slack_blocks_to_jsx dl,.slack_blocks_to_jsx fieldset,.slack_blocks_to_jsx figure,.slack_blocks_to_jsx h1,.slack_blocks_to_jsx h2,.slack_blocks_to_jsx h3,.slack_blocks_to_jsx h4,.slack_blocks_to_jsx h5,.slack_blocks_to_jsx h6,.slack_blocks_to_jsx hr,.slack_blocks_to_jsx p,.slack_blocks_to_jsx pre{margin:0}.slack_blocks_to_jsx fieldset,.slack_blocks_to_jsx legend{padding:0}.slack_blocks_to_jsx menu,.slack_blocks_to_jsx ol,.slack_blocks_to_jsx ul{list-style:none;margin:0;padding:0}.slack_blocks_to_jsx dialog{padding:0}.slack_blocks_to_jsx textarea{resize:vertical}.slack_blocks_to_jsx input::-moz-placeholder,.slack_blocks_to_jsx textarea::-moz-placeholder{color:#9ca3af;opacity:1}.slack_blocks_to_jsx input::placeholder,.slack_blocks_to_jsx textarea::placeholder{color:#9ca3af;opacity:1}.slack_blocks_to_jsx [role=button],.slack_blocks_to_jsx button{cursor:pointer}.slack_blocks_to_jsx :disabled{cursor:default}.slack_blocks_to_jsx audio,.slack_blocks_to_jsx canvas,.slack_blocks_to_jsx embed,.slack_blocks_to_jsx iframe,.slack_blocks_to_jsx img,.slack_blocks_to_jsx object,.slack_blocks_to_jsx svg,.slack_blocks_to_jsx video{display:block;vertical-align:middle}.slack_blocks_to_jsx img,.slack_blocks_to_jsx video{height:auto;max-width:100%}.slack_blocks_to_jsx [hidden]{display:none}.slack_blocks_to_jsx *,.slack_blocks_to_jsx ::backdrop,.slack_blocks_to_jsx :after,.slack_blocks_to_jsx :before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.slack_blocks_to_jsx .slack_code{display:block;margin-bottom:.25rem;margin-top:.25rem;padding:.5rem;width:100%}.slack_blocks_to_jsx .slack_code,.slack_blocks_to_jsx .slack_inline_code{background-color:rgba(29,28,29,.04);border-color:rgba(29,28,29,.13);border-radius:3px;border-width:1px;font-size:.75rem;line-height:1rem;line-height:1.5;overflow-wrap:break-word;white-space:pre-wrap}.slack_blocks_to_jsx .slack_inline_code{display:inline-block;padding:.125rem 3px 1px;--tw-text-opacity:1;color:rgb(224 30 90/var(--tw-text-opacity))}.slack_blocks_to_jsx .slack_bold,.slack_blocks_to_jsx .slack_bold code{font-weight:600}.slack_blocks_to_jsx .slack_blockquote{display:block}.slack_blocks_to_jsx .slack_inline_blockquote{display:inline-block}#slack_blocks_to_jsx :is(.hover\:bg-blue-primary:hover){--tw-bg-opacity:1;background-color:rgb(18 100 163/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.hover\:text-white-primary:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.focus\:outline-none:focus){outline:2px solid transparent;outline-offset:2px}#slack_blocks_to_jsx :is(.group:hover .group-hover\:border-white-primary){--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.group:hover .group-hover\:bg-blue-primary){--tw-bg-opacity:1;background-color:rgb(18 100 163/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.group:hover .group-hover\:text-white-primary){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");#slack_blocks_to_jsx :is(.pointer-events-none){pointer-events:none}#slack_blocks_to_jsx :is(.visible){visibility:visible}#slack_blocks_to_jsx :is(.absolute){position:absolute}#slack_blocks_to_jsx :is(.relative){position:relative}#slack_blocks_to_jsx :is(.-left-3){left:-.75rem}#slack_blocks_to_jsx :is(.-right-\[5px\]){right:-5px}#slack_blocks_to_jsx :is(.-top-\[5px\]){top:-5px}#slack_blocks_to_jsx :is(.left-2){left:.5rem}#slack_blocks_to_jsx :is(.right-0){right:0}#slack_blocks_to_jsx :is(.right-1){right:.25rem}#slack_blocks_to_jsx :is(.top-0){top:0}#slack_blocks_to_jsx :is(.top-1\/2){top:50%}#slack_blocks_to_jsx :is(.top-2){top:.5rem}#slack_blocks_to_jsx :is(.top-\[24px\]){top:24px}#slack_blocks_to_jsx :is(.z-10){z-index:10}#slack_blocks_to_jsx :is(.z-20){z-index:20}#slack_blocks_to_jsx :is(.z-\[10\]){z-index:10}#slack_blocks_to_jsx :is(.my-1){margin-bottom:.25rem;margin-top:.25rem}#slack_blocks_to_jsx :is(.my-2){margin-bottom:.5rem;margin-top:.5rem}#slack_blocks_to_jsx :is(.mb-1){margin-bottom:.25rem}#slack_blocks_to_jsx :is(.mb-2){margin-bottom:.5rem}#slack_blocks_to_jsx :is(.ml-2){margin-left:.5rem}#slack_blocks_to_jsx :is(.mr-2){margin-right:.5rem}#slack_blocks_to_jsx :is(.mt-1){margin-top:.25rem}#slack_blocks_to_jsx :is(.mt-2){margin-top:.5rem}#slack_blocks_to_jsx :is(.block){display:block}#slack_blocks_to_jsx :is(.inline){display:inline}#slack_blocks_to_jsx :is(.flex){display:flex}#slack_blocks_to_jsx :is(.grid){display:grid}#slack_blocks_to_jsx :is(.h-3){height:.75rem}#slack_blocks_to_jsx :is(.h-5){height:1.25rem}#slack_blocks_to_jsx :is(.h-7){height:1.75rem}#slack_blocks_to_jsx :is(.h-9){height:2.25rem}#slack_blocks_to_jsx :is(.h-\[10px\]){height:10px}#slack_blocks_to_jsx :is(.h-\[14px\]){height:14px}#slack_blocks_to_jsx :is(.h-\[15px\]){height:15px}#slack_blocks_to_jsx :is(.h-\[28px\]){height:28px}#slack_blocks_to_jsx :is(.h-\[88px\]){height:88px}#slack_blocks_to_jsx :is(.h-\[9px\]){height:9px}#slack_blocks_to_jsx :is(.h-full){height:100%}#slack_blocks_to_jsx :is(.max-h-\[240px\]){max-height:240px}#slack_blocks_to_jsx :is(.min-h-\[28px\]){min-height:28px}#slack_blocks_to_jsx :is(.w-3){width:.75rem}#slack_blocks_to_jsx :is(.w-5){width:1.25rem}#slack_blocks_to_jsx :is(.w-9){width:2.25rem}#slack_blocks_to_jsx :is(.w-\[10px\]){width:10px}#slack_blocks_to_jsx :is(.w-\[15px\]){width:15px}#slack_blocks_to_jsx :is(.w-\[190px\]){width:190px}#slack_blocks_to_jsx :is(.w-\[27px\]){width:27px}#slack_blocks_to_jsx :is(.w-\[322px\]){width:322px}#slack_blocks_to_jsx :is(.w-\[88px\]){width:88px}#slack_blocks_to_jsx :is(.w-\[9px\]){width:9px}#slack_blocks_to_jsx :is(.w-full){width:100%}#slack_blocks_to_jsx :is(.min-w-\[56px\]){min-width:56px}#slack_blocks_to_jsx :is(.max-w-\[322px\]){max-width:322px}#slack_blocks_to_jsx :is(.max-w-\[600px\]){max-width:600px}#slack_blocks_to_jsx :is(.max-w-max){max-width:-moz-max-content;max-width:max-content}#slack_blocks_to_jsx :is(.shrink-0){flex-shrink:0}#slack_blocks_to_jsx :is(.grow){flex-grow:1}#slack_blocks_to_jsx :is(.-translate-y-1\/2){--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#slack_blocks_to_jsx :is(.transform){transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#slack_blocks_to_jsx :is(.cursor-pointer){cursor:pointer}#slack_blocks_to_jsx :is(.select-none){-webkit-user-select:none;-moz-user-select:none;user-select:none}#slack_blocks_to_jsx :is(.flex-col){flex-direction:column}#slack_blocks_to_jsx :is(.flex-wrap){flex-wrap:wrap}#slack_blocks_to_jsx :is(.items-center){align-items:center}#slack_blocks_to_jsx :is(.items-baseline){align-items:baseline}#slack_blocks_to_jsx :is(.justify-center){justify-content:center}#slack_blocks_to_jsx :is(.justify-between){justify-content:space-between}#slack_blocks_to_jsx :is(.gap-1){gap:.25rem}#slack_blocks_to_jsx :is(.gap-2){gap:.5rem}#slack_blocks_to_jsx :is(.gap-3){gap:.75rem}#slack_blocks_to_jsx :is(.gap-\[5px\]){gap:5px}#slack_blocks_to_jsx :is(.overflow-auto){overflow:auto}#slack_blocks_to_jsx :is(.overflow-hidden){overflow:hidden}#slack_blocks_to_jsx :is(.truncate){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#slack_blocks_to_jsx :is(.whitespace-nowrap){white-space:nowrap}#slack_blocks_to_jsx :is(.break-words){overflow-wrap:break-word}#slack_blocks_to_jsx :is(.rounded){border-radius:.25rem}#slack_blocks_to_jsx :is(.rounded-\[2px\]){border-radius:2px}#slack_blocks_to_jsx :is(.rounded-\[6px\]){border-radius:6px}#slack_blocks_to_jsx :is(.rounded-full){border-radius:9999px}#slack_blocks_to_jsx :is(.rounded-lg){border-radius:.5rem}#slack_blocks_to_jsx :is(.rounded-md){border-radius:.375rem}#slack_blocks_to_jsx :is(.border){border-width:1px}#slack_blocks_to_jsx :is(.border-\[1\.5px\]){border-width:1.5px}#slack_blocks_to_jsx :is(.border-b){border-bottom-width:1px}#slack_blocks_to_jsx :is(.border-solid){border-style:solid}#slack_blocks_to_jsx :is(.border-black-primary){--tw-border-opacity:1;border-color:rgb(29 28 29/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-black-primary\.3){border-color:rgba(29,28,29,.3)}#slack_blocks_to_jsx :is(.border-black-secondary){--tw-border-opacity:1;border-color:rgb(97 96 97/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-gray-primary){--tw-border-opacity:1;border-color:rgb(221 221 221/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-green-primary){--tw-border-opacity:1;border-color:rgb(0 122 90/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-green-primary\.3){border-color:rgba(0,122,90,.3)}#slack_blocks_to_jsx :is(.border-red-primary){--tw-border-opacity:1;border-color:rgb(224 30 90/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.border-red-primary\.3){border-color:rgba(224,30,90,.3)}#slack_blocks_to_jsx :is(.bg-black-primary\/\[0\.13\]){background-color:rgba(29,28,29,.13)}#slack_blocks_to_jsx :is(.bg-gray-300){--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.bg-green-secondary){--tw-bg-opacity:1;background-color:rgb(32 162 113/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.bg-white-secondary){--tw-bg-opacity:1;background-color:rgb(248 248 248/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.object-cover){-o-object-fit:cover;object-fit:cover}#slack_blocks_to_jsx :is(.p-2){padding:.5rem}#slack_blocks_to_jsx :is(.px-2){padding-left:.5rem;padding-right:.5rem}#slack_blocks_to_jsx :is(.px-6){padding-left:1.5rem;padding-right:1.5rem}#slack_blocks_to_jsx :is(.px-\[3px\]){padding-left:3px;padding-right:3px}#slack_blocks_to_jsx :is(.py-1){padding-bottom:.25rem;padding-top:.25rem}#slack_blocks_to_jsx :is(.py-3){padding-bottom:.75rem;padding-top:.75rem}#slack_blocks_to_jsx :is(.py-\[1px\]){padding-bottom:1px;padding-top:1px}#slack_blocks_to_jsx :is(.pb-\[1px\]){padding-bottom:1px}#slack_blocks_to_jsx :is(.pr-3){padding-right:.75rem}#slack_blocks_to_jsx :is(.pr-7){padding-right:1.75rem}#slack_blocks_to_jsx :is(.pt-0){padding-top:0}#slack_blocks_to_jsx :is(.text-center){text-align:center}#slack_blocks_to_jsx :is(.text-\[10px\]){font-size:10px}#slack_blocks_to_jsx :is(.text-\[15px\]){font-size:15px}#slack_blocks_to_jsx :is(.text-\[8px\]){font-size:8px}#slack_blocks_to_jsx :is(.text-base){font-size:15px;line-height:1.46668}#slack_blocks_to_jsx :is(.text-small){font-size:13px;line-height:1.38461538}#slack_blocks_to_jsx :is(.text-xs){font-size:.75rem;line-height:1rem}#slack_blocks_to_jsx :is(.font-black){font-weight:900}#slack_blocks_to_jsx :is(.font-normal){font-weight:400}#slack_blocks_to_jsx :is(.font-semibold){font-weight:600}#slack_blocks_to_jsx :is(.uppercase){text-transform:uppercase}#slack_blocks_to_jsx :is(.leading-\[12\.5px\]){line-height:12.5px}#slack_blocks_to_jsx :is(.leading-\[17\.6px\]){line-height:17.6px}#slack_blocks_to_jsx :is(.leading-\[8px\]){line-height:8px}#slack_blocks_to_jsx :is(.text-black-primary){--tw-text-opacity:1;color:rgb(29 28 29/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-black-primary\.3){color:rgba(29,28,29,.3)}#slack_blocks_to_jsx :is(.text-black-primary\/\[0\.7\]){color:rgba(29,28,29,.7)}#slack_blocks_to_jsx :is(.text-black-secondary){--tw-text-opacity:1;color:rgb(97 96 97/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-blue-500){--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-blue-primary){--tw-text-opacity:1;color:rgb(18 100 163/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-green-primary){--tw-text-opacity:1;color:rgb(0 122 90/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.text-red-primary){--tw-text-opacity:1;color:rgb(224 30 90/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.underline){text-decoration-line:underline}#slack_blocks_to_jsx :is(.shadow-custom_shadow-1){--tw-shadow-color:rgba(29,28,29,.13) 0px 0px 0px 1px,rgba(0,0,0,.12) 0px 5px 10px 0px;--tw-shadow:var(--tw-shadow-colored)}#slack_blocks_to_jsx :is(.outline){outline-style:solid}#slack_blocks_to_jsx :is(.filter){filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.slack_blocks_to_jsx.styles_enabled{font-family:Open Sans,sans-serif!important;white-space:pre-wrap!important}.slack_blocks_to_jsx.styles_enabled *,.slack_blocks_to_jsx.styles_enabled :after,.slack_blocks_to_jsx.styles_enabled :before{border:0 solid #e5e7eb;box-sizing:border-box}.slack_blocks_to_jsx.styles_enabled :after,.slack_blocks_to_jsx.styles_enabled :before{--tw-content:""}.slack_blocks_to_jsx.styles_enabled :host,.slack_blocks_to_jsx.styles_enabled html{line-height:1.5;-webkit-text-size-adjust:100%;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}.slack_blocks_to_jsx.styles_enabled body{line-height:inherit;margin:0}.slack_blocks_to_jsx.styles_enabled hr{border-top-width:1px;color:inherit;height:0}.slack_blocks_to_jsx.styles_enabled abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.slack_blocks_to_jsx.styles_enabled h1,.slack_blocks_to_jsx.styles_enabled h2,.slack_blocks_to_jsx.styles_enabled h3,.slack_blocks_to_jsx.styles_enabled h4,.slack_blocks_to_jsx.styles_enabled h5,.slack_blocks_to_jsx.styles_enabled h6{font-size:inherit;font-weight:inherit}.slack_blocks_to_jsx.styles_enabled a{color:inherit;text-decoration:inherit}.slack_blocks_to_jsx.styles_enabled b,.slack_blocks_to_jsx.styles_enabled strong{font-weight:bolder}.slack_blocks_to_jsx.styles_enabled code,.slack_blocks_to_jsx.styles_enabled kbd,.slack_blocks_to_jsx.styles_enabled pre,.slack_blocks_to_jsx.styles_enabled samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}.slack_blocks_to_jsx.styles_enabled small{font-size:80%}.slack_blocks_to_jsx.styles_enabled sub,.slack_blocks_to_jsx.styles_enabled sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}.slack_blocks_to_jsx.styles_enabled sub{bottom:-.25em}.slack_blocks_to_jsx.styles_enabled sup{top:-.5em}.slack_blocks_to_jsx.styles_enabled table{border-collapse:collapse;border-color:inherit;text-indent:0}.slack_blocks_to_jsx.styles_enabled button,.slack_blocks_to_jsx.styles_enabled input,.slack_blocks_to_jsx.styles_enabled optgroup,.slack_blocks_to_jsx.styles_enabled select,.slack_blocks_to_jsx.styles_enabled textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}.slack_blocks_to_jsx.styles_enabled button,.slack_blocks_to_jsx.styles_enabled select{text-transform:none}.slack_blocks_to_jsx.styles_enabled [type=button],.slack_blocks_to_jsx.styles_enabled [type=reset],.slack_blocks_to_jsx.styles_enabled [type=submit],.slack_blocks_to_jsx.styles_enabled button{-webkit-appearance:button;background-color:initial;background-image:none}.slack_blocks_to_jsx.styles_enabled :-moz-focusring{outline:auto}.slack_blocks_to_jsx.styles_enabled :-moz-ui-invalid{box-shadow:none}.slack_blocks_to_jsx.styles_enabled progress{vertical-align:initial}.slack_blocks_to_jsx.styles_enabled ::-webkit-inner-spin-button,.slack_blocks_to_jsx.styles_enabled ::-webkit-outer-spin-button{height:auto}.slack_blocks_to_jsx.styles_enabled [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.slack_blocks_to_jsx.styles_enabled ::-webkit-search-decoration{-webkit-appearance:none}.slack_blocks_to_jsx.styles_enabled ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.slack_blocks_to_jsx.styles_enabled summary{display:list-item}.slack_blocks_to_jsx.styles_enabled blockquote,.slack_blocks_to_jsx.styles_enabled dd,.slack_blocks_to_jsx.styles_enabled dl,.slack_blocks_to_jsx.styles_enabled fieldset,.slack_blocks_to_jsx.styles_enabled figure,.slack_blocks_to_jsx.styles_enabled h1,.slack_blocks_to_jsx.styles_enabled h2,.slack_blocks_to_jsx.styles_enabled h3,.slack_blocks_to_jsx.styles_enabled h4,.slack_blocks_to_jsx.styles_enabled h5,.slack_blocks_to_jsx.styles_enabled h6,.slack_blocks_to_jsx.styles_enabled hr,.slack_blocks_to_jsx.styles_enabled p,.slack_blocks_to_jsx.styles_enabled pre{margin:0}.slack_blocks_to_jsx.styles_enabled fieldset,.slack_blocks_to_jsx.styles_enabled legend{padding:0}.slack_blocks_to_jsx.styles_enabled menu,.slack_blocks_to_jsx.styles_enabled ol,.slack_blocks_to_jsx.styles_enabled ul{list-style:none;margin:0;padding:0}.slack_blocks_to_jsx.styles_enabled dialog{padding:0}.slack_blocks_to_jsx.styles_enabled textarea{resize:vertical}.slack_blocks_to_jsx.styles_enabled input::-moz-placeholder,.slack_blocks_to_jsx.styles_enabled textarea::-moz-placeholder{color:#9ca3af;opacity:1}.slack_blocks_to_jsx.styles_enabled input::placeholder,.slack_blocks_to_jsx.styles_enabled textarea::placeholder{color:#9ca3af;opacity:1}.slack_blocks_to_jsx.styles_enabled [role=button],.slack_blocks_to_jsx.styles_enabled button{cursor:pointer}.slack_blocks_to_jsx.styles_enabled :disabled{cursor:default}.slack_blocks_to_jsx.styles_enabled audio,.slack_blocks_to_jsx.styles_enabled canvas,.slack_blocks_to_jsx.styles_enabled embed,.slack_blocks_to_jsx.styles_enabled iframe,.slack_blocks_to_jsx.styles_enabled img,.slack_blocks_to_jsx.styles_enabled object,.slack_blocks_to_jsx.styles_enabled svg,.slack_blocks_to_jsx.styles_enabled video{display:block;vertical-align:middle}.slack_blocks_to_jsx.styles_enabled img,.slack_blocks_to_jsx.styles_enabled video{height:auto;max-width:100%}.slack_blocks_to_jsx.styles_enabled [hidden]{display:none}.slack_blocks_to_jsx.styles_enabled *,.slack_blocks_to_jsx.styles_enabled ::backdrop,.slack_blocks_to_jsx.styles_enabled :after,.slack_blocks_to_jsx.styles_enabled :before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.slack_blocks_to_jsx.styles_enabled .slack_code{display:block;margin-bottom:.25rem;margin-top:.25rem;padding:.5rem;width:100%}.slack_blocks_to_jsx.styles_enabled .slack_code,.slack_blocks_to_jsx.styles_enabled .slack_inline_code{background-color:rgba(29,28,29,.04);border-color:rgba(29,28,29,.13);border-radius:3px;border-width:1px;font-size:.75rem;line-height:1rem;line-height:1.5;overflow-wrap:break-word;white-space:pre-wrap}.slack_blocks_to_jsx.styles_enabled .slack_inline_code{display:inline-block;padding:.125rem 3px 1px;--tw-text-opacity:1;color:rgb(224 30 90/var(--tw-text-opacity))}.slack_blocks_to_jsx.styles_enabled .slack_bold,.slack_blocks_to_jsx.styles_enabled .slack_bold code{font-weight:600}.slack_blocks_to_jsx.styles_enabled .slack_blockquote{display:block}.slack_blocks_to_jsx.styles_enabled .slack_inline_blockquote{display:inline-block}.slack_blocks_to_jsx.styles_enabled blockquote{padding-left:16px;position:relative}.slack_blocks_to_jsx.styles_enabled blockquote:before{background:#ddd;border-radius:8px;bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:4px}.slack_blocks_to_jsx.styles_enabled .slack_channel,.slack_blocks_to_jsx.styles_enabled .slack_user{background:rgba(29,155,209,.1);color:#1264a3;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.slack_blocks_to_jsx.styles_disabled>*{all:unset!important}#slack_blocks_to_jsx :is(.hover\:bg-blue-primary:hover){--tw-bg-opacity:1;background-color:rgb(18 100 163/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.hover\:text-white-primary:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}#slack_blocks_to_jsx :is(.focus\:outline-none:focus){outline:2px solid transparent;outline-offset:2px}#slack_blocks_to_jsx :is(.group:hover .group-hover\:border-white-primary){--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}#slack_blocks_to_jsx :is(.group:hover .group-hover\:bg-blue-primary){--tw-bg-opacity:1;background-color:rgb(18 100 163/var(--tw-bg-opacity))}#slack_blocks_to_jsx :is(.group:hover .group-hover\:text-white-primary){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}

package/package.json

@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -22,7 +22,9 @@
   "dependencies": {
     "html-react-parser": "^4.2.2",
     "node-emoji": "^2.1.0",
-    "xregexp": "^5.1.1"
+    "slack-markdown": "^0.3.0",
+    "xregexp": "^5.1.1",
+    "zustand": "^4.5.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/readme.md

@@ -1,5 +1,7 @@
 # Slack Blocks to JSX
 
+Playground - https://slack-block-to-jsx-playground.vercel.app/
+
 ### How to use
 
 1. Install the Library